/* ==========================================================================
   The Mirror Craft: homepage prototype stylesheet
   Design tokens -> base/reset -> layout -> components -> sections -> responsive
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  /* Brand palette sampled directly from the client logo (assets/images/logo/).
     The monogram is #1a1713 exactly; the diamond accent is a vertical gold
     gradient running #948339 -> #bfa847 -> #ffe165 -> #ffff87. The gold scale
     below is that gradient, with one darker step added so gold can carry text
     on cream at an accessible contrast. Cream keeps the page light & airy. */
  --color-ink: #1a1713;          /* logo monogram, sampled */
  --color-ink-soft: #2b2620;
  --color-gold-dark: #806e28;    /* extrapolated darker step — text & focus rings on cream, 4.8:1 */
  --color-gold: #bfa847;         /* primary accent — logo gradient, mid */
  --color-gold-light: #dfc85a;   /* secondary accent on dark grounds — logo gradient, light */
  --color-gold-glow: #ffe165;    /* logo gradient highlight — glows & accent type on dark */
  --color-cream: #faf8f1;
  --color-cream-dim: #f2eee2;
  --color-paper: #ffffff;
  --color-line: #e5dfcd;
  --color-line-dark: #38342a;
  --color-text: #2a2620;
  --color-text-muted: #6b6255;
  --color-text-on-dark: #f3efe1;
  --color-text-on-dark-muted: #bfb8a4;
  --color-success: #4b7a5b;
  --color-sale: #a8452f;

  /* Typography follows the logo. The wordmark is a high-contrast garalde —
     Cormorant Garamond is the closest match and now carries every heading.
     The logo's tagline is a geometric sans in the Futura family; Jost matches
     it and carries the uppercase micro-typography (eyebrows, labels, tags).
     Inter stays on body/UI: prices, specs and form copy need its legibility
     at small sizes, which neither of the brand faces offers. */
  --font-display: 'Cormorant Garamond', 'Georgia', serif;
  --font-ui: 'Jost', 'Futura', 'Century Gothic', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --container-max: 1320px;
  --container-pad: clamp(1.25rem, 3.2vw, 2.75rem);

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 10px rgba(26, 23, 19, 0.06);
  --shadow-md: 0 12px 32px rgba(26, 23, 19, 0.10);
  --shadow-lg: 0 24px 64px rgba(26, 23, 19, 0.16);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-med: 340ms;
  --dur-slow: 620ms;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6.5rem;

  --header-h: 84px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
section[id], main [id] { scroll-margin-top: calc(var(--header-h) + 44px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, picture, svg { display: block; max-width: 100%; height: auto; }
/* The user-agent rule for [hidden] is a bare `display: none`, so any author
   rule that sets a display — .product-card is display:flex — silently beats it
   and element.hidden = true stops hiding anything. */
[hidden] { display: none !important; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
/*
 * `button` belongs in this reset and was missing from it. Without it every
 * button that does not paint its own surface — the drawer's close control, the
 * quantity steppers, the accordion triggers — kept the operating system's grey
 * fill and outset border, which is why a plain icon button appeared inside a
 * little box. Buttons that do paint themselves (.btn and friends) set both
 * properties already, so nothing that looked right loses anything here.
 */
button, input, textarea, select { border: none; background: none; }

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-cream);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Cormorant Garamond has a much smaller x-height than the face it replaced,
   so headings run larger and a touch looser than the equivalent would need.
   Tracking goes to 0 — the face is already tight, and negative tracking
   collapses its hairline serifs. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  color: var(--color-ink);
  letter-spacing: 0;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-gold-dark);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 1rem; top: -60px;
  background: var(--color-ink);
  color: var(--color-text-on-dark);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  z-index: 1000;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: 1rem; }

/* ---------- Layout primitives ---------- */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section { padding-block: var(--space-9); }
.section--tight { padding-block: var(--space-8); }
.section--dark { background: var(--color-ink); color: var(--color-text-on-dark); }
.section--dark h2, .section--dark h3 { color: var(--color-text-on-dark); }
.section--dim { background: var(--color-cream-dim); }

.section-head {
  max-width: 640px;
  margin-bottom: var(--space-7);
}
.section-head--center { margin-inline: auto; text-align: center; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold-dark);
  margin-bottom: var(--space-4);
}
.section--dark .eyebrow { color: var(--color-gold-light); }
h2.section-title { font-size: clamp(2.25rem, 4vw, 3.2rem); font-weight: 500; }
.section-sub {
  margin-top: var(--space-4);
  color: var(--color-text-muted);
  font-size: 1.05rem;
  max-width: 54ch;
}
.section--dark .section-sub { color: var(--color-text-on-dark-muted); }
.section-head--center .section-sub { margin-inline: auto; }

.section-foot {
  margin-top: var(--space-7);
  display: flex;
  justify-content: center;
}

/* ---------- Buttons ---------- */
.btn {
  --btn-fg: var(--color-ink);
  --btn-bg: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.9rem 1.7rem;
  border-radius: var(--radius-pill);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
  min-height: 48px;
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-icon { font-size: 0.85em; transition: transform var(--dur-med) var(--ease-out); }
.btn:hover .btn-icon.shift-right { transform: translateX(4px); }

.btn--primary {
  background: var(--color-ink);
  color: var(--color-cream);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--color-gold-dark); box-shadow: var(--shadow-md); }

.btn--gold {
  background: var(--color-gold);
  color: var(--color-ink);
}
.btn--gold:hover { background: var(--color-gold-light); box-shadow: var(--shadow-md); }

.btn--outline {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-line-dark);
}
.section--dark .btn--outline,
.btn--outline-light {
  color: var(--color-text-on-dark);
  border-color: rgba(243, 239, 225, 0.35);
}
.btn--outline:hover { border-color: var(--color-ink); background: rgba(26,23,19,0.04); }
.section--dark .btn--outline:hover,
.btn--outline-light:hover { border-color: var(--color-text-on-dark); background: rgba(243, 239, 225,0.08); }

.btn--ghost {
  background: transparent;
  color: var(--color-ink);
  padding-inline: 0.25rem;
  border-radius: var(--radius-sm);
}
.btn--ghost:hover { color: var(--color-gold-dark); }

.btn--sm { padding: 0.6rem 1.15rem; font-size: 0.85rem; min-height: 38px; }
.btn--block { width: 100%; }

.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ==========================================================================
   Announcement bar — slim, static, editorial (no marquee)
   ========================================================================== */
.announcement {
  background: var(--color-ink);
  color: var(--color-text-on-dark-muted);
  font-size: 0.8rem;
  border-bottom: 1px solid rgba(191, 168, 71, 0.22);
}
.announcement__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 42px;
  padding-block: 0.35rem;
}
.announcement__list { display: flex; align-items: center; flex-wrap: wrap; }
.announcement__item {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  letter-spacing: 0.015em;
  padding-inline: clamp(0.85rem, 1.9vw, 1.5rem);
}
.announcement__item:first-child { padding-left: 0; }
.announcement__item:not(:first-child) { border-left: 1px solid rgba(223, 200, 90, 0.24); }
.announcement__item i { color: var(--color-gold-light); font-size: 0.92em; }
.announcement__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text-on-dark);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.announcement__phone i { color: var(--color-gold-light); font-size: 0.9em; }
.announcement__phone span { color: var(--color-text-on-dark-muted); font-weight: 500; }
.announcement__phone:hover { color: var(--color-gold-light); }

@media (max-width: 900px) {
  .announcement__list { display: none; }
  .announcement__inner { justify-content: center; }
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(250, 248, 241, 0.80);
  backdrop-filter: blur(16px) saturate(1.35);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  border-bottom: 1px solid rgba(229, 223, 205, 0.55);
  transition: background var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}
