/* ==========================================================================
   SARACEN THREADS — THE HOUSE
   Every colour, ground, surface, edge and ornament on this website.
   The only paint in the build. saracen.css, shop.css and layout.css carry
   geometry and nothing else; _ornament.css is deleted.

   WHY IT IS ONE FILE NOW
   A `.sec.light::after` in _ornament.css was painting cream at 90% opacity
   over a whole section, sitting on top of a `.light{background:… !important}`
   that had already won the argument underneath it. Both were mine to own and
   neither could see the other. Five stylesheets each adding a layer is not a
   cascade, it is a queue, and whoever thought of something last wins. So there
   is one owner. Do not put a colour anywhere else.

   THE POSITION
   A dealer's room. Objects on dark walls under pooled light, each one
   labelled, none of them crowded.

   THE GRAMMAR, IN TWO HALVES
   MUGHAL is the OBJECT — medallion, spandrels, pendants. It exists on the
   loom and we never redraw or recolour it.
   INDO-SARACENIC is the HOUSE — cusped arch, jali, khatam, aina-kari,
   hairline gold. It is the frame, and the frame never competes.

   FOUR RULES
   1  Dark ground. Always. No pale section, no cream band, no light mode.
   2  The object is the brightest thing on screen.
   3  Gold is a metal, so it has range. Flat yellow reads cheap.
   4  One red — madder. Sealing wax, not paint.

   WHAT MAKES A SURFACE LOOK EXPENSIVE, since it is never the hex
   LIGHT · a lit hairline where a lamp would fall, a darkened foot
   METAL · gold travelling across an edge, not sitting flat on it
   TEXTURE · a real jali under the fill, so it is material not paint
   ORNAMENT AT THE DECISION · the khatam where the radio dot was
   ========================================================================== */

