/* ============================================================================
   PARIAH'S PALACE — DESIGN SYSTEM
   ----------------------------------------------------------------------------
   Quiet luxury. The reference points are Louis Vuitton, Gucci, The Row, COS:
   white space, hairline rules, wide-tracked uppercase, and photography doing
   all the talking. No gradients, no gold, no shadows, no decoration.

   Rule of thumb applied throughout: if an element is not the product, the
   price, or the way to buy it, it recedes.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. TOKENS */
:root {
  /* Monochrome only. A single accent (sale red) and nothing else. */
  --ink-900: #F5F2EC;   /* page background — warm bone, not stark white */
  --ink-850: #EDE9E1;   /* alternating section — soft warm sand         */
  --ink-800: #FFFFFF;   /* cards, inputs — crisp white so product pops  */
  --ink-700: #EAE6DE;   /* image placeholder    */
  --ink-600: #E4DFD6;   /* hover fill           */
  --ink-500: #D6D0C4;   /* strong fill          */
  --ink-400: #B4B4B4;   /* disabled             */

  --fg:        #111111;
  --fg-muted:  #5E5E5E;
  --fg-subtle: #767676;

  /* Kept as token names so nothing downstream breaks — all now monochrome. */
  --gold:      #111111;
  --gold-lift: #111111;
  --gold-deep: #000000;
  --crimson:   #8C1C13;
  --crimson-lift: #8C1C13;
  --success:   #2C6E49;

  --scrim:       rgba(17,17,17,0.45);
  --glass:       rgba(245,242,236,0.9);
  --glass-solid: #F5F2EC;

  --line:      #E1DCD1;
  --line-soft: #EBE6DC;
  --line-loud: #111111;

  /* Type — geometric sans for structure, neutral sans for reading. */
  --font-display: 'Jost', 'Futura', 'Century Gothic', Helvetica, Arial, sans-serif;
  --font-serif:   'Jost', 'Futura', Helvetica, Arial, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --t-hero:  clamp(1.9rem, 4.2vw, 3.6rem);
  --t-xxl:   clamp(1.4rem, 2.6vw, 2.1rem);
  --t-xl:    clamp(1.2rem, 2vw, 1.6rem);
  --t-lg:    1.0625rem;
  --t-md:    0.9375rem;
  --t-sm:    0.875rem;
  --t-xs:    0.8125rem;
  --t-xxs:   0.6875rem;

  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;

  --gutter: clamp(1rem, 3.5vw, 3rem);
  --maxw: 1800px;

  /* Luxury retail is square. Radius only where it is functional. */
  --r-sm: 0; --r-md: 0; --r-lg: 0; --r-pill: 999px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.4s;

  --shadow-lg: 0 10px 40px -18px rgba(0,0,0,0.18);
  --shadow-md: 0 4px 20px -10px rgba(0,0,0,0.12);

  --nav-h: 62px;
  --ticker-h: 34px;
}

/* -------------------------------------------------------------- 2. RESET */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
body {
  background: var(--ink-900);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--t-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-top: calc(var(--nav-h) + var(--ticker-h));
}
body.no-scroll { overflow: hidden; }
img, picture, video, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: 1px solid var(--fg); outline-offset: 3px; }
::selection { background: var(--fg); color: #fff; }

.skip-link {
  position: absolute; top: -100px; left: var(--s-4); z-index: 999;
  background: var(--fg); color: #fff; padding: var(--s-3) var(--s-5); font-size: var(--t-xs);
}
.skip-link:focus { top: var(--s-4); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* -------------------------------------------------------- 3. TYPOGRAPHY */
.display, .section-title, .nav__logo, .footer__logo {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.serif { font-family: var(--font-display); font-style: normal; }

.eyebrow {
  font-size: var(--t-xxs); letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 400; color: var(--fg-subtle);
}
h1, h2, h3, h4 { font-weight: 400; line-height: 1.2; }
.text-muted { color: var(--fg-muted); }
.text-subtle { color: var(--fg-subtle); }

/* ------------------------------------------------------------ 4. LAYOUT */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
/* Measured across all four pages: bands were running 20-31% pure padding, and
   two sections' worth of gap stacked between every module. Tightened one step
   at each end of the scale — 64px->48px on desktop, 36px->28px on a phone. */
.section { padding-block: clamp(1.75rem, 3.2vw, 3rem); }
.section--tight { padding-block: clamp(1.15rem, 2.3vw, 2rem); }
.section--first { padding-top: clamp(1rem, 2vw, 1.5rem); }

/* The category chips sat flex:1 beside a 170px select, leaving a 176px window
   holding 687px of categories — "Bottoms" rendered as "BC" under the dropdown
   and most of the shop's navigation was hidden. Give the chips their own
   full-bleed row above the sort. */
@media (max-width: 640px) {
  .filters__row { row-gap: var(--s-2); }
  /* Only the CATEGORY row gets the full-bleed treatment. Applying it to every
     .chip-scroll also caught the size row, which forced the My size / In stock
     / On sale / Clear all chips onto lines of their own — four stacked rows of
     filter before the first product. */
  .filters__row > #catChips {
    flex: 0 0 100%; order: -1;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
  /* Left-aligned with everything else; margin-left:auto left it stranded on the
     right of an otherwise empty row. */
  .filters__row > .select { margin-left: 0; }
  /* Three sizes fit on a phone; scrolling them horizontally just clipped
     "Medium" mid-word and hid the toggles past the right edge. Let the row
     wrap onto a second line instead. */
  #sizeChips { overflow-x: visible; flex-wrap: wrap; flex: 0 1 auto; gap: var(--s-4); }
  /* Four filter rows each opening with a full 16px on top pushed the first
     product most of a screen further down. */
  .filters__row.mt-4 { margin-top: var(--s-2); }
  .filters .wrap > .filters__row:first-child { margin-top: 0; }
  /* The blurb is a full line of body copy above the fold on a 390px screen. */
  #pageBlurb { font-size: var(--t-sm); margin-top: var(--s-2); }
}

/* Category tiles, the brand statement, the lookbook crop and the rail's
   scroll padding are each corrected at their own rule further down the file:
   a copy here would lose to the original on source order. */

/* On a phone the clamps bottom out at their desktop-derived floors, so every
   section boundary costs ~72px of empty band and the shopper scrolls past air
   to reach the next set of clothes. Tighten the rhythm here only — the type
   scale is deliberate and stays as it is. */
@media (max-width: 560px) {
  .section { padding-block: 1.75rem; }
  .section--tight { padding-block: 1.15rem; }
  .section--first { padding-top: 1rem; }
  .section-head { margin-bottom: var(--s-4); gap: var(--s-3); }
}

.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-5); margin-bottom: var(--s-5); flex-wrap: wrap;
}
.section-title { font-size: var(--t-xxl); line-height: 1.1; }
.rule { height: 1px; background: var(--line); border: 0; }

/* ----------------------------------------------------------- 5. BUTTONS */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 1rem 2rem;
  font-size: var(--t-xs); font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  border: 1px solid transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
  min-height: 48px; text-align: center; position: relative;
}
.btn--gold  { background: var(--fg); color: #fff; border-color: var(--fg); }
.btn--gold:hover  { background: #000; }
.btn--light { background: #fff; color: var(--fg); border-color: var(--fg); }
.btn--light:hover { background: var(--fg); color: #fff; }
.btn--ghost { border-color: var(--line-loud); color: var(--fg); background: transparent; }
.btn--ghost:hover { background: var(--fg); color: #fff; }
.btn--dark  { background: var(--ink-700); color: var(--fg); border-color: var(--line); }
.btn--dark:hover { background: var(--ink-600); }
.btn--block { width: 100%; }
.btn--sm { padding: 0.6rem 1.1rem; min-height: 38px; font-size: 0.6875rem; }
.btn--lg { padding: 1.15rem 2.5rem; }
/* 0.35 read as broken rather than waiting — and the PDP's main button is
   disabled on arrival, carrying the instruction "Select a size". It has to
   stay legible enough to be read as the prompt it is. */
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

.link-underline {
  font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
  transition: opacity var(--dur) var(--ease);
}
.link-underline:hover { opacity: 0.55; }

/* ------------------------------------------------------------- 6. TICKER */
/* A slim moving sale ribbon. Dark strip, white text, scrolls continuously.
   This is the "something happening" energy now that the big hero is gone. */
.ticker {
  position: fixed; top: 0; left: 0; right: 0; z-index: 120;
  height: var(--ticker-h);
  background: var(--fg); color: #fff;
  display: flex; align-items: center; overflow: hidden;
  font-size: var(--t-xxs); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
}
.ticker__track {
  display: flex; flex-shrink: 0; gap: var(--s-7); white-space: nowrap;
  padding-left: var(--s-7);
  animation: tickerScroll 26s linear infinite;
  will-change: transform;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item { display: inline-flex; align-items: center; }
.ticker__item::before { content: '\2726'; margin-right: var(--s-7); opacity: 0.5; }
@keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Quiet variant — calm hairline for the top bar; the loud moving promo is the
   in-page .promo-strip instead. */
.ticker--quiet { background: var(--ink-900); color: var(--fg-muted); border-bottom: 1px solid var(--line-soft); justify-content: center; }
.ticker--quiet .ticker__track { animation: none; padding-left: 0; gap: 0; }
.ticker--quiet .ticker__item::before { content: none; }
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; justify-content: center; width: 100%; padding-left: 0; }
  .ticker__item:not(:first-child) { display: none; }
}

/* ---------------------------------------------------------------- 7. NAV */
.nav {
  position: fixed; top: var(--ticker-h); left: 0; right: 0; z-index: 110;
  height: var(--nav-h);
  background: var(--ink-900);
  border-bottom: 1px solid var(--line);
}
.nav.is-scrolled { border-bottom-color: var(--line); }
.nav__inner {
  height: 100%; max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-4);
}
.nav__logo {
  font-size: clamp(0.95rem, 1.5vw, 1.15rem); letter-spacing: 0.32em;
  grid-column: 2; text-align: center; white-space: nowrap; padding-left: 0.32em;
}
.nav__logo span { color: inherit; }
.nav__links { display: flex; align-items: center; gap: var(--s-6); grid-column: 1; }
.nav__link {
  font-size: var(--t-xxs); font-weight: 400; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--fg); padding-block: var(--s-2);
  border-bottom: 1px solid transparent; transition: border-color var(--dur) var(--ease);
}
.nav__link:hover, .nav__link[aria-current="page"] { border-bottom-color: var(--fg); }
.nav__actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-2); grid-column: 3; }