.site-header.is-scrolled {
  background: rgba(250, 248, 241, 0.94);
  border-color: var(--color-line);
  box-shadow: 0 1px 0 rgba(229, 223, 205, 0.7), 0 18px 40px -26px rgba(26, 23, 19, 0.5);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: var(--header-h);
  transition: min-height var(--dur-med) var(--ease-out);
}
.site-header.is-scrolled .site-header__inner { min-height: 68px; }

/* ---- Brand lockup -------------------------------------------------------
   Both the monogram and the wordmark are cropped straight out of the client's
   approved logo, so the header is the real artwork rather than a typeset
   imitation. A hairline rule separates them, echoing the vertical stem the
   monogram already has. The tagline underneath is live text in Jost, matched
   to the geometric sans the logo uses, so it stays crisp and selectable. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  flex-shrink: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.brand:hover { opacity: 0.82; }
.brand__mark {
  width: 50px; height: 50px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(120% 120% at 50% 25%, rgba(223, 200, 90, 0.15), rgba(223, 200, 90, 0) 70%);
  transition: width var(--dur-med) var(--ease-out), height var(--dur-med) var(--ease-out);
}
/* The logo mark is a transparent PNG; contain keeps its own padding intact. */
.brand__mark img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.brand__lockup {
  display: block;
  padding-left: 0.8rem;
  border-left: 1px solid var(--color-line);
}
.brand__name {
  display: block;
  width: clamp(148px, 15vw, 190px);
  height: auto;
  transition: width var(--dur-med) var(--ease-out);
}
/* Tracked to sit under the wordmark at roughly its own width, the way the
   supplied lockup stacks them. */
.brand__tag {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.5rem;
  font-weight: 400;
  letter-spacing: 0.155em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: 6px;
  white-space: nowrap;
}
/* --light: same lockup on a dark background, swapping in the cream-ink
   artwork. Used in the footer, and ready for any future dark section. */
.brand--light .brand__lockup { border-left-color: rgba(243, 239, 225, 0.22); }
.brand--light .brand__tag { color: var(--color-text-on-dark-muted); }

/* --lg: the footer has room for the lockup at full presence. */
.brand--lg { gap: 1rem; }
.brand--lg .brand__mark { width: 62px; height: 62px; }
.brand--lg .brand__lockup { padding-left: 1rem; }
.brand--lg .brand__name { width: 226px; }
.brand--lg .brand__tag { font-size: 0.55rem; letter-spacing: 0.15em; margin-top: 7px; }

/* Shrink the lockup in step with the header when it collapses on scroll. */
.site-header.is-scrolled .brand__mark { width: 42px; height: 42px; }
.site-header.is-scrolled .brand__name { width: clamp(134px, 13vw, 168px); }

/* Header-only: the tagline drops out before it can crowd the nav. The footer
   keeps its tagline at every width, since nothing competes with it there. */
@media (max-width: 1300px) {
  .site-header .brand__tag { display: none; }
}
@media (max-width: 600px) {
  .site-header .brand { gap: 0.6rem; }
  .site-header .brand__mark,
  .site-header.is-scrolled .brand__mark { width: 38px; height: 38px; }
  .site-header .brand__lockup { padding-left: 0.6rem; }
  .site-header .brand__name,
  .site-header.is-scrolled .brand__name { width: 132px; }
  .header-actions { gap: var(--space-1); }
  .header-actions #wishlistBtn { display: none; }

  .brand--lg { gap: 0.7rem; }
  .brand--lg .brand__mark { width: 50px; height: 50px; }
  .brand--lg .brand__lockup { padding-left: 0.7rem; }
  .brand--lg .brand__name { width: 176px; }
  .brand--lg .brand__tag { font-size: 0.45rem; letter-spacing: 0.11em; }
}
@media (max-width: 380px) {
  .site-header .brand__lockup { padding-left: 0; border-left: none; }
  .site-header .brand__name,
  .site-header.is-scrolled .brand__name { width: 112px; }
  .brand--lg .brand__tag { display: none; }
}

.main-nav { display: none; }
@media (min-width: 1160px) {
  .main-nav { flex: 1; display: flex; justify-content: center; }
}
.main-nav__list { display: flex; align-items: center; gap: clamp(0.35rem, 1.1vw, 1.15rem); }
.main-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.6rem 0.55rem;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--color-text);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.main-nav__link::after {
  content: '';
  position: absolute;
  left: 50%; right: 50%;
  bottom: 0.35rem;
  height: 1.5px;
  border-radius: 2px;
  background: var(--color-gold);
  transition: left var(--dur-med) var(--ease-out), right var(--dur-med) var(--ease-out);
}
.main-nav__link:hover,
.has-mega:hover > .main-nav__link { color: var(--color-gold-dark); }
.main-nav__link:hover::after,
.has-mega:hover > .main-nav__link::after { left: 0.55rem; right: 0.55rem; }
.main-nav__link i.chev { font-size: 0.6em; margin-top: 1px; transition: transform var(--dur-fast) var(--ease-out); }
.has-mega:hover .chev,
.has-mega:focus-within .chev { transform: rotate(180deg); }

.has-mega { position: static; }
.mega-menu {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  background: var(--color-paper);
  border-top: 2px solid var(--color-gold);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: 0 34px 70px -30px rgba(26, 23, 19, 0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), visibility var(--dur-med);
  padding-block: var(--space-6) var(--space-7);
}
.has-mega:hover .mega-menu,
.has-mega:focus-within .mega-menu,
.mega-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mega-menu__grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: var(--space-8);
  align-items: stretch;
}
.mega-menu__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-7);
}
.mega-menu__col h4 {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-gold-dark);
  font-weight: 700;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-line);
}
.mega-menu__col ul { display: flex; flex-direction: column; gap: 0.1rem; }
.mega-menu__col a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.92rem;
  color: var(--color-text);
  padding: 0.5rem 0.65rem;
  margin-inline: -0.65rem;
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), padding var(--dur-fast) var(--ease-out);
}
.mega-menu__col a::after {
  content: '\2192';
  color: var(--color-gold-dark);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.mega-menu__col a:hover,
.mega-menu__col a.is-active {
  color: var(--color-gold-dark);
  background: var(--color-cream-dim);
  padding-left: 0.85rem;
}
.mega-menu__col a:hover::after,
.mega-menu__col a.is-active::after { opacity: 1; transform: translateX(0); }

/* Dynamic preview panel — updates as you hover the links */
.mega-menu__preview {
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  min-height: 260px;
  display: flex;
  align-items: flex-end;
  color: #fff;
  isolation: isolate;
}
.mega-menu__preview img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -1;
  transition: opacity var(--dur-med) var(--ease-out), transform 900ms var(--ease-out);
}
.mega-menu__preview:hover img { transform: scale(1.05); }
.mega-menu__preview::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(20,17,13,0.88) 8%, rgba(20,17,13,0.25) 62%, rgba(20,17,13,0.35) 100%);
  z-index: -1;
}
.mega-menu__preview-body { display: block; padding: var(--space-5); }
/* The product count, above the category name. Held to a small gold caps line so
   it reads as a label on the name rather than as a first sentence.
   Written as a child selector because .mega-menu__preview-body > span already
   claims every direct span below, and would otherwise win on specificity. */
.mega-menu__preview-body > .mega-menu__preview-count {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold-light);
}
.mega-menu__preview-body > .mega-menu__preview-count[hidden] { display: none; }
.mega-menu__preview-body strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
}
.mega-menu__preview-body > span {
  display: block;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.82);
  max-width: 32ch;
}
.mega-menu__preview-cta {
  display: inline-flex; align-items: center; gap: 0.5em;
  margin-top: var(--space-4);
  font-size: 0.82rem; font-weight: 600;
  color: var(--color-gold-light);
}
.mega-menu__preview-cta i { transition: transform var(--dur-fast) var(--ease-out); }
.mega-menu__preview:hover .mega-menu__preview-cta i { transform: translateX(4px); }