:root{
  /* grounds — warm blacks. bistre and bitumen, never neutral. a cold black
     reads as software; a warm black reads as an old building with lamps on. */
  --ground-0:#0A0705;
  --ground-1:#120C07;   /* THE PAGE. locked — the ad creative uses this hex. */
  --ground-2:#1A1109;
  --ground-3:#241810;

  /* gold in five steps, because a metal has range */
  --gold-0:#4A3618; --gold-1:#6E5326; --gold-2:#A98B4B;
  --gold-3:#D8C596; --gold-4:#F0DCA8;

  /* ink — every step one lighter than it would be on paper, because reversed
     type blooms and thins on a phone. nothing below 400 weight. */
  --ink-0:#FBF6EC; --ink-1:#F4ECDC; --ink-2:#E2D5BC;
  --ink-3:#A8977A; --ink-4:#6E6250;

  --lac-0:#3E1410; --lac-1:#6E2A22; --lac-2:#8F4235;

  --rule:rgba(169,139,75,.26);
  --rule-2:rgba(169,139,75,.44);
  --rule-faint:rgba(169,139,75,.12);
  --hair:1px;

  --metal:linear-gradient(135deg,var(--gold-0) 0%,var(--gold-2) 22%,
          var(--gold-4) 44%,var(--gold-2) 62%,var(--gold-0) 100%);
  --metal-soft:linear-gradient(135deg,rgba(74,54,24,.55) 0%,rgba(169,139,75,.75) 30%,
          rgba(240,220,168,.95) 50%,rgba(169,139,75,.75) 70%,rgba(74,54,24,.55) 100%);

  --display:"Cormorant Garamond",Garamond,"Times New Roman",serif;
  --body:"Jost","Helvetica Neue",Arial,sans-serif;
  --track-label:.28em; --track-mark:.22em;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-long:cubic-bezier(.19,1,.22,1);

  --jali:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath fill='%23A98B4B' fill-rule='evenodd' d='M14.4,0.0L5.5,2.3L10.2,10.2L2.3,5.5L0.0,14.4L-2.3,5.5L-10.2,10.2L-5.5,2.3L-14.4,0.0L-5.5,-2.3L-10.2,-10.2L-2.3,-5.5L-0.0,-14.4L2.3,-5.5L10.2,-10.2L5.5,-2.3ZM62.4,0.0L53.5,2.3L58.2,10.2L50.3,5.5L48.0,14.4L45.7,5.5L37.8,10.2L42.5,2.3L33.6,0.0L42.5,-2.3L37.8,-10.2L45.7,-5.5L48.0,-14.4L50.3,-5.5L58.2,-10.2L53.5,-2.3ZM14.4,48.0L5.5,50.3L10.2,58.2L2.3,53.5L0.0,62.4L-2.3,53.5L-10.2,58.2L-5.5,50.3L-14.4,48.0L-5.5,45.7L-10.2,37.8L-2.3,42.5L-0.0,33.6L2.3,42.5L10.2,37.8L5.5,45.7ZM62.4,48.0L53.5,50.3L58.2,58.2L50.3,53.5L48.0,62.4L45.7,53.5L37.8,58.2L42.5,50.3L33.6,48.0L42.5,45.7L37.8,37.8L45.7,42.5L48.0,33.6L50.3,42.5L58.2,37.8L53.5,45.7ZM38.4,24.0L29.5,26.3L34.2,34.2L26.3,29.5L24.0,38.4L21.7,29.5L13.8,34.2L18.5,26.3L9.6,24.0L18.5,21.7L13.8,13.8L21.7,18.5L24.0,9.6L26.3,18.5L34.2,13.8L29.5,21.7ZM30.4,2.7L26.0,2.0L26.7,6.4L24.0,2.8L21.3,6.4L22.0,2.0L17.6,2.7L21.2,0.0L17.6,-2.7L22.0,-2.0L21.3,-6.4L24.0,-2.8L26.7,-6.4L26.0,-2.0L30.4,-2.7L26.8,-0.0ZM6.4,26.7L2.0,26.0L2.7,30.4L0.0,26.8L-2.7,30.4L-2.0,26.0L-6.4,26.7L-2.8,24.0L-6.4,21.3L-2.0,22.0L-2.7,17.6L-0.0,21.2L2.7,17.6L2.0,22.0L6.4,21.3L2.8,24.0ZM54.4,26.7L50.0,26.0L50.7,30.4L48.0,26.8L45.3,30.4L46.0,26.0L41.6,26.7L45.2,24.0L41.6,21.3L46.0,22.0L45.3,17.6L48.0,21.2L50.7,17.6L50.0,22.0L54.4,21.3L50.8,24.0ZM30.4,50.7L26.0,50.0L26.7,54.4L24.0,50.8L21.3,54.4L22.0,50.0L17.6,50.7L21.2,48.0L17.6,45.3L22.0,46.0L21.3,41.6L24.0,45.2L26.7,41.6L26.0,46.0L30.4,45.3L26.8,48.0Z'/%3E%3C/svg%3E");
  --jali-fine:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cpath fill='%23A98B4B' fill-rule='evenodd' d='M17.8,0.0L6.8,2.8L12.6,12.6L2.8,6.8L0.0,17.8L-2.8,6.8L-12.6,12.6L-6.8,2.8L-17.8,0.0L-6.8,-2.8L-12.6,-12.6L-2.8,-6.8L-0.0,-17.8L2.8,-6.8L12.6,-12.6L6.8,-2.8ZM113.8,0.0L102.8,2.8L108.6,12.6L98.8,6.8L96.0,17.8L93.2,6.8L83.4,12.6L89.2,2.8L78.2,0.0L89.2,-2.8L83.4,-12.6L93.2,-6.8L96.0,-17.8L98.8,-6.8L108.6,-12.6L102.8,-2.8ZM17.8,96.0L6.8,98.8L12.6,108.6L2.8,102.8L0.0,113.8L-2.8,102.8L-12.6,108.6L-6.8,98.8L-17.8,96.0L-6.8,93.2L-12.6,83.4L-2.8,89.2L-0.0,78.2L2.8,89.2L12.6,83.4L6.8,93.2ZM113.8,96.0L102.8,98.8L108.6,108.6L98.8,102.8L96.0,113.8L93.2,102.8L83.4,108.6L89.2,98.8L78.2,96.0L89.2,93.2L83.4,83.4L93.2,89.2L96.0,78.2L98.8,89.2L108.6,83.4L102.8,93.2ZM65.8,48.0L54.8,50.8L60.6,60.6L50.8,54.8L48.0,65.8L45.2,54.8L35.4,60.6L41.2,50.8L30.2,48.0L41.2,45.2L35.4,35.4L45.2,41.2L48.0,30.2L50.8,41.2L60.6,35.4L54.8,45.2ZM65.8,0.0L54.8,2.8L60.6,12.6L50.8,6.8L48.0,17.8L45.2,6.8L35.4,12.6L41.2,2.8L30.2,0.0L41.2,-2.8L35.4,-12.6L45.2,-6.8L48.0,-17.8L50.8,-6.8L60.6,-12.6L54.8,-2.8ZM17.8,48.0L6.8,50.8L12.6,60.6L2.8,54.8L0.0,65.8L-2.8,54.8L-12.6,60.6L-6.8,50.8L-17.8,48.0L-6.8,45.2L-12.6,35.4L-2.8,41.2L-0.0,30.2L2.8,41.2L12.6,35.4L6.8,45.2ZM113.8,48.0L102.8,50.8L108.6,60.6L98.8,54.8L96.0,65.8L93.2,54.8L83.4,60.6L89.2,50.8L78.2,48.0L89.2,45.2L83.4,35.4L93.2,41.2L96.0,30.2L98.8,41.2L108.6,35.4L102.8,45.2ZM65.8,96.0L54.8,98.8L60.6,108.6L50.8,102.8L48.0,113.8L45.2,102.8L35.4,108.6L41.2,98.8L30.2,96.0L41.2,93.2L35.4,83.4L45.2,89.2L48.0,78.2L50.8,89.2L60.6,83.4L54.8,93.2ZM30.4,26.6L26.0,26.0L26.6,30.4L24.0,26.9L21.4,30.4L22.0,26.0L17.6,26.6L21.1,24.0L17.6,21.4L22.0,22.0L21.4,17.6L24.0,21.1L26.6,17.6L26.0,22.0L30.4,21.4L26.9,24.0ZM78.4,26.6L74.0,26.0L74.6,30.4L72.0,26.9L69.4,30.4L70.0,26.0L65.6,26.6L69.1,24.0L65.6,21.4L70.0,22.0L69.4,17.6L72.0,21.1L74.6,17.6L74.0,22.0L78.4,21.4L74.9,24.0ZM30.4,74.6L26.0,74.0L26.6,78.4L24.0,74.9L21.4,78.4L22.0,74.0L17.6,74.6L21.1,72.0L17.6,69.4L22.0,70.0L21.4,65.6L24.0,69.1L26.6,65.6L26.0,70.0L30.4,69.4L26.9,72.0ZM78.4,74.6L74.0,74.0L74.6,78.4L72.0,74.9L69.4,78.4L70.0,74.0L65.6,74.6L69.1,72.0L65.6,69.4L70.0,70.0L69.4,65.6L72.0,69.1L74.6,65.6L74.0,70.0L78.4,69.4L74.9,72.0Z'/%3E%3C/svg%3E");
  --aina:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg stroke='%23000000' stroke-width='.4' stroke-opacity='.25'%3E%3Cpath d='M0 0L26.8 0L30.6 27.6Z' fill='%23FFFFFF' opacity='0.09'/%3E%3Cpath d='M0 0L30.6 27.6L0 22.3Z' fill='%23FFFFFF' opacity='0.04'/%3E%3Cpath d='M26.8 0L53.7 0L52.0 30.1Z' fill='%23B8402C' opacity='0.12'/%3E%3Cpath d='M26.8 0L52.0 30.1L30.6 27.6Z' fill='%23FFFFFF' opacity='0.1'/%3E%3Cpath d='M53.7 0L92.7 0L81.7 28.8Z' fill='%23FFFFFF' opacity='0.13'/%3E%3Cpath d='M53.7 0L81.7 28.8L52.0 30.1Z' fill='%23FFFFFF' opacity='0.08'/%3E%3Cpath d='M92.7 0L120 0L120 22.3Z' fill='%23FFFFFF' opacity='0.15'/%3E%3Cpath d='M92.7 0L120 22.3L81.7 28.8Z' fill='%23FFFFFF' opacity='0.13'/%3E%3Cpath d='M0 22.3L30.6 27.6L28.6 65.9Z' fill='%23FFFFFF' opacity='0.18'/%3E%3Cpath d='M0 22.3L28.6 65.9L0 52.6Z' fill='%23FFFFFF' opacity='0.08'/%3E%3Cpath d='M30.6 27.6L52.0 30.1L53.2 55.0Z' fill='%23FFFFFF' opacity='0.05'/%3E%3Cpath d='M30.6 27.6L53.2 55.0L28.6 65.9Z' fill='%23FFFFFF' opacity='0.16'/%3E%3Cpath d='M52.0 30.1L81.7 28.8L92.3 68.1Z' fill='%23EBD79A' opacity='0.19'/%3E%3Cpath d='M52.0 30.1L92.3 68.1L53.2 55.0Z' fill='%23B8402C' opacity='0.18'/%3E%3Cpath d='M81.7 28.8L120 22.3L120 61.4Z' fill='%23FFFFFF' opacity='0.13'/%3E%3Cpath d='M81.7 28.8L120 61.4L92.3 68.1Z' fill='%23FFFFFF' opacity='0.08'/%3E%3Cpath d='M0 52.6L28.6 65.9L38.6 81.8Z' fill='%23FFFFFF' opacity='0.13'/%3E%3Cpath d='M0 52.6L38.6 81.8L0 88.1Z' fill='%23FFFFFF' opacity='0.11'/%3E%3Cpath d='M28.6 65.9L53.2 55.0L66.5 86.2Z' fill='%23FFFFFF' opacity='0.19'/%3E%3Cpath d='M28.6 65.9L66.5 86.2L38.6 81.8Z' fill='%23FFFFFF' opacity='0.14'/%3E%3Cpath d='M53.2 55.0L92.3 68.1L83.6 83.1Z' fill='%23B8402C' opacity='0.18'/%3E%3Cpath d='M53.2 55.0L83.6 83.1L66.5 86.2Z' fill='%23FFFFFF' opacity='0.2'/%3E%3Cpath d='M92.3 68.1L120 61.4L120 86.6Z' fill='%23FFFFFF' opacity='0.08'/%3E%3Cpath d='M92.3 68.1L120 86.6L83.6 83.1Z' fill='%23FFFFFF' opacity='0.14'/%3E%3Cpath d='M0 88.1L38.6 81.8L35.7 120Z' fill='%23B8402C' opacity='0.16'/%3E%3Cpath d='M0 88.1L35.7 120L0 120Z' fill='%23EBD79A' opacity='0.14'/%3E%3Cpath d='M38.6 81.8L66.5 86.2L54.3 120Z' fill='%23B8402C' opacity='0.19'/%3E%3Cpath d='M38.6 81.8L54.3 120L35.7 120Z' fill='%23EBD79A' opacity='0.15'/%3E%3Cpath d='M66.5 86.2L83.6 83.1L91.5 120Z' fill='%23FFFFFF' opacity='0.18'/%3E%3Cpath d='M66.5 86.2L91.5 120L54.3 120Z' fill='%23B8402C' opacity='0.15'/%3E%3Cpath d='M83.6 83.1L120 86.6L120 120Z' fill='%23FFFFFF' opacity='0.18'/%3E%3Cpath d='M83.6 83.1L120 120L91.5 120Z' fill='%23FFFFFF' opacity='0.18'/%3E%3C/g%3E%3C/svg%3E");
  --jali-light:var(--jali);   /* the old name, so nothing 404s on it */

  --z-head:40; --z-shopbar:50; --z-consent:60; --z-drawer:80; --z-veil:100;
}

/* ==========================================================================
   1 · THE PAGE
   ========================================================================== */
html{ background:var(--ground-1); color-scheme:dark }
body{
  background:var(--ground-1); color:var(--ink-2);
  background-image:
    radial-gradient(ellipse 80% 50% at 14% 0%,  rgba(169,139,75,.055), transparent 60%),
    radial-gradient(ellipse 70% 45% at 88% 62%, rgba(142,58,46,.045),  transparent 62%);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{ color:inherit }
::selection{ background:rgba(169,139,75,.3); color:var(--ink-0) }
:focus-visible{ outline:2px solid var(--gold-3); outline-offset:3px }

/* ==========================================================================
   2 · GROUNDS — there is exactly one, and .light is not an exception
   .sec.light::after used to paint cream at 90% over a whole section. Both the
   fill and the overlay are killed here, and every child that was coloured for
   a pale ground is brought back to the house ink.
   ========================================================================== */
.dark,.band,.gallery,.versus,.creed,.rooms,.screen,.pdp,.cart,.sec{
  background-color:transparent; color:var(--ink-2);
}
.sec.dark,.dark.band,.versus,.creed,.gallery{ background-color:rgba(18,11,6,.74) }
.strip{ background-color:rgba(10,6,3,.88) }

.light,.sec.light,.light.band,.band--light,.paper,.cream{
  background-color:var(--ground-2) !important;
  background-image:var(--jali) !important;
  background-size:96px 96px !important;
  color:var(--ink-2) !important;
}
.sec.light::after,.light.band::after{
  background:linear-gradient(180deg,rgba(26,17,9,.92),rgba(18,12,7,.96)) !important;
}
.light h1,.light h2,.light h3,.light .d,.light b,.light strong{ color:var(--ink-1) !important }
.light p,.light li,.light dd,.light td{ color:var(--ink-2) !important }
.light .kicker,.light .eyebrow,.light .muted,.light small,.light .fine{ color:var(--ink-3) !important }
.light a{ color:var(--gold-3) !important }
.light .hair{ background:var(--rule) }
.light .lineage__c{ background:rgba(169,139,75,.10) }
.light .lineage__n{ color:var(--ink-1) }
.light .compare th,.light .compare td,.light .faq,.light .faq details,.light .rev{
  border-color:var(--rule) !important;
}
.light .compare .yes,.light .pull__q::before,.light .pull__q::after{ color:var(--gold-2) }

/* the one red, as a sealed band and nothing else */
.blood,.band--blood,.notice{
  background-color:var(--lac-0) !important; color:var(--ink-1) !important;
  border-block:var(--hair) solid rgba(169,139,75,.22);
}
.notice a{ color:var(--gold-3) }

/* ==========================================================================
   3 · TYPE
   ========================================================================== */
.d,h1,h2,h3,.pdp__hook,.gate__h,.agate__h{ color:var(--ink-1) }
.d--hero{ color:var(--ink-0) }
p,li,dd{ color:var(--ink-2) }
.kicker,.eyebrow,.label,.crumbs,.mono,.fine,.small,small,.muted{ color:var(--ink-3) }
.crumbs a,.foot a,footer a{ color:var(--ink-3) }
.crumbs a:hover,.foot a:hover,footer a:hover{ color:var(--gold-3) }
b,strong{ color:var(--ink-1) }
.price,.pdp__price,.folio__price,.size__p,.set__p,.card__p,.line__p,.bundle__p,
.upg__p,.cfg__p,.tier__p,.rung__p{ color:var(--gold-3); font-family:var(--display) }
.badge,.chip,.size__tag,.card__flag,.set__save{
  background:var(--gold-2); color:var(--ground-0);
}
.callout,.pull__q{ color:var(--ink-1) }
.note--bad,.ferr,.cut__warn{ color:var(--lac-2) }

/* ==========================================================================
   4 · THE HEADER, NAV AND DRAWER
   ========================================================================== */
.head{ background:var(--ground-1); border-bottom:var(--hair) solid var(--rule);
       backdrop-filter:none; -webkit-backdrop-filter:none; z-index:var(--z-head) }
.head__marktext{ color:var(--ink-0) }
.head__tag,.head__burger,.head__cart{ color:var(--ink-3) }
.head__burger span{ background:var(--ink-2) }
.head__n{ background:var(--gold-2); color:var(--ground-0) }
.head__nav a{ color:var(--ink-2) }
.head__nav a:hover,.head__nav a[aria-current=page]{ color:var(--gold-3) }
.head__nav a + a::before{ color:var(--gold-1); opacity:.55 }

.drawer{ background:var(--ground-1); backdrop-filter:none; -webkit-backdrop-filter:none;
         z-index:var(--z-drawer) }
.drawer::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background-image:var(--aina); background-size:120px 120px; opacity:.05 }
.drawer a{ color:var(--ink-1); border-bottom:var(--hair) solid var(--rule) }
.drawer a small{ color:var(--ink-3) }
.drawer__close{ color:var(--ink-2) }

/* ==========================================================================
   5 · THE SURFACE — the thing the whole site was missing
   ========================================================================== */
.size,.sizes label,.upsell,.offercard,.folio__mount,.card,.set,.bump,.upg__o,
.cfg__o,.tier__o,.delbox,.pair,.window,.rev,.hrev,.faq,.rung,.why__c,.wall,
.fixing__r,.vres,.pick,.line,.gate__in,.agate__in,.veil__in,.surface{
  position:relative; isolation:isolate;
  background:
    linear-gradient(180deg, rgba(240,220,168,.045) 0%, transparent 34%),
    linear-gradient(180deg, transparent 62%, rgba(0,0,0,.34) 100%),
    var(--ground-2);
  border:var(--hair) solid var(--gold-0);
  color:var(--ink-2);
  transition:border-color .45s var(--ease), background .45s var(--ease),
             transform .45s var(--ease), box-shadow .45s var(--ease);
}
.size::before,.sizes label::before,.upsell::before,.offercard::before,.card::before,
.set::before,.bump::before,.upg__o::before,.cfg__o::before,.tier__o::before,
.delbox::before,.pair::before,.window::before,.rev::before,.hrev::before,
.gate__in::before,.agate__in::before,.surface::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:var(--jali); background-size:48px 48px;
  opacity:.055; transition:opacity .5s var(--ease);
}
.size::after,.sizes label::after,.upsell::after,.offercard::after,.card::after,
.set::after,.bump::after,.upg__o::after,.cfg__o::after,.tier__o::after,
.delbox::after,.pair::after,.gate__in::after,.agate__in::after,.surface::after{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:var(--metal-soft); opacity:.45; pointer-events:none;
  transition:opacity .5s var(--ease);
}
@media (hover:hover){
  .size:hover,.sizes label:hover,.upsell:hover,.card:hover,.set:hover,
  .upg__o:hover,.cfg__o:hover,.tier__o:hover,.pair:hover{
    border-color:var(--gold-1); transform:translateY(-1px);
  }
  .size:hover::before,.upsell:hover::before,.card:hover::before{ opacity:.09 }
  .size:hover::after,.upsell:hover::after,.card:hover::after{ opacity:.8 }
}

/* the chosen state — on a class first, :has() second, SEPARATE BLOCKS.
   an unsupported :has() invalidates the whole selector list it sits in, which
   is how the upsell once shipped in capitals. the class is load-bearing. */
.size.is-on,.sizes label.is-on,.upsell.is-on,.cfg__o.is-on,.tier__o.is-on{
  border-color:var(--gold-2);
  background:
    radial-gradient(ellipse 70% 130% at 0% 50%, rgba(169,139,75,.16), transparent 62%),
    linear-gradient(180deg, rgba(240,220,168,.075) 0%, transparent 40%),
    linear-gradient(180deg, transparent 58%, rgba(0,0,0,.30) 100%),
    var(--ground-3);
  box-shadow:inset 0 0 0 1px rgba(169,139,75,.16), 0 8px 26px -14px rgba(0,0,0,.9);
}
.size.is-on::before,.upsell.is-on::before{ opacity:.12 }
.size.is-on::after,.upsell.is-on::after{ opacity:1 }
.size.is-on .size__dot,.upsell.is-on .upsell__box{ border-color:var(--gold-3) }
.size.is-on .size__dot::after,.upsell.is-on .upsell__box::after{
  opacity:1; transform:scale(1) rotate(0deg);
}
.size:has(input:checked),.sizes label:has(input:checked),.upsell:has(input:checked){
  border-color:var(--gold-2);
  background:
    radial-gradient(ellipse 70% 130% at 0% 50%, rgba(169,139,75,.16), transparent 62%),
    linear-gradient(180deg, rgba(240,220,168,.075) 0%, transparent 40%),
    linear-gradient(180deg, transparent 58%, rgba(0,0,0,.30) 100%),
    var(--ground-3);
  box-shadow:inset 0 0 0 1px rgba(169,139,75,.16), 0 8px 26px -14px rgba(0,0,0,.9);
}
.size:has(input:checked)::before,.upsell:has(input:checked)::before{ opacity:.12 }
.size:has(input:checked)::after,.upsell:has(input:checked)::after{ opacity:1 }
.size:has(input:checked) .size__dot,.upsell:has(input:checked) .upsell__box{
  border-color:var(--gold-3);
}
.size:has(input:checked) .size__dot::after,.upsell:has(input:checked) .upsell__box::after{
  opacity:1; transform:scale(1) rotate(0deg);
}

/* the khatam, where the radio dot was */
.size input[type=radio],.sizes input[type=radio],.upsell input[type=checkbox],
.cfg__o input,.tier__o input,.pick input{
  position:absolute; opacity:0; width:0; height:0; pointer-events:none;
}
.size__dot,.upsell__box,.cfg__b,.tier__b{
  position:relative; flex:none; width:22px; height:22px; display:block;
  border:var(--hair) solid var(--gold-1); background:transparent; border-radius:0;
  transition:border-color .4s var(--ease);
}
.size__dot::after,.upsell__box::after,.cfg__b::after,.tier__b::after{
  content:""; position:absolute; inset:3px; background:var(--metal);
  clip-path:polygon(50% 0%,61% 21%,85% 15%,79% 39%,100% 50%,79% 61%,85% 85%,
                    61% 79%,50% 100%,39% 79%,15% 85%,21% 61%,0% 50%,21% 39%,
                    15% 15%,39% 21%);
  opacity:0; transform:scale(.35) rotate(-45deg);
  transition:opacity .42s var(--ease), transform .52s var(--ease-long);
}

/* the free-delivery upsell is the only surface allowed to glow */
.upsell--free,.delbox--free{
  border-color:var(--gold-2);
  background:
    radial-gradient(ellipse 90% 140% at 8% 50%, rgba(169,139,75,.14), transparent 58%),
    linear-gradient(180deg, rgba(240,220,168,.06) 0%, transparent 38%),
    var(--ground-2);
}
.upsell--free::after{ opacity:.9; animation:st-glow 4.6s ease-in-out infinite }
.upsell--free .upsell__p{ font-family:var(--display); font-style:italic; color:var(--gold-4) }
.upsell__t{ color:var(--ink-1) } .upsell__d{ color:var(--ink-3) }
.upsell__d b{ color:var(--gold-3) }
.upsell__im,.bump__art,.pair__art,.line__art,.card__art,.folio__art{
  background:var(--ground-0); border-color:var(--gold-0);
}

/* ==========================================================================
   6 · BUTTONS — metal, not paint
   ========================================================================== */
.btn,.cta,.gate__b,.agate__b,.consent__b,.set__b,.bump__add,.upg__b,.pair__b,
.ivan__cta,.slash__b{
  position:relative; overflow:hidden; border-radius:0;
  background:transparent; color:var(--ink-0);
  border:0; cursor:pointer;
  transition:background .4s var(--ease), color .4s var(--ease), filter .4s var(--ease);
}
.btn::before,.cta::before,.gate__b::before,.agate__b::before,.consent__b::before,
.ivan__cta::before,.set__b::before,.pair__b::before{
  content:""; position:absolute; inset:0; padding:1px; pointer-events:none;
  background:var(--metal-soft);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.75; transition:opacity .4s var(--ease);
}
.btn:hover::before,.cta:hover::before,.gate__b:hover::before,.ivan__cta:hover::before{ opacity:1 }
.btn:hover,.cta:hover,.gate__b:hover{ background:rgba(169,139,75,.14) }

.btn--fill,.btn--light,.cta--hero,.cta--buy,.gate__b--yes,.agate__b--yes,
.shopbar__b,.stickybuy__b,.bump__add,.slash__b{
  background:var(--metal) !important; background-size:200% 100% !important;
  color:var(--ground-0) !important; font-weight:500;
  transition:background-position .9s var(--ease-long), filter .4s var(--ease);
}
.btn--fill::before,.btn--light::before,.cta--hero::before,.gate__b--yes::before{ display:none }
.btn--fill:hover,.cta--hero:hover,.gate__b--yes:hover,.shopbar__b:hover{
  background-position:100% 0 !important; filter:brightness(1.06);
}
.cta__sub,.gate__b span,.agate__b span{ color:inherit; opacity:.78 }
.cta--off{ opacity:.42; border:1px dashed var(--rule); background:transparent }

/* ==========================================================================
   7 · THE PLATE
   ========================================================================== */
.pdp__stage,.folio__mount,.bundle__pic{
  background:
    radial-gradient(ellipse 66% 60% at 50% 38%, rgba(255,240,212,.075), transparent 70%),
    var(--ground-0);
  border-color:var(--gold-0);
}
.pdp__stage::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background-image:var(--jali-fine); background-size:96px 96px; opacity:.05 }
.pdp__stage::after{ content:""; position:absolute; inset:10px; pointer-events:none;
  border:var(--hair) solid rgba(169,139,75,.22) }
.pdp__thumbs button{ background:var(--ground-0); border-color:var(--gold-0) }
.pdp__thumbs button[aria-current=true]{ border-color:var(--gold-3) }
.folio__mount::after{ content:""; position:absolute; inset:7px; pointer-events:none;
  border:var(--hair) solid var(--rule-faint) }
.folio__name{ color:var(--ink-0) } .folio__note{ color:var(--ink-2) }
.folio__hashia{ border-color:var(--gold-1) }
.folio__ways i{ box-shadow:0 0 0 1px rgba(0,0,0,.5),0 0 0 2px rgba(169,139,75,.22) }

/* brand photography */
.bfig{ background:var(--ground-0); border:var(--hair) solid var(--rule) }
.bfig img{ filter:saturate(.94) contrast(1.04) }
.bfig::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 84% 76% at 50% 44%, transparent 38%, rgba(10,7,5,.52) 100%) }
.photoband>.bfig{ border:0 }
.photoband>.bfig img{ filter:saturate(.72) contrast(1.02) brightness(.46) }
.photoband>.bfig::after{
  background:linear-gradient(180deg,rgba(18,12,7,.88),rgba(18,12,7,.72) 46%,rgba(18,12,7,.94)) }
.bfig figcaption,.bcap{ display:none }

/* ==========================================================================
   8 · FORMS
   ========================================================================== */
input,select,textarea{
  background:var(--ground-0); color:var(--ink-1);
  border:var(--hair) solid var(--rule); border-radius:0;
  transition:border-color .3s var(--ease);
}
input:focus,select:focus,textarea:focus{ border-color:var(--gold-2); outline:none }
input::placeholder,textarea::placeholder{ color:var(--ink-4) }
.fl,.fi>span,.fld>span{ color:var(--ink-3) }
.vform,.ack,.f2,.form{ color:var(--ink-2) }

/* ==========================================================================
   9 · FIXED FURNITURE
   ========================================================================== */
.shopbar,.stickybuy{
  background:rgba(10,7,5,.97); border-top:var(--hair) solid var(--rule-2);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  z-index:var(--z-shopbar);
}
.shopbar__t,.stickybuy__t{ color:var(--ink-0) }
.shopbar__s,.stickybuy__s{ color:var(--ink-3) }
.consent{ background:rgba(10,7,5,.97); border:var(--hair) solid var(--rule-2);
          color:var(--ink-3); z-index:var(--z-consent) }
.consent a{ color:var(--gold-3) }
.veil,.gate,.agate{ background:rgba(10,7,5,.97) }
.veil{ z-index:var(--z-veil) } .gate,.agate{ z-index:90 }
.veil__q,.gate__h,.agate__h{ color:var(--ink-0) }
.veil__c,.gate__k,.agate__k,.gate__p,.agate__p{ color:var(--ink-3) }
.veil__m,.gate__mark,.agate__m,.creed__mark{ color:var(--gold-2) }
.skip{ background:var(--gold-2); color:var(--ground-0) }

/* ==========================================================================
   10 · FOOTER, RULES, ODDS
   ========================================================================== */
.foot,footer{ border-top:var(--hair) solid var(--rule); color:var(--ink-3) }
.foot__h,.foot__mark{ color:var(--ink-1) }
.foot__rule,.hair,.ivan__rule,.vs__sep,.vs__line{
  background:linear-gradient(90deg,transparent,var(--rule-2),transparent);
}
table th{ color:var(--ink-3) }
table th,table td{ border-bottom:var(--hair) solid var(--rule) }
blockquote,.pull{ border-left:2px solid var(--gold-1); color:var(--ink-1) }
hr{ border:0; height:1px; background:var(--rule) }
.rule-khatam{ color:var(--gold-2) }
.rule-khatam::before,.rule-khatam::after{
  background:linear-gradient(90deg,transparent,var(--rule-2),transparent) }

/* the hero — the one red belongs low and off-centre, not as a whole screen */
.ivan{
  background:
    radial-gradient(ellipse 90% 70% at 50% 116%, rgba(110,42,34,.42), transparent 62%),
    radial-gradient(ellipse 60% 44% at 16% 8%,  rgba(169,139,75,.10), transparent 64%),
    var(--ground-1) !important;
}
.ivan::before{ opacity:.14 !important; background-size:160px 160px !important;
               mix-blend-mode:screen }
.ivan__scrim{ background:linear-gradient(180deg,transparent 40%,var(--ground-1)) }
.ivan__title,.ivan__sub,.royals{ color:var(--ink-0) }
.ivan__price{ color:var(--gold-3) }

/* the jali screen is lit FROM BEHIND — dark stone against a glow, never a
   pale panel with a lattice printed on it */
.screen{ background:var(--ground-0) !important; position:relative; overflow:hidden }
.screen::before{ content:""; position:absolute; inset:-20%; pointer-events:none;
  background:
    radial-gradient(ellipse 58% 44% at 50% 46%, rgba(240,220,168,.30), transparent 68%),
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(169,139,75,.16),  transparent 72%) }
.screen__mesh{ background-image:var(--jali); background-size:40px 40px; opacity:1 }
.screen__msg{ position:relative; z-index:2; color:var(--ink-0) }

/* ==========================================================================
   11 · MOTION — a house moves slowly. nothing bounces.
   ========================================================================== */
@keyframes st-rise{ from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }
@keyframes st-glow{ 0%,100%{opacity:.4} 50%{opacity:.85} }
.rv{ opacity:0; transform:translateY(18px);
     transition:opacity .9s var(--ease), transform 1s var(--ease-long) }
.rv.is-in,.no-js .rv{ opacity:1; transform:none }
.sizes label,.size{ animation:st-rise .7s var(--ease-long) both }
.sizes label:nth-child(1),.size:nth-child(1){ animation-delay:.04s }
.sizes label:nth-child(2),.size:nth-child(2){ animation-delay:.10s }
.sizes label:nth-child(3),.size:nth-child(3){ animation-delay:.16s }
.sizes label:nth-child(4),.size:nth-child(4){ animation-delay:.22s }
.sizes label:nth-child(5),.size:nth-child(5){ animation-delay:.28s }
.rule-khatam svg{ transition:transform 1.4s var(--ease-long) }
.rv.is-in .rule-khatam svg{ transform:rotate(90deg) }

@media (hover:none){
  .btn:hover,.cta:hover{ background:transparent }
  a:active,button:active,.btn:active,.folio:active,.size:active{ opacity:.74 }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important }
  .rv{ opacity:1 !important; transform:none !important }
  .sizes label,.size{ animation:none }
}

/* ==========================================================================
   12 · THE LANDING PAGE — phone first, because that is where she is.
   Cold Meta traffic arrives on a phone, inside Instagram's own browser, one
   swipe from leaving. So on a phone the first screen carries: the promise,
   the piece, the price and the button. Everything else is below it.
   Tap targets never under 48px. 100svh, not 100vh, because the in-app
   browser's toolbar makes 100vh a lie.
   ========================================================================== */
body.is-lp{ padding-bottom:calc(76px + env(safe-area-inset-bottom,0px)) }
@media (min-width:900px){ body.is-lp{ padding-bottom:0 } }

.lp-hero{ padding:clamp(18px,4vw,56px) 0 clamp(28px,6vw,72px) }
.lp-hero__in{
  display:grid; gap:18px; max-width:1180px; margin:0 auto;
  padding-inline:max(var(--gutter,20px),env(safe-area-inset-left,0px));
  grid-template-areas:"copy" "plate" "buy";
}
@media (min-width:900px){
  .lp-hero__in{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:28px 56px;
    grid-template-areas:"plate copy" "plate buy"; align-items:start }
  .lp-plate{ position:sticky; top:96px }
}
.lp-hero__copy{ grid-area:copy }
.lp-hero__h{ font-size:clamp(1.9rem,8.2vw,3.3rem); line-height:1.06; color:var(--ink-0);
  margin:.3rem 0 0; font-weight:400 }
.lp-hero__sub{ margin:.8rem 0 0; font-size:1rem; line-height:1.6; color:var(--ink-2); max-width:46ch }
@media (max-width:899px){ .lp-hero__sub{ font-size:.95rem } }

/* the plate: a cusped arch, a hairline of metal, the piece lit from above */
.lp-plate{ grid-area:plate; margin:0 }
.lp-plate__arch{
  position:relative; overflow:hidden; isolation:isolate;
  border-radius:50% 50% 0 0 / 18% 18% 0 0;
  background:radial-gradient(ellipse 70% 60% at 50% 32%, rgba(255,240,212,.09), transparent 70%), var(--ground-0);
  border:1px solid var(--gold-0); aspect-ratio:4/5;
  max-height:min(56svh,640px); margin-inline:auto;
}
@media (min-width:900px){ .lp-plate__arch{ max-height:min(78svh,760px) } }
.lp-plate__arch::after{ content:""; position:absolute; inset:9px; pointer-events:none;
  border:1px solid rgba(169,139,75,.24); border-radius:50% 50% 0 0 / 17% 17% 0 0 }
.lp-plate__arch img{ width:100%; height:100%; object-fit:contain; display:block;
  transform:scale(1.02); will-change:transform }

/* the buy block */
.lp-buy{ grid-area:buy; display:grid; gap:14px }
.lp-label{ display:grid; grid-template-columns:1fr auto; align-items:end; gap:4px 16px;
  padding-bottom:12px; border-bottom:1px solid var(--rule) }
.lp-label__name{ font-family:var(--display); font-weight:400; font-size:clamp(1.3rem,5vw,1.7rem);
  color:var(--ink-0); margin:0; grid-column:1 }
.lp-label__meta{ grid-column:1; font-size:.62rem; letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--ink-3) }
.lp-label__price{ grid-column:2; grid-row:1 / span 2; font-family:var(--display);
  font-size:clamp(1.6rem,6vw,2.1rem); color:var(--gold-3); white-space:nowrap }

.lp-sizes{ border:0; padding:0; margin:0; display:grid; gap:8px;
  grid-template-columns:repeat(2,minmax(0,1fr)) }
.lp-sizes legend{ grid-column:1 / -1; margin-bottom:6px; padding:0 }
.lp-chip{ position:relative; isolation:isolate; display:grid; gap:1px; min-height:64px;
  padding:10px 12px 10px 36px; cursor:pointer; align-content:center;
  background:linear-gradient(180deg,rgba(240,220,168,.045) 0%,transparent 40%),var(--ground-2);
  border:1px solid var(--gold-0);
  transition:border-color .35s var(--ease),background .35s var(--ease),transform .35s var(--ease) }
.lp-chip input{ position:absolute; opacity:0; width:0; height:0 }
.lp-chip::before{ content:""; position:absolute; left:12px; top:50%; width:14px; height:14px;
  margin-top:-7px; border:1px solid var(--gold-1) }
.lp-chip::after{ content:""; position:absolute; left:14px; top:50%; width:10px; height:10px; margin-top:-5px;
  background:var(--metal);
  clip-path:polygon(50% 0%,61% 21%,85% 15%,79% 39%,100% 50%,79% 61%,85% 85%,61% 79%,50% 100%,39% 79%,15% 85%,21% 61%,0% 50%,21% 39%,15% 15%,39% 21%);
  opacity:0; transform:scale(.3) rotate(-45deg);
  transition:opacity .35s var(--ease),transform .5s var(--ease-long) }
.lp-chip.is-on{ border-color:var(--gold-2);
  background:radial-gradient(ellipse 80% 140% at 0% 50%,rgba(169,139,75,.16),transparent 62%),var(--ground-3) }
.lp-chip.is-on::before{ border-color:var(--gold-3) }
.lp-chip.is-on::after{ opacity:1; transform:scale(1) rotate(0) }
.lp-chip:focus-within{ outline:2px solid var(--gold-3); outline-offset:2px }
.lp-chip__ft{ font-size:.96rem; color:var(--ink-1); letter-spacing:.03em }
.lp-chip__cm{ font-size:.7rem; color:var(--ink-3) }
.lp-chip__p{ font-family:var(--display); font-size:1.08rem; color:var(--gold-3) }

.lp-pair{ display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:12px;
  align-items:center; padding:12px 14px; cursor:pointer }
.lp-cta{ width:100%; min-height:58px; font-size:.82rem }
.lp-inapp{ font-size:.78rem; line-height:1.5; color:var(--ink-3);
  border-left:2px solid var(--gold-1); padding-left:10px; margin:0 }

/* the proof: swipe on a phone, three across on a desk */
.lp-proof__row{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:8px; margin-top:18px; scrollbar-width:none;
  margin-inline:calc(var(--gutter,20px) * -1); padding-inline:var(--gutter,20px) }
.lp-proof__row::-webkit-scrollbar{ display:none }
.lp-quote{ flex:0 0 82%; scroll-snap-align:start; margin:0; padding:20px }
.lp-quote blockquote{ margin:0; border:0; padding:0; font-family:var(--display);
  font-size:1.14rem; line-height:1.42; color:var(--ink-1) }
.lp-quote figcaption{ margin-top:12px; font-size:.62rem; letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--ink-3) }
.lp-quote figcaption span{ display:block; text-transform:none; letter-spacing:.02em; margin-top:3px }
@media (min-width:900px){ .lp-proof__row{ overflow:visible; margin-inline:0; padding-inline:0 }
  .lp-quote{ flex:1 1 0 } }

/* the object */
.lp-object__in{ display:grid; gap:20px; max-width:1180px; margin:0 auto }
@media (min-width:900px){ .lp-object__in{ grid-template-columns:1fr .9fr 1fr; align-items:center; gap:36px } }
.lp-reveal{ margin:0; overflow:hidden; border:1px solid var(--gold-0); background:var(--ground-0);
  aspect-ratio:4/3 }
.lp-reveal img{ width:100%; height:100%; object-fit:cover; display:block }
.lp-spec{ display:grid; grid-template-columns:auto 1fr; gap:8px 16px; margin:14px 0 0; font-size:.92rem }
.lp-spec dt{ font-size:.6rem; letter-spacing:var(--track-label); text-transform:uppercase;
  color:var(--ink-3); padding-top:3px }
.lp-spec dd{ margin:0; color:var(--ink-2) }
.lp-spec a{ color:var(--gold-3); text-decoration:underline; text-underline-offset:3px }

/* the answers */
.lp-answers__grid{ display:grid; gap:10px; max-width:1180px; margin:0 auto }
@media (min-width:620px){ .lp-answers__grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (min-width:1080px){ .lp-answers__grid{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
.lp-ans{ padding:18px 18px 16px }
.lp-ans b{ display:block; font-family:var(--display); font-weight:400; font-size:1.18rem;
  color:var(--ink-0); margin-bottom:6px }
.lp-ans p{ margin:0; font-size:.92rem; line-height:1.6; color:var(--ink-2) }
.lp-ans a{ color:var(--gold-3) }

.lp-meter{ height:3px; background:rgba(169,139,75,.16); margin:22px auto 10px; max-width:420px; overflow:hidden }
.lp-meter__fill{ display:block; height:100%; width:var(--to,0%); background:var(--metal) }

.lp-faq details{ border-bottom:1px solid var(--rule); padding:4px 0 }
.lp-faq summary{ list-style:none; cursor:pointer; min-height:56px; display:flex; align-items:center;
  justify-content:space-between; gap:16px; font-family:var(--display); font-size:1.14rem; color:var(--ink-1) }
.lp-faq summary::-webkit-details-marker{ display:none }
.lp-faq summary::after{ content:"+"; font-family:var(--body); color:var(--gold-2); font-size:1.2rem;
  transition:transform .35s var(--ease) }
.lp-faq details[open] summary::after{ transform:rotate(45deg) }
.lp-faq details p{ margin:0 0 16px; color:var(--ink-2); line-height:1.65 }
.lp-faq a{ color:var(--gold-3) }
.lp-close__price{ font-family:var(--display); font-size:clamp(1.8rem,7vw,2.6rem); color:var(--gold-3); margin:.3rem 0 1.2rem }

/* ==========================================================================
   13 · THE TURN — frames that rotate as she scrolls, with the size drawn on
   ========================================================================== */
.spin{ position:relative; margin:0 auto; max-width:620px; background:var(--ground-0);
  border:1px solid var(--gold-0); aspect-ratio:4/5; overflow:hidden; isolation:isolate }
.spin img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain }
.spin__dims{ position:absolute; inset:8% 9% 12% 13%; pointer-events:none; z-index:2 }
.spin__w,.spin__h{ position:absolute; display:flex; align-items:center; justify-content:center;
  font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-3) }
.spin__w{ left:0; right:0; top:-22px; height:14px; border-left:1px solid var(--gold-2);
  border-right:1px solid var(--gold-2) }
.spin__w::before{ content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--gold-1); z-index:-1 }
.spin__w span,.spin__h span{ background:var(--ground-0); padding:0 8px }
.spin__h{ top:0; bottom:0; left:-30px; width:14px; border-top:1px solid var(--gold-2);
  border-bottom:1px solid var(--gold-2); writing-mode:vertical-rl; transform:rotate(180deg) }
.spin__h::before{ content:""; position:absolute; top:0; bottom:0; left:50%; width:1px; background:var(--gold-1); z-index:-1 }
.spin__bar{ position:absolute; left:0; right:0; bottom:0; z-index:3; display:flex; align-items:center;
  justify-content:space-between; gap:8px; padding:10px 12px;
  background:linear-gradient(0deg,rgba(10,7,5,.9),transparent) }
.spin__hint{ font-size:.62rem; letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink-3) }
.spin__nav{ display:flex; gap:6px }
.spin__nav button{ min-width:44px; min-height:44px; background:rgba(10,7,5,.6); color:var(--ink-1);
  border:1px solid var(--gold-1); font-size:1rem; cursor:pointer }

/* ==========================================================================
   14 · PAGE TO PAGE — the View Transitions API, cross-document, zero JS.
   Browsers without it simply navigate. Nothing depends on it.
   ========================================================================== */
@view-transition{ navigation:auto }
::view-transition-old(root),::view-transition-new(root){ animation-duration:.42s;
  animation-timing-function:cubic-bezier(.22,.61,.36,1) }
@media (prefers-reduced-motion:reduce){ @view-transition{ navigation:none } }

/* Lenis, when it runs (desktop only) */
html.lenis,html.lenis body{ height:auto }
.lenis.lenis-smooth{ scroll-behavior:auto !important }
.lenis.lenis-stopped{ overflow:hidden }

/* motion hooks: visible by default, hidden only by JS that is about to animate */
.js-motion .m-pre{ opacity:0; transform:translateY(18px) }
.lp-ans__img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; margin:4px 0 10px;
  border:1px solid var(--gold-0) }

/* the free-delivery bar in the basket — a fact about her basket, never a timer */
.freebar{ height:3px; background:rgba(169,139,75,.16); margin:14px 0 8px; overflow:hidden }
.freebar__fill{ display:block; height:100%; width:var(--to,0%); background:var(--metal);
  transition:width .9s cubic-bezier(.19,1,.22,1) }
.freebar.is-free .freebar__fill{ width:100% }
.freebar__t{ margin:0 0 12px; font-size:.9rem; color:var(--ink-2) }
.freebar__t b{ color:var(--gold-3); font-weight:500 }
.upsell__p small{ display:block; font-family:var(--body); font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-3); font-style:normal }