/* ==========================================================================
   TIMELESS — storefront design system
   Ported from docs/DESIGN-SYSTEM.md. Plain CSS, custom properties, no build.

   Gold is a seasoning, never a sauce. If a section looks gold-heavy, it's wrong.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Ground colour as an RGB triplet, so every ground-derived value — the
     token ramp below plus every gradient, scrim and overlay — tracks one
     number. Re-theming the site's base is now a one-line change here.
     Current: matte navy blue (was #0a0a0a near-black). */
  --rgb-ground: 14 22 38;

  /* Palette */
  --c-black: rgb(var(--rgb-ground));   /* base ground; header when scrolled */
  --c-charcoal: #16203a;               /* alternating sections, drawers, modals */
  --c-graphite: #1e2c4d;               /* raised surfaces, image placeholders */
  --c-offwhite: #f5f2ec;
  --c-grey: #a7a7a7;
  --c-gold: #b89b5e;
  --c-gold-soft: #d4bd8a;

  /* Ink opacities for light sections (dark ground colour on the cream band) */
  --ink-12: rgb(var(--rgb-ground) / 0.12);
  --ink-20: rgb(var(--rgb-ground) / 0.2);
  --ink-40: rgb(var(--rgb-ground) / 0.4);
  --ink-60: rgb(var(--rgb-ground) / 0.6);

  /* Bone opacities for dark sections */
  --bone-08: rgba(245, 242, 236, 0.08);
  --bone-12: rgba(245, 242, 236, 0.12);
  --bone-18: rgba(245, 242, 236, 0.18);
  --bone-25: rgba(245, 242, 236, 0.25);
  --bone-70: rgba(245, 242, 236, 0.7);

  /* Type */
  --font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Motion */
  --ease-luxe: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --container: 88rem;
  --gutter: 1.25rem;
  --section-y: 6rem;
  --header-h: 4.5rem;

  /* Status colours (admin-facing, kept for shared components) */
  --c-danger: #b4473c;
  --c-success: #2f7d5b;
  --c-warn: #b8860b;
}

@media (min-width: 640px) {
  :root { --gutter: 2rem; }
}
@media (min-width: 1024px) {
  :root { --gutter: 3rem; --section-y: 7rem; --header-h: 6rem; }
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--c-black);
  color: var(--c-offwhite);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }

/* Must beat any component's own `display`. The UA sheet's [hidden] rule loses
   to author styles, so `.btn { display: inline-flex }` would keep a hidden
   button visible without this. */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0; }

::selection { background: var(--c-gold); color: var(--c-black); }

:focus-visible {
  outline: 1px solid var(--c-gold);
  outline-offset: 3px;
}

@media (pointer: fine) {
  * { scrollbar-width: thin; scrollbar-color: #2a2a2a var(--c-black); }
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  background: var(--c-offwhite);
  color: var(--c-black);
  padding: 0.75rem 1.25rem;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Hidden below 640px — for copy that is nice to have but wraps badly on a phone. */
.hide-sm { display: none; }
@media (min-width: 640px) { .hide-sm { display: inline; } }

.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;
}

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

.section { padding-block: var(--section-y); }
.section--alt { background: var(--c-charcoal); }
.section--light { background: var(--c-offwhite); color: var(--c-black); }
/* A section opening with a divider gets no top padding — the divider plus its
   margin is the separation. Doubling both creates a dead band. */
.section--divided { padding-top: 0; }

.divider {
  height: 1px;
  border: 0;
  margin: 0 0 var(--section-y);
  background: linear-gradient(90deg, transparent, var(--bone-18), transparent);
}
.section--light .divider {
  background: linear-gradient(90deg, transparent, var(--ink-12), transparent);
}

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */
.headline {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* The signature device: second line italic + gold. */
.headline em,
.headline .gold {
  font-style: italic;
  color: var(--c-gold);
  display: block;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.6875rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--c-gold);
}
.eyebrow::before {
  content: '';
  width: 2rem;
  height: 1px;
  background: var(--c-gold);
  opacity: 0.6;
  flex: none;
}
.eyebrow--plain::before { display: none; }

.section-head { display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 768px) {
  .section-head--split {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}
.section-head__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.6rem, 6vw, 4.25rem);
  line-height: 0.98;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin-top: 1.25rem;
}
.section-head__sub {
  margin-top: 1.5rem;
  max-width: 34rem;
  font-size: 0.95rem;
  color: var(--c-grey);
}
.section--light .section-head__sub { color: var(--ink-60); }
.section-head__inner { max-width: 42rem; }
.section-head--center { align-items: center; text-align: center; }
.section-head--center .section-head__sub { margin-inline: auto; }

.lede { font-size: 1.05rem; color: var(--c-grey); }
.muted { color: var(--c-grey); }
.section--light .muted { color: var(--ink-60); }

/* --------------------------------------------------------------------------
   5. Buttons & links
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: background-color 0.3s var(--ease-luxe),
              color 0.3s var(--ease-luxe),
              border-color 0.3s var(--ease-luxe);
  white-space: nowrap;
}
.btn:disabled, .btn[aria-disabled='true'] { opacity: 0.4; cursor: not-allowed; }

.btn-primary,
.btn-light {
  background: var(--c-offwhite);
  color: var(--c-black);
  border-color: var(--c-offwhite);
}
.btn-primary:hover, .btn-light:hover {
  background: var(--c-gold);
  border-color: var(--c-gold);
  color: var(--c-black);
}

.btn-outline {
  border-color: var(--bone-25);
  color: var(--c-offwhite);
}
.btn-outline:hover { border-color: var(--c-gold); color: var(--c-gold); }

.btn-dark {
  background: var(--c-black);
  color: var(--c-offwhite);
  border-color: var(--c-black);
}
.btn-dark:hover { background: var(--c-gold); border-color: var(--c-gold); color: var(--c-black); }

.btn-ghost { color: var(--c-offwhite); }
.btn-ghost:hover { color: var(--c-gold); }

.btn-sm { padding: 0.6rem 1.2rem; font-size: 0.62rem; }
.btn-block { width: 100%; }

/* Arrow link — the arrow nudges right on hover. */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: color 0.3s var(--ease-luxe);
}
.arrow-link__arrow {
  transition: transform 0.5s var(--ease-luxe);
}
.arrow-link:hover { color: var(--c-gold); }
.arrow-link:hover .arrow-link__arrow { transform: translateX(0.375rem); }
.arrow-link--gold { color: var(--c-gold); }
.arrow-link--gold:hover { color: var(--c-gold-soft); }

/* Underline that draws in from the left. */
.underline-hover { position: relative; }
.underline-hover::after {
  content: '';
  position: absolute;
  left: 0; bottom: -0.25rem;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease-luxe);
}
.underline-hover:hover::after,
.underline-hover:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* --------------------------------------------------------------------------
   6. Announcement bar
   -------------------------------------------------------------------------- */
.announce {
  position: relative;
  z-index: 60;
  background: var(--c-black);
  border-bottom: 1px solid var(--bone-08);
}
.announce__list {
  display: none;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}