.header-actions { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
.header-actions__utils { display: flex; align-items: center; gap: 2px; }
@media (min-width: 1024px) {
  .header-actions__utils {
    padding-right: calc(var(--space-3) + 2px);
    margin-right: var(--space-1);
    border-right: 1px solid var(--color-line);
  }
}
.icon-btn {
  position: relative;
  width: 42px; height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: 50%;
  color: var(--color-ink);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  font-size: 1.02rem;
}
.icon-btn:hover { background: var(--color-cream-dim); color: var(--color-gold-dark); }
.icon-btn:active { transform: scale(0.92); }
@media (max-width: 1023px) {
  .icon-btn--account { display: none; }
}
.icon-btn__badge {
  position: absolute;
  top: 1px; right: 0;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--color-gold);
  color: var(--color-ink);
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-cream);
  transform: scale(0);
  transition: transform var(--dur-fast) var(--ease-out);
}
.icon-btn__badge.is-visible { transform: scale(1); }
.icon-btn.is-pulsing { animation: pop 420ms var(--ease-out); }
@keyframes pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

.btn--cta-header {
  display: none;
  letter-spacing: 0.02em;
  box-shadow: 0 10px 22px -14px rgba(191, 168, 71, 0.85);
}
@media (min-width: 1024px) {
  .btn--cta-header { display: inline-flex; }
}

.nav-toggle {
  display: inline-flex;
  width: 42px; height: 42px;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: 50%;
  color: var(--color-ink);
  transition: background var(--dur-fast) var(--ease-out);
}
.nav-toggle:hover { background: var(--color-cream-dim); }
.nav-toggle__bars { position: relative; width: 20px; height: 14px; }
.nav-toggle__bars span {
  position: absolute; left: 0; width: 100%; height: 2px;
  background: var(--color-ink); border-radius: 2px;
  transition: transform var(--dur-med) var(--ease-out), opacity var(--dur-med) var(--ease-out), top var(--dur-med) var(--ease-out);
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 6px; }
.nav-toggle__bars span:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

@media (min-width: 1160px) { .nav-toggle { display: none; } }

/* Search overlay */
.search-overlay {
  position: fixed; inset: 0;
  background: rgba(26, 23, 19, 0.7);
  backdrop-filter: blur(4px);
  z-index: 800;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 10vh var(--container-pad) 2rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-med) var(--ease-out), visibility var(--dur-med);
}
.search-overlay.is-open { opacity: 1; visibility: visible; }
.search-overlay__panel {
  background: var(--color-paper);
  border-radius: var(--radius-lg);
  width: min(640px, 100%);
  padding: var(--space-6);
  box-shadow: var(--shadow-lg);
  transform: translateY(-16px);
  transition: transform var(--dur-med) var(--ease-out);
}
.search-overlay.is-open .search-overlay__panel { transform: translateY(0); }
.search-overlay__form { display: flex; align-items: center; gap: var(--space-3); border-bottom: 2px solid var(--color-line); padding-bottom: var(--space-3); }
.search-overlay__form input {
  flex: 1;
  font-size: 1.38rem;
  font-family: var(--font-display);
  color: var(--color-ink);
}
.search-overlay__form input::placeholder { color: var(--color-text-muted); }
.search-overlay__close {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.search-overlay__close:hover { background: var(--color-cream-dim); }
.search-overlay__hints { margin-top: var(--space-4); display: flex; flex-wrap: wrap; gap: 0.5rem; }
.search-overlay__hints span { font-size: 0.75rem; color: var(--color-text-muted); padding-top: 0.4rem; }
.search-overlay__hints button {
  font-size: 0.82rem;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-pill);
  background: var(--color-cream-dim);
  color: var(--color-text);
}
.search-overlay__hints button:hover { background: var(--color-gold); color: var(--color-ink); }

/* Search: full-width panel that slides down from the top (scoped to #searchOverlay
   so the quick-view modal, which reuses .search-overlay, keeps its centered card) */
#searchOverlay { align-items: flex-start; padding: 0; }
#searchOverlay .search-overlay__panel {
  width: 100%;
  max-width: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding: var(--space-7) var(--container-pad) var(--space-6);
  transform: translateY(-100%);
}
#searchOverlay.is-open .search-overlay__panel { transform: translateY(0); }
#searchOverlay .search-overlay__form,
#searchOverlay .search-overlay__hints { max-width: 880px; margin-inline: auto; }
#searchOverlay .search-overlay__label {
  display: block;
  font-family: var(--font-ui);
  max-width: 880px;
  margin: 0 auto var(--space-3);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 600;
}

/* Mobile nav drawer */
.mobile-nav {
  position: fixed; inset: 0;
  z-index: 900;
  visibility: hidden;
}
.mobile-nav.is-open { visibility: visible; }
.mobile-nav__scrim {
  position: absolute; inset: 0;
  background: rgba(26,23,19,0.55);
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-out);
}
.mobile-nav.is-open .mobile-nav__scrim { opacity: 1; }
.mobile-nav__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(380px, 88vw);
  background: var(--color-cream);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform var(--dur-med) var(--ease-out);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.mobile-nav.is-open .mobile-nav__panel { transform: translateX(0); }
.mobile-nav__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-5);
  border-bottom: 1px solid var(--color-line);
}
/* Panel is cream, so the dark wordmark is the right variant here. */
.mobile-nav__logo { width: 168px; max-width: 60%; height: auto; display: block; }
.mobile-nav__close { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.mobile-nav__close:hover { background: var(--color-cream-dim); }
.mobile-nav__list { padding: var(--space-3) var(--space-5); }
.mobile-nav__item { border-bottom: 1px solid var(--color-line); }
.mobile-nav__link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 0;
  font-size: 1.02rem;
  font-weight: 500;
}
.mobile-nav__sub {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-med) var(--ease-out);
}
.mobile-nav__item.is-open .mobile-nav__sub { max-height: 400px; }
.mobile-nav__item.is-open .mobile-nav__link i.chev { transform: rotate(180deg); }
.mobile-nav__sub ul { padding: 0 0 1rem 0.75rem; display: flex; flex-direction: column; gap: 0.7rem; }
.mobile-nav__sub a { font-size: 0.92rem; color: var(--color-text-muted); }
.mobile-nav__foot { margin-top: auto; padding: var(--space-5); border-top: 1px solid var(--color-line); display: flex; flex-direction: column; gap: 0.75rem; }
.mobile-nav__foot-links { display: flex; gap: var(--space-4); font-size: 0.85rem; color: var(--color-text-muted); }

body.nav-locked { overflow: hidden; }

/* ==========================================================================
   Cart drawer

   Three bands that never move: a title, a scrolling list, and a summary pinned
   to the bottom of the panel. The point of a drawer over a cart page is that
   the subtotal and the Checkout button stay in view no matter how many mirrors
   are in the list — so the list is the only thing that scrolls, and it is the
   only thing given a scrollbar.
   ========================================================================== */
.cart-drawer { position: fixed; inset: 0; z-index: 950; visibility: hidden; }
.cart-drawer.is-open { visibility: visible; }
.cart-drawer__scrim {
  position: absolute; inset: 0;
  background: rgba(26,23,19,0.55);
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-out);
}
.cart-drawer.is-open .cart-drawer__scrim { opacity: 1; }
.cart-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(440px, 94vw);
  background: var(--color-paper);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform var(--dur-med) var(--ease-out);
  display: flex; flex-direction: column;
}
.cart-drawer.is-open .cart-drawer__panel { transform: translateX(0); }

/* ---- Head ---- */
.cart-drawer__head {
  position: relative;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--color-line);
  background: var(--color-paper);
}
/* The same gold edge the cart and checkout summary cards carry, so the drawer
   is recognisably the same object seen from a different screen. */
