/* ══════════════════════════════════════════════════════════════
   BREAKPOINTS
   320px  floor | 480px xs | 640px sm | 768px md
   840px  nav   | 1024px lg | 1280px xl | 1536px 4xl
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   SUB-FLOOR SAFETY NET — 0–319px
   ══════════════════════════════════════════════════════════════ */

html, img, video, svg, canvas, picture { max-width: 100%; display: block; height: auto; }
button {
  appearance: none; -webkit-appearance: none;
  background: none; border: none; border-radius: 0;
  cursor: pointer; padding: 0;
}

/* ══════════════════════════════════════════════════════════════
   RESET — 320px floor
   ══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; min-width: 0; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
a, button, input, select, label { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button, label { user-select: none; -webkit-user-select: none; }
p, h1, h2, h3, h4, h5, h6, li { text-wrap: balance; overflow-wrap: anywhere; }
[role="list"] { list-style: none; }
a { text-decoration: none; color: inherit; }

/* ══════════════════════════════════════════════════════════════
   BBB DESIGN TOKENS
   ══════════════════════════════════════════════════════════════ */
:root {
  color-scheme: light;

  /* Palette */
  --cream:          #faf7f2;
  --cream-dark:     #f4ede4;
  --blush-light:    #fae8e3;
  --blush:          #f4d5cd;
  --gold-light:     #e6c9a3;
  --gold:           #d4a574;
  --gold-dark:      #c89a6a;
  --mauve-light:    #d4a7b5;
  --mauve:          #b87b8c;
  --mauve-dark:     #9d6073;
  --dark:           #3d2f28;
  --mid:            #8b7d76;
  --white:          #ffffff;
  --brown-darkest:  #5c4129;
  --sale-red:       #c0392b;
  --rose-light:     #fce4ec;
  --border:         rgba(61,47,40,.12);
  --overlay:        rgba(61,47,40,.52);

  /* Typography */
  --serif:  'Playfair Display', Georgia, serif;
  --body:   'Cormorant Garamond', Georgia, serif;
  --sans:   'DM Sans', system-ui, sans-serif;
  --ui:     'Jost', system-ui, sans-serif;

  /* Fluid type */
  --tx-sm:   clamp(0.8125rem, 0.77rem  + 0.3vw,   0.9375rem);
  --tx-base: clamp(0.875rem,  0.8rem   + 0.4vw,   1rem);
  --tx-md:   clamp(1rem,      0.9rem   + 0.5vw,   1.125rem);
  --tx-lg:   clamp(1.125rem,  1rem     + 0.6vw,   1.375rem);

  /* Elevation */
  --sh-lg: 0 8px 36px rgba(61,47,40,.18);
  --sh-md: 0 4px 18px rgba(61,47,40,.12);

  /* Motion */
  --t: 180ms ease;

  /* ── Hero additional tokens ── */
  --cream-warm:     #f0e6d8;
  --dark-light:     #5a4a42;
  --mauve-lightest: #e8d5dc;
  --tx-micro: clamp(0.6875rem, 0.625rem + 0.223vw, 0.75rem);
  --tx-xs:    clamp(0.75rem,   0.7rem   + 0.25vw,  0.8125rem);
  --ease-std:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);

  /* Breakpoints — reference only */
}

/* ══════════════════════════════════════════════════════════════
   BASE
   ══════════════════════════════════════════════════════════════ */
html {
  font-size: 100%; -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  overflow-x: clip; overscroll-behavior: none;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--sans);
  font-size: var(--tx-base);
  color: var(--dark);
  background: var(--cream);
  min-height: 100svh;
  overflow-x: clip; overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.drw-open {
  overflow-y: hidden;
  position: fixed;
  width: 100%;
  padding-inline-end: var(--scrollbar-w, 0px);
  touch-action: none;
}

/* hide html-level scrollbar while any overlay is open — prevents double scrollbar */
html:has(body.drw-open) {
  overflow: hidden;
  scrollbar-width: none;
}
html:has(body.drw-open)::-webkit-scrollbar { display: none; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--mauve); outline-offset: 2px; }

/* ══════════════════════════════════════════════════════════════
   UTILITIES
   ══════════════════════════════════════════════════════════════ */
.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;
}
.skip-link {
  position: absolute; top: 0; left: 0; z-index: 9999;
  padding: .75rem 1.25rem;
  background: var(--dark); color: var(--white);
  font-family: var(--ui); font-size: var(--tx-base); font-weight: 600;
  border-radius: 0 0 6px 0;
  transform: translateY(-100%); opacity: 0;
  transition: transform 180ms ease, opacity 180ms ease;
}
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }
.skip-link:focus-visible {
  transform: translateY(0); opacity: 1;
  outline: 2px solid var(--gold); outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════
   SITE HEADER SHELL
   ══════════════════════════════════════════════════════════════ */
.hdr {
  display: block; width: 100%;
  position: relative; z-index: 100;
  overflow-x: clip; overflow-y: visible;
  box-shadow: 0 2px 12px rgba(61,47,40,.10);
}

/* Shared inner wrapper */
.inner {
  display: block; width: 100%;
  max-width: 1600px; margin-inline: auto;
  padding-inline: clamp(.75rem, 3vw, 2rem);
}

/* ══════════════════════════════════════════════════════════════
   BAR 1 — ANNOUNCEMENT STRIP
   Grid: [ann-list] [ann-dots]
   Mobile: carousel — one col visible, dots visible
   640px+: all cols visible, dots hidden
   ══════════════════════════════════════════════════════════════ */
.ann {
  display: block; width: 100%;
  background: linear-gradient(135deg, var(--mauve-dark) 0%, var(--mauve) 60%, var(--mauve-light) 100%);
  border-bottom: 1px solid rgba(255,255,255,.12);
  overflow-x: clip;
}
.ann .inner {
  /* Grid: ann-list takes remaining space, dots are auto-width */
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "list dots";
  align-items: center;
  min-height: 40px;
  padding-inline: clamp(.75rem, 3vw, 2rem);
}
.ann-list {
  grid-area: list;
  display: grid;
  grid-template-columns: 1fr;
  list-style: none;
}

/* Mobile: single col visible at a time — JS toggles .on */
.ann-col {
  grid-column: 1; grid-row: 1;
  display: none; align-items: center; justify-content: center;
  gap: .5rem; padding: .625rem .75rem;
  font-family: var(--ui); font-size: var(--tx-sm); font-weight: 500;
  letter-spacing: .04em; color: rgba(255,255,255,.9);
  text-align: center;
}
.ann-col.on { display: flex; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes ann-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .ann-col.on { animation: ann-in 380ms ease both; }
}
.ann-txt {
  font-size: var(--tx-sm); line-height: 1.5;
  letter-spacing: .03em;
}
.ann-col i { font-size: var(--tx-sm); flex-shrink: 0; opacity: .75; }
.ann-col strong { font-weight: 700; color: var(--white); }
.ann-col a {
  color: inherit; text-decoration: underline;
  text-underline-offset: 3px; font-weight: 600;
  transition: opacity var(--t);
}
.ann-col a:hover { opacity: .72; }
.ann-col a:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; border-radius: 2px; }

/* Column separators — hidden until 768px */
.ann-sep {
  display: none; list-style: none;
  pointer-events: none;
}

/* Dot indicators */
.ann-dots {
  grid-area: dots;
  display: flex; align-items: center; gap: .375rem;
  padding-inline: .375rem; list-style: none;
}
.ann-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(255,255,255,.4); cursor: pointer;
  transition: width .2s ease, height .2s ease, background .2s ease;
}
.ann-dot.on { width: 6px; height: 6px; background: var(--white); }

.ann-br { display: none; }

/* 640px+: all cols show, dots hide */
@media (min-width: 640px) {
  .ann-list {
    grid-template-columns: 1fr 1px 1fr 1px 1fr;
    grid-template-rows: 1fr;
  }
  .ann-col {
    grid-column: auto; grid-row: auto;
    display: flex;
    padding: .625rem 1.25rem;
  }
  .ann-sep {
    display: block;
    width: 1px; background: rgba(255,255,255,.18);
    align-self: stretch; margin-block: .5rem;
  }
  .ann-dots { display: none; }
}

/* 640px–840px: allow line-breaks */
@media (min-width: 640px) and (max-width: 839px) {
  .ann-br  { display: inline; }
  .ann-col { align-items: flex-start; }
}

/* 1024px+: type up */
@media (min-width: 1024px) {
  .ann-col { padding: .75rem 1.5rem; font-size: var(--tx-sm); }
}

/* ══════════════════════════════════════════════════════════════
   BAR 2 — LOGO + UTILITY BAR
   Mobile  (320px): 2-row grid
     row 1: [search] [icons]
     row 2: [logo + hamburger]
   Desktop (640px+): 3-col grid
     [search] [logo] [icons]
   ══════════════════════════════════════════════════════════════ */
.combo {
  display: block; width: 100%;
  background: linear-gradient(160deg, var(--white) 0%, var(--cream) 50%, var(--blush-light) 100%);
  border-bottom: 1px solid var(--blush);
  overflow-x: clip; overflow-y: visible; position: relative;
}

/* Mobile 2-row grid */
.combo .inner {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "search icons"
    "logo   logo";
  padding-block: 0;
  padding-inline: 0;
}

.c-search {
  grid-area: search;
  display: flex; align-items: center;
  padding: .375rem clamp(.75rem, 3vw, 2rem);
  border-bottom: 1px solid var(--border);
  min-width: 0;
}
.c-icons {
  grid-area: icons;
  display: flex; align-items: center; justify-content: flex-end;
  padding: .375rem clamp(.75rem, 3vw, 2rem) .375rem 0;
  border-bottom: 1px solid var(--border);
}
.c-logo {
  grid-area: logo;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "brand hamburger";
  align-items: center;
  padding: 1.25rem clamp(.75rem, 3vw, 2rem);
}
.logo-grp {
  grid-area: brand;
  display: flex; flex-direction: column;
  align-items: flex-start;
}
.logo-inner {
  display: flex; flex-direction: column;
  align-items: center; gap: .125rem;
}

/* Desktop 3-col grid */
@media (min-width: 640px) {
  .combo .inner {
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto;
    grid-template-areas: "search logo icons";
    align-items: start;
    padding-top: 12px;
    padding-bottom: clamp(1rem, 3vw, 2rem);
    padding-inline: clamp(.75rem, 3vw, 2rem);
    gap: 1rem;
  }
  .c-search {
    align-items: flex-start;
    padding: .25rem 0 0;
    border-bottom: none;
  }
  .c-icons {
    align-items: flex-start; justify-content: flex-end;
    padding: .25rem 0 0;
    border-bottom: none;
  }
  .c-logo {
    grid-template-columns: 1fr;
    grid-template-areas: "brand";
    justify-items: center;
    align-items: center;
    padding: 0;
  }
  .logo-inner {
    align-items: center; gap: .25rem;
    padding-top: 20px;
  }
}

/* ── Hamburger — mobile only ── */
.hamburger {
  grid-area: hamburger;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: none; border: none; border-radius: 6px;
  color: var(--dark); font-size: var(--tx-lg); cursor: pointer;
  transition: background var(--t);
}
.hamburger:hover { background: var(--blush-light); color: var(--mauve-dark); border-color: var(--mauve-light); }
.hamburger:focus-visible { outline: 2px solid var(--mauve); outline-offset: 2px; }
@media (min-width: 640px) { .hamburger { display: none; } }

/* ── Logo ── */
.logo-link {
  display: inline-flex; align-items: center;
  color: var(--dark); transition: opacity var(--t);
}
.logo-link:hover { opacity: .75; }
.logo-link:focus-visible { outline: 2px solid var(--mauve); outline-offset: 4px; border-radius: 2px; }
.wordmark {
  font-family: var(--serif);
  font-size: clamp(1.375rem, .75rem + 3.5vw, 3.75rem);
  font-weight: 700; font-style: italic;
  line-height: 1.15; letter-spacing: .01em;
  color: var(--mauve-dark); white-space: nowrap;
}
.wordmark .amp { color: var(--gold-dark); font-weight: 400; }
.subline {
  display: block; font-family: var(--ui);
  font-size: var(--tx-sm);
  font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  line-height: 1.25; color: var(--mid); text-align: center; pointer-events: none;
}