.announce__item {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex: none;
}
.announce__text {
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-grey);
  white-space: nowrap;
}
.announce__dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--c-gold);
  opacity: 0.5;
}
.announce__rotator {
  position: relative;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.announce__slide {
  position: absolute;
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-grey);
  text-align: center;
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.5s var(--ease-luxe), transform 0.5s var(--ease-luxe);
}
.announce__slide.is-current { opacity: 1; transform: translateY(0); }

/* All four messages fit one row only from 1280px up. Below that they shrink
   and wrap, so narrower viewports get the rotator instead. This query must
   come after both blocks above, or the later base rule wins the cascade and
   both variants render at once. */
@media (min-width: 1280px) {
  .announce__list { display: flex; }
  .announce__rotator { display: none; }
}

/* --------------------------------------------------------------------------
   7. Header
   -------------------------------------------------------------------------- */
.shop-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.5s var(--ease-luxe),
              border-color 0.5s var(--ease-luxe),
              backdrop-filter 0.5s var(--ease-luxe);
}
.shop-header.is-scrolled {
  background: rgb(var(--rgb-ground) / 0.92);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--bone-08);
}
.shop-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--header-h);
  transition: height 0.5s var(--ease-luxe);
}
.shop-header.is-scrolled .shop-header__bar { height: 4rem; }
@media (min-width: 1024px) {
  .shop-header.is-scrolled .shop-header__bar { height: 4.5rem; }
}

.shop-logo {
  display: flex;
  flex-direction: column;
  line-height: 1;
  flex: none;
}
.shop-logo__name {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 300;
  letter-spacing: 0.32em;
  transition: color 0.3s var(--ease-luxe);
}
.shop-logo:hover .shop-logo__name { color: var(--c-gold); }
.shop-logo__tag {
  display: none;
  margin-top: 0.35rem;
  font-size: 0.5rem;
  letter-spacing: 0.42em;
  color: var(--c-grey);
}
@media (min-width: 640px) { .shop-logo__tag { display: block; } }
.shop-header.is-scrolled .shop-logo__tag { display: none; }

.shop-nav { display: none; align-items: center; gap: 2rem; }
@media (min-width: 1100px) { .shop-nav { display: flex; } }
.shop-nav a {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone-70);
  transition: color 0.3s var(--ease-luxe);
  position: relative;
}
.shop-nav a:hover, .shop-nav a.is-active { color: var(--c-offwhite); }

.shop-header__actions { display: flex; align-items: center; gap: 0.125rem; }
.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--c-offwhite);
  transition: color 0.3s var(--ease-luxe);
}
.icon-btn:hover { color: var(--c-gold); }
.icon-btn__badge {
  position: absolute;
  top: 0.35rem; right: 0.3rem;
  min-width: 1rem; height: 1rem;
  padding-inline: 0.25rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--c-gold);
  color: var(--c-black);
  font-size: 0.55rem;
  font-weight: 500;
}
.menu-toggle { display: inline-flex; }
@media (min-width: 1100px) { .menu-toggle { display: none; } }

/* Mobile menu — full remaining height, never an auto-height flap. */
.mobile-menu {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 45;
  background: rgb(var(--rgb-ground) / 0.98);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--bone-12);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.75rem);
  transition: opacity 0.4s var(--ease-luxe), transform 0.4s var(--ease-luxe), visibility 0.4s;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.mobile-menu__inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 1.5rem var(--gutter) 2.5rem;
}
.mobile-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 1rem;
  border-bottom: 1px solid var(--bone-08);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  transition: color 0.3s var(--ease-luxe);
}
.mobile-menu__link:hover { color: var(--c-gold); }
.mobile-menu__foot {
  margin-top: auto;
  padding-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
}
.mobile-menu__wa {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-gold);
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  /* Height tracks a 16:9 frame (9/16 = 56.25% of width) so the whole hero
     asset shows without cropping, capped at the viewport height. */
  min-height: min(56.25vw, 100svh);
  margin-top: calc(var(--header-h) * -1);
  overflow: hidden;
  background: var(--c-black);
}
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media img,
.hero__media video {
  width: 100%; height: 100%;
  /* contain, not cover: show the entire 16:9 frame, never clip it. */
  object-fit: contain;
  object-position: center;
  /* Lift the plate so the product reads rather than sitting in the murk. */
  filter: brightness(1.22) contrast(1.08) saturate(0.92);
  display: block;
}

/* On phones a 16:9 band is too short to also carry the overlaid copy, so the
   hero stacks: the full 16:9 media sits on top, the text flows beneath it. */
@media (max-width: 767px) {
  .hero { display: block; min-height: 0; }
  .hero__media { position: relative; aspect-ratio: 16 / 9; }
  .hero__grade { display: none; }
  .hero__inner { padding-top: 1.5rem; padding-bottom: 2.5rem; }
}

/* Hero slides — a video/image rotation. Each slide sits stacked; the active
   one slides in from the right, the outgoing one slides out to the left.
   Transform + opacity only, so it stays on the compositor. */
.hero__slide {
  position: absolute; inset: 0;
  opacity: 0;
  transform: translateX(6%) scale(1.02);
  transition: opacity 0.9s var(--ease-luxe), transform 1.1s var(--ease-luxe);
  will-change: opacity, transform;
}
.hero__slide.is-active { opacity: 1; transform: translateX(0) scale(1); z-index: 1; }
.hero__slide.is-leaving { opacity: 0; transform: translateX(-6%) scale(1.02); z-index: 0; }
/* A lone slide never animates — no transform cost when there's nothing to rotate. */
.hero__media:not([data-multiple]) .hero__slide { transition: none; transform: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: opacity 0.01ms; transform: none; }
  .hero__slide.is-active { transform: none; }
  .hero__slide.is-leaving { transform: none; }
}
/* Diagonal grade: dark left for the headline, open right for the watch. */
.hero__grade {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg,
    rgb(var(--rgb-ground) / 0.94) 0%,
    rgb(var(--rgb-ground) / 0.78) 34%,
    rgb(var(--rgb-ground) / 0.22) 64%,
    rgb(var(--rgb-ground) / 0.52) 100%);
}
.hero__fade {
  position: absolute; inset-inline: 0; bottom: 0; z-index: -1;
  height: 16rem;
  background: linear-gradient(to top, var(--c-black) 4%, transparent);
}
.hero__inner {
  position: relative;
  padding-block: calc(var(--header-h) + 4rem) 6rem;
}
.hero__content { max-width: 46rem; }
.hero__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(3rem, 7.2vw, 6.75rem);
  line-height: 0.92;
  letter-spacing: -0.015em;
  margin-top: 2rem;
}
.hero__title .gold { font-style: italic; color: var(--c-gold); display: block; }
.hero__sub {
  margin-top: 2rem;
  max-width: 32rem;
  font-size: 0.95rem;
  color: var(--c-grey);
}
.hero__cta { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 640px) { .hero__cta { flex-direction: row; align-items: center; } }

/* Mobile hero-stack spacing. The base .hero__inner padding is large (it was
   sized for the full-height overlay hero). On the stacked mobile layout that
   creates a big empty navy band, so tighten it: buttons sit just under the
   image and the next section follows immediately. Placed AFTER the base
   .hero__inner / .hero__cta rules so it wins at equal specificity. */
@media (max-width: 767px) {
  .hero__inner { padding-block: 1.5rem; }
  .hero__cta { margin-top: 0; }
}

