/* ==========================================================================
   LUX ON CALL — Marble & Gold
   A calm marble surface system with hairline-thin gold detailing.
   Gold is never a fill: it lives in 1px rules, rings, and micro-marks.
   ========================================================================== */

:root {
  /* ---- Marble (light) ---- */
  --marble-100: #fdfcfa;
  --marble-200: #f7f4ef;
  --marble-300: #efeae2;
  --marble-400: #e4ded3;
  --marble-500: #d6cec1;

  /* ---- Ink (dark marble) ---- */
  --ink-900: #131210;
  --ink-800: #1c1a17;
  --ink-700: #2a2723;
  --ink-600: #3d3933;
  --ink-500: #57514a;
  --ink-400: #7c756a;
  --ink-300: #a49c90;

  /* ---- Gold ---- */
  --gold-700: #8a6d33;
  --gold-600: #a6854a;
  --gold-500: #bd9d61;
  --gold-400: #d2b77f;
  --gold-300: #e9d6a8;
  --gold-grad: linear-gradient(135deg, #8a6d33 0%, #d6bd82 20%, #f3e7c6 36%, #bd9d61 54%, #8a6d33 76%, #d2b77f 100%);
  --gold-rule: linear-gradient(90deg, rgba(189,157,97,0) 0%, rgba(189,157,97,.45) 15%, rgba(233,214,168,.9) 50%, rgba(189,157,97,.45) 85%, rgba(189,157,97,0) 100%);
  --gold-glow: 0 0 0 1px rgba(189,157,97,.45), 0 0 18px -6px rgba(189,157,97,.55);

  --hairline: rgba(19,18,16,.10);
  --hairline-strong: rgba(19,18,16,.16);
  --hairline-gold: rgba(189,157,97,.38);
  --hairline-light: rgba(255,255,255,.12);

  --success: #4a7a5b;
  --error: #a8443c;

  /* ---- Type ---- */
  --font-display: "Cormorant Garamond", "Didot", "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* ---- Fluid type scale (375px → 1440px, no step jumps) ---- */
  --step--2: clamp(0.625rem, 0.60rem + 0.10vw, 0.6875rem);  /* 10 → 11 */
  --step--1: clamp(0.75rem,  0.72rem + 0.13vw, 0.8125rem);  /* 12 → 13 */
  --step-0:  clamp(0.875rem, 0.85rem + 0.13vw, 0.9375rem);  /* 14 → 15 */
  --step-1:  clamp(1rem,     0.95rem + 0.21vw, 1.125rem);   /* 16 → 18 */
  --step-2:  clamp(1.1875rem, 1.08rem + 0.45vw, 1.5rem);    /* 19 → 24 */
  --step-3:  clamp(1.375rem, 1.18rem + 0.84vw, 2rem);       /* 22 → 32 */
  --step-4:  clamp(1.75rem,  1.44rem + 1.31vw, 2.75rem);    /* 28 → 44 */
  --step-5:  clamp(2rem,     1.44rem + 2.39vw, 3.75rem);    /* 32 → 60 */
  --step-6:  clamp(2.75rem,  1.34rem + 6.02vw, 6.5rem);     /* 44 → 104 */

  /* ---- Space: fixed scale for component internals ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px;
  /* The two largest steps breathe with the viewport instead of crushing phones */
  --space-20: clamp(56px, 6.4vw, 80px);
  --space-24: clamp(64px, 8vw, 104px);

  /* ---- Space: fluid rhythm for page-level layout ---- */
  --gutter: clamp(16px, 3.2vw, 32px);
  --section-y: clamp(56px, 7.4vw, 104px);
  --flow-lg: clamp(32px, 4.4vw, 64px);
  --flow-md: clamp(20px, 2.8vw, 40px);
  --flow-sm: clamp(12px, 1.6vw, 24px);

  /* ---- Fluid grids: min card width; column caps come from the track math ---- */
  --card-min: clamp(140px, 26vw, 240px);
  --cat-min: clamp(150px, 24vw, 280px);
  --grid-gap-x: clamp(12px, 1.5vw, 20px);
  --grid-gap-y: clamp(28px, 3.2vw, 44px);

  /* ---- Shape ---- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-card: 8px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(19,18,16,.04);
  --shadow-sm: 0 2px 8px rgba(19,18,16,.05), 0 1px 2px rgba(19,18,16,.04);
  --shadow-md: 0 10px 30px -12px rgba(19,18,16,.18), 0 2px 6px rgba(19,18,16,.04);
  --shadow-lg: 0 30px 60px -24px rgba(19,18,16,.28), 0 8px 20px -12px rgba(19,18,16,.12);

  --ease-micro: 140ms cubic-bezier(.4,0,.2,1);
  --ease-base: 260ms cubic-bezier(.32,.72,0,1);
  --ease-page: 520ms cubic-bezier(.32,.72,0,1);

  --container: 1380px;
  --header-h: 78px;

  /* ---- Marble textures — contour-line veining (self-contained SVG) ---- */
  --veins-broad: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1500' height='1500'%3E%3Cfilter id='v' x='-15%25' y='-15%25' width='130%25' height='130%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0021 0.0054' numOctaves='5' seed='11' result='n'/%3E%3CfeColorMatrix in='n' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0' result='a'/%3E%3CfeComponentTransfer in='a' result='band'%3E%3CfeFuncA type='table' tableValues='0 0 1 0 0'/%3E%3C/feComponentTransfer%3E%3CfeGaussianBlur in='band' stdDeviation='2.0' result='sm'/%3E%3CfeComponentTransfer in='sm' result='m'%3E%3CfeFuncA type='linear' slope='1.9' intercept='-0.1'/%3E%3C/feComponentTransfer%3E%3CfeFlood flood-color='%236f6757' result='c'/%3E%3CfeComposite in='c' in2='m' operator='in'/%3E%3C/filter%3E%3Crect width='1500' height='1500' filter='url(%23v)'/%3E%3C/svg%3E");
  --veins-fine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='950' height='950'%3E%3Cfilter id='v' x='-15%25' y='-15%25' width='130%25' height='130%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0072 0.0165' numOctaves='5' seed='29' result='n'/%3E%3CfeColorMatrix in='n' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0' result='a'/%3E%3CfeComponentTransfer in='a' result='band'%3E%3CfeFuncA type='table' tableValues='0 0 1 0 0'/%3E%3C/feComponentTransfer%3E%3CfeGaussianBlur in='band' stdDeviation='0.7' result='sm'/%3E%3CfeComponentTransfer in='sm' result='m'%3E%3CfeFuncA type='linear' slope='2.8' intercept='-0.3'/%3E%3C/feComponentTransfer%3E%3CfeFlood flood-color='%235d5648' result='c'/%3E%3CfeComposite in='c' in2='m' operator='in'/%3E%3C/filter%3E%3Crect width='950' height='950' filter='url(%23v)'/%3E%3C/svg%3E");
  --veins-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1050' height='1050'%3E%3Cfilter id='v' x='-15%25' y='-15%25' width='130%25' height='130%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0044 0.0112' numOctaves='6' seed='53' result='n'/%3E%3CfeColorMatrix in='n' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0' result='a'/%3E%3CfeComponentTransfer in='a' result='band'%3E%3CfeFuncA type='table' tableValues='0 0 1 0 0'/%3E%3C/feComponentTransfer%3E%3CfeGaussianBlur in='band' stdDeviation='0.45' result='sm'/%3E%3CfeComponentTransfer in='sm' result='m'%3E%3CfeFuncA type='linear' slope='3.2' intercept='-0.42'/%3E%3C/feComponentTransfer%3E%3CfeFlood flood-color='%23c8a86c' result='c'/%3E%3CfeComposite in='c' in2='m' operator='in'/%3E%3C/filter%3E%3Crect width='1050' height='1050' filter='url(%23v)'/%3E%3C/svg%3E");
  --veins-gold-broad: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='1400'%3E%3Cfilter id='v' x='-15%25' y='-15%25' width='130%25' height='130%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0019 0.0049' numOctaves='5' seed='71' result='n'/%3E%3CfeColorMatrix in='n' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0' result='a'/%3E%3CfeComponentTransfer in='a' result='band'%3E%3CfeFuncA type='table' tableValues='0 0 1 0 0'/%3E%3C/feComponentTransfer%3E%3CfeGaussianBlur in='band' stdDeviation='1.4' result='sm'/%3E%3CfeComponentTransfer in='sm' result='m'%3E%3CfeFuncA type='linear' slope='2.4' intercept='-0.26'/%3E%3C/feComponentTransfer%3E%3CfeFlood flood-color='%23b9974f' result='c'/%3E%3CfeComposite in='c' in2='m' operator='in'/%3E%3C/filter%3E%3Crect width='1400' height='1400' filter='url(%23v)'/%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

/* The slab itself lives on <html> so the two vein layers can sit above it
   at different angles — real marble never has one single vein direction. */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background-color: var(--marble-100);
  background-image:
    radial-gradient(130% 95% at 10% -20%, rgba(255,255,255,.96), rgba(255,255,255,0) 58%),
    radial-gradient(85% 65% at 95% 4%, rgba(252,248,241,.9), rgba(252,248,241,0) 62%),
    radial-gradient(120% 85% at 45% 115%, rgba(228,221,208,.5), rgba(228,221,208,0) 62%),
    linear-gradient(168deg, #fdfcfa 0%, #f8f5f0 46%, #f3eee7 100%);
  background-attachment: fixed;
  background-size: cover;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink-800);
  background: transparent;
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* Broad, soft veining — the shape of the stone */
body::before {
  content: "";
  position: fixed;
  inset: -25%;
  z-index: -2;
  pointer-events: none;
  background-image: var(--veins-broad);
  background-size: 1700px 1700px;
  opacity: .34;
  /* The two vein layers drift at different rates, which is what gives the
     slab thickness instead of reading as a flat printed pattern. */
  transform: rotate(-9deg) translate3d(0, var(--vein-a, 0px), 0);
  will-change: transform;
}
/* Finer cross-veins at a different angle, kept whisper-quiet */
body::after {
  content: "";
  position: fixed;
  inset: -25%;
  z-index: -1;
  pointer-events: none;
  background-image: var(--veins-fine);
  background-size: 1150px 1150px;
  opacity: .2;
  transform: rotate(14deg) translate3d(0, var(--vein-b, 0px), 0);
  will-change: transform;
}

/* `hidden` must win over component display rules (grid/flex) */
[hidden] { display: none !important; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; padding: 0; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
input, select, textarea { font-family: inherit; font-size: 16px; }

::selection { background: rgba(189,157,97,.28); }

:focus-visible {
  outline: 1px solid var(--gold-500);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* ==========================================================================
   Surfaces & ornaments
   ========================================================================== */
.marble-dark {
  position: relative;
  background:
    radial-gradient(110% 90% at 78% 8%, #2c2925 0%, rgba(44,41,37,0) 58%),
    linear-gradient(158deg, #1e1c19 0%, #131210 55%, #1a1815 100%);
  color: var(--marble-200);
  isolation: isolate;
}
/* Three vein passes at different scales — broad gold structure, fine gold
   filaments, then a pale cross-hatch. That layering is what stops dark stone
   from reading as a single flat noise. */
.marble-dark::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--veins-gold), var(--veins-gold-broad), var(--veins-fine);
  background-size: 1050px 1050px, 1500px 1500px, 900px 900px;
  background-position: 0 0, 30% 20%, 70% 60%;
  opacity: .5;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}
/* Photographic grain keeps the dark stone from banding */
.marble-dark::after {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--grain);
  background-size: 180px 180px;
  opacity: .05;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
}
.marble-dark > * { position: relative; z-index: 1; }

.marble-panel {
  position: relative;
  background: linear-gradient(150deg, #fffefc 0%, var(--marble-200) 60%, var(--marble-300) 100%);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.marble-panel::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--veins-fine);
  background-size: 820px 820px;
  opacity: .22;
  pointer-events: none;
}
.marble-panel > * { position: relative; }

.gold-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--gold-500);
  flex: 0 0 auto;
}

/* ==========================================================================
   Polished stone
   Three things separate real polished marble from a flat texture: a moving
   specular band, a gloss that answers the light source (the cursor), and
   veining that sits *under* both. Every effect here animates transform or
   opacity only, so the stone stays on the compositor.
   ========================================================================== */

/* Light layers are real child elements, not pseudo-elements: the marble
   surfaces already spend ::before on veining and ::after on grain. */
.stone { position: relative; isolation: isolate; overflow: hidden; }

/* A slow band of light travelling across the slab. */
.stone > .stone-sheen {
  position: absolute;
  top: -60%; bottom: -60%; left: -40%;
  width: 24%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(100deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.10) 36%,
    rgba(255,255,255,.58) 50%,
    rgba(255,255,255,.10) 64%,
    rgba(255,255,255,0) 100%);
  filter: blur(7px);
  transform: rotate(9deg) translate3d(0,0,0);
  animation: sheen 11s cubic-bezier(.42,0,.24,1) infinite;
}
/* On dark stone the highlight carries the gold, not white. */
.marble-dark > .stone-sheen {
  background: linear-gradient(100deg,
    rgba(233,214,168,0) 0%,
    rgba(233,214,168,.14) 38%,
    rgba(255,248,232,.42) 50%,
    rgba(233,214,168,.14) 62%,
    rgba(233,214,168,0) 100%);
}
@keyframes sheen {
  0%        { transform: rotate(9deg) translate3d(0,0,0);     opacity: 0; }
  10%       { opacity: 1; }
  58%       { opacity: 1; }
  72%, 100% { transform: rotate(9deg) translate3d(560%,0,0); opacity: 0; }
}

/* Gloss that tracks the pointer — the stone catches light where you look. */
.stone > .stone-gloss {
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: var(--gloss-o, 0);
  transition: opacity .45s ease;
  background: radial-gradient(440px circle at var(--gx, 50%) var(--gy, 50%),
    rgba(255,255,255,.34), rgba(255,255,255,.09) 38%, rgba(255,255,255,0) 66%);
  mix-blend-mode: soft-light;
}
.marble-dark > .stone-gloss {
  background: radial-gradient(520px circle at var(--gx, 50%) var(--gy, 50%),
    rgba(233,214,168,.26), rgba(189,157,97,.08) 40%, rgba(189,157,97,0) 68%);
  mix-blend-mode: screen;
}

/* Type carved out of the stone itself. */
.marble-text {
  background-color: #e8e1d6;
  background-image:
    var(--veins-gold),
    var(--veins-fine),
    linear-gradient(146deg, #ffffff 0%, #f3eee6 38%, #ded5c6 72%, #f6f2ec 100%);
  background-size: 460px 460px, 380px 380px, 100% 100%;
  background-position: 12% 30%, 60% 10%, 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.6))
    drop-shadow(0 -1px 1px rgba(19,18,16,.16));
}
/* On dark stone the letters read as polished inlay. */
.marble-dark .marble-text {
  background-color: #cfc6b4;
  background-image:
    var(--veins-gold),
    linear-gradient(146deg, #fbf5e8 0%, #d9c99f 30%, #a98f57 58%, #f0e4c6 82%, #c3aa74 100%);
  background-size: 420px 420px, 100% 100%;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.55));
}

/* ==========================================================================
   Layout
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding: var(--section-y) 0; position: relative; }
.section + .section { padding-top: 0; }

.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
  flex-wrap: wrap;
  margin-bottom: var(--flow-md);
}
.section-header h2 {
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.section-header h2 em { font-style: italic; color: var(--gold-700); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-700);
  margin-bottom: var(--space-3);
}
.eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: linear-gradient(90deg, rgba(189,157,97,0), var(--gold-500));
}

.section-link {
  position: relative;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-700);
  padding-bottom: 6px;
  white-space: nowrap;
  transition: color var(--ease-micro);
}
.section-link::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--gold-500);
  transform: scaleX(1);
  transform-origin: left;
  opacity: .55;
  transition: opacity var(--ease-base), transform var(--ease-base);
}
.section-link:hover { color: var(--gold-700); }
.section-link:hover::after { opacity: 1; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 50px;
  padding: 0 var(--space-8);
  border-radius: var(--radius-xs);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid transparent;
  overflow: hidden;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--ease-base), color var(--ease-base),
              border-color var(--ease-base), transform var(--ease-micro), box-shadow var(--ease-base);
}
.btn > * { position: relative; z-index: 1; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .38; cursor: not-allowed; transform: none; }

/* Gold sheen that sweeps across on hover — the only "shine" in the system */
.btn::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(233,214,168,.35), transparent);
  transform: skewX(-18deg);
  opacity: 0;
  transition: none;
}
.btn:hover::after { animation: sheen 780ms cubic-bezier(.32,.72,0,1); }
@keyframes sheen {
  0%   { left: -60%; opacity: 0; }
  25%  { opacity: 1; }
  100% { left: 120%; opacity: 0; }
}

.btn-primary {
  background: linear-gradient(160deg, var(--ink-700), var(--ink-900));
  color: var(--marble-100);
  box-shadow: inset 0 0 0 1px rgba(189,157,97,.28), var(--shadow-sm);
}
.btn-primary:hover {
  box-shadow: inset 0 0 0 1px rgba(210,183,127,.75), 0 14px 28px -16px rgba(19,18,16,.55);
}

/* Ivory button with a true gold hairline border */
.btn-accent {
  background:
    linear-gradient(150deg, #fffdf9, var(--marble-200)) padding-box,
    var(--gold-grad) border-box;
  border: 1px solid transparent;
  color: var(--ink-900);
  box-shadow: var(--shadow-xs);
}
.btn-accent:hover { box-shadow: var(--gold-glow); }

.btn-outline {
  background: transparent;
  color: var(--ink-800);
  border-color: var(--hairline-strong);
}
.btn-outline:hover { border-color: var(--gold-500); color: var(--gold-700); }

.btn-ghost { background: transparent; color: var(--ink-600); }
.btn-ghost:hover { color: var(--gold-700); background: rgba(189,157,97,.07); }

.btn-on-dark {
  background: rgba(255,255,255,.04);
  color: var(--marble-100);
  border-color: rgba(233,214,168,.45);
  backdrop-filter: blur(6px);
}
.btn-on-dark:hover { border-color: var(--gold-300); background: rgba(233,214,168,.12); }

.btn-sm { min-height: 40px; padding: 0 var(--space-5); font-size: 10.5px; letter-spacing: 0.14em; }
.btn-lg { min-height: 56px; padding: 0 var(--space-10); }
.btn-block { width: 100%; }

.btn-icon {
  width: 50px; height: 50px; min-height: 50px; padding: 0;
  border-radius: var(--radius-xs);
  background: linear-gradient(150deg, #fffdf9, var(--marble-200)) padding-box,
              var(--gold-grad) border-box;
  border: 1px solid transparent;
  color: var(--ink-800);
}
.btn-icon:hover { box-shadow: var(--gold-glow); color: var(--gold-700); }

/* ==========================================================================
   Announcement bar + header
   ========================================================================== */
.announce-bar {
  position: relative;
  background: var(--ink-900);
  color: rgba(247,244,239,.78);
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 9px var(--space-4);
  overflow: hidden;
}
.announce-bar::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--gold-rule);
  opacity: .55;
}
.announce-bar strong { color: var(--gold-300); font-weight: 500; }
.announce-bar .sep { color: var(--gold-600); margin: 0 8px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250,247,242,.82);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid var(--hairline);
  transition: box-shadow var(--ease-base), background var(--ease-base);
}
.site-header::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--gold-rule);
  opacity: 0;
  transition: opacity var(--ease-base);
}
.site-header.is-stuck { box-shadow: 0 12px 30px -24px rgba(19,18,16,.5); }
.site-header.is-stuck::after { opacity: .9; }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  gap: var(--space-6);
}

.logo {
  font-family: var(--font-display);
  /* "LUX ON CALL" is a long wordmark — tracking stays generous for the luxury
     read, but scales with the viewport so it never crowds the header. */
  font-size: clamp(17px, 1.5vw, 23px);
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1;
  padding-left: 4px;
  white-space: nowrap;
  color: var(--ink-900);
}
.logo .mark {
  display: inline-block;
  width: 5px; height: 5px;
  margin-left: -6px;
  border-radius: 50%;
  background: var(--gold-500);
  vertical-align: 6px;
}

.main-nav { display: flex; gap: var(--space-8); }
.main-nav a {
  position: relative;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-600);
  padding: var(--space-3) 0;
  transition: color var(--ease-micro);
}
.main-nav a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 6px;
  height: 1px;
  background: var(--gold-500);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--ease-base);
}
.main-nav a:hover { color: var(--ink-900); }
.main-nav a:hover::after, .main-nav a.active::after { transform: scaleX(1); }
.main-nav a.active { color: var(--ink-900); }

.header-actions { display: flex; align-items: center; gap: var(--space-2); }

.search-wrap { position: relative; }
.search-box {
  display: flex; align-items: center; gap: var(--space-2);
  background: rgba(255,255,255,.5);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  padding: 0 var(--space-4);
  height: 42px;
  width: 230px;
  transition: border-color var(--ease-base), box-shadow var(--ease-base), width var(--ease-base), background var(--ease-base);
}
.search-box:focus-within {
  border-color: var(--hairline-gold);
  box-shadow: var(--gold-glow);
  background: #fff;
  width: 280px;
}
.search-box input {
  border: none; background: transparent; outline: none; width: 100%;
  font-size: 13px; letter-spacing: .01em; color: var(--ink-800);
}
.search-box input::placeholder { color: var(--ink-300); }
.search-box svg { flex-shrink: 0; color: var(--ink-400); }

.icon-btn {
  position: relative;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--ink-700);
  -webkit-tap-highlight-color: transparent;
  transition: color var(--ease-micro), background var(--ease-micro);
}
.icon-btn::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid transparent;
  transition: border-color var(--ease-base);
}
.icon-btn:hover { color: var(--gold-700); }
.icon-btn:hover::before { border-color: var(--hairline-gold); }
.icon-btn.is-active { color: var(--gold-700); }

.icon-badge {
  position: absolute; top: 3px; right: 2px;
  background: var(--ink-900); color: var(--gold-300);
  font-size: 9.5px; font-weight: 600; letter-spacing: .02em;
  min-width: 17px; height: 17px; border-radius: var(--radius-pill);
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
  box-shadow: 0 0 0 2px var(--marble-200);
}

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  color: var(--ink-800);
}

/* ---- Mobile drawer nav ---- */
.mobile-nav-panel {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(420px, 88vw);
  z-index: 210;
  display: flex;
  flex-direction: column;
  padding: var(--space-6) var(--space-6) calc(var(--space-8) + env(safe-area-inset-bottom));
  background: linear-gradient(160deg, var(--marble-100), var(--marble-300));
  transform: translateX(100%);
  transition: transform var(--ease-page);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-nav-panel::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--veins-fine);
  background-size: 820px 820px;
  opacity: .24;
  pointer-events: none;
}
.mobile-nav-panel > * { position: relative; }
.mobile-nav-panel.open { transform: translateX(0); }

.mobile-nav-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--space-5);
}
.mobile-search { position: relative; margin-bottom: var(--space-5); }
.mobile-search .search-box { width: 100%; height: 48px; background: rgba(255,255,255,.6); }
.mobile-search .search-suggestions { left: 0; right: 0; width: auto; }

.mobile-nav-links { display: flex; flex-direction: column; }
.mobile-nav-links a {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 500;
  letter-spacing: .01em;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink-800);
  transition: color var(--ease-micro), padding-left var(--ease-base);
}
.mobile-nav-links a span { font-family: var(--font-sans); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-600); }
.mobile-nav-links a:active { color: var(--gold-700); padding-left: 6px; }
.mobile-nav-foot { margin-top: auto; padding-top: var(--space-8); }
.mobile-nav-foot .row { display: flex; gap: var(--space-3); }
.mobile-nav-foot .row .btn { flex: 1; }
.mobile-nav-meta {
  margin-top: var(--space-5);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-400);
  display: flex; align-items: center; gap: var(--space-2);
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: min(88vh, 820px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: .34;
  filter: grayscale(.35) contrast(1.05);
  animation: heroPan 26s ease-in-out infinite alternate;
}
@keyframes heroPan {
  from { transform: scale(1.04) translate3d(0,0,0); }
  to   { transform: scale(1.12) translate3d(-1.5%, -1.5%, 0); }
}
.hero-veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(19,18,16,.55) 0%, rgba(19,18,16,.25) 35%, rgba(19,18,16,.88) 100%),
    radial-gradient(80% 60% at 20% 100%, rgba(19,18,16,.7), transparent 70%);
}
.hero .container { position: relative; z-index: 2; width: 100%; }
.hero-content {
  color: var(--marble-100);
  padding: var(--space-24) 0 var(--space-16);
  max-width: 720px;
}
.hero .eyebrow { color: var(--gold-300); }
.hero .eyebrow::before { background: linear-gradient(90deg, rgba(233,214,168,0), var(--gold-300)); }
.hero h1 {
  font-family: var(--font-display);
  font-size: var(--step-6);
  line-height: .98;
  font-weight: 400;
  letter-spacing: -0.015em;
  margin-bottom: var(--space-5);
}
.hero h1 em {
  font-style: italic;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p {
  font-size: var(--step-1);
  color: rgba(247,244,239,.68);
  max-width: 46ch;
  margin-bottom: var(--space-8);
  text-wrap: pretty;
}
.hero-cta { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.hero-content > * { animation: riseIn 900ms cubic-bezier(.32,.72,0,1) both; }
.hero-content > *:nth-child(2) { animation-delay: 90ms; }
.hero-content > *:nth-child(3) { animation-delay: 170ms; }
.hero-content > *:nth-child(4) { animation-delay: 250ms; }
@keyframes riseIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

.hero-meta {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  border-top: 1px solid rgba(233,214,168,.2);
  background: rgba(19,18,16,.35);
  backdrop-filter: blur(8px);
}
.hero-meta .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3) var(--space-6); padding-top: 14px; padding-bottom: 14px; }
.hero-meta span {
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(247,244,239,.6);
  display: flex; align-items: center; gap: 10px;
}
.hero-meta span b { color: var(--gold-300); font-weight: 500; }

/* ==========================================================================
   Advantages
   ========================================================================== */
.advantages {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: rgba(255,255,255,.35);
}
.advantages .container {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}
.advantage {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-2) clamp(8px, 1.6vw, 20px);
  position: relative;
  min-width: 0;
}
.advantage + .advantage::before {
  content: "";
  position: absolute; left: 0; top: 10%; bottom: 10%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--hairline-gold), transparent);
}
.advantage svg { color: var(--gold-600); flex-shrink: 0; }
.advantage strong { display: block; font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.advantage span { display: block; font-size: 11.5px; color: var(--ink-400); }

/* ==========================================================================
   Category cards
   ========================================================================== */
/* Column-capped fluid track: never more than 4 columns, never narrower than --cat-min */
.categories-grid {
  display: grid;
  gap: var(--grid-gap-x);
  grid-template-columns: repeat(auto-fill, minmax(max(var(--cat-min), (100% - 3 * var(--grid-gap-x)) / 4), 1fr));
}
.category-card {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 3/4;
  background: var(--marble-300);
  isolation: isolate;
  transition: transform var(--ease-base), box-shadow var(--ease-base);
}
.category-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.category-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.2);
  transition: transform var(--ease-page), filter var(--ease-page);
}
.category-card:hover img { transform: scale(1.06); filter: grayscale(0); }
.cat-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(19,18,16,.78) 0%, rgba(19,18,16,.15) 45%, rgba(19,18,16,0) 70%);
}
/* Inset gold hairline that only reveals on hover */
.category-card::after {
  content: "";
  position: absolute; inset: 10px;
  border: 1px solid rgba(233,214,168,.55);
  border-radius: var(--radius-sm);
  opacity: 0;
  transform: scale(1.02);
  transition: opacity var(--ease-base), transform var(--ease-base);
  pointer-events: none;
}
.category-card:hover::after { opacity: 1; transform: scale(1); }
.cat-label {
  position: absolute; left: var(--space-5); right: var(--space-5); bottom: var(--space-5);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 500;
  line-height: 1.2;
}
.cat-label span {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-sans);
  font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.66);
  margin-top: 8px;
}
.cat-label span::before { content: ""; width: 16px; height: 1px; background: var(--gold-400); }

/* ==========================================================================
   Product card
   ========================================================================== */
.product-grid {
  display: grid;
  gap: var(--grid-gap-y) var(--grid-gap-x);
  grid-template-columns: repeat(auto-fill, minmax(max(var(--card-min), (100% - 3 * var(--grid-gap-x)) / 4), 1fr));
}
.product-card { position: relative; display: flex; flex-direction: column; }

.product-media {
  position: relative;
  display: block;
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 3/4;
  background: var(--marble-300);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-xs);
}
.product-media::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(19,18,16,.06);
  pointer-events: none;
  z-index: 3;
  transition: box-shadow var(--ease-base);
}
.product-card:hover .product-media::after { box-shadow: inset 0 0 0 1px rgba(189,157,97,.55); }
.product-media .media-link { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.product-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: opacity var(--ease-base), transform var(--ease-page);
}
.product-media .img-secondary { opacity: 0; }
.product-card:hover .img-primary { opacity: 0; transform: scale(1.05); }
.product-card:hover .img-secondary { opacity: 1; transform: scale(1.05); }

.product-badges {
  position: absolute; top: var(--space-3); left: var(--space-3);
  display: flex; flex-direction: column; gap: 6px; z-index: 4;
}
.badge {
  font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--radius-xs);
  width: fit-content;
  backdrop-filter: blur(6px);
  background: rgba(253,252,250,.9);
  color: var(--ink-800);
  box-shadow: inset 0 0 0 1px rgba(189,157,97,.5);
}
.badge-sale { background: rgba(19,18,16,.9); color: var(--gold-300); box-shadow: inset 0 0 0 1px rgba(189,157,97,.6); }
.badge-out { background: rgba(233,229,222,.92); color: var(--ink-400); box-shadow: inset 0 0 0 1px var(--hairline); }

.wishlist-btn {
  position: absolute; top: var(--space-3); right: var(--space-3); z-index: 4;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(253,252,250,.88);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-700);
  box-shadow: inset 0 0 0 1px rgba(19,18,16,.06);
  transition: transform var(--ease-micro), color var(--ease-micro), box-shadow var(--ease-micro);
}
.wishlist-btn:hover { transform: scale(1.06); color: var(--gold-700); box-shadow: inset 0 0 0 1px rgba(189,157,97,.6); }
.wishlist-btn.active { color: var(--gold-600); box-shadow: inset 0 0 0 1px rgba(189,157,97,.75); }
.wishlist-btn.active svg { fill: var(--gold-500); stroke: var(--gold-700); }
.wishlist-btn.pop { animation: wishPop 420ms cubic-bezier(.32,.72,0,1); }
@keyframes wishPop { 0% { transform: scale(1); } 35% { transform: scale(1.28); } 100% { transform: scale(1); } }

.product-quickbar {
  position: absolute; left: var(--space-3); right: var(--space-3); bottom: var(--space-3);
  display: flex; gap: var(--space-2);
  opacity: 0; transform: translateY(10px);
  transition: opacity var(--ease-base), transform var(--ease-base);
  z-index: 4;
}
.product-card:hover .product-quickbar { opacity: 1; transform: none; }
.product-quickbar .btn { flex: 1; min-height: 44px; font-size: 10px; padding: 0 var(--space-3); }
.product-quickbar .btn-mini {
  flex: 0 0 44px; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-xs);
  background: linear-gradient(150deg,#fffdf9,var(--marble-200)) padding-box, var(--gold-grad) border-box;
  border: 1px solid transparent;
  color: var(--ink-800);
}
.product-quickbar .btn-mini:hover { color: var(--gold-700); }

/* Touch devices: no hover — surface a permanent, thumb-sized add button */
.quick-add-fab {
  position: absolute; right: var(--space-3); bottom: var(--space-3); z-index: 4;
  width: 44px; height: 44px; border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  background: rgba(19,18,16,.86);
  color: var(--gold-300);
  box-shadow: inset 0 0 0 1px rgba(189,157,97,.55), 0 6px 18px -8px rgba(19,18,16,.6);
  backdrop-filter: blur(6px);
}
.quick-add-fab:active { transform: scale(.94); }

.product-info { display: flex; flex-direction: column; gap: 5px; }
.product-info .brand {
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-700);
}
.product-info .title {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.92rem + 0.34vw, 1.1875rem); font-weight: 500; line-height: 1.25; color: var(--ink-900);
  transition: color var(--ease-micro);
}
.product-info .title:hover { color: var(--gold-700); }
.product-price { display: flex; align-items: baseline; gap: var(--space-2); margin-top: 2px; }
.product-price .current { font-size: 14px; font-weight: 600; letter-spacing: .02em; }
.product-price .old { font-size: 12.5px; color: var(--ink-300); text-decoration: line-through; }
.product-price .discount { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; color: var(--gold-700); }

.swatches { display: flex; gap: 6px; margin-top: 4px; }
.swatch {
  width: 15px; height: 15px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(19,18,16,.12), 0 0 0 1px transparent;
  cursor: pointer;
  transition: box-shadow var(--ease-micro), transform var(--ease-micro);
}
.swatch:hover { transform: scale(1.12); box-shadow: inset 0 0 0 1px rgba(19,18,16,.12), 0 0 0 1px var(--gold-500); }
.swatch.more {
  font-size: 9px; color: var(--ink-400); display: flex; align-items: center; justify-content: center;
  width: auto; padding: 0 4px; border-radius: var(--radius-pill); box-shadow: none;
}
.product-meta { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-400); margin-top: 2px; }
.product-meta .stars { color: var(--gold-500); letter-spacing: 1.5px; font-size: 10px; }

/* Catalog list view */
.product-grid.list-view { grid-template-columns: 1fr; gap: var(--space-5); }
.product-grid.list-view .product-card {
  flex-direction: row; gap: var(--space-6);
  padding-bottom: var(--space-5); border-bottom: 1px solid var(--hairline);
}
.product-grid.list-view .product-media { width: 180px; flex: 0 0 180px; margin-bottom: 0; }
.product-grid.list-view .product-info { justify-content: center; }

/* ==========================================================================
   Editorial
   ========================================================================== */
.editorial {
  display: grid;
  gap: var(--grid-gap-x);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
}
.editorial-panel {
  position: relative; border-radius: var(--radius-card); overflow: hidden;
  aspect-ratio: 4/5; background: var(--marble-300);
}
.editorial-panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--ease-page); }
.editorial-panel:hover img { transform: scale(1.04); }
.ed-overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(19,18,16,.82), rgba(19,18,16,.05) 62%); }
.ed-copy { position: absolute; left: var(--space-8); right: var(--space-8); bottom: var(--space-8); color: #fff; max-width: 360px; }
.ed-copy .eyebrow { color: var(--gold-300); }
.ed-copy .eyebrow::before { background: linear-gradient(90deg, rgba(233,214,168,0), var(--gold-300)); }
.ed-copy h3 { font-family: var(--font-display); font-size: var(--step-3); font-weight: 500; line-height: 1.15; margin-bottom: var(--space-4); }
.ed-copy a {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 10.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(233,214,168,.6);
  transition: gap var(--ease-base), color var(--ease-base);
}
.ed-copy a:hover { gap: 16px; color: var(--gold-300); }

/* ==========================================================================
   Brand strip
   ========================================================================== */
.brand-strip {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-8);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: var(--space-8) 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.brand-strip::-webkit-scrollbar { display: none; }
.brand-strip span {
  font-family: var(--font-display);
  font-size: 21px; font-weight: 500; letter-spacing: .18em;
  color: var(--ink-300);
  white-space: nowrap;
  transition: color var(--ease-base);
}
.brand-strip span:hover { color: var(--gold-700); }

/* ==========================================================================
   Reviews
   ========================================================================== */
.reviews-grid {
  display: grid;
  gap: var(--grid-gap-x);
  grid-template-columns: repeat(auto-fill, minmax(max(280px, (100% - 2 * var(--grid-gap-x)) / 3), 1fr));
}
.review-card {
  position: relative;
  background: linear-gradient(150deg, rgba(255,255,255,.75), rgba(247,244,239,.5));
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: var(--space-8) var(--space-6) var(--space-6);
  transition: transform var(--ease-base), box-shadow var(--ease-base), border-color var(--ease-base);
}
.review-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--hairline-gold); }
.review-card::before {
  content: "”";
  position: absolute; top: 6px; right: 22px;
  font-family: var(--font-display); font-size: 72px; line-height: 1;
  color: rgba(189,157,97,.28);
}
.review-card .stars { color: var(--gold-500); font-size: 12px; letter-spacing: 3px; margin-bottom: var(--space-4); }
.review-card p { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.5; color: var(--ink-700); margin-bottom: var(--space-6); }
.review-author { display: flex; align-items: center; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--hairline); }
.review-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(150deg, var(--marble-300), var(--marble-500));
  box-shadow: inset 0 0 0 1px rgba(189,157,97,.4);
  flex-shrink: 0;
}
.review-author strong { font-size: 12.5px; display: block; letter-spacing: .02em; }
.review-author span { font-size: 11px; color: var(--ink-400); letter-spacing: .08em; text-transform: uppercase; }

/* ==========================================================================
   Newsletter
   ========================================================================== */
.newsletter {
  border-radius: var(--radius-card);
  padding: clamp(40px, 7vw, 88px) var(--space-8);
  text-align: center;
  overflow: hidden;
}
.newsletter .inner { max-width: 520px; margin: 0 auto; }
.newsletter h2 { font-family: var(--font-display); font-size: var(--step-4); font-weight: 400; margin-bottom: var(--space-3); }
.newsletter h2 em { font-style: italic; color: var(--gold-300); }
.newsletter p { color: rgba(247,244,239,.6); margin-bottom: var(--space-8); font-size: 14px; }
.newsletter-form { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.newsletter-form input {
  flex: 1; min-width: 0; height: 52px;
  border-radius: var(--radius-xs);
  border: 1px solid rgba(233,214,168,.3);
  background: rgba(255,255,255,.05);
  color: var(--marble-100);
  padding: 0 var(--space-4);
  font-size: 14px; outline: none;
  transition: border-color var(--ease-base), background var(--ease-base);
}
.newsletter-form input::placeholder { color: rgba(247,244,239,.35); }
.newsletter-form input:focus { border-color: var(--gold-400); background: rgba(255,255,255,.08); }
.newsletter-form .btn { min-height: 52px; }
.newsletter .fine { font-size: 11px; color: rgba(247,244,239,.4); margin-top: var(--space-4); letter-spacing: .06em; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  margin-top: var(--space-20);
  border-top: 1px solid var(--hairline);
  background: rgba(255,255,255,.4);
  padding-top: var(--space-16);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) repeat(4, minmax(0, 1fr));
  gap: var(--flow-md) var(--space-8);
  padding-bottom: var(--space-12);
}
.footer-col summary {
  display: flex; align-items: center; gap: 10px;
  list-style: none;
  cursor: default;
  font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-900);
  margin-bottom: var(--space-4);
}
.footer-col summary::-webkit-details-marker { display: none; }
.footer-col summary::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }
.footer-col ul { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-col a { font-size: 13px; color: var(--ink-500); transition: color var(--ease-micro), padding-left var(--ease-base); }
.footer-col a:hover { color: var(--gold-700); padding-left: 4px; }
.footer-brand .logo { margin-bottom: var(--space-4); display: inline-block; }
.footer-brand p { font-size: 13px; color: var(--ink-500); max-width: 300px; margin-bottom: var(--space-6); }

.lang-switch { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--hairline); border-radius: var(--radius-pill); background: rgba(255,255,255,.5); }
.lang-switch button {
  font-size: 10.5px; font-weight: 600; letter-spacing: .1em; padding: 7px 14px;
  border-radius: var(--radius-pill);
  color: var(--ink-400);
  transition: all var(--ease-base);
}
.lang-switch button.active { background: var(--ink-900); color: var(--gold-300); }

.footer-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-6) 0 calc(var(--space-6) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--hairline);
  font-size: 11.5px; color: var(--ink-400); letter-spacing: .04em;
}
.footer-social { display: flex; gap: var(--space-5); }
.footer-social a { transition: color var(--ease-micro); }
.footer-social a:hover { color: var(--gold-700); }

/* ==========================================================================
   Overlay + cart drawer (desktop) / bottom sheet (mobile)
   ========================================================================== */
.overlay {
  position: fixed; inset: 0;
  background: rgba(19,18,16,.5);
  backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--ease-base);
  z-index: 200;
}
.overlay.open { opacity: 1; pointer-events: auto; }

.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 440px; max-width: 100vw;
  background: linear-gradient(165deg, var(--marble-100), var(--marble-200) 60%, var(--marble-300));
  z-index: 205;
  transform: translateX(100%);
  transition: transform var(--ease-page);
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
}
.cart-drawer::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--veins-fine); background-size: 820px 820px;
  opacity: .22; pointer-events: none;
}
.cart-drawer > * { position: relative; }
.cart-drawer.open { transform: none; }

.drawer-grab { display: none; }

.drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--hairline);
}
.drawer-header h3 { font-family: var(--font-display); font-size: var(--step-2); font-weight: 500; }
.drawer-header .count { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-700); }

.cart-items {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--space-5) var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-5);
}
.cart-item { display: flex; gap: var(--space-4); animation: riseIn 380ms cubic-bezier(.32,.72,0,1) both; }
.cart-item img {
  width: 78px; height: 100px; flex-shrink: 0;
  border-radius: var(--radius-sm); object-fit: cover;
  background: var(--marble-300);
  box-shadow: inset 0 0 0 1px rgba(19,18,16,.07);
}
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-info .name { font-family: var(--font-display); font-size: var(--step-1); font-weight: 500; line-height: 1.25; }
.cart-item-info .variant { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-400); margin: 4px 0 var(--space-3); }
.cart-item-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.cart-item .price { font-size: 13.5px; font-weight: 600; }
.cart-item .remove {
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-400); margin-top: var(--space-3);
  transition: color var(--ease-micro);
}
.cart-item .remove:hover { color: var(--error); }

.qty-control {
  display: flex; align-items: center;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.6);
  overflow: hidden;
}
.qty-control button {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--ink-600);
  transition: color var(--ease-micro), background var(--ease-micro);
}
.qty-control button:hover { color: var(--gold-700); background: rgba(189,157,97,.08); }
.qty-control span { min-width: 28px; text-align: center; font-size: 13px; font-weight: 600; }

.drawer-footer {
  padding: var(--space-5) var(--space-6) calc(var(--space-6) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--hairline);
  background: rgba(255,255,255,.45);
  backdrop-filter: blur(8px);
}
.promo-row { display: flex; gap: var(--space-2); margin-bottom: var(--space-5); }
.promo-row input {
  flex: 1; min-width: 0; height: 44px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xs);
  padding: 0 var(--space-4);
  font-size: 13px; outline: none; background: rgba(255,255,255,.7);
  transition: border-color var(--ease-base), box-shadow var(--ease-base);
}
.promo-row input:focus { border-color: var(--hairline-gold); box-shadow: var(--gold-glow); }
.summary-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12.5px; color: var(--ink-500); margin-bottom: var(--space-2);
}
.summary-row.total {
  font-size: 16px; font-weight: 600; color: var(--ink-900);
  margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: 1px solid var(--hairline);
}
.cart-empty { text-align: center; padding: var(--space-20) var(--space-6); color: var(--ink-400); }
.cart-empty svg { color: var(--marble-500); margin: 0 auto var(--space-4); }
.cart-empty p { font-family: var(--font-display); font-size: 20px; color: var(--ink-600); }

/* ==========================================================================
   Toast
   ========================================================================== */
.toast-stack {
  position: fixed; left: 50%; bottom: calc(var(--space-6) + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 300;
  display: flex; flex-direction: column; gap: var(--space-2); align-items: center;
  width: max-content; max-width: calc(100vw - 32px);
}
.toast {
  display: flex; align-items: center; gap: var(--space-3);
  background: rgba(19,18,16,.96);
  color: var(--marble-100);
  padding: 13px var(--space-5);
  border-radius: var(--radius-xs);
  font-size: 12.5px;
  box-shadow: inset 0 0 0 1px rgba(189,157,97,.4), var(--shadow-lg);
  animation: toastIn 340ms cubic-bezier(.32,.72,0,1) both;
  transition: opacity .22s ease, transform .22s ease;
}
.toast svg { color: var(--gold-400); flex-shrink: 0; }
@keyframes toastIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   Page heads / breadcrumbs
   ========================================================================== */
.page-head { padding: var(--space-10) 0 var(--space-6); }
.page-head h1 {
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: 400;
  line-height: 1.05;
}
.page-head p.lede { color: var(--ink-500); font-size: var(--step-0); margin-top: var(--space-3); max-width: 58ch; text-wrap: pretty; }

.breadcrumbs {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-400); margin-bottom: var(--space-4);
}
.breadcrumbs a { transition: color var(--ease-micro); }
.breadcrumbs a:hover { color: var(--gold-700); }
.breadcrumbs .sep { color: var(--gold-600); }

/* ==========================================================================
   Form controls (shared)
   ========================================================================== */
.field { margin-bottom: var(--space-5); }
.field label {
  display: block;
  font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-600);
  margin-bottom: var(--space-2);
}
.field input, .field select, .field textarea {
  width: 100%;
  height: 50px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xs);
  padding: 0 var(--space-4);
  font-size: 14px;
  background: rgba(255,255,255,.65);
  color: var(--ink-900);
  outline: none;
  transition: border-color var(--ease-base), box-shadow var(--ease-base), background var(--ease-base);
}
.field input::placeholder { color: var(--ink-300); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--hairline-gold);
  box-shadow: var(--gold-glow);
  background: #fff;
}
.field .hint { font-size: 11.5px; color: var(--ink-400); margin-top: var(--space-2); }
.field .error-msg { font-size: 11.5px; color: var(--error); margin-top: 6px; display: none; }
.field.has-error input, .field.has-error select { border-color: var(--error); box-shadow: 0 0 0 1px rgba(168,68,60,.18); }
.field.has-error .error-msg { display: block; }

select.select-styled, .field select, .sort-select {
  appearance: none; -webkit-appearance: none;
  padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23a6854a' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

.checkbox-row { display: flex; align-items: center; gap: var(--space-3); font-size: 13px; color: var(--ink-600); }

/* Custom checkbox — ink fill, gold check */
input[type="checkbox"].check, .filter-option input[type="checkbox"], .checkbox-row input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px; flex-shrink: 0;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-xs);
  background: rgba(255,255,255,.7);
  position: relative;
  cursor: pointer;
  transition: all var(--ease-base);
}
input[type="checkbox"].check:hover, .filter-option input[type="checkbox"]:hover, .checkbox-row input[type="checkbox"]:hover { border-color: var(--gold-500); }
input[type="checkbox"].check:checked, .filter-option input[type="checkbox"]:checked, .checkbox-row input[type="checkbox"]:checked {
  background: var(--ink-900); border-color: var(--ink-900);
}
input[type="checkbox"].check:checked::after, .filter-option input[type="checkbox"]:checked::after, .checkbox-row input[type="checkbox"]:checked::after {
  content: "";
  position: absolute; left: 6px; top: 2px;
  width: 5px; height: 10px;
  border: solid var(--gold-300);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

/* Switch */
.switch { position: relative; width: 46px; height: 26px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track {
  position: absolute; inset: 0;
  background: var(--marble-400);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--ease-base), border-color var(--ease-base);
}
.switch .track::before {
  content: "";
  position: absolute; width: 18px; height: 18px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%;
  box-shadow: var(--shadow-xs);
  transition: transform var(--ease-base), background var(--ease-base);
}
.switch input:checked + .track { background: var(--ink-900); border-color: var(--ink-900); }
.switch input:checked + .track::before { transform: translateX(20px); background: var(--gold-300); }

/* Selectable option rows (delivery / payment) */
.option-row {
  display: flex; align-items: center; gap: var(--space-4);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.45);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-3);
  cursor: pointer;
  position: relative;
  transition: border-color var(--ease-base), background var(--ease-base), box-shadow var(--ease-base);
}
.option-row:hover { border-color: var(--hairline-gold); }
.option-row.selected {
  border-color: transparent;
  background: linear-gradient(150deg, #fffdf9, var(--marble-200)) padding-box, var(--gold-grad) border-box;
  box-shadow: var(--shadow-sm);
}
.option-row input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px; flex-shrink: 0;
  border: 1px solid var(--hairline-strong);
  border-radius: 50%;
  position: relative; cursor: pointer;
  transition: border-color var(--ease-base);
}
.option-row input[type="radio"]:checked { border-color: var(--gold-600); }
.option-row input[type="radio"]:checked::after {
  content: "";
  position: absolute; inset: 4px;
  border-radius: 50%;
  background: var(--gold-grad);
}
.option-row .info { flex: 1; }
.option-row strong { display: block; font-size: 13.5px; font-weight: 600; letter-spacing: .01em; }
.option-row span { font-size: 12px; color: var(--ink-400); }
.option-row .price { font-size: 13px; font-weight: 600; }

/* Size / color pickers */
.size-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: var(--space-2); }
.size-grid button, .size-options button {
  min-height: 46px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xs);
  background: rgba(255,255,255,.5);
  font-size: 12px; font-weight: 500; letter-spacing: .08em;
  color: var(--ink-700);
  transition: all var(--ease-base);
}
.size-grid button:hover:not(:disabled), .size-options button:hover:not(:disabled) {
  border-color: var(--gold-500); color: var(--gold-700);
}
.size-grid button.active, .size-options button.active {
  background: var(--ink-900); color: var(--marble-100);
  border-color: var(--ink-900);
  box-shadow: inset 0 0 0 1px rgba(189,157,97,.45);
}
.size-options button:disabled {
  color: var(--ink-300); background: rgba(0,0,0,.02);
  cursor: not-allowed; text-decoration: line-through;
}

.color-swatch-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.color-swatch-row button, .color-options button {
  width: 34px; height: 34px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(19,18,16,.15), 0 0 0 1px transparent;
  position: relative;
  transition: box-shadow var(--ease-base), transform var(--ease-micro);
}
.color-swatch-row button:hover, .color-options button:hover { transform: scale(1.06); }
.color-swatch-row button.active, .color-options button.active {
  box-shadow: inset 0 0 0 1px rgba(19,18,16,.15), 0 0 0 1px #fff, 0 0 0 2px var(--gold-500);
}

/* Chips */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.6);
  border: 1px solid var(--hairline-gold);
  color: var(--ink-700);
  font-size: 11px; font-weight: 500; letter-spacing: .08em;
  padding: 8px 10px 8px 14px;
  border-radius: var(--radius-pill);
  transition: border-color var(--ease-base), color var(--ease-base);
}
.chip button { display: flex; color: var(--ink-400); }
.chip:hover { border-color: var(--gold-500); }
.chip button:hover { color: var(--error); }
.active-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.active-filters:not(:empty) { margin-bottom: var(--space-5); }

/* ==========================================================================
   Catalog
   ========================================================================== */
.catalog-toolbar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3) var(--space-4);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--space-8);
}
.result-count { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-400); }
.toolbar-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }

.view-toggle {
  display: flex; gap: 2px;
  background: rgba(255,255,255,.5);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  padding: 3px;
}
.view-toggle button {
  width: 36px; height: 34px; border-radius: var(--radius-pill);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-400);
  transition: all var(--ease-base);
}
.view-toggle button.active { background: var(--ink-900); color: var(--gold-300); }

.sort-select {
  height: 42px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  padding: 0 40px 0 var(--space-5);
  font-size: 12px; letter-spacing: .04em;
  background-color: rgba(255,255,255,.5);
  color: var(--ink-700);
  outline: none;
  transition: border-color var(--ease-base), box-shadow var(--ease-base);
}
.sort-select:focus { border-color: var(--hairline-gold); box-shadow: var(--gold-glow); }

.filter-trigger { display: none; }

.catalog-layout { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: var(--flow-lg); align-items: start; }
.filters-panel { position: sticky; top: calc(var(--header-h) + 20px); }
.filters-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--space-2);
}
.filters-head strong { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }

.filter-group { border-bottom: 1px solid var(--hairline); padding: var(--space-5) 0; }
.filter-group summary {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-800);
  cursor: pointer; list-style: none;
}
.filter-group summary::-webkit-details-marker { display: none; }
.filter-group summary::after {
  content: "";
  width: 9px; height: 9px;
  border-right: 1px solid var(--gold-600);
  border-bottom: 1px solid var(--gold-600);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--ease-base);
}
.filter-group[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.filter-body { padding-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.filter-option {
  display: flex; align-items: center; gap: var(--space-3);
  font-size: 13px; color: var(--ink-600);
  cursor: pointer; min-height: 32px;
  transition: color var(--ease-micro);
}
.filter-option:hover { color: var(--ink-900); }
.filter-option .count { color: var(--ink-300); margin-left: auto; font-size: 11.5px; }

.price-range { padding: var(--space-2) 0; }
.price-range input[type="range"] {
  width: 100%; height: 24px;
  appearance: none; -webkit-appearance: none;
  background: transparent; cursor: pointer;
}
.price-range input[type="range"]::-webkit-slider-runnable-track {
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-500), var(--marble-500));
}
.price-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px; margin-top: -8px;
  border-radius: 50%;
  background: linear-gradient(150deg, #fffdf9, var(--marble-300));
  box-shadow: 0 0 0 1px var(--gold-500), var(--shadow-xs);
}
.price-range input[type="range"]::-moz-range-track { height: 2px; background: var(--marble-500); }
.price-range input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border: 1px solid var(--gold-500); background: #fff;
}
.price-range .values { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-400); margin-top: var(--space-2); }

.pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-top: var(--space-16); }
.pagination button {
  min-width: 44px; height: 44px;
  border-radius: var(--radius-xs);
  font-size: 13px; color: var(--ink-600);
  border: 1px solid transparent;
  transition: all var(--ease-base);
}
.pagination button:hover:not(.active) { border-color: var(--hairline-gold); color: var(--gold-700); }
.pagination button.active { background: var(--ink-900); color: var(--gold-300); box-shadow: inset 0 0 0 1px rgba(189,157,97,.4); }

/* Mobile filter sheet (revealed at ≤1024px) */
.filter-sheet-head { display: none; }
.filters-panel .sheet-apply { display: none; }

/* ==========================================================================
   Product detail page
   ========================================================================== */
/* The whole PDP is centred and capped — a full-bleed gallery on a 1440px
   screen reads as a billboard, not a product. */
.pdp-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--flow-lg);
  max-width: 1080px;
  margin-inline: auto;
  padding: var(--space-6) 0 var(--space-16);
  align-items: start;
}
.pdp-gallery {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: var(--space-3);
  max-width: 520px;
  position: sticky;
  top: calc(var(--header-h) + 20px);
}
.pdp-thumbs { display: flex; flex-direction: column; gap: var(--space-3); }
.pdp-thumbs img {
  border-radius: var(--radius-sm);
  aspect-ratio: 3/4; object-fit: cover; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(19,18,16,.08);
  opacity: .68;
  transition: opacity var(--ease-base), box-shadow var(--ease-base);
}
.pdp-thumbs img:hover { opacity: 1; }
.pdp-thumbs img.active { opacity: 1; box-shadow: 0 0 0 1px var(--gold-500); }

.pdp-main-image {
  position: relative; border-radius: var(--radius-card); overflow: hidden;
  aspect-ratio: 4/5;
  max-height: min(72svh, 600px);
  background: var(--marble-300);
  box-shadow: var(--shadow-sm);
}
.pdp-main-image::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(19,18,16,.07);
  pointer-events: none;
}
.pdp-main-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ease-page); }
.pdp-main-image:hover img { transform: scale(1.07); cursor: zoom-in; }
.pdp-zoom-badge {
  position: absolute; bottom: var(--space-4); right: var(--space-4);
  background: rgba(253,252,250,.9); backdrop-filter: blur(6px);
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  display: flex; align-items: center; gap: 8px;
  box-shadow: inset 0 0 0 1px rgba(189,157,97,.4);
}
.pdp-dots { display: none; }

.pdp-info .brand { font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-700); margin-bottom: var(--space-3); }
.pdp-info h1 { font-family: var(--font-display); font-size: var(--step-4); font-weight: 400; line-height: 1.1; margin-bottom: var(--space-3); }
.pdp-rating { display: flex; align-items: center; gap: var(--space-3); font-size: 12px; color: var(--ink-400); margin-bottom: var(--space-6); }
.pdp-rating .stars { color: var(--gold-500); letter-spacing: 2px; }
.pdp-price { display: flex; align-items: baseline; gap: var(--space-3); padding-bottom: var(--space-6); margin-bottom: var(--space-6); border-bottom: 1px solid var(--hairline); }
.pdp-price .current { font-size: 26px; font-weight: 600; letter-spacing: -.01em; }
.pdp-price .old { font-size: 15px; color: var(--ink-300); text-decoration: line-through; }
.pdp-price .discount {
  font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-700);
  padding: 5px 10px; border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--hairline-gold);
}

.option-block { margin-bottom: var(--space-6); }
.option-label {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-600);
  margin-bottom: var(--space-3);
}
.option-label strong { color: var(--ink-900); }
.option-label a { color: var(--ink-400); border-bottom: 1px solid var(--hairline-gold); padding-bottom: 2px; }
.option-label a:hover { color: var(--gold-700); }
.color-options { display: flex; gap: var(--space-3); }
.size-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(58px, 1fr)); gap: var(--space-2); }

.pdp-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); }
.pdp-actions .btn-primary { flex: 1; min-height: 56px; }
.pdp-actions .btn-icon { width: 56px; height: 56px; }
.pdp-stock { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--success); margin-bottom: var(--space-8); letter-spacing: .04em; }
.pdp-stock .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px rgba(74,122,91,.16); }

.pdp-assurances { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); gap: var(--space-3); margin-bottom: var(--space-8); }
.pdp-assurances div {
  text-align: center; padding: var(--space-4) var(--space-2);
  border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  background: rgba(255,255,255,.4);
}
.pdp-assurances svg { color: var(--gold-600); margin: 0 auto 8px; }
.pdp-assurances span { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-500); }

.pdp-accordion { border-top: 1px solid var(--hairline); }
.pdp-accordion details { border-bottom: 1px solid var(--hairline); }
.pdp-accordion summary {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-5) 0;
  font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer; list-style: none;
}
.pdp-accordion summary::-webkit-details-marker { display: none; }
.pdp-accordion summary::after {
  content: ""; width: 9px; height: 9px;
  border-right: 1px solid var(--gold-600); border-bottom: 1px solid var(--gold-600);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--ease-base);
}
.pdp-accordion details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.pdp-accordion .acc-body { padding-bottom: var(--space-5); font-size: 13.5px; color: var(--ink-500); line-height: 1.75; }
.spec-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.spec-table td { padding: 10px 0; border-bottom: 1px solid var(--hairline); }
.spec-table tr:last-child td { border-bottom: none; }
.spec-table td:first-child { color: var(--ink-400); width: 42%; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }

.sticky-atc {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: rgba(250,247,242,.94);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--hairline);
  padding: var(--space-3) 0 calc(var(--space-3) + env(safe-area-inset-bottom));
  transform: translateY(110%);
  transition: transform var(--ease-page);
}
.sticky-atc::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--gold-rule); opacity: .8; }
.sticky-atc.visible { transform: none; }
.sticky-atc .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.sticky-atc .info { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.sticky-atc img { width: 46px; height: 58px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; }
.sticky-atc .nm { font-family: var(--font-display); font-size: 17px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-atc .pr { font-size: 12px; color: var(--ink-400); }
.sticky-atc .btn { min-width: 190px; }

.reviews-summary {
  display: grid; grid-template-columns: auto 1fr;
  gap: var(--space-10); align-items: center;
  padding: var(--space-8);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: rgba(255,255,255,.4);
  margin-bottom: var(--space-8);
}
.reviews-score { text-align: center; padding-right: var(--space-8); border-right: 1px solid var(--hairline); }
.reviews-score .num { font-family: var(--font-display); font-size: var(--step-5); font-weight: 500; line-height: 1; }
.reviews-score .stars { color: var(--gold-500); letter-spacing: 3px; margin: var(--space-2) 0; }
.reviews-score span { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-400); }
.rating-bars { display: flex; flex-direction: column; gap: 8px; }
.rating-bar-row { display: flex; align-items: center; gap: var(--space-3); font-size: 11.5px; color: var(--ink-400); }
.rating-bar-row .track { flex: 1; height: 3px; background: var(--marble-400); border-radius: var(--radius-pill); overflow: hidden; }
.rating-bar-row .fill { height: 100%; background: linear-gradient(90deg, var(--gold-600), var(--gold-400)); }

.review-item { border-bottom: 1px solid var(--hairline); padding: var(--space-6) 0; }
.review-item .stars { color: var(--gold-500); font-size: 12px; letter-spacing: 2px; margin-bottom: var(--space-2); }
.review-item .meta { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-400); margin-bottom: var(--space-3); }
.review-item .meta strong { color: var(--ink-800); }
.review-item p { font-size: 14px; color: var(--ink-600); }
.review-photos { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
.review-photos img { width: 62px; height: 62px; border-radius: var(--radius-sm); object-fit: cover; }
.store-reply {
  background: rgba(255,255,255,.6);
  border-left: 1px solid var(--gold-500);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--space-4) var(--space-5);
  margin-top: var(--space-4);
  font-size: 13px; color: var(--ink-500);
}
.store-reply strong { color: var(--gold-700); }

/* ==========================================================================
   Checkout
   ========================================================================== */
.checkout-header { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: var(--space-4); }
.checkout-steps { display: flex; align-items: center; gap: var(--space-3); }
.step-pill { display: flex; align-items: center; gap: 10px; font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-300); }
.step-pill .circle {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--hairline-strong);
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px;
  transition: all var(--ease-base);
}
.step-pill.active { color: var(--ink-900); }
.step-pill.active .circle { background: var(--ink-900); border-color: var(--ink-900); color: var(--gold-300); }
.step-pill.done { color: var(--ink-500); }
.step-pill.done .circle { border-color: var(--gold-500); color: var(--gold-700); background: rgba(189,157,97,.1); }
.step-connector { width: 36px; height: 1px; background: var(--hairline-strong); }

.checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--flow-lg); padding: var(--space-10) 0 var(--space-20); align-items: start; }
.checkout-form-panel { max-width: 580px; }
.checkout-step { display: none; }
.checkout-step.active { display: block; animation: riseIn 420ms cubic-bezier(.32,.72,0,1) both; }
.checkout-step h2 { font-family: var(--font-display); font-size: var(--step-3); font-weight: 400; margin-bottom: var(--space-6); }
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 0 var(--space-4); }
.field-grid .full { grid-column: 1/-1; }

.guest-toggle {
  display: flex; gap: 4px; margin-bottom: var(--space-6);
  background: rgba(255,255,255,.5);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  padding: 4px;
}
.guest-toggle button {
  flex: 1; min-height: 44px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-400);
  transition: all var(--ease-base);
}
.guest-toggle button.active { background: var(--ink-900); color: var(--gold-300); }

.card-fields { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--hairline); }
.step-actions { display: flex; gap: var(--space-3); margin-top: var(--space-8); }
.step-actions .btn { flex: 1; min-height: 54px; }

.order-summary {
  position: sticky; top: calc(var(--header-h) + 20px);
  padding: var(--space-6);
}
.order-summary h3 { font-family: var(--font-display); font-size: var(--step-2); font-weight: 500; margin-bottom: var(--space-5); }
.summary-item { display: flex; gap: var(--space-3); margin-bottom: var(--space-4); }
.summary-item img { width: 58px; height: 74px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; }
.summary-item .info { flex: 1; min-width: 0; }
.summary-item .name { font-size: 13px; font-weight: 500; }
.summary-item .variant { color: var(--ink-400); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; margin-top: 2px; }
.summary-item .price { font-weight: 600; font-size: 13px; }
.summary-totals { border-top: 1px solid var(--hairline); margin-top: var(--space-5); padding-top: var(--space-5); }
.secure-note { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink-400); margin-top: var(--space-5); }
.secure-note svg { color: var(--gold-600); flex-shrink: 0; }

.confirmation-wrap { max-width: 560px; margin: 0 auto; text-align: center; padding: var(--space-20) var(--space-4); }
.confirmation-icon {
  width: 84px; height: 84px; border-radius: 50%;
  background: linear-gradient(150deg, #fffdf9, var(--marble-300));
  color: var(--gold-700);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--space-6);
  box-shadow: inset 0 0 0 1px var(--hairline-gold), var(--shadow-sm);
  animation: riseIn 600ms cubic-bezier(.32,.72,0,1) both;
}
.confirmation-wrap h1 { font-family: var(--font-display); font-size: var(--step-4); font-weight: 400; margin-bottom: var(--space-3); }
.confirmation-wrap > p { color: var(--ink-500); margin-bottom: var(--space-8); }
.order-id-box { padding: var(--space-6); margin-bottom: var(--space-8); text-align: left; }
.order-id-box .row { display: flex; justify-content: space-between; gap: var(--space-4); font-size: 13px; padding: var(--space-3) 0; border-bottom: 1px solid var(--hairline); }
.order-id-box .row:last-child { border-bottom: none; }
.order-id-box .row span { color: var(--ink-400); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }

/* ==========================================================================
   Account
   ========================================================================== */
.auth-wrap { max-width: 440px; margin: 0 auto; padding: var(--space-16) var(--space-2) var(--space-24); }
.auth-card { padding: var(--space-10) var(--space-8); }
.auth-wrap h1 { font-family: var(--font-display); font-size: var(--step-4); font-weight: 400; text-align: center; margin-bottom: var(--space-2); }
.auth-wrap p.subtitle { text-align: center; color: var(--ink-400); font-size: 13.5px; margin-bottom: var(--space-8); }
.auth-divider { display: flex; align-items: center; gap: var(--space-4); margin: var(--space-6) 0; color: var(--ink-300); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }
.auth-switch { text-align: center; font-size: 13px; color: var(--ink-400); margin-top: var(--space-6); }
.auth-switch a { color: var(--gold-700); font-weight: 600; border-bottom: 1px solid var(--hairline-gold); }
.guest-note { font-size: 11.5px; color: var(--ink-400); margin-top: var(--space-6); padding: var(--space-4); border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: rgba(255,255,255,.4); }
.guest-note code { font-size: 11px; color: var(--gold-700); }

.dash-layout { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: var(--flow-lg); padding: var(--space-6) 0 var(--space-20); align-items: start; }
.dash-nav-card { padding: var(--space-6); position: sticky; top: calc(var(--header-h) + 20px); }
.dash-user { display: flex; align-items: center; gap: var(--space-3); padding-bottom: var(--space-5); margin-bottom: var(--space-5); border-bottom: 1px solid var(--hairline); }
.dash-avatar {
  width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(150deg, var(--ink-700), var(--ink-900));
  color: var(--gold-300);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 20px; font-weight: 600;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(189,157,97,.4);
}
.dash-user strong { display: block; font-size: 14px; }
.dash-user span { font-size: 11.5px; color: var(--ink-400); word-break: break-all; }
.dash-nav { display: flex; flex-direction: column; gap: 2px; }
.dash-nav button {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 12px var(--space-3);
  border-radius: var(--radius-xs);
  font-size: 12px; letter-spacing: .08em;
  text-align: left; color: var(--ink-600);
  white-space: nowrap;
  transition: all var(--ease-base);
}
.dash-nav button svg { flex-shrink: 0; color: var(--ink-400); transition: color var(--ease-base); }
.dash-nav button:hover { color: var(--ink-900); background: rgba(189,157,97,.07); }
.dash-nav button:hover svg { color: var(--gold-600); }
.dash-nav button.active { background: var(--ink-900); color: var(--marble-100); box-shadow: inset 0 0 0 1px rgba(189,157,97,.35); }
.dash-nav button.active svg { color: var(--gold-400); }
.dash-nav button.logout { color: var(--error); margin-top: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--hairline); border-radius: 0; }
.dash-nav button.logout svg { color: var(--error); }

.dash-panel { display: none; }
.dash-panel.active { display: block; animation: riseIn 420ms cubic-bezier(.32,.72,0,1) both; }
.dash-panel h2 { font-family: var(--font-display); font-size: var(--step-4); font-weight: 400; margin-bottom: var(--space-2); }
.dash-panel .subtitle { color: var(--ink-400); font-size: 13.5px; margin-bottom: var(--space-8); }
.dash-panel h3 { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; margin-bottom: var(--space-4); }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: var(--space-4); margin-bottom: var(--space-10); }
.stat-card { padding: var(--space-5); }
.stat-card .num { font-family: var(--font-display); font-size: var(--step-4); font-weight: 500; line-height: 1; }
.stat-card .label { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-400); margin-top: 8px; }

.order-card { padding: var(--space-5); margin-bottom: var(--space-4); }
.order-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.order-card-head .id { font-size: 13px; font-weight: 600; letter-spacing: .06em; }
.order-card-head .date { font-size: 11px; color: var(--ink-400); letter-spacing: .06em; }
.status-pill { font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; padding: 6px 12px; border-radius: var(--radius-pill); }
.status-delivered { color: var(--success); box-shadow: inset 0 0 0 1px rgba(74,122,91,.35); }
.status-processing { color: var(--gold-700); box-shadow: inset 0 0 0 1px var(--hairline-gold); }
.status-cancelled { color: var(--error); box-shadow: inset 0 0 0 1px rgba(168,68,60,.3); }
.order-items-row { display: flex; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.order-items-row img { width: 54px; height: 68px; border-radius: var(--radius-sm); object-fit: cover; box-shadow: inset 0 0 0 1px rgba(19,18,16,.07); }
.order-card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding-top: var(--space-4); border-top: 1px solid var(--hairline); }
.order-card-foot .total { font-weight: 600; font-size: 15px; }

.address-card { padding: var(--space-5); margin-bottom: var(--space-4); position: relative; }
.address-card .default-tag { position: absolute; top: var(--space-5); right: var(--space-5); font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-700); }
.address-card strong { display: block; font-family: var(--font-display); font-size: var(--step-2); font-weight: 500; margin-bottom: var(--space-2); }
.address-card p { font-size: 13px; color: var(--ink-500); line-height: 1.7; }
.address-card .row-actions { display: flex; gap: var(--space-5); margin-top: var(--space-4); }
.address-card .row-actions button { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-400); transition: color var(--ease-micro); }
.address-card .row-actions button:hover { color: var(--gold-700); }
.address-card .row-actions button.danger:hover { color: var(--error); }

.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 0 var(--space-5); }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--hairline); }
.toggle-row strong { display: block; font-size: 13px; }
.toggle-row span { font-size: 12px; color: var(--ink-400); }

/* ==========================================================================
   Wishlist
   ========================================================================== */
.wishlist-toolbar {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--space-8);
}
.wishlist-toolbar .actions { display: flex; gap: var(--space-3); }
.empty-state { text-align: center; padding: var(--space-24) var(--space-6); }
.empty-state svg { color: var(--marble-500); margin: 0 auto var(--space-6); }
.empty-state h2 { font-family: var(--font-display); font-size: var(--step-3); font-weight: 400; margin-bottom: var(--space-3); }
.empty-state p { color: var(--ink-400); margin-bottom: var(--space-8); }
.share-toast-note { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-400); }

/* ==========================================================================
   Quick view modal
   ========================================================================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ease-base);
}
.modal.open { opacity: 1; pointer-events: auto; }
.modal-panel {
  position: relative;
  width: min(880px, 100%);
  max-height: min(84svh, 620px);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  overflow: hidden;
  border-radius: var(--radius-card);
  background: linear-gradient(160deg, var(--marble-100), var(--marble-200) 60%, var(--marble-300));
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(189,157,97,.28);
  transform: translateY(16px) scale(.985);
  transition: transform var(--ease-page);
}
.modal.open .modal-panel { transform: none; }
.modal-close { position: absolute; top: 10px; right: 10px; z-index: 3; background: rgba(253,252,250,.8); backdrop-filter: blur(6px); }
.qv-media { position: relative; background: var(--marble-300); }
.qv-media img { width: 100%; height: 100%; object-fit: cover; }
.qv-info { padding: var(--space-8) var(--space-8) var(--space-6); overflow-y: auto; overscroll-behavior: contain; }
.qv-info .brand { font-size: var(--step--2); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-700); margin-bottom: var(--space-2); }
.qv-info h3 { font-family: var(--font-display); font-size: var(--step-3); font-weight: 500; line-height: 1.15; margin-bottom: var(--space-3); }
.qv-info .pdp-price { padding-bottom: var(--space-5); margin-bottom: var(--space-5); }
.qv-info .section-link { display: inline-block; margin-top: var(--space-2); }

/* ==========================================================================
   Skeletons — layout-identical placeholders, so nothing jumps on load
   ========================================================================== */
.sk {
  position: relative;
  overflow: hidden;
  background: var(--marble-300);
  border-radius: var(--radius-xs);
}
.sk::after {
  content: "";
  position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }
.sk-media { aspect-ratio: 3/4; border-radius: var(--radius-card); margin-bottom: var(--space-4); }
.sk-line { height: 11px; margin-bottom: 8px; }
.skeleton-card { pointer-events: none; }

/* ==========================================================================
   Catalogue results furniture
   ========================================================================== */
.results-bar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.shown-count { font-size: var(--step--1); color: var(--ink-400); letter-spacing: .04em; }

.load-more-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); margin-top: var(--flow-lg); }
.load-more-wrap .shown-count { order: -1; }

.no-results {
  text-align: center;
  padding: var(--space-20) var(--space-6);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: rgba(255,255,255,.4);
}
.no-results svg { color: var(--marble-500); margin: 0 auto var(--space-5); }
.no-results h3 { font-family: var(--font-display); font-size: var(--step-3); font-weight: 400; margin-bottom: var(--space-2); }
.no-results p { color: var(--ink-400); font-size: var(--step-0); margin-bottom: var(--space-6); }

.stock-note {
  font-size: var(--step--2);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-700);
  white-space: nowrap;
}

/* Dual-thumb price range */
.range-dual { position: relative; height: 28px; display: flex; align-items: center; }
.range-track {
  position: absolute; left: 0; right: 0; height: 2px;
  background: var(--marble-500); border-radius: 2px;
}
.range-fill {
  position: absolute; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--gold-600), var(--gold-400));
}
.range-dual input[type="range"] {
  position: absolute; left: 0; right: 0; width: 100%;
  margin: 0; height: 28px;
  appearance: none; -webkit-appearance: none;
  background: transparent;
  pointer-events: none;
}
.range-dual input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: linear-gradient(150deg, #fffdf9, var(--marble-300));
  box-shadow: 0 0 0 1px var(--gold-500), var(--shadow-xs);
  cursor: grab;
}
.range-dual input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid var(--gold-500); background: #fff;
  cursor: grab;
}

/* Free-shipping progress in the bag */
.ship-progress { margin-bottom: var(--space-4); }
.ship-progress p { font-size: var(--step--1); color: var(--ink-500); margin-bottom: 8px; }
.ship-progress p strong { color: var(--ink-900); }
.ship-progress p.reached { color: var(--gold-700); }
.ship-progress .track { height: 2px; background: var(--marble-400); border-radius: 2px; overflow: hidden; }
.ship-progress .fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-600), var(--gold-300));
  transition: width var(--ease-page);
}

/* Header search suggestions */
.search-suggestions {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: min(340px, 78vw);
  z-index: 120;
  padding: 6px;
  border-radius: var(--radius-md);
  background: rgba(253,252,250,.97);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(189,157,97,.3);
}
.search-suggestions a {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 8px; border-radius: var(--radius-sm);
  transition: background var(--ease-micro);
}
.search-suggestions a:hover { background: rgba(189,157,97,.09); }
.search-suggestions img { width: 38px; height: 48px; object-fit: cover; border-radius: var(--radius-xs); flex-shrink: 0; }
.search-suggestions span { display: flex; flex-direction: column; min-width: 0; }
.search-suggestions strong { font-size: var(--step--1); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-suggestions em { font-style: normal; font-size: var(--step--2); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-400); }

/* ==========================================================================
   Utilities
   ========================================================================== */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 999;
  background: var(--ink-900); color: var(--gold-300);
  padding: var(--space-3) var(--space-5);
}
.skip-link:focus { left: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.no-scroll { overflow: hidden; }
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 700ms cubic-bezier(.32,.72,0,1), transform 700ms cubic-bezier(.32,.72,0,1); }
[data-reveal].revealed { opacity: 1; transform: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
/* Laptop — 1200–1439px */
@media (max-width: 1439.98px) {
  .checkout-layout { grid-template-columns: minmax(0, 1fr) clamp(300px, 26vw, 400px); gap: var(--flow-lg); }
  .catalog-layout { grid-template-columns: clamp(210px, 20vw, 264px) minmax(0, 1fr); gap: var(--flow-lg); }
}

/* Tablet — 768–1199px */
@media (max-width: 1199.98px) {
  :root { --header-h: 68px; }
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
  .footer-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
  .pdp-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); max-width: 720px; }
  .pdp-gallery { position: static; margin-inline: auto; width: 100%; }
  .pdp-info { max-width: 560px; margin-inline: auto; }
  .checkout-layout { grid-template-columns: 1fr; }
  .order-summary { position: static; order: -1; }
  .dash-layout { grid-template-columns: 1fr; gap: var(--space-6); }
  .dash-nav-card { position: static; padding: var(--space-4); }
  .dash-user { padding-bottom: var(--space-4); margin-bottom: var(--space-4); }
  /* Dashboard nav becomes a scrollable tab rail */
  .dash-nav {
    flex-direction: row; gap: var(--space-2);
    overflow-x: auto; scrollbar-width: none;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
  }
  .dash-nav::-webkit-scrollbar { display: none; }
  .dash-nav button { border-radius: var(--radius-pill); padding: 10px var(--space-4); scroll-snap-align: start; }
  .dash-nav button.logout { margin-top: 0; padding-top: 10px; border-top: none; border-left: 1px solid var(--hairline); border-radius: var(--radius-pill); margin-left: var(--space-2); }

  /* Catalog: filters move into a sheet */
  .catalog-layout { grid-template-columns: 1fr; gap: 0; }
  .filter-trigger { display: inline-flex; }
  .filters-panel {
    position: fixed; inset: 0 0 0 auto;
    width: min(400px, 92vw);
    z-index: 210;
    background: linear-gradient(165deg, var(--marble-100), var(--marble-300));
    padding: 0 var(--space-5) calc(var(--space-6) + env(safe-area-inset-bottom));
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(100%);
    transition: transform var(--ease-page);
    box-shadow: var(--shadow-lg);
  }
  .filters-panel.open { transform: none; }
  .filter-sheet-head {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 2;
    padding: var(--space-5) 0;
    margin-bottom: var(--space-2);
    background: linear-gradient(var(--marble-100), rgba(253,252,250,.9));
    border-bottom: 1px solid var(--hairline);
  }
  .filter-sheet-head h3 { font-family: var(--font-display); font-size: var(--step-2); font-weight: 500; }
  .filters-head { display: none; }
  .filters-panel .sheet-apply {
    display: block;
    position: sticky; bottom: 0;
    padding: var(--space-4) 0;
    background: linear-gradient(rgba(239,234,226,0), var(--marble-300) 35%);
  }

  .settings-grid { grid-template-columns: 1fr; }
  .reviews-summary { grid-template-columns: 1fr; gap: var(--space-6); padding: var(--space-6); }
  .reviews-score { padding-right: 0; padding-bottom: var(--space-5); border-right: none; border-bottom: 1px solid var(--hairline); }
}

@media (max-width: 900px) {
  /* Quick view stacks: image on top, options scroll beneath */
  .modal-panel { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 40svh) minmax(0, 1fr); }
  .qv-info { padding: var(--space-6) var(--space-5); }
  .stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
  .stat-card { padding: var(--space-4); }
  .advantages .container { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) 0; }
  .advantage:nth-child(3)::before { display: none; }
}

/* Mobile — 375–767px */
@media (max-width: 767.98px) {
  .section-header { align-items: flex-start; }

  .search-wrap { display: none; }
  .icon-btn { width: 42px; height: 42px; }

  /* Quick view becomes a bottom sheet, like the bag */
  .modal { padding: 0; place-items: end stretch; }
  .modal-panel {
    width: 100%;
    max-height: 92svh;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    grid-template-rows: minmax(0, 34svh) minmax(0, 1fr);
    transform: translateY(100%);
  }
  .modal.open .modal-panel { transform: none; }
  .header-actions { gap: 0; }

  .hero { min-height: 86svh; }
  .hero-content { padding: var(--space-20) 0 var(--space-16); }
  .hero-cta { flex-direction: column; align-items: stretch; width: 100%; max-width: 340px; }
  .hero-meta .container { justify-content: center; }
  .hero-meta span:not(:first-child) { display: none; }

  .product-quickbar { display: none; }
  .quick-add-fab { display: flex; }
  .product-grid.list-view .product-media { width: 116px; flex: 0 0 116px; }

  .cat-label { left: var(--space-4); right: var(--space-4); bottom: var(--space-4); }

  .brand-strip { gap: var(--space-6); padding: var(--space-6) 0; }
  .brand-strip span { font-size: var(--step-1); }

  .newsletter-form { flex-direction: column; }
  .newsletter-form .btn { width: 100%; }

  .footer-grid { grid-template-columns: 1fr; gap: 0; padding-bottom: var(--space-6); }
  .footer-brand { margin-bottom: var(--space-6); }
  /* Footer link groups collapse into accordions */
  .footer-col { border-top: 1px solid var(--hairline); }
  .footer-col summary {
    justify-content: space-between;
    padding: var(--space-4) 0;
    margin-bottom: 0;
    cursor: pointer;
  }
  .footer-col summary::after {
    content: ""; flex: 0 0 auto;
    width: 8px; height: 8px; background: none;
    border-right: 1px solid var(--gold-600); border-bottom: 1px solid var(--gold-600);
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--ease-base);
  }
  .footer-col[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
  .footer-col ul { padding-bottom: var(--space-4); }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--space-4); }

  /* Cart becomes a bottom sheet */
  .cart-drawer {
    top: auto; left: 0; right: 0; bottom: 0;
    width: 100%; max-height: 92svh;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    transform: translateY(100%);
    box-shadow: 0 -30px 60px -24px rgba(19,18,16,.4);
  }
  .cart-drawer.open { transform: none; }
  .drawer-grab { display: block; padding: 10px 0 2px; }
  .drawer-grab::before {
    content: ""; display: block; width: 42px; height: 4px; margin: 0 auto;
    border-radius: var(--radius-pill); background: var(--marble-500);
  }
  .drawer-header { padding: var(--space-3) var(--space-5) var(--space-4); }
  .cart-items { padding: var(--space-4) var(--space-5); }
  .drawer-footer { padding: var(--space-4) var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom)); }
  .cart-item img { width: 66px; height: 86px; }

  .pdp-layout { padding-top: var(--space-2); }
  .pdp-gallery { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); max-width: none; }
  .pdp-thumbs {
    flex-direction: row; order: 2; gap: var(--space-2);
    overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory;
  }
  .pdp-thumbs::-webkit-scrollbar { display: none; }
  .pdp-thumbs img { flex: 0 0 64px; width: 64px; scroll-snap-align: start; }
  .pdp-main-image { order: 1; aspect-ratio: 4/5; max-height: 62svh; }
  .pdp-main-image:hover img { transform: none; }
  .pdp-zoom-badge { display: none; }
  .pdp-actions { position: static; }
  .pdp-assurances { grid-template-columns: 1fr; gap: var(--space-2); }
  .pdp-assurances div { display: flex; align-items: center; gap: var(--space-3); text-align: left; padding: var(--space-3) var(--space-4); }
  .pdp-assurances svg { margin: 0; }
  .sticky-atc .btn { min-width: 0; flex: 1; }
  .sticky-atc .info .pr { display: none; }
  .sticky-atc img { width: 40px; height: 50px; }
  .sticky-atc .nm { max-width: 130px; }

  .checkout-steps .step-label { display: none; }
  .step-connector { width: 18px; }
  .checkout-layout { padding-top: var(--space-6); }
  .field-grid { grid-template-columns: 1fr; }
  .step-actions { flex-direction: column-reverse; }

  .wishlist-toolbar { flex-direction: column; align-items: stretch; gap: var(--space-4); }
  .wishlist-toolbar .actions { display: grid; grid-template-columns: 1fr 1fr; }

  .auth-card { padding: var(--space-8) var(--space-5); }
  .stat-row { grid-template-columns: 1fr; }
  .stat-card { display: flex; align-items: baseline; justify-content: space-between; }
  .stat-card .label { margin-top: 0; }
  .order-card-foot { flex-direction: column; align-items: stretch; }
  .order-card-foot > div { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }

  .catalog-toolbar { gap: var(--space-2); }
  .sort-select { padding: 0 34px 0 var(--space-4); font-size: 11.5px; }
  .toolbar-actions { gap: var(--space-2); }
  .view-toggle { display: none; }
}

@media (max-width: 460px) {
  /* Account lives in the drawer on small screens — reclaim the space */
  .header-actions [data-account-link] { display: none; }
  .wishlist-toolbar .actions { grid-template-columns: 1fr; }
}

/* Small mobile — <375px */
@media (max-width: 374.98px) {
  :root { --grid-gap-x: 10px; }
  .logo { font-size: 15px; letter-spacing: .14em; }
  .btn { padding: 0 var(--space-5); }
  .icon-btn { width: 38px; }
  .stat-row { grid-template-columns: 1fr; }
}

/* Touch-first refinements — hover effects are useless without a pointer */
@media (hover: none) {
  .product-card:hover .img-primary { opacity: 1; transform: none; }
  .product-card:hover .img-secondary { opacity: 0; }
  .product-quickbar { display: none; }
  .quick-add-fab { display: flex; }
  .category-card:hover { transform: none; }
  .btn:hover::after { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  /* The stone stays still: no travelling highlight, no cursor gloss, no drift. */
  .stone-sheen { display: none; }
  .stone-gloss { opacity: 0 !important; }
  body::before { transform: rotate(-9deg); }
  body::after  { transform: rotate(14deg); }
}

@media print {
  .site-header, .site-footer, .cart-drawer, .overlay, .sticky-atc { display: none !important; }
}