/* ── Search ── */
.srch-bar { display: none; width: clamp(140px, 22vw, 300px); min-width: 0; }
.icon-nav-search { display: flex; }
@media (min-width: 768px) {
  .icon-nav-search { display: none; pointer-events: none; }
  .srch-bar { display: block; }
}
.srch-form {
  display: flex; align-items: center; gap: .5rem;
  width: 100%; min-height: 40px;
  padding-inline: .25rem; padding-block: .375rem;
  border: none; border-bottom: 1.5px solid var(--border);
  background: none; transition: border-color var(--t);
}
.srch-form:focus-within { border-bottom-color: var(--mauve); }
.srch-form i { font-size: var(--tx-base); color: var(--mid); flex-shrink: 0; pointer-events: none; }
.srch-input {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  font-family: var(--ui); font-size: var(--tx-sm);
  color: var(--dark);
}
.srch-input::placeholder { color: var(--mid); opacity: 1; font-style: italic; }
.srch-submit {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; width: 28px; height: 28px;
  background: none; border: none;
  color: var(--mid); font-size: var(--tx-base); cursor: pointer;
  transition: color var(--t);
}
.srch-submit:hover { color: var(--mauve-dark); }
.srch-submit:focus-visible { outline: 2px solid var(--mauve); outline-offset: 2px; }

/* ── Icon nav ── */
.icon-nav { display: flex; align-items: center; }
.icon-list { display: flex; align-items: center; gap: .25rem; list-style: none; }
.icon-item { position: relative; }
.icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: none; border: none; border-radius: 6px;
  color: var(--dark); font-size: var(--tx-md);
  cursor: pointer; position: relative;
  transition: background var(--t);
}
.icon-btn:hover { background: var(--blush); color: var(--mauve-dark); }
.icon-btn:focus-visible { outline: 2px solid var(--mauve); outline-offset: 2px; }
@media (min-width: 1024px) { .icon-btn { width: 48px; height: 48px; font-size: var(--tx-lg); } }

/* Cart badge */
.badge,
.wish-badge {
  position: absolute; top: 2px; right: 2px;
  min-width: 18px; height: 18px; padding-inline: 4px;
  background: var(--mauve-dark); color: var(--white);
  font-family: var(--ui); font-size: .625rem; font-weight: 700;
  border-radius: 9px; border: 1px solid rgba(250,247,242,.5);
  pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}

/* ── Flyout panels ── */
.panel {
  position: absolute; top: calc(100% + 4px); left: 0;
  min-width: 220px; z-index: 300;
  background: var(--white);
  border: 1px solid var(--border); border-top: 2px solid var(--mauve-dark);
  border-radius: 8px; box-shadow: var(--sh-md);
  padding: 1rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 320ms ease, visibility 320ms linear;
}
.panel::before {
  content: ''; position: absolute;
  top: -.5rem; left: 0; right: 0; height: .5rem;
}
.c-icons .panel { left: auto; right: 0; }
.panel[aria-hidden="false"] { opacity: 1; visibility: visible; pointer-events: auto; }

.panel-ttl {
  font-family: var(--ui); font-size: var(--tx-sm); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--mauve-dark); margin-bottom: .75rem; padding-bottom: .625rem;
  border-bottom: 1px solid var(--blush);
}
.panel-links { display: flex; flex-direction: column; gap: .125rem; list-style: none; }
.panel-link {
  display: flex; align-items: center; gap: .625rem;
  padding: .75rem .625rem; border-radius: 6px;
  font-family: var(--ui); font-size: var(--tx-sm); font-weight: 500;
  color: var(--dark); white-space: nowrap;
  transition: background var(--t), color var(--t);
}
.panel-link:hover { background: var(--blush-light); color: var(--mauve-dark); padding-left: 1rem; }
.panel-link:focus-visible { outline: 2px solid var(--mauve); outline-offset: -2px; }
.panel-link i { font-size: var(--tx-sm); color: var(--mid); width: 16px; text-align: center; flex-shrink: 0; }
.panel-sep { height: 1px; background: var(--border); margin-block: .5rem; border: none; }
.cart-cta {
  display: flex; align-items: center; justify-content: center;
  width: 100%; margin-top: .75rem; padding: .625rem 1rem;
  background: linear-gradient(135deg, var(--mauve-light), var(--mauve-dark));
  color: var(--white);
  font-family: var(--ui); font-size: var(--tx-sm); font-weight: 600;
  border-radius: 4px; transition: opacity var(--t);
}
.cart-cta:hover { opacity: .88; }
.cart-cta:focus-visible { outline: 2px solid var(--mauve); outline-offset: 2px; }
.panel .srch-form { width: 100%; padding-inline: 0; }

/* ══════════════════════════════════════════════════════════════
   BAR 3 — PRIMARY NAV
   Mobile  (320px): hidden — drawer handles nav
   640px+  : visible — 4+4 stacked two-row grid (25% each col)
   840px+  : single full-width row
   ══════════════════════════════════════════════════════════════ */
.pnav {
  display: none; width: 100%;
  background: var(--dark);
  border-bottom: 1px solid rgba(255,255,255,.08);
  overflow-x: clip; overflow-y: visible; position: relative;
}
@media (min-width: 640px) { .pnav { display: block; } }

.pnav .inner {
  padding-block: 0; padding-inline: 0;
  overflow-x: clip; overflow-y: visible;
}
.pnav nav { width: 100%; }

/* 640px: 4-col × 2-row grid */
.nav-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto;
  list-style: none; width: 100%;
}
.nav-item { position: relative; }
/* Row divider between rows 1 and 2 */
.nav-item:nth-child(5) { border-top: 1px solid rgba(255,255,255,.1); }

.nav-link,
.nav-btn {
  display: flex; align-items: center; justify-content: center;
  gap: .3rem; width: 100%;
  min-height: 44px; padding-block: .5rem;
  padding-inline: clamp(.5rem, 1vw, .875rem);
  font-family: var(--ui); font-size: var(--tx-base); font-weight: 500;
  letter-spacing: .02em; color: rgba(255,255,255,.78);
  background: none; border: none; cursor: pointer;
  white-space: normal; text-align: center;
  position: relative;
  transition: background var(--t), color var(--t);
}
.nav-link:hover, .nav-btn:hover { background: rgba(255,255,255,.06); color: var(--cream); }
.nav-link:focus-visible, .nav-btn:focus-visible { outline: 2px solid var(--mauve-light); outline-offset: -3px; }

/* 840px: single full-width row */
@media (min-width: 840px) {
  .nav-list {
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: auto;
  }
  .nav-item:nth-child(5) { border-top: none; }
  .nav-link, .nav-btn {
    height: 52px; min-height: unset;
    padding-block: 0; white-space: nowrap;
  }
}

/* Active underline */
.nav-link::after, .nav-btn::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px; background: var(--gold-light);
  border-radius: 1px; opacity: 0;
  transition: opacity var(--t);
}
.nav-link:hover::after, .nav-btn:hover::after { opacity: 1; }
.nav-btn[aria-expanded="true"]::after { opacity: 1; }
.nav-link.sale { color: var(--rose-light); font-weight: 500; }
.nav-link.sale:hover { color: var(--white); }

/* Chevron */
.nav-chev {
  font-size: var(--tx-sm); color: rgba(255,255,255,.5);
  flex-shrink: 0; pointer-events: none;
  transition: transform 200ms ease;
}
.nav-btn[aria-expanded="true"] .nav-chev { transform: scaleY(-1); }

/* Dropdowns */
.dd {
  position: absolute; top: calc(100% + 2px); left: 50%;
  transform: translateX(-50%);
  z-index: 400; min-width: 225px;
  background: var(--white);
  border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--sh-md); padding: .375rem 0;
  list-style: none;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--t), visibility var(--t);
}
.dd[aria-hidden="false"] { opacity: 1; visibility: visible; pointer-events: auto; }
.dd-link {
  display: flex; align-items: center; gap: .5rem;
  padding: 1rem 1.125rem;
  font-family: var(--ui); font-size: var(--tx-base); font-weight: 500;
  color: var(--dark); white-space: nowrap; text-transform: capitalize;
  transition: background var(--t), color var(--t);
}
.dd-link:hover { background: var(--blush-light); color: var(--mauve-dark); padding-left: 1.5rem; }
.dd-link:focus-visible { outline: 2px solid var(--mauve); outline-offset: -2px; }
.dd-link i { font-size: var(--tx-sm); color: var(--mid); width: 14px; text-align: center; flex-shrink: 0; }
.dd-sep { height: 1px; background: var(--border); margin-block: .375rem; list-style: none; }

/* ══════════════════════════════════════════════════════════════
   MOBILE DRAWER
   ══════════════════════════════════════════════════════════════ */
.drw-overlay {
  display: none; position: fixed; inset: 0;
  z-index: 500; background: var(--overlay); opacity: 0;
  transition: opacity var(--t);
}
.drw-overlay.is-open { display: block; opacity: 1; }

/* Drawer — CSS grid: [header] [body fills] [footer] */
.drw {
  position: fixed; top: 0; right: 0; bottom: 0;
  z-index: 600; width: min(300px, 88vw); max-height: 100dvh;
  background: var(--white); box-shadow: var(--sh-lg);
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "drw-hdr"
    "drw-body"
    "drw-ftr";
  overflow: hidden;
  transform: translateX(100%); visibility: hidden;
  transition: transform 300ms cubic-bezier(.32,.72,0,1), visibility 300ms;
}
@media (prefers-reduced-motion: reduce) {
  .drw,
  .drw-link,
  .acc-btn,
  .acc-link,
  .drw-acct-link,
  .drw-social-link { transition: none; }
}
.drw.is-open { transform: translateX(0); visibility: visible; }

/* Drawer header */
.drw-hdr {
  grid-area: drw-hdr;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "drw-brand drw-close-btn";
  align-items: center;
  gap: .75rem;
  padding: 1.5rem clamp(.875rem, 4vw, 1.25rem);
  background: linear-gradient(160deg, var(--dark) 0%, var(--brown-darkest) 100%);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.drw-logo-grp {
  grid-area: drw-brand;
  display: flex; flex-direction: column; gap: .125rem;
}
.drw-wordmark {
  font-family: var(--serif);
  font-size: clamp(1.125rem, 1.2rem + 0.8vw, 1.625rem);
  font-weight: 700; font-style: italic;
  line-height: 1.1; letter-spacing: .01em;
  color: var(--white);
}
.drw-wordmark .amp { color: var(--gold-light); font-weight: 400; }
.drw-wordmark:hover { opacity: .75; }
.drw-wordmark:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; border-radius: 2px; }
.drw-subline {
  font-family: var(--ui);
  font-size: var(--tx-sm);
  font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-light); pointer-events: none;
}
.drw-close {
  grid-area: drw-close-btn;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; width: 44px; height: 44px;
  background: none; border: none; border-radius: 6px;
  color: rgba(255,255,255,.85); font-size: var(--tx-md); cursor: pointer;
  transition: background var(--t);
}
.drw-close:hover { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.25); }
.drw-close:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }

/* Drawer body */
.drw-body {
  grid-area: drw-body;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--cream);
}
.drw-nav-list { list-style: none; padding: 0; margin: 0; }

.drw-link {
  display: flex; align-items: center; gap: .625rem;
  width: 100%; padding: 1rem clamp(.875rem, 4vw, 1.25rem);
  font-family: var(--ui); font-size: var(--tx-base); font-weight: 500;
  color: var(--dark);
  border-bottom: 1px solid var(--border);
  transition: background 320ms ease, color 320ms ease, padding-left 320ms ease;
}
.drw-link:hover { background: var(--blush-light); color: var(--mauve-dark); padding-left: 1.625rem; }
.drw-link:focus-visible { outline: 2px solid var(--mauve); outline-offset: -2px; }
.drw-link i { font-size: var(--tx-sm); color: var(--mid); flex-shrink: 0; width: 16px; text-align: center; }
.drw-link.sale { color: var(--sale-red); }

/* Accordion */
.acc-item { border-bottom: 1px solid var(--blush); }
.drw-nav-list > li:last-child > .drw-link,
.drw-nav-list > li:last-child.acc-item { border-bottom: none; }

.acc-btn {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 1rem clamp(.875rem, 4vw, 1.25rem);
  font-family: var(--ui); font-size: var(--tx-base); font-weight: 500;
  color: var(--dark); background: none; border: none;
  cursor: pointer; text-align: left;
  transition: background 320ms ease, color 320ms ease;
}
.acc-btn:hover { background: var(--blush-light); color: var(--mauve-dark); }
.acc-btn:focus-visible { outline: 2px solid var(--mauve); outline-offset: -2px; }
.acc-chev { font-size: var(--tx-sm); color: var(--mid); flex-shrink: 0; pointer-events: none; transition: transform 200ms ease; }
.acc-btn[aria-expanded="true"] .acc-chev { transform: scaleY(-1); }

/* Accordion panel — CSS grid row animation */
.acc-panel {
  display: grid; grid-template-rows: 0fr;
  overflow: hidden; background: var(--cream-dark);
  transition: grid-template-rows 250ms ease;
}
@media (prefers-reduced-motion: reduce) { .acc-panel { transition: none; } }
.acc-panel.is-open { grid-template-rows: 1fr; }
.acc-inner { overflow: hidden; }