.hero__scroll {
  position: absolute;
  bottom: 2rem; left: 50%;
  transform: translateX(-50%);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
@media (min-width: 1024px) { .hero__scroll { display: flex; } }
.hero__scroll span {
  font-size: 0.5rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-grey);
}
.hero__scroll-rail {
  position: relative;
  width: 1px; height: 3rem;
  background: var(--bone-12);
  overflow: hidden;
}
.hero__scroll-rail::after {
  content: '';
  position: absolute;
  inset-inline: 0; top: 0;
  height: 1rem;
  background: var(--c-gold);
  animation: scroll-cue 2.4s var(--ease-soft) infinite;
}
@keyframes scroll-cue {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(300%); }
}

/* --------------------------------------------------------------------------
   9. Category grid
   -------------------------------------------------------------------------- */
/* Column count comes from the number of categories (set inline by the view),
   capped at 4. Hard-coding 4 columns left two categories crammed into the
   left half of the row with dead space beside them. */
.cat-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  margin-top: 3.5rem;
}
@media (min-width: 640px) {
  .cat-grid { grid-template-columns: repeat(min(2, var(--cols, 4)), 1fr); }
}
@media (min-width: 1024px) {
  .cat-grid {
    grid-template-columns: repeat(var(--cols, 4), 1fr);
    gap: 1.5rem;
    margin-top: 5rem;
  }
  /* Deliberate tall / short / short / tall rhythm — a flat row of identical
     rectangles is the most template-looking thing a shop can do. Only worth
     doing with a full row; with two cards it just reads as misalignment. */
  .cat-grid--rhythm > :nth-child(2),
  .cat-grid--rhythm > :nth-child(3) { margin-top: 4rem; }
}

.cat-card {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--c-charcoal);
  /* Ratio follows the column count (set inline by the view) — a 3:3.8 card is
     right in a four-up row and absurdly tall in a two-up one. */
  aspect-ratio: var(--cat-ratio, 3 / 3.8);
}
@media (min-width: 1024px) {
  .cat-grid--rhythm > :nth-child(1) .cat-card,
  .cat-grid--rhythm > :nth-child(4) .cat-card { aspect-ratio: 3 / 4.4; }
}
.cat-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-luxe);
}
.cat-card:hover img { transform: scale(1.06); }
.cat-card__scrim {
  position: absolute; inset: 0;
  /* Heavy top stop is what tames bright supplier photos. */
  background: linear-gradient(to top,
    rgb(var(--rgb-ground) / 0.94) 0%,
    rgb(var(--rgb-ground) / 0.5) 45%,
    rgb(var(--rgb-ground) / 0.32) 100%);
  transition: opacity 0.7s var(--ease-luxe);
}
.cat-card:hover .cat-card__scrim { opacity: 0.9; }
.cat-card__edge {
  position: absolute; inset: 0;
  border: 1px solid transparent;
  transition: border-color 0.7s var(--ease-luxe);
}
.cat-card:hover .cat-card__edge { border-color: rgba(184, 155, 94, 0.4); }
.cat-card__body {
  position: absolute;
  inset-inline: 0; bottom: 0;
  padding: 1.5rem;
}
.cat-card__body { display: flex; flex-direction: column; }
.cat-card__title {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: 0.03em;
}
.cat-card__caption {
  display: block;
  margin-top: 0.5rem;
  max-width: 26ch;
  font-size: 0.78rem;
  color: var(--c-grey);
}
.cat-card__cta {
  margin-top: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-gold);
}
.cat-card__cta span:last-child { transition: transform 0.5s var(--ease-luxe); }
.cat-card:hover .cat-card__cta span:last-child { transform: translateX(0.375rem); }

/* --------------------------------------------------------------------------
   10. Product card
   -------------------------------------------------------------------------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3.5rem 1.25rem;
  margin-top: 3.5rem;
}
@media (min-width: 768px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) {
  .product-grid { grid-template-columns: repeat(4, 1fr); gap: 4rem 1.75rem; margin-top: 5rem; }
}
.product-grid--three { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1024px) { .product-grid--three { grid-template-columns: repeat(3, 1fr); } }

.pcard { position: relative; display: flex; flex-direction: column; }
.pcard__media {
  position: relative;
  overflow: hidden;
  background: var(--c-charcoal);
  aspect-ratio: 4 / 5;
}
.pcard__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-luxe), opacity 0.9s var(--ease-luxe);
}
.pcard:hover .pcard__img--primary { transform: scale(1.04); }
.pcard__img--alt { opacity: 0; transform: scale(1.04); }
.pcard:hover .pcard__img--alt { opacity: 1; }
.pcard__media--single .pcard__img--primary { transition: transform 1.1s var(--ease-luxe); }
.pcard:hover .pcard__media--single .pcard__img--primary { transform: scale(1.06); }

/* A constant soft vignette over every product image. This is what pulls
   light-background supplier photos toward the dark ones, so a mixed
   catalogue reads as a single shoot. */
.pcard__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, rgb(var(--rgb-ground) / 0.58) 100%);
  pointer-events: none;
}
.pcard__hoverwash {
  position: absolute; inset: 0;
  background: rgb(var(--rgb-ground) / 0);
  transition: background-color 0.7s var(--ease-luxe);
  pointer-events: none;
}
.pcard:hover .pcard__hoverwash { background: rgb(var(--rgb-ground) / 0.25); }

.pcard__badges {
  position: absolute; top: 0; left: 0;
  padding: 0.875rem;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem;
  z-index: 2;
}
.badge {
  padding: 0.25rem 0.625rem;
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: rgb(var(--rgb-ground) / 0.7);
  backdrop-filter: blur(4px);
  border: 1px solid var(--bone-25);
  color: var(--c-offwhite);
}
.badge--gold { border-color: rgba(184,155,94,0.5); color: var(--c-gold); }
.badge--muted { border-color: var(--bone-25); color: var(--c-grey); }

/* View bar — slides up on desktop hover; always visible on touch, but quiet.
   Four cream slabs in a phone grid would shout over the products. */
/* Full-image link to the product page; sits below the Buy-now bar (z-index 2). */
.pcard__link { position: absolute; inset: 0; z-index: 1; }
.pcard__view {
  position: absolute;
  inset-inline: 0; bottom: 0;
  z-index: 2;
  display: block;
  width: 100%;
  padding: 0.75rem;
  text-align: center;
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-top: 1px solid var(--bone-12);
  background: rgb(var(--rgb-ground) / 0.75);
  backdrop-filter: blur(6px);
  color: var(--c-gold);
  transition: background-color 0.3s var(--ease-luxe), color 0.3s var(--ease-luxe),
              transform 0.5s var(--ease-luxe), opacity 0.5s var(--ease-luxe);
}
@media (min-width: 768px) {
  .pcard__view {
    padding: 0.875rem;
    font-size: 0.6rem;
    border-top-color: transparent;
    background: rgba(245, 242, 236, 0.95);
    color: var(--c-black);
    transform: translateY(100%);
    opacity: 0;
  }
  .pcard:hover .pcard__view,
  .pcard:focus-within .pcard__view { transform: translateY(0); opacity: 1; }
  .pcard__view:hover { background: var(--c-gold); }
}