.icon-btn {
  width: 44px; height: 44px; display: grid; place-items: center;
  position: relative; color: var(--fg); transition: opacity var(--dur) var(--ease);
}
.icon-btn:hover { opacity: 0.55; }
.icon-btn svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.25; }

.badge-count {
  position: absolute; top: 6px; right: 4px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--fg); color: #fff;
  border-radius: var(--r-pill); font-size: 9px; font-weight: 600;
  display: grid; place-items: center; line-height: 1;
  transform: scale(0); transition: transform 0.3s var(--ease);
}
.badge-count.is-visible { transform: scale(1); }
.nav__burger { display: none; }
@media (max-width: 1024px) {
  .nav__links { display: none; }
  .nav__burger { display: grid; grid-column: 1; justify-self: start; }
}

/* Mobile drawer */
.mobile-menu {
  position: fixed; inset: 0; z-index: 200; background: var(--ink-900);
  transform: translateX(-100%); transition: transform 0.45s var(--ease);
  display: flex; flex-direction: column; padding: var(--s-4) var(--gutter); overflow-y: auto;
}
.mobile-menu.is-open { transform: translateX(0); }
.mobile-menu__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s-6); }
.mobile-menu__link {
  font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.2em;
  text-transform: uppercase; padding-block: var(--s-4);
  display: flex; align-items: baseline; gap: var(--s-3);
  border-bottom: 1px solid var(--line-soft);
}
.mobile-menu__link small { font-family: var(--font-body); font-size: var(--t-xxs); color: var(--fg-subtle); letter-spacing: 0.1em; }
.mobile-menu__foot { margin-top: auto; padding-top: var(--s-6); }

/* -------------------------------------------------------------- 8. HERO */
/* A campaign band, then a solid statement bar, then product.
   The bar is the key move: white type on a black bar is always legible, no
   matter what the photograph behind it is doing, and it gives the page the
   structural confidence of an established retailer instead of a lot of empty
   white. Text still never sits on the photography. */
.hero { position: relative; }
.hero__grain, .hero__say { display: none; }

.hero__band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--fg); }
.hero__panel { position: relative; display: block; overflow: hidden; background: var(--ink-700); height: clamp(300px, 46svh, 560px); }
.hero__panel img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 15%;
  transition: transform 1.3s var(--ease);
}
.hero__panel:hover img { transform: scale(1.04); }

/* Small solid tag, never a gradient over a busy photo */
.hero__tag {
  position: absolute; top: 0; left: 0;
  background: var(--fg); color: #fff;
  font-size: var(--t-xxs); letter-spacing: 0.18em; text-transform: uppercase;
  padding: 8px 14px;
}

/* The statement bar — the loudest thing on the page, and fully legible */
.hero__bar {
  background: var(--fg); color: #fff;
  padding: clamp(1.5rem, 3.5vw, 2.75rem) var(--gutter);
}
.hero__bar-in {
  max-width: var(--maxw); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 4rem); flex-wrap: wrap;
}
.hero__bar .eyebrow { color: rgba(255,255,255,0.62); }
.hero__bar h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 3rem);
  letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.05;
  margin-top: var(--s-2);
}
.hero__bar h2 b { font-weight: 400; border-bottom: 2px solid #fff; padding-bottom: 2px; }
.hero__sells {
  font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.72); margin-top: var(--s-3);
}
.hero__bar-cta { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.hero__bar-cta .btn--gold { background: #fff; color: var(--fg); border-color: #fff; }
.hero__bar-cta .btn--gold:hover { background: transparent; color: #fff; }
.hero__bar-cta .btn--ghost { border-color: rgba(255,255,255,0.45); color: #fff; }
.hero__bar-cta .btn--ghost:hover { background: #fff; color: var(--fg); }

/* Live stock, on the bar where it is actually visible */
.hero__stock {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-xxs); letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff; margin-top: var(--s-3);
  border: 1px solid rgba(255,255,255,0.35); padding: 6px 12px;
}
.hero__stock i { width: 5px; height: 5px; border-radius: 50%; background: #fff; flex-shrink: 0; }

@media (max-width: 900px) {
  .hero__band { grid-template-columns: 1fr 1fr; }
  .hero__panel { height: 36svh; min-height: 240px; }
  .hero__panel--third { display: none; }

  /* The bar was taking a third of the screen. Every line was wrapping:
     headline to two, category list to two, stock chip to its own row, and
     the CTA label wrapping inside its own button. Tightened all of it. */
  .hero__bar { padding: var(--s-4) var(--gutter) var(--s-5); }
  .hero__bar-in { flex-direction: column; align-items: stretch; gap: var(--s-4); }
  .hero__bar .eyebrow { font-size: 10px; letter-spacing: 0.14em; }
  .hero__bar h2 {
    font-size: clamp(1.4rem, 6.6vw, 1.9rem);
    line-height: 1.0; margin-top: 6px;
  }
  .hero__sells {
    font-size: 10px; letter-spacing: 0.1em; line-height: 1.4;
    margin-top: var(--s-2);
  }
  .hero__stock {
    margin-top: var(--s-3); padding: 5px 10px; font-size: 9.5px;
    letter-spacing: 0.1em;
  }
  .hero__bar-cta { gap: var(--s-2); }
  .hero__bar-cta .btn {
    flex: 1; min-height: 44px; padding: 0.6rem 0.5rem;
    font-size: 10px; letter-spacing: 0.12em; white-space: nowrap;
  }
}
@media (max-width: 400px) {
  .hero__panel { height: 32svh; min-height: 200px; }
  .hero__bar h2 { font-size: 1.35rem; }
  .hero__bar-cta .btn { font-size: 9.5px; letter-spacing: 0.08em; }
}

/* ---- Story ---- */
.story { border-top: 1px solid var(--line); }
.story__grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(2rem, 6vw, 5rem); }
@media (max-width: 860px) { .story__grid { grid-template-columns: 1fr; gap: var(--s-6); } }
.story__media { aspect-ratio: 4/5; overflow: hidden; background: var(--ink-700); }
@media (max-width: 860px) { .story__media { aspect-ratio: 16/11; } }
.story__media img { width: 100%; height: 100%; object-fit: cover; }
.story h2 {
  font-family: var(--font-display); font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.15; margin-block: var(--s-3) var(--s-4);
}
.story p { color: var(--fg-muted); margin-bottom: var(--s-4); max-width: 46ch; }
.story p strong { color: var(--fg); font-weight: 500; }

/* ---- Shop the look ---- */
.look { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: stretch; }
@media (max-width: 860px) { .look { grid-template-columns: 1fr; gap: var(--s-5); align-items: start; } }
.look__media { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--ink-700); }
/* Was 1/1 — a square crop on the one module whose job is showing a whole
   outfit, so it cut the look off at the knee. */
@media (max-width: 860px) { .look__media { aspect-ratio: 4/5; } }
.look__media img { width: 100%; height: 100%; object-fit: cover; }
/* The column is as tall as the styled photo beside it. Stack the pieces from
   the top and let the total and CTA sit at the bottom — spreading them apart
   instead leaves gaps whenever a look has fewer pieces than usual. */
.look__items { display: flex; flex-direction: column; }
.look__item {
  display: grid; grid-template-columns: 84px 1fr auto; gap: var(--s-4);
  align-items: center; padding-block: var(--s-4); border-bottom: 1px solid var(--line-soft);
}
.look__item img { width: 100%; aspect-ratio: 3/4; object-fit: cover; background: var(--ink-700); }
/* A sold-out piece stays visible so the outfit reads whole, but recedes. */
.look__item--out img { opacity: 0.45; }
.look__item--out .look__item-name,
.look__item--out .look__item-price { color: var(--fg-subtle); }
.look__item--out .look__item-meta { color: var(--crimson); letter-spacing: 0.08em; text-transform: uppercase; font-size: 10px; }
.look__item-name { font-size: var(--t-xs); letter-spacing: 0.06em; }
.look__item-meta { font-size: var(--t-xs); color: var(--fg-subtle); }
.look__item-price { font-size: var(--t-xs); }
.look__total {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-block: var(--s-4); font-size: var(--t-sm);
  margin-top: auto;   /* anchor the total + CTA to the bottom of the column */
}
.look__total strong { font-size: var(--t-lg); font-weight: 400; }

/* ---- Value row: the reasons to buy, stated plainly ---- */
.reasons { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
@media (max-width: 760px) { .reasons { grid-template-columns: 1fr; gap: var(--s-5); } }
.reason { border-top: 1px solid var(--fg); padding-top: var(--s-4); }
.reason strong { display: block; font-family: var(--font-display); font-size: var(--t-lg); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--s-2); }
.reason p { font-size: var(--t-sm); color: var(--fg-muted); }

/* --------------------------------------------------- 9. SERVICE STRIP */
.trust { border-bottom: 1px solid var(--line); }
.trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); padding-block: var(--s-6); gap: var(--s-5); }
.trust__item {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: none; font: inherit; color: inherit;
  gap: var(--s-2); padding-inline: var(--s-3); min-width: 0;
  border-right: 1px solid var(--line-soft);
}
.trust__item:last-child { border-right: 0; }
.trust__item svg { width: 20px; height: 20px; stroke: var(--fg); fill: none; stroke-width: 1.1; }
.trust__item strong {
  display: block; font-size: var(--t-xxs); font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.trust__item span { display: block; font-size: var(--t-xs); color: var(--fg-subtle); }
@media (max-width: 860px) {
  .trust__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-6) var(--s-3); }
  .trust__item:nth-child(2n) { border-right: 0; }
}
@media (max-width: 420px) {
  .trust__grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .trust__item { border-right: 0; }
}

/* --------------------------------------------- 9b. CATEGORY NAVIGATION */
.cat-strip { display: grid; gap: var(--s-4); grid-template-columns: repeat(6, 1fr); }
.cat-pill { display: flex; flex-direction: column; gap: var(--s-3); }
.cat-pill__img { aspect-ratio: 3/4; overflow: hidden; background: var(--ink-700); }
.cat-pill__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.cat-pill:hover .cat-pill__img img { transform: scale(1.04); }
.cat-pill__name { font-size: var(--t-xs); letter-spacing: 0.16em; text-transform: uppercase; text-align: center; }
.cat-pill__n { display: none; }
@media (max-width: 900px) {
  .cat-strip {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); gap: var(--s-3);
  }
  .cat-strip::-webkit-scrollbar { display: none; }
  .cat-pill { flex: 0 0 132px; scroll-snap-align: start; }
}