.acc-link {
  display: flex; align-items: center; gap: .625rem;
  padding: .75rem clamp(1.25rem, 5vw, 1.75rem);
  font-family: var(--ui); font-size: var(--tx-sm); font-weight: 500;
  color: var(--dark); text-transform: capitalize;
  border-bottom: 1px solid var(--border);
  transition: background 320ms ease, color 320ms ease, padding-left 320ms ease;
}
.acc-link:hover { background: var(--blush-light); color: var(--mauve-dark); padding-left: 2.25rem; }
.acc-link:focus-visible { outline: 2px solid var(--mauve); outline-offset: -2px; }
.acc-link i { font-size: var(--tx-sm); color: var(--mid); flex-shrink: 0; width: 14px; text-align: center; }
.acc-link.view-all { font-weight: 600; color: var(--mauve-dark); border-bottom: none; }
.acc-link.view-all i { color: var(--mauve); }

/* Drawer footer — CSS grid */
.drw-ftr {
  grid-area: drw-ftr;
  display: grid;
  grid-template-rows: auto auto;
  grid-template-areas:
    "drw-acct"
    "drw-social";
  gap: 1rem;
  padding: 1rem clamp(.875rem, 4vw, 1.25rem);
  background: linear-gradient(160deg, var(--dark) 0%, var(--brown-darkest) 100%);
  border-top: 2px solid var(--mauve);
}
.drw-acct-list {
  grid-area: drw-acct;
  display: flex; flex-direction: column; gap: .25rem;
  list-style: none;
}
.drw-acct-link {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .25rem;
  font-family: var(--ui); font-size: var(--tx-base); font-weight: 500;
  color: rgba(255,255,255,.85);
  transition: color 320ms ease;
}
.drw-acct-link:hover { color: var(--gold-light); }
.drw-acct-link:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; border-radius: 2px; }
.drw-acct-link i { font-size: var(--tx-base); color: rgba(255,255,255,.5); flex-shrink: 0; width: 16px; text-align: center; }

.drw-social {
  grid-area: drw-social;
  display: flex; align-items: center; gap: .25rem;
  list-style: none;
}
.drw-social-link {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 6px;
  color: rgba(255,255,255,.6); font-size: var(--tx-md);
  transition: background 320ms ease, color 320ms ease;
}
.drw-social-link:hover { background: rgba(255,255,255,.08); color: var(--gold-light); }
.drw-social-link:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }


/* ============================================================
   HERO — 50/50 split, 3D card carousel
   Mobile  : carousel fills hero, editorial overlays centred
   768px+  : 2-col grid — editorial left | carousel right
============================================================ */
/* ============================================================
       HERO SHELL
       Mobile  : carousel fills hero, editorial overlays centred
       768px+  : 2-col grid — editorial left | carousel right
    ============================================================ */
    .bb-hero {
      position: relative;
      width: 100%;
      height: 80svh;
      min-height: 480px;
      isolation: isolate;
    }
    @media (min-width: 768px) {
      .bb-hero {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
        grid-template-areas: "editorial carousel";
        height: 80vh;
        height: 80dvh;
        min-height: 520px;
        max-height: 960px;
      }
    }

    /* ============================================================
       EDITORIAL PANEL
       Mobile  : absolute overlay centred over carousel, scrim bg
       768px+  : left grid cell, grid layout for content stack
    ============================================================ */
    .bb-hero__editorial {
      position: absolute;
      inset: 0;
      z-index: 10;
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: auto auto auto auto auto;
      grid-template-areas:
        "eyebrow"
        "wordmark"
        "rule"
        "tagline"
        "ctas";
      align-content: center;
      justify-items: center;
      text-align: center;
      padding: 2rem 1.75rem;
      pointer-events: none;
      background: radial-gradient(
        ellipse at center,
        rgba(61,47,40,.42) 0%,
        rgba(61,47,40,.72) 100%
      );
    }
    .bb-hero__editorial > * { pointer-events: auto; }

    @media (min-width: 768px) {
      .bb-hero__editorial {
        grid-area: editorial;
        position: relative;
        inset: auto;
        align-content: center;
        justify-items: center;
        text-align: center;
        padding: clamp(3rem, 8vw, 5rem) clamp(2rem, 6vw, 4.5rem);
        background: linear-gradient(160deg, var(--white) 0%, var(--cream) 45%, var(--blush-light) 100%);
        overflow: hidden;
        pointer-events: auto;
      }
      .bb-hero__editorial::before {
        content: '';
        position: absolute; top: -80px; right: -80px;
        width: 300px; height: 300px; border-radius: 50%;
        background: radial-gradient(circle, rgba(184,123,140,.13) 0%, transparent 70%);
        pointer-events: none; filter: blur(24px);
      }
      .bb-hero__editorial::after {
        content: '';
        position: absolute; bottom: -60px; left: -60px;
        width: 220px; height: 220px; border-radius: 50%;
        background: radial-gradient(circle, rgba(212,165,116,.11) 0%, transparent 70%);
        pointer-events: none; filter: blur(18px);
      }
    }

    /* Grid area assignments — editorial children */
    .bb-hero__eyebrow  { grid-area: eyebrow; }
    .bb-hero__wordmark { grid-area: wordmark; }
    .bb-hero__rule     { grid-area: rule; }
    .bb-hero__tagline {
      grid-area: tagline;
      font-family: var(--body);
      font-size: clamp(1rem, 4vw, 1.375rem);
      font-style: italic;
      font-weight: 500;
      line-height: 1.4;
      color: rgba(250,247,242,.82);
      padding-bottom: clamp(.75rem, 2vw, 1.25rem);
      margin-bottom: 14px;
    }
    @media (min-width: 768px) {
      .bb-hero__tagline { color: var(--dark-light); }
    }

    /* Eyebrow — gold on mobile (over dark), mid on desktop */
    .bb-hero__eyebrow {
      font-family: var(--ui);
      font-size: var(--tx-xs);
      font-weight: 500;
      letter-spacing: 0.26em;
      text-transform: uppercase;
      color: var(--gold-light);
      margin-bottom: clamp(0.75rem, 2vw, 1.375rem);
    }
    @media (min-width: 768px) {
      .bb-hero__eyebrow { color: var(--mid); }
    }

    /* Wordmark — white on mobile, dark on desktop */
    .bb-hero__wordmark {
      font-family: var(--serif);
      font-size: clamp(2.75rem, 10vw, 6rem);
      font-weight: 700;
      font-style: normal;
      line-height: 1.0;
      letter-spacing: -0.02em;
      color: var(--white);
      padding-bottom: 0.2em;
    }
    .bb-hero__wordmark .amp {
      color: var(--mauve-light);
      font-weight: 400;
    }
    @media (min-width: 768px) {
      .bb-hero__wordmark { color: var(--dark); font-size: clamp(3rem, 6vw, 6rem); }
      .bb-hero__wordmark .amp { color: var(--mauve-dark); }
    }

    /* Decorative rule — soft on mobile, mauve on desktop */
    .bb-hero__rule {
      display: flex;
      align-items: center;
      gap: 0.875rem;
      width: 100%;
      max-width: 200px;
      padding-top: clamp(0.5rem, 1.5vw, 1rem);
      padding-bottom: clamp(0.875rem, 2.5vw, 1.75rem);
      margin-inline: auto;
    }
    .bb-hero__rule::before,
    .bb-hero__rule::after {
      content: '';
      flex: 1; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(250,247,242,.4));
    }
    .bb-hero__rule::after {
      background: linear-gradient(90deg, rgba(250,247,242,.4), transparent);
    }
    .bb-hero__rule-gem {
      width: 7px; height: 7px;
      background: var(--gold);
      transform: rotate(45deg);
      flex-shrink: 0;
    }
    @media (min-width: 768px) {
      .bb-hero__rule::before { background: linear-gradient(90deg, transparent, var(--mauve-light)); }
      .bb-hero__rule::after  { background: linear-gradient(90deg, var(--mauve-light), transparent); }
    }

    /* CTAs */
    .bb-hero__ctas {
      grid-area: ctas;
      justify-self: stretch;
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 1rem;
      width: 100%;
      max-width: 360px;
      margin-inline: auto;
    }
    .bb-hero__ctas .bb-btn {
      width: 100%;
      justify-content: center;
    }

    /* ============================================================
       CAROUSEL STAGE
       Mobile  : absolute, fills entire hero (behind editorial)
       Desktop : right grid cell
    ============================================================ */

    /* Mobile: fills the whole hero */
    .is-draggable { cursor: grab; user-select: none; -webkit-user-select: none; }
.is-draggable.is-dragging { cursor: grabbing; }