.pcard__body {
  padding-top: 1.25rem;
  transition: transform 0.5s var(--ease-luxe);
}
@media (min-width: 768px) { .pcard:hover .pcard__body { transform: translateY(-0.25rem); } }
.pcard__meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem;
}
.pcard__brand {
  font-size: 0.6rem; font-weight: 500; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--c-gold);
}
.pcard__movement {
  font-size: 0.55rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-grey);
}
.pcard__name {
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.35;
  transition: color 0.3s var(--ease-luxe);
}
.pcard__name:hover { color: var(--c-gold); }
.pcard__prices { margin-top: 0.625rem; display: flex; align-items: baseline; gap: 0.75rem; }
.pcard__price { font-size: 0.95rem; letter-spacing: 0.02em; }
.pcard__was { font-size: 0.78rem; color: var(--c-grey); text-decoration: line-through; }
.pcard__stock {
  margin-top: 0.625rem;
  display: flex; align-items: center; gap: 0.375rem;
  font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-grey);
}
.pcard__stock i {
  width: 4px; height: 4px; border-radius: 50%; background: var(--c-gold); flex: none;
}
.pcard__stock--out i { background: var(--c-grey); }

/* --------------------------------------------------------------------------
   11. Luxury showcase (pinned scroll)
   -------------------------------------------------------------------------- */
.showcase { position: relative; background: var(--c-charcoal); }
.showcase__stage {
  position: relative;
  display: none;
  height: 100vh;
  align-items: center;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .showcase__stage { display: flex; }
  .showcase__stack { display: none; }
}
.showcase__glow {
  position: absolute;
  left: 50%; top: 50%;
  width: 46rem; height: 46rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184,155,94,0.16), transparent 62%);
  filter: blur(48px);
  opacity: 0.7;
  pointer-events: none;
}
.showcase__watchwrap {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.showcase__watch {
  position: relative;
  width: 74vh; height: 74vh;
  will-change: transform;
}
.showcase__watch img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 60px 140px -40px rgba(0,0,0,0.9);
}
.showcase__watch::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(184,155,94,0.25);
}
.showcase__layer { position: relative; z-index: 2; pointer-events: none; }
/* An absolutely positioned child resolves against the container's padding
   box, so `left: 0` would ignore the gutter and sit flush to the viewport
   edge. Inset by the gutter explicitly. */
.showcase__heading {
  position: absolute;
  top: -32vh;
  left: var(--gutter);
  max-width: 30rem;
}
.showcase__heading h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(3rem, 4vw, 4.5rem);
  line-height: 0.94;
  margin-top: 1.25rem;
}
.showcase__heading p { margin-top: 1.5rem; max-width: 24rem; font-size: 0.9rem; color: var(--c-grey); }
.showcase__caption {
  position: absolute;
  bottom: -28vh;
  max-width: 24rem;
  visibility: hidden;
}
.showcase__caption--left { left: var(--gutter); }
.showcase__caption--right { right: var(--gutter); text-align: right; }
.showcase__step {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--c-gold);
}
.showcase__caption h3 {
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.75rem, 2.4vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: 0.03em;
}
.showcase__caption p { margin-top: 1rem; font-size: 0.875rem; color: var(--c-grey); }
.showcase__finale {
  position: absolute;
  inset-inline: 0; top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  visibility: hidden;
  pointer-events: auto;
}
.showcase__finale h3 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.6rem, 4vw, 4.5rem);
  line-height: 0.96;
}
.showcase__finale .gold { font-style: italic; color: var(--c-gold); display: block; }
.showcase__progress {
  position: absolute;
  bottom: 2.5rem; left: 50%;
  transform: translateX(-50%);
  width: 10rem; height: 1px;
  background: var(--bone-12);
}
.showcase__progress i {
  display: block; height: 100%;
  background: var(--c-gold);
  transform: scaleX(0);
  transform-origin: left;
}

/* Mobile / reduced-motion: vertical narrative instead of a scroll-jail. */
.showcase__stack { padding-block: var(--section-y); }
.showcase__disc {
  position: relative;
  width: 100%;
  max-width: 24rem;
  margin: 3rem auto 0;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
}
.showcase__disc::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(184,155,94,0.25);
}
.showcase__disc img { width: 100%; height: 100%; object-fit: cover; }
.showcase__steps { margin-top: 3.5rem; display: flex; flex-direction: column; gap: 2.5rem; }
.showcase__steps li { border-top: 1px solid var(--bone-12); padding-top: 1.5rem; }
.showcase__steps h3 {
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 0.03em;
}
@media (min-width: 640px) { .showcase__steps h3 { font-size: 1.5rem; } }
.showcase__steps p { margin-top: 0.75rem; font-size: 0.9rem; color: var(--c-grey); }
.showcase__outro { margin-top: 4rem; text-align: center; }
.showcase__outro h3 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.25rem, 8vw, 3rem);
  line-height: 0.98;
}
.showcase__outro .gold { font-style: italic; color: var(--c-gold); display: block; }

/* --------------------------------------------------------------------------
   12. Brand directory + marquee
   -------------------------------------------------------------------------- */
.brand-grid {
  margin-top: 3.5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--bone-12);
  border-left: 1px solid var(--bone-12);
}
@media (min-width: 1024px) {
  .brand-grid { grid-template-columns: repeat(4, 1fr); margin-top: 5rem; }
}
.brand-grid li { border-right: 1px solid var(--bone-12); border-bottom: 1px solid var(--bone-12); }
.brand-cell {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  height: 7rem;
  padding-inline: 1rem;
  overflow: hidden;
}
@media (min-width: 640px) { .brand-cell { height: 9rem; } }
.brand-cell__fill {
  position: absolute; inset: 0;
  z-index: 1;
  background: var(--c-charcoal);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.6s var(--ease-luxe);
}
.brand-cell:hover .brand-cell__fill { transform: scaleY(1); }
.brand-cell__index {
  position: absolute; top: 1rem; left: 1rem;
  z-index: 2;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.7rem;
  color: var(--c-gold);
  opacity: 0;
  transition: opacity 0.5s var(--ease-luxe);
}
.brand-cell:hover .brand-cell__index { opacity: 1; }
.brand-cell__logo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  /* Logo fills the whole cell. Swap 'cover' → 'contain' to fit the logo
     without cropping its edges. */
  object-fit: cover;
  background: var(--c-offwhite);
}
.brand-cell__name {
  position: relative;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 300;
  /* Uppercase regardless of how the admin types the name — title case at this
     tracking reads as spaced-out letters rather than a wordmark. */
  text-transform: uppercase;
  letter-spacing: 0.2em;
  text-align: center;
  color: var(--bone-70);
  transition: color 0.5s var(--ease-luxe);
}
@media (min-width: 1024px) { .brand-cell__name { font-size: 1.25rem; letter-spacing: 0.26em; } }
.brand-cell:hover .brand-cell__name { color: var(--c-offwhite); }
.brand-cell__arrow {
  position: absolute; right: 1.25rem; bottom: 1.25rem;
  z-index: 2;
  color: var(--c-gold);
  opacity: 0;
  transform: translateX(0.5rem);
  transition: opacity 0.5s var(--ease-luxe), transform 0.5s var(--ease-luxe);
}
.brand-cell:hover .brand-cell__arrow { opacity: 1; transform: translateX(0); }