/* Legacy magazine tiles — retired, kept neutral in case of stale markup. */
.cats { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.cat { position: relative; display: block; }
.cat__img img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.cat__arrow, .cat__count, .cat__tag { display: none; }
.cat__body { padding-top: var(--s-3); }
.cat__name { font-family: var(--font-display); font-size: var(--t-xs); letter-spacing: 0.16em; text-transform: uppercase; }

/* -------------------------------------------------- 10. PRODUCT CARD */
.product-grid {
  display: grid;
  gap: clamp(2rem, 3vw, 3.25rem) clamp(0.75rem, 1.4vw, 1.5rem);
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1100px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .product-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-6) var(--s-3); } }

.product-grid--rail {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
  gap: clamp(0.75rem, 1.4vw, 1.5rem);
  /* snap points ignore padding-inline unless scroll-padding matches it, so the
     rail self-scrolled a gutter's width on load and card one sat left of its
     own heading. */
  scroll-padding-inline: var(--gutter);
}
.product-grid--rail::-webkit-scrollbar { display: none; }
.product-grid--rail > * { flex: 0 0 clamp(200px, 24vw, 300px); scroll-snap-align: start; }

.card { position: relative; display: flex; flex-direction: column; }
.card__media { position: relative; overflow: hidden; background: var(--ink-700); aspect-ratio: 3 / 4; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.5s var(--ease); }
.card__img--alt { position: absolute; inset: 0; opacity: 0; }
.card:hover .card__img--alt { opacity: 1; }
.card:hover .card__img--main { opacity: 0; }