.bb-hero__stage-wrap {
      position: absolute;
      inset: 0;
      z-index: 1;
      overflow: hidden;
      background: var(--dark);
      touch-action: pan-y;
    }

    /* Desktop: right grid cell */
    @media (min-width: 768px) {
      .bb-hero__stage-wrap {
        position: relative;
        grid-area: carousel;
        inset: auto;
        z-index: auto;
      }
    }

    .bb-hero__stage-inner {
      position: absolute;
      inset: 0;
      perspective: 900px;
      perspective-origin: 50% 50%;
      overflow: hidden;
    }
    @media (min-width: 1440px) {
      .bb-hero__stage-inner { perspective: 1100px; }
    }

    .bb-hero__stage {
      position: absolute;
      inset: 0;
      transform-style: preserve-3d;
    }

    /* ============================================================
       CARDS
       Mobile  : full-height, full-vw offsets
       768px+  : full-height, half-vw offsets
    ============================================================ */
    .c-card {
      position: absolute;
      left: 50%;
      top: 0;
      width: clamp(200px, 58vw, 340px);
      height: 100%;
      transform-origin: center center;
      border-radius: 0;
      overflow: hidden;
      background: rgba(61,47,40,.9);
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
      cursor: pointer;
      user-select: none;
      will-change: transform, opacity;
      transition:
        transform  0.55s var(--ease-std),
        opacity    0.55s var(--ease-std),
        box-shadow 0.55s var(--ease-std);
    }
    @media (prefers-reduced-motion: reduce) { .c-card { transition: none; } }

    .c-card[data-pos="0"] {
      transform: translateX(-50%) translateZ(0) scale(1);
      opacity: 1; z-index: 3; pointer-events: auto;
      box-shadow: 0 0 80px rgba(61,47,40,.6);
    }
    .c-card[data-pos="1"] {
      transform: translateX(calc(-50% + clamp(42vw, 52vw, 62vw)))
                 translateZ(-110px) rotateY(-26deg) scale(0.80);
      opacity: 0.36; z-index: 2; pointer-events: auto;
    }
    .c-card[data-pos="-1"] {
      transform: translateX(calc(-50% - clamp(42vw, 52vw, 62vw)))
                 translateZ(-110px) rotateY(26deg) scale(0.80);
      opacity: 0.36; z-index: 2; pointer-events: auto;
    }
    .c-card[data-pos="2"],
    .c-card[data-pos="-2"] {
      transform: translateX(-50%) translateZ(-280px) scale(0.56);
      opacity: 0; z-index: 1; pointer-events: none;
    }

    .c-card__img {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover; object-position: center 20%;
      transition: transform 0.6s var(--ease-out);
    }
    @media (prefers-reduced-motion: no-preference) {
      .c-card[data-pos="0"]:hover .c-card__img { transform: scale(1.03); }
    }

    .c-card::after {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(180deg, transparent 45%, rgba(61,47,40,.88) 100%);
      pointer-events: none; z-index: 1;
    }

    /* Card info — hidden on mobile, shown on desktop */
    .c-card__info {
      position: absolute; bottom: 0; left: 0; right: 0;
      padding: 0.875rem 1rem; z-index: 2;
      display: none; flex-direction: column; gap: 0.2rem;
    }
    @media (min-width: 768px) { .c-card__info { display: flex; } }

    
    .c-card__category {
      font-family: var(--ui);
      font-size: var(--tx-micro);
      font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
      color: var(--gold-light);
    }
    
    
    .c-card__footer {
      display: flex; align-items: center;
      justify-content: space-between; gap: 0.4rem;
      margin-top: 0.25rem;
    }
    .c-card__link {
      display: inline-flex; align-items: center; gap: 0.3rem;
      font-family: var(--ui); font-size: var(--tx-xs);
      font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--cream-warm);
      border-bottom: 1px solid rgba(250,247,242,.3);
      padding-bottom: 1px; white-space: nowrap;
      transition: color 0.2s, border-color 0.2s;
    }
    .c-card__link:hover { color: var(--white); border-color: rgba(250,247,242,.55); }
    .c-card__link i { font-size: 0.65em; transition: transform 0.18s var(--ease-out); }
    .c-card__link:hover i { transform: translateX(3px); }
    
    
    

    /* Dots — desktop only */
    .bb-hero__nav {
      position: absolute; bottom: 1.25rem; left: 50%;
      transform: translateX(-50%);
      z-index: 10; display: none;
    }
    @media (min-width: 768px) { .bb-hero__nav { display: flex; } }

    .carousel__dots { display: flex; gap: 8px; align-items: center; }
    .carousel__dot {
      position: relative; height: 4px; width: 4px;
      border-radius: 3px; background: rgba(255,255,255,.28);
      cursor: pointer; border: none; padding: 0;
      transition: background 0.22s var(--ease-std), width 0.22s var(--ease-std);
    }
    .carousel__dot::before {
      content: ''; position: absolute;
      inset: 50% auto auto 50%; translate: -50% -50%;
      width: 44px; height: 44px;
    }
    .carousel__dot[aria-pressed="true"] { background: var(--gold-light); width: 16px; }
    .carousel__dot:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; border-radius: 2px; }
    .carousel__btn { display: none; }

    /* Hover-to-pause indicator — desktop only */
    @media (hover: hover) {
      .bb-hero.is-paused .carousel__dots::after {
        content: '\2016'; /* ❚❚ pause symbol */
        display: inline-block;
        font-size: .625rem;
        color: rgba(255,255,255,.5);
        letter-spacing: .1em;
        margin-left: .75rem;
        vertical-align: middle;
        pointer-events: none;
      }
      .bb-hero.is-paused .carousel__dot[aria-pressed="true"] {
        opacity: .6;
      }
    }

    /* ============================================================
       DESKTOP CARD GEOMETRY — half-vw stage offsets
    ============================================================ */
    @media (min-width: 768px) {
      .c-card {
        width: clamp(200px, 36vw, 420px);
      }
      .c-card[data-pos="0"] { box-shadow: 0 0 80px rgba(61,47,40,.5); }
      .c-card[data-pos="1"] {
        transform: translateX(calc(-50% + clamp(26vw, 32vw, 38vw)))
                   translateZ(-130px) rotateY(-28deg) scale(0.84);
        opacity: 0.44;
      }
      .c-card[data-pos="-1"] {
        transform: translateX(calc(-50% - clamp(26vw, 32vw, 38vw)))
                   translateZ(-130px) rotateY(28deg) scale(0.84);
        opacity: 0.44;
      }
      .c-card[data-pos="2"],
      .c-card[data-pos="-2"] { transform: translateX(-50%) translateZ(-280px) scale(0.56); opacity: 0; }
      .c-card__info { padding: 1rem 1.25rem; }
      
    }
    @media (min-width: 1024px) {
      .c-card { width: clamp(240px, 32vw, 460px); }
      .c-card[data-pos="1"]  { transform: translateX(calc(-50% + clamp(24vw, 28vw, 34vw))) translateZ(-145px) rotateY(-31deg) scale(0.85); opacity: 0.48; }
      .c-card[data-pos="-1"] { transform: translateX(calc(-50% - clamp(24vw, 28vw, 34vw))) translateZ(-145px) rotateY(31deg) scale(0.85); opacity: 0.48; }
      .c-card__info { padding: 1.125rem 1.375rem; }
      
    }
    @media (min-width: 1280px) {
      .c-card { width: clamp(260px, 30vw, 500px); }
      .c-card[data-pos="1"]  { transform: translateX(calc(-50% + clamp(22vw, 26vw, 30vw))) translateZ(-155px) rotateY(-33deg) scale(0.86); opacity: 0.50; }
      .c-card[data-pos="-1"] { transform: translateX(calc(-50% - clamp(22vw, 26vw, 30vw))) translateZ(-155px) rotateY(33deg) scale(0.86); opacity: 0.50; }
      .c-card__info { padding: 1.25rem 1.5rem; }
    }
    @media (min-width: 1440px) {
      .c-card { width: clamp(280px, 28vw, 520px); }
      .c-card[data-pos="1"]  { transform: translateX(calc(-50% + clamp(20vw, 24vw, 28vw))) translateZ(-165px) rotateY(-35deg) scale(0.87); opacity: 0.52; }
      .c-card[data-pos="-1"] { transform: translateX(calc(-50% - clamp(20vw, 24vw, 28vw))) translateZ(-165px) rotateY(35deg) scale(0.87); opacity: 0.52; }
    }
    @media (min-width: 1536px) {
      .c-card { width: clamp(300px, 26vw, 540px); }
      .c-card[data-pos="1"]  { transform: translateX(calc(-50% + clamp(18vw, 22vw, 26vw))) translateZ(-175px) rotateY(-37deg) scale(0.88); }
      .c-card[data-pos="-1"] { transform: translateX(calc(-50% - clamp(18vw, 22vw, 26vw))) translateZ(-175px) rotateY(37deg) scale(0.88); }
    }

    /* ============================================================
       BUTTONS
    ============================================================ */


    /* ── Buttons ── */
    .bb-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      font-family: var(--ui);
      font-size: clamp(0.7rem, 1.5vw, 0.8125rem);
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      min-height: 44px;
      padding: clamp(0.6rem, 1.5vw, 0.875rem) clamp(1.5rem, 4vw, 2rem);
      border-radius: 2px;
      white-space: nowrap;
      cursor: pointer;
      transition: background 0.22s ease, color 0.22s ease,
                  transform 0.18s ease, box-shadow 0.22s ease;
    }
    .bb-btn:hover  { transform: translateY(-2px); }
    .bb-btn:active { transform: translateY(0); }
    .bb-btn:focus-visible { outline: 2px solid var(--mauve); outline-offset: 2px; }

    .bb-btn--primary {
      background: linear-gradient(135deg, var(--mauve-light), var(--mauve-dark));
      color: var(--white);
      box-shadow: 0 4px 18px rgba(157,96,115,.35);
    }
    .bb-btn--primary:hover { box-shadow: 0 8px 28px rgba(157,96,115,.45); }

    /* Ghost — light on mobile, mauve on desktop */
    .bb-btn--ghost {
      background: transparent;
      color: rgba(250,247,242,.88);
      border: 1.5px solid rgba(250,247,242,.45);
      border-radius: 2px;
    }
    .bb-btn--ghost:hover { color: var(--white); border-color: rgba(250,247,242,.8); background: rgba(250,247,242,.08); }
    .bb-btn--ghost i { transition: transform 0.18s ease; }
    .bb-btn--ghost:hover i { transform: translateX(4px); }
    @media (min-width: 768px) {
      .bb-btn--ghost { color: var(--mauve-dark); border-color: var(--mauve-light); background: transparent; }
      .bb-btn--ghost:hover { color: var(--mauve-dark); border-color: var(--mauve); background: var(--mauve-lightest); }
    }

/* ============================================================
   SALE BANNER
   ── .sale-banner        outer section, bg + circles
   ── .sale-banner__inner max-width wrapper, centred
   ── .sale-banner__grid  50/50 CSS Grid
   ──── left col          label + headline
   ──── right col         countdown + sub
============================================================ */

/* Outer section — bg, circles, min-height */
.sale-banner {
  position: relative;
  width: 100%;
  overflow: hidden;
  min-height: clamp(180px, 20vw, 240px);
  background: linear-gradient(135deg,
    var(--mauve-dark)  0%,
    var(--mauve)       50%,
    var(--mauve-light) 100%
  );
  /* Centre the inner wrapper vertically */
  display: grid;
  align-items: center;
}

/* Decorative circles — position:absolute, aria-hidden */
.sale-banner__circle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.sale-banner__circle--1 {
  width: clamp(200px, 40vw, 500px);
  height: clamp(200px, 40vw, 500px);
  background: rgba(255,255,255,.06);
  top: -25%; right: -10%;
}
.sale-banner__circle--2 {
  width: clamp(120px, 25vw, 300px);
  height: clamp(120px, 25vw, 300px);
  background: rgba(212,165,116,.18);
  bottom: -20%; left: 5%;
}
.sale-banner__circle--3 {
  width: clamp(60px, 12vw, 150px);
  height: clamp(60px, 12vw, 150px);
  background: rgba(255,255,255,.08);
  top: 10%; left: 20%;
}

/* Inner wrapper — max-width, centred, padding */
.sale-banner__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 920px;
  margin-inline: auto;
  padding: clamp(1rem, 3vw, 1.75rem) clamp(1.25rem, 4vw, 2.5rem);
}

/* 50/50 grid — mobile: single col | 768px+: two equal cols */
.sale-banner__grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  row-gap: 8px;
  justify-items: center;
  text-align: center;
}
@media (min-width: 768px) {
  .sale-banner__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    row-gap: 0;
    justify-items: center;
    align-items: center;
    text-align: center;
  }
}

/* Left col — label + headline stacked */
.sale-banner__left {
  display: grid;
  grid-template-rows: auto auto;
  row-gap: .25rem;
  align-content: center;
}

/* Right col — countdown + sub stacked */
.sale-banner__right {
  display: grid;
  grid-template-rows: auto auto;
  row-gap: .5rem;
  justify-items: center;
  text-align: center;
  align-content: center;
}


/* Separator — mobile only, hidden 768px+ */
.sale-banner__rule {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .875rem;
  width: 100%;
  max-width: 200px;
  margin-inline: auto;
  padding-block: .5rem;
}
.sale-banner__rule::before,
.sale-banner__rule::after {
  content: '';
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(250,247,242,.4));
}
.sale-banner__rule::after {
  background: linear-gradient(90deg, rgba(250,247,242,.4), transparent);
}
.sale-banner__rule-gem {
  width: 7px; height: 7px;
  background: var(--gold-light);
  transform: rotate(45deg);
}
@media (min-width: 768px) {
  .sale-banner__rule { display: none; }
  .sale-banner__countdown { padding-top: 16px; }
  .sale-banner__label { padding-bottom: 6px; }
  .sale-banner__inner { max-width: 1000px; }
}

/* ── Element styles ── */
.sale-banner__label {
  padding-bottom: 6px;
  text-align: center;
  font-family: var(--ui);
  font-size: var(--tx-xs);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-light);
}

.sale-banner__headline {
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 700;
  font-style: italic;
  line-height: .9;
  letter-spacing: -.02em;
  color: var(--white);
}
.sale-banner__headline em {
  font-style: normal;
  color: var(--gold-light);
}

/* Countdown — grid of 4 equal units */
.sale-banner__countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .75rem;
}

.countdown-unit {
  display: grid;
  grid-template-rows: auto auto;
  justify-items: center;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 3px;
  padding: .625rem .875rem;
  min-width: 52px;
}
.countdown-unit__num {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.5vw, 2rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1;
}
.countdown-unit__label {
  font-family: var(--ui);
  font-size: .55rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin-top: .25rem;
}

.sale-banner__sub {
  font-family: var(--body);
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-style: italic;
  color: rgba(255,255,255,.75);
}


/* Zigzag heights + vertical offsets via top
   Odd  (1,3): shorter, shifted UP   → top: -80px
   Even (2,4): taller,  shifted DOWN → top:  80px    */


/* Image */


/* Subtle bottom scrim */


/* ══════════════════════════════════════════════════════════════
   COMPONENT — NEW & TRENDING STRIP
   ══════════════════════════════════════════════════════════════

   Markup:
   <section.trending>
     <div.trending-inner>             ← CSS Grid: [header] [portraits]
       <header.trending-header>       ← title + shop link
         <h2.trending-title>
         <a.trending-shop>
       <ul[role=list].trending-portraits>  ← CSS Grid: portrait columns
         <li.trending-portrait>       ← individual card

   Mobile-first breakpoints:
   320px  — 1-col inner (header above) | 1 portrait
   480px  — 2-col inner (header left)  | 1 portrait visible
   768px  — 2-col inner               | 2 portraits
   1024px — 2-col inner               | 3 portraits
   1280px — 2-col inner               | 4 portraits

   Zigzag:
   margin-top on grid items works identically to flex items —
   grid rows auto-size to the tallest cell, so shorter cards
   shifting up via negative margin-top behave the same way.
   Negative margin-inline-start creates the card overlap.
   ══════════════════════════════════════════════════════════════ */

/* ── Section shell ── */
.trending {
  display: block;
  width: 100%;
  background: var(--cream);
  overflow-x: clip;
  overflow-y: visible;
  padding-block: clamp(3rem, 6vw, 5rem);
}

/* ── Inner wrapper
   Mobile  (320px): single column — header stacks above portraits
   480px+         : two columns  — header left, portraits fill right
   ── */
.trending-inner {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "header"
    "portraits";
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-inline: clamp(.5rem, 2vw, 1.5rem);
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
}
@media (min-width: 480px) {
  .trending-inner {
    grid-template-columns: clamp(160px, 20vw, 260px) 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "header portraits";
    align-items: center;
  }
}