.cart-drawer__head::before {
  content: '';
  position: absolute; inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-gold), var(--color-gold-light));
}
.cart-drawer__heading { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.cart-drawer__head h2 { font-size: 1.45rem; line-height: 1.15; }
.cart-drawer__count {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.cart-drawer__close {
  flex: 0 0 auto;
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-text-muted);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.cart-drawer__close:hover { background: var(--color-cream-dim); color: var(--color-ink); }

/* ---- Empty ---- */
.cart-drawer__empty {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 0.5rem;
  padding: var(--space-6);
}
.cart-drawer__empty-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--color-cream-dim); color: var(--color-gold-dark);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.4rem; margin-bottom: var(--space-2);
}
.cart-drawer__empty p { font-family: var(--font-display); font-size: 1.32rem; color: var(--color-ink); }
.cart-drawer__empty > span { font-size: 0.88rem; color: var(--color-text-muted); max-width: 30ch; }
.cart-drawer__empty .btn { margin-top: var(--space-3); }

/* Shown for the moment between "add to cart" and the fragment coming back,
   in place of an empty-cart message the visitor has just disproved. */
.cart-drawer__skeleton { flex: 1; padding: var(--space-5); }

/* ---- Lines ----
   The drawer body is rendered by WooCommerce, so the server has already decided
   whether the empty state or the item list is present. These must therefore be
   visible on sight — gating them behind a class that only the prototype's
   in-memory cart ever set left a real cart looking empty. */
.cart-drawer__items {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-2) var(--space-5) var(--space-4);
}
.cart-item {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  column-gap: var(--space-4);
  align-items: start;
  padding: var(--space-4) 2rem var(--space-4) 0;
}
.cart-item + .cart-item { border-top: 1px solid var(--color-line); }
.cart-item__media { border-radius: var(--radius-sm); overflow: hidden; }
.cart-item__img,
.cart-item__media img {
  display: block;
  width: 72px; height: 90px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--color-cream-dim);
}
.cart-item__info { min-width: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.cart-item__name {
  font-family: var(--font-body);
  font-size: 0.94rem; font-weight: 600;
  color: var(--color-ink); line-height: 1.3;
}
.cart-item__name a { color: inherit; }
.cart-item__name a:hover { color: var(--color-gold-dark); }
/* Tighter and quieter than the same list on the cart page: this is a reminder
   of what was chosen, not the place it gets chosen. */
.cart-item__meta .variation { font-size: 0.76rem; column-gap: 0.45rem; row-gap: 0.05rem; }

.cart-item__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: 0.15rem;
}
.cart-item__qty {
  display: inline-flex; align-items: center;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  overflow: hidden;
}
.cart-item__step {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.66rem; color: var(--color-text-muted);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.cart-item__step:hover { background: var(--color-cream-dim); color: var(--color-ink); }
.cart-item__step[disabled] { opacity: 0.4; pointer-events: none; }
/* A real number input, so a phone offers a number pad and a keyboard user can
   type a quantity instead of pressing minus eleven times. The spinners are
   removed because the two buttons either side already are the spinner. */
.cart-item__qty-input {
  width: 2.4ch;
  min-width: 2.4ch;
  border: 0;
  background: none;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.86rem; font-weight: 600;
  color: var(--color-ink);
  -moz-appearance: textfield;
  appearance: textfield;
}
.cart-item__qty-input::-webkit-outer-spin-button,
.cart-item__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cart-item__qty-input:focus { outline: none; }
.cart-item__qty:focus-within { border-color: var(--color-gold); }
.cart-item__qty-fixed { font-size: 0.78rem; color: var(--color-text-muted); }

.cart-item__line {
  display: flex; flex-direction: column; align-items: flex-end;
  font-size: 0.94rem; font-weight: 700; color: var(--color-ink);
  text-align: right;
  white-space: nowrap;
}
.cart-item__line small { font-size: 0.7rem; font-weight: 400; color: var(--color-text-muted); }

/* Top right of its own line, clear of the text. It is destructive and rarely
   wanted, so it is drawn faintly and comes up to full strength on hover or
   focus. Faint rather than hidden: a control nobody can see is a control
   nobody can use, and hiding it would also mean hiding it on touch, where
   there is no hover to bring it back. */
.cart-item__remove {
  position: absolute; top: var(--space-4); right: 0;
  color: var(--color-text-muted); font-size: 0.78rem;
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0.45;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.cart-item:hover .cart-item__remove,
.cart-item__remove:focus-visible { opacity: 1; }
.cart-item__remove:hover { color: var(--color-sale); background: var(--color-cream-dim); }

/* A line waiting on the server. It stays readable and stops taking clicks. */
.cart-item.is-updating { opacity: 0.5; pointer-events: none; }

/* ---- Foot ---- */
.cart-drawer__foot {
  padding: var(--space-5);
  border-top: 1px solid var(--color-line);
  background: var(--color-cream-dim);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.cart-drawer__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
/* Direct child only. A price from WooCommerce is spans inside spans, so a bare
   descendant selector set the amount itself in small uppercase letter-spaced
   type — "RS. 109,000" as a caption rather than as the figure it is. */
.cart-drawer__row > span {
  font-family: var(--font-ui);
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.cart-drawer__row strong { font-family: var(--font-body); font-size: 1.3rem; font-weight: 700; color: var(--color-ink); }
.cart-drawer__note {
  display: flex; align-items: flex-start; gap: 0.55rem;
  font-size: 0.76rem; color: var(--color-text-muted); line-height: 1.5;
  margin-top: calc(var(--space-4) * -0.5);
}
.cart-drawer__note i { color: var(--color-gold-dark); margin-top: 0.15rem; }
.cart-drawer__actions { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.cart-drawer__actions .btn { width: 100%; }
/* Secondary by weight, not by outline: two full-width bordered pills stacked on
   each other made the drawer end in a pair of buttons of equal importance, and
   only one of them is the thing to do next. */
.cart-drawer__view {
  font-size: 0.84rem;
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
.cart-drawer__view:hover { color: var(--color-ink); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--color-ink);
  color: var(--color-text-on-dark);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  min-height: min(88vh, 820px);
}
.hero__media {
  position: relative;
  min-height: 340px;
}
.hero__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(26,23,19,0.05) 0%, rgba(26,23,19,0.55) 78%, rgba(26,23,19,0.86) 100%);
}
.hero__content {
  position: relative;
  z-index: 2;
  padding: var(--space-8) var(--container-pad) var(--space-8);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-top: -100%;
  min-height: min(88vh, 820px);
  max-width: 760px;
}
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--font-ui);
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-gold-light);
  margin-bottom: var(--space-5);
  opacity: 0; transform: translateY(14px);
}
.hero__title {
  font-size: clamp(2.7rem, 6.2vw, 4.7rem);
  font-weight: 500;
  color: #fff;
  max-width: 16ch;
  opacity: 0; transform: translateY(18px);
}
.hero__title em { color: var(--color-gold-glow); font-style: normal; }
.hero__sub {
  margin-top: var(--space-5);
  font-size: 1.1rem;
  color: var(--color-text-on-dark-muted);
  max-width: 52ch;
  opacity: 0; transform: translateY(18px);
}
.hero__cta {
  margin-top: var(--space-6);
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  opacity: 0; transform: translateY(18px);
}
.hero__meta {
  margin-top: var(--space-7);
  display: flex; flex-wrap: wrap; gap: var(--space-7);
  opacity: 0; transform: translateY(18px);
}
.hero__meta-item strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.72rem;
  color: #fff;
}
.hero__meta-item span { font-size: 0.82rem; color: var(--color-text-on-dark-muted); }