.marquee {
  position: relative;
  margin-top: 5rem;
  padding-block: 1.5rem;
  overflow: hidden;
}
.marquee::before, .marquee::after {
  content: '';
  position: absolute; inset-block: 0;
  width: 6rem; z-index: 2;
  pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(to right, var(--c-black), transparent); }
.marquee::after { right: 0; background: linear-gradient(to left, var(--c-black), transparent); }
.marquee__track {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  width: max-content;
  animation: marquee 48s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: flex; align-items: center; gap: 2.5rem;
}
.marquee__name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: rgba(245, 242, 236, 0.28);
  white-space: nowrap;
}
@media (min-width: 640px) { .marquee__name { font-size: 1.875rem; } }
.marquee__dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(184,155,94,0.4); flex: none; }
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

/* --------------------------------------------------------------------------
   13. Trust section (light)
   -------------------------------------------------------------------------- */
.trust-list {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--ink-12);
}
@media (min-width: 640px) { .trust-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .trust-list { grid-template-columns: repeat(4, 1fr); margin-top: 5rem; } }
.trust-item {
  position: relative;
  padding: 2.5rem 0;
  border-bottom: 1px solid var(--ink-12);
}
@media (min-width: 640px) { .trust-item { padding-right: 2rem; } }
@media (min-width: 1024px) {
  .trust-item { border-right: 1px solid var(--ink-12); padding-right: 2.5rem; }
  .trust-item:last-child { border-right: 0; }
}
.trust-item__top { display: flex; align-items: flex-start; justify-content: space-between; }
.trust-item__num {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 300;
  line-height: 1;
  color: var(--ink-20);
  transition: color 0.5s var(--ease-luxe);
}
@media (min-width: 1024px) { .trust-item__num { font-size: 3.75rem; } }
.trust-item:hover .trust-item__num { color: var(--c-gold); }
.trust-item__icon { color: var(--ink-40); transition: color 0.5s var(--ease-luxe); }
.trust-item:hover .trust-item__icon { color: var(--c-gold); }
.trust-item h3 {
  margin-top: 2rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 300;
  letter-spacing: 0.04em;
}
@media (min-width: 1024px) { .trust-item h3 { font-size: 1.5rem; } }
.trust-item p { margin-top: 0.75rem; max-width: 20rem; font-size: 0.85rem; color: var(--ink-60); }
.trust-item__rule {
  position: absolute; bottom: 0; left: 0;
  width: 0; height: 1px;
  background: var(--c-gold);
  transition: width 0.9s var(--ease-luxe);
}
.trust-item:hover .trust-item__rule { width: 100%; }

/* --------------------------------------------------------------------------
   14. Catalog listing (filters, sort, pagination)
   -------------------------------------------------------------------------- */
.page-head { padding-block: 3rem 0; }
.page-head__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 1;
  margin-top: 1.25rem;
}
.page-head__sub { margin-top: 1.25rem; max-width: 40rem; font-size: 0.95rem; color: var(--c-grey); }

.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-grey);
}
.breadcrumb a:hover { color: var(--c-gold); }
.breadcrumb__sep { opacity: 0.5; }

.toolbar {
  margin-top: 2.5rem;
  padding-block: 1.25rem;
  border-top: 1px solid var(--bone-12);
  border-bottom: 1px solid var(--bone-12);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
}
.toolbar__count { font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-grey); }
.toolbar__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.field {
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.field label {
  font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-grey);
}
.select {
  appearance: none;
  padding: 0.625rem 2.25rem 0.625rem 0.875rem;
  background: transparent;
  border: 1px solid var(--bone-25);
  color: var(--c-offwhite);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  background-image: linear-gradient(45deg, transparent 50%, var(--c-grey) 50%),
                    linear-gradient(135deg, var(--c-grey) 50%, transparent 50%);
  background-position: calc(100% - 1.1rem) 55%, calc(100% - 0.75rem) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  transition: border-color 0.3s var(--ease-luxe);
}
.select:hover, .select:focus { border-color: var(--c-gold); outline: none; }
.select option { background: var(--c-charcoal); color: var(--c-offwhite); }

.chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }
.chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--bone-25);
  font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--c-grey);
  transition: border-color 0.3s var(--ease-luxe), color 0.3s var(--ease-luxe);
}
.chip:hover { border-color: var(--c-gold); color: var(--c-gold); }
.chip.is-active { border-color: var(--c-gold); color: var(--c-gold); }

.pagination {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--bone-12);
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
}
.pagination a, .pagination span {
  min-width: 2.5rem; height: 2.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  padding-inline: 0.5rem;
  border: 1px solid var(--bone-12);
  font-size: 0.7rem; letter-spacing: 0.08em;
  transition: border-color 0.3s var(--ease-luxe), color 0.3s var(--ease-luxe);
}
.pagination a:hover { border-color: var(--c-gold); color: var(--c-gold); }
.pagination .is-current { border-color: var(--c-gold); color: var(--c-gold); }
.pagination .is-disabled { opacity: 0.35; }

.empty-state {
  padding-block: 5rem;
  text-align: center;
}
.empty-state h2 {
  font-family: var(--font-display);
  font-size: 1.75rem; font-weight: 300;
}
.empty-state p { margin-top: 1rem; color: var(--c-grey); font-size: 0.9rem; }
.empty-state__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* --------------------------------------------------------------------------
   15. Product detail
   -------------------------------------------------------------------------- */
.pdp { padding-block: 2.5rem var(--section-y); }
.pdp__grid { display: grid; gap: 3rem; margin-top: 2rem; }
@media (min-width: 1024px) { .pdp__grid { grid-template-columns: 1.15fr 1fr; gap: 4rem; } }

.gallery__main {
  position: relative;
  background: var(--c-charcoal);
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumbs {
  margin-top: 0.75rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}
.gallery__thumb {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--c-charcoal);
  border: 1px solid transparent;
  transition: border-color 0.3s var(--ease-luxe), opacity 0.3s var(--ease-luxe);
  opacity: 0.6;
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb:hover { opacity: 1; }
.gallery__thumb.is-active { border-color: var(--c-gold); opacity: 1; }

.pdp__brand { font-size: 0.62rem; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--c-gold); }
.pdp__title {
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.1;
}
.pdp__prices { margin-top: 1.5rem; display: flex; align-items: baseline; flex-wrap: wrap; gap: 1rem; }
.pdp__price { font-family: var(--font-display); font-size: 2rem; font-weight: 300; }
.pdp__was { font-size: 0.95rem; color: var(--c-grey); text-decoration: line-through; }
.pdp__save {
  font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--c-gold); border: 1px solid rgba(184,155,94,0.5); padding: 0.25rem 0.5rem;
}
.pdp__desc { margin-top: 1.75rem; font-size: 0.95rem; color: var(--c-grey); }
.pdp__stock {
  margin-top: 1.5rem;
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-grey);
}
.pdp__stock i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-gold); flex: none; }
.pdp__stock--out i { background: var(--c-grey); }

.spec-table {
  margin-top: 2rem;
  border-top: 1px solid var(--bone-12);
  border-bottom: 1px solid var(--bone-12);
  padding-block: 1.5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem 1.5rem;
}
.spec-table dt {
  font-size: 0.52rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-grey);
}
.spec-table dd { margin: 0.375rem 0 0; font-size: 0.85rem; }

/* Variant swatches */
.pdp__variants { margin-top: 1.75rem; }
.pdp__variants-label { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-grey); }
.pdp__swatches { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.75rem; }
.pdp__swatch {
  width: 4rem; height: 4rem; padding: 0;
  border: 1px solid var(--bone-25);
  border-radius: 8px;
  overflow: hidden;
  background: var(--c-charcoal);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.3s var(--ease-luxe), box-shadow 0.3s var(--ease-luxe);
}
.pdp__swatch img { width: 100%; height: 100%; object-fit: cover; }
.pdp__swatch-text { font-size: 0.68rem; color: var(--c-offwhite); padding: 0.25rem; text-align: center; line-height: 1.2; }
.pdp__swatch:hover { border-color: var(--c-gold-soft); }
.pdp__swatch.is-active { border-color: var(--c-gold); box-shadow: 0 0 0 1px var(--c-gold); }

.pdp__actions { margin-top: 2rem; display: flex; flex-direction: column; gap: 0.9rem; align-items: stretch; }
/* The qty stepper + Buy now / Add to cart share a row inside .pdp__add; the
   WhatsApp enquiry link sits on its own line below, so .pdp__actions stays a
   column. */

.pdp__wa {
  margin-top: 1.5rem;
  display: inline-flex; align-items: center; gap: 0.75rem;
  font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-gold);
}
.pdp__wa:hover { color: var(--c-gold-soft); }

.pdp__note {
  margin-top: 1.5rem;
  padding-left: 1rem;
  border-left: 1px solid rgba(184,155,94,0.4);
  font-size: 0.8rem;
  color: var(--bone-70);
}

/* --------------------------------------------------------------------------
   16. Static content pages
   -------------------------------------------------------------------------- */
.prose { max-width: 44rem; margin-top: 2.5rem; }
.prose h2 {
  margin-top: 2.5rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 300;
}
.prose h3 { margin-top: 2rem; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-gold); }
.prose p { margin-top: 1rem; font-size: 0.95rem; color: var(--c-grey); }
.prose ul { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.prose li { position: relative; padding-left: 1.25rem; font-size: 0.95rem; color: var(--c-grey); }
.prose li::before {
  content: ''; position: absolute; left: 0; top: 0.6em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--c-gold);
}
.prose a { color: var(--c-gold); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   17. Contact / WhatsApp prompt band
   -------------------------------------------------------------------------- */
.contact-band {
  position: relative;
  overflow: hidden;
  background: var(--c-charcoal);
  padding-block: var(--section-y);
  text-align: center;
}
.contact-band__glow {
  position: absolute; left: 50%; top: 0;
  width: 46rem; height: 30rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(184,155,94,0.1), transparent 65%);
  filter: blur(48px);
  pointer-events: none;
}
.contact-band__inner { position: relative; max-width: 40rem; margin-inline: auto; }
.contact-band h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 0.98;
  margin-top: 1.25rem;
}
.contact-band p { margin-top: 1.5rem; font-size: 0.95rem; color: var(--c-grey); }
.contact-band__actions {
  margin-top: 2.5rem;
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center;
}

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */
.shop-footer {
  border-top: 1px solid var(--bone-12);
  background: var(--c-black);
  padding-top: 5rem;
  /* Clearance so the floating WhatsApp button never sits on the legal links
     when the visitor reaches the very bottom of the page. */
  padding-bottom: 4rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3.5rem 2rem;
}
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 2.5rem; } }
.footer-brand { grid-column: span 2; }
@media (min-width: 1024px) { .footer-brand { grid-column: auto; } }
.footer-brand__name {
  font-family: var(--font-display);
  font-size: 1.75rem; font-weight: 300; letter-spacing: 0.3em; line-height: 1;
}
.footer-brand__tag { margin-top: 0.625rem; font-size: 0.5rem; letter-spacing: 0.42em; color: var(--c-gold); }
.footer-brand__blurb { margin-top: 1.75rem; max-width: 22rem; font-size: 0.85rem; color: var(--c-grey); }
.footer-col h3 {
  font-size: 0.58rem; letter-spacing: 0.28em; text-transform: uppercase;
}
.footer-col ul { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.875rem; }
.footer-col a { font-size: 0.82rem; color: var(--c-grey); transition: color 0.3s var(--ease-luxe); }
.footer-col a:hover { color: var(--c-offwhite); }
.footer-contact dl { margin: 1.5rem 0 0; display: flex; flex-direction: column; gap: 1.25rem; }
.footer-contact dt {
  font-size: 0.55rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(167,167,167,0.6);
}
.footer-contact dd { margin: 0.375rem 0 0; font-size: 0.82rem; color: var(--c-grey); }
.footer-contact dd a:hover { color: var(--c-offwhite); }

.socials { margin-top: 2rem; display: flex; gap: 0.75rem; }
.socials a {
  width: 2.5rem; height: 2.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--bone-12);
  color: var(--c-grey);
  transition: border-color 0.3s var(--ease-luxe), color 0.3s var(--ease-luxe);
}
.socials a:hover { border-color: var(--c-gold); color: var(--c-gold); }

.footer-strip {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--bone-12);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.footer-strip__addr { font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(167,167,167,0.7); }
.pay-list { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.pay-list li {
  border: 1px solid var(--bone-12);
  padding: 0.375rem 0.75rem;
  font-size: 0.55rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-grey);
}
.footer-bottom {
  margin-top: 2rem;
  padding-block: 2rem;
  border-top: 1px solid var(--bone-12);
  display: flex; flex-direction: column-reverse; align-items: center; gap: 1.5rem;
}
@media (min-width: 640px) { .footer-bottom { flex-direction: row; justify-content: space-between; } }
.footer-bottom p, .footer-bottom a {
  font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(167,167,167,0.7);
}
.footer-bottom a:hover { color: var(--c-offwhite); }
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: center; }

/* --------------------------------------------------------------------------
   19. Floating WhatsApp
   -------------------------------------------------------------------------- */
.wa-float {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 55;
  padding-bottom: env(safe-area-inset-bottom);
  opacity: 0;
  visibility: hidden;
  transform: translateY(1rem) scale(0.85);
  transition: opacity 0.45s var(--ease-luxe), transform 0.45s var(--ease-luxe), visibility 0.45s;
}
@media (min-width: 640px) { .wa-float { right: 1.75rem; bottom: 1.75rem; } }
.wa-float.is-visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.wa-float__btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.5rem; height: 3.5rem;
  border-radius: 50%;
  background: var(--c-charcoal);
  border: 1px solid rgba(184,155,94,0.4);
  color: var(--c-gold);
  box-shadow: 0 18px 40px -12px rgba(0,0,0,0.85);
  transition: background-color 0.3s var(--ease-luxe), color 0.3s var(--ease-luxe), border-color 0.3s var(--ease-luxe);
}
.wa-float__btn:hover {
  background: var(--c-gold);
  border-color: var(--c-gold);
  color: var(--c-black);
}
.wa-float__tip {
  position: absolute;
  right: calc(100% + 0.75rem);
  top: 50%;
  transform: translateY(-50%);
  display: none;
  white-space: nowrap;
  padding: 0.5rem 0.875rem;
  background: var(--c-black);
  border: 1px solid var(--bone-12);
  color: var(--c-offwhite);
  font-size: 0.58rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.3s var(--ease-luxe);
  pointer-events: none;
}
@media (min-width: 768px) { .wa-float__tip { display: block; } }
.wa-float__btn:hover .wa-float__tip { opacity: 1; }

/* --------------------------------------------------------------------------
   20. Scroll reveals
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(1.75rem);
  transition: opacity 0.85s var(--ease-luxe), transform 0.85s var(--ease-luxe);
}
.reveal.is-in { opacity: 1; transform: none; }
/* If JS never runs, content must still be visible. */
.no-js .reveal { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   20b. Cart, drawer, checkout & confirmation (Phase 4)
   -------------------------------------------------------------------------- */
.cart-count {
  position: absolute; top: 0.2rem; right: 0.1rem;
  min-width: 1.1rem; height: 1.1rem; padding-inline: 0.25rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--c-gold); color: var(--c-black);
  font-size: 0.6rem; font-weight: 600; letter-spacing: 0;
}
.shop-header__actions .icon-btn { position: relative; }

.cart-backdrop {
  position: fixed; inset: 0; z-index: 60; background: rgb(var(--rgb-ground) / 0.6);
}
.cart-drawer {
  position: fixed; top: 0; right: 0; z-index: 70;
  width: 100%; max-width: 28rem; height: 100svh;
  background: var(--c-charcoal); color: var(--c-offwhite);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 0.4s var(--ease-luxe);
  box-shadow: -1rem 0 3rem rgba(0, 0, 0, 0.5);
}
.cart-drawer.is-open { transform: translateX(0); }
.cart-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem var(--gutter); border-bottom: 1px solid var(--bone-12);
}
.cart-drawer__title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 300; }
.cart-drawer__close { color: var(--c-grey); padding: 0.5rem; }
.cart-drawer__close:hover { color: var(--c-gold); }
.cart-drawer__body { flex: 1; overflow-y: auto; padding: var(--gutter); }
.cart-drawer__empty { text-align: center; padding-block: 3rem; color: var(--c-grey); }
.cart-drawer__empty .btn { margin-top: 1.5rem; }
.cart-drawer__list { display: flex; flex-direction: column; gap: 1.5rem; }
.cart-drawer__foot { padding: 1.25rem var(--gutter); border-top: 1px solid var(--bone-12); }
.cart-drawer__subtotal {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-grey);
}
.cart-drawer__subtotal strong { font-family: var(--font-display); font-size: 1.5rem; color: var(--c-offwhite); letter-spacing: 0; }
.cart-drawer__note { margin: 0.5rem 0 1rem; font-size: 0.8rem; color: var(--c-grey); }
.cart-drawer__foot .btn { margin-top: 0.75rem; }

.cart-line { display: flex; gap: 1rem; align-items: flex-start; }
.cart-line__img { width: 4.5rem; height: 5.625rem; flex-shrink: 0; background: var(--c-graphite); overflow: hidden; }
.cart-line__img img { width: 100%; height: 100%; object-fit: cover; }
.cart-line__info { flex: 1; min-width: 0; }
.cart-line__name { font-family: var(--font-display); font-size: 1.1rem; line-height: 1.2; }
.cart-line__name:hover { color: var(--c-gold); }
.cart-line__price { display: block; margin-top: 0.25rem; font-size: 0.85rem; color: var(--c-grey); }
.cart-line__variant { display: block; margin-top: 0.15rem; font-size: 0.78rem; color: var(--c-gold-soft); }
.cart-line__qty { display: flex; align-items: center; gap: 1rem; margin-top: 0.5rem; }
.cart-line__qty form { display: inline-flex; align-items: center; gap: 0.25rem; }
.cart-line__remove { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-grey); text-decoration: underline; }
.cart-line__remove:hover { color: var(--c-gold); }
.cart-line__total { font-size: 0.9rem; white-space: nowrap; }

.qty-btn {
  width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--bone-25); color: var(--c-offwhite); font-size: 1rem; line-height: 1;
}
.qty-btn:hover { border-color: var(--c-gold); color: var(--c-gold); }
.qty-val { min-width: 1.5rem; text-align: center; font-size: 0.9rem; }

/* Cart page */
.cart-page { padding-block: 2rem 5rem; }
.cart-page__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.cart-list { display: flex; flex-direction: column; gap: 2rem; }
.cart-summary {
  background: var(--c-charcoal); padding: 1.75rem; border: 1px solid var(--bone-12);
  align-self: start; width: 100%;
}
.cart-summary__title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 300; margin-bottom: 1.25rem; }
.cart-summary__row { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.75rem; border-bottom: 1px solid var(--bone-12); font-size: 0.9rem; }
.cart-summary__total { font-family: var(--font-display); font-size: 1.4rem; border-bottom: 0; }
.cart-summary__note { margin: 1rem 0 0; font-size: 0.8rem; color: var(--c-grey); }
.cart-summary .btn { margin-top: 1rem; }

/* Checkout */
.checkout { padding-block: 2rem 5rem; }
.checkout__grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
.checkout__section { border: 0; border-top: 1px solid var(--bone-12); margin: 0; padding: 1.75rem 0; }
.checkout__section:first-of-type { border-top: 0; padding-top: 0; }
.checkout__section legend { padding: 0 0.5rem; font-family: var(--font-display); font-size: 1.3rem; font-weight: 300; color: var(--c-offwhite); }
.field-stack { display: flex; flex-direction: column; gap: 1.25rem; }
.checkout .field { display: flex; flex-direction: column; align-items: stretch; gap: 0.4rem; }
.checkout .field label { font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-grey); }
.checkout .field input,
.checkout .field select,
.checkout .field textarea {
  width: 100%; padding: 0.75rem 0.875rem; background: var(--c-graphite);
  border: 1px solid var(--bone-25); color: var(--c-offwhite); font-size: 0.95rem;
  transition: border-color 0.3s var(--ease-luxe);
}
.checkout .field input:focus, .checkout .field select:focus, .checkout .field textarea:focus { border-color: var(--c-gold); outline: none; }
.checkout .field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--c-grey) 50%), linear-gradient(135deg, var(--c-grey) 50%, transparent 50%);
  background-position: calc(100% - 1.1rem) 55%, calc(100% - 0.75rem) 55%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.checkout .field select option { background: var(--c-charcoal); color: var(--c-offwhite); }
.checkout .form-actions { border-top: 1px solid var(--bone-12); padding-top: 1.5rem; margin-top: 1rem; }
.checkout__summary { background: var(--c-charcoal); padding: 1.75rem; border: 1px solid var(--bone-12); align-self: start; }
.checkout__items { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.checkout__items li { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.9rem; }
.checkout__item-name { color: var(--c-offwhite); }

.form-errors {
  background: rgba(180, 71, 60, 0.12); border: 1px solid var(--c-danger);
  color: var(--c-offwhite); padding: 1rem 1.25rem; margin-bottom: 1.5rem; font-size: 0.9rem;
}
.form-errors > div + div { margin-top: 0.25rem; }

/* Product add-to-cart */
.pdp__add { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.pdp__add .btn { flex: 1; min-width: 10rem; }
.pdp__qty { display: inline-flex; align-items: center; gap: 0.25rem; }
.pdp__qty .qty-btn { width: 2.5rem; height: 2.75rem; }
.pdp__qty input { width: 3rem; height: 2.75rem; text-align: center; background: transparent; border: 1px solid var(--bone-25); color: var(--c-offwhite); }
.pdp__qty input:focus { border-color: var(--c-gold); outline: none; }

/* Buy now + Add to cart sit together; qty stepper leads the row. */
.pdp__buttons { display: flex; gap: 0.75rem; flex-wrap: wrap; flex: 1 1 16rem; }
.pdp__buttons .btn { flex: 1 1 8rem; min-width: 8rem; }
.pdp__wa-link {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.25rem;
  font-size: 0.72rem; color: var(--c-grey);
}
.pdp__wa-link:hover { color: var(--c-gold); }

/* ── Buy Now express popup ─────────────────────────────────────────────── */
.buynow {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem;
}
.buynow__backdrop {
  position: absolute; inset: 0;
  background: rgb(var(--rgb-ground) / 0.74);
  backdrop-filter: blur(4px);
  opacity: 0; transition: opacity 0.26s var(--ease-luxe);
}
.buynow.is-open .buynow__backdrop { opacity: 1; }
.buynow__dialog {
  position: relative; width: 100%; max-width: 30rem;
  max-height: calc(100dvh - 2.5rem); overflow-y: auto;
  background: var(--c-charcoal);
  border: 1px solid var(--bone-12);
  padding: 2rem 1.75rem;
  opacity: 0; transform: translateY(12px) scale(0.985);
  transition: opacity 0.26s var(--ease-luxe), transform 0.3s var(--ease-luxe);
}
.buynow.is-open .buynow__dialog { opacity: 1; transform: none; }
.buynow__close {
  position: absolute; top: 0.9rem; right: 0.9rem;
  width: 2.25rem; height: 2.25rem;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-grey); transition: color 0.3s var(--ease-luxe);
}
.buynow__close:hover { color: var(--c-gold); }
.buynow__title {
  font-family: var(--font-display); font-weight: 300; font-size: 2rem; line-height: 1;
  margin-top: 0.5rem; color: var(--c-offwhite);
}
.buynow__product { margin-top: 0.6rem; font-size: 0.85rem; color: var(--c-grey); }
.buynow__form { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.9rem; }
.buynow__form .field { display: flex; flex-direction: column; align-items: stretch; gap: 0.4rem; }
.buynow__form label { font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-grey); }
.buynow__form input,
.buynow__form select,
.buynow__form textarea {
  width: 100%; padding: 0.72rem 0.85rem; font-size: 0.9rem;
  background: rgb(var(--rgb-ground) / 0.4);
  border: 1px solid var(--bone-25); color: var(--c-offwhite);
  transition: border-color 0.25s var(--ease-luxe);
}
.buynow__form input:focus,
.buynow__form select:focus,
.buynow__form textarea:focus { border-color: var(--c-gold); outline: none; }
.buynow__form textarea { resize: vertical; }
.buynow__form select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--c-grey) 50%),
                    linear-gradient(135deg, var(--c-grey) 50%, transparent 50%);
  background-position: calc(100% - 1.1rem) 55%, calc(100% - 0.75rem) 55%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2.25rem;
}
.buynow__form select option { background: var(--c-charcoal); color: var(--c-offwhite); }
.buynow__summary {
  display: flex; flex-direction: column; gap: 0.5rem;
  border-top: 1px solid var(--bone-12); padding-top: 1rem; margin-top: 0.25rem;
}
.buynow__summary > div { display: flex; align-items: baseline; justify-content: space-between; }
.buynow__summary dt, .buynow__summary dd { margin: 0; font-size: 0.85rem; color: var(--c-grey); }
.buynow__total { border-top: 1px solid var(--bone-12); padding-top: 0.75rem; }
.buynow__total dt { color: var(--c-offwhite); }
.buynow__total dd { font-family: var(--font-display); font-size: 1.4rem; color: var(--c-offwhite); }
.buynow__fine { margin: 0; font-size: 0.68rem; color: var(--c-grey); line-height: 1.5; }

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

/* Confirmation */
.confirmation { padding-block: 2rem 5rem; }
.confirmation__head { text-align: left; margin-bottom: 2.5rem; }
.confirmation__grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
.confirmation__summary { background: var(--c-charcoal); padding: 1.75rem; border: 1px solid var(--bone-12); }
.confirmation__hint { margin: 0.75rem 0 0; font-size: 0.8rem; color: var(--c-grey); text-align: center; }
.confirmation__next h2 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 300; margin-bottom: 1.25rem; }
.next-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.next-steps li { padding-left: 1.75rem; position: relative; font-size: 0.95rem; color: var(--c-offwhite); }
.next-steps li::before { content: attr(data-n); position: absolute; left: 0; top: 0.1rem; font-family: var(--font-display); font-size: 1.1rem; color: var(--c-gold); }

@media (min-width: 760px) {
  .cart-page__grid { grid-template-columns: 1fr 20rem; }
  .checkout__grid { grid-template-columns: 1fr 20rem; }
  .confirmation__grid { grid-template-columns: 1fr 1fr; }
}

/* Flash messages (storefront) */
.shop-flash { padding: 1rem var(--gutter); max-width: var(--container); margin: 0 auto; display: flex; flex-direction: column; gap: 0.5rem; }
.shop-flash__item { display: flex; gap: 0.5rem; align-items: baseline; font-size: 0.85rem; padding: 0.75rem 1rem; border: 1px solid var(--bone-25); }
.shop-flash__success { border-color: rgba(47, 125, 91, 0.5); color: var(--c-offwhite); }
.shop-flash__error { border-color: var(--c-danger); background: rgba(180, 71, 60, 0.1); }
.shop-flash__info { border-color: var(--bone-25); }
.shop-flash__item strong { font-weight: 500; }

/* --------------------------------------------------------------------------
   21. Maintenance & error shells
   -------------------------------------------------------------------------- */
.maintenance, .error-page {
  min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  padding: var(--gutter);
  text-align: center;
}
.maintenance-shell, .error-shell { max-width: 32rem; }
.maintenance h1, .error-shell h1 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 300;
  letter-spacing: 0.1em;
}
.maintenance p, .error-shell p { margin-top: 1.25rem; color: var(--c-grey); font-size: 0.95rem; }
.maintenance .btn, .error-shell .btn { margin-top: 2rem; }
.error-code {
  font-family: var(--font-display);
  font-size: 4rem; font-weight: 300; color: var(--c-gold); line-height: 1;
}

/* --------------------------------------------------------------------------
   22. Reduced motion — collapse to the final frame, don't merely speed up
   -------------------------------------------------------------------------- */
@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;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .marquee__track { animation: none; }
  .hero__scroll-rail::after { animation: none; }
  /* The pinned stage is never rendered under reduced motion (server-side),
     so the vertical narrative shows instead. */
  .showcase__stage { display: none !important; }
  .showcase__stack { display: block !important; }
  .pcard__view { transform: none !important; opacity: 1 !important; }
}