/* ── Header ── */
.trending-header {
  grid-area: header;
  display: grid;
  grid-template-rows: auto auto;
  grid-template-areas:
    "title"
    "link";
  row-gap: .75rem;
  justify-items: center;
  text-align: center;
}


.trending-title {
  grid-area: title;
  font-family: var(--serif);
  font-size: clamp(2.5rem, 2rem + 3vw, 5rem);
  font-weight: 700;
  font-style: italic;
  line-height: 1.15;
  letter-spacing: .02em;
  color: var(--dark);
}

.trending-shop {
  grid-area: link;
  margin-top: .75rem;
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: .375rem;
  min-height: 44px;
  font-family: var(--ui);
  font-size: var(--tx-xs);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mid);
  border-bottom: 1px solid rgba(61,47,40,.2);
  padding-bottom: 2px;
  align-self: start;
  transition: color var(--t), border-color var(--t);
}
.trending-shop:hover { color: var(--dark); border-bottom-color: var(--dark); }
.trending-shop:focus-visible { outline: 2px solid var(--mauve); outline-offset: 4px; }

/* ── Portrait list
   CSS Grid replaces flex:
   - grid-template-columns: repeat(N, 1fr) = flex items with flex:1
   - margin-top on grid items works the same as on flex items for zigzag
   - negative margin-inline-start still creates card overlap
   Base (320px): 1 column, 1 card visible
   ── */
.trending-portraits {
  grid-area: portraits;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  align-items: start;
  width: 100%;
  padding-inline: 2rem;
}
@media (min-width: 480px) {
  .trending-portraits { padding-inline: 0; }
}

/* 480px+: portrait list shows 1 card but in the right column */
/* Cards revealed progressively at each breakpoint */
@media (min-width: 480px)  { .trending-portraits { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px)  { .trending-portraits { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .trending-portraits { grid-template-columns: repeat(4, 1fr); } }

/* ── Individual portrait card ── */
.trending-portrait {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(61,47,40,.35), 0 2px 8px rgba(61,47,40,.2);
  /* negative inline margin creates card overlap — same as original */
  margin-inline-start: clamp(-3rem, -4vw, -2rem);
}
.trending-portrait:first-child { margin-inline-start: 0; }

/* ── Zigzag heights + vertical offsets
   Card 1 (320px, single): no zigzag yet — margin-top: 0
   Card 1 (480px+, card 2 visible): shifts up — margin-top: -80px
   Card 2: taller, shifts down — margin-top: 80px
   Card 3: shorter, shifts up  — margin-top: -80px
   Card 4: taller, shifts down — margin-top: 80px
   ── */
.trending-portrait:nth-child(1) {
  height: clamp(360px, 55vh, 580px);
  margin-top: 0;
  z-index: 1;
}
.trending-portrait:nth-child(2) {
  height: clamp(400px, 62vh, 640px);
  margin-top: 25px;
  z-index: 2;
}
.trending-portrait:nth-child(3) {
  height: clamp(360px, 55vh, 580px);
  margin-top: -25px;
  z-index: 3;
}
.trending-portrait:nth-child(4) {
  height: clamp(400px, 62vh, 640px);
  margin-top: 25px;
  z-index: 4;
}

/* Once card 2 is visible, card 1 gets its zigzag offset */
@media (min-width: 480px) {
  .trending-portrait:nth-child(1) { margin-top: -25px; }
}

/* ── Progressive reveal
   320px  : card 1 only
   768px+ : cards 1–2
   1024px+: cards 1–3
   1280px+: cards 1–4
   ── */
.trending-portrait:nth-child(2),
.trending-portrait:nth-child(3),
.trending-portrait:nth-child(4) { display: none; }

@media (min-width: 480px)  { .trending-portrait:nth-child(2) { display: block; } }
@media (min-width: 768px)  { .trending-portrait:nth-child(3) { display: block; } }
@media (min-width: 1024px) { .trending-portrait:nth-child(4) { display: block; } }

/* ── Portrait image ── */
.t-portrait__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 1.2s ease;
}
@media (prefers-reduced-motion: reduce) { .t-portrait__img { transition: none; } }
.trending-portrait:hover .t-portrait__img { transform: scale(1.02); }

/* Subtle bottom scrim */
.trending-portrait::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(61,47,40,.3) 0%, transparent 50%);
  pointer-events: none;
}


/* ============================================================
   COLLECTIONS STRIP
   ── <section.collections-section>        outer landmark
   ── <h2.collections-heading>             visible section title
   ── <nav.collections-bar>                nav landmark
   ──── <ul[role=list].collections-list>   CSS Grid: 1col → 2col → 3col
   ──────── <li.collections-item>          list item
   ──────────── <a.collections-link>       inline-grid: label | icon

   Mobile (320px) : 1 column stacked
   480px+         : 3 columns side by side (one per collection)
   768px+         : 4 columns (adds "All Collections")
============================================================ */

.collections-section {
  display: block;
  width: 100%;
  background: linear-gradient(135deg, var(--mauve-dark) 0%, var(--mauve) 60%, var(--mauve-light) 100%);
  padding-block: clamp(1rem, 2vw, 1.5rem);
  padding-inline: clamp(.75rem, 3vw, 2rem);
}

.collections-heading {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  color: var(--white);
  text-align: center;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

/* Scrollable nav bar shell */
.collections-bar {
  display: block;
  width: 100%;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.15);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.collections-bar::-webkit-scrollbar { display: none; }

/* CSS Grid list — 1 col base → 3 col at 480px → 4 col at 768px */
.collections-list {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  gap: 1px;
  background: rgba(255,255,255,.15);
}
@media (min-width: 480px) {
  .collections-list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .collections-list { grid-template-columns: repeat(4, 1fr); }
}

/* List item fills its grid cell */
.collections-item {
  display: grid;
  background: rgba(255,255,255,.08);
}

/* Link — inline-grid: label | icon */
.collections-link {
  display: inline-grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .5rem;
  width: 100%;
  min-height: 44px;
  padding-block: clamp(.875rem, 2vw, 1.25rem);
  padding-inline: clamp(1rem, 3vw, 2rem);
  font-family: var(--ui);
  font-size: var(--tx-xs);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  transition: background var(--t), color var(--t);
}
.collections-link:hover { background: rgba(255,255,255,.15); color: var(--white); }
.collections-link:focus-visible { outline: 2px solid var(--mauve); outline-offset: -2px; z-index: 1; }
.collections-link[aria-current="page"] { background: rgba(255,255,255,.25); color: var(--white); }
.collections-link[aria-current="page"]:hover { background: rgba(255,255,255,.32); color: var(--white); }

/* Label — animated underline */
.clink__label {
  position: relative;
}
.clink__label::after {
  content: '';
  position: absolute;
  inset-block-end: -3px;
  inset-inline-start: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
}
.collections-link:hover .clink__label::after,
.collections-link:focus-visible .clink__label::after { transform: scaleX(1); }

/* Icon */
.clink__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  line-height: 1;
}

/* Motion */
@media (prefers-reduced-motion: no-preference) {
  .clink__label::after { transition: transform 260ms cubic-bezier(0.25, 0, 0.35, 1); }
  .clink__icon { transition: transform 200ms ease; }
  .collections-link:hover .clink__icon,
  .collections-link:focus-visible .clink__icon { animation: arrow-nudge 2000ms cubic-bezier(0.45, 0, 0.55, 1) infinite; }

  @keyframes arrow-nudge {
    0%   { transform: translateX(0); }
    50%  { transform: translateX(5px); }
    100% { transform: translateX(0); }
  }
}


/* ============================================================
   NEW & TRENDING — Image grid

   4-col portrait grid on desktop, cards alternate between
   two heights to give a natural rhythmic feel.
   Odd cards: taller. Even cards: shorter, offset down.
   On hover: cream panel slides up from the bottom revealing
   product name, price, and wishlist. Clean. Shoppable.

   320px  : 2-col, all same height
   768px+ : 4-col, alternating heights
   1280px+: 4-col, wider cards
============================================================ */

.nt {
  display: block;
  width: 100%;
  background: var(--cream);
  padding-block: clamp(3rem, 6vw, 5rem);
}

/* ── Section header ── */
.nt__header {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "title link";
  align-items: baseline;
  gap: 1rem;
  padding-inline: clamp(1rem, 5vw, 3rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.nt__title {
  grid-area: title;
  font-family: var(--serif);
  font-size: clamp(1.75rem, 1.25rem + 2.5vw, 3rem);
  font-weight: 700;
  font-style: italic;
  line-height: 1.1;
  color: var(--dark);
}

.nt__view-all {
  grid-area: link;
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: .375rem;
  font-family: var(--ui);
  font-size: var(--tx-xs);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mid);
  border-bottom: 1px solid rgba(61,47,40,.2);
  padding-bottom: 2px;
  white-space: nowrap;
  transition: color var(--t), border-color var(--t);
}
.nt__view-all:hover { color: var(--dark); border-bottom-color: var(--dark); }
.nt__view-all:focus-visible { outline: 2px solid var(--mauve); outline-offset: 4px; }

/* ── Grid ── */
.nt__grid {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 3px;
  row-gap: 4px;
  padding-inline: clamp(1rem, 5vw, 3rem);
  max-width: 1240px;
  margin-inline: auto;
}

/* Progressive reveal */
.nt__card:nth-child(n+4) { display: none; }

/* 480px+: 2x2 grid, 4 cards visible */
@media (min-width: 480px) {
  .nt__grid {
    grid-template-columns: repeat(2, 1fr);
    padding-inline: clamp(1rem, 5vw, 3rem);
  }
  .nt__card:nth-child(-n+4) { display: block; }
}
@media (min-width: 480px) and (max-width: 1023px) {
  .nt__card {
    height: clamp(280px, 45vw, 400px);
    align-self: auto;
  }
}

/* 1024px+: 3-col, all 6 cards */

/* ── Card ── */
.nt__card {
  position: relative;
  overflow: hidden;
  background: #ece3d8;
  /* Alternating heights via nth-child */
  height: clamp(380px, 120vw, 480px);
}

@media (min-width: 1024px) {
  .nt__grid {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
    padding-inline: clamp(1rem, 5vw, 3rem);
  }
  .nt__card:nth-child(n+1) { display: block; }
  /* Row 1: cards 1,3 tall | card 2 short — align end */
  .nt__card:nth-child(1), .nt__card:nth-child(3) { height: clamp(380px, 38vw, 520px); align-self: end; }
  .nt__card:nth-child(2)                          { height: clamp(300px, 30vw, 420px); align-self: end; }
  /* Row 2: cards 4,6 short | card 5 tall — align start */
  .nt__card:nth-child(4), .nt__card:nth-child(6)  { height: clamp(300px, 30vw, 420px); align-self: start; }
  .nt__card:nth-child(5)                          { height: clamp(380px, 38vw, 520px); align-self: start; }
}

/* Photo */
.nt__card__img-link {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
}

.nt__card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 1.2s ease;
}
.nt__card:hover .nt__card__img { transform: scale(1.04); }

/* Badge */
.nt__card__badge {
  position: absolute;
  top: .75rem;
  left: .75rem;
  z-index: 2;
  padding: .25rem .625rem;
  font-family: var(--ui);
  font-size: var(--tx-xs);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--dark);
  color: var(--gold-light);
  pointer-events: none;
}
.nt__card__badge--new  { background: var(--mauve); color: var(--white); }

/* Wishlist */
.nt__card__wish {
  position: absolute;
  top: .75rem;
  right: .75rem;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  outline: none;
  box-shadow: none;
  background: rgba(255,255,255,.88);
  color: var(--mid);
  font-size: var(--tx-sm);
  transition: background var(--t), color var(--t);
}
.nt__card__wish:hover, .nt__card__wish.wished {
  background: var(--white);
  color: var(--mauve);
}
.nt__card__wish:focus-visible { outline: 2px solid var(--mauve); outline-offset: 2px; }

/* Info panel — slides up on hover */
.nt__card__info {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 2;
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "name  price"
    "label label";
  gap: .2rem .5rem;
  padding: .875rem 1rem 1rem;
  background: #ece3d8;
  transform: translateY(0);
  transition: transform 320ms cubic-bezier(0.25, 0, 0.35, 1), box-shadow 320ms ease;
}
.nt__card:hover .nt__card__info {
  box-shadow: 0 -4px 12px rgba(61,47,40,.08);
}

.nt__card__name {
  grid-area: name;
  font-family: var(--body);
  font-size: clamp(1rem, 1.8vw, 1.375rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.2;
  color: var(--dark);
}

.nt__card__price {
  grid-area: price;
  font-family: var(--ui);
  font-size: var(--tx-sm);
  font-weight: 600;
  color: var(--dark);
  text-align: right;
  align-self: center;
}

.nt__card__label {
  grid-area: label;
  font-family: var(--ui);
  font-size: var(--tx-xs);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mid);
  margin-top: .1rem;
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .nt__card__img { transition: none; }
  .nt__card__info { transition: none; }
}


/* ============================================================
   SHOP OUR BRANDS
============================================================ */
/* ============================================================
   SHOP OUR BRANDS
   ── <section.brands>           outer landmark
   ── <header.brands__header>    title + tagline inline
   ── <nav.brands__nav>          nav landmark
   ──── <ul.brands__list>        CSS Grid — pill list
   ──────── <li.brands__item>    list item
   ──────────── <a.brands__pill> pill link

   Mobile  (320px): horizontal scroll, pills in a row
   640px+         : pills wrap naturally, centred
============================================================ */

.brands {
  display: block; /* explicit */
  width: 100%;
  background: var(--cream);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

/* ── Header — title + tagline inline ── */
.brands__header {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "title"
    "tagline";
  justify-items: center;
  gap: .375rem;
  text-align: center;
  padding-inline: clamp(1rem, 5vw, 3rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

/* 480px+: title and tagline sit inline */
@media (min-width: 480px) {
  .brands__header {
    grid-template-columns: auto auto;
    grid-template-areas: "title tagline";
    align-items: baseline;
    justify-content: center;
    gap: .625rem;
  }
  .brands__list { grid-template-columns: repeat(3, 1fr); }
}

.brands__title {
  grid-area: title;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.25rem + 1.5vw, 2.25rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--dark);
}

.brands__tagline {
  grid-area: tagline;
  font-family: var(--body);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-style: italic;
  line-height: 1.1;
  color: var(--mid);
  white-space: nowrap;
}

/* ── Nav + pill list ── */
.brands__nav {
  display: block;
  width: 100%;
  padding-inline: clamp(1rem, 5vw, 3rem);
}

/* ── Pill grid
   Mobile (320px): 2-col grid, 3 rows
   480px+        : 3-col grid, 2 rows
   768px+        : 6-col grid, 1 row — all brands in a single line
   Each cell is equal width so no brand ever overlaps another
── */
.brands__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
  gap: .75rem;
  list-style: none;
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
}


@media (min-width: 768px) {
  .brands__list {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* ── List item — fills its grid cell, centres the pill ── */
.brands__item {
  display: grid;
  justify-items: center;
}

/* ── Pill link ── */
.brands__pill {
  display: grid;
  place-items: center;
  text-align: center;
  width: 100%;
  padding: .625rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--dark);
  min-height: 44px;
  overflow: hidden;
  word-break: break-word;
  transition: background var(--t), border-color var(--t), color var(--t);
}
.brands__pill:hover {
  background: var(--cream-dark);
  border-color: var(--dark);
}
.brands__pill:focus-visible {
  outline: 2px solid var(--mauve);
  outline-offset: 2px;
}

/* ── Each brand gets its own typographic personality ── */

/* Demi — serif italic bold */
.brands__pill--demi {
  font-family: var(--serif);
  font-size: clamp(.9rem, 1.5vw, 1.125rem);
  font-weight: 700;
  font-style: italic;
  letter-spacing: .01em;
}

/* Wild Petal — ui caps tight */
.brands__pill--wild-petal {
  font-family: var(--ui);
  font-size: var(--tx-xs);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
}

/* Magnolia Lane — body italic */
.brands__pill--magnolia {
  font-family: var(--body);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 500;
  font-style: italic;
  letter-spacing: .02em;
}

/* Sweet Laurel — ui regular */
.brands__pill--sweet-laurel {
  font-family: var(--ui);
  font-size: clamp(.8rem, 1.2vw, .9375rem);
  font-weight: 400;
  letter-spacing: .06em;
}

/* Peach & Vine — serif italic */
.brands__pill--peach {
  font-family: var(--serif);
  font-size: clamp(.9rem, 1.5vw, 1.125rem);
  font-weight: 400;
  font-style: italic;
  letter-spacing: .01em;
}

/* Clover & Co. — ui medium */
.brands__pill--clover {
  font-family: var(--ui);
  font-size: clamp(.8rem, 1.2vw, .9375rem);
  font-weight: 500;
  letter-spacing: .08em;
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .brands__pill { transition: none; }
}


/* ============================================================
   CREDIT CARD CTA
============================================================ */
/* ============================================================
   CREDIT CARD CTA
   ── <section.card-cta>        outer landmark
   ── <div.card-cta__inner>     CSS Grid: 1col mobile | 2col desktop
   ──── <div.card-cta__content> left col — eyebrow, h2, sub, btn, note
   ──── <div.card-cta__visual>  right col — decorative card (aria-hidden)
   ──────── <div.card-cta__wrap>       card sizing wrapper
   ──────────── <div.card__back>       rotated back card
   ──────────── <div.card__front>      front card
   ──────────────── <div.card__logo>   brand name + sub
   ──────────────── <div.card__chip>   EMV chip
   ──────────────── <div.card__bottom> number + name

   Mobile  (320px): single col, visual above content
   768px+         : 2-col grid, text left | card right
============================================================ */

/* ── Section shell ── */
.card-cta {
  display: block;
  width: 100%;
  background: var(--cream-dark);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow-x: clip;
}

/* ── Inner grid ── */
.card-cta__inner {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: "content";
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  min-height: clamp(320px, 45vh, 560px);
}

  .card-cta__content .card-cta__visual-inline { display: none; }

/* ── Text content — left column ── */
.card-cta__content {
  grid-area: content;
  display: grid;
  grid-template-rows: auto auto auto auto auto auto;
  grid-template-areas:
    "eyebrow"
    "heading"
    "sub"
    "visual"
    "btn"
    "note";
  align-content: center;
  justify-items: center;
  text-align: center;
  row-gap: 1.25rem;
  padding: clamp(2rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4rem);
}

/* Mobile visual — sits inside content between sub and btn */
.card-cta__content .card-cta__visual-inline {
  grid-area: visual;
  display: grid;
  place-items: center;
  width: 100%;
  padding-block: 1.5rem;
}

.card-cta__eyebrow {
  grid-area: eyebrow;
  font-family: var(--ui);
  font-size: var(--tx-sm);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--mauve);
}

.card-cta__heading {
  grid-area: heading;
  font-family: var(--serif);
  font-size: clamp(2rem, 1.5rem + 3.5vw, 4rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.02em;
  color: var(--dark);
}

.card-cta__sub {
  grid-area: sub;
  font-family: var(--sans);
  font-size: var(--tx-base);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: .01em;
  color: var(--mid);
  max-width: 38ch;
}

.card-cta__btn {
  grid-area: btn;
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: .875rem 2rem;
  background: var(--dark);
  color: var(--white);
  font-family: var(--ui);
  font-size: var(--tx-sm);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1;
  border-radius: 2px;
  margin-top: .5rem;
  transition: background var(--t), color var(--t);
}
.card-cta__btn:hover { background: var(--dark-light); }
.card-cta__btn:focus-visible { outline: 2px solid var(--mauve); outline-offset: 3px; }

.card-cta__note {
  grid-area: note;
  font-family: var(--sans);
  font-size: var(--tx-sm);
  line-height: 1.5;
  color: var(--mid);
  opacity: .7;
}

/* ── Visual — right column (decorative, aria-hidden) ── */
.card-cta__visual {
  display: none;
  grid-area: visual;
  place-items: center;
  padding-block: clamp(2rem, 5vw, 3rem);
  padding-inline: clamp(1rem, 2.5vw, 2rem);
  background: var(--cream-warm);
  border-bottom: 1px solid var(--border);
  min-height: clamp(260px, 50vw, 320px);
  overflow: hidden;
  width: 100%;
}

/* ── Card sizing wrapper ── */
.card-cta__wrap {
  position: relative;
  width: min(100%, 480px);
  aspect-ratio: 85.6 / 53.98;
}

/* ── Back card ── */
.card__back {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 12px;
  transform: rotate(-6deg) translateY(8px);
  box-shadow: 0 6px 20px rgba(61,47,40,.2), 0 2px 6px rgba(61,47,40,.12);
}

/* ── Front card ── */
.card__front {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: transparent;
  border-radius: 12px;
  overflow: hidden;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "logo"
    "chip"
    "bottom";
  box-shadow: 0 8px 32px rgba(61,47,40,.22);
}

/* ── Card bg image layer (blurred at edges via pseudo-element) ── */
.card__front::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("https://images.pexels.com/photos/21517201/pexels-photo-21517201.jpeg") center/cover no-repeat;
  background-size: cover;
  border-radius: 12px;
}

/* ── Gradient overlay layer ── */
.card__front::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(61,47,40,.45);
  border-radius: 12px;
  pointer-events: none;
}

/* ── All card content above pseudo-elements ── */
.card__logo,
.card__chip,
.card__bottom { position: relative; z-index: 2; }

/* ── Card logo ── */
.card__logo {
  grid-area: logo;
  display: grid;
  grid-template-rows: auto auto;
  row-gap: 4px;
  justify-items: start;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--white);
  line-height: 1.15;
}

.card__logo-sub {
  font-family: var(--ui);
  font-size: clamp(.7rem, 1.4vw, .9375rem);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
  line-height: 1;
}

/* ── EMV chip ── */
.card__chip {
  grid-area: chip;
  align-self: center;
  width: clamp(40px, 6vw, 60px);
  height: clamp(30px, 5vw, 46px);
  background: rgba(255,255,255,.2);
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,.15);
}

/* ── Card bottom — number + name ── */
.card__bottom {
  grid-area: bottom;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: auto auto;
  row-gap: .25rem;
  text-align: right;
}

.card__number {
  font-family: var(--ui);
  font-size: clamp(.75rem, 1.8vw, 1rem);
  font-weight: 500;
  letter-spacing: .2em;
  color: rgba(255,255,255,.6);
  line-height: 1.5;
}

.card__name {
  font-family: var(--ui);
  font-size: clamp(.75rem, 1.8vw, 1rem);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.88);
  line-height: 1.5;
}

/* prefers-reduced-motion */

/* ── Card type scale — mobile (<768px) ── */
@media (max-width: 767px) {
  .card__logo      { font-size: clamp(1.125rem, 5vw, 2rem); }
  .card__logo-sub  { font-size: clamp(.625rem, 2.5vw, 1rem); }
  .card__number,
  .card__name      { font-size: clamp(.625rem, 2.5vw, 1rem); }
  .card__front     { padding: clamp(1rem, 5vw, 2rem); }
}

@media (min-width: 768px) {
  .card-cta__inner {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "content visual";
    align-items: stretch;
  }
  .card-cta__content {
    justify-items: start;
    text-align: left;
  }
  .card-cta__content .card-cta__visual-inline { display: none; }
  .card-cta__visual {
    display: grid;
    border-bottom: none;
    border-left: 1px solid var(--border);
    min-height: unset;
  }
}


/* ============================================================
   SMS SIGNUP
============================================================ */
.sms {
  display: block;
  width: 100%;
  background: var(--cream-dark);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  padding-inline: clamp(1rem, 5vw, 3rem);
}

.sms__inner {
  display: grid;
  grid-template-rows: auto auto auto auto;
  grid-template-areas:
    "eyebrow"
    "heading"
    "sub"
    "cta";
  justify-items: center;
  text-align: center;
  row-gap: .75rem;
  width: 100%;
  max-width: 540px;
  margin-inline: auto;
}

.sms__eyebrow {
  grid-area: eyebrow;
  font-family: var(--ui);
  font-size: var(--tx-xs);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--mauve);
}

.sms__heading {
  grid-area: heading;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1rem + 1.25vw, 1.875rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--dark);
}

.sms__sub {
  grid-area: sub;
  font-family: var(--sans);
  font-size: var(--tx-base);
  font-weight: 400;
  line-height: 1.6;
  color: var(--mid);
}

.sms__cta {
  grid-area: cta;
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: .4rem;
  margin-top: .5rem;
  font-family: var(--ui);
  font-size: var(--tx-sm);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dark);
  position: relative;
  padding-block: 6px;
  /* 44px touch target via padding rather than min-height */
  transition: color var(--t);
}
.sms__cta::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background: var(--dark);
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform 400ms cubic-bezier(0.25, 0, 0.35, 1);
}
.sms__cta:hover { color: var(--mauve-dark); }
.sms__cta:hover::after {
  background: var(--mauve-dark);
  transform: scaleY(1);
}
.sms__cta:focus-visible { outline: 2px solid var(--mauve); outline-offset: 3px; }
.sms__cta:focus-visible::after { transform: scaleY(1); }

@media (prefers-reduced-motion: reduce) {
  .sms__cta { transition: none; }
}


/* ============================================================
   GET THE LOOK
============================================================ */
.gtl {
  display: block; /* present */
  width: 100%;
  background: var(--cream);
  padding-block: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--border);
}

/* ── Centred header ── */
.gtl__header {
  display: grid;
  grid-template-rows: auto auto;
  grid-template-areas:
    "eyebrow"
    "title";
  justify-items: center;
  text-align: center;
  row-gap: .5rem;
  padding-inline: clamp(1rem, 5vw, 3rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.gtl__eyebrow {
  grid-area: eyebrow;
  font-family: var(--body);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-style: italic;
  color: var(--mid);
  line-height: 1.4;
}

.gtl__title {
  grid-area: title;
  font-family: var(--serif);
  font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--dark);
}

/* ── White card wrapper ── */
.gtl__wrap {
  display: block;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 8px 36px rgba(61,47,40,.13);
  overflow: hidden;
  max-width: 1200px;
  margin-inline: clamp(1rem, 5vw, 2rem);
}

/* ── Body grid ── */
.gtl__body {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "model"
    "panel";
  align-items: stretch;
}

/* ── Model photo ── */
.gtl__model {
  grid-area: model;
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  width: 100%;
  margin: 0;
}

.gtl__model img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* ── Panel ── */
.gtl__panel {
  grid-area: panel;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  grid-template-areas:
    "look-label"
    "look-name"
    "look-sub"
    "pieces"
    "shop-btn";
  align-content: center;
  justify-items: center;
  text-align: center;
  row-gap: clamp(1rem, 2.5vw, 1.5rem);
  padding: clamp(2rem, 5vw, 3rem) clamp(1.5rem, 4vw, 2.5rem);
}

.gtl__look-label {
  grid-area: look-label;
  font-family: var(--body);
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  font-style: italic;
  color: var(--mauve);
  line-height: 1.4;
  letter-spacing: .05em;
}

.gtl__look-name {
  grid-area: look-name;
  font-family: var(--serif);
  font-size: clamp(1.75rem, 1.25rem + 2vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--dark);
}

.gtl__look-sub {
  grid-area: look-sub;
  font-family: var(--sans);
  font-size: var(--tx-base);
  font-weight: 400;
  line-height: 1.65;
  color: var(--mid);
  max-width: 80ch;
  justify-self: center;
}

/* ── Pieces list ── */
.gtl__pieces {
  grid-area: pieces;
  display: grid;
  grid-template-rows: repeat(4, auto);
  gap: .75rem;
  list-style: none;
  width: 100%;
}

/* Individual piece */
.gtl__piece {
  display: grid;
  grid-template-columns: clamp(72px, 10vw, 88px) 1fr auto;
  align-items: center;
  gap: clamp(.75rem, 2vw, 1.25rem);
  padding: clamp(.625rem, 1.5vw, .875rem);
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 6px;
  transition: background var(--t), border-color var(--t), transform var(--t);
  text-align: left;
}
.gtl__piece:hover { background: #fae8e3; border-color: var(--mauve); transform: translateX(4px); }
.gtl__piece:focus-visible { outline: 2px solid var(--mauve); outline-offset: 2px; }

/* Thumbnail */
.gtl__piece-img {
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  overflow: hidden;
  background: var(--cream-dark);
  display: grid;
  place-items: center;
}
.gtl__piece-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* Text info */
.gtl__piece-info {
  display: grid;
  grid-template-rows: auto auto;
  row-gap: .2rem;
  min-width: 0;
}

.gtl__piece-cat {
  font-family: var(--sans);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--dark);
  line-height: 1.2;
}

.gtl__piece-name {
  font-family: var(--sans);
  font-size: var(--tx-sm);
  font-weight: 400;
  line-height: 1.4;
  color: var(--mid);
  overflow-wrap: break-word;
}

/* Chevron */
.gtl__piece-chevron {
  color: var(--mauve);
  font-size: var(--tx-sm);
  flex-shrink: 0;
  padding-inline-end: .5rem;
  transition: transform var(--t), color var(--t);
}
.gtl__piece:hover .gtl__piece-chevron { transform: translateX(3px); color: var(--dark); }

/* ── Shop Complete Look ── */
.gtl__shop-btn {
  grid-area: shop-btn;
  display: grid;
  grid-template-columns: auto 1fr;
  justify-content: center;
  align-items: center;
  gap: .625rem;
  width: 100%;
  min-height: 48px;
  padding: .875rem 1.5rem;
  background: var(--mauve);
  color: var(--white);
  font-family: var(--ui);
  font-size: var(--tx-sm);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: 4px;
  transition: background var(--t);
}
.gtl__shop-btn:hover { background: var(--mauve-dark); }
.gtl__shop-btn:focus-visible { outline: 2px solid var(--mauve); outline-offset: 3px; }
@media (min-width: 768px) {
  .gtl__body {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "model panel";
    min-height: 600px;
  }
  .gtl__model {
    aspect-ratio: unset;
    min-height: 100%;
  }
}

@media (min-width: 992px) {
  .gtl__body { min-height: 700px; }
}

@media (min-width: 1240px) {
  .gtl__wrap { margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .gtl__piece,
  .gtl__piece-chevron,
  .gtl__shop-btn { transition: none; }
}


/* ============================================================
   UGC FEATURE
============================================================ */
.ugc {
  display: block;
  width: 100%;
  background: var(--cream);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding-block: clamp(3rem, 6vw, 5rem);
  padding-inline: clamp(1rem, 5vw, 3rem);
}

/* ── Centred content wrapper ── */
.ugc__inner {
  display: grid;
  grid-template-rows: auto auto auto auto auto;
  grid-template-areas:
    "handle"
    "sub"
    "btn"
    "divider"
    "socials";
  justify-items: center;
  text-align: center;
  row-gap: 1.5rem;
  max-width: 860px;
  margin-inline: auto;
}

/* ── Handle heading ── */
.ugc__handle {
  grid-area: handle;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1rem + 4vw, 4.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--dark);
}

/* Mobile: break into 3 lines, hide at 640px+ */
.ugc-br { display: block; }
@media (min-width: 640px) {
  .ugc-br { display: none; }
}

/* ── Supporting copy ── */
.ugc__sub {
  grid-area: sub;
  font-family: var(--sans);
  font-size: clamp(.9375rem, .875rem + .4vw, 1.125rem);
  font-weight: 400;
  line-height: 1.65;
  color: var(--dark);
  max-width: 70ch;
}

/* ── Submit CTA ── */
.ugc__btn {
  grid-area: btn;
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-items: center;
  justify-content: center;
  gap: .375rem;
  min-height: 44px;
  padding: .9375rem 2.5rem;
  background: var(--dark);
  color: var(--white);
  font-family: var(--ui);
  font-size: var(--tx-sm);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.2;
  border-radius: 3px;
  transition: background var(--t);
}
.ugc__btn:hover { background: var(--mauve-dark); }
.ugc__btn:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

/* ── Divider + label ── */
.ugc__divider {
  grid-area: divider;
  display: grid;
  grid-template-rows: auto auto;
  justify-items: center;
  row-gap: .75rem;
}

.ugc__divider-rule {
  display: block;
  width: 48px;
  height: 1px;
  background: var(--border);
}

.ugc__divider-label {
  font-family: var(--sans);
  font-size: var(--tx-sm);
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--mid);
  line-height: 1.5;
}

/* ── Social links ── */
.ugc__socials {
  grid-area: socials;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-items: center;
  gap: .25rem;
}

@media (min-width: 480px) {
  .ugc__socials {
    grid-template-columns: repeat(3, auto);
    justify-content: center;
    gap: .25rem 1.5rem;
  }
}

/* Individual social link */
.ugc__social-link {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: .375rem;
  padding-block: 4px;
  font-family: var(--sans);
  font-size: var(--tx-sm);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--mid);
  transition: color var(--t);
}
.ugc__social-link:hover { color: var(--dark); }
.ugc__social-link:focus-visible { outline: 2px solid var(--mauve); outline-offset: 3px; border-radius: 2px; }

.ugc__social-link i {
  font-size: var(--tx-md);
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .ugc__btn,
  .ugc__social-link { transition: none; }
}


/* ============================================================
   SITE FOOTER
============================================================ */
.site-footer {
  display: block;
  width: 100%;
  background: var(--dark);
  color: var(--white);
  overflow-x: clip;
}

/* ── Main body grid ── */
.footer-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 5vw, 4rem);
  max-width: 1440px;
  margin-inline: auto;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

@media (min-width: 480px) {
  .footer-body { grid-template-columns: repeat(3, 1fr); }
  .footer-col-1 { grid-column: 1 / -1; }
}

/* ── Col 1: brand + email + socials ── */
.footer-col-1 {
  display: grid;
  grid-template-rows: auto auto auto;
  row-gap: 2.5rem;
}

/* Brand group */
.footer-brand-group {
  display: grid;
  grid-template-rows: auto auto;
  justify-items: center;
  text-align: center;
}

.footer-brand {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
  font-weight: 700;
  font-style: italic;
  letter-spacing: -.01em;
  line-height: 1.1;
  color: var(--white);
}

.footer-brand-sub {
  font-family: var(--ui);
  font-size: var(--tx-sm);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  margin-top: .375rem;
  line-height: 1.4;
  text-align: center;
}

.footer-tagline {
  font-family: var(--sans);
  font-size: var(--tx-base);
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.5;
  color: rgba(255,255,255,.55);
  margin-top: .75rem;
  max-width: 46ch;
  text-align: center;
}

/* ── Email form ── */
.footer-email-form {
  display: grid;
  grid-template-rows: auto auto;
  row-gap: .625rem;
}

.footer-email-label {
  font-family: var(--sans);
  font-size: var(--tx-xs);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.5;
  color: rgba(255,255,255,.65);
}

.footer-email-row {
  display: grid;
  grid-template-columns: 1fr auto;
}

.footer-email-input {
  padding: .5rem .875rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2);
  border-right: none;
  border-radius: 3px 0 0 3px;
  font-family: var(--sans);
  font-size: var(--tx-sm);
  color: var(--white);
  line-height: 1.5;
  min-width: 0;
}
.footer-email-input::placeholder { color: rgba(255,255,255,.35); }
.footer-email-input:focus-visible {
  outline: 2px solid rgba(255,255,255,.5);
  outline-offset: -2px;
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.5);
}

.footer-email-btn {
  display: grid;
  place-items: center;
  min-height: 38px;
  padding: .5rem 1rem;
  background: var(--white);
  color: var(--dark);
  font-family: var(--sans);
  font-size: var(--tx-sm);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1;
  border: none;
  border-radius: 0 3px 3px 0;
  outline: none;
  box-shadow: none;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity var(--t);
}
.footer-email-btn:hover { opacity: .85; }
.footer-email-btn:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }

/* ── Socials group ── */
.footer-socials-group {
  display: grid;
  grid-template-rows: auto auto;
  row-gap: .875rem;
}

/* ── Column heading — h3 ── */
.footer-col-heading {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .5rem;
  font-family: var(--sans);
  font-size: var(--tx-xs);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--white);
  padding-bottom: .25rem;
  border-bottom: 1px solid rgba(255,255,255,.15);
  margin-bottom: .75rem;
}
.footer-col-heading i { font-size: var(--tx-sm); opacity: .7; }

/* ── Social icon links ── */
.footer-social {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: .5rem;
}

.footer-social-link {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.65);
  font-size: var(--tx-md);
  transition: background var(--t), color var(--t), border-color var(--t);
}
.footer-social-link:hover { background: rgba(255,255,255,.1); color: var(--white); border-color: rgba(255,255,255,.4); }
.footer-social-link:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }

/* ── Nav columns ── */
.footer-nav-col {
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
}

/* ── Nav links ── */
.footer-links {
  display: grid;
  grid-template-rows: auto;
  row-gap: 1rem;
}

.footer-link {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  align-items: center;
  gap: .75rem;
  font-family: var(--sans);
  font-size: var(--tx-base);
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.5;
  color: rgba(255,255,255,.65);
  text-underline-offset: 6px;
  transition: color var(--t), text-decoration-color var(--t);
}
.footer-link:hover { color: var(--white); text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); }
.footer-link:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; border-radius: 2px; }

/* Arrow icon — hidden by default, appears on hover */
.footer-link i {
  font-size: .625rem;
  opacity: 0;
  flex-shrink: 0;
  transition: opacity 200ms ease, transform 200ms ease;
}
.footer-link:hover i,
.footer-link:focus-visible i { opacity: 1; }

/* ── Bottom bar ── */
.footer-bottom {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "copy"
    "legal";
  justify-items: center;
  text-align: center;
  gap: .875rem;
  padding: 1.25rem clamp(1.5rem, 5vw, 4rem);
  max-width: 1440px;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .footer-body { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .footer-col-1 { grid-column: auto; }
  .footer-bottom {
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr;
    grid-template-areas: "copy legal";
    justify-items: start;
    text-align: left;
    align-items: center;
  }
}

.footer-copy {
  grid-area: copy;
  font-family: var(--sans);
  font-size: var(--tx-xs);
  font-weight: 400;
  letter-spacing: .04em;
  line-height: 1.5;
  color: rgba(255,255,255,.35);
}

.footer-legal {
  grid-area: legal;
  display: grid;
  grid-template-columns: repeat(3, auto);
  align-items: center;
  gap: 1.25rem;
}

.footer-legal-link {
  font-family: var(--sans);
  font-size: var(--tx-xs);
  font-weight: 400;
  letter-spacing: .04em;
  line-height: 1.5;
  color: rgba(255,255,255,.35);
  transition: color var(--t);
}
.footer-legal-link:hover { color: rgba(255,255,255,.8); }
.footer-legal-link:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; border-radius: 2px; }

/* ── Arrow nudge animation ── */

@media (prefers-reduced-motion: no-preference) {
  .footer-link:hover i,
  .footer-link:focus-visible i {
    animation: arrow-nudge 2000ms cubic-bezier(0.45, 0, 0.55, 1) infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-link,
  .footer-link i,
  .footer-email-btn,
  .footer-social-link,
  .footer-legal-link { transition: none; }
}


/* ============================================================
   SCROLLBAR + SCROLL TO TOP
============================================================ */
/* ============================================================
   STYLED SCROLLBAR
   Webkit: custom track + thumb
   Firefox: scrollbar-width + scrollbar-color
============================================================ */

html {
  scrollbar-width: thin;
  scrollbar-color: var(--mauve) var(--cream);
}

html::-webkit-scrollbar { width: 6px; }
html::-webkit-scrollbar-track { background: var(--cream); }
html::-webkit-scrollbar-thumb {
  background: var(--mauve);
  border-radius: 999px;
}
html::-webkit-scrollbar-thumb:hover { background: var(--mauve-dark); }

/* ============================================================
   SCROLL TO TOP BUTTON
   ── <button.scroll-top>
   Fixed bottom-right, hidden until user scrolls down 400px
   Fades in/out via opacity + visibility
   Mauve circle with white chevron icon
============================================================ */

.scroll-top {
  position: fixed;
  bottom: clamp(1.25rem, 3vw, 2rem);
  right: clamp(1.25rem, 3vw, 2rem);
  z-index: 200;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  outline: none;
  box-shadow: 0 4px 16px rgba(61,47,40,.25);
  background: var(--mauve);
  color: var(--white);
  font-size: .875rem;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity 300ms ease,
    visibility 300ms ease,
    transform 300ms ease,
    background var(--t);
}

.scroll-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-top:hover { background: var(--mauve-dark); }
.scroll-top:focus-visible { outline: 2px solid var(--mauve); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .scroll-top { transition: opacity 300ms ease, visibility 300ms ease; transform: none; }
}
/* ════════════════════════════════════════════════════════════
   LIVE SEARCH SUGGESTIONS   prefix: .srch-suggestions
════════════════════════════════════════════════════════════ */
.srch-suggestions {
  position: absolute;
  top: calc(100% + .5rem);
  left: 0;
  right: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(61,47,40,.16);
  z-index: 600;
  overflow: hidden;
  min-width: 280px;
  max-width: 400px;
}

.srch-suggestion {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: .75rem;
  align-items: center;
  padding: .625rem .875rem;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: background 120ms ease;
}
.srch-suggestion:last-of-type { border-bottom: none; }
.srch-suggestion:hover,
.srch-suggestion.is-active { background: var(--blush-light); }
.srch-suggestion:focus-visible { outline: 2px solid var(--mauve); outline-offset: -2px; }

.srch-suggestion__img {
  width: 48px; height: 64px;
  object-fit: cover; border-radius: 4px;
  display: block;
}

.srch-suggestion__info {
  display: grid;
  row-gap: .125rem;
  min-width: 0;
}

.srch-suggestion__cat {
  font-family: var(--ui);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mid);
}

.srch-suggestion__name {
  font-family: var(--body);
  font-size: var(--tx-sm);
  font-weight: 500;
  color: var(--dark);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.srch-suggestion__price {
  font-family: var(--ui);
  font-size: var(--tx-xs);
  font-weight: 700;
  color: var(--mauve-dark);
}

.srch-suggestions__footer {
  padding: .5rem .875rem;
  border-top: 1px solid var(--border);
  background: var(--cream);
}

.srch-suggestions__all {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .5rem;
  font-family: var(--ui);
  font-size: var(--tx-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mauve-dark);
  text-decoration: none;
  transition: color 120ms ease;
}
.srch-suggestions__all:hover { color: var(--mauve); }
.srch-suggestions__all:focus-visible { outline: 2px solid var(--mauve); outline-offset: 2px; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
  .srch-suggestion, .srch-suggestions__all { transition: none; }
}

/* ════════════════════════════════════════════════════════════
   PRODUCT CARD  —  shared across shop, search, product pages
   prefix: .shp-card
════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════
   PRODUCT GRID
════════════════════════════════════════════════════ */
.shp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(.625rem, 1.5vw, 1rem);
}
@media (min-width: 768px)  { .shp-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .shp-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1536px) { .shp-grid { grid-template-columns: repeat(4, 1fr); } }

/* List mode */
.shp-grid.is-list { grid-template-columns: 1fr; gap: clamp(.5rem, 1.25vw, .75rem); }

/* Cards hidden by filter */
.shp-card[hidden] { display: none !important; }

/* CARD */
.shp-card {
  background: var(--white); border-radius: 10px;
  overflow: hidden; position: relative;
  display: flex; flex-direction: column;
  box-shadow: 0 2px 8px rgba(61,47,40,.08);
  transition: box-shadow 280ms ease, transform 280ms ease;
  /* own stacking context — transforms never bleed into siblings */
  isolation: isolate;
  /* explicit width constraint — prevents escape in any grid context */
  min-width: 0;
  width: 100%;
}
.shp-card:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }

.shp-grid.is-list .shp-card { flex-direction: row; transform: none !important; }
.shp-grid.is-list .shp-card:hover { transform: none !important; box-shadow: var(--sh-md); }

.shp-card__img-wrap {
  position: relative; aspect-ratio: 3/4; overflow: hidden;
  background: var(--cream-dark); flex-shrink: 0;
  cursor: pointer;
}
.shp-grid.is-list .shp-card__img-wrap {
  width: 120px; aspect-ratio: auto; min-height: 140px;
}
@media (min-width: 480px) {
  .shp-grid.is-list .shp-card__img-wrap { width: 160px; min-height: 180px; }
}
@media (min-width: 768px) {
  .shp-grid.is-list .shp-card__img-wrap { width: 200px; min-height: 220px; }
}

.shp-card__img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 600ms ease;
}
.shp-card:hover .shp-card__img { transform: scale(1.04); }
.shp-grid.is-list .shp-card:hover .shp-card__img { transform: none; }

/* Badges */
.shp-card__badges {
  position: absolute; top: .5rem; left: .5rem;
  display: flex; flex-direction: column; gap: .25rem;
}
.shp-badge {
  display: inline-block; padding: .1875rem .5rem;
  border-radius: 999px;
  font-family: var(--ui); font-size: var(--tx-xs);
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.4;
}
.shp-badge--new      { background: var(--mauve-dark); color: var(--white); }
.shp-badge--sale     { background: var(--sale-red);   color: var(--white); }

/* Wishlist btn */
.shp-card__wish {
  position: absolute; top: .5rem; right: .5rem;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  background: rgba(250,247,242,.88); border: none; border-radius: 50%;
  color: var(--mid); font-size: .875rem; cursor: pointer;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(61,47,40,.12);
  transition: background var(--t), color var(--t);
}
.shp-card__wish:hover,
.shp-card__wish.is-wished { color: var(--sale-red); background: var(--white); }
.shp-card__wish:focus-visible { outline: 2px solid var(--mauve); outline-offset: 2px; }

/* Card body */
.shp-card__body {
  display: flex; flex-direction: column;
  padding: clamp(.625rem, 1.5vw, .875rem); flex: 1;
}
.shp-grid.is-list .shp-card__body {
  flex-direction: row; align-items: center;
  gap: 1rem; padding: .875rem 1rem;
}

.shp-card__info { flex: 1; min-width: 0; }

.shp-card__cat {
  font-family: var(--ui); font-size: clamp(.625rem, 0.5vw + .4rem, .75rem);
  font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--mid); margin-bottom: .25rem;
}
.shp-card__name {
  font-family: var(--body); font-size: clamp(1.0625rem, 2vw + .5rem, 1.25rem);
  font-weight: 500; color: var(--dark); line-height: 1.35;
  margin-bottom: .4rem;
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  cursor: pointer;
}
.shp-card__name:hover { color: var(--mauve-dark); text-decoration: underline; text-underline-offset: 3px; }
.shp-card__prices {
  display: flex; align-items: baseline; gap: .5rem; margin-bottom: .625rem;
}
.shp-card__price {
  font-family: var(--ui); font-size: clamp(.9375rem, 1vw + .5rem, 1.0625rem);
  font-weight: 700; color: var(--mauve-dark);
}
.shp-card__price--orig {
  font-size: clamp(.75rem, 0.5vw + .5rem, .875rem); font-weight: 400;
  color: var(--mid); text-decoration: line-through;
}
.shp-card__savings {
  font-family: var(--ui); font-size: clamp(.75rem, 0.5vw + .5rem, .875rem);
  font-weight: 700; color: var(--sale-red);
}

.shp-card__add {
  display: grid; grid-template-columns: auto auto;
  justify-content: center; align-items: center; gap: .4rem;
  width: 100%; min-height: 42px;
  background: var(--dark); color: var(--white); border: none; border-radius: 6px;
  font-family: var(--ui); font-size: var(--tx-xs);
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer; transition: background var(--t); margin-top: auto;
}
.shp-card__add:hover { background: var(--mauve-dark); }
.shp-card__add:focus-visible { outline: 2px solid var(--mauve); outline-offset: 2px; }

.shp-grid.is-list .shp-card__add {
  width: auto; padding-inline: 1rem; flex-shrink: 0; margin-top: 0;
}


/* ════════════════════════════════════════════════════════════
   HEADER MINI-CART PANEL   prefix: .hdr-cart-
════════════════════════════════════════════════════════════ */
.hdr-cart-items {
  max-height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--mauve-light) transparent;
}

.hdr-cart-empty {
  display: grid;
  justify-items: center;
  gap: .5rem;
  padding: 1.25rem 0 .75rem;
  color: var(--mid);
  font-family: var(--sans);
  font-size: var(--tx-sm);
}
.hdr-cart-empty i { font-size: 1.75rem; color: var(--mauve-light); }

.hdr-cart-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: .75rem;
  align-items: start;
  padding: .625rem 0;
  border-bottom: 1px solid var(--border);
}
.hdr-cart-item:last-child { border-bottom: none; }

.hdr-cart-item__img {
  width: 56px; height: 72px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--cream);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.hdr-cart-item__img img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.hdr-cart-item__img i { color: var(--mauve-light); font-size: 1.25rem; }

.hdr-cart-item__info {
  min-width: 0;
  display: grid;
  row-gap: .125rem;
}
.hdr-cart-item__name {
  font-family: var(--body);
  font-size: var(--tx-sm);
  font-weight: 500;
  color: var(--dark);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hdr-cart-item__meta {
  font-family: var(--ui);
  font-size: .6875rem;
  color: var(--mid);
  letter-spacing: .06em;
}
.hdr-cart-item__price {
  font-family: var(--ui);
  font-size: var(--tx-xs);
  font-weight: 700;
  color: var(--mauve-dark);
  margin-top: .125rem;
}
.hdr-cart-item__qty {
  font-weight: 400;
  color: var(--mid);
}

.hdr-cart-more {
  font-family: var(--ui);
  font-size: var(--tx-xs);
  color: var(--mid);
  text-align: center;
  padding: .375rem 0 0;
  letter-spacing: .06em;
}

.hdr-cart-footer { display: grid; gap: .5rem; }

.hdr-cart-sub {
  display: grid;
  grid-template-columns: 1fr auto;
  font-family: var(--ui);
  font-size: var(--tx-sm);
  font-weight: 700;
  color: var(--dark);
  padding: .375rem 0 .125rem;
}

.cart-cta--outline {
  background: transparent;
  color: var(--mauve-dark);
  border: 2px solid var(--mauve-light);
}
.cart-cta--outline:hover { background: var(--blush-light); }

/* Fallback icon for cart/checkout/confirmation when product has no image */
.cart-fallback-icon {
  font-size: 1.75rem;
  color: var(--mauve-light);
  display: grid;
  place-items: center;
  height: 100%;
}