.hero.is-ready .hero__eyebrow { transition: opacity 700ms var(--ease-out) 120ms, transform 700ms var(--ease-out) 120ms; opacity: 1; transform: none; }
.hero.is-ready .hero__title { transition: opacity 800ms var(--ease-out) 240ms, transform 800ms var(--ease-out) 240ms; opacity: 1; transform: none; }
.hero.is-ready .hero__sub { transition: opacity 800ms var(--ease-out) 380ms, transform 800ms var(--ease-out) 380ms; opacity: 1; transform: none; }
.hero.is-ready .hero__cta { transition: opacity 800ms var(--ease-out) 500ms, transform 800ms var(--ease-out) 500ms; opacity: 1; transform: none; }
.hero.is-ready .hero__meta { transition: opacity 800ms var(--ease-out) 620ms, transform 800ms var(--ease-out) 620ms; opacity: 1; transform: none; }

.hero__scroll-cue {
  position: absolute;
  right: var(--container-pad);
  bottom: var(--space-6);
  z-index: 2;
  display: none;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-text-on-dark-muted);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hero__scroll-cue .line { width: 1px; height: 34px; background: linear-gradient(180deg, currentColor, transparent); animation: scrollcue 2.2s ease-in-out infinite; }
@keyframes scrollcue { 0%,100% { transform: scaleY(0.4); transform-origin: top;} 50% { transform: scaleY(1); transform-origin: top;} }

@media (min-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__scroll-cue { display: inline-flex; }
}

/* ==========================================================================
   Trust bar
   ========================================================================== */
.trust-bar { background: var(--color-paper); border-bottom: 1px solid var(--color-line); }
.trust-bar__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6) var(--space-5);
  padding-block: var(--space-7);
}
.trust-item { display: flex; gap: var(--space-4); align-items: flex-start; }
.trust-item__icon {
  flex-shrink: 0;
  width: 50px; height: 50px;
  border-radius: 50%;
  background: var(--color-cream-dim);
  color: var(--color-gold-dark);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.trust-item:hover .trust-item__icon { background: var(--color-gold); color: var(--color-ink); transform: translateY(-3px); }
.trust-item h3 { font-family: var(--font-body); font-size: 0.98rem; font-weight: 600; color: var(--color-ink); }
.trust-item p { margin-top: 0.3rem; font-size: 0.86rem; color: var(--color-text-muted); }

@media (min-width: 720px) {
  .trust-bar__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1080px) {
  .trust-bar__grid { grid-template-columns: repeat(6, 1fr); gap: var(--space-5); }
  .trust-item { flex-direction: column; text-align: left; }
}

/* ==========================================================================
   Reveal-on-scroll
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 760ms var(--ease-out), transform 760ms var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 640ms var(--ease-out), transform 640ms var(--ease-out);
}
.reveal-stagger.is-visible > * { opacity: 1; transform: none; }
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 90ms; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 180ms; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 270ms; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 360ms; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 450ms; }
.reveal-stagger.is-visible > *:nth-child(7) { transition-delay: 540ms; }
.reveal-stagger.is-visible > *:nth-child(8) { transition-delay: 630ms; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Category cards / continuous marquee
   ========================================================================== */

/* The strip plus its two arrows. Only this wrapper is positioned; the strip
   itself keeps clipping its own overflow, which is what lets the cards run off
   both screen edges while the controls stay put on top. */
.category-slider {
  position: relative;
}

.category-slider__nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: none;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  background: var(--color-paper);
  color: var(--color-ink);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
/* Shown only once there is a pointer and room for them to sit clear of the
   cards. On a phone the strip is swiped, and an arrow would cover a card. */
@media (min-width: 768px) {
  .category-slider__nav { display: grid; }
}
/* Inside the faded edge of the strip, where the cards are already dissolving,
   so the buttons never sit on top of a card a visitor is trying to read. */
.category-slider__nav--prev { left: clamp(0.75rem, 2vw, 2.5rem); }
.category-slider__nav--next { right: clamp(0.75rem, 2vw, 2.5rem); }
.category-slider__nav:hover {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-ink);
}
.category-slider__nav--prev:hover { transform: translateX(-2px); }
.category-slider__nav--next:hover { transform: translateX(2px); }
.category-slider__nav:focus-visible {
  outline: 2px solid var(--color-gold-dark);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .category-slider__nav,
  .category-slider__nav:hover { transform: none; transition: none; }
}

/* The strip sits outside .container so cards can run off both screen edges,
   which is what sells the loop as continuous rather than as a clipped grid. */
.category-marquee {
  width: 100%;
  /* Base state, and the state we stay in if JS never runs: an ordinary
     horizontal scroller. The cards stay reachable either way. */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.category-marquee::-webkit-scrollbar { display: none; }

.category-marquee__track {
  display: flex;
  gap: var(--space-5);
  width: max-content;
  padding-inline: var(--container-pad);
}
.category-marquee .category-card {
  flex: 0 0 clamp(258px, 25vw, 340px);
  scroll-snap-align: center;
}

/* JS has cloned the cards and measured one loop's worth of travel. */
.category-marquee.is-animated {
  /* clip, not hidden: hidden still makes a scroll container, so focusing a
     card that is mid-travel would let the browser scroll it into view and
     knock the track out of alignment. hidden is the fallback for old Safari. */
  overflow: hidden;
  overflow: clip;
  scroll-snap-type: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.category-marquee.is-animated .category-marquee__track {
  padding-inline: 0;
  animation: category-marquee var(--marquee-duration, 46s) linear infinite;
  will-change: transform;
}
@keyframes category-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-1 * var(--marquee-shift, 0px)), 0, 0); }
}
/* Hold still while someone is reading a card, pointing at one, or tabbing
   through them. A link that slides away under the cursor is a trap. */
.category-marquee.is-animated:hover .category-marquee__track,
.category-marquee.is-animated:focus-within .category-marquee__track {
  animation-play-state: paused;
}

/* The global reduced-motion reset collapses animations to 0.01ms, which would
   park the track at the end of its travel. Cancel the animation outright and
   hand the strip back as a scroller. */
@media (prefers-reduced-motion: reduce) {
  .category-marquee.is-animated {
    overflow: visible;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .category-marquee.is-animated .category-marquee__track {
    animation: none;
    padding-inline: var(--container-pad);
  }
}

.category-card {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  isolation: isolate;
}
.category-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out);
}
.category-card:hover img { transform: scale(1.07); }
.category-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(26,23,19,0.05) 45%, rgba(26,23,19,0.86) 100%);
  z-index: 1;
}
.category-card__body {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: var(--space-6);
  color: #fff;
}
.category-card__count {
  font-family: var(--font-ui);
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold-light);
  margin-bottom: 0.5rem;
}
.category-card__body h3 { color: #fff; font-size: 1.55rem; }
.category-card__body p {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.8);
  max-width: 40ch;
}
.category-card__link {
  margin-top: var(--space-4);
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: 0.85rem; font-weight: 600;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.4);
  padding-bottom: 2px;
}
.category-card__link i { transition: transform var(--dur-fast) var(--ease-out); }
.category-card:hover .category-card__link i { transform: translateX(5px); }

@media (min-width: 1080px) {
  .category-card { aspect-ratio: 3 / 4.1; }
}

/* ==========================================================================
   Product cards / grid
   ========================================================================== */
.product-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.chip-filter {
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-line);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text-muted);
  background: var(--color-paper);
  transition: all var(--dur-fast) var(--ease-out);
}
.chip-filter:hover { border-color: var(--color-gold); color: var(--color-ink); }
.chip-filter.is-active { background: var(--color-ink); color: var(--color-cream); border-color: var(--color-ink); }

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}
@media (min-width: 720px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .product-grid { grid-template-columns: repeat(4, 1fr); } }
.product-grid--compact { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .product-grid--compact { grid-template-columns: repeat(4, 1fr); } }

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-paper);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-5px); }

.product-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-cream-dim);
}
.product-card__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-out);
}
.product-card:hover .product-card__media img { transform: scale(1.06); }

.product-card__badges {
  position: absolute;
  top: 0.7rem; left: 0.7rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.badge {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-pill);
  color: #fff;
}
.badge--new { background: var(--color-ink); }
.badge--sale { background: var(--color-sale); }

.product-card__quick {
  position: absolute;
  right: 0.7rem; bottom: 0.7rem;
  z-index: 2;
  display: flex; gap: 0.4rem;
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.product-card:hover .product-card__quick,
.product-card:focus-within .product-card__quick { opacity: 1; transform: none; }
.circle-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.94);
  color: var(--color-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
  box-shadow: var(--shadow-sm);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.circle-btn:hover { background: var(--color-gold); transform: translateY(-2px); }
.circle-btn.is-active { background: var(--color-sale); color: #fff; }
.circle-btn.is-active i { font-weight: 900; }

.product-card__wishlist {
  position: absolute;
  top: 0.7rem; right: 0.7rem;
  z-index: 2;
}

.product-card__body { padding: var(--space-4) var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.product-card__cat { font-family: var(--font-ui); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }
.product-card__name { font-family: var(--font-display); font-size: 1.26rem; font-weight: 600; color: var(--color-ink); }
.product-card__name a::after { content: ''; position: absolute; inset: 0; }
.product-card__features { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.15rem; }
.product-card__features span {
  font-size: 0.68rem;
  color: var(--color-text-muted);
  background: var(--color-cream-dim);
  padding: 0.22rem 0.55rem;
  border-radius: var(--radius-pill);
}
.product-card__price { margin-top: 0.35rem; display: flex; align-items: baseline; gap: 0.5rem; }
.price-now { font-weight: 700; font-size: 1.05rem; color: var(--color-ink); }
.price-was { font-size: 0.85rem; color: var(--color-text-muted); text-decoration: line-through; }
.price-note { font-size: 0.7rem; color: var(--color-text-muted); }

.product-card__foot { margin-top: auto; padding-top: var(--space-4); display: flex; gap: 0.5rem; position: relative; z-index: 2; }
.add-cart-btn {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  padding: 0.65rem 0.9rem;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-cream);
  font-size: 0.82rem;
  font-weight: 600;
  transition: background var(--dur-fast) var(--ease-out);
  min-height: 42px;
}
.add-cart-btn:hover { background: var(--color-gold-dark); }
.add-cart-btn.is-added { background: var(--color-success); }
.add-cart-btn .fa-check { display: none; }
.add-cart-btn.is-added .fa-cart-shopping { display: none; }
.add-cart-btn.is-added .fa-check { display: inline-block; }

.section-foot--between { justify-content: space-between; align-items: center; }

/* ==========================================================================
   Custom order steps
   ========================================================================== */
.custom-order {
  position: relative;
}
.custom-order__wrap {
  display: grid;
  gap: var(--space-7);
}
.steps { display: flex; flex-direction: column; gap: 0; counter-reset: step; }
.step {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-top: 1px solid rgba(243, 239, 225,0.15);
}
.step:last-child { border-bottom: 1px solid rgba(243, 239, 225,0.15); }
.step__num {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid var(--color-gold);
  color: var(--color-gold-light);
  display: inline-flex; align-items: center; justify-content: center;
  /* Jost, not the display serif — Cormorant's old-style figures sit on
     uneven baselines, which reads as broken inside a numbered circle. */
  font-family: var(--font-ui);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.step h3 { color: #fff; font-size: 1.3rem; }
.step p { margin-top: 0.4rem; color: var(--color-text-on-dark-muted); font-size: 0.94rem; max-width: 52ch; }

.custom-order__panel {
  background: rgba(243, 239, 225,0.06);
  border: 1px solid rgba(243, 239, 225,0.14);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.custom-order__panel h3 { color: #fff; font-size: 1.45rem; margin-bottom: var(--space-2); }
.custom-order__panel > p { color: var(--color-text-on-dark-muted); font-size: 0.92rem; margin-bottom: var(--space-5); }

/*
 * These are the theme's own forms on a dark panel, and every rule below is
 * scoped to .form-grid for a reason: "form-row" is WooCommerce's class too,
 * used on every field of the checkout, the login screen and the address book.
 * Unscoped, this pale-on-dark treatment leaked onto all of them — which is
 * what turned the login form's checkbox into a full-width bar.
 */
.form-grid .form-row { margin-bottom: var(--space-4); }
.form-grid .form-row label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--color-text-on-dark-muted);
  margin-bottom: 0.4rem;
}
.form-grid .form-row input,
.form-grid .form-row select,
.form-grid .form-row textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(243, 239, 225,0.22);
  color: #fff;
  font-size: 0.92rem;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
/* The tick box is a control, not a text field: it must keep its own size. */
.form-grid .form-row input[type="checkbox"] { width: 18px; padding: 0; }
.form-grid .form-row input::placeholder,
.form-grid .form-row textarea::placeholder { color: rgba(243, 239, 225,0.4); }
.form-grid .form-row input:focus,
.form-grid .form-row select:focus,
.form-grid .form-row textarea:focus {
  border-color: var(--color-gold);
  background: rgba(255,255,255,0.1);
  outline: none;
}
.form-row--two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }

/* The theme forms are built from a configurable field list, so the layout has
   to cope with any run of full- and half-width rows rather than with a fixed
   pairing. A two-column grid does that: halves take one column, fulls span. */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-3); }
.form-grid > .form-row--full { grid-column: 1 / -1; }
.form-grid > .form-row--half { grid-column: span 1; }
@media (max-width: 560px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-grid > .form-row--half { grid-column: 1 / -1; }
}
.form-required { color: var(--color-gold); margin-left: 0.15rem; }
.form-row--check label { margin-bottom: 0; }
.form-check { display: flex; align-items: flex-start; gap: 0.6rem; cursor: pointer; }
.form-check input[type="checkbox"] {
  width: 18px; height: 18px; flex: 0 0 auto; margin-top: 0.15rem;
  accent-color: var(--color-gold);
}
.form-check span { font-size: 0.86rem; line-height: 1.5; }

.form-note { font-size: 0.76rem; color: var(--color-text-on-dark-muted); margin-top: var(--space-3); }
.form-success {
  display: none;
  align-items: center;
  gap: 0.6rem;
  background: rgba(75,122,91,0.16);
  border: 1px solid rgba(75,122,91,0.4);
  color: #bfe3ca;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  margin-top: var(--space-4);
}
.form-success.is-visible { display: flex; }

@media (min-width: 960px) {
  .custom-order__wrap { grid-template-columns: 1.05fr 0.95fr; align-items: start; }
}

/* ==========================================================================
   Brand story
   ========================================================================== */
.story__wrap {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}
.story__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; }
.story__media img { width: 100%; }
.story__stat {
  position: absolute;
  left: var(--space-5); bottom: var(--space-5);
  background: rgba(250, 248, 241,0.92);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-md);
}
.story__stat strong { display: block; font-family: var(--font-display); font-size: 2rem; color: var(--color-ink); }
.story__stat span { font-size: 0.78rem; color: var(--color-text-muted); }
.story__points { margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.story__point { display: flex; gap: 0.9rem; }
.story__point i { color: var(--color-gold-dark); margin-top: 0.3rem; }
.story__point h4 { font-family: var(--font-body); font-weight: 600; font-size: 0.98rem; color: var(--color-ink); }
.story__point p { font-size: 0.9rem; color: var(--color-text-muted); margin-top: 0.2rem; }

@media (min-width: 960px) {
  .story__wrap { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   Feature showcase (LED features)
   ========================================================================== */
.feature-showcase {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
.feature-tile {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}
.feature-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.feature-tile__icon {
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--color-ink);
  color: var(--color-gold-light);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
  margin-bottom: var(--space-4);
}
.feature-tile h3 { font-size: 1.22rem; }
.feature-tile p { margin-top: 0.5rem; font-size: 0.88rem; color: var(--color-text-muted); }

@media (min-width: 640px) { .feature-showcase { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .feature-showcase { grid-template-columns: repeat(3, 1fr); } }

/* ==========================================================================
   Inspiration gallery (editorial)
   ========================================================================== */
.inspo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
.inspo-tile {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
}
.inspo-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.inspo-tile:hover img { transform: scale(1.05); }
.inspo-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(26,23,19,0.75), transparent 60%); z-index: 1; }
.inspo-tile__label {
  position: absolute; left: var(--space-5); bottom: var(--space-4); z-index: 2;
  color: #fff;
}
.inspo-tile__label span { font-family: var(--font-ui); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-gold-light); }
.inspo-tile__label strong { display: block; font-family: var(--font-display); font-size: 1.38rem; font-weight: 600; margin-top: 0.2rem; }

.inspo-also {
  margin-top: var(--space-6);
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  align-items: center;
}
.inspo-also span.lbl { font-size: 0.85rem; color: var(--color-text-muted); margin-right: 0.4rem; }
.inspo-also .tag {
  font-size: 0.8rem;
  padding: 0.45rem 0.95rem;
  border-radius: var(--radius-pill);
  background: var(--color-cream-dim);
  color: var(--color-text);
}

@media (min-width: 720px) {
  .inspo-grid { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 220px); }
  .inspo-tile--a { grid-column: span 2; grid-row: span 2; }
  .inspo-tile--b { grid-column: span 2; grid-row: span 1; }
  .inspo-tile--c { grid-column: span 1; grid-row: span 1; }
  .inspo-tile--d { grid-column: span 1; grid-row: span 1; }
}

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testimonial-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
.testimonial-card {
  position: relative;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-paper);
  border: 1px solid var(--color-line);
}
.testimonial-card__placeholder-tag {
  position: absolute; top: var(--space-4); right: var(--space-4);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--color-cream-dim);
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-pill);
}
.testimonial-card__stars { color: var(--color-gold-dark); font-size: 0.85rem; letter-spacing: 0.15em; margin-bottom: var(--space-3); }
.testimonial-card p.quote { font-size: 0.98rem; color: var(--color-text); line-height: 1.65; }
.testimonial-card__who { margin-top: var(--space-5); display: flex; align-items: center; gap: 0.7rem; }
.testimonial-card__avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--color-cream-dim);
  color: var(--color-gold-dark);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.85rem;
}
.testimonial-card__who strong { display: block; font-size: 0.88rem; }
.testimonial-card__who span { font-size: 0.76rem; color: var(--color-text-muted); }

@media (min-width: 780px) { .testimonial-grid { grid-template-columns: repeat(3, 1fr); } }

/* ==========================================================================
   FAQ accordion
   ========================================================================== */
.faq-layout { display: grid; gap: var(--space-6); }
.faq-aside .section-sub { max-width: 42ch; }
.faq-aside__cta { margin-top: var(--space-5); }

.faq-list { display: flex; flex-direction: column; gap: var(--space-3); }
.faq-item {
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.faq-item:hover { border-color: var(--color-gold-light); }
.faq-item.is-open { border-color: var(--color-gold); box-shadow: var(--shadow-sm); }
.faq-item__q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  padding: 1.15rem 1.3rem;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-ink);
  transition: color var(--dur-fast) var(--ease-out);
}
.faq-item:hover .faq-item__q { color: var(--color-gold-dark); }
.faq-item__q i {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--color-cream-dim);
  color: var(--color-gold-dark);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.72rem;
  transition: transform var(--dur-med) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.faq-item.is-open .faq-item__q i { transform: rotate(45deg); background: var(--color-gold); color: var(--color-ink); }
.faq-item__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-med) var(--ease-out);
}
.faq-item.is-open .faq-item__a { max-height: 360px; }
.faq-item__a p { padding: 0 1.3rem 1.3rem; color: var(--color-text-muted); font-size: 0.94rem; max-width: 68ch; line-height: 1.7; }

@media (min-width: 960px) {
  .faq-layout { grid-template-columns: 0.85fr 1.15fr; gap: var(--space-8); align-items: start; }
  .faq-aside { position: sticky; top: calc(var(--header-h) + 20px); }
}

/* ==========================================================================
   Final CTA
   ========================================================================== */
.final-cta {
  position: relative;
  background: linear-gradient(135deg, var(--color-ink) 0%, #241f18 100%);
  color: var(--color-text-on-dark);
  overflow: hidden;
}
.final-cta::before {
  content: '';
  position: absolute;
  width: 60vw; height: 60vw;
  max-width: 900px; max-height: 900px;
  border-radius: 50%;
  border: 1px solid rgba(191, 168, 71,0.18);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.final-cta::after {
  content: '';
  position: absolute;
  width: 40vw; height: 40vw;
  max-width: 600px; max-height: 600px;
  border-radius: 50%;
  border: 1px solid rgba(191, 168, 71,0.28);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.final-cta__inner { position: relative; z-index: 1; text-align: center; max-width: 720px; margin-inline: auto; }
.final-cta h2 { color: #fff; font-size: clamp(2.35rem, 4.7vw, 3.5rem); font-weight: 500; }
.final-cta p { margin-top: var(--space-4); color: var(--color-text-on-dark-muted); font-size: 1.08rem; }
.final-cta__actions { margin-top: var(--space-6); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--color-ink); color: var(--color-text-on-dark-muted); }
.footer-top { padding-block: var(--space-8); display: grid; gap: var(--space-7); grid-template-columns: 1fr; }
/* Footer runs the same .brand component as the header — monogram + wordmark —
   in its light variant, since the footer sits on --color-ink and the supplied
   logo artwork is near-black. */
.footer-brand p { margin-top: var(--space-5); font-size: 0.9rem; max-width: 34ch; line-height: 1.7; }
.footer-social { margin-top: var(--space-5); display: flex; gap: 0.6rem; }
.footer-social a {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(243, 239, 225,0.2);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.footer-social a:hover { background: var(--color-gold); border-color: var(--color-gold); color: var(--color-ink); }

.footer-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); }
.footer-col h4 { font-family: var(--font-ui); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; margin-bottom: var(--space-4); }
.footer-col ul { display: flex; flex-direction: column; gap: 0.75rem; }
.footer-col a { font-size: 0.88rem; transition: color var(--dur-fast) var(--ease-out); }
.footer-col a:hover { color: var(--color-gold-light); }
.footer-contact li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.88rem; }
.footer-contact i { color: var(--color-gold-light); margin-top: 0.2rem; flex-shrink: 0; width: 1em; }
.footer-placeholder { font-style: italic; opacity: 0.75; }

.footer-newsletter {
  padding: var(--space-6) 0;
  border-top: 1px solid rgba(243, 239, 225,0.12);
  border-bottom: 1px solid rgba(243, 239, 225,0.12);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.footer-newsletter h4 { color: #fff; font-family: var(--font-display); font-size: 1.35rem; }
.footer-newsletter p { font-size: 0.86rem; margin-top: 0.3rem; }
.newsletter-form { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.newsletter-form input {
  flex: 1; min-width: 200px;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(243, 239, 225,0.2);
  color: #fff;
  font-size: 0.9rem;
}
.newsletter-form input::placeholder { color: rgba(243, 239, 225,0.4); }
.newsletter-form input:focus { border-color: var(--color-gold); outline: none; }
.newsletter-msg { font-size: 0.8rem; margin-top: 0.5rem; min-height: 1.2em; }
.newsletter-msg.is-error { color: #e2a08a; }
.newsletter-msg.is-success { color: #9fd4af; }

.footer-bottom { padding-block: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); font-size: 0.8rem; }
.footer-bottom__links { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.footer-bottom__links a:hover { color: var(--color-gold-light); }
.payment-icons { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.payment-icons span {
  font-size: 0.68rem;
  border: 1px solid rgba(243, 239, 225,0.25);
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  letter-spacing: 0.03em;
}

@media (min-width: 560px) { .footer-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 960px) {
  .footer-top { grid-template-columns: minmax(240px, 1fr) 2.15fr; gap: var(--space-8); }
  .footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* Back to top */
.back-to-top {
  position: fixed;
  right: var(--space-5); bottom: var(--space-5);
  z-index: 400;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--color-ink);
  color: var(--color-cream);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast), background var(--dur-fast) var(--ease-out);
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { background: var(--color-gold-dark); }

/* Toast (cart/wishlist feedback) */
.toast-stack {
  position: fixed;
  left: 50%;
  bottom: var(--space-6);
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: min(360px, 90vw);
  pointer-events: none;
}
.toast {
  background: var(--color-ink);
  color: var(--color-cream);
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: 0.65rem;
  font-size: 0.86rem;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.toast.is-visible { opacity: 1; transform: none; }
.toast i { color: var(--color-gold-light); }

/* ==========================================================================
   Skeleton loading

   Two different jobs, one look.

   `.mc-skel` is a placeholder shape drawn where content is on its way. It is
   used for the parts of the site that genuinely fetch something after the page
   has rendered — the homepage category tabs, the cart drawer, the cart totals
   and the checkout summary. Every skeleton is built to the footprint of the
   thing it stands in for, so nothing moves when the real content lands.

   `.mc-media` is the same shimmer applied to a picture frame that already has
   its dimensions, until the photograph inside it has decoded. The frames all
   carry an aspect-ratio, so this changes what an unloaded image looks like and
   never what size it is.
   ========================================================================== */
.mc-skel {
  position: relative;
  overflow: hidden;
  background-color: var(--color-cream-dim);
  border-radius: var(--radius-sm);
}
/*
 * The sweep runs at a constant speed and travels twice its own width, which is
 * what makes a run of placeholders read as one surface being lit from left to
 * right rather than as a row of boxes each flashing on its own. Easing it would
 * put a visible pause at each end; a highlight that hesitates looks like a
 * stall, which is the opposite of what a placeholder is for.
 */
.mc-skel::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 60%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.55) 45%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0.55) 55%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: mc-skel-sweep 1.6s linear infinite;
}
@keyframes mc-skel-sweep {
  /* 267% of a band that is itself 60% of the box: the highlight enters at the
     left edge and has just cleared the right one as the cycle restarts. */
  from { transform: translateX(0); }
  to   { transform: translateX(267%); }
}

/* Text placeholders. The heights are line heights, not guesses: a paragraph of
   skeleton lines occupies what the sentence it replaces will occupy. */
.mc-skel--line { display: block; height: 0.72rem; border-radius: var(--radius-pill); }
.mc-skel--line + .mc-skel--line { margin-top: 0.55rem; }
.mc-skel--title { height: 1.05rem; }
.mc-skel--w40 { width: 40%; }
.mc-skel--w60 { width: 60%; }
.mc-skel--w80 { width: 80%; }
/* display:block, because these are spans: a height on an inline box is ignored
   and the placeholder for the Add to Cart button was drawing nothing at all. */
.mc-skel--button { display: block; height: 44px; border-radius: var(--radius-pill); }
.mc-skel--pill { display: block; width: 108px; height: 32px; border-radius: var(--radius-pill); }

/* A block of lines, spaced like a paragraph rather than like a list. */
.mc-skel-para { display: block; }
.mc-skel-para + .mc-skel-para { margin-top: var(--space-5); }

/* ---- Page outlines ----
   Drawn in the content area while the next page is on its way. Each is built to
   the layout it stands in for: the same columns, the same card sizes, the same
   gaps. What matters is that the outline and the page that replaces it occupy
   the same space, so arriving is a change of detail and not of shape. */
.mc-page-skel { display: block; }
.mc-page-skel__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.mc-page-skel__bar .mc-skel--line { max-width: 260px; }
.mc-page-skel__media { display: block; aspect-ratio: 4 / 5; border-radius: var(--radius-md); }
.mc-page-skel__panel { display: block; height: 300px; border-radius: var(--radius-lg); }
.mc-page-skel__block { display: block; height: 340px; border-radius: var(--radius-lg); }
.mc-page-skel__block--tall { height: 560px; }
/* The progress rail above the cart and the checkout. */
.mc-page-skel__rail {
  display: block;
  height: 132px;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-8);
}
.mc-page-skel__split { display: grid; gap: var(--space-7); }
.mc-page-skel--split { display: grid; gap: var(--space-7); }
.mc-page-skel--prose { max-width: 68ch; }
.mc-page-skel--prose > .mc-skel--title { margin-bottom: var(--space-5); }

@media (min-width: 900px) {
  .mc-page-skel__split { grid-template-columns: minmax(0, 1.6fr) minmax(300px, 0.9fr); }
  .mc-page-skel--split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
  .mc-page-skel__panel { height: 380px; }
}

/* A stand-in product card. It reuses .product-card so it takes exactly the
   same width and gap in the grid as the card that replaces it. */
.product-card--skeleton { pointer-events: none; }
.product-card--skeleton .product-card__media { border-radius: 0; }
.product-card--skeleton .product-card__body { display: block; }
.product-card--skeleton .product-card__foot { padding-top: 0; }

/* Rows for the cart drawer and the cart page. Built to the drawer's own line:
   a 72px portrait thumbnail, the name, the chosen options, the quantity row. */
.mc-skel-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-4) 0;
}
.mc-skel-row + .mc-skel-row { border-top: 1px solid var(--color-line); }
.mc-skel-row__media { display: block; aspect-ratio: 4 / 5; border-radius: var(--radius-sm); }
.mc-skel-row__body { display: block; }
.mc-skel-row__qty { margin-top: var(--space-4); width: 92px; height: 30px; }

/* A region whose contents are being replaced: the old content stays legible
   but stops inviting clicks, and the shimmer says why. */
.is-skeleton {
  position: relative;
  opacity: 0.45;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}

/* Picture frames, until the photograph inside has decoded.

   ::before rather than ::after, because .category-card already draws its
   darkening gradient in ::after and a frame may only have one of each. */
.mc-media {
  position: relative;
  overflow: hidden;
  background-color: var(--color-cream-dim);
}
.mc-media::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 60%;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.55) 45%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0.55) 55%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: mc-skel-sweep 1.6s linear infinite;
  pointer-events: none;
}
/*
 * Written against .js. Hiding a picture until script says otherwise is only
 * safe while there is script to say it — without one, these rules never apply
 * and the images are simply visible.
 */
.js .mc-media img { opacity: 0; transition: opacity var(--dur-med) var(--ease-out); }
.mc-media.is-loaded::before { content: none; }
.js .mc-media.is-loaded img { opacity: 1; }

/* A shimmer is decoration. Under reduced motion the placeholder is still
   there, it simply stops moving. */
@media (prefers-reduced-motion: reduce) {
  .mc-skel::after,
  .mc-media::before { animation: none; }
  .js .mc-media img { transition: none; }
}

/* ==========================================================================
   Misc utility
   ========================================================================== */
.pill-note {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: 0.76rem;
  color: var(--color-text-muted);
  background: var(--color-cream-dim);
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-pill);
}
.text-center { text-align: center; }

@media (min-width: 780px) {
  .section { padding-block: calc(var(--space-9) * 1.1); }
}