/* One badge maximum, small, upper-left. Sale price does the rest. */
.card__badges { position: absolute; top: var(--s-3); left: var(--s-3); display: flex; flex-direction: column; gap: var(--s-1); align-items: flex-start; z-index: 2; }
.card__badges .badge:nth-child(n+2) { display: none; }
.badge {
  font-size: 9px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 5px 9px; background: #fff; color: var(--fg); border: 1px solid var(--line);
}
.badge--new  { background: #fff; color: var(--fg); }
.badge--sale { background: var(--crimson); color: #fff; border-color: var(--crimson); }
.badge--best { background: var(--fg); color: #fff; border-color: var(--fg); }
.badge--low  { background: #fff; color: var(--crimson); border-color: var(--crimson); }
.badge--out  { background: #fff; color: var(--fg-subtle); }

.card__wish {
  position: absolute; top: var(--s-3); right: var(--s-3); z-index: 2;
  width: 34px; height: 34px; display: grid; place-items: center; color: var(--fg);
  opacity: 0; transition: opacity 0.3s var(--ease);
}
.card:hover .card__wish, .card__wish:focus-visible, .card__wish.is-on { opacity: 1; }
.card__wish.is-on svg { fill: currentColor; }
.card__wish svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.2; }
@media (hover: none) { .card__wish { opacity: 1; } }

.card__quick {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  opacity: 0; transform: translateY(100%);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.card__quick .btn { min-height: 44px; background: #fff; color: var(--fg); border: 0; border-top: 1px solid var(--line); }
.card__quick .btn:hover { background: var(--fg); color: #fff; }
.card:hover .card__quick { opacity: 1; transform: none; }
@media (hover: none) { .card__quick { opacity: 1; transform: none; } }

.card__body { padding-top: var(--s-3); display: flex; flex-direction: column; gap: var(--s-1); text-align: left; }
.card__name { font-size: var(--t-xs); letter-spacing: 0.06em; }
.card__meta { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.card__price { font-size: var(--t-xs); color: var(--fg-muted); }
.card__price--was { color: var(--fg-subtle); text-decoration: line-through; font-size: var(--t-xs); }
.card__price--now { color: var(--crimson); }
.card__swatches { display: flex; gap: 4px; margin-top: var(--s-1); }
.swatch-dot { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--line); }
/* Star ratings are a marketplace signal, not a luxury one. */
.card__rating { display: none; }
.card.is-out .card__media img { opacity: 0.5; }

/* ------------------------------------------------------- 11. FILTER BAR */
.filters {
  position: sticky; top: calc(var(--nav-h) + var(--ticker-h)); z-index: 60;
  background: var(--ink-900); border-bottom: 1px solid var(--line); padding-block: var(--s-3);
}
.filters__row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.chip-scroll { display: flex; gap: var(--s-4); overflow-x: auto; scrollbar-width: none; flex: 1; }
.chip-scroll::-webkit-scrollbar { display: none; }
.chip {
  flex-shrink: 0; padding: 0.5rem 0; border: 0; border-bottom: 1px solid transparent;
  font-size: var(--t-xxs); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-subtle); white-space: nowrap; transition: all 0.3s var(--ease);
  min-height: 36px; display: inline-flex; align-items: center; gap: 6px;
}
.chip:hover { color: var(--fg); }
.chip.is-active { color: var(--fg); border-bottom-color: var(--fg); }
.chip__x { font-size: 13px; opacity: 0.6; }
.select {
  appearance: none; padding: 0.5rem 1.6rem 0.5rem 0;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' fill='none' stroke='%23767676' stroke-width='1.4'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right center;
  border: 0; font-size: var(--t-xxs); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg); min-height: 36px; cursor: pointer;
}
.results-count { font-size: var(--t-xs); color: var(--fg-subtle); letter-spacing: 0.08em; }

/* --------------------------------------------------------- 12. DRAWER */
.overlay {
  position: fixed; inset: 0; z-index: 190; background: var(--scrim);
  opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease), visibility 0.4s;
}
.overlay.is-open { opacity: 1; visibility: visible; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 200;
  width: min(440px, 100vw); background: var(--ink-900); border-left: 1px solid var(--line);
  display: flex; flex-direction: column; transform: translateX(100%);
  transition: transform 0.45s var(--ease);
}
.drawer.is-open { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: var(--s-5); border-bottom: 1px solid var(--line); flex-shrink: 0; }
.drawer__title { font-family: var(--font-display); font-size: var(--t-sm); letter-spacing: 0.2em; text-transform: uppercase; }
.drawer__body { flex: 1; overflow-y: auto; padding: var(--s-5); }
.drawer__foot { border-top: 1px solid var(--line); padding: var(--s-5); flex-shrink: 0; }

.ship-bar { margin-bottom: var(--s-5); }
.ship-bar__text { font-size: var(--t-xs); margin-bottom: var(--s-2); display: flex; justify-content: space-between; gap: var(--s-3); color: var(--fg-muted); }
.ship-bar__text strong { color: var(--fg); font-weight: 500; }
.ship-bar__track { height: 1px; background: var(--line); }
.ship-bar__fill { height: 100%; background: var(--fg); transition: width 0.6s var(--ease); width: 0; }

.cart-line { display: grid; grid-template-columns: 76px 1fr; gap: var(--s-4); padding-block: var(--s-4); border-bottom: 1px solid var(--line-soft); }
.cart-line__img { overflow: hidden; aspect-ratio: 3/4; background: var(--ink-700); }
.cart-line__img img { width: 100%; height: 100%; object-fit: cover; }
.cart-line__name { font-size: var(--t-xs); letter-spacing: 0.06em; }
.cart-line__opt { font-size: var(--t-xs); color: var(--fg-subtle); margin-top: 2px; }
.cart-line__row { display: flex; align-items: center; justify-content: space-between; margin-top: var(--s-3); gap: var(--s-3); }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); }
.qty button { width: 32px; height: 32px; display: grid; place-items: center; color: var(--fg-muted); }
.qty button:hover { color: var(--fg); }
.qty span { min-width: 28px; text-align: center; font-size: var(--t-xs); }
.cart-line__remove { font-size: var(--t-xs); color: var(--fg-subtle); text-decoration: underline; }
.cart-line__remove:hover { color: var(--fg); }

.cart-totals { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-4); }
.cart-totals__row { display: flex; justify-content: space-between; font-size: var(--t-xs); color: var(--fg-muted); }
.cart-totals__row--big { font-size: var(--t-md); color: var(--fg); padding-top: var(--s-3); border-top: 1px solid var(--line); }

/* An upsell row was built from a full .cart-line — 62px image, name, price and a
   block button on its own row, 117.6px tall. The second suggestion was cut off
   through the middle of its own ADD button (112px of it hidden on a phone, 65px
   on desktop), which reads as a rendering fault rather than a scroll cue. Lay it
   out as a compact row at every width. */
.cart-upsell > .cart-line { grid-template-columns: 52px 1fr; align-items: center; }
.cart-upsell > .cart-line > div {
  display: grid; grid-template-columns: 1fr auto;
  column-gap: var(--s-3); align-items: center;
}
.cart-upsell > .cart-line > div > .cart-line__name { grid-column: 1; grid-row: 1; align-self: end; }
.cart-upsell > .cart-line > div > .cart-line__opt { grid-column: 1; grid-row: 2; align-self: start; margin-top: 2px; }
.cart-upsell > .cart-line > div > .btn {
  grid-column: 2; grid-row: 1 / span 2;
  margin-top: 0; min-height: 34px; padding: 0.4rem 0.9rem;
}
@media (max-width: 560px) { .cart-upsell > .cart-line { grid-template-columns: 44px 1fr; } }

/* The bag is a narrow column on a phone, so the desktop 1.5rem padding on every
   edge and row costs a whole item of visible height. Tighten the frame and the
   line rhythm so more of the order is on screen at once. */
@media (max-width: 560px) {
  .drawer__head { padding: var(--s-4); }
  .drawer__body { padding: var(--s-4); }
  .drawer__foot { padding: var(--s-4); }
  .drawer__title { font-size: var(--t-xs); letter-spacing: 0.16em; }
  .cart-line { grid-template-columns: 62px 1fr; gap: var(--s-3); padding-block: var(--s-3); }
  .cart-line__row { margin-top: var(--s-2); }
  .cart-totals { gap: 6px; margin-bottom: var(--s-3); }
  .cart-totals__row--big { font-size: var(--t-sm); padding-top: var(--s-2); }
  .ship-bar { margin-bottom: var(--s-4); }
  .cart-assure { margin-top: 0.75rem; padding-top: 0.7rem; }
  .summary { padding: var(--s-4); }

  /* Seven classes of information were all set at 13px Inter 400 — the product
     name read exactly like the word "Remove". Jost-uppercase is already this
     brand's voice for names, so the name takes it and the two supporting lines
     drop a step. Three tiers out of tokens that already exist. */
  .cart-line__name {
    font-family: var(--font-display); font-size: var(--t-xs);
    letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.3;
  }
  .cart-line__opt { font-size: var(--t-xxs); letter-spacing: 0.05em; margin-top: 3px; }
  .cart-line__remove { font-size: var(--t-xxs); letter-spacing: 0.08em; text-transform: uppercase; }

  /* The pinned foot was taking 45% of the screen. "Keep shopping" is a third way
     to close a drawer that already has a 44px close button and a tappable scrim. */
  .drawer__foot > .center { display: none; }
  .drawer__foot .btn--lg { padding-block: 0.95rem; }

  /* The countdown was the only rounded object in a system where every radius is
     0, with 7px unit captions. Same information, stated as a ruled row. */
  .drawer__foot .sale-timer--block {
    width: 100%; border: 0; border-radius: 0; background: none;
    border-block: 1px solid var(--line);
    padding: 0.45rem 0; margin: 0 0 var(--s-3); gap: 0.5rem;
  }
  .drawer__foot .sale-timer__dot { display: none; }
  .drawer__foot .sale-timer__segs { gap: 0.3rem; }
  .drawer__foot .sale-timer__seg { min-width: 0; font-size: var(--t-xs); }
  .drawer__foot .sale-timer__seg small { display: none; }
  .drawer__foot .sale-timer__seg:nth-child(1)::after { content: 'd'; }
  .drawer__foot .sale-timer__seg:nth-child(2)::after { content: 'h'; }
  .drawer__foot .sale-timer__seg:nth-child(3)::after { content: 'm'; }
  .drawer__foot .sale-timer__seg:nth-child(4)::after { content: 's'; }

  /* Tinted in a gold the site retired (--gold is #111111 now), with a dot that
     centred on the whole block instead of its first line. It is an aside, not an
     alarm — the countdown above already carries the urgency. */
  .reserve-note {
    background: none; border: 0; padding: 0 0 var(--s-3); margin-bottom: 0;
    font-size: var(--t-xxs); color: var(--fg-subtle);
    letter-spacing: 0.04em; line-height: 1.5;
    justify-content: center; text-align: center;
  }
  .reserve-note i { display: none; }

  /* A gradient-filled card with a truck driving across it forever, inside a
     hairline system. The dates say it with more authority than the illustration. */
  .cart-assure .ship-eta {
    border: 0; background: none;
    border-top: 1px solid var(--line-soft);
    padding: var(--s-3) 0 0; margin-bottom: var(--s-3);
  }
  .cart-assure .ship-eta__route { display: none; }

  /* 8px text in 3px-radius boxes are not logos. Square them, make them legible. */
  .pay-icon { border-radius: 0; font-size: var(--t-xxs); letter-spacing: 0.1em; padding: 3px 8px; }
  .cart-assure .pay-icons { gap: 5px; }

  /* Delivery date, payment marks and the returns promise were filed BELOW the
     cross-sell, so the reasons to press Checkout were the part that fell off the
     screen while a second product got the visible half. Reassure first, suggest
     after — whatever ends up below the fold should be the upsell. */
  #cartBody { display: flex; flex-direction: column; }
  #cartBody > .cart-assure { order: 1; }
  #cartBody > .cart-upsell { order: 2; }
}
.empty-state { text-align: center; padding-block: var(--s-8); }
.empty-state svg { width: 40px; height: 40px; margin: 0 auto var(--s-4); stroke: var(--ink-400); fill: none; stroke-width: 1; }

/* ---------------------------------------------------------- 13. MODAL */
.modal {
  position: fixed; inset: 0; z-index: 210; display: grid; place-items: center;
  padding: var(--s-4); opacity: 0; visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s; overflow-y: auto;
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal__panel {
  position: relative; width: min(980px, 100%); max-height: min(92vh, 900px); overflow-y: auto;
  background: var(--ink-900); border: 1px solid var(--line);
}
/* A bordered white tile made the dismiss control the loudest thing in the
   dialog. It only has to be findable, not prominent. */
.modal__close { position: absolute; top: var(--s-4); right: var(--s-4); z-index: 5; width: 38px; height: 38px; display: grid; place-items: center; background: transparent; border: 0; color: var(--fg-muted); transition: color var(--dur) var(--ease); }
.modal__close:hover { color: var(--fg); }
.modal__pad { padding: clamp(1.5rem, 4vw, 2.75rem); }

/* ------------------------------------------------------ 14. FIT FINDER */
.fit { --fit-pad: clamp(1.5rem, 4vw, 2.75rem); }
.fit__head { padding: var(--fit-pad) var(--fit-pad) 0; }
.fit__steps { display: flex; gap: var(--s-2); margin-block: var(--s-4) var(--s-5); }
.fit__step-dot { flex: 1; height: 1px; background: var(--line); }
.fit__step-dot i { display: block; height: 100%; width: 0; background: var(--fg); transition: width 0.4s var(--ease); }
.fit__step-dot.is-done i, .fit__step-dot.is-active i { width: 100%; }
.fit__panel { padding: 0 var(--fit-pad) var(--fit-pad); display: none; }
.fit__panel.is-active { display: block; }
.fit__title { font-family: var(--font-display); font-size: var(--t-xl); text-transform: uppercase; line-height: 0.95; margin-block: 0.5rem; }
.fit__intro { font-size: var(--t-sm); }
.fit__q { font-family: var(--font-display); font-size: var(--t-xl); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: var(--s-2); }
.fit__hint { font-size: var(--t-sm); color: var(--fg-muted); margin-bottom: var(--s-5); }

/* On a phone the questionnaire has to fit the screen, not carry the type scale
   of a desktop hero. Tighten the headings and the run of fields so the whole
   first step — Continue included — is reachable without a long scroll. */
@media (max-width: 560px) {
  .fit { --fit-pad: 1.15rem; }
  .fit__title { font-size: var(--t-lg); line-height: 1.05; margin-block: 0.35rem 0.15rem; }
  .fit__intro { font-size: var(--t-xs); line-height: 1.5; }
  .fit__steps { margin-block: var(--s-3) var(--s-4); }
  .fit__q { font-size: var(--t-md); letter-spacing: 0.08em; }
  .fit__hint { font-size: var(--t-xs); line-height: 1.5; margin-bottom: var(--s-4); }
  .field-row { gap: var(--s-3); margin-bottom: var(--s-4); }
  .field label { font-size: 10px; letter-spacing: 0.12em; }
  .field input, .field select { min-height: 42px; padding: 0.5rem 0; font-size: var(--t-sm); }
  .field small { font-size: 11px; line-height: 1.45; }
  .modal__pad { padding: 1.15rem; }
  .modal__panel { max-height: 88vh; }
  /* Continue rides the bottom of the panel, so it is reachable the moment the
     step opens instead of hiding under a screenful of fields. */
  .fit__actions {
    position: sticky; bottom: 0; z-index: 2;
    padding-block: 0.75rem; margin-top: var(--s-4);
    background: var(--ink-900);
    border-top: 1px solid var(--line);
    /* sits over the fields as it sticks, so it reads as a bar, not a float */
    box-shadow: 0 -10px 18px -12px rgba(17, 17, 17, 0.28);
  }
  /* let the last field scroll clear of the bar instead of ending under it */
  .fit__panel { padding-bottom: 0.5rem; }
}

.field-row { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-bottom: var(--s-5); }
.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field label { font-size: var(--t-xxs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-subtle); }
/* Every other surface here speaks in hairline rules on cream — the look block,
   the cart lines, the fit CTA. Filled white boxes were the one place that broke
   that language, which is what made the forms read as unstyled browser default.
   These are ruled fields: no fill, one hairline, gold only on focus. */
.field input, .field select {
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  padding: 0.7rem 0; font-size: var(--t-md); min-height: 46px; width: 100%;
  color: var(--fg); border-radius: 0;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.field select {
  -webkit-appearance: none; appearance: none;
  padding-right: 1.5rem;
  /* the native control's chevron is the wrong weight and colour for this type */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='1.3'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 0 center; background-size: 15px;
}
.field input:focus, .field select:focus {
  border-bottom-color: var(--gold); outline: none;
  box-shadow: 0 1px 0 0 var(--gold);
}
.field input::placeholder { color: var(--ink-400); }

/* Disclosure rows: the default marker is a raw ▶ that sits outside the type. */
.fit summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.55rem; }
.fit summary::-webkit-details-marker { display: none; }
.fit summary::before {
  content: ''; width: 7px; height: 7px; flex: none;
  border-right: 1.2px solid currentColor; border-bottom: 1.2px solid currentColor;
  transform: rotate(-45deg); transition: transform 0.25s var(--ease);
}
.fit details[open] summary::before { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .fit summary::before { transition: none; } }
.field small { font-size: var(--t-xxs); color: var(--fg-subtle); }
/* Form gaps tuned for a full page leave a dialog feeling loose — on a phone the
   columns stack, so the row gap and the row margin compound into one big void. */
.fit .field-row { gap: var(--s-3); margin-bottom: var(--s-4); }
.fit details { margin-bottom: var(--s-4) !important; }
.unit-toggle { display: inline-flex; border: 1px solid var(--line); }
.unit-toggle button { padding: 0.4rem 0.85rem; font-size: var(--t-xxs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-subtle); }
.unit-toggle button.is-active { background: var(--fg); color: #fff; }

.opt-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: var(--s-5); }
.opt {
  border: 1px solid var(--line); padding: var(--s-4); text-align: left;
  display: flex; flex-direction: column; gap: 4px; min-height: 80px;
  transition: border-color 0.3s var(--ease);
}
.opt:hover { border-color: var(--fg-subtle); }
.opt.is-selected { border-color: var(--fg); }
.opt strong { font-size: var(--t-xs); letter-spacing: 0.08em; font-weight: 500; }
.opt span { font-size: var(--t-xs); color: var(--fg-subtle); line-height: 1.45; }

.fit-result { text-align: center; padding-block: var(--s-5); }
.fit-result__size {
  font-family: var(--font-display); font-size: clamp(3.5rem, 11vw, 6rem);
  line-height: 1; letter-spacing: 0.06em; color: var(--fg);
}
.fit-result__label { font-size: var(--t-xxs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-subtle); }
.conf {
  display: inline-flex; align-items: center; gap: var(--s-2); margin-top: var(--s-3);
  padding: 0.3rem 0.8rem; font-size: var(--t-xxs); letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid var(--line);
}
.conf--high { color: var(--success); border-color: var(--success); }
.conf--medium { color: var(--fg); border-color: var(--fg); }
.conf--low { color: var(--crimson); border-color: var(--crimson); }

.fit-why { margin-top: var(--s-6); text-align: left; border-top: 1px solid var(--line); padding-top: var(--s-5); }
.fit-why h4 { font-size: var(--t-xxs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-subtle); margin-bottom: var(--s-3); }
.fit-why li { font-size: var(--t-sm); color: var(--fg-muted); padding-left: var(--s-4); position: relative; margin-bottom: var(--s-2); }
.fit-why li::before { content: ''; position: absolute; left: 0; top: 0.7em; width: 4px; height: 1px; background: var(--fg-subtle); }
.fit-tip { display: flex; gap: var(--s-3); padding: var(--s-2) 0; font-size: var(--t-sm); align-items: flex-start; }
.fit-tip i { flex-shrink: 0; width: 4px; height: 1px; margin-top: 0.75em; background: var(--fg-subtle); }

.silhouette { display: grid; place-items: center; padding-block: var(--s-4); }
.silhouette svg { width: min(170px, 44vw); height: auto; }
.silhouette .body-fill { fill: var(--ink-700); stroke: var(--fg); stroke-width: 1; }
.silhouette .body-guide { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 3; }
.silhouette .body-label { fill: var(--fg-subtle); font-size: 7.5px; font-family: var(--font-body); letter-spacing: 0.1em; }
.silhouette .body-val { fill: var(--fg); font-size: 8px; font-weight: 600; font-family: var(--font-body); }

.size-table-wrap { overflow-x: auto; border: 1px solid var(--line); }
.size-table { width: 100%; border-collapse: collapse; font-size: var(--t-xs); min-width: 440px; }
.size-table th, .size-table td { padding: var(--s-3) var(--s-4); text-align: left; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.size-table thead th { font-size: var(--t-xxs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-subtle); font-weight: 500; }
.size-table tbody tr:last-child td { border-bottom: 0; }
.size-table tbody tr.is-you { background: var(--ink-700); }
.size-table td:first-child { font-weight: 500; }

.tabs { display: flex; gap: var(--s-5); margin-bottom: var(--s-5); border-bottom: 1px solid var(--line); }
.tab { padding: var(--s-3) 0; font-size: var(--t-xxs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-subtle); border-bottom: 1px solid transparent; margin-bottom: -1px; }
.tab.is-active { color: var(--fg); border-bottom-color: var(--fg); }

/* ------------------------------------------------------------ 15. PDP */
.pdp { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (max-width: 980px) { .pdp { grid-template-columns: 1fr; gap: var(--s-5); } }
.gallery { position: sticky; top: calc(var(--nav-h) + var(--ticker-h) + var(--s-4)); }
@media (max-width: 980px) { .gallery { position: static; } }
.gallery__main { position: relative; overflow: hidden; background: var(--ink-700); aspect-ratio: 3/4; cursor: zoom-in; }
.gallery__main img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.gallery__main.is-zoomed img { transform: scale(2); cursor: zoom-out; }
.gallery__thumbs { display: flex; gap: var(--s-2); margin-top: var(--s-2); overflow-x: auto; scrollbar-width: none; }
.gallery__thumbs::-webkit-scrollbar { display: none; }
.gallery__thumb { flex-shrink: 0; width: 68px; aspect-ratio: 3/4; overflow: hidden; border: 1px solid transparent; opacity: 0.5; transition: all 0.3s; background: var(--ink-700); }
.gallery__thumb.is-active { border-color: var(--fg); opacity: 1; }
.gallery__thumb:hover { opacity: 1; }
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }

.pdp__title { font-family: var(--font-display); font-size: var(--t-xl); letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.25; margin-block: var(--s-2) var(--s-4); }
.pdp__price-row { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-2); }
.pdp__price { font-size: var(--t-lg); }
.pdp__price--now { color: var(--crimson); }
.pdp__was { color: var(--fg-subtle); text-decoration: line-through; }
.pdp__save { font-size: var(--t-xxs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--crimson); }
.pdp__pay { font-size: var(--t-xs); color: var(--fg-subtle); margin-bottom: var(--s-6); }
.pdp__block { margin-bottom: var(--s-5); }
.pdp__label { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); flex-wrap: wrap; }
.pdp__label span:first-child { font-size: var(--t-xxs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-subtle); }

.size-grid { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.size-btn {
  min-width: 54px; min-height: 46px; padding: 0 var(--s-3);
  border: 1px solid var(--line); font-size: var(--t-xs); letter-spacing: 0.08em;
  color: var(--fg); transition: all 0.25s var(--ease); position: relative; background: #fff;
}
.size-btn:hover:not(:disabled) { border-color: var(--fg); }
.size-btn.is-selected { background: var(--fg); color: #fff; border-color: var(--fg); }
.size-btn:disabled { color: var(--ink-400); cursor: not-allowed; background-image: linear-gradient(to top right, transparent 48%, var(--ink-500) 48%, var(--ink-500) 52%, transparent 52%); }
.size-btn.is-rec::after { content: ''; position: absolute; top: -3px; right: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--fg); }

.swatch-row { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.swatch { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); box-shadow: inset 0 0 0 2px #fff; transition: all 0.25s; }
.swatch.is-selected { border-color: var(--fg); }
.swatch-cell { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; }
.swatch-name { font-size: var(--t-xs); color: var(--fg-muted); letter-spacing: 0.02em; white-space: nowrap; }
.swatch-cell:has(.swatch.is-selected) .swatch-name { color: var(--fg); }

.fit-cta {
  display: flex; align-items: center; gap: var(--s-3); width: 100%;
  padding: var(--s-4) 0; border-block: 1px solid var(--line); text-align: left;
  margin-bottom: var(--s-5); transition: opacity 0.3s var(--ease);
}
.fit-cta:hover { opacity: 0.6; }
.fit-cta svg { width: 20px; height: 20px; stroke: var(--fg); fill: none; stroke-width: 1.1; flex-shrink: 0; }
.fit-cta strong { display: block; font-size: var(--t-xs); letter-spacing: 0.08em; font-weight: 500; }
.fit-cta span { font-size: var(--t-xs); color: var(--fg-subtle); }
.fit-cta__arrow { margin-left: auto; }

.stock-line { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-xs); margin-bottom: var(--s-4); color: var(--fg-muted); }
.stock-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.stock-dot--in { background: var(--success); }
.stock-dot--low { background: var(--crimson); }
.stock-dot--out { background: var(--ink-400); }

.acc { border-top: 1px solid var(--line); }
.acc__btn { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: var(--s-4) 0; font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; text-align: left; gap: var(--s-3); border-bottom: 1px solid var(--line); }
.acc__btn svg { width: 12px; height: 12px; stroke: var(--fg); stroke-width: 1.4; fill: none; transition: transform 0.3s var(--ease); flex-shrink: 0; }
.acc__btn[aria-expanded="true"] svg { transform: rotate(45deg); }
.acc__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--ease); }
.acc__body.is-open { grid-template-rows: 1fr; }
.acc__inner { overflow: hidden; }
.acc__inner > div { padding-block: var(--s-4); font-size: var(--t-sm); color: var(--fg-muted); }
.acc__inner li { padding-left: var(--s-4); position: relative; margin-bottom: 6px; }
.acc__inner li::before { content: ''; position: absolute; left: 0; top: 0.7em; width: 4px; height: 1px; background: var(--fg-subtle); }

.sticky-atc {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--ink-900); border-top: 1px solid var(--line);
  padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: var(--s-3);
  transform: translateY(110%); transition: transform 0.4s var(--ease);
}
.sticky-atc.is-visible { transform: none; }
.sticky-atc__info { flex: 1; min-width: 0; }
.sticky-atc__name { font-size: var(--t-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-atc__price { font-size: var(--t-xs); color: var(--fg-muted); }
@media (min-width: 981px) { .sticky-atc { display: none; } }

/* ------------------------------------------------------- 16. REVIEWS */
.rev-summary { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; margin-bottom: var(--s-6); }
@media (max-width: 640px) { .rev-summary { grid-template-columns: 1fr; gap: var(--s-4); } }
.rev-score { text-align: center; }
.rev-score__n { font-family: var(--font-display); font-size: 2.4rem; line-height: 1; }
.rev-score__stars { font-size: 0.85rem; letter-spacing: 2px; margin-block: var(--s-1); color: var(--fg); }
.rev-score__c { font-size: var(--t-xs); color: var(--fg-subtle); }
.fit-meter__label { font-size: var(--t-xxs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-subtle); margin-bottom: var(--s-3); }
.fit-meter__track { height: 1px; background: var(--line); position: relative; margin-bottom: var(--s-2); }
.fit-meter__marker { position: absolute; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--fg); transform: translate(-50%, -50%); transition: left 0.6s var(--ease); }
.fit-meter__scale { display: flex; justify-content: space-between; font-size: var(--t-xxs); color: var(--fg-subtle); }
.review { padding-block: var(--s-5); border-top: 1px solid var(--line-soft); }
.review__head { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-2); }
.review__stars { font-size: var(--t-xs); letter-spacing: 1px; }
.review__name { font-size: var(--t-xs); }
.review__verified { font-size: var(--t-xxs); color: var(--fg-subtle); display: inline-flex; align-items: center; gap: 4px; }
.review__meta { font-size: var(--t-xs); color: var(--fg-subtle); margin-top: var(--s-2); display: flex; gap: var(--s-4); flex-wrap: wrap; }
.review__text { font-size: var(--t-sm); color: var(--fg-muted); }

/* -------------------------------------------------- 17. EDITORIAL */
.split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(2rem, 5vw, 4rem); }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.split__media { overflow: hidden; aspect-ratio: 4/5; background: var(--ink-700); }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.marquee, .ugc__tag { display: none; }
.ugc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-2); }
.ugc { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--ink-700); }
.ugc img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.ugc:hover img { transform: scale(1.05); }

/* ----------------------------------------------------- 18. NEWSLETTER */
.news { border: 1px solid var(--line); padding: clamp(2rem, 5vw, 4rem); text-align: center; }
.news__form { display: flex; gap: var(--s-2); max-width: 440px; margin: var(--s-5) auto 0; flex-wrap: wrap; }
.news__form input { flex: 1; min-width: 200px; background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: 0.85rem 0; min-height: 48px; }
.news__form input:focus { border-bottom-color: var(--fg); outline: none; }
.news__fine { font-size: var(--t-xxs); color: var(--fg-subtle); margin-top: var(--s-3); }

/* -------------------------------------------------------- 19. FOOTER */
/* 64px of air before the first footer link, and a 48px gap under the columns. */
.footer { border-top: 1px solid var(--line); padding-block: var(--s-6) var(--s-5); }
.footer__grid { display: grid; grid-template-columns: 2.4fr 1fr 1fr; gap: var(--s-6); margin-bottom: var(--s-6); }
@media (max-width: 860px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-4); } }
@media (max-width: 460px) { .footer__grid { grid-template-columns: 1fr; } }

/* The grid declares three columns but product and shop pass four children, so
   "Palace" wrapped to a second row under a brand block taking 52% of the width.
   Auto-flow handles both counts — 3 on home, 4 elsewhere — in one row. */
@media (min-width: 861px) {
  .footer__grid {
    grid-template-columns: minmax(0, 1.5fr);
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
}

/* The footer was running to nearly 1.5 screens on a phone: it collapsed to one
   column so every link stacked, on top of desktop-sized padding. Keep the two
   short link lists beside each other and tighten the rhythm — the brand block
   still spans the full width above them. */
@media (max-width: 560px) {
  .footer { padding-block: var(--s-5) var(--s-4); }
  .footer__grid { gap: var(--s-4); margin-bottom: var(--s-4); }
  .footer h4 { margin-bottom: var(--s-2); }
  .footer li { margin-bottom: 5px; }
  .footer__tagline { margin-bottom: var(--s-2); }
  .socials { margin-top: var(--s-3); }
  .footer__bottom { padding-top: var(--s-4); gap: var(--s-2); }
}
@media (max-width: 460px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__grid > :first-child { grid-column: 1 / -1; }
}
.footer__logo { font-size: var(--t-sm); letter-spacing: 0.3em; margin-bottom: var(--s-3); }
.footer__tagline { font-size: var(--t-xs); opacity: 0.6; max-width: 32ch; margin: 0 0 var(--s-3); line-height: 1.6; }
.pdp-countdown { margin: 0.5rem 0 0.85rem; }

/* Live sale timer — pulsing dot, ticking tabular segments */
.sale-timer {
  display: inline-flex; align-items: center; gap: 0.6rem;
  border: 1px solid rgba(140, 28, 19, 0.22); background: rgba(140, 28, 19, 0.05);
  border-radius: 999px; padding: 0.45rem 1rem;
}
.sale-timer--block { display: flex; justify-content: center; width: fit-content; margin: 0 auto 0.8rem; }
.sale-timer__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--crimson-lift); animation: st-pulse 1.6s ease-in-out infinite; flex: none; }
@keyframes st-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.72); } }
.sale-timer__label { font-size: var(--t-xxs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--crimson-lift); font-weight: 600; white-space: nowrap; }
.sale-timer__segs { display: inline-flex; align-items: flex-start; gap: 0.45rem; }
.sale-timer__seg { font-size: var(--t-sm); font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; text-align: center; line-height: 1.1; min-width: 2.1ch; }
.sale-timer__seg small { display: block; font-size: 7px; letter-spacing: 0.14em; color: var(--fg-subtle); font-weight: 500; text-transform: uppercase; margin-top: 2px; }

/* Bag reservation notice — quiet card, pulsing gold point */
.reserve-note {
  display: flex; align-items: center; justify-content: center; gap: 0.55rem;
  font-size: var(--t-xs); color: var(--fg); text-align: left;
  background: rgba(191, 157, 89, 0.08); border: 1px solid rgba(191, 157, 89, 0.35);
  border-radius: var(--r-sm); padding: 0.6rem 0.9rem; margin-bottom: 0.8rem;
}
.reserve-note i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); animation: st-pulse 1.6s ease-in-out infinite; flex: none; }

/* Free-shipping bar: soft sheen sweeping the fill */
.ship-bar__fill { position: relative; overflow: hidden; }
.ship-bar__fill::after {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(115deg, transparent 0 42%, rgba(255, 255, 255, 0.45) 50%, transparent 58% 100%);
  background-size: 250% 100%; animation: bar-sheen 2.4s linear infinite;
}
@keyframes bar-sheen { to { background-position: -250% 0; } }

@media (prefers-reduced-motion: reduce) {
  .sale-timer__dot, .reserve-note i, .ship-bar__fill::after { animation: none; }
}
.footer h4 { font-size: var(--t-xxs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-subtle); margin-bottom: var(--s-4); }
.footer li { margin-bottom: var(--s-2); }
.footer a { font-size: var(--t-xs); color: var(--fg-muted); }
.footer a:hover { color: var(--fg); }
.footer__bottom { display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; padding-top: var(--s-5); border-top: 1px solid var(--line-soft); font-size: var(--t-xxs); color: var(--fg-subtle); letter-spacing: 0.08em; }
.socials { display: flex; gap: var(--s-4); margin-top: var(--s-4); }
.socials a { display: grid; place-items: center; }
.socials svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.2; }
.pay-icons { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pay-icon {
  font-size: 8px; font-weight: 600; letter-spacing: 0.12em; color: var(--fg-subtle);
  border: 1px solid var(--line); border-radius: 3px; padding: 3px 7px; line-height: 1;
  white-space: nowrap; background: transparent;
}
.cart-assure { border-top: 1px solid var(--line-soft); margin-top: 1.1rem; padding-top: 1rem; text-align: center; }

/* Animated delivery timeline: order ● ─ ─ 🚚 ─ ─ ○ arrives */
.ship-eta {
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 0.9rem 1rem 0.7rem; margin-bottom: 0.85rem;
  background: linear-gradient(180deg, rgba(191, 157, 89, 0.06), transparent 70%);
}
.ship-eta__route { position: relative; height: 26px; margin: 0 2px 0.4rem; }
.ship-eta__track {
  position: absolute; left: 12px; right: 12px; top: 50%; height: 1px;
  background-image: repeating-linear-gradient(90deg, var(--gold) 0 5px, transparent 5px 11px);
  background-size: 11px 1px; opacity: 0.55;
  animation: eta-dash 1.4s linear infinite;
}
@keyframes eta-dash { to { background-position: -11px 0; } }
.ship-eta__node { position: absolute; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%; }
.ship-eta__node--a { left: 0; background: var(--gold); }
.ship-eta__node--b { right: 0; border: 1.5px solid var(--gold); background: transparent; }
.ship-eta__truck {
  position: absolute; top: 50%; left: 10%; transform: translate(-50%, -54%);
  width: 30px; height: 22px; color: var(--fg);
  background: var(--bg, #F5F2EC); padding: 0 4px; box-sizing: content-box;
  animation: eta-truck 8s ease-in-out infinite;
}
.ship-eta__truck svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@keyframes eta-truck {
  0% { left: 8%; opacity: 0; }
  6% { opacity: 1; }
  86% { left: 92%; opacity: 1; }
  94% { left: 92%; opacity: 0; }
  100% { left: 8%; opacity: 0; }
}
.ship-eta__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem;
  font-size: var(--t-xxs); letter-spacing: 0.09em; text-transform: uppercase; color: var(--fg-subtle);
}
.ship-eta__date { color: var(--fg); font-weight: 600; letter-spacing: 0.07em; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  .ship-eta__track, .ship-eta__truck { animation: none; }
  .ship-eta__truck { left: 50%; opacity: 1; }
}
.cart-assure .pay-icons { justify-content: center; margin-bottom: 0.7rem; }
.cart-assure__line {
  font-size: var(--t-xxs); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-subtle); display: flex; justify-content: center; flex-wrap: wrap;
  column-gap: 0.9rem; row-gap: 0.25rem;
}
.cart-assure__line span { display: inline-flex; align-items: center; gap: 0.35rem; }
.cart-assure__line i { width: 3px; height: 3px; border-radius: 50%; background: var(--gold); flex: none; }

/* -------------------------------------------------------- 20. TOASTS */
.toasts { position: fixed; bottom: var(--s-5); left: 50%; transform: translateX(-50%); z-index: 300; display: flex; flex-direction: column; gap: var(--s-2); align-items: center; pointer-events: none; width: min(400px, calc(100vw - 2rem)); }
/* Short confirmations and full sentences both land here, so the type has to
   read as prose when it wraps rather than as a spaced-out micro label. */
.toast { background: var(--fg); color: #fff; padding: var(--s-4) var(--s-5); font-size: var(--t-xs);
  letter-spacing: 0.04em; line-height: 1.55; text-align: left; display: flex; align-items: flex-start;
  gap: var(--s-3); pointer-events: auto; max-width: 100%;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
  animation: toast-in 0.34s var(--ease) both; }
.toast svg { width: 15px; height: 15px; stroke: #fff; fill: none; stroke-width: 2; flex-shrink: 0; margin-top: 3px; }
.toast.is-out { animation: toast-out 0.34s var(--ease) both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  .toast, .toast.is-out { animation: none; }
}

/* ------------------------------------------------------ 20b. SEARCH BAR
   Drops below the header rather than covering the page, so the shopper keeps
   her place. Submits to the shop, which does the filtering from ?q=. */
.searchbar {
  border-bottom: 1px solid var(--line);
  background: var(--ink-900);
  overflow: hidden; max-height: 0;
  transition: max-height 0.3s var(--ease);
}
.searchbar.is-open { max-height: 120px; }
.searchbar__form { display: flex; align-items: center; gap: var(--s-3); padding-block: var(--s-4); }
.searchbar__icon { width: 18px; height: 18px; stroke: var(--fg-muted); fill: none; stroke-width: 1.4; flex-shrink: 0; }
.searchbar__input {
  flex: 1; border: 0; background: none; outline: none;
  font-family: inherit; font-size: var(--t-md); color: var(--fg);
  letter-spacing: 0.02em; min-width: 0;
}
.searchbar__input::placeholder { color: var(--fg-subtle); }
.searchbar__close { flex-shrink: 0; display: grid; place-items: center; width: 32px; height: 32px; }
.searchbar__close svg { width: 16px; height: 16px; stroke: var(--fg-muted); fill: none; stroke-width: 1.4; }
@media (prefers-reduced-motion: reduce) { .searchbar { transition: none; } }

/* ------------------------------------------------------ 21. CHECKOUT */
/* ------------------------------------------- 21b. CHECKOUT (bag review)
   The old rules here dressed a mock payment form — three fake wallet buttons
   in Apple/PayPal/Shop brand colours, an "or pay by card" divider, card
   fields. All of it is gone; payment happens on Wix's hosted checkout. */
.co-steps {
  display: flex; gap: var(--s-4); flex-wrap: wrap; list-style: none;
  margin-bottom: var(--s-6); font-size: var(--t-xxs);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-subtle);
  counter-reset: step;
}
.co-steps__s { display: flex; align-items: center; gap: var(--s-2); counter-increment: step; }
.co-steps__s::before {
  content: counter(step); width: 20px; height: 20px; display: grid; place-items: center;
  border: 1px solid var(--line-loud); font-size: 10px; color: var(--fg-subtle);
}
.co-steps__s.is-current { color: var(--fg); }
.co-steps__s.is-current::before { background: var(--fg); color: #fff; border-color: var(--fg); }

.co-grid { display: grid; grid-template-columns: 1.35fr 0.8fr; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 900px) { .co-grid { grid-template-columns: 1fr; gap: var(--s-6); } }

.co-bag__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-4); padding-bottom: var(--s-3); border-bottom: 1px solid var(--line); }
.co-bag__title { font-family: var(--font-display); font-size: var(--t-lg); text-transform: uppercase; letter-spacing: 0.08em; }

.co-empty { text-align: center; padding-block: clamp(2.5rem, 8vw, 5rem); }
.co-empty__title { font-family: var(--font-display); font-size: var(--t-xl); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--s-2); }
.co-empty__note { color: var(--fg-muted); font-size: var(--t-sm); margin-bottom: var(--s-5); }

.co-sum { border: 1px solid var(--line); padding: var(--s-5); position: sticky; top: calc(var(--nav-h) + var(--s-4)); }
@media (max-width: 900px) { .co-sum { position: static; } }
.co-sum__title { font-family: var(--font-display); font-size: var(--t-md); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--s-4); }
.co-sum__row { display: flex; justify-content: space-between; gap: var(--s-4); font-size: var(--t-sm); padding-block: 0.4rem; color: var(--fg-muted); }
.co-sum__row span:last-child { color: var(--fg); font-variant-numeric: tabular-nums; }
.co-sum__row--save span:last-child { color: var(--success); }
.co-sum__row--total { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line); font-size: var(--t-md); color: var(--fg); }
.co-sum__row--total span:last-child { font-weight: 600; }
.co-sum__go { margin-top: var(--s-5); }
.co-sum__fine { font-size: var(--t-xxs); color: var(--fg-subtle); line-height: 1.55; margin-top: var(--s-3); }

/* Progress to free shipping — a real threshold from config, not a nudge. */
.co-ship { margin-top: var(--s-4); }
.co-ship__bar { height: 2px; background: var(--line); overflow: hidden; }
.co-ship__bar i { display: block; height: 100%; background: var(--fg); transition: width 0.5s var(--ease); }
.co-ship__note { font-size: var(--t-xxs); color: var(--fg-subtle); margin-top: var(--s-2); letter-spacing: 0.04em; }
.co-ship__note--won { color: var(--success); margin-top: var(--s-4); }

.co-trust { list-style: none; margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line-soft); display: grid; gap: var(--s-2); }
.co-trust li { font-size: var(--t-xxs); color: var(--fg-subtle); line-height: 1.5; padding-left: 1rem; position: relative; }
.co-trust li::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 5px; height: 5px; background: var(--line-loud); }

/* Mobile: total and the one action stay reachable without scrolling back. */
.co-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: none; align-items: center; gap: var(--s-4);
  padding: var(--s-3) var(--gutter);
  background: var(--ink-900); border-top: 1px solid var(--line);
  padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom));
}
.co-bar.is-hidden { transform: translateY(110%); }
.co-bar { transition: transform 0.3s var(--ease); }
.co-bar__total { display: flex; flex-direction: column; line-height: 1.15; }
.co-bar__total span { font-size: var(--t-xxs); color: var(--fg-subtle); text-transform: uppercase; letter-spacing: 0.14em; }
.co-bar__total strong { font-size: var(--t-md); font-variant-numeric: tabular-nums; }
.co-bar .btn { flex: 1; }
@media (max-width: 900px) {
  .co-bar:not([hidden]) { display: flex; }
  /* clear the bar so the last line item is never trapped under it */
  body.has-co-bar { padding-bottom: 84px; }
}

/* --------------------------------------------- 21c. ORDER CONFIRMATION */
.ty { text-align: center; max-width: 34rem; margin-inline: auto; padding-block: clamp(1rem, 4vw, 2.5rem); }
.ty__mark {
  width: 54px; height: 54px; display: grid; place-items: center; margin-inline: auto;
  border: 1px solid var(--fg); color: var(--fg); margin-bottom: var(--s-5);
}
.ty__mark svg { width: 26px; height: 26px; stroke-dasharray: 32; stroke-dashoffset: 32; animation: tyTick .6s var(--ease) .15s forwards; }
@keyframes tyTick { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .ty__mark svg { animation: none; stroke-dashoffset: 0; } }
.ty__eyebrow { font-size: var(--t-xxs); letter-spacing: 0.3em; text-transform: uppercase; color: var(--fg-subtle); }
.ty__title { font-family: var(--font-display); font-size: clamp(2.2rem, 7vw, 3.4rem); text-transform: uppercase; letter-spacing: 0.06em; line-height: 1; margin-block: var(--s-3); }
.ty__lede { color: var(--fg-muted); font-size: var(--t-sm); line-height: 1.6; }
.ty__ref { margin-top: var(--s-4); font-size: var(--t-xxs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-subtle); }

.ty-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 3vw, 2rem); margin-block: clamp(2rem, 5vw, 3.5rem); padding-top: clamp(1.5rem, 4vw, 2.5rem); border-top: 1px solid var(--line); counter-reset: tystep; }
@media (max-width: 720px) { .ty-steps { grid-template-columns: 1fr; gap: var(--s-5); } }
.ty-steps__s { counter-increment: tystep; }
.ty-steps__s::before { content: counter(tystep, decimal-leading-zero); display: block; font-size: var(--t-xxs); letter-spacing: 0.2em; color: var(--fg-subtle); margin-bottom: var(--s-2); }
.ty-steps__t { font-size: var(--t-sm); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--s-2); }
.ty-steps__p { font-size: var(--t-xs); color: var(--fg-muted); line-height: 1.6; }

.ty-actions { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; }
@media (max-width: 480px) { .ty-actions { flex-direction: column; } .ty-actions .btn { width: 100%; } }
.ty-more { margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: clamp(1.5rem, 4vw, 2.5rem); border-top: 1px solid var(--line); }
.ty-more__t { font-family: var(--font-display); font-size: var(--t-md); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--s-4); }

/* --------------------------------------------------- 22. UTILITIES */
.stack > * + * { margin-top: var(--s-4); }
.flex { display: flex; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); } .gap-4 { gap: var(--s-4); }
.wrap-flex { flex-wrap: wrap; }
.center { text-align: center; }
.mt-4 { margin-top: var(--s-4); } .mt-5 { margin-top: var(--s-5); } .mt-6 { margin-top: var(--s-6); }
.mb-4 { margin-bottom: var(--s-4); } .mb-5 { margin-bottom: var(--s-5); } .mb-6 { margin-bottom: var(--s-6); }
@media (max-width: 700px) { .hide-mobile { display: none !important; } }

/* Retired decorative components */
.hero__proof, .hero__tag, .hero__shot, .hero__scroll, .eyebrow--sweep::before { display: none; }


/* ============================================================================
   JUST DROPPED + LIVE ACTIVITY
   ========================================================================== */

/* A corner flag on genuinely new pieces. Reads instantly, costs one element,
   and unlike a generic "NEW" pill it has the language of a drop. */
.card__drop {
  position: absolute; top: 0; left: 0; z-index: 3;
  background: var(--fg); color: #fff;
  font-size: 9px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 6px 10px;
  display: flex; align-items: center; gap: 5px;
}
.card__drop i {
  width: 5px; height: 5px; border-radius: 50%; background: #fff;
  animation: dropPulse 2.4s ease-in-out infinite;
}
@keyframes dropPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
.card__drop + .card__badges { display: none; }   /* never stack two labels */

/* Live activity — a small, dismissible pill. Deliberately bottom-LEFT so it
   never covers the bag, the sticky add-to-cart, or a mobile CTA. */
.pulse {
  position: fixed; left: var(--s-4); bottom: var(--s-4); z-index: 85;
  display: flex; align-items: center; gap: var(--s-3);
  background: var(--fg); color: #fff;
  padding: 10px 12px; max-width: min(340px, calc(100vw - 2rem));
  transform: translateY(140%); opacity: 0;
  transition: transform 0.55s var(--ease), opacity 0.4s var(--ease);
  box-shadow: 0 12px 34px -14px rgba(0,0,0,0.5);
}
.pulse.is-in { transform: none; opacity: 1; }
.pulse__img { width: 40px; height: 52px; object-fit: cover; flex-shrink: 0; background: var(--ink-700); }
.pulse__body { min-width: 0; }
.pulse__label {
  font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.6); display: flex; align-items: center; gap: 5px;
}
.pulse__label i { width: 4px; height: 4px; border-radius: 50%; background: #fff; animation: dropPulse 2s ease-in-out infinite; }
.pulse__text {
  font-size: var(--t-xs); line-height: 1.35; margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pulse__text b { font-weight: 500; }
.pulse__x {
  margin-left: auto; align-self: flex-start; color: rgba(255,255,255,0.55);
  width: 22px; height: 22px; display: grid; place-items: center; flex-shrink: 0;
}
.pulse__x:hover { color: #fff; }
.pulse__x svg { width: 11px; height: 11px; stroke: currentColor; stroke-width: 2; fill: none; }

@media (max-width: 720px) {
  .pulse { left: var(--s-2); right: var(--s-2); bottom: var(--s-2); max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pulse { transition: none; }
  .card__drop i, .pulse__label i { animation: none; }
}


/* ============================================================================
   LANDING v2 — SIMPLE + NUMBERED (kaysco-informed)
   Fewer sections, less scroll. Blocks numbered 01-04.
   ========================================================================== */
.numbered { display: flex; align-items: baseline; gap: var(--s-4); margin-bottom: var(--s-6); flex-wrap: wrap; }
.numbered__no {
  font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 0.8; letter-spacing: 0.02em; color: var(--line-loud); opacity: 0.18; flex-shrink: 0;
}
.section-head h2 { font-family: var(--font-display); font-size: var(--t-xxl); letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; }
.section-head p { font-size: var(--t-xxs); color: var(--fg-subtle); letter-spacing: 0.14em; text-transform: uppercase; margin-top: 6px; }
.numbered__link { margin-left: auto; align-self: center; }
@media (max-width: 640px) {
  .numbered__no { font-size: 1.9rem; }
  .numbered__link { margin-left: 0; }
}

/* 01 — SHOP BY CATEGORY: big tiles, one tap into the full grid */
/* Every category is a large, equal-height tile. A 6-column grid lets 5 tiles
   sit as a balanced 3-up / 2-up editorial block (top three portrait, bottom
   two wide) — same height throughout, no orphan, maximum presence. */
.catgrid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: clamp(340px, 36vw, 560px);
  gap: var(--s-3);
}
.cattile {
  position: relative; display: block; overflow: hidden;
  background: var(--ink-700);
  grid-column: span 2;          /* 3 tiles per row on top          */
}
.cattile:nth-child(4), .cattile:nth-child(5) { grid-column: span 3; }  /* 2 wide tiles on the bottom */
.cattile img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 22%;
  transition: transform 1.4s var(--ease);
}
.cattile:hover img { transform: scale(1.06); }

/* Bottom-anchored gradient: keeps most of the photo visible while giving the
   name a dark bed to read against on any image (light or dark). */
.cattile__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top,
    rgba(8,8,8,0.80) 0%, rgba(8,8,8,0.42) 30%, rgba(8,8,8,0.10) 56%, rgba(8,8,8,0.16) 100%);
  transition: opacity 0.4s var(--ease);
}
.cattile:hover .cattile__scrim { opacity: 0.9; }

.cattile__label {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; align-items: flex-start;
  text-align: left; color: #fff; padding: var(--s-5);
}
.cattile__tag {
  font-size: var(--t-xs); letter-spacing: 0.26em; text-transform: uppercase;
  color: rgba(255,255,255,0.86); font-weight: 500; margin-bottom: 9px;
  text-shadow: 0 1px 10px rgba(0,0,0,0.7);
}
.cattile__name {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.8rem, 2.9vw, 2.8rem);
  letter-spacing: 0.06em; text-transform: uppercase; line-height: 0.98;
  text-shadow: 0 2px 26px rgba(0,0,0,0.62), 0 1px 3px rgba(0,0,0,0.55);
}

@media (max-width: 900px) {
  .catgrid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(360px, 86vw, 560px); gap: var(--s-2); }
  .cattile { grid-column: span 1; }
  .cattile:nth-child(4), .cattile:nth-child(5) { grid-column: span 1; }
  .cattile:last-child:nth-child(odd) { grid-column: 1 / -1; }  /* lone last tile → full-width banner */
}
@media (max-width: 480px) {
  /* 104vw made a 175px-wide tile 406px tall — a 0.43 ratio, roughly twice as
     tall as the 3:4 every other image on the site uses, so two categories ate
     the whole screen. 58vw gives back the site's own proportion. */
  .catgrid { grid-auto-rows: clamp(230px, 58vw, 300px); }
  .cattile__label { padding: var(--s-4); }
  /* 8vw set "Bottoms" at 31px — 156px of glyphs in a 143px box. */
  .cattile__name { font-size: clamp(1.25rem, 6.4vw, 1.6rem); }
}

.band-tint { background: var(--ink-850); border-block: 1px solid var(--line-soft); }

/* 04 — CUSTOMER REVIEWS wall */
.revwall { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.revcard {
  border: 1px solid var(--line); background: var(--ink-800);
  padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-4);
}
.revcard__stars { color: var(--fg); font-size: var(--t-sm); letter-spacing: 2px; }
.revcard__quote { font-size: var(--t-sm); line-height: 1.55; color: var(--fg); flex: 1; }
.revcard__product { display: flex; align-items: center; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--line-soft); }
.revcard__product img { width: 44px; height: 57px; object-fit: cover; background: var(--ink-700); flex-shrink: 0; }
.revcard__name { display: block; font-size: var(--t-xs); font-weight: 500; }
.revcard__meta { display: block; font-size: var(--t-xxs); color: var(--fg-subtle); margin-top: 2px; }
@media (max-width: 860px) { .revwall { grid-template-columns: 1fr; } }

/* Brand statement — the "why we exist" close before the footer. */
.brandstmt { text-align: center; }
.brandstmt__inner { max-width: 46rem; margin-inline: auto; }
.brandstmt__word { font-family: var(--font-display); text-transform: lowercase; letter-spacing: 0.12em;
  font-size: var(--t-lg); color: var(--fg); }
.brandstmt__word span { color: var(--fg-subtle); font-style: italic; letter-spacing: 0.06em; }
.brandstmt__def { font-size: var(--t-sm); color: var(--fg-muted); letter-spacing: 0.02em;
  margin-top: 2px; margin-bottom: var(--s-6); }
.brandstmt__line { font-family: var(--font-display); font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.04em; line-height: 1.06; font-size: clamp(1.7rem, 4.2vw, 3rem); }
.brandstmt__line em { font-style: normal; color: var(--fg-muted); }
.brandstmt__body { max-width: 40ch; margin: var(--s-5) auto 0; color: var(--fg-muted);
  font-size: var(--t-md); line-height: 1.6; }
.brandstmt__body--wide { max-width: 54ch; color: var(--fg-subtle); }
@media (max-width: 480px) {
  /* 4.2vw set two sentences as four lines, leaving "IN." and "OUT." alone on
     lines of their own. Smaller type plus balance keeps each sentence whole. */
  .brandstmt__line { font-size: clamp(1.4rem, 6.2vw, 1.9rem); text-wrap: balance; }
  /* Centred prose at 54ch gives ragged edges on a phone; range left instead. */
  .brandstmt__body--wide { text-align: left; font-size: var(--t-sm); }
}

/* Shop view density toggle */
.view-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.view-toggle { display: flex; gap: var(--s-1); }
.view-toggle button { width: 34px; height: 34px; display: grid; place-items: center; color: var(--ink-400); border: 1px solid transparent; }
.view-toggle button.is-active { color: var(--fg); }
.view-toggle svg { width: 18px; height: 18px; fill: currentColor; }
/* density applied on the grid */
.product-grid.view-2 { grid-template-columns: repeat(2, 1fr) !important; }
@media (min-width: 721px) { .view-toggle { display: flex; } }
@media (max-width: 720px) { .view-toggle { display: none; } }  /* phone is always 2-up */


/* ============================================================================
   RUNWAY HERO — a slow conveyor of real products behind a clean title plate.
   Distinctive, quiet, and every frame is shoppable. Solves "picture too big":
   this is a moving strip of small portrait shots, not one full-screen image,
   and the title sits on a solid plate so it is always legible.
   ========================================================================== */
.runway {
  position: relative; overflow: hidden;
  /* min-, not fixed: the plate is a grid child, so on a narrow screen it sets
     the floor instead of spilling out through overflow:hidden. The track is
     inset:0 with height:100% frames, so the strip follows. */
  min-height: clamp(400px, 58svh, 640px);
  display: grid; place-items: center;
  background: var(--ink-700);
}
.runway__track {
  position: absolute; inset: 0; z-index: 0;
  display: flex; width: max-content;
  animation: runwaySlide 48s linear infinite;
  will-change: transform;
}
.runway:hover .runway__track { animation-play-state: paused; }
.runway__frame {
  flex: 0 0 auto; width: clamp(210px, 22vw, 300px); height: 100%; overflow: hidden;
  position: relative;   /* anchors this frame's caption to this frame */
  /* placeholder tone while a photo streams in on slow connections — the strip
     reads as loading frames, never as an empty band */
  background: linear-gradient(180deg, rgba(17,17,17,0.05), rgba(17,17,17,0.09));
}
/* What the piece is and what it costs, so the hero sells rather than only
   decorates. Rests hidden; surfaces when the strip is held still. */
.runway__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--s-4) var(--s-3);
  color: #fff; text-align: left;
  background: linear-gradient(180deg, rgba(17, 17, 17, 0) 0%, rgba(17, 17, 17, 0.72) 62%);
  /* Always on. These used to reveal on hover, which no phone has, so the price
     under each photo was unreachable for most of the people looking at it. */
  opacity: 1;
}
.runway__cap-name { font-size: var(--t-xs); letter-spacing: 0.06em; }
.runway__cap-price { font-size: var(--t-xs); color: rgba(255, 255, 255, 0.72); }
/* Was showing the sale price alone, so a reduced piece read as simply cheap. */
.runway__cap-price s { margin-left: 0.4rem; color: rgba(255,255,255,0.5); }
.runway__frame img {
  width: 100%; height: 100%; object-fit: cover;
  /* The 20% dim existed to hold a title plate that no longer sits here, and
     it was making her photography look flat. Show the clothes as shot. */
  filter: contrast(1.02);
  transition: filter 0.5s var(--ease), transform 6s var(--ease);
  /* Own compositing layer per image. Without this, images that finish
     decoding AFTER the marquee's transform layer is composited never
     repaint — the strip stays blank on slow connections (the whether-it-
     shows lottery was a race between image arrival and compositing). */
  transform: translateZ(0);
  backface-visibility: hidden;
}
.runway__frame:hover img { filter: none; transform: scale(1.04) translateZ(0); }
@keyframes runwaySlide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* The hero carries no text at all, by the owner's decision — it is the
   photography plus a name and price under each frame. Every .runway__plate /
   __sale / __eyebrow / __title / __sub / __cta / __tag rule that used to live
   here is deleted rather than left dormant: an unused block of hero styling is
   exactly what made this section look broken before anyone noticed the markup
   was missing. */
@media (max-width: 640px) {
  .runway { min-height: clamp(380px, 52svh, 520px); }
  .runway__frame { width: 52vw; }
}
@media (prefers-reduced-motion: reduce) { .runway__track { animation: none; } }

/* In-page moving promo strip — the loud one, between hero and category */
.promo-strip {
  background: var(--fg); color: #fff; overflow: hidden;
  border-block: 1px solid var(--fg);
  display: flex; align-items: center; height: 52px;
}
.promo-strip__track {
  display: flex; flex-shrink: 0; gap: var(--s-8); white-space: nowrap;
  padding-left: var(--s-8);
  animation: tickerScroll 24s linear infinite; will-change: transform;
  font-family: var(--font-display); font-size: clamp(0.95rem, 1.8vw, 1.35rem);
  letter-spacing: 0.14em; text-transform: uppercase;
}
.promo-strip:hover .promo-strip__track { animation-play-state: paused; }
.promo-strip__item { display: inline-flex; align-items: center; gap: var(--s-8); }
.promo-strip__item::after { content: '\2726'; opacity: 0.5; }
@media (prefers-reduced-motion: reduce) {
  .promo-strip__track { animation: none; justify-content: center; width: 100%; padding-left: 0; }
  .promo-strip__item:not(:first-child) { display: none; }
}