/* ═══════════════════════════════════════════
   TOKENS
   ═══════════════════════════════════════════ */
:root{
  --serif:"Bodoni Moda", Georgia, serif;
  --sans:"Jost", -apple-system, "Segoe UI", sans-serif;
  --script:"Great Vibes", "Segoe Script", cursive;

  --ink:#2b2229;
  /* true black, reserved for display type heavy enough to carry it —
     the warm --ink is still the right near-black for everything else */
  --ink-black:#000000;
  --ink-soft:#6f636b;
  --ink-faint:#a2969d;
  --line:#f2dbe6;
  --bg:#ffffff;
  --bg-alt:#fdf3f7;
  --pink:#d6408a;
  --pink-deep:#a82a68;
  /* logotype pink from the brand mark — brighter than the UI pink,
     which stays darker so white button text keeps its contrast */
  --brand-script:#fb5fae;
  --accent:var(--pink);
  --sale:#c2185b;
  /* Wall of Love. A warm red rather than the brand pink, so it reads as red
     without clashing with the pink it sits beside. */
  --love:#d0342c;
  /* Premium Lucknow. A muted gold carries "expensive" in a way the brand pink
     cannot, and being desaturated it sits beside the pink instead of
     competing with it. Used nowhere else, so it stays a signal. */
  --gold:#b08d57;
  --ivory:#faf6ef;

  --container:1265px;
  --gap:15px;
  --header-h:82px;
}

*,*::before,*::after{box-sizing:border-box}

/* The browser hides [hidden] elements with a user-agent rule, and ANY author
   rule that sets display beats it — so `.done{display:grid}` silently
   un-hid the order confirmation and left it sitting on top of the checkout
   form, where it swallowed every click and every field. This restores the
   attribute's meaning. !important is right here: the whole point is to win
   against component rules that set display without thinking about it. */
[hidden]{display:none !important}

html{scroll-behavior:smooth;background:var(--bg)}
/* The header is sticky, so an anchor that lands a section at the very top of
   the viewport parks its heading underneath the header where it cannot be
   read. Every jump target is held down by the header's own height instead —
   which keeps working when that height changes at the mobile breakpoint. */
/* How far an in-page link has to clear. --sticky-h is measured from the
   real header by script.js, because the header's height is not a constant:
   the announcement bar can wrap, and so can the nav row on a narrow laptop.
   --header-h is the logo row's own height and stays the fallback. */
section[id],[id].section,.promo[id]{scroll-margin-top:var(--sticky-h,var(--header-h))}
body{
  margin:0;
  font-family:var(--sans);
  font-size:15px;
  line-height:1.6;
  color:var(--ink);
  background:transparent;
  -webkit-font-smoothing:antialiased;
}

/* CALACATTA — the page ground.

   Mostly white, with occasional pink veins set well apart. Two numbers do the
   work and they do different jobs: `baseFrequency` sets how far apart the
   veins sit (lower = wider gaps — .006 here is about a third of a normal
   calacatta, which is what opens up the long clear runs), and the `opacity`
   on the painted rect sets how much pink shows at all. Lowering opacity alone
   would only have made a dense pattern fainter, not emptier.

   The vein shape comes from a stepped transfer function over a turbulence
   field — one spike in seventeen steps, so most of the field stays white —
   then a slight blur and a pink flood. It is markup, not a photograph, so
   there is nothing to download.

   Painted on a fixed pseudo-element so the stone holds still while the page
   scrolls. `background-attachment:fixed` would be the usual way, but iOS
   Safari quietly downgrades it to `scroll`; a fixed element holds on a phone
   too. `cover` guarantees the stone reaches every edge at any window size. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:#fffdfe url("data:image/svg+xml,\
<svg xmlns='http://www.w3.org/2000/svg' width='1400' height='1400'>\
<filter id='m' x='-20%25' y='-20%25' width='140%25' height='140%25'>\
<feTurbulence type='fractalNoise' baseFrequency='0.006 0.012' numOctaves='4' seed='17' result='t'/>\
<feColorMatrix in='t' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0' result='a'/>\
<feComponentTransfer in='a' result='v'>\
<feFuncA type='table' tableValues='0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0'/>\
</feComponentTransfer>\
<feGaussianBlur in='v' stdDeviation='0.45' result='b'/>\
<feFlood flood-color='%23d98cbb' result='p'/>\
<feComposite in='p' in2='b' operator='in'/>\
</filter>\
<rect width='1400' height='1400' fill='%23fffdfe'/>\
<rect width='1400' height='1400' filter='url(%23m)' opacity='0.12'/>\
</svg>") center/cover no-repeat;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;margin:0;line-height:1.2}
p{margin:0}
button{font-family:inherit;cursor:pointer}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:15px}

/* ═══════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:13px;letter-spacing:1px;
  height:44px;padding:0 28px;border-radius:60px;border:1px solid transparent;
  transition:.28s ease;white-space:nowrap;
}
.btn--sm{height:38px;padding:0 22px;font-size:12px}
.btn--dark{background:var(--pink);color:#fff}
.btn--dark:hover{background:var(--pink-deep)}
.btn--light{background:#fff;color:var(--ink)}
.btn--light:hover{background:var(--pink);color:#fff}
.btn--ghost{border-color:var(--pink);color:var(--pink)}
.btn--ghost:hover{background:var(--pink);color:#fff}

.icon-btn{
  position:relative;background:none;border:0;padding:8px;color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;transition:opacity .2s;
}
.icon-btn:hover{opacity:.6}
.icon-btn.has-count em{
  position:absolute;top:1px;right:0;min-width:16px;height:16px;
  background:var(--pink);color:#fff;border-radius:50%;
  font-style:normal;font-size:10px;line-height:16px;text-align:center;
}

/* ═══════════════════════════════════════════
   ANNOUNCEMENT
   ═══════════════════════════════════════════ */
.announce{background:var(--pink);color:#fff;overflow:hidden}
.announce__track{position:relative;height:38px}
.announce__item{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:12.5px;letter-spacing:.6px;text-align:center;padding-inline:40px;
  opacity:0;transform:translateY(100%);transition:opacity .5s,transform .5s;
}
.announce__item.is-active{opacity:1;transform:none}
.announce__item b{font-weight:600}

/* ═══════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════ */
.header{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line)}
.header.is-stuck{box-shadow:0 2px 18px rgba(0,0,0,.06)}
.header__inner{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  min-height:var(--header-h);gap:10px;
}
.header__burger{display:none}
/* The icons sit flush with the container's edges — the same line the nav
   and the sections below align to. The 8px tap padding on .icon-btn would
   otherwise inset every glyph, so the outermost button on each side hangs
   that 8px back out over the padding. */
.header__side{display:flex;align-items:center;gap:2px}
.header__side--left{margin-left:-8px}
.header__side--right{justify-content:flex-end;margin-right:-8px}

/* The logotype is set with a small "n" — that is the mark customers know,
   and Great Vibes's capital N is a different shape altogether. The source
   text stays the canonical "Silk N Linen" (that is what search engines and
   copy-paste see); only the rendering of that one letter is lowercased. */
.brand-n{font:inherit;text-transform:lowercase}
.logo{text-align:center;line-height:1}
.logo__mark{
  display:block;font-family:var(--script);font-size:42px;font-weight:400;
  letter-spacing:0;white-space:nowrap;line-height:1.02;color:var(--brand-script);
  /* Great Vibes sits high in its em box — nudge it onto the optical centre */
  padding-top:6px;
}
/* signature swash beneath the wordmark; inherits the logotype pink */
.logo__swash{
  display:block;width:100%;height:9px;margin:-1px auto 0;color:var(--brand-script);
  stroke:currentColor;stroke-width:2.2;fill:none;
}
/* real words in the markup — CSS does the spacing, so screen readers
   read "Authentic Lucknow" rather than spelling out padded letters.
   Bodoni under the Great Vibes wordmark is the script-over-didone lockup
   every fashion house runs; opsz keeps the hairlines from thinning out
   to nothing at this size. */
.logo__sub{
  display:block;margin-top:6px;font-family:var(--serif);font-optical-sizing:auto;
  font-size:10.5px;letter-spacing:3.6px;font-weight:500;
  text-transform:uppercase;text-indent:3.6px;color:var(--ink-soft);
}

.nav{border-top:1px solid var(--line)}
/* Nine entries now. There is no burger above 900px, so anything left out of
   this bar would be unreachable on a laptop - instead the gap closes as the
   screen narrows, and below about 1200px the row wraps onto a second line.
   Wrapping rather than scrolling sideways: a row that scrolls hides its last
   entries with nothing to say so, and a mouse has no easy way to push it. */
.nav__list{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  min-height:48px;padding-block:7px;
  gap:4px clamp(14px,1.75vw,24px);
}
.nav__list li{flex:0 0 auto}
.nav__list a{white-space:nowrap}
.nav__list a{
  font-size:13.5px;font-weight:600;letter-spacing:1px;position:relative;padding:4px 0;
}
.nav__list a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--pink);
  transition:width .3s;
}
.nav__list a:hover::after{width:100%}

/* ═══════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════ */
/* light type from here down: the hero now sits on dark footage */
.hero{position:relative;height:min(78vh,720px);min-height:460px;overflow:hidden;color:#fff}
.hero__stage{position:relative;height:100%;overflow:hidden}

/* ── video hero ──
   Landscape footage across the full width. object-fit:cover crops rather than
   letterboxes, so the frame stays filled at every aspect — a 16:9 clip in a
   short, wide banner would otherwise pillar-box on tall screens. */
.hero__video{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;object-fit:cover;object-position:center 16%;
  /* The crop anchor. A 1080×1920 portrait clip in a wide, short banner shows
     only about a quarter of its height on a laptop, and this picks which
     quarter — so it decides whether the model has a head.

     16% comes from skin-tone tracking the face across twelve frames of the
     clip: the model moves, and her face sits between 14% and 38% down the
     frame depending on the moment. At 16% the visible band runs roughly
     12%–39% at 1280px, which contains every one of those positions.

     The previous 45% was derived from where image *detail* was densest, which
     is the embroidery on the garment, not the face — that band ran 33%–60%
     and cut her head off in nine of the twelve frames. Detail is not the
     subject. If the footage is ever replaced, re-measure rather than reuse
     this number. */
}
/* the slide dots are gone from the markup — a single looping clip has nothing
   to page through. The .hero__dots rules below are kept for the day the
   slideshow comes back. */

.hero__media{
  position:absolute;inset:0;
  /* The video's own first frame, so if the clip is blocked or fails the
     banner still shows the right image rather than a different photograph.
     --hero-y is re-set per slide if the slideshow ever runs again. */
  background-image:url('Pictures/Home_1-poster.webp');
  background-position:center var(--hero-y,19%);
  background-size:cover;
  background-repeat:no-repeat;
  animation:kenburns 22s ease-in-out infinite alternate;
}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.09)}}
/* Light scrim, not the heavy one this used to be. The footage is now
   tone-mapped from the HDR original and reads bright on its own, so this
   is a soft ramp — just enough behind the copy to keep it clean, nothing
   on the right so the clip shows plainly — and the copy carries its own
   shadow (below) to make up the difference. The second gradient is a faint
   top-and-bottom vignette so the header and the marquee do not collide
   with a bright patch of footage. */
.hero__overlay{
  position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(90deg,
      rgba(16,10,14,.46) 0%,
      rgba(16,10,14,.36) 24%,
      rgba(16,10,14,.16) 46%,
      rgba(16,10,14,.04) 66%,
      rgba(16,10,14,0) 100%),
    linear-gradient(180deg,
      rgba(16,10,14,.16) 0%,
      rgba(16,10,14,0) 30%,
      rgba(16,10,14,0) 68%,
      rgba(16,10,14,.2) 100%);
}
/* The copy's own contrast, now that the scrim carries less of it: a tight
   dark edge plus a wide soft halo — legible over a bright fold of fabric
   without darkening the picture around it. */
.hero__content{text-shadow:0 1px 2px rgba(0,0,0,.5),0 2px 20px rgba(0,0,0,.42)}
/* the shadow is for words on footage, not for the buttons — dark text on the
   white button smudges with it */
.hero__actions .btn{text-shadow:none}
.hero__content{
  position:relative;z-index:3;height:100%;max-width:var(--container);margin-inline:auto;
  padding:0 15px;display:flex;flex-direction:column;justify-content:center;
  max-width:min(var(--container),100%);
}
.hero__content>*{max-width:560px}
.hero__eyebrow{
  font-size:12px;letter-spacing:4px;text-transform:uppercase;margin-bottom:16px;font-weight:500;
  /* the brighter logotype pink, not --pink-deep: over the dark scrim the deep
     one goes muddy, and the contrast problem is inverted from the old light
     overlay — light ink on dark now needs the brighter tone */
  color:var(--brand-script);
}
/* Two faces, one headline: structured Bodoni caps over the Great Vibes
   script from the logotype. The contrast is what makes it read as a brand
   line rather than a sentence — see .hero__title-script to undo it. */
/* set the serif here, not via the h1 rule: this line is a <p> now (the H1 is
   the tagline beneath it) and would otherwise fall back to the body sans */
.hero__title{font-family:var(--serif);font-size:clamp(42px,6vw,74px);font-weight:400;letter-spacing:-1px;line-height:1}
/* tracking in em, not px: it has to shrink with the clamped title or the
   caps line outgrows the script word on narrow screens and the two stop
   sitting flush */
.hero__title-caps{
  display:block;font-size:.44em;font-weight:700;letter-spacing:.185em;
  text-transform:uppercase;text-indent:.185em;color:#fff;
}
.hero__title-script{
  display:block;font-family:var(--script);font-size:1.21em;font-weight:400;
  letter-spacing:0;line-height:1.04;
  /* the swash on the L climbs above the script's cap height and would
     otherwise tangle with the A of AUTHENTIC — this is the clearance */
  margin-top:.18em;
  /* the brighter logotype pink now that the ground is dark — --pink was
     chosen against a white veil and reads heavy over dark footage */
  color:var(--brand-script);
}
.hero__text{margin:18px 0 30px;font-family:var(--sans);font-size:15px;font-weight:300;line-height:1.6;color:rgba(255,255,255,.84);max-width:460px;letter-spacing:.2px}
.hero__actions{display:flex;gap:12px;flex-wrap:wrap}
/* the ghost button's pink outline disappears against dark footage */
.hero .btn--ghost{border-color:rgba(255,255,255,.75);color:#fff}
.hero .btn--ghost:hover{background:#fff;border-color:#fff;color:var(--ink)}
.hero__dots{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);display:flex;gap:8px}
.hero__dots span{
  width:8px;height:8px;border-radius:50%;background:rgba(43,34,41,.22);transition:.3s;cursor:pointer;
}
.hero__dots span.is-active{background:var(--pink);width:22px;border-radius:4px}

/* ═══════════════════════════════════════════
   MARQUEE
   ═══════════════════════════════════════════ */
.marquee{background:var(--bg-alt);border-block:1px solid var(--line);overflow:hidden;padding:13px 0}
.marquee__track{display:flex;gap:28px;align-items:center;width:max-content;animation:slide 30s linear infinite}
.marquee__track span{font-size:11.5px;letter-spacing:2.5px;font-weight:500;white-space:nowrap}
.marquee__track i{color:var(--accent);font-style:normal;font-size:9px}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ═══════════════════════════════════════════
   SECTION
   ═══════════════════════════════════════════ */
.section{padding:64px 0}
.section--tight{padding-bottom:52px}
/* Trendsetters ends on a light, centred price line and Watch & Buy opens on a
   36px heading, so the two full paddings stacked at that one boundary read as
   a hole rather than a break — the other junctions close on a CTA or an image
   and carry the 64 fine. Trimmed from both sides so the cut is shared. */
.section--tight-bottom{padding-bottom:30px}
.section--tight-top{padding-top:36px}
.section__title{
  text-align:center;font-size:28.5px;letter-spacing:.5px;margin-bottom:38px;position:relative;
}
.section__title--lg{font-size:36px;letter-spacing:-.36px}
.section__title::after{
  content:"";display:block;width:46px;height:1px;background:var(--accent);margin:14px auto 0;
}
.section__cta{text-align:center;margin-top:42px}

/* ═══════════════════════════════════════════
   PRODUCT CARD
   ═══════════════════════════════════════════ */
.products--grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:34px var(--gap);
}
.product{position:relative;display:flex;flex-direction:column}
/* Marks the card a link jumped to. Rings the photo rather than the whole
   card, so the ring follows the picture's edge and not the text below it. */
.product.is-called .product__media{
  box-shadow:0 0 0 2px #fff,0 0 0 4px var(--pink);
  transition:box-shadow .3s ease;
}
.products__empty{
  padding:44px 0;text-align:center;width:100%;
  font-size:12px;letter-spacing:2.4px;text-transform:uppercase;color:var(--ink-faint);
}
.product__media{
  position:relative;aspect-ratio:2/3;overflow:hidden;background:var(--bg-alt);display:block;
}
/* Anchored to the top of the photograph, not its middle. The cards are 2:3
   and most of the photographs are 9:16, so about a sixth of the height has to
   go; centred, half of that came off the top and took the model's head with
   it. Taken off the bottom instead it is floor and shoes, which the card is
   not selling. Photographs that are already 2:3 or wider are unaffected. */
.product__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center top;
  transition:opacity .6s ease,transform .9s ease;
}
.product:hover .product__img--main{transform:scale(1.05)}

/* The Two / Three Piece cards show the whole photograph. Every shot in
   those folders is 9:16 and the set is the point — a kurta with its trousers,
   a three-piece with its dupatta — so the 2:3 crop the Trendsetters cards use
   would cut the hem off exactly what the card is selling. */
#two-piece .product__media,#three-piece .product__media{aspect-ratio:9/16}
/* Each of those two sections has a single card in a five-wide row; centred, or it
   sits alone at the left edge. `safe center` falls back to the start if the
   row ever overflows (more cards than fit), so scrolling cannot clip it. */
#two-piece .carousel__track,#three-piece .carousel__track{justify-content:safe center}

.product__badges{position:absolute;top:10px;left:10px;z-index:2;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.badge{
  font-size:10px;letter-spacing:.8px;padding:4px 10px;border-radius:60px;
  background:#fff;color:var(--ink);font-weight:500;text-transform:uppercase;
}
.badge--sold{background:rgba(43,34,41,.86);color:#fff}
.badge--restock{background:var(--accent);color:#fff}
/* Hidden, not deleted: there is no express tier to buy since delivery went
   zone-priced, so the badge promised something that could not be bought. The
   `express: true` flags stay in PRODUCTS — drop this rule to bring it back. */
.badge--express{display:none}
.badge--sale{background:var(--sale);color:#fff}

.product__quick{
  position:absolute;left:10px;right:10px;bottom:10px;z-index:2;
  display:flex;align-items:center;justify-content:center;gap:8px;
  height:33px;background:#fff;border-radius:60px;
  font-family:var(--serif);font-size:11px;letter-spacing:.9px;
  opacity:0;transform:translateY(12px);transition:.32s ease;border:0;width:calc(100% - 20px);
}
/* Focus reveals it as hover does. The photo used to open the picker, so a
   keyboard could reach it without ever seeing this button; now the button is
   the only way in, and an invisible one would be no way at all. */
.product:hover .product__quick,
.product__quick:focus-visible{opacity:1;transform:none}
.product__quick:hover{background:var(--pink);color:#fff}
.product__quick[disabled]{opacity:0;pointer-events:none}

.product__sizes{
  display:flex;flex-wrap:wrap;gap:7px;align-items:center;justify-content:center;
  margin-top:12px;min-height:20px;
}
/* "Size" sits outside the control rather than as a placeholder option, so the
   box always shows the actual choice and never a label pretending to be one. */
.product__size-label{
  font-size:10.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--ink-faint);
}
/* One slim line whatever the size run. The native arrow is replaced with the
   same chevron the checkout selects use, so the two read as one control. */
.product__size{
  appearance:none;font-family:var(--sans);font-size:11.5px;font-weight:500;letter-spacing:.5px;
  color:var(--ink);cursor:pointer;
  background-color:var(--bg-alt);border:1px solid var(--line);border-radius:60px;
  height:26px;padding:0 24px 0 11px;max-width:100%;
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d6408a' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 8px center;background-size:11px;
  transition:border-color .2s,background-color .2s,box-shadow .2s;
}
.product__size:hover{border-color:var(--pink);background-color:#fff}
.product__size:focus-visible{
  outline:0;border-color:var(--pink);background-color:#fff;
  box-shadow:0 0 0 3px rgba(214,64,138,.14);
}
.size{
  font-size:10.5px;letter-spacing:.5px;color:var(--ink-soft);
  border:1px solid var(--line);padding:2px 7px;border-radius:2px;transition:.2s;
}
.size:hover{border-color:var(--pink);color:var(--pink)}
.size--unst{border-color:var(--accent);color:var(--accent)}

.product__vendor{
  display:block;text-align:center;font-size:10.5px;letter-spacing:1.4px;
  color:var(--ink-faint);margin-top:10px;text-transform:uppercase;
}
/* Dropped from the dress-type rows: these are the shop's own styles listed
   under its own logo, so repeating the brand on every card is noise. NEW IN
   keeps it, where the codes read as individual pieces. */
[data-render="trendsetters"] .product__vendor,
[data-render="onepiece"] .product__vendor,
[data-render="twopiece"] .product__vendor{display:none}
.product__title{
  text-align:center;font-family:var(--serif);font-size:14px;font-weight:500;margin-top:5px;
}
/* With the vendor line gone the title has to carry that gap itself, or it
   sits hard against the photo. */
[data-render="trendsetters"] .product__title,
[data-render="onepiece"] .product__title,
[data-render="twopiece"] .product__title{margin-top:13px}
.product__title a:hover{color:var(--accent)}
.product__price{
  text-align:center;font-size:14px;color:var(--ink-soft);margin-top:auto;padding-top:5px;
}
.product__price del{margin-right:6px;color:var(--ink-faint)}
.product__price ins{text-decoration:none;color:var(--sale)}

/* ═══════════════════════════════════════════
   CAROUSEL
   ═══════════════════════════════════════════ */
.carousel{position:relative}
.carousel__viewport{overflow:hidden}
.carousel__track{
  display:flex;gap:var(--gap);transition:transform .55s cubic-bezier(.4,0,.2,1);
}
.products--carousel .product{flex:0 0 calc((100% - var(--gap)*4)/5)}
.carousel__arrow{
  position:absolute;top:34%;z-index:5;width:42px;height:42px;border-radius:50%;
  background:#fff;border:1px solid var(--line);color:var(--ink);
  display:grid;place-items:center;transition:.25s;box-shadow:0 4px 14px rgba(0,0,0,.07);
}
.carousel__arrow:hover{background:var(--pink);color:#fff;border-color:var(--pink)}
.carousel__arrow--prev{left:-16px}
.carousel__arrow--next{right:-16px}
.carousel__arrow[disabled]{opacity:.3;pointer-events:none}
.carousel.is-static .carousel__arrow{display:none}

/* ═══════════════════════════════════════════
   REELS  (Watch & Buy)
   ═══════════════════════════════════════════ */
.reels-wrap{position:relative}

/* ── "Swipe for more" ──
   Desktop keeps a visible scrollbar on the strip, which is affordance enough,
   and "swipe" is the wrong verb for a mouse — so this is a touch-width hint
   only. Shown from the JS-managed at-end class on .reels-wrap. */
.reels__hint{display:none}
@media (max-width:900px){
  /* The heading's box runs past its text to include the little pink rule
     beneath it (a ::after carrying a 14px top margin). The hint has to clear
     that rule, not the words — measured from the box, not guessed, because
     at the obvious spacing the hint landed level with the rule and read like
     a mistake. Sibling margins collapse, so the larger of these two wins. */
  #watch .section__title{margin-bottom:8px}
  .reels__hint{
    display:block;text-align:right;margin:32px 0 10px;
    font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--ink-faint);
  }
  /* At the far right the arrow swaps sides and points back the way you came;
     everywhere else it points forward. Only ever one is on screen. */
  .reels__hint-arrow{display:none;animation:swipeNudge 1.8s ease-in-out infinite}
  .reels__hint-arrow--fwd{display:inline-block;margin-left:6px}
  #watch.at-end .reels__hint-arrow--fwd{display:none}
  #watch.at-end .reels__hint-arrow--back{
    display:inline-block;margin-right:6px;
    animation-name:swipeNudgeBack;
  }
  /* both classes at once means the strip fits with nothing to scroll either
     way, so there is no hint to give */
  #watch.at-start.at-end .reels__hint{display:none}
}
/* a small drift in the direction of travel — the blanket reduced-motion rule
   at the end of this file zeroes it for anyone who asked for stillness */
@keyframes swipeNudge{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(4px)}
}
/* the drift follows the arrow: back the other way once it points left */
@keyframes swipeNudgeBack{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(-4px)}
}
.reels{
  display:flex;gap:var(--gap);overflow-x:auto;padding:4px 15px 18px;
  scroll-snap-type:x mandatory;scrollbar-width:thin;
}
/* the strip is swiped on desktop too, but there the whole row is visible and
   a pointer can drag the scrollbar — the arrows are a touch affordance */
.reels__arrow{display:none}
.reels::-webkit-scrollbar{height:4px}
.reels::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.reel{
  flex:0 0 210px;scroll-snap-align:start;position:relative;
  aspect-ratio:9/16;overflow:hidden;border-radius:4px;background:var(--bg-alt);
}
.reel__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  background:var(--bg-alt);display:block;
}
/* The caption is the link and covers the whole clip, so a tap anywhere on
   the card follows it; the darkening is only over the bottom where the
   words sit. */
.reel__info{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:26px 12px 12px;color:#fff;
  background:linear-gradient(transparent 62%,rgba(0,0,0,.75));
}
.reel__info h4{font-size:13px;font-weight:500}
.reel__info span{font-size:12.5px;opacity:.9}

/* ═══════════════════════════════════════════
   CATEGORY GRID
   ═══════════════════════════════════════════ */
/* The Kashmiri banner sits between Watch & Buy and this row and adds nothing
   of its own, so each neighbour holds one side of the 44px around it. Below,
   Premium Lucknow brings its own 44px, so 20 here makes that gap 64. */
#watch{padding-bottom:44px}
#categories{padding:44px 0 20px}
/* the whole gap from Premium Lucknow up to the next heading (Customers Not Models) */
#customers{padding-top:48px}

/* Square tiles, 30px gutters, one centred serif word each — the arrangement
   the reference site uses for this row. */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.cat{
  position:relative;aspect-ratio:1/1;overflow:hidden;display:grid;place-items:center;
}
/* Anchored to the top: every photograph is a full-length portrait, and a
   square cut from its middle would keep the hem and lose the face. */
.cat::before{
  content:"";position:absolute;inset:0;background:var(--img) center top/cover no-repeat;
  transition:transform .9s ease;
}
.cat:hover::before{transform:scale(1.06)}
/* No scrim: the tiles are meant to read as bright photographs. The word has
   to stand on its own, so it carries a tight dark halo plus a wide soft one —
   enough for white type on the palest tie-dye without dimming the picture. */
.cat__label{
  position:relative;z-index:2;color:#fff;font-family:var(--serif);
  font-size:clamp(21px,2.5vw,36px);font-weight:300;letter-spacing:normal;
  line-height:1;text-align:center;
  text-shadow:0 1px 3px rgba(0,0,0,.6),0 0 14px rgba(0,0,0,.5),0 0 30px rgba(0,0,0,.35);
}

/* ═══════════════════════════════════════════
   KASHMIRI BANNER

   Full-bleed 16:9 strip sitting between Watch & Buy and the category
   squares, with the 44px clearance its neighbours hold on both sides. The
   whole strip is the way into the Kashmiri picker. Every photograph in this
   shop is portrait, so the picture is anchored at the top and takes 60% of
   the width: at 1.08:1 it keeps the kurti from neckline to hem.
   ═══════════════════════════════════════════ */
/* No margin of its own. The banner is full-bleed and sits between two padded
   sections, so a margin here would stack onto their padding — that is how the
   gaps reached 100px above and 114px below. Each neighbour owns its own end of
   the gap instead, which makes it one number to change rather than two. */
.promo{
  display:grid;grid-template-columns:56% 1fr;
  --kashmiri:#063c80; /* the kurti in the photograph, sampled; the words match it */
  margin:0;aspect-ratio:16/9;overflow:hidden;background:#faf7f2;color:var(--ink);
}
.promo__media{
  background-size:cover;background-position:center 1%;background-repeat:no-repeat;
  background-color:var(--bg-alt);transition:transform .8s ease;
}
.promo:hover .promo__media{transform:scale(1.03)}
/* Every size here scales with the viewport, because the panel is only ~39% of
   a 16:9 band: at 375px that is 148px across, and fixed type would burst it. */
.promo__panel{
  position:relative;background:#faf7f2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:clamp(10px,2.2vw,30px);
}
.promo__eyebrow{
  text-transform:uppercase;color:var(--ink-soft);
  font-size:clamp(6px,.8vw,11px);letter-spacing:clamp(1px,.24vw,3.4px);
  margin-bottom:clamp(4px,.9vw,14px);
}
/* The name does the work, so it is the only thing set large: capitals in the
   serif, in the kurti's blue, on a line of its own. The whole phrase used to
   run in the script at one size and wrap to two lines - handsome, but the
   panel is only ~148px across on a phone, which left "Kashmiri" at about 16px
   and people scrolled past without reading it. The script is kept for the
   half-line underneath, where it is decoration rather than the message. */
.promo__script{
  font-family:var(--serif);font-weight:500;color:var(--kashmiri);
  text-transform:uppercase;letter-spacing:.02em;line-height:.95;
  font-size:clamp(26px,5.6vw,74px);max-width:none;
}
.promo__tag{
  font-family:var(--script);color:var(--ink);line-height:1;
  font-size:clamp(15px,2.3vw,32px);margin-top:clamp(3px,.5vw,8px);
}
.promo__cta{
  display:inline-block;margin-top:clamp(7px,1.3vw,20px);padding-bottom:clamp(2px,.3vw,5px);
  text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--kashmiri);
  font-size:clamp(6px,.78vw,11px);letter-spacing:clamp(.8px,.2vw,2.6px);
  transition:color .25s ease;
}
.promo:hover .promo__cta{color:var(--kashmiri)}

/* ═══════════════════════════════════════════
   BABY LUCKNOW

   The children's line, and the only section meant to look like fun rather
   than like a shop: round photo bubbles in the colour's own ring, and the
   chosen colour's pictures in soft-cornered frames underneath. A colour has
   several photographs here — the same dress on a child, flat, held up — so
   the bubbles pick a colour and the row shows all of it, instead of the one
   photo per colour the rest of the site works in.
   ═══════════════════════════════════════════ */
#baby .bb__eyebrow{
  font-size:10px;letter-spacing:3.6px;text-transform:uppercase;color:#f08fb0;
  text-align:center;margin-bottom:10px;
}
#baby .bb__title{
  font-family:var(--serif);font-weight:400;line-height:1.05;text-align:center;
  font-size:clamp(26px,3.4vw,42px);letter-spacing:1px;text-transform:uppercase;
}
#baby .bb__title em{
  font-family:var(--script);font-style:normal;text-transform:none;color:var(--brand-script);
  font-size:1.3em;padding-left:.08em;vertical-align:-.04em;
}
#baby .bb__sub{text-align:center;color:var(--ink-soft);font-size:13px;margin-top:10px}
#baby .bb__bubbles{display:flex;justify-content:center;flex-wrap:wrap;gap:22px;margin:30px 0 28px}
#baby .bb__bub{background:none;border:0;padding:0;cursor:pointer;width:104px;text-align:center}
/* the ring is the colour; the photograph sits inside it */
#baby .bb__ring{
  display:block;width:92px;height:92px;border-radius:50%;margin:0 auto 9px;padding:4px;
  background:#fff;box-shadow:0 0 0 3px var(--ring,var(--line)) inset,0 4px 14px rgba(43,34,41,.1);
  transition:transform .28s ease,box-shadow .28s ease;
}
#baby .bb__ring img{
  width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center 18%;display:block;
}
#baby .bb__bub:hover .bb__ring{transform:translateY(-4px) scale(1.05)}
#baby .bb__bub.is-on .bb__ring{box-shadow:0 0 0 4px var(--ring) inset,0 8px 20px rgba(43,34,41,.18);transform:scale(1.08)}
#baby .bb__bub b{
  display:block;font:500 11.5px/1.2 var(--sans);letter-spacing:1.4px;text-transform:uppercase;
  color:var(--ink-soft);transition:color .2s;
}
#baby .bb__bub.is-on b{color:var(--ink)}
#baby .bb__bub.is-sold .bb__ring img{filter:grayscale(1);opacity:.55}
#baby .bb__bub.is-sold b{color:var(--sale)}
#baby .bb__shots{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
#baby .bb__shot{flex:0 1 calc((100% - 48px)/4)}
#baby .bb__shot{border:0;padding:0;background:none;cursor:pointer}
#baby .bb__shot img{
  width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center 15%;display:block;
  border-radius:14px;background:var(--bg-alt);transition:transform .45s ease;
}
#baby .bb__shot:hover img,#baby .bb__shot:focus-visible img{transform:translateY(-4px)}
@media (max-width:900px){#baby .bb__shot{flex-basis:calc((100% - 32px)/3)}}
@media (max-width:640px){
  #baby .bb__bubbles{gap:14px;margin:24px 0 22px}
  #baby .bb__bub{width:76px}
  #baby .bb__ring{width:68px;height:68px}
  #baby .bb__bub b{font-size:10px;letter-spacing:1px}
  #baby .bb__shots{gap:10px}
  #baby .bb__shot{flex-basis:calc((100% - 10px)/2)}
}

/* ═══════════════════════════════════════════
   SLEEVELESS LUCKNOW

   The summer line, between Premium Lucknow and the customer photographs.
   One row of five, named and priced under each photograph — the same plain
   treatment One Piece and Three Piece use, so a third shape of card does not
   turn up halfway down the page. The heading pairs the serif with the
   logotype's script, as Premium and Customers Not Models already do.
   ═══════════════════════════════════════════ */
#sleeveless .sl__eyebrow{
  font-size:10px;letter-spacing:3.6px;text-transform:uppercase;color:var(--pink);
  margin-bottom:12px;text-align:center;
}
#sleeveless .sl__title{
  font-family:var(--serif);font-weight:400;line-height:1.05;text-align:center;
  font-size:clamp(26px,3.4vw,42px);letter-spacing:1px;text-transform:uppercase;
}
#sleeveless .sl__title em{
  font-family:var(--script);font-style:normal;text-transform:none;color:var(--brand-script);
  font-size:1.3em;padding-left:.08em;vertical-align:-.04em;
}
#sleeveless .sl__rule{width:44px;height:1px;background:var(--pink);margin:16px auto 0}
#sleeveless .sl__row{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:34px}
#sleeveless .sl__cell{cursor:pointer;text-align:center;border:0;background:none;padding:0;font:inherit}
#sleeveless .sl__cell figure{margin:0;overflow:hidden;background:var(--bg-alt)}
#sleeveless .sl__cell img{
  width:100%;aspect-ratio:9/16;object-fit:cover;object-position:center top;display:block;
  transition:transform .6s ease;
}
#sleeveless .sl__cell:hover img,#sleeveless .sl__cell:focus-visible img{transform:scale(1.05)}
#sleeveless .sl__cap{margin-top:9px;display:block;font-size:12.5px;letter-spacing:.4px;color:var(--ink)}
#sleeveless .sl__cap b{display:block;font-weight:500}
#sleeveless .sl__cap span{color:var(--ink-faint);font-size:11.5px}
#sleeveless .sl__cell.is-sold img{filter:grayscale(1);opacity:.55}
#sleeveless .sl__cell.is-sold .sl__cap b{color:var(--ink-faint)}
#sleeveless .sl__cell.is-sold .sl__cap span{color:var(--sale);text-transform:uppercase;letter-spacing:1.2px;font-size:10px}
@media (max-width:900px){#sleeveless .sl__row{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){
  #sleeveless .sl__row{grid-template-columns:1fr 1fr;gap:10px;margin-top:26px}
}

/* ═══════════════════════════════════════════
   CUSTOMERS NOT MODELS

   The customer photographs, where Shop by Seasons used to be. The title sets
   "not" in the logotype's script and pink between two serif words, the same
   pairing as Premium Lucknow. All ten photographs, five across in two rows —
   a straight grid with no gaps; two across on a phone.
   ═══════════════════════════════════════════ */
.cnm{text-align:center}
.cnm__eyebrow{
  font-size:10px;letter-spacing:3.6px;text-transform:uppercase;color:var(--pink);
  margin-bottom:12px;
}
.cnm__title{
  font-family:var(--serif);font-weight:400;line-height:1.05;
  font-size:clamp(26px,3.4vw,42px);letter-spacing:1px;text-transform:uppercase;
}
.cnm__not{
  font-family:var(--script);text-transform:none;color:var(--pink);
  font-size:1.35em;padding:0 .12em;vertical-align:-.04em;
}
.cnm__rule{width:44px;height:1px;background:var(--pink);margin:16px auto 0}
/* flex, not grid: a last row that is short (13 photos across 5) sits centred
   instead of leaving empty cells on the right */
.cnm__grid{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:34px}
/* 3:4 from the top: every one of these is a phone portrait, and the top
   third is where the face and the neckline are */
.cnm__pic{
  flex:0 0 calc((100% - 4 * 14px) / 5);aspect-ratio:3/4;border-radius:6px;
  background-size:cover;background-position:center top;background-color:var(--bg-alt);
  box-shadow:0 2px 12px rgba(43,34,41,.06);
}
/* The two invitation tiles that fill out a short last row: the same size
   and corner as a photo, but a pale pink card with a line, so they read as
   part of the set without pretending to be a customer. */
.cnm__fill{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  padding:14px;text-align:center;color:var(--ink);
  background:var(--bg-alt);border:1px solid var(--line);box-shadow:none;
  transition:background .25s,border-color .25s;
}
.cnm__fill:hover{background:#fbe9f1;border-color:var(--pink)}
.cnm__fill svg{width:30px;height:30px;color:var(--pink);stroke-width:1.3;margin-bottom:2px}
.cnm__fill b{font-family:var(--serif);font-weight:400;font-size:clamp(14px,1.3vw,17px);line-height:1.2}
.cnm__fill i{font-family:var(--script);font-style:normal;color:var(--pink);font-size:clamp(22px,2.3vw,32px);line-height:1}
.cnm__fill span{
  font-size:9px;letter-spacing:1.8px;text-transform:uppercase;color:var(--ink-soft);
  border-bottom:1px solid var(--pink);padding-bottom:3px;
}
/* three across on a tablet — the phone's two-across is with the other phone rules */
@media (max-width:900px){
  .cnm__grid{gap:12px}
  .cnm__pic{flex-basis:calc((100% - 2 * 12px) / 3)}
}

/* ═══════════════════════════════════════════
   PREMIUM LUCKNOW

   Deliberately quiet: one piece with more air around it than any other
   section on the page. Restraint is what reads as expensive — a row of six
   would say "more stock", not "better stock". The gold hairline frame and
   the underlined text link do the work a filled button would do elsewhere.

   The photograph is a tall portrait (836x1324). Sized from the screen
   HEIGHT rather than the width, with the words beside it rather than over
   it, the whole section fits one laptop screen — stacked, it ran 330px past
   a 768-high display. On phones it stacks again, still height-capped so it
   also fits the small 360x640 handsets.
   ═══════════════════════════════════════════ */
.premium{padding:44px 0}
.premium__inner{
  display:flex;align-items:center;justify-content:center;gap:72px;text-align:left;
}
.premium__text{max-width:340px}
.premium__eyebrow{
  font-size:10px;letter-spacing:3.6px;text-transform:uppercase;color:var(--gold);
  margin-bottom:12px;
}
.premium__title{
  font-family:var(--serif);font-weight:400;line-height:1.05;
  font-size:clamp(28px,3.6vw,44px);
}
/* the same script as the logotype, so the section is unmistakably ours */
.premium__script{
  font-family:var(--script);color:var(--gold);
  font-size:1.15em;padding:0 .04em;
}
.premium__rule{width:44px;height:1px;background:var(--gold);margin:16px 0 0}
.premium__blurb{margin:18px 0 0;font-size:14px;line-height:1.7;color:var(--ink-soft)}
/* The mount is the point: the hairline and the gap around the picture are
   what make it read as a framed plate rather than another product tile.
   fit-content so the frame hugs a picture whose width comes from its height. */
.premium__frame{
  flex:none;width:fit-content;padding:11px;border:1px solid var(--gold);
}
/* Height-driven: the width follows from the photograph's own proportions —
   Piyasha1 is hand-cropped to 836x1324, so it is shown edge to edge with
   nothing trimmed by the browser. If the picture is ever replaced, set this
   to the new file's ratio or the crop decision moves back to CSS. */
.premium__pic{
  height:min(62vh,620px);width:auto;aspect-ratio:836/1324;
  background-size:cover;background-position:center;background-color:var(--bg-alt);
}
.premium__cta{
  display:inline-block;margin-top:22px;padding-bottom:5px;
  font-size:10px;letter-spacing:2.6px;text-transform:uppercase;
  color:var(--ink);border-bottom:1px solid var(--gold);
  transition:color .25s ease,border-color .25s ease;
}
.premium__cta:hover{color:var(--gold)}

@media (max-width:640px){
  .premium{padding:36px 0 40px}
  .premium__inner{flex-direction:column;gap:0;text-align:center}
  .premium__frame{order:2;padding:8px;margin-top:16px}
  .premium__text{order:1;display:contents}
  .premium__title{order:1}
  .premium__eyebrow{order:0}
  .premium__rule{order:1;margin:12px auto 0}
  .premium__blurb{display:none}
  .premium__cta{order:3;margin-top:18px}
  /* 52% of the screen, or the width the phone has, whichever is smaller */
  .premium__pic{height:min(52vh,calc(86vw * 1324 / 836))}
}

/* ═══════════════════════════════════════════
   WALL OF LOVE — customer reviews

   The heading is Great Vibes, already loaded for the logotype, so it costs no
   extra font. Red rather than the brand pink, as asked: a warm red that still
   sits beside the pink instead of fighting it.
   ═══════════════════════════════════════════ */
.love__title{text-align:center;color:var(--love);line-height:1;margin-bottom:6px}
.love__script{
  display:inline-block;font-family:var(--script);font-weight:400;
  /* Great Vibes sits high in its em box and its descenders run long, so it
     needs headroom the uppercase section titles never do. */
  font-size:clamp(38px,6vw,68px);padding:.12em 0 .18em;
}
.love__heart{
  width:clamp(14px,1.7vw,22px);height:auto;fill:var(--love);
  /* lifted to the cap line so it reads as a signature beside the L and the V,
     rather than sitting on the baseline like punctuation */
  transform:translateY(-.32em);margin-left:.12em;
}
.love__swash{
  display:block;margin:2px auto 0;
  width:clamp(148px,26vw,260px);height:clamp(9px,1.2vw,14px);
}
.love__swash path{
  fill:none;stroke:var(--love);stroke-width:1.4;stroke-linecap:round;
  /* vector-effect keeps the stroke even after preserveAspectRatio="none"
     stretches the viewBox — without it the line thins out as it widens */
  vector-effect:non-scaling-stroke;opacity:.75;
}
.love__sub{
  text-align:center;font-size:11px;letter-spacing:3.2px;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:36px;
}

/* The reviews are screenshots, so every slide keeps a fixed HEIGHT and takes
   whatever width its own picture needs. The shots run from 2.3:1 to square;
   forcing them into one cell shape would either crop words off the edge or
   strand the wide ones in a sea of padding. Height-matched, they line up
   along the top and bottom and read as one wall.

   A real scroller, not a transform track: it can be swiped, dragged and
   tabbed to, and the autoplay just scrolls it. */
.love-rail{
  display:flex;gap:var(--gap);min-width:0;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:4px 2px 10px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.love-rail::-webkit-scrollbar{display:none}
.love-rail:focus-visible{outline:2px solid var(--love);outline-offset:3px}
.love-slide{
  flex:0 0 auto;scroll-snap-align:center;margin:0;
  height:clamp(230px,30vw,400px);
  background:#fff;border:1px solid var(--line);border-radius:4px;
  padding:9px;box-shadow:0 2px 10px rgba(43,34,41,.05);
}
/* `contain` and auto width together: the picture is never cut and never
   stretched, it simply sets how wide its own slide is. */
.love-slide img{height:100%;width:auto;display:block;object-fit:contain;border-radius:2px}

.love-dots{display:flex;justify-content:center;gap:7px;margin-top:18px}
.love-dot{
  width:6px;height:6px;border-radius:50%;padding:0;border:0;
  background:var(--line);transition:background-color .25s,transform .25s;cursor:pointer;
}
.love-dot.is-on{background:var(--love);transform:scale(1.35)}

/* ═══════════════════════════════════════════
   FEATURE COLUMNS
   ═══════════════════════════════════════════ */
/* Two square pictures with the wording UNDER them, centred — the reference
   site's arrangement, measured: 570px columns in a 1200 container with a 30px
   gutter, a 1:1 image, then a centred 22px/600 title and a button. The copy
   used to sit on top of the picture behind a dark scrim; here it sits below
   on the page's own ground, which is why the button goes back to the normal
   dark fill instead of the inverted white one it needed over a photograph. */
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.feature{position:relative}
.feature__img{
  aspect-ratio:1/1;background-size:cover;background-position:center 22%;
  transition:transform .9s;
}
/* the scale-on-hover has to be clipped by something, and it is no longer the
   card itself now that the text sits outside the frame */
.feature__media{overflow:hidden}
/* The clip is 9:16, the frame is 1:1, so 44% of its height is cropped away.
   Anchored high rather than centred: the model's face sits 17–31% down the
   frame, and a centred crop would take the top of her head off. */
.feature__video{
  display:block;width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center 12%;
  background:var(--bg-alt);transition:transform .9s;
}
.feature:hover .feature__img,
.feature:hover .feature__video{transform:scale(1.05)}
.feature__body{padding:20px 0 0;text-align:center}
.feature__body h3{
  font-family:var(--serif);font-size:22px;font-weight:600;
  color:var(--ink);margin-bottom:14px;
}

/* ═══════════════════════════════════════════
   SERVICES
   ═══════════════════════════════════════════ */
.services{border-block:1px solid var(--line);padding:44px 0;background:var(--bg-alt)}
.services__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.service svg{width:26px;height:26px;margin-inline:auto;color:var(--accent);stroke-width:1.2}
.service h4{font-size:15px;margin:12px 0 4px}
.service p{font-size:13px;color:var(--ink-soft);font-weight:300}

/* ═══════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════ */
.footer{background:#fff;padding-top:60px;font-size:14px}
.footer__grid{display:grid;grid-template-columns:1.2fr .9fr 1fr;gap:40px var(--gap);padding-bottom:52px}
.footer__col h4{
  font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:1.5px;
  text-transform:uppercase;margin-bottom:18px;
}
.footer__col a{display:block;color:var(--ink-soft);padding:5px 0;transition:.2s;font-weight:300}
.footer__col a:hover{color:var(--ink);padding-left:4px}
.footer__note{color:var(--ink-soft);font-weight:300;font-size:13px;margin-top:6px}

/* Four ways to reach us, each a ringed line icon with a caption beneath, so
   nobody has to guess what a glyph is. The ring fills pink on hover; the
   caption sits in the same small caps as the footer headings. */
.socials{display:flex;gap:16px;margin-top:20px}
.footer__col .socials a{
  display:grid;justify-items:center;gap:7px;padding:0;
  font-size:9.5px;letter-spacing:1.3px;text-transform:uppercase;color:var(--ink-soft);
}
.footer__col .socials a:hover{padding-left:0;color:var(--ink)}
.socials__ico{
  width:40px;height:40px;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;color:var(--pink);transition:.2s;
}
.socials a:hover .socials__ico{background:var(--pink);border-color:var(--pink);color:#fff}
.socials svg{width:17px;height:17px}

.footer__bottom{border-top:1px solid var(--line);padding:18px 0}
/* The payment chips that used to sit opposite the copyright are gone, so
   the line is centred rather than pushed to one side of an empty row. */
.footer__bottom-inner{
  display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap;text-align:center;
}
.footer__bottom p{font-size:12.5px;color:var(--ink-soft);font-weight:300}

/* ═══════════════════════════════════════════
   DRAWER / SEARCH / UTIL
   ═══════════════════════════════════════════ */
.drawer{position:fixed;inset:0;z-index:100;visibility:hidden}
.drawer.is-open{visibility:visible}
.drawer__scrim{
  position:absolute;inset:0;background:rgba(0,0,0,.45);opacity:0;transition:opacity .3s;
}
.drawer.is-open .drawer__scrim{opacity:1}
.drawer__panel{
  position:absolute;top:0;left:0;bottom:0;width:min(320px,84vw);background:#fff;z-index:2;
  transform:translateX(-100%);transition:transform .35s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;
}
.drawer.is-open .drawer__panel{transform:none}
.drawer__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px;border-bottom:1px solid var(--line);
}
.drawer__head .logo__mark{font-size:30px;letter-spacing:0;padding-top:2px}
.drawer__nav{padding:10px 0}
.drawer__nav a{
  display:block;padding:15px 22px;font-size:13.5px;font-weight:600;letter-spacing:1px;
  border-bottom:1px solid var(--line);
}
.drawer__nav a:hover{background:var(--bg-alt)}

.search{
  position:fixed;inset:0;z-index:110;background:rgba(255,255,255,.98);
  display:grid;place-items:center;opacity:0;visibility:hidden;transition:.28s;
}
.search.is-open{opacity:1;visibility:visible}
.search__box{
  display:flex;align-items:center;gap:12px;width:min(680px,90vw);
  border-bottom:1px solid var(--pink);padding-bottom:12px;
}
.search__box input{
  flex:1;border:0;outline:0;background:transparent;
  font-family:var(--serif);font-size:clamp(20px,4vw,32px);
}

.to-top{
  position:fixed;right:20px;bottom:20px;z-index:70;width:44px;height:44px;border-radius:50%;
  background:var(--pink);color:#fff;border:0;display:grid;place-items:center;
  opacity:0;pointer-events:none;transition:.3s;transform:translateY(10px);
}
.to-top.is-visible{opacity:1;pointer-events:auto;transform:none}
.to-top:hover{background:var(--pink-deep)}

/* ═══════════════════════════════════════════
   DOCUMENT SHEET — Terms & Conditions

   A centred reading sheet over a dimmed page. Above the checkout (140) so
   the "Terms & Conditions" note under Place Order can open it without the
   customer losing their place in the form.
   ═══════════════════════════════════════════ */
.doc{position:fixed;inset:0;z-index:150;visibility:hidden}
.doc.is-open{visibility:visible}
.doc__scrim{position:absolute;inset:0;background:rgba(16,10,14,.55);opacity:0;transition:opacity .3s}
.doc.is-open .doc__scrim{opacity:1}
.doc__panel{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.97);
  width:min(720px,94vw);max-height:min(86%,880px);
  display:flex;flex-direction:column;background:#fff;
  box-shadow:0 30px 80px rgba(0,0,0,.35);
  opacity:0;transition:opacity .28s ease,transform .28s ease;
}
.doc.is-open .doc__panel{opacity:1;transform:translate(-50%,-50%) scale(1)}
.doc__head{
  position:relative;padding:26px 60px 18px 36px;border-bottom:1px solid var(--line);
}
.doc__eyebrow{
  font-family:var(--script);color:var(--brand-script);font-size:22px;line-height:1;
  margin-bottom:6px;
}
.doc__title{font-family:var(--serif);font-weight:400;font-size:26px;letter-spacing:.5px}
.doc .doc__close{
  position:absolute;top:16px;right:16px;
  width:40px;height:40px;border-radius:50%;
  background:#fff;border:1px solid var(--line);
  transition:border-color .2s ease,background .2s ease;
}
.doc .doc__close:hover{border-color:var(--pink);background:var(--bg-alt)}
.doc .doc__close svg{width:17px;height:17px;stroke-width:1.75}
/* Showroom and Website, in the head beside the close. Same size and spacing
   as the nav on the About and Lucknow Kurti pages, so the three match. */
.doc__nav{
  position:absolute;top:26px;right:70px;display:flex;gap:18px;
  font-size:11px;letter-spacing:2px;text-transform:uppercase;
}
.doc__nav a{color:var(--ink);border-bottom:1px solid transparent;padding-bottom:2px;transition:.2s ease}
.doc__nav a:hover{color:var(--pink);border-bottom-color:var(--pink)}

/* the text itself: measured for reading, not for display */
.doc__body{
  overflow-y:auto;padding:24px 36px 36px;
  font-size:14px;line-height:1.75;color:var(--ink-soft);font-weight:300;
}
.doc__body p{margin:0 0 12px}
.doc__lead{font-size:15px;color:var(--ink)}
/* :not(.btn) because a button is not prose. Without it these two rules
   outrank .btn--dark (a class plus an element beats a class alone) and
   paint its white text pink - on a pink background, which is invisible
   until the hover colour moves underneath it. */
.doc__body a:not(.btn){color:var(--pink);border-bottom:1px solid rgba(214,64,138,.35)}
.doc__body a:not(.btn):hover{border-bottom-color:var(--pink)}
.doc__body b{font-weight:500;color:var(--ink)}
.doc__body h3{
  display:flex;align-items:center;gap:10px;margin:26px 0 10px;
  font-family:var(--serif);font-weight:400;font-size:17px;color:var(--ink);
}
/* the clause number, set in a thin pink ring like the footer's icons */
.doc__body h3 span{
  flex:none;width:24px;height:24px;border:1px solid var(--pink);border-radius:50%;
  display:grid;place-items:center;font-family:var(--sans);font-size:11px;color:var(--pink);
}
.doc__body ul{list-style:none;margin:0 0 12px;padding:0}
.doc__body li{position:relative;padding-left:18px;margin-bottom:8px}
.doc__body li::before{
  content:"";position:absolute;left:0;top:.8em;width:8px;height:1px;background:var(--pink);
}
.doc__body ul ul{margin:6px 0 0}
.doc__body ul ul li{margin-bottom:4px}
.doc__body ul ul li::before{width:4px;height:4px;border-radius:50%;top:.72em;left:2px}
/* a pointer from one sheet to another, set apart from the clauses above it */
.doc__foot{margin-top:26px;padding-top:14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-faint)}
/* the sold-out note: the same sheet, shrunk to a small rounded card. The
   logotype script on top is the "Silk n Linen, stylishly" the card leads
   with; a heart, a short line and one soft button — a note, not a notice. */
.doc--note .doc__panel{
  width:min(292px,86vw);max-height:none;text-align:center;border-radius:20px;
  box-shadow:0 22px 60px rgba(43,34,41,.28);
}
.doc--note .doc__body{padding:26px 22px 22px;overflow:visible}
.doc--note .doc__close{top:6px;right:6px;padding:6px}
.doc--note .doc__close svg{width:16px;height:16px}
.note__brand{font-family:var(--script);color:var(--brand-script);font-size:27px;line-height:1;margin-bottom:10px}
.note__heart{width:22px;height:22px;fill:var(--pink);stroke:none;margin:0 auto 4px;display:block}
.note__title{font-family:var(--serif);font-weight:400;font-size:21px;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink);line-height:1.1}
.note__item{margin:5px 0 0;font-size:9.5px;letter-spacing:2px;text-transform:uppercase;color:var(--ink-faint)}
.note__text{font-size:12.5px;line-height:1.6;color:var(--ink-soft);margin:12px 0 16px}
.note__btn{
  display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 16px;border-radius:60px;
  background:var(--pink);color:#fff;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;
  transition:background .25s;
}
.note__btn:hover{background:var(--pink-deep)}
.note__btn svg{width:14px;height:14px;stroke-width:1.6}

.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:120;
  background:var(--ink);color:#fff;padding:12px 22px;border-radius:60px;font-size:13px;
  opacity:0;pointer-events:none;transition:.3s;
}
.toast.is-visible{opacity:1;transform:translate(-50%,0)}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.is-in{opacity:1;transform:none}

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media (max-width:1100px){
  .products--carousel .product{flex:0 0 calc((100% - var(--gap)*3)/4)}
  .footer__grid{grid-template-columns:1.2fr 1fr 1fr;gap:36px 30px}
}
@media (max-width:900px){
  :root{--header-h:64px}
  /* Equal side tracks so the logo sits on the true centre of the screen,
     whatever is in the side groups. The 1fr tracks never shrink below
     their icons, so nothing overlaps on narrow phones. */
  .header__inner{grid-template-columns:1fr auto 1fr}
  .header__burger{display:inline-flex}
  .header__search{display:none}
  /* justify-self:center matters as much as the text-align: without it the
     logo stretches to fill the whole track, and .logo__swash is width:100%,
     so the underline would run out well past both ends of the wordmark. */
  .logo{text-align:center;justify-self:center}
  .logo__mark{font-size:31px;padding-top:4px}
  .logo__swash{height:7px;stroke-width:2.6}
  .logo__sub{font-size:9px;letter-spacing:2.6px;text-indent:2.6px}
  .nav{display:none}
  .products--grid{grid-template-columns:repeat(3,1fr)}
  .products--carousel .product{flex:0 0 calc((100% - var(--gap)*2)/3)}
  /* The reference keeps the same two-panel 16:9 band on a phone rather than
     restacking it, so this does too — only the clearance tightens. Same rule
     as on a desktop: the neighbours hold the gap, the banner holds none. */
  #watch{padding-bottom:28px}
  #categories{padding:28px 0 12px}
  #customers{padding-top:32px}
  .services__grid{grid-template-columns:repeat(2,1fr);gap:30px}
  .carousel__arrow--prev{left:0}
  .carousel__arrow--next{right:0}
}
@media (max-width:640px){
  /* narrow screens: there is no room for a left-to-right ramp, so the scrim
     becomes top-to-bottom — a little heavier behind the copy, light over
     the footage; the copy's text-shadow does the rest */
  .hero__overlay{
    background:
      linear-gradient(180deg,rgba(16,10,14,.26) 0%,rgba(16,10,14,.40) 42%,
                      rgba(16,10,14,.30) 72%,rgba(16,10,14,.2) 100%);
  }
  /* taller crop on narrow screens shows more of the frame — scale the
     per-slide anchor down so faces stay above the fold */
  .hero__media{background-position:center calc(var(--hero-y,19%) * 0.55)}
  /* a phone shows ~90% of the frame's height, so the anchor barely bites
     here — centre it and let the whole shot through */
  .hero__video{object-position:center 50%}
  .section{padding:44px 0}
  /* after the shorthand above, which would otherwise flatten them back */
  .section--tight-bottom{padding-bottom:30px}
  .section--tight-top{padding-top:34px}
  .section__title{font-size:23px;margin-bottom:28px}
  .section__title--lg{font-size:27px}
  .products--grid{grid-template-columns:repeat(2,1fr);gap:26px 10px}
  .products--carousel .product{flex:0 0 calc((100% - var(--gap))/2)}
  .cat-grid{grid-template-columns:1fr;gap:16px}
  .feature-grid{grid-template-columns:1fr;gap:30px}
  .feature__body{padding:16px 0 0}
  .feature__body h3{font-size:20px;margin-bottom:12px}
  .cnm__grid{gap:10px;margin-top:26px}
  .cnm__pic{flex-basis:calc((100% - 10px) / 2)}
  .footer__grid{grid-template-columns:1fr;gap:32px}
  .reel{flex:0 0 160px}
  .hero{height:74vh}
  .hero__text{font-size:15px}
  .product__quick{opacity:1;transform:none;height:36px;font-size:11px}
  .footer__bottom-inner{justify-content:center;text-align:center}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}

/* ═══════════════════════════════════════════
   CART DRAWER
   ═══════════════════════════════════════════ */
body.is-locked{overflow:hidden}

.cart{position:fixed;inset:0;z-index:130;visibility:hidden}
.cart.is-open{visibility:visible}
.cart__scrim{position:absolute;inset:0;background:rgba(0,0,0,.45);opacity:0;transition:opacity .3s}
.cart.is-open .cart__scrim{opacity:1}
.cart__panel{
  position:absolute;top:0;right:0;bottom:0;width:min(430px,92vw);background:#fff;z-index:2;
  transform:translateX(100%);transition:transform .38s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;
}
.cart.is-open .cart__panel{transform:none}

.cart__head{
  position:relative;display:flex;align-items:center;gap:12px;
  padding:16px 20px 14px;border-bottom:1px solid var(--line);
}
/* the delivery line, beside the heading and pushed to the right of it */
.cart__shipnote{
  flex:1 1 auto;min-width:0;text-align:right;
  font-family:var(--sans);font-size:11px;line-height:1.35;letter-spacing:.2px;
  color:var(--ink-soft);
}
.cart__shipnote b{color:var(--pink-deep);font-weight:600}
/* and the meter is the border itself, so it costs no height at all */
.cart__head .cart__meter{position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:0}
.cart__heading{font-size:21px;letter-spacing:.5px}
.cart__heading em{
  font-style:normal;font-family:var(--sans);font-size:11px;letter-spacing:.5px;
  color:var(--ink-soft);vertical-align:middle;margin-left:4px;
}

.cart__meter{height:4px;border-radius:60px;background:var(--bg-alt);overflow:hidden}
.cart__meter span{
  display:block;height:100%;width:0;border-radius:60px;background:var(--pink);
  transition:width .45s ease;
}

.cart__body{flex:1;overflow-y:auto;padding:6px 20px}

.line{display:grid;grid-template-columns:78px 1fr;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
.line:last-child{border-bottom:0}
.line__media{aspect-ratio:2/3;background:var(--bg-alt);overflow:hidden}
.line__media img{width:100%;height:100%;object-fit:cover}
.line__top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.line__title{font-family:var(--serif);font-size:14px;font-weight:500}
.line__vendor{display:block;font-size:10px;letter-spacing:1.2px;color:var(--ink-faint);text-transform:uppercase}
.line__size{display:inline-block;margin-top:6px;font-size:10.5px;letter-spacing:.5px;color:var(--ink-soft);border:1px solid var(--line);padding:2px 7px;border-radius:2px}
.line__remove{
  background:none;border:0;padding:2px;color:var(--ink-faint);flex:0 0 auto;transition:color .2s;
}
.line__remove:hover{color:var(--sale)}
.line__remove svg{width:16px;height:16px}
.line__bottom{display:flex;align-items:center;justify-content:space-between;margin-top:12px;gap:10px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:60px;overflow:hidden}
.qty button{
  width:30px;height:30px;background:none;border:0;color:var(--ink);
  display:grid;place-items:center;font-size:15px;line-height:1;transition:.2s;
}
.qty button:hover{background:var(--bg-alt);color:var(--pink)}
.qty button:disabled{opacity:.3;pointer-events:none}
.qty span{min-width:30px;text-align:center;font-size:13px}
.line__price{font-size:13.5px;color:var(--ink-soft);text-align:right}
.line__price small{display:block;font-size:11px;color:var(--ink-faint)}

.cart__empty{
  flex:1;display:none;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:6px;padding:40px 30px;
}
.cart.is-empty .cart__empty{display:flex}
.cart.is-empty .cart__body{flex:0}
.cart__empty svg{width:40px;height:40px;color:var(--ink-faint);stroke-width:1}
.cart__empty h4{font-size:20px;margin-top:8px}
.cart__empty p{font-size:13px;color:var(--ink-soft);margin-bottom:14px}

/* Trimmed: every pixel here is one the bag above does not get, and the
   footer is three short lines and a button. */
.cart__foot{padding:11px 20px 12px;border-top:1px solid var(--line);background:#fff}
.cart__row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px}
.cart__row span{letter-spacing:1px;text-transform:uppercase;font-size:11.5px;color:var(--ink-soft);line-height:1.25}
/* the shipping note, under the label rather than on a line of its own */
.cart__row span i{
  display:block;font-style:normal;text-transform:none;letter-spacing:.2px;
  font-size:10px;color:var(--ink-faint);margin-top:1px;
}
.cart__row b{font-family:var(--serif);font-size:18px;font-weight:500;white-space:nowrap}
.cart__checkout{width:100%;margin-top:9px}
.cart__continue{
  display:block;width:100%;margin-top:2px;background:none;border:0;
  font-size:11px;letter-spacing:.6px;color:var(--ink-soft);text-decoration:underline;
  text-underline-offset:3px;padding:4px;
}
.cart__continue:hover{color:var(--pink)}

/* a chosen size on a card, so Add to Cart knows what it is adding */
.size{cursor:pointer;user-select:none}
.size.is-sel{border-color:var(--pink);background:var(--pink);color:#fff}

/* ═══════════════════════════════════════════
   CHECKOUT
   ═══════════════════════════════════════════ */
.checkout{
  position:fixed;inset:0;z-index:140;background:#fff;
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .3s ease,transform .3s ease,visibility .3s;
}
.checkout.is-open{opacity:1;visibility:visible;transform:none}

.checkout__bar{border-bottom:1px solid var(--line);flex:0 0 auto}
.checkout__bar-inner{display:flex;align-items:center;gap:16px;min-height:70px}
.checkout__logo{font-size:32px;padding-top:4px;flex:1}
.checkout__secure{
  display:inline-flex;align-items:center;gap:7px;font-size:11.5px;letter-spacing:1px;
  text-transform:uppercase;color:var(--ink-soft);
}
.checkout__secure svg{width:16px;height:16px}

.checkout__scroll{flex:1;overflow-y:auto}
.checkout__grid{
  display:grid;grid-template-columns:1fr 400px;gap:60px;
  align-items:start;padding-top:38px;padding-bottom:70px;
}
.checkout__main{min-width:0}

.steps{display:flex;align-items:center;gap:10px;margin-bottom:34px}
.step-dot{display:flex;align-items:center;gap:9px;color:var(--ink-faint);flex:0 0 auto}
.step-dot i{
  width:26px;height:26px;border-radius:50%;border:1px solid currentColor;
  display:grid;place-items:center;font-style:normal;font-size:11.5px;transition:.25s;
}
.step-dot span{font-size:11.5px;letter-spacing:1.1px;text-transform:uppercase}
.step-dot + .step-dot::before{
  content:"";width:26px;height:1px;background:var(--line);margin-right:9px;order:-1;
}
.step-dot.is-active{color:var(--pink)}
.step-dot.is-active i{background:var(--pink);border-color:var(--pink);color:#fff}
.step-dot.is-done{color:var(--ink);cursor:pointer}
.step-dot.is-done i{border-color:var(--pink);color:var(--pink)}

.step{display:none;animation:stepIn .35s ease}
.step.is-active{display:block}
@keyframes stepIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.step__title{
  font-size:19px;letter-spacing:.4px;margin:26px 0 16px;
  padding-bottom:10px;border-bottom:1px solid var(--line);
}
.step:first-child .step__title:first-child,.step .step__title:first-of-type{margin-top:0}

.fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field--full{grid-column:1/-1}
.field > span{font-size:11.5px;letter-spacing:1px;text-transform:uppercase;color:var(--ink-soft)}
.field > span i{font-style:normal;text-transform:none;letter-spacing:.3px;color:var(--ink-faint)}
.field input,.field select{
  width:100%;height:46px;padding:0 14px;border:1px solid var(--line);border-radius:3px;
  font-family:var(--sans);font-size:14px;color:var(--ink);background:#fff;
  outline:0;transition:border-color .2s,box-shadow .2s;
}
.field select{appearance:none;cursor:pointer;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f636b' stroke-width='1.5'><path d='M6 9l6 6 6-6'/></svg>")
    no-repeat right 12px center/16px;
}
.field input:focus,.field select:focus{border-color:var(--pink);box-shadow:0 0 0 3px rgba(214,64,138,.12)}
.field__err{display:none;font-style:normal;font-size:11.5px;color:var(--sale)}
.field.is-err input,.field.is-err select{border-color:var(--sale)}
.field.is-err .field__err{display:block}

.opts{display:flex;flex-direction:column;gap:10px}
.opt{
  display:flex;align-items:center;gap:12px;padding:16px;cursor:pointer;
  border:1px solid var(--line);border-radius:4px;transition:.22s;
}
.opt:hover{border-color:var(--ink-faint)}
/* the delivery and payment blocks are information, not controls — no pointer, no hover */
.opt--static{cursor:default;background:var(--bg-alt)}
.opt--static:hover{border-color:var(--line)}
.opt.is-sel{border-color:var(--pink);background:var(--bg-alt)}
.opt input{
  appearance:none;width:17px;height:17px;flex:0 0 auto;margin:0;border-radius:50%;
  border:1px solid var(--ink-faint);transition:.2s;
}
.opt input:checked{border:5px solid var(--pink)}
.opt__body{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.opt__body b{font-weight:500;font-size:14px}
.opt__body i{font-style:normal;font-size:12px;color:var(--ink-soft)}
.opt__price{font-size:13.5px;color:var(--ink-soft);white-space:nowrap}

.review{display:flex;flex-direction:column;gap:0;border:1px solid var(--line);border-radius:4px}
.review__row{
  display:grid;grid-template-columns:120px 1fr auto;gap:14px;align-items:start;
  padding:15px 18px;border-bottom:1px solid var(--line);
}
.review__row:last-child{border-bottom:0}
.review__row dt{font-size:11.5px;letter-spacing:1px;text-transform:uppercase;color:var(--ink-soft)}
.review__row dd{margin:0;font-size:13.5px;line-height:1.55}
.review__edit{
  background:none;border:0;padding:0;font-size:12px;color:var(--pink);
  text-decoration:underline;text-underline-offset:3px;
}
.review__edit:hover{color:var(--pink-deep)}
.review__items{display:flex;flex-direction:column;gap:10px}
.review__item{display:flex;justify-content:space-between;gap:14px;font-size:13.5px}
.review__item span{color:var(--ink-soft)}

.step__nav{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:28px}
.step__back{
  background:none;border:0;padding:6px 0;font-size:13px;color:var(--ink-soft);
  transition:color .2s;
}
.step__back:hover{color:var(--pink)}
.checkout__pay{min-width:210px;position:relative}
.checkout__terms{margin-top:16px;font-size:11.5px;color:var(--ink-faint);text-align:right}

.spinner{
  display:none;width:15px;height:15px;margin-left:9px;border-radius:50%;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.checkout__pay.is-busy{pointer-events:none;opacity:.85}
.checkout__pay.is-busy .spinner{display:inline-block}

/* ── order summary ── */
.summary{
  position:sticky;top:24px;border:1px solid var(--line);border-radius:4px;
  background:var(--bg-alt);padding:24px;
}
.summary__toggle{display:none}
.summary__items{display:flex;flex-direction:column;gap:16px;max-height:330px;overflow-y:auto}
.sum-item{display:grid;grid-template-columns:58px 1fr auto;gap:12px;align-items:center}
.sum-item__media{position:relative;aspect-ratio:2/3;background:#fff;overflow:hidden;border-radius:3px}
.sum-item__media img{width:100%;height:100%;object-fit:cover}
.sum-item__qty{
  position:absolute;top:-7px;right:-7px;min-width:19px;height:19px;border-radius:50%;
  background:var(--ink);color:#fff;font-size:10.5px;line-height:19px;text-align:center;
}
.sum-item__name{font-family:var(--serif);font-size:13.5px;font-weight:500}
.sum-item__size{display:block;font-size:11px;color:var(--ink-soft);margin-top:2px}
.sum-item__price{font-size:13px;color:var(--ink-soft);white-space:nowrap}

.coupon{display:flex;gap:8px;margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.coupon input{
  flex:1;min-width:0;height:42px;padding:0 13px;border:1px solid var(--line);border-radius:3px;
  font-family:var(--sans);font-size:13px;background:#fff;outline:0;transition:border-color .2s;
}
.coupon input:focus{border-color:var(--pink)}
.coupon button{
  height:42px;padding:0 18px;border:1px solid var(--ink);border-radius:3px;background:none;
  font-size:12px;letter-spacing:1px;text-transform:uppercase;transition:.22s;
}
.coupon button:hover{background:var(--ink);color:#fff}
.coupon__msg{margin-top:9px;font-size:12px;color:var(--ink-soft)}
.coupon__msg.is-ok{color:var(--pink-deep)}
.coupon__msg.is-bad{color:var(--sale)}

.summary__totals{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.summary__row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;font-size:13.5px}
.summary__row span{color:var(--ink-soft)}
.summary__row b{font-weight:500}
.summary__row--total{
  margin-top:6px;padding-top:14px;border-top:1px solid var(--line);align-items:center;
}
.summary__row--total span{
  font-size:11.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink);
}
.summary__row--total b{font-family:var(--serif);font-size:21px}

/* ── success ── */
.done{
  position:absolute;inset:0;z-index:3;background:#fff;overflow-y:auto;
  display:grid;place-items:start center;padding:50px 15px 70px;
  animation:stepIn .45s ease;
}
.done__card{width:min(620px,100%);text-align:center}
.done__tick{
  width:64px;height:64px;margin:0 auto 22px;border-radius:50%;
  background:var(--bg-alt);border:1px solid var(--line);display:grid;place-items:center;
}
.done__tick svg{width:30px;height:30px;color:var(--pink);stroke-width:1.6;
  stroke-dasharray:32;stroke-dashoffset:32;animation:tick .6s .25s ease forwards}
@keyframes tick{to{stroke-dashoffset:0}}
.done__eyebrow{font-size:11.5px;letter-spacing:2.4px;text-transform:uppercase;color:var(--pink)}
.done__title{font-size:clamp(27px,4.4vw,38px);margin:8px 0 12px}
.done__text{font-size:14px;color:var(--ink-soft);max-width:460px;margin:0 auto}
.done__text b{color:var(--ink);font-weight:500}

.done__meta{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:32px 0 0;
  background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden;
}
.done__meta > div{background:#fff;padding:16px 18px;text-align:left}
.done__meta dt{font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-faint)}
.done__meta dd{margin:5px 0 0;font-size:14px;font-family:var(--serif);letter-spacing:.4px}
.done__track{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.done__track button{
  background:none;border:0;padding:0;font-family:var(--sans);font-size:11px;letter-spacing:1px;
  text-transform:uppercase;color:var(--pink);text-decoration:underline;text-underline-offset:3px;
}
.done__track button:hover{color:var(--pink-deep)}

.done__ship{margin-top:22px;text-align:left;border:1px solid var(--line);border-radius:4px;padding:16px 18px}
.done__ship h4{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-faint);font-family:var(--sans);font-weight:500}
.done__ship p{margin-top:6px;font-size:13.5px;line-height:1.6;color:var(--ink-soft)}

.done__totals{
  margin-top:22px;text-align:left;border:1px solid var(--line);border-radius:4px;
  padding:16px 18px;display:flex;flex-direction:column;gap:10px;
}
.done__actions{display:flex;gap:12px;justify-content:center;margin-top:30px;flex-wrap:wrap}

/* ═══════════════════════════════════════════
   CART / CHECKOUT — RESPONSIVE
   ═══════════════════════════════════════════ */
@media (max-width:1000px){
  .checkout__grid{grid-template-columns:1fr;gap:0;padding-top:20px}
  .summary{
    position:static;order:-1;margin-bottom:26px;padding:0;border-radius:0;
    border-width:0 0 1px;background:transparent;
  }
  .summary__toggle{
    display:flex;align-items:center;gap:10px;width:100%;padding:16px 0;
    background:none;border:0;font-family:var(--sans);font-size:13px;color:var(--pink);
  }
  .summary__toggle span{flex:1;text-align:left;letter-spacing:.4px}
  .summary__toggle b{font-family:var(--serif);font-size:16px;color:var(--ink);font-weight:500}
  .summary__toggle svg{width:18px;height:18px;transition:transform .3s}
  .summary__toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
  .summary__inner{display:none;padding:4px 0 22px}
  .summary.is-open .summary__inner{display:block}
  .summary__items{max-height:none}
}
@media (max-width:640px){
  .checkout__logo{font-size:26px}
  .checkout__secure span{display:none}
  .fields{grid-template-columns:1fr}
  .steps{gap:6px;margin-bottom:26px}
  .step-dot span{display:none}
  .step-dot.is-active span{display:inline}
  .step-dot + .step-dot::before{width:18px;margin-right:6px}
  .step__nav{flex-direction:column-reverse;align-items:stretch}
  .step__nav .btn{width:100%}
  .checkout__terms{text-align:center}
  .review__row{grid-template-columns:1fr;gap:6px}
  .done__meta{grid-template-columns:1fr}
  .done__actions .btn{width:100%}
  .cart__panel{width:100%}
}

/* ═══════════════════════════════════════════
   COLOUR PICKER

   Opens from a Trendsetters card that carries a colour range. Two columns on
   a desktop — photograph beside the choices — stacking on a phone.
   ═══════════════════════════════════════════ */
.variant{position:fixed;inset:0;z-index:135;visibility:hidden}
.variant.is-open{visibility:visible}
.variant__scrim{position:absolute;inset:0;background:rgba(16,10,14,.55);opacity:0;transition:opacity .3s}
.variant.is-open .variant__scrim{opacity:1}

/* The panel takes its width FROM the photo rather than the other way round:
   the media column is a 9:16 frame with a definite height, so its width falls
   out of the ratio and the body column is added beside it. */
.variant__panel{
  /* One number drives the whole layout: the photo's height. Its width is that
     times 9/16, and the panel is that plus the body column.
     The track is stated in full rather than left as `auto` — an aspect-ratio
     box with a definite height does not reliably contribute a width to grid's
     intrinsic sizing, and the columns then overlap. */
  --shot-h:min(78vh,660px);
  --rail-w:62px;
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.97);
  /* Stated, not shrink-to-fit: an absolutely positioned box with `left:50%`
     gets only the half-viewport to its right as available width, so `auto`
     silently squeezed the body column below its own minimum. */
  width:min(94vw,calc(var(--rail-w) + var(--shot-h) * 9 / 16 + 348px));
  max-height:92vh;overflow:auto;background:#fff;border-radius:6px;
  display:grid;grid-template-columns:var(--rail-w) calc(var(--shot-h) * 9 / 16) minmax(0,1fr);
  opacity:0;transition:opacity .28s ease,transform .28s ease;
}
.variant.is-open .variant__panel{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* Two classes, like the lightbox's close button and for the same reason:
   the touch-target rule below 900px sets .icon-btn{position:relative}, and a
   relatively positioned child of this grid takes a column of its own — which
   pushed the rail and the photograph along one and left the text squeezed
   into 62px. Staying absolute keeps it out of the grid at every width. */
.variant .variant__close{
  position:absolute;top:8px;right:8px;z-index:2;
  background:rgba(255,255,255,.9);border-radius:50%;
}

/* A 9:16 stage, sized by height so the ratio decides the width. */
.variant__media{
  position:relative;overflow:hidden;background:var(--bg-alt);
  aspect-ratio:9/16;height:var(--shot-h);
}
/* The photos are a mix: four are already 9:16, seven are 3:4 or thereabouts.
   Cropping the wider ones to fill a 9:16 frame was measured to throw away
   15–27% of the picture — sleeves and hems — so the sharp photo is CONTAINED
   and a blurred copy of itself fills whatever margin is left. On a 9:16 source
   the sharp one covers the frame exactly and the fill is never seen. */
.variant__media-fill{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  filter:blur(26px) saturate(1.2);transform:scale(1.18);
}
.variant__media-photo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;
  /* the photo swaps on every swatch tap, so cross-fade rather than snap */
  animation:variantFade .35s ease;
}
@keyframes variantFade{from{opacity:.35}to{opacity:1}}

/* Centred against a tall photo — aligned to the top it would hang in the
   middle of a 660px column with nothing under it. `safe` matters: on a short
   window the details outgrow the photo, and plain `center` would overflow
   equally at both ends, putting the title somewhere no scroll can reach. */
.variant__body{padding:30px 30px 32px;display:flex;flex-direction:column;justify-content:safe center}
.variant__title{font-family:var(--serif);font-size:23px;font-weight:500;margin-top:4px}
.variant__price{font-size:15px;color:var(--ink-soft);margin-top:6px}
.variant__price del{margin-right:6px;color:var(--ink-faint)}
.variant__price ins{text-decoration:none;color:var(--sale)}

.variant__label{
  font-size:10.5px;letter-spacing:1.3px;text-transform:uppercase;color:var(--ink-faint);
  margin-top:22px;margin-bottom:10px;
}
.variant__label b{color:var(--ink);font-weight:500;letter-spacing:.6px}

/* THE RAIL — every colour as a small photograph, stacked beside the big one.

   Replaced the row of colour dots. A dot can only say "roughly this hue";
   the thumbnail shows the embroidery on that cloth, which is what someone is
   actually choosing between. As tall as the photo and scrolling within
   itself, so Reyon Cotton's 27 colours never push the details off screen. */
.variant__rail{
  height:var(--shot-h);overflow-y:auto;overflow-x:hidden;min-width:0;
  padding:9px 8px;display:flex;flex-direction:column;gap:7px;
  background:var(--bg-alt);border-right:1px solid var(--line);
  scrollbar-width:none;
}
.variant__rail::-webkit-scrollbar{display:none}
.variant__thumb{
  flex:0 0 auto;width:100%;aspect-ratio:9/16;padding:0;border:0;cursor:pointer;
  background:#fff;overflow:hidden;border-radius:3px;
  opacity:.6;transition:opacity .2s,outline-color .2s;
  outline:1.5px solid transparent;outline-offset:2px;
}
.variant__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.variant__thumb:hover{opacity:.9}
/* Ringed outside the frame rather than bordered — a border would eat into
   the photograph, which is the whole point of showing one. */
.variant__thumb.is-sel{opacity:1;outline-color:var(--pink)}
/* A colour that has run out stays on the rail, greyed and ruled through: it
   is quicker to read than a row that has quietly got shorter, and someone
   who came for that shade can see the others in the same breath. */
.variant__thumb.is-sold{position:relative;cursor:default}
.variant__thumb.is-sold img{filter:grayscale(1);opacity:.5}
.variant__thumb.is-sold::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom right,transparent calc(50% - .5px),
    rgba(43,34,41,.45) calc(50% - .5px),rgba(43,34,41,.45) calc(50% + .5px),transparent calc(50% + .5px));
}
.variant__sold{
  display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;
  background:var(--bg-alt);color:var(--sale);border:1px solid var(--line);
  font-size:10px;letter-spacing:1.2px;text-transform:uppercase;vertical-align:1px;
}
.variant__add:disabled,.variant__add:disabled:hover{
  background:var(--ink-faint);border-color:var(--ink-faint);cursor:not-allowed;
}

.variant__sizes{display:flex;flex-wrap:wrap;gap:6px}
/* A size chip that also carries an age: the number stays the size of every
   other chip and the age sits under it in small type, so the children's run
   reads at a glance without the chips growing into buttons. */
/* The age matters more than the number here — a parent knows the age — so
   it is set at reading size rather than as a footnote under the size. */
.variant__sizes .size--age{flex-direction:column;gap:2px;min-width:74px;padding:9px 10px;line-height:1.15}
.variant__sizes .size--age i{font-style:normal;font-size:11.5px;font-weight:500;letter-spacing:.2px;color:var(--ink-soft)}
.variant__sizes .size--age.is-sel i{color:rgba(255,255,255,.92)}
.variant__price small{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-faint);margin-left:6px}
.variant__sizes .size{cursor:pointer;min-width:38px;min-height:34px;
  display:inline-flex;align-items:center;justify-content:center}

.variant__add{margin-top:auto;width:100%;margin-top:26px}

@media (max-width:640px){
  .variant__panel{
    grid-template-columns:1fr;width:100%;max-width:none;height:100%;max-height:100%;
    border-radius:0;top:0;left:0;transform:none;
    align-content:start;
    /* Rows sized to content, not squeezed: a grid that cannot fit its rows
       drops a scroll container's row to zero, which collapsed the rail to
       its padding. The panel scrolls instead — that is what it is for. */
    grid-auto-rows:max-content;
  }
  .variant.is-open .variant__panel{transform:none}
  /* Still 9:16, just shorter — the frame is capped by height so the rail
     and the button stay near the fold instead of being pushed off by a
     full-width 9:16 photo, which on a 375px phone would be 667px tall. */
  .variant__panel{--shot-h:52vh}
  .variant__media{order:1;width:calc(var(--shot-h) * 9 / 16);justify-self:center;margin-top:14px}
  /* the rail turns sideways and sits under the photo as a strip */
  .variant__rail{
    order:2;height:auto;align-self:start;flex-direction:row;align-items:flex-start;
    overflow-x:auto;overflow-y:hidden;
    padding:10px 14px;margin-top:12px;border-right:0;border-block:1px solid var(--line);
  }
  /* explicit height: a flex row's default stretch overrides aspect-ratio */
  .variant__thumb{width:44px;height:78px}
  .variant__body{order:3;padding:22px 16px 24px;justify-content:flex-start}
}

/* ═══════════════════════════════════════════
   PREMIUM PICKER

   Three columns: a rail of the garment in every colour, the chosen colour
   large, then the details. The rail shows the photographs themselves rather
   than dots — for this line the cloth is the argument, and a dot throws it
   away. Ivory ground and gold hairlines instead of the shop's white and pink,
   so stepping in here feels like a different room.
   ═══════════════════════════════════════════ */
.prem{position:fixed;inset:0;z-index:136;visibility:hidden}
.prem.is-open{visibility:visible}
.prem__scrim{position:absolute;inset:0;background:rgba(20,12,16,.62);opacity:0;transition:opacity .3s}
.prem.is-open .prem__scrim{opacity:1}

.prem__panel{
  /* The photo's height drives everything, as in the colour picker: rail and
     media are that tall, the body column is added beside them. */
  --shot-h:min(78vh,680px);
  --rail-w:64px;
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.98);
  width:min(94vw,calc(var(--rail-w) + var(--shot-h) * 9 / 16 + 372px));
  max-height:92vh;overflow:auto;
  background:var(--ivory,#faf6ef);border:1px solid var(--gold);
  display:grid;grid-template-columns:var(--rail-w) calc(var(--shot-h) * 9 / 16) minmax(0,1fr);
  opacity:0;transition:opacity .28s ease,transform .28s ease;
}
.prem.is-open .prem__panel{opacity:1;transform:translate(-50%,-50%) scale(1)}
.prem .prem__close{
  position:absolute;top:10px;right:10px;z-index:2;
  background:rgba(250,246,239,.92);border-radius:50%;
}

/* the rail: one thumbnail per colour, stacked, scrolling if there are many */
.prem__rail{
  height:var(--shot-h);overflow-y:auto;overflow-x:hidden;min-width:0;
  padding:10px 9px;display:flex;flex-direction:column;gap:8px;
  background:#f3ede3;border-right:1px solid rgba(176,141,87,.35);
  scrollbar-width:none;
}
.prem__rail::-webkit-scrollbar{display:none}
.prem__thumb{
  flex:0 0 auto;width:100%;aspect-ratio:9/16;padding:0;border:0;cursor:pointer;
  background:#e9e1d4;overflow:hidden;opacity:.55;
  transition:opacity .2s,outline-color .2s;outline:1.5px solid transparent;outline-offset:2px;
}
.prem__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.prem__thumb:hover{opacity:.85}
.prem__thumb.is-sel{opacity:1;outline-color:var(--gold)}

.prem__media{height:var(--shot-h);background:#e9e1d4;overflow:hidden}
.prem__img{
  width:100%;height:100%;object-fit:cover;display:block;
  animation:variantFade .35s ease;
}

.prem__body{
  padding:34px 30px 30px;display:flex;flex-direction:column;justify-content:safe center;
  color:var(--ink);
}
.prem__eyebrow{font-size:9.5px;letter-spacing:3.4px;text-transform:uppercase;color:var(--gold)}

/* the design switcher: plain words, the current one carrying a gold rule */
.prem__designs{display:flex;gap:18px;margin-top:14px;flex-wrap:wrap}
.prem__design{
  background:none;border:0;padding:0 0 5px;cursor:pointer;
  font-family:var(--sans);font-size:10.5px;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--ink-faint);border-bottom:1px solid transparent;transition:color .2s,border-color .2s;
}
.prem__design:hover{color:var(--ink)}
.prem__design.is-on{color:var(--ink);border-bottom-color:var(--gold)}

.prem__title{font-family:var(--serif);font-weight:400;font-size:27px;line-height:1.1;margin-top:14px}
.prem__price{font-size:14px;color:var(--ink-soft);margin-top:6px}
.prem__desc{font-size:12.5px;line-height:1.75;color:var(--ink-soft);font-weight:300;margin-top:12px}

.prem__label{
  font-size:9.5px;letter-spacing:2.4px;text-transform:uppercase;color:var(--ink-faint);
  margin-top:20px;margin-bottom:9px;
}
.prem__label b{color:var(--ink);font-weight:500;letter-spacing:.6px}
.prem__label + .prem__label{margin-top:16px}

.prem__sizes{display:flex;flex-wrap:wrap;gap:6px}
.prem__sizes .size{
  cursor:pointer;min-width:38px;min-height:34px;display:inline-flex;align-items:center;justify-content:center;
  border-color:rgba(176,141,87,.4);
}
.prem__sizes .size:hover{border-color:var(--gold);color:var(--ink)}
.prem__sizes .size.is-sel{border-color:var(--gold);background:var(--gold);color:#fff}

/* outlined gold, not the shop's filled pink — the one place that button is
   deliberately quieter */
.prem__add{
  margin-top:26px;width:100%;padding:13px;cursor:pointer;
  font-family:var(--sans);font-size:10.5px;letter-spacing:2.6px;text-transform:uppercase;
  background:transparent;color:var(--ink);border:1px solid var(--gold);
  transition:background-color .25s,color .25s;
}
.prem__add:hover{background:var(--gold);color:#fff}

@media (max-width:760px){
  /* stacked: photo, then the rail under it as a row, then the details */
  .prem__panel{
    --shot-h:52vh;
    grid-template-columns:1fr;width:100%;max-width:none;height:100%;max-height:100%;
    top:0;left:0;transform:none;border:0;align-content:start;
    /* The rows want more height than the phone has. A grid that cannot fit
       its rows drops them to their MINIMUM, and a scroll container's minimum
       is zero — so the rail's row shrank to its padding and the thumbnails
       spilled over the text below. Sizing rows to their content instead lets
       the panel simply scroll, which is what it is for. */
    grid-auto-rows:max-content;
  }
  .prem.is-open .prem__panel{transform:none}
  .prem__media{order:1;width:calc(var(--shot-h) * 9 / 16);justify-self:center;margin-top:12px}
  .prem__rail{
    order:2;height:auto;flex-direction:row;align-items:flex-start;
    /* As a grid item the rail is stretched by default, and the grid then
       sizes its row from that stretched state — which resolved to padding
       and nothing else, 21px, clipping every thumbnail. `start` makes the
       row take the rail's real content height instead. */
    align-self:start;
    overflow-x:auto;overflow-y:hidden;
    padding:10px 14px;border-right:0;border-bottom:1px solid rgba(176,141,87,.35);
  }
  /* Height stated outright: in a flex ROW the cross axis stretches by
     default, which overrides aspect-ratio, and with the rail at height:auto
     that collapsed every thumbnail to nothing. */
  .prem__thumb{width:44px;height:78px}
  .prem__body{order:3;padding:20px 16px 26px;justify-content:flex-start}
}

/* ═══════════════════════════════════════════
   PHOTO LIGHTBOX

   The card photo opens here, not in the colour picker: looking at a dress and
   choosing one to buy are separate intents, and only the button carries the
   second. Sized as a share of the viewport rather than of the file, so a
   1200px and a 2400px photo land in the same frame.
   ═══════════════════════════════════════════ */
.lightbox{position:fixed;inset:0;z-index:140;visibility:hidden}
.lightbox.is-open{visibility:visible}
/* `transition:opacity`, never the `.3s` shorthand: `all` sweeps up the
   inherited `visibility` too, and a closed overlay then goes on swallowing
   clicks for 300ms — long enough to eat the first tap on a card. */
.lightbox__scrim{position:absolute;inset:0;background:rgba(16,10,14,.72);opacity:0;transition:opacity .3s}
.lightbox.is-open .lightbox__scrim{opacity:1}

.lightbox__panel{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.97);
  display:flex;flex-direction:column;align-items:center;gap:12px;
  opacity:0;transition:opacity .28s ease,transform .28s ease;
}
.lightbox.is-open .lightbox__panel{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* 70% of the viewport, whichever edge binds first. `contain`, not `cover`:
   a crop here would just repeat the one the card already shows. */
.lightbox__img{
  display:block;max-width:70vw;max-height:70vh;width:auto;height:auto;
  object-fit:contain;background:var(--bg-alt);box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.lightbox__caption{
  font-family:var(--serif);font-size:12px;letter-spacing:1.6px;text-transform:uppercase;
  color:rgba(255,255,255,.85);text-align:center;
}
/* two classes, so the phone touch-target rule (.icon-btn{position:relative})
   cannot pull it out of the corner and drop it above the picture */
.lightbox .lightbox__close{
  position:absolute;top:8px;right:8px;z-index:2;
  background:rgba(255,255,255,.9);border-radius:50%;
}
.lightbox__media{position:relative;display:block}
/* The shop marker, drawn over the map rather than into it, so it can be
   small and still crisp: the pin's tip sits on the building, the name runs
   beneath it in the logotype's script with a white halo, the way
   Google sets its own labels, so the roads stay visible underneath. */
.lightbox__pin{position:absolute;width:0;height:0;pointer-events:none}
/* the anchor is a point; the pin hangs with its tip on it, the name sits
   centred beneath, in the empty half of the plot */
.lightbox__pin svg{
  position:absolute;left:-7.5px;bottom:0;width:15px;height:21px;
  fill:var(--pink);stroke:#fff;stroke-width:1.2;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
.lightbox__pin circle{fill:#fff;stroke:none}
.lightbox__pin i{
  position:absolute;left:0;top:3px;transform:translateX(-50%);
  font-family:var(--script);font-style:normal;font-size:15px;line-height:1;
  color:var(--pink);white-space:nowrap;
  text-shadow:0 0 2px #fff,0 0 2px #fff,0 0 4px #fff,0 0 6px #fff;
}
/* The showroom map gets a wider frame than a dress: street labels have to
   stay legible, and a map has no "closer look" to fall back on. */
.lightbox--map .lightbox__img{max-width:min(84vw,1270px);max-height:74vh}
.lightbox--map .lightbox__caption{text-transform:none;letter-spacing:.4px;font-size:13px}
/* The showroom card under the map. White on the dark scrim so it reads as a
   thing in its own right, with the two controls as real buttons — the line
   of underlined capitals this replaced was being taken for a caption. */
.lightbox--map .lightbox__caption{text-transform:none;letter-spacing:0;font-family:var(--sans)}
.mapcard{
  display:block;background:#fff;color:var(--ink);border-radius:10px;
  padding:16px 20px 18px;max-width:420px;margin:0 auto;text-align:center;
  box-shadow:0 14px 34px rgba(0,0,0,.3);
}
.mapcard__name{
  display:block;font-family:var(--serif);font-size:16px;font-weight:500;letter-spacing:.3px;
}
.mapcard__addr{display:block;color:var(--ink-soft);font-size:13.5px;line-height:1.6;margin:4px 0 2px}
.mapcard__hours{display:block;color:var(--ink-faint);font-size:12px;margin-bottom:14px}
.mapcard__row{display:flex;gap:10px;justify-content:center}
.mapcard__go,.mapcard__ask{
  flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border-radius:6px;padding:11px 10px;
  font:500 11.5px/1 var(--sans);letter-spacing:1.4px;text-transform:uppercase;
  transition:background .2s,border-color .2s,color .2s;
}
.mapcard__go{background:var(--pink);color:#fff}
.mapcard__go:hover{background:var(--pink-deep)}
.mapcard__go svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8}
.mapcard__go circle{fill:currentColor;stroke:none}
.mapcard__ask{border:1px solid var(--line);color:var(--ink)}
.mapcard__ask:hover{border-color:var(--pink);color:var(--pink)}
/* the cursor is the only warning that the photo does something, and it now
   does something different from the button sitting on top of it */
.product__media[data-zoom]{cursor:zoom-in}

@media (max-width:640px){
  /* 70vw of a 375px phone is 262px — narrower than the picker it replaced,
     which would read as a step backwards rather than a closer look. */
  .lightbox__img{max-width:90vw;max-height:72vh}
  .doc__panel{width:100vw;max-height:92%;top:auto;bottom:0;transform:translate(-50%,12px) scale(1)}
  .doc.is-open .doc__panel{transform:translate(-50%,0)}
  /* Room for a 40px close plus the gap a thumb needs, so the logotype no
     longer runs up against it. */
  .doc__head{padding:20px 68px 16px 22px}
  .doc__body{padding:18px 22px 30px}
  .doc .doc__close{width:44px;height:44px;top:14px;right:14px}
  /* There is no room beside the close on a 375px screen, so the two links
     drop under the title and get the full width to themselves. */
  .doc__nav{
    position:static;margin-top:14px;gap:22px;
    padding-top:12px;border-top:1px solid var(--line);
  }
  /* the sold-out note stays a small centred card on a phone, not a bottom sheet */
  .doc--note .doc__panel{width:min(292px,86vw);max-height:none;top:50%;bottom:auto;transform:translate(-50%,-50%) scale(.97)}
  .doc--note.is-open .doc__panel{transform:translate(-50%,-50%) scale(1)}
  .lightbox--map .lightbox__img{max-width:92vw;max-height:76vh}
  .lightbox--map .lightbox__caption{padding:0 16px}
  .mapcard{padding:14px 16px 16px;max-width:none;width:100%}
  .mapcard__name{font-size:15px}
}

/* ═══════════════════════════════════════════
   MOBILE REFINEMENTS

   Last in the file so these win over the component blocks above without
   needing specificity tricks. Everything here was measured on a 375px
   viewport rather than guessed at.
   ═══════════════════════════════════════════ */

/* The hero is sized in vh, and on a phone the browser toolbar counts as
   viewport until you scroll — so the hero resizes mid-scroll and the page
   jumps under your thumb. svh is the *small* viewport (toolbar visible), so
   the height is stable from the start. Guarded, since the fallback above
   still needs to work where svh is unsupported. */
@supports (height: 1svh) {
  .hero { height: min(78svh, 720px) }
}

@media (max-width: 900px) {
  /* ── touch targets ──
     36px icon buttons and 23px size chips are comfortable with a mouse and a
     coin-flip with a thumb. The header ones are grown with a pseudo-element
     rather than padding: three 44px buttons plus the wordmark do not fit
     across 375px, so the hit area expands while the layout does not. */
  .icon-btn { position: relative }
  .icon-btn::after {
    content: "";
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 44px; height: 44px;
  }

  /* inside the bag there is room to grow the controls properly */
  .qty button { width: 40px; height: 40px; font-size: 17px }
  .qty span { min-width: 34px; font-size: 14px }
  .line__remove { padding: 10px; margin: -10px -10px 0 0 }

  /* the quick-add is the primary action on a card — it was 36px tall */
  /* Thinner than the 44px touch target I would normally insist on, because
     the ask was a slimmer tab — 36px is still a comfortable thumb hit, and
     the whole photo above it opens the same picker, so nobody has to land on
     the strip itself. */
  .product__quick { height: 36px; font-size: 11px }

  /* Size chips are selectable controls now, so they need to be tappable.
     A full 44px would make every card a good deal taller for seven chips on
     a 168px-wide card, so they land at 32 — the size most storefronts settle
     on for an inline size run, and a real improvement on 23. */
  .product__sizes { gap: 6px }
  .size {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px; min-height: 32px; padding: 0 8px;
    font-size: 11px; line-height: 1;
  }
}

@media (max-width: 640px) {
  /* ── announcement bar ──
     Every message needs two lines at this width, and the bar was locked to
     38px, so each one was being clipped. The items are absolutely stacked
     for the cross-fade, so the track cannot size to its content — it gets an
     explicit two-line height instead, with the side padding cut right back
     (40px of inset out of 375px was most of the problem). */
  .announce__track { height: 46px }
  .announce__item {
    font-size: 11.5px; letter-spacing: .3px; line-height: 1.35;
    padding-inline: 14px;
  }

  /* ── carousel ──
     The arrows sat on top of the first and last cards, covering the
     photography, and a 42px circle over an image is a poor tap target. On a
     phone the row becomes a swipeable, snapping strip instead — the same
     pattern the Watch & Buy reels already use. The !important is aimed at
     the inline transform the carousel script writes. */
  .carousel__viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-padding-left: 15px;
  }
  .carousel__viewport::-webkit-scrollbar { display: none }
  .carousel__track { transform: none !important; transition: none }
  .products--carousel .product { scroll-snap-align: start }
  /* ── swipe arrows ──
     Real buttons, not decoration: they page the strip on tap, and both stay
     on screen so the left one is there from the start rather than appearing
     only after you have already scrolled. Small and translucent so they sit
     over the photography without fighting it.
     Placed at 30% rather than 50% because that is the middle of the
     *photograph* — the card runs on below with title, sizes and price. */
  .carousel__arrow {
    display: grid;
    /* --arrow-y is half the photo's height, measured and written by the
       carousel script. A fixed percentage cannot track it: the card is
       photo + text, and the text block barely grows with the card, so the
       photo's share of the card height slides from ~27% on a small phone to
       ~37% at 640px. translateY(-50%) makes the value the arrow's centre
       rather than its top edge. */
    top: var(--arrow-y, 30%); transform: translateY(-50%);
    width: 32px; height: 32px;
    background: rgba(16, 10, 14, .42);
    border-color: transparent;
    color: #fff;
    box-shadow: none;
    transition: opacity .25s ease, background .25s ease;
  }
  .carousel__arrow svg { width: 16px; height: 16px; stroke-width: 2.2 }
  .carousel__arrow:hover,
  .carousel__arrow:active { background: rgba(16, 10, 14, .7); color: #fff; border-color: transparent }
  .carousel__arrow--prev { left: 5px }
  .carousel__arrow--next { right: 5px }

  /* At either end the arrow dims but stays put and stays tappable. Hiding it
     is exactly what made the left one look missing on arrival. */
  .carousel.at-start .carousel__arrow--prev,
  .carousel.at-end .carousel__arrow--next { opacity: .4 }

  /* ── Watch & Buy swipe arrows ──
     Same look as the carousel's, but these are HIDDEN at the ends rather than
     dimmed: here the arrow's only job is to say "there is another video that
     way", so showing one that leads nowhere would be a lie. They are still
     real buttons — a tap pages the strip.

     Centred on the video, not on the wrapper: .reels carries 4px of padding
     above and 18px below, so a plain 50% would sit 7px low. */
  /* Superseded by the "Swipe for more" hint above the strip — the two
     together would be saying the same thing twice. Change this one `display`
     back to `grid` to bring the arrows back instead; everything else about
     them, including the tap-to-page handlers, is still wired up. */
  .reels__arrow {
    position: absolute; z-index: 4;
    top: calc(4px + (100% - 22px) / 2); transform: translateY(-50%);
    display: none; place-items: center;
    width: 32px; height: 32px; border-radius: 50%; border: 0;
    background: rgba(16, 10, 14, .38); color: #fff;
    transition: opacity .25s ease, background .25s ease;
  }
  .reels__arrow svg { width: 16px; height: 16px; stroke-width: 2.2 }
  .reels__arrow:active { background: rgba(16, 10, 14, .68) }
  .reels__arrow--prev { left: 6px }
  .reels__arrow--next { right: 6px }

  /* nothing that way — so no arrow. Also covers a strip short enough to need
     no scrolling at all, where both classes are set at once. */
  .reels-wrap.at-start .reels__arrow--prev,
  .reels-wrap.at-end .reels__arrow--next { display: none }

  /* stops iOS zooming the page when a checkout field is focused: Safari
     zooms any input whose text is under 16px */
  .field input, .field select, .coupon input, .search__box input {
    font-size: 16px;
  }

  /* the drawer's own controls, now that it is full-width */
  .cart__head { padding: 16px }
  .cart__body { padding-inline: 16px }
  .cart__foot { padding: 16px 16px 20px }

}

/* Grid and flex children default to min-width:auto, which means their track
   can never shrink below their longest unbreakable word. A single email
   address was enough to push the footer 26px past the viewport at 320px and
   put the whole page into horizontal scroll. Not width-scoped: the bug is
   latent at every size, it just only shows up when the column gets narrow. */
.footer__col { min-width: 0 }
.footer__col a { overflow-wrap: anywhere }

/* ── very narrow phones (320px: iPhone SE, older Androids) ──
   The header runs out of room here: burger 36 + wordmark 177 + three 36px
   icons + gutters comes to 355px against 320, which put the page into
   horizontal scroll. Everything stays — the logo has to sit between the
   burger and the icons, so all four have to be on screen — and the space
   is found by tightening instead. The icons shrink visually only: the
   44px pseudo-element hit area above is unaffected, so they stay just as
   tappable at 32px as at 36. */
@media (max-width: 360px) {
  .logo__mark { font-size: 25px }
  .logo__sub { font-size: 7.5px; letter-spacing: 1.8px; text-indent: 1.8px }
  .header__inner { gap: 6px }
  .header__side { gap: 0 }
  .icon-btn { padding: 6px }
  .header__side--left { margin-left: -6px }
  .header__side--right { margin-right: -6px }
  .products--grid { gap: 22px 8px }
  .hero__actions .btn { padding: 0 20px; font-size: 12px }
}

/* ═══════════════════════════════════════════
   ONE PIECE — the seven styles, filtered

   A row of pills over a grid: "All styles" shows one photograph of each
   style, a style shows every colour it runs in. The grid is plain photos
   rather than product cards, because the choice being made here is which
   style, not which size — the picker that opens does the rest.
   ═══════════════════════════════════════════ */
#one-piece .op__lead{text-align:center;color:var(--ink-soft);font-size:13.5px;margin:-16px 0 30px}
#one-piece .op__pills{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-bottom:26px}
#one-piece .op__pill{
  padding:9px 17px;border:1px solid var(--line);border-radius:999px;background:#fff;cursor:pointer;
  font:500 12px/1 var(--sans);letter-spacing:1.3px;text-transform:uppercase;color:var(--ink-soft);
  transition:.22s;white-space:nowrap;
}
#one-piece .op__pill:hover{border-color:var(--pink);color:var(--ink)}
#one-piece .op__pill.is-on{background:var(--pink);border-color:var(--pink);color:#fff}
#one-piece .op__head{display:flex;align-items:baseline;justify-content:center;gap:12px;margin-bottom:18px;min-height:22px}
#one-piece .op__head:empty{margin-bottom:0}
#one-piece .op__head h3{font-family:var(--serif);font-size:20px;font-weight:400}
#one-piece .op__count{color:var(--ink-faint);font-size:11.5px;letter-spacing:1.4px;text-transform:uppercase}
#one-piece .op__price{font-size:13px;color:var(--ink-soft)}
#one-piece .op__price b{font-weight:500;color:var(--ink)}
#one-piece .op__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
#one-piece .op__cell{cursor:pointer;text-align:center;border:0;padding:0;background:none;font:inherit}
#one-piece .op__cell figure{margin:0;overflow:hidden;background:var(--bg-alt)}
#one-piece .op__cell img{width:100%;aspect-ratio:9/16;object-fit:cover;display:block;transition:transform .6s ease}
#one-piece .op__cell:hover img,#one-piece .op__cell:focus-visible img{transform:scale(1.05)}
#one-piece .op__cap{margin-top:9px;font-size:12.5px;letter-spacing:.4px;color:var(--ink)}
#one-piece .op__cap b{display:block;font-weight:500}
#one-piece .op__cap span{color:var(--ink-faint);font-size:11.5px}
/* a shade that has run out: still shown, because someone may want to see it
   and pick another, but plainly not for sale */
#one-piece .op__cell.is-sold img{filter:grayscale(1);opacity:.55}
#one-piece .op__cell.is-sold .op__cap b{color:var(--ink-faint)}
#one-piece .op__cell.is-sold .op__cap span{color:var(--sale);letter-spacing:1.2px;text-transform:uppercase;font-size:10px}
@media (max-width:900px){
  #one-piece .op__grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px){
  /* the pills run off the edge on purpose — a wrapped block of them pushed
     the photographs below the fold */
  #one-piece .op__pills{
    flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    padding-bottom:4px;scrollbar-width:none;margin-inline:-15px;padding-inline:15px;
  }
  #one-piece .op__pills::-webkit-scrollbar{display:none}
  #one-piece .op__lead{font-size:12.5px;margin:-12px 0 22px}
  #one-piece .op__grid{grid-template-columns:1fr 1fr;gap:10px}
  #one-piece .op__head h3{font-size:18px}
}

/* ═══════════════════════════════════════════
   LONG-FORM ARTICLES

   Shared by the About page and by the sheets the home page opens from its
   footer, so a paragraph looks the same whichever one it is read in.
   ═══════════════════════════════════════════ */
  .about-head{border-bottom:1px solid var(--line);background:#fff}
  .about-head__inner{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    min-height:var(--header-h);
  }
  .about-head .logo{text-align:left}
  .about-head__nav{display:flex;gap:26px;font-size:11px;letter-spacing:2px;text-transform:uppercase}
  .about-head__nav a{color:var(--ink);padding:6px 0;border-bottom:1px solid transparent;transition:border-color .2s}
  .about-head__nav a:hover{border-bottom-color:var(--pink)}

  .about{padding:56px 0 72px}
  .about__inner{max-width:720px;margin-inline:auto}
  .about__eyebrow{font-size:10px;letter-spacing:3.6px;text-transform:uppercase;color:var(--pink);margin-bottom:12px}
  .about h1{
    font-family:var(--serif);font-weight:400;line-height:1.1;
    font-size:clamp(30px,4vw,46px);letter-spacing:.3px;
  }
  .about h1 em{font-family:var(--script);font-style:normal;color:var(--brand-script);font-size:1.25em;padding-right:.08em}
  .about__rule{width:44px;height:1px;background:var(--pink);margin:18px 0 26px}
  .about__lead{font-size:17px;line-height:1.7;color:var(--ink);margin-bottom:34px}
  .about h2{
    font-family:var(--serif);font-weight:400;font-size:24px;letter-spacing:.3px;
    margin:38px 0 12px;color:var(--ink);
  }
  .about p{font-size:15px;line-height:1.8;color:var(--ink-soft);font-weight:300;margin:0 0 14px}
  .about p b{font-weight:500;color:var(--ink)}
  /* :not(.btn) - see the note by the matching .doc__body rules. A button
     carries its own colours and must keep them. */
  .about a:not(.btn){color:var(--pink);border-bottom:1px solid rgba(214,64,138,.35)}
  .about a:not(.btn):hover{border-bottom-color:var(--pink)}
  .about ul{list-style:none;margin:0 0 14px;padding:0}
  .about li{position:relative;padding-left:18px;margin-bottom:8px;font-size:15px;line-height:1.7;color:var(--ink-soft);font-weight:300}
  .about li::before{content:"";position:absolute;left:0;top:.85em;width:8px;height:1px;background:var(--pink)}
  .about li b{font-weight:500;color:var(--ink)}
  /* the showroom card: address, hours and the two ways to reach us */
  .about__card{
    margin:26px 0 8px;padding:24px 26px;background:var(--bg-alt);border-radius:14px;
    display:grid;grid-template-columns:1fr 1fr;gap:18px 30px;
  }
  .about__card h3{font-family:var(--sans);font-size:10px;letter-spacing:2.4px;text-transform:uppercase;color:var(--ink-faint);margin-bottom:6px}
  .about__card p{margin:0;font-size:14.5px;line-height:1.65}
  .about__card a{border:0}
  .about__cta{margin-top:36px;display:flex;gap:12px;flex-wrap:wrap}
  .about__photo{
    aspect-ratio:836/1324;width:min(300px,60%);float:right;margin:6px 0 18px 30px;
    background:url("Pictures/Premium/Piyasha1.webp") center/cover no-repeat;border:1px solid var(--gold);padding:8px;
    background-origin:content-box;background-clip:content-box;
  }
  @media (max-width:640px){
    .about{padding:36px 0 56px}
    .about__photo{float:none;width:70%;margin:0 auto 22px}
    .about__card{grid-template-columns:1fr;padding:20px}
    .about-head__nav{gap:16px;font-size:10px}
  }

/* An article inside a sheet: written for a full page, so here the margins
   come off and a floated photograph is given a size that works in a
   narrower column. */
.doc--article .doc__body{padding-bottom:12px}
.doc--article .about__lead{font-size:16px;margin-bottom:26px}
.doc--article .about__photo{width:min(240px,42%);margin:4px 0 16px 24px}
.doc--article h2{margin-top:30px}
.doc--article .about__card{margin:22px 0 6px}
.doc--article .about__cta{margin-top:28px}
.doc__note{
  margin-top:26px;padding-top:16px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--ink-faint);
}
.doc__note a{color:var(--pink);border-bottom:1px solid rgba(214,64,138,.35)}
@media (max-width:640px){
  .doc--article .about__photo{float:none;width:70%;margin:0 auto 18px}
  .doc--article .about__card{grid-template-columns:1fr}
}

/* Home > About us, above the article. Small and quiet - it is there to say
   which page is the parent, not to be read. */
.about__crumbs{
  padding-top:22px;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--ink-faint);display:flex;gap:8px;
}
.about__crumbs a{color:var(--ink-faint);border-bottom:1px solid transparent}
.about__crumbs a:hover{color:var(--pink);border-bottom-color:var(--pink)}

/* The stock list in the collections sheet: one line per card, every colour
   on it. It is long by nature, so it is set a size down from the prose
   around it and given a little room between the lines. */
.doc__body .stock li{margin-bottom:10px;line-height:1.75;font-size:13.5px;color:var(--ink-soft)}
.doc__body .stock li b{color:var(--ink)}
.doc__body .stock li b a{color:inherit;border-bottom-color:transparent}
.doc__body .stock li b a:hover{color:var(--pink);border-bottom-color:var(--pink)}
.doc__body .stock li i{font-style:normal;color:var(--ink-faint);font-size:12.5px}

/* ═══════════════════════════════════════════
   SHARARA & DUPATTA — the add-on band

   Sits under each line that sells a kurti on its own. Slim enough not to
   interrupt the page, but the photographs are given real size: they are
   the whole offer, and a thumbnail of a sequin edge shows nothing. Each
   one is a button, because tapping opens it full size.
   ═══════════════════════════════════════════ */
.addons{
  display:flex;align-items:center;gap:clamp(20px,4vw,52px);flex-wrap:wrap;
  background:var(--bg-alt);border-radius:14px;
  padding:clamp(20px,3vw,30px) clamp(20px,3.5vw,36px);
  margin:6px 0 40px;
}
.addons__lead{flex:1 1 230px;min-width:0}
.addons__eyebrow{
  font-family:var(--script);color:var(--brand-script);font-size:25px;line-height:1;margin-bottom:4px;
}
.addons__title{font-family:var(--serif);font-weight:400;font-size:clamp(20px,2.3vw,26px);letter-spacing:.3px}
.addons__note{
  font-family:var(--sans);font-size:13px;line-height:1.7;color:var(--ink-soft);
  font-weight:300;margin-top:8px;max-width:34ch;
}

.addons__items{display:flex;gap:clamp(14px,2vw,26px);flex:0 1 auto}
.addon{
  display:flex;flex-direction:column;align-items:center;gap:0;
  text-align:center;width:clamp(104px,13vw,148px);
}
/* the photograph is its own button now, because the tile holds a second one
   and a button inside a button is not markup a browser will keep */
.addon__shot{
  display:block;width:100%;aspect-ratio:4/5;overflow:hidden;border-radius:10px;
  background:#fff;border:1px solid var(--line);padding:0;cursor:zoom-in;
  transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease;
}
.addon__shot img{width:100%;height:100%;object-fit:cover;display:block}
.addon:hover .addon__shot{
  border-color:var(--pink);transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(214,64,138,.18);
}
.addon:focus-visible .addon__shot{outline:2px solid var(--pink);outline-offset:3px}
.addon__name{
  font-family:var(--sans);font-size:12.5px;color:var(--ink);margin-top:10px;line-height:1.35;
}
.addon__price{font-family:var(--sans);font-size:12.5px;color:var(--pink);margin-top:2px}

@media (max-width:860px){
  /* the words go above and the three photographs take the full width */
  .addons{flex-direction:column;align-items:stretch;gap:18px}
  /* flex-basis follows the main axis, so the 230px that sets a column width
     in the row layout becomes a 230px HEIGHT once this stacks - 137px of
     empty pink under the text. Back to auto, and it is as tall as it reads. */
  .addons__lead{flex:0 0 auto}
  .addons__note{max-width:none}
  .addons__items{justify-content:space-between;gap:10px}
  .addon{width:auto;flex:1 1 0;min-width:0}
}
@media (max-width:380px){
  .addon__name,.addon__price{font-size:11.5px}
}

/* ═══════════════════════════════════════════
   SHARARA & DUPATTA IN THE BAG

   The same offer as the band on the page, in the one other place it makes
   sense: the bag is open, a dress is in it, and the question "anything to
   go with that?" answers itself. Sits between the lines and the subtotal.
   ═══════════════════════════════════════════ */
.cart__addons{padding:10px 22px 9px;border-top:1px solid var(--line)}
.cart__addons-head{
  font-family:var(--script);color:var(--brand-script);font-size:17px;line-height:1;margin-bottom:7px;
}
/* three across. Each card is the button; the plus on the corner of the
   photograph is what says so, which saves the row of buttons underneath. */
.cart__addons-row{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.bagadd{
  display:flex;flex-direction:column;align-items:center;gap:0;
  background:none;border:0;padding:0;cursor:pointer;text-align:center;min-width:0;
}
.bagadd__shot{position:relative;display:block;width:100%}
/* A fixed height rather than a square: the drawer is for the order, and
   these are a reminder that the pieces exist, not a place to study them.
   The band after Three Piece is where they are shown properly. */
.bagadd img{
  width:100%;height:66px;object-fit:cover;display:block;
  border-radius:8px;border:1px solid var(--line);transition:border-color .2s ease;
}
.bagadd:hover img{border-color:var(--pink)}
.bagadd__plus{
  position:absolute;right:4px;bottom:4px;width:19px;height:19px;border-radius:50%;
  background:var(--pink);color:#fff;display:grid;place-items:center;
  font-family:var(--sans);font-size:14px;line-height:1;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.bagadd__name{
  font-family:var(--sans);font-size:10.5px;line-height:1.25;color:var(--ink);margin-top:5px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.bagadd__price{font-family:var(--sans);font-size:10.5px;color:var(--pink);margin-top:1px}

/* When the dress has been taken out and only add-ons are left. The bag is
   not emptied for them - it is explained, and the checkout waits. */
.cart__addons-warn{
  font-family:var(--sans);font-size:12.5px;line-height:1.7;color:var(--ink-soft);
  background:var(--bg-alt);border-radius:9px;padding:13px 15px;
  border-left:2px solid var(--pink);
}
.cart__checkout:disabled{opacity:.45;cursor:not-allowed}
.cart__checkout:disabled:hover{background:var(--pink)}

/* Add to Cart, under the price on each tile. Small and outlined: the
   photograph is what should draw the eye, this is what to do about it. */
/* Sized to its own words, not to the tile. Stretched the full width it read
   as a slab under each photograph; a pill the width of "Add to Cart" sits
   under the price the way a caption does. */
.addon__add{
  margin-top:9px;width:auto;align-self:center;
  border:1px solid var(--pink);background:none;color:var(--pink);
  font-family:var(--sans);font-size:10.5px;letter-spacing:1px;text-transform:uppercase;
  padding:7px 17px;border-radius:60px;cursor:pointer;transition:.2s ease;white-space:nowrap;
}
.addon__add:hover{background:var(--pink);color:#fff}

/* The rule, said before anyone clicks rather than only when they are
   turned back. */
.addons__rule{
  font-family:var(--sans);font-size:12px;line-height:1.6;color:var(--pink);
  margin-top:8px;
}

/* the enlarged view: name, price, the button, and the rule under it */
.lbadd{display:flex;flex-direction:column;align-items:center;gap:4px}
.lbadd__name{font-family:var(--serif);font-weight:400;font-size:17px;color:#fff;letter-spacing:.4px}
.lbadd__price{font-family:var(--sans);font-size:13px;color:rgba(255,255,255,.82)}
.lbadd__btn{margin-top:8px}
.lbadd__rule{font-family:var(--sans);font-size:11.5px;color:rgba(255,255,255,.66);margin-top:6px}

@media (max-width:860px){
  /* the tiles are about 95px across on a phone, so the pill loses some of
     its side padding rather than its words */
  .addon__add{font-size:10px;letter-spacing:.4px;padding:7px 10px}
}

/* It sits beside the heading, which is the point of moving it. Only on a
   screen too narrow for both does it drop to its own line. */
@media (max-width:340px){
  .cart__head{flex-wrap:wrap;row-gap:2px}
  .cart__heading{flex:1 1 auto}
  .cart__shipnote{order:3;flex:1 0 100%;text-align:left}
}