/* =========================================================
   WHITE MOON — homepage (Shopify port, theme-scoped)
   Design read: cool moonlit minimal luxury, lab-grown diamonds
   Dials: VARIANCE 7 · MOTION 5 · DENSITY 2
   Palette: COLD LUXURY (bone / ink / silver) + champagne whisper
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Jost:wght@300;400;500&display=swap');

/* WM templates: reset the main wrapper Eurus uses so WM sections sit edge-to-edge.
   Applied to any page rendered by a WM section (home, collection, etc.). */
body.wm-page #MainContent,
body.wm-page main#MainContent,
body.wm-page main.main-content { padding: 0 !important; margin: 0 !important; background: transparent !important; }

:root {
  /* Cold-luxury neutrals (cool, not warm-cream) */
  --paper:    #ffffff;
  --bone:     #f4f3f0;   /* cool off-white page base */
  --mist:     #e9e8e3;   /* slightly deeper surface */
  --ink:      #16171b;   /* cool near-black */
  --ink-soft: #4c4e56;
  --silver:   #9a9ca3;   /* cool mid grey */
  --hair:     rgba(22, 23, 27, 0.12);
  --hair-soft:rgba(22, 23, 27, 0.07);

  /* The single locked accent: a restrained champagne whisper */
  --accent:   #9c8559;
  --accent-soft: rgba(156, 133, 89, 0.16);

  /* Dark band tokens */
  --night:    #121317;
  --night-2:  #1b1d22;

  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans:    "Jost", system-ui, -apple-system, sans-serif;

  --radius: 0px;                 /* SHAPE LOCK: all-sharp, editorial luxury */
  --maxw: 1400px;
  --gutter: clamp(22px, 6vw, 88px);
  --page-width: var(--maxw);     /* align Eurus base-theme container to the WM site width */
  /* Emil's exact easing curves — built-in eases are too weak. */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);     /* strong UI ease-out */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);    /* on-screen movement */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);     /* iOS-like drawer curve */
  --ease: var(--ease-out);                            /* alias: existing rules keep reading --ease */
  --nav-h: 76px;
}

/* WM template body styles — scoped to body.wm-page so any WM-rendered template
   (home, engagement collection, etc.) gets the typography, while Eurus pages keep
   their own styles. */
body.wm-page {
  margin: 0; background: var(--bone); color: var(--ink);
  font-family: var(--font-sans); font-weight: 300; font-size: 16px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* WM chrome (announce / header / footer) carries its own typography globally,
   so it looks right on every page even when body is styled by Eurus. */
.announce, .header, .footer {
  font-family: var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.announce *, .header *, .footer * { box-sizing: border-box; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
h1,h2,h3,h4,h5 { margin: 0; font-family: var(--font-display); font-weight: 300; line-height: 1.04; letter-spacing: 0.004em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* media + graceful fallback label */
.media { position: relative; background: linear-gradient(135deg, var(--mist), var(--bone)); overflow: hidden; }
.media::after {
  content: attr(data-label); position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center; justify-content: center; padding: 1.4rem; text-align: center;
  font-family: var(--font-sans); font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--silver);
}
.media > img { position: relative; z-index: 1; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-sans); font-weight: 400; font-size: 0.72rem;
  letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap;
  padding: 1.05rem 2.1rem; border-radius: var(--radius);
  /* Emil: 100-160ms band for press feedback; specify exact properties, never `all` */
  transition: transform 160ms var(--ease-out), background 0.35s var(--ease-out), color 0.35s var(--ease-out), border-color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.btn:active { transform: scale(0.97); }   /* Emil: 0.95-0.98 press feel */
.btn--solid { background: var(--ink); color: var(--bone); box-shadow: inset 0 1px 0 rgba(255,255,255,0.07); }
.btn--solid:hover { background: var(--accent); }
.btn--ghost { color: var(--bone); border: 1px solid rgba(244,243,240,0.4); }
.btn--ghost:hover { border-color: var(--bone); background: rgba(244,243,240,0.06); }
.btn--quiet { color: #fff; letter-spacing: 0.2em; position: relative; padding: 1.05rem 0.2rem; }
.btn--quiet::after { content: ""; position: absolute; left: 0.2rem; right: 0.2rem; bottom: 0.7rem; height: 1px; background: currentColor; opacity: 0.55; transform-origin: left; transition: transform 0.45s var(--ease); }
.btn--quiet:hover::after { transform: scaleX(0.5); }

/* announcement */
.announce { background: var(--ink); color: var(--bone); text-align: center; height: 40px; overflow: hidden;
  font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 300; }
.announce__track { display: flex; flex-direction: column; }
.announce__track span { height: 40px; line-height: 40px; }

/* header */
.header { position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bone) 86%, transparent);
  backdrop-filter: blur(12px) saturate(130%);
  border-bottom: 1px solid var(--hair-soft);
  transition: box-shadow 0.5s var(--ease), transform 0.4s var(--ease); }
.header[data-scrolled] { box-shadow: 0 10px 40px rgba(22,23,27,0.05); }
/* smart sticky: slide out on scroll-down, return on scroll-up */
.header[data-hidden] { transform: none; }
.header__inner { max-width: var(--maxw); margin: 0 auto; height: var(--nav-h); padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.nav { display: flex; align-items: center; gap: 2rem; }
.nav--right { justify-content: flex-end; }
.nav a { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); position: relative; padding: 0.4rem 0; transition: color 0.3s var(--ease); }
.nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease); }
.nav a:hover { color: var(--ink); }
.nav a:hover::after { transform: scaleX(1); }

/* ---- Engagement mega-menu ---- */
/* NB: keep .nav__item / wrapper UN-positioned so the panel's containing block
   is the sticky .header (full-width), not the narrow nav item. */
.nav__item--mega { align-self: stretch; display: flex; align-items: center; }
.mega {
  position: absolute; top: 100%;
  left: 50%; right: auto;
  width: min(var(--maxw), calc(100vw - 2 * var(--gutter)));
  margin-left: calc(min(var(--maxw), calc(100vw - 2 * var(--gutter))) * -0.5);
  background: var(--bone); border: 1px solid var(--hair-soft);
  box-shadow: 0 24px 50px rgba(22, 23, 27, 0.12);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0.35s var(--ease);
  z-index: 40; pointer-events: none;
}
.nav__item--mega:focus-within .mega,
.nav__item--mega.is-open .mega { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.mega__inner {
  max-width: none; margin: 0; padding: clamp(1.7rem, 2.6vw, 2.4rem) clamp(2rem, 3vw, 3rem);
  display: block;
}
.mega__shapeband { margin-bottom: clamp(1.4rem, 2.4vw, 2rem); }
.mega__shapeband .mega__shapes--band { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 0.7rem; }
.mega__shapes--band .mega__shape { flex-direction: column; gap: 0.5rem; text-align: center; font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--silver); }
.mega__shapes--band .mega__shape:hover { color: var(--ink); }
.mega__shapes--band .mega__shape-ic { width: 48px; height: 48px; }
.mega__row { display: grid; grid-template-columns: 1fr 1.15fr 1fr 1.1fr; gap: clamp(1.5rem, 2.6vw, 3rem); border-top: 1px solid var(--hair-soft); padding-top: clamp(1.4rem, 2.4vw, 2rem); }
.mega__cols { display: grid; grid-template-columns: 1fr 1fr 1fr 1.1fr; gap: clamp(1.5rem, 2.6vw, 3rem); align-items: start; }
.mega__title { font-family: var(--font-sans); font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); padding-bottom: 0.9rem; margin-bottom: 1rem; border-bottom: 1px solid var(--accent); display: inline-block; }
.mega__title--mt { margin-top: 1.8rem; }
.mega a { font-size: 0.78rem; letter-spacing: 0.02em; text-transform: none; color: var(--ink-soft); padding: 0; transition: color 0.25s var(--ease); }
.mega a::after { display: none; }
.mega a:hover { color: var(--accent); }
.mega__shapes { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem 1rem; }
.mega__shape { display: flex; align-items: center; gap: 0.7rem; }
.mega__shape-ic { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; color: var(--silver); border: 1px solid var(--hair); border-radius: 50%; transition: color 0.25s var(--ease), border-color 0.25s var(--ease); flex: 0 0 auto; }
.mega__shape:hover .mega__shape-ic { color: var(--ink); border-color: var(--ink-soft); }
.mega__links { display: grid; gap: 0.62rem; }
.mega__links--2col { grid-template-columns: 1fr 1fr; gap: 0.62rem 1.4rem; }
.mega__swatches { display: grid; gap: 0.62rem; }
.mega__swatches--2col { grid-template-columns: 1fr 1fr; gap: 0.62rem 1.2rem; }
.mega__swatches a { display: flex; align-items: center; gap: 0.6rem; }
.gem-dot { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(22, 23, 27, 0.14); }
.mega__promo { display: flex; flex-direction: column; justify-content: flex-end; gap: 0.35rem; padding: 1.4rem; min-height: 240px; color: var(--ink); background: linear-gradient(160deg, var(--mist), var(--bone)); border: 1px solid var(--hair-soft); }
.mega__promo-eyebrow { font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); }
.mega__promo-title { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.1; color: var(--ink); }
.mega__promo-lede { font-size: 0.76rem; color: var(--ink-soft); margin-bottom: 0.4rem; }
.mega__promo-cta { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--accent); align-self: flex-start; padding-bottom: 2px; }
.mega__promo:hover .mega__promo-cta { color: var(--accent); }
.mega__promo-body { display: flex; flex-direction: column; gap: 0.35rem; position: relative; z-index: 1; }
.mega__promo--img { padding: 0; overflow: hidden; justify-content: flex-end; }
.mega__promo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.mega__promo--img:hover .mega__promo-img { transform: scale(1.04); }
.mega__promo--img .mega__promo-body { padding: 2.6rem 1.7rem 1.6rem; background: linear-gradient(to top, rgba(20, 20, 22, 0.92) 0%, rgba(20, 20, 22, 0.8) 45%, rgba(20, 20, 22, 0.55) 80%, rgba(20, 20, 22, 0.2) 100%); }
.mega__promo--img .mega__promo-eyebrow { color: #ecdcb6; }
.mega__promo--img .mega__promo-title,
.mega__promo--img .mega__promo-cta { color: #fff; }
.mega__promo--img .mega__promo-lede { color: rgba(255, 255, 255, 0.86); }
.mega__promo--img:hover .mega__promo-cta { color: #ecdcb6; }
/* Tablet (881–1024px): no drawer yet — drop the hover panel, Engagement is a plain link */
@media (max-width: 1024px) and (min-width: 881px) {
  .nav__item--mega { display: contents; }
  .mega { display: none; }
}
/* Mobile drawer (≤880px): Engagement becomes an expandable accordion */
@media (max-width: 880px) {
  body[data-menu-open] .nav--left { max-height: calc(100dvh - var(--nav-h)); overflow-y: auto; }
  .nav__item--mega { display: block; }
  .nav__mega-trigger { display: flex; align-items: center; justify-content: space-between; }
  .nav__mega-trigger::after {
    content: ""; display: inline-block; width: 7px; height: 7px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg); transition: transform 0.3s var(--ease); margin-left: 0.6rem; opacity: 0.65;
  }
  .nav__item--mega.is-open .nav__mega-trigger::after { transform: rotate(-135deg); }
  .mega {
    position: static; left: auto; right: auto; width: auto; margin-left: 0;
    opacity: 1; visibility: visible; transform: none; pointer-events: auto;
    box-shadow: none; border: 0; background: transparent; z-index: auto;
    max-height: 0; overflow: hidden; transition: max-height 0.45s var(--ease);
  }
  .nav__item--mega.is-open .mega { max-height: 1800px; }
  .mega__inner { display: block; max-width: none; margin: 0; padding: 0.2rem 0 1.2rem; gap: 0; }
  .mega__col { margin-top: 1.4rem; }
  .mega__col:first-child { margin-top: 0.4rem; }
  .mega__title { font-size: 0.58rem; padding-bottom: 0.7rem; margin-bottom: 0.9rem; }
  .mega__shapeband .mega__shapes--band { grid-template-columns: repeat(4, 1fr); gap: 0.6rem; }
  .mega__shapes--band .mega__shape-ic { width: 40px; height: 40px; }
  .mega__row, .mega__cols { display: block; border-top: 0; padding-top: 0; }
  .mega__shapeband { margin-bottom: 0.2rem; }
  .nav--left .mega a { padding: 0; border-bottom: 0; font-size: 0.86rem; }
  .mega__shape { padding: 0.15rem 0; }
  .mega__promo { margin-top: 1.4rem; min-height: 150px; }
}

.brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--ink); justify-self: center; }
.brand__logo { height: 40px; width: auto; }
.brand__fallback { display: inline-flex; align-items: center; gap: 0.6rem; }
.brand__mark { color: var(--accent); display: inline-flex; }
.brand__word { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: 0.3em; padding-left: 0.3em; font-weight: 400; }

.nav__icons { display: flex; align-items: center; gap: 0.2rem; margin-left: 0.8rem; }
.iconbtn { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-soft); position: relative; transition: color 0.3s var(--ease); }
.iconbtn:hover { color: var(--accent); }
.iconbtn__count { position: absolute; top: 4px; right: 0; display: flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; background: var(--accent); color: #fff; font-family: var(--font-sans); font-size: 0.6rem; font-weight: 500; line-height: 16px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.burger { display: none; flex-direction: column; gap: 5px; width: 40px; height: 40px; align-items: center; justify-content: center; }
.burger span { width: 22px; height: 1px; background: var(--ink); transition: transform 0.35s var(--ease), opacity 0.35s var(--ease); }
.nav__mobile-extra { display: none; }   /* desktop: hidden — only appears inside the mobile burger drawer */

/* hero */
.hero { position: relative; min-height: calc(100dvh - var(--nav-h) - 40px); display: flex; align-items: flex-end; }
/* Mobile: shorter hero so the next section peeks — less forced vertical scroll */
@media (max-width: 880px) { .hero { min-height: 72dvh; } }
.hero__media { position: absolute; inset: 0; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  /* Emil: clip-path image reveal — curtain rises from the bottom on first paint */
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.4s var(--ease-out);
  animation: kenburns 20s var(--ease-out) forwards;
}
@starting-style {
  .hero__media img { clip-path: inset(0 0 100% 0); }
}
.hero__scrim { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(18,19,23,0.25) 0%, rgba(18,19,23,0.05) 35%, rgba(18,19,23,0.6) 100%); }
.hero__inner { position: relative; z-index: 3; max-width: var(--maxw); width: 100%; margin: 0 auto; padding: 0 var(--gutter) clamp(3rem, 7vw, 6rem); }
.hero__content { max-width: 640px; color: #fff; }
/* Headline must stay light over the dark hero image. A global `h1 { color }` rule in
   theme.css overrides the inherited #fff from .hero__content, so set it on the title itself. */
.hero__title { color: var(--bone); font-size: clamp(3rem, 8vw, 7rem); font-weight: 300; line-height: 0.98; letter-spacing: 0.005em;
  /* soft halo so the headline stays legible where it overlaps the bright ring (light-on-light) */
  text-shadow: 0 2px 30px rgba(18,19,23,0.6), 0 1px 2px rgba(18,19,23,0.3); }
.hero__sub { margin-top: 1.6rem; max-width: 34ch; font-size: clamp(1rem, 1.3vw, 1.18rem); color: rgba(255,255,255,0.88); font-weight: 300; }
.hero__cta { margin-top: 2.6rem; display: flex; gap: 1.6rem; align-items: center; flex-wrap: wrap; }
@keyframes kenburns { from { transform: scale(1.09); } to { transform: scale(1); } }

/* trust */
.trust { background: var(--paper); border-bottom: 1px solid var(--hair-soft); }
.trust__row { max-width: var(--maxw); margin: 0 auto; padding: clamp(2rem, 4vw, 3.2rem) var(--gutter); display: grid; grid-template-columns: repeat(4, 1fr); }
.trust__row li { display: flex; flex-direction: column; gap: 0.4rem; padding: 0 2rem; text-align: center; position: relative; }
.trust__row li + li::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 64%; background: var(--hair); }
.trust__k { font-family: var(--font-display); font-size: 1.4rem; font-weight: 400; }
.trust__v { font-size: 0.72rem; letter-spacing: 0.06em; color: var(--silver); text-transform: uppercase; }

/* section scaffold (airy) */
.section { max-width: var(--maxw); margin: 0 auto; padding: clamp(5rem, 11vw, 11rem) var(--gutter); }
/* Container alignment: Eurus base-theme sections (.page-width) inherit the WM
   responsive gutter so left/right padding matches the brand pages site-wide.
   Full-bleed overrides (.full-width-mobile.page-width) keep higher specificity. */
.page-width { padding-left: var(--gutter); padding-right: var(--gutter); }
.section__head { margin-bottom: clamp(2.4rem, 5vw, 4.2rem); }
.section__head--row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.section h2 { font-size: clamp(2.4rem, 5.2vw, 4.4rem); font-weight: 300; }
.eyebrow { font-family: var(--font-sans); font-size: 0.66rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.2rem; font-weight: 400; }
.section__link { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 1px solid var(--accent); padding-bottom: 4px; transition: color 0.3s var(--ease); }
.section__link:hover { color: var(--accent); }

/* categories bento (captions below images) */
.cat__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 26px); }
.cat__tile { display: flex; flex-direction: column; gap: 1rem; }
.cat__tile--feature { grid-row: span 2; grid-column: span 2; }
.cat__img { display: block; aspect-ratio: 3 / 4; }
.cat__tile--feature .cat__img { aspect-ratio: auto; height: 100%; min-height: 420px; }
.cat__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.cat__tile:hover .cat__img img { transform: scale(1.05); }
.cat__cap { display: flex; flex-direction: column; gap: 0.2rem; }
.cat__cap em { font-family: var(--font-display); font-style: normal; font-size: clamp(1.15rem, 1.7vw, 1.6rem); }
.cat__cap i { font-style: normal; font-size: 0.74rem; letter-spacing: 0.04em; color: var(--silver); }

/* The collections — refined reveal + hover motion */
.cat__img { overflow: hidden; transition: box-shadow 0.4s var(--ease-out); }
.cat__img img { transform: scale(1.08); transition: transform 1.1s var(--ease-out); }
.cat__tile.in .cat__img img { transform: scale(1); }              /* gentle settle as it scrolls into view */
.cat__tile:hover .cat__img img { transform: scale(1.06); }        /* zoom on hover */
.cat__tile:hover .cat__img { box-shadow: 0 22px 44px rgba(22, 23, 27, 0.12); }
.cat__cap em { transition: color 0.35s var(--ease-out); }
.cat__tile:hover .cat__cap em { color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .cat__img img { transform: none !important; transition: none; }
}

/* manifesto dark band (the one deliberate theme switch) */
.manifesto { background: var(--night); color: var(--bone); }
.manifesto__inner { max-width: 1040px; margin: 0 auto; padding: clamp(5.5rem, 12vw, 12rem) var(--gutter); text-align: center; }
.manifesto h2 { font-size: clamp(2.6rem, 6vw, 5.4rem); font-weight: 300; color: var(--bone); }
.manifesto .eyebrow { color: var(--accent); }
.manifesto__lede { margin: 1.8rem auto 0; max-width: 56ch; font-size: clamp(1.05rem, 1.5vw, 1.3rem); color: rgba(244,243,240,0.72); }
.manifesto__points { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); margin: clamp(3rem, 6vw, 5rem) 0 clamp(2.6rem, 5vw, 4rem); text-align: left; }
.manifesto__points li { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 1.4rem; border-top: 1px solid rgba(244,243,240,0.16); }
.manifesto__points span { font-family: var(--font-display); font-size: 1rem; color: var(--accent); letter-spacing: 0.1em; }
.manifesto__points strong { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; }
.manifesto__points i { font-style: normal; font-size: 0.92rem; color: rgba(244,243,240,0.6); }

/* featured carousel */
.feat__carousel { position: relative; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); --edge: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); }
.feat__track { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(250px, 25vw, 340px); gap: clamp(16px, 2vw, 32px); overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--edge) 1.2rem; scroll-padding-inline: var(--edge); scrollbar-width: none; -ms-overflow-style: none; }
.feat__track::-webkit-scrollbar { display: none; }
/* prev / next nav — appear on hover, scroll a page on click, auto-scroll while hovered */
.carousel-btn {
  position: absolute; top: 36%; transform: translateY(-50%); z-index: 4;
  width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
  background: var(--paper); border: 1px solid var(--hair); color: var(--ink); border-radius: 50%;
  box-shadow: 0 8px 24px rgba(22, 23, 27, 0.14);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease), transform 0.16s var(--ease);
}
.carousel-btn--prev { left: calc(var(--edge) - 23px); }
.carousel-btn--next { right: calc(var(--edge) - 23px); }
.feat__carousel:hover .carousel-btn { opacity: 1; pointer-events: auto; }
.carousel-btn:hover { background: var(--ink); color: var(--paper); }
.carousel-btn:active { transform: translateY(-50%) scale(0.93); }
.carousel-btn[disabled] { opacity: 0 !important; pointer-events: none !important; }
@media (hover: none) { .carousel-btn { display: none; } }
/* generic reusable carousel (gemstones + future rows) — full-bleed + hidden scrollbar */
.wm-carousel { position: relative; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); --edge: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); }
.wm-carousel__track { padding-inline: var(--edge); scroll-padding-inline: var(--edge); scrollbar-width: none; -ms-overflow-style: none; }
.wm-carousel__track::-webkit-scrollbar { display: none; }
.card { scroll-snap-align: start; }
.card__img { aspect-ratio: 4 / 5; }
.card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.card:hover .card__img img { transform: scale(1.05); }
.card__body { padding: 1.3rem 0 0; }
.card__body h3 { font-size: 1.55rem; font-weight: 400; }
.swatches { display: flex; gap: 0.55rem; margin: 0.8rem 0; }
.sw { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--hair); transition: transform 0.18s var(--ease); }
.sw:hover { transform: scale(1.2); }
.sw:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sw[data-active] { box-shadow: 0 0 0 2px var(--bone), 0 0 0 3px var(--accent); }
.sw--white { background: #e7e3dd; }
.sw--yellow { background: linear-gradient(135deg, #ecd9b0, #cda863); }
.sw--rose { background: linear-gradient(135deg, #edcbbb, #cf9f8a); }
.card__price { font-size: 0.84rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }

/* gemstones horizontal gallery */
.gems__row { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(210px, 21vw, 280px); gap: clamp(14px, 1.6vw, 24px); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; scrollbar-width: none; }
.gems__row::-webkit-scrollbar { display: none; }
.gem { scroll-snap-align: start; display: flex; flex-direction: column; gap: 1rem; }
.gem__img { display: block; aspect-ratio: 3 / 4; }
.gem__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.gem:hover .gem__img img { transform: scale(1.06); }
.gem i { font-style: normal; font-family: var(--font-display); font-size: 1.35rem; text-align: center; }

/* marquee */
.kmarquee { position: relative; background: var(--ink); color: var(--bone); overflow: hidden; padding: clamp(1rem, 2.2vw, 1.7rem) 0; }
/* edge fades: the line dissolves into the band at both sides (band stays solid full-width) */
.kmarquee::before, .kmarquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: clamp(48px, 9vw, 150px); z-index: 2; pointer-events: none; }
.kmarquee::before { left: 0; background: linear-gradient(to right, var(--ink), transparent); }
.kmarquee::after { right: 0; background: linear-gradient(to left, var(--ink), transparent); }
.kmarquee__track { display: inline-flex; align-items: center; gap: 2.8rem; white-space: nowrap; will-change: transform; animation: none; }
.kmarquee:hover .kmarquee__track { animation-play-state: paused; }
.kmarquee__track span { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1.4rem, 2.7vw, 2.35rem); letter-spacing: 0.015em; color: rgba(244, 243, 240, 0.9); }
.spark { width: 6px; height: 6px; background: var(--accent); transform: rotate(45deg); flex: none; opacity: 0.85; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* bespoke editorial split */
.bespoke { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.bespoke__media { aspect-ratio: 4 / 5; }
.bespoke__media img { width: 100%; height: 100%; object-fit: cover; }
.bespoke__body h2 { font-size: clamp(2.2rem, 4.6vw, 4rem); font-weight: 300; }
.bespoke__body p { margin: 1.5rem 0 2.4rem; max-width: 44ch; color: var(--ink-soft); font-size: 1.08rem; }

/* testimonials */
.quotes__meta { color: var(--silver); font-size: 0.78rem; letter-spacing: 0.06em; margin-top: 0.6rem; text-transform: uppercase; }
.quotes__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 4rem); }
.quote { display: flex; flex-direction: column; gap: 1.1rem; padding-top: 1.8rem; border-top: 1px solid var(--hair); }
.stars { color: var(--accent); letter-spacing: 0.18em; font-size: 0.8rem; }
.quote blockquote { margin: 0; font-family: var(--font-display); font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.32; }
.quote figcaption { font-size: 0.8rem; letter-spacing: 0.04em; color: var(--ink-soft); display: flex; flex-direction: column; gap: 0.2rem; margin-top: auto; text-transform: uppercase; }
.quote figcaption span { color: var(--silver); font-size: 0.7rem; letter-spacing: 0.06em; }

/* journal */
.journal__grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.jfeature { display: flex; flex-direction: column; }
.jfeature__img { display: block; aspect-ratio: 5 / 4; }
.jfeature__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.jfeature:hover .jfeature__img img { transform: scale(1.03); }
.jfeature__text { padding-top: 1.5rem; }
.jtag { font-style: normal; font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); }
.jfeature__text h3 { font-size: clamp(1.6rem, 2.5vw, 2.2rem); font-weight: 400; margin: 0.7rem 0 0.8rem; max-width: 22ch; }
.jfeature__text p { color: var(--ink-soft); max-width: 52ch; }
.jlist { display: flex; flex-direction: column; }
.jitem { display: flex; align-items: center; gap: clamp(1rem, 1.6vw, 1.45rem); padding: 1.3rem 0; border-top: 1px solid var(--hair); transition: padding-left 0.4s var(--ease); }
.jitem:last-child { border-bottom: 1px solid var(--hair); }
.jitem:hover { padding-left: 0.6rem; }
.jitem__img { flex: 0 0 auto; width: clamp(76px, 7vw, 100px); aspect-ratio: 1 / 1; }
.jitem__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.jitem:hover .jitem__img img { transform: scale(1.05); }
.jitem__text { flex: 1 1 auto; min-width: 0; }
.jitem h4 { font-size: clamp(1.2rem, 1.8vw, 1.5rem); font-weight: 400; margin-top: 0.4rem; }

/* newsletter */
.news { background: var(--paper); border-top: 1px solid var(--hair-soft); }
.news__inner { max-width: 620px; margin: 0 auto; padding: clamp(5rem, 10vw, 9rem) var(--gutter); text-align: center; }
.news__mark { color: var(--accent); display: inline-flex; margin-bottom: 1.4rem; }
.news__inner h2 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); font-weight: 300; }
.news__inner > p { margin: 1.1rem auto 2.4rem; color: var(--ink-soft); max-width: 44ch; }
.field { display: flex; gap: 0.7rem; }
.field input { flex: 1; padding: 1.05rem 1.2rem; border: 1px solid var(--hair); background: var(--bone); border-radius: var(--radius); font-family: var(--font-sans); font-size: 0.92rem; color: var(--ink); transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.field input::placeholder { color: var(--silver); }
.field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.news__note { min-height: 1.2rem; margin-top: 0.9rem; font-size: 0.8rem; color: var(--accent); letter-spacing: 0.04em; }
/* newsletter — editorial split (image + signup) */
.news__split { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 0.85fr 1fr; align-items: stretch; padding: 0 var(--gutter); }
.news__media { position: relative; overflow: hidden; min-height: 360px; }
.news__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.news__split .news__inner { max-width: 540px; margin: 0; padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(3rem, 6vw, 5.5rem) clamp(2.4rem, 5vw, 5rem); text-align: left; display: flex; flex-direction: column; align-items: flex-start; }
.news__split .news__inner > p { margin-left: 0; margin-right: 0; }
.news__split .news__inner .eyebrow { margin-bottom: 1.1rem; }
.news__split .news__form { width: 100%; max-width: 430px; }
@media (max-width: 880px) {
  .news__split { grid-template-columns: 1fr; padding: 0; }
  .news__media { min-height: 0; aspect-ratio: 16 / 10; }
  .news__split .news__inner { max-width: none; padding: clamp(2.4rem, 7vw, 3.4rem) var(--gutter); align-items: center; text-align: center; }
  .news__split .news__inner > p { margin-left: auto; margin-right: auto; }
  .news__split .news__form { margin-left: auto; margin-right: auto; }
  .news__split .news__inner .field { justify-content: center; }
}

/* footer */
.footer { background: var(--night); color: var(--bone); }
.footer__top { max-width: var(--maxw); margin: 0 auto; padding: clamp(3.5rem, 7vw, 6rem) var(--gutter) clamp(2.2rem, 4vw, 3.4rem); display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: clamp(2rem, 4vw, 3.4rem); }
.brand--footer { color: var(--bone); justify-self: start; }
.brand--footer .brand__mark { color: var(--accent); }
.brand--footer .brand__word { font-size: 1.25rem; }
.footer__brand p { margin-top: 1.2rem; max-width: 34ch; color: rgba(244,243,240,0.55); font-size: 0.9rem; }
.footer__contact { margin-top: 1.4rem; font-style: normal; display: grid; gap: 0.45rem; font-size: 0.9rem; color: rgba(244,243,240,0.55); }
.footer__contact a { color: rgba(244,243,240,0.8); letter-spacing: 0.04em; transition: color 0.3s var(--ease-out); }
.footer__contact a:hover { color: var(--accent); }
.footer__col h5 { font-family: var(--font-sans); font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.2rem; font-weight: 400; }
.footer__col a { display: block; padding: 0.44rem 0; color: rgba(244,243,240,0.72); font-size: 0.88rem; transition: color 0.3s var(--ease), padding-left 0.3s var(--ease); }
.footer__col a:hover { color: #fff; padding-left: 5px; }
.footer__bottom { max-width: var(--maxw); margin: 0 auto; padding: 1.7rem var(--gutter); border-top: 1px solid rgba(244,243,240,0.12); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.74rem; color: rgba(244,243,240,0.55); letter-spacing: 0.04em; }
.footer__pay { display: flex; gap: 1rem; flex-wrap: wrap; }

/* manifesto: subtle cursor spotlight (motivated: makes the dark band feel alive) */
.manifesto { position: relative; isolation: isolate; }
.manifesto::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 30%),
              rgba(156, 133, 89, 0.10), transparent 60%);
  opacity: 0; transition: opacity 0.6s var(--ease);
}
.manifesto:hover::after { opacity: 1; }
.manifesto__inner { position: relative; z-index: 1; }

/* ============ EMIL POLISH PASS ============ */

/* Stagger via nth-child (Emil: 30-80ms between items, sequential not bucketed) */
.cat__grid > .reveal:nth-child(1) { transition-delay: 0ms; }
.cat__grid > .reveal:nth-child(2) { transition-delay: 60ms; }
.cat__grid > .reveal:nth-child(3) { transition-delay: 120ms; }
.cat__grid > .reveal:nth-child(4) { transition-delay: 180ms; }
.cat__grid > .reveal:nth-child(5) { transition-delay: 240ms; }
.gems__row > .reveal:nth-child(1) { transition-delay: 0ms; }
.gems__row > .reveal:nth-child(2) { transition-delay: 60ms; }
.gems__row > .reveal:nth-child(3) { transition-delay: 120ms; }
.gems__row > .reveal:nth-child(4) { transition-delay: 180ms; }
.gems__row > .reveal:nth-child(5) { transition-delay: 240ms; }
.manifesto__points > .reveal:nth-child(1) { transition-delay: 0ms; }
.manifesto__points > .reveal:nth-child(2) { transition-delay: 70ms; }
.manifesto__points > .reveal:nth-child(3) { transition-delay: 140ms; }
.trust__row > .reveal:nth-child(1) { transition-delay: 0ms; }
.trust__row > .reveal:nth-child(2) { transition-delay: 50ms; }
.trust__row > .reveal:nth-child(3) { transition-delay: 100ms; }
.trust__row > .reveal:nth-child(4) { transition-delay: 150ms; }
.jlist > .reveal:nth-child(1) { transition-delay: 0ms; }
.jlist > .reveal:nth-child(2) { transition-delay: 70ms; }
.jlist > .reveal:nth-child(3) { transition-delay: 140ms; }
.feat__track > .reveal:nth-child(1) { transition-delay: 0ms; }
.feat__track > .reveal:nth-child(2) { transition-delay: 60ms; }
.feat__track > .reveal:nth-child(3) { transition-delay: 120ms; }
.feat__track > .reveal:nth-child(4) { transition-delay: 180ms; }

/* Press feedback on every pressable element (Emil: must feel responsive) */
.sw   { transition: transform 0.16s var(--ease-out), box-shadow 0.3s var(--ease-out); }
.sw:active { transform: scale(0.92); }
.iconbtn:active, .burger:active { transform: scale(0.94); }
.section__link { transition: color 0.3s var(--ease-out), transform 0.16s var(--ease-out); }
.section__link:active { transform: scale(0.97); }
.cat__tile:active { transform: scale(0.995); transition: transform 0.16s var(--ease-out); }

/* Featured card hover: blur during transition masks the imperfect crossfade (Emil's blur trick) */
.card__img img { will-change: transform; transition: transform 0.8s var(--ease-out), filter 0.4s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .card:hover .card__img img { filter: blur(0.5px); }
}

/* Hover gating on touch devices (Emil: gate hover behind hover:hover, pointer:fine) */
@media not all and (hover: hover) {
  .cat__tile:hover .cat__img img,
  .card:hover .card__img img,
  .gem:hover .gem__img img,
  .jfeature:hover .jfeature__img img { transform: none; filter: none; }
}

/* reveal (Emil: never from scale(0); slight scale + translate + opacity) */
.reveal {
  opacity: 0;
  transform: translateY(22px) scale(0.992);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal[data-delay="1"] { transition-delay: 0.06s; }
.reveal[data-delay="2"] { transition-delay: 0.12s; }
.reveal[data-delay="3"] { transition-delay: 0.18s; }
.reveal[data-delay="4"] { transition-delay: 0.24s; }
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   Homepage rhythm — Option 2: compact spacing + alternating
   full-width bone / white / mist surfaces (manifesto on mist —
   fully-soft, no dark bands). (Padding ~40% tighter than base.)
   ============================================================ */
body.wm-page { overflow-x: clip; }
/* Global guard: no page should ever scroll horizontally (kills the mobile
   white-strip / off-canvas leak). clip (not hidden) keeps position:sticky working. */
html, body { overflow-x: clip; }
.section { padding-top: clamp(3rem, 6.5vw, 6.5rem); padding-bottom: clamp(3rem, 6.5vw, 6.5rem); }
.section__head { margin-bottom: clamp(1.7rem, 3.4vw, 2.8rem); }
.manifesto__inner { padding-top: clamp(3.4rem, 7vw, 7rem); padding-bottom: clamp(3.4rem, 7vw, 7rem); }
.manifesto__points { margin-top: clamp(2rem, 4vw, 3.2rem); margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.news__inner { padding-top: clamp(3rem, 6vw, 5.5rem); padding-bottom: clamp(3rem, 6vw, 5.5rem); }
/* full-width background bands behind the max-width content sections */
.feat.section, .bespoke.section, .quotes.section { position: relative; isolation: isolate; }
.feat.section::before, .bespoke.section::before, .quotes.section::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }
.feat.section::before { background: var(--paper); }
.bespoke.section::before { background: var(--mist); }
.quotes.section::before { background: var(--paper); }

/* Manifesto — light surface variant (fully-soft Option 2: mist + dark text) */
.manifesto { background: var(--mist); color: var(--ink); }
.manifesto::after { display: none; }                    /* drop the dark-only spotlight */
.manifesto h2 { color: var(--ink); }
.manifesto__lede { color: var(--ink-soft); }
.manifesto__points li { border-top-color: var(--hair); }
.manifesto__points i { color: var(--ink-soft); }
.manifesto .btn--ghost { color: var(--ink); border-color: var(--hair); }
.manifesto .btn--ghost:hover { color: var(--ink); border-color: var(--ink); background: transparent; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
  .nav--left a:nth-child(3), .nav--right a { display: none; }
}
@media (max-width: 880px) {
  :root { --nav-h: 64px; }
  .header__inner { grid-template-columns: auto 1fr auto; column-gap: 0.5rem; }
  .nav--left {
    flex-direction: column; gap: 0; align-items: stretch;
    position: fixed; top: var(--nav-h); left: 0; right: 0;
    background: var(--bone); border-bottom: 1px solid var(--hair);
    padding: 0 var(--gutter);
    transform: translateY(-12px); opacity: 0; pointer-events: none; visibility: hidden;
    /* Emil: drawer-specific easing (Ionic / iOS) */
    transform-origin: top center;
    transition: opacity 0.4s var(--ease-drawer), transform 0.4s var(--ease-drawer), visibility 0.4s; z-index: 49;
  }
  .nav--left a { padding: 1.1rem 0; border-bottom: 1px solid var(--hair-soft); font-size: 0.82rem; }
  .nav--left a:last-child { border-bottom: 0; }
  .nav__mobile-extra { display: block; }
  .nav__mobile-extra a { display: block; }
  body[data-menu-open] .nav--left { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
  body[data-menu-open] .burger span:first-child { transform: translateY(3px) rotate(45deg); }
  body[data-menu-open] .burger span:last-child { transform: translateY(-3px) rotate(-45deg); }
  /* Mobile chrome: menu icon far-left · logo centered · account+cart far-right */
  .burger { display: flex; grid-column: 1; justify-self: start; }
  .brand { grid-column: 2; justify-self: center; }
  .brand__word { font-size: 1.15rem; letter-spacing: 0.18em; }
  .nav--right { grid-column: 3; justify-self: end; gap: 0; }
  /* Right-nav categories + About collapse into the burger drawer on mobile.
     Hiding them also removes the off-screen mega panels that pushed the
     header to 466px (the 54px overflow → white strip + clipped grid). */
  .nav--right .nav__item--mega,
  .nav--right > a { display: none; }
  .nav__icons { display: flex; margin-left: 0; gap: 0; }
  .nav__icons .iconbtn { display: inline-flex; }   /* re-show account + cart (overrides .nav--right a:none at ≤1024) */
  .nav__icons .iconbtn[aria-label="Search"] { display: none; }   /* search lives in-page, not the header */

  .cat__grid { grid-template-columns: repeat(2, 1fr); }
  .cat__tile--feature { grid-column: span 2; grid-row: span 1; }
  .cat__tile--feature .cat__img { aspect-ratio: 16/10; min-height: 0; }
  .manifesto__points { grid-template-columns: 1fr; gap: 0; }
  .manifesto__points li { border-top: 1px solid rgba(244,243,240,0.16); padding: 1.4rem 0; }
  .bespoke { grid-template-columns: 1fr; gap: 2rem; }
  .quotes__grid { grid-template-columns: 1fr; }
  .journal__grid { grid-template-columns: 1fr; }
  .trust__row { grid-template-columns: repeat(2, 1fr); gap: 1.6rem 0; }
  .trust__row li + li::before { display: none; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: span 2; }
}
@media (max-width: 520px) {
  .field { flex-direction: column; }
  .footer__top { grid-template-columns: 1fr; }
  .footer__brand { grid-column: auto; }
  .hero__cta { gap: 1.1rem; }
  .cat__grid { grid-template-columns: 1fr; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .hero__media img { animation: none; }
  .kmarquee__track { animation: none; }
}

/* ============ COLLECTION PAGE (engagement rings) ============ */
/* =========================================================
   WHITE MOON — collection page (engagement rings)
   Extends styles.css tokens; adds page-specific components.
   ========================================================= */

.collection { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
/* Center the collection container. The global `body.wm-page #MainContent { margin: 0 !important }`
   rule kills .collection's auto margins, pinning the page left (large gap on the right) on wide
   screens. Re-assert centering for the collection page only, matching its specificity + !important. */
body.wm-page main#MainContent.wm-collection-page,
body.wm-page main#MainContent.wm-pdp {
  margin-left: auto !important; margin-right: auto !important;
  padding-left: var(--gutter) !important; padding-right: var(--gutter) !important;
}

/* breadcrumb */
.crumb { padding: clamp(1.4rem, 2.6vw, 2.2rem) 0 0; }
.crumb ol { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--silver); }
.crumb li { display: inline-flex; align-items: center; }
.crumb li + li::before { content: "/"; padding: 0 0.6rem; color: var(--hair); }
.crumb a { transition: color 0.3s var(--ease-out); }
.crumb a:hover { color: var(--ink); }
.crumb [aria-current="page"] { color: var(--ink); }

/* collection hero (restrained editorial) */
.chero { padding: clamp(2.4rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem); text-align: center; max-width: 720px; margin: 0 auto; }
.chero h1 { font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 300; letter-spacing: 0.005em; }
.chero__lede { margin-top: 1.2rem; color: var(--ink-soft); font-size: clamp(0.98rem, 1.2vw, 1.1rem); }

/* shape strip */
.shape-strip { padding: clamp(1rem, 2.4vw, 2rem) 0 clamp(2rem, 3vw, 2.6rem); border-bottom: 1px solid var(--hair-soft); }
.shape-strip__track {
  display: flex; gap: clamp(14px, 1.4vw, 22px);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0.5rem 0; scrollbar-width: none;
}
.shape-strip__track::-webkit-scrollbar { display: none; }
.shape-tile {
  scroll-snap-align: start; flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
  width: 92px; padding: 0.9rem 0.6rem;
  border: 1px solid var(--hair-soft); background: transparent; color: var(--ink-soft);
  font-family: var(--font-sans); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase;
  transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out), background 0.3s var(--ease-out), transform 0.16s var(--ease-out);
}
.shape-tile:hover { color: var(--ink); border-color: var(--ink-soft); }
.shape-tile:active { transform: scale(0.97); }
.shape-tile[aria-pressed="true"] {
  color: var(--ink); border-color: var(--ink); background: var(--paper);
  box-shadow: inset 0 -3px 0 var(--accent);
}
.shape-tile[aria-pressed="true"] .shape-tile__svg { color: var(--ink); }
.shape-tile__svg { color: var(--silver); transition: color 0.3s var(--ease-out); }
.shape-tile:hover .shape-tile__svg { color: var(--ink-soft); }

/* active chip row */
.active-chips {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
  padding: clamp(1.4rem, 2vw, 1.8rem) 0;
  min-height: 56px;
}
.chip {
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 0.45rem 0.45rem 0.45rem 0.9rem;
  border: 1px solid var(--hair); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink); background: var(--paper);
  transition: transform 0.16s var(--ease-out), border-color 0.3s var(--ease-out);
}
.chip:hover { border-color: var(--ink-soft); }
.chip button {
  width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.1rem; color: var(--silver); transition: color 0.3s var(--ease-out);
}
.chip button:hover { color: var(--ink); }
.chip-clear {
  margin-left: 0.4rem; padding: 0.4rem 0;
  font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent);
  border-bottom: 1px solid var(--accent); transition: opacity 0.3s var(--ease-out);
}
.chip-clear:hover { opacity: 0.7; }

/* two-column body */
.collection-body {
  display: grid; grid-template-columns: 240px 1fr;
  gap: clamp(2.4rem, 4vw, 4rem);
  padding-bottom: clamp(5rem, 8vw, 8rem);
}

/* sidebar filters */
.filters {
  position: sticky; top: calc(var(--nav-h) + 50px);
  align-self: start;
  max-height: calc(100vh - var(--nav-h) - 100px);
  overflow-y: auto; padding-right: 0.5rem;
  scrollbar-width: thin;
}
.filters::-webkit-scrollbar { width: 3px; }
.filters::-webkit-scrollbar-thumb { background: var(--hair); }
/* Metal filter — vertical list (swatch · label · count), not a horizontal row */
.filter-list--metal { padding-top: 1rem; display: grid; gap: 0.55rem; }
.metal-row { display: flex; align-items: center; gap: 0.65rem; cursor: pointer; font-size: 0.82rem; color: var(--ink-soft); transition: color 0.25s var(--ease-out); }
.metal-row:hover { color: var(--ink); }
.metal-row .metal-pick { width: 18px; height: 18px; flex: 0 0 auto; }
.metal-row .vh:checked ~ .metal-pick { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--accent); }
.metal-row .vh:focus-visible ~ .metal-pick { outline: 2px solid var(--accent); outline-offset: 2px; }
.metal-row .vh:disabled ~ .metal-pick { opacity: 0.35; }
.metal-row__label { flex: 1; }
.metal-row em { font-style: normal; font-size: 0.7rem; letter-spacing: 0.06em; color: var(--silver); }
.metal-row.is-disabled { opacity: 0.4; cursor: not-allowed; }
.metal-pick--platinum { background: linear-gradient(135deg, #e8e8ec, #c7c8cd); }

.filter-group { border-top: 1px solid var(--hair-soft); padding: 1.4rem 0; }
.filter-group:first-child { border-top: 0; padding-top: 0.4rem; }
.filter-group summary {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink); cursor: pointer; list-style: none;
  padding: 0.2rem 0;
  transition: color 0.3s var(--ease-out);
}
.filter-group summary::-webkit-details-marker { display: none; }
.filter-group summary:hover { color: var(--accent); }
.chev {
  width: 8px; height: 8px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg); transition: transform 0.3s var(--ease-out);
}
.filter-group[open] > summary .chev { transform: rotate(-135deg); }
.filter-list { padding-top: 0.85rem; display: grid; gap: 0; }
.filter-list label {
  display: flex; align-items: center; gap: 0.6rem; cursor: pointer;
  font-size: 0.84rem; color: var(--ink-soft);
  padding: 0.4rem 0.15rem 0.4rem 0;
  transition: color 0.3s var(--ease-out);
}
.filter-list label:hover { color: var(--ink); }
.filter-list label input { flex: 0 0 14px; appearance: none; -webkit-appearance: none; width: 14px; height: 14px; border: 1px solid var(--silver); cursor: pointer; position: relative; transition: border-color 0.3s var(--ease-out), background 0.3s var(--ease-out); }
.filter-list label input:checked { border-color: var(--ink); background: var(--ink); }
.filter-list label input:checked::after { content: ""; position: absolute; left: 50%; top: 45%; width: 3px; height: 7px; border: solid var(--paper); border-width: 0 1.5px 1.5px 0; transform: translate(-50%, -50%) rotate(45deg); }
.filter-list label span { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.filter-list em { flex: 0 0 auto; margin-left: 0.6rem; font-style: normal; font-size: 0.72rem; color: var(--silver); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }

.filter-swatch-row { padding-top: 1rem; display: flex; gap: 1.1rem; }
.filter-swatch-row li { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.filter-swatch-row span { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--silver); }
.metal-pick { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--hair); transition: transform 0.16s var(--ease-out), box-shadow 0.3s var(--ease-out); }
.metal-pick:hover { transform: scale(1.12); }
.metal-pick:active { transform: scale(0.92); }
.metal-pick[aria-pressed="true"], .metal-pick.is-active { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--accent); }
.metal-pick--white { background: #e7e3dd; }
.metal-pick--yellow { background: linear-gradient(135deg, #ecd9b0, #cda863); }
.metal-pick--rose { background: linear-gradient(135deg, #edcbbb, #cf9f8a); }
.metal-pick--platinum { background: linear-gradient(135deg, #e6e7e3, #c9cbc6); }

.range { padding-top: 1.3rem; }
.range__track { position: relative; height: 1px; background: var(--hair); margin: 0 8px; }
.range__fill { position: absolute; top: 0; height: 1px; background: var(--accent); }
.range__handle { position: absolute; top: 50%; width: 14px; height: 14px; background: var(--paper); border: 1px solid var(--ink); border-radius: 50%; transform: translate(-50%, -50%); cursor: grab; transition: transform 0.16s var(--ease-out); }
.range__handle:hover { transform: translate(-50%, -50%) scale(1.15); }
.range__handle:active { cursor: grabbing; transform: translate(-50%, -50%) scale(0.92); }
.range__labels { display: flex; justify-content: space-between; margin-top: 1rem; font-size: 0.7rem; letter-spacing: 0.06em; color: var(--ink-soft); }

.chip-row { padding-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip-small {
  padding: 0.4rem 0.7rem; border: 1px solid var(--hair); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
  transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out), background 0.3s var(--ease-out), transform 0.16s var(--ease-out);
}
.chip-small:hover { color: var(--ink); border-color: var(--ink-soft); }
.chip-small:active { transform: scale(0.95); }
.chip-small.is-active { color: var(--paper); background: var(--ink); border-color: var(--ink); }

/* ============ WM data-driven facets (Phase 1) ============ */
/* visually-hidden but accessible (form control behind metal/clarity visuals) */
.filters .vh, .filter-drawer .vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* active-count badge on a filter group summary */
.fg-count { font-style: normal; font-size: 0.6rem; font-weight: 500; line-height: 16px; color: var(--paper); background: var(--accent); border-radius: 999px; min-width: 16px; height: 16px; padding: 0 4px; margin-left: 0.5rem; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; font-variant-numeric: tabular-nums; }
/* 0-result options */
.filter-list label.is-disabled { opacity: 0.38; cursor: not-allowed; }
.filter-list label.is-disabled input { cursor: not-allowed; }
/* metal swatch as a real checkbox control */
.metal-label { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; cursor: pointer; margin: 0; }
.metal-label .vh:focus-visible ~ .metal-pick { outline: 2px solid var(--accent); outline-offset: 2px; }
.metal-label .vh:checked ~ .metal-pick { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--accent); }
.metal-label .vh:disabled ~ .metal-pick { opacity: 0.35; }
/* clarity / certificate chip as a real checkbox control */
.chip-label { display: inline-flex; cursor: pointer; margin: 0; }
.chip-label .vh:checked ~ .chip-small { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.chip-label .vh:focus-visible ~ .chip-small { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip-label .vh:disabled ~ .chip-small { opacity: 0.35; cursor: not-allowed; }
/* numeric price range inputs */
.range--inputs { padding-top: 1.2rem; }
.range__inputs { display: flex; align-items: flex-end; gap: 0.6rem; }
.range__field { display: flex; flex-direction: column; gap: 0.35rem; flex: 1; min-width: 0; }
.range__field span { font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--silver); }
.range__field input { width: 100%; border: 1px solid var(--hair); background: var(--paper); padding: 0.5rem 0.6rem; font-family: var(--font-sans); font-size: 0.82rem; color: var(--ink); transition: border-color 0.3s var(--ease-out); }
.range__field input:focus { outline: none; border-color: var(--ink-soft); }
.range__sep { padding-bottom: 0.55rem; color: var(--silver); }
/* apply action */
.facet-actions { padding-top: 1.6rem; }
.facet-apply { width: 100%; justify-content: center; }
.filters__empty, .drawer__empty { font-size: 0.78rem; color: var(--silver); padding: 1rem 0; }
/* active filter chips bar */
.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding-bottom: 1.4rem; }
.active-filters__chip { display: inline-flex; align-items: center; gap: 0.45rem; border: 1px solid var(--hair); border-radius: 999px; padding: 0.36rem 0.4rem 0.36rem 0.8rem; font-size: 0.72rem; letter-spacing: 0.03em; color: var(--ink); background: var(--paper); transition: border-color 0.3s var(--ease-out), color 0.3s var(--ease-out); }
.active-filters__chip:hover { border-color: var(--ink); }
.active-filters__chip svg { width: 11px; height: 11px; color: var(--silver); transition: color 0.3s var(--ease-out); }
.active-filters__chip:hover svg { color: var(--ink); }
.active-filters__clear { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; margin-left: 0.3rem; }
.active-filters__clear:hover { color: var(--accent); }
/* grid loading state (used by AJAX in increment 1b) */
.prod-grid.is-loading { opacity: 0.45; pointer-events: none; transition: opacity 0.2s var(--ease-out); }

/* grid wrap */
.grid-wrap { min-width: 0; }
.toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-bottom: clamp(1.6rem, 2.6vw, 2.4rem); border-bottom: 1px solid var(--hair-soft);
}
.toolbar__count { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }
.toolbar__count strong { color: var(--ink); font-weight: 500; }

/* sort dropdown (origin-aware) */
.sort { position: relative; }
.sort__btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-soft); padding: 0.6rem 0.8rem; border: 1px solid var(--hair);
  transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out), transform 0.16s var(--ease-out);
}
.sort__btn:hover { color: var(--ink); border-color: var(--ink-soft); }
.sort__btn:active { transform: scale(0.97); }
.sort__btn em { font-style: normal; color: var(--ink); font-weight: 500; }
.caret { width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); margin-left: 0.2rem; transition: transform 0.3s var(--ease-out); }
.sort__btn[aria-expanded="true"] .caret { transform: rotate(-135deg); }
.sort__menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 220px;
  background: var(--paper); border: 1px solid var(--hair-soft);
  box-shadow: 0 14px 50px rgba(22,23,27,0.08);
  padding: 0.3rem 0; transform-origin: top right;
  opacity: 0; transform: scale(0.96) translateY(-4px); pointer-events: none;
  transition: opacity 0.18s var(--ease-out), transform 0.18s var(--ease-out);
  z-index: 30;
}
.sort__menu.is-open { opacity: 1; transform: none; pointer-events: auto; }
.sort__menu li {
  padding: 0.7rem 1.1rem;
  font-size: 0.78rem; color: var(--ink-soft); cursor: pointer;
  transition: color 0.3s var(--ease-out), background 0.3s var(--ease-out);
}
.sort__menu li:hover { color: var(--ink); background: var(--bone); }
.sort__menu li[aria-selected="true"] { color: var(--ink); background: var(--bone); }

/* product grid */
.prod-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.4vw, 36px);
  padding: clamp(2rem, 3vw, 2.6rem) 0;
}
.prod {
  display: flex; flex-direction: column;
  transition: transform 0.16s var(--ease-out);
}
.prod:active { transform: scale(0.995); }
.prod__img { aspect-ratio: 4/5; overflow: hidden; background: #fff; border: 1px solid rgba(28, 26, 23, 0.06); }
/* White-background product shots: contain (not cover) so the whole piece shows
   on a white tile; padding frames it. Matches the homepage .es-card treatment. */
.prod__img img {
  width: 100%; height: 100%; object-fit: contain; padding: 7%; box-sizing: border-box;
  transition: transform 0.9s var(--ease-out), filter 0.4s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .prod:hover .prod__img img { transform: scale(1.035); }
}
.prod__body { padding: 1.1rem 0 0; display: flex; flex-direction: column; gap: 0.5rem; }
.prod__body h3 { font-size: 1.3rem; font-weight: 400; line-height: 1.2; }
/* Grid: clamp titles to 2 lines so every card is the same height (fixes uneven 3–4 line names) */
.prod-grid:not(.is-list) .prod__body h3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: calc(1.3rem * 1.2 * 2); }
.prod__meta { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--silver); }
.prod .swatches { display: flex; gap: 0.45rem; margin: 0.2rem 0; }
.prod .sw { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--hair); display: inline-block; }
.prod__price { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }

/* load more */
.load-wrap { display: flex; justify-content: center; padding: clamp(2.4rem, 4vw, 4rem) 0 0; }
/* numbered pagination */
.wm-pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.3rem; padding: clamp(2.4rem, 4vw, 4rem) 0 0; }
.wm-pagination__page, .wm-pagination__arrow, .wm-pagination__gap {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 0.5rem;
  font-family: var(--font-sans); font-size: 0.8rem; letter-spacing: 0.04em; color: var(--ink-soft);
  border: 1px solid transparent;
  transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out), background 0.2s var(--ease-out);
}
.wm-pagination__page:hover, .wm-pagination__arrow:hover { color: var(--ink); border-color: var(--hair); }
.wm-pagination__page.is-current { color: var(--paper); background: var(--ink); border-color: var(--ink); cursor: default; }
.wm-pagination__gap { color: var(--silver); min-width: 24px; }
.wm-pagination__arrow.is-disabled { opacity: 0.3; pointer-events: none; }

/* mobile filter drawer (off-canvas) */
.drawer-scrim {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(22,23,27,0.55); backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.32s var(--ease-out);
}
.drawer-scrim.is-open { opacity: 1; pointer-events: auto; }

.filter-drawer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 81;
  max-height: 88dvh; background: var(--bone);
  display: flex; flex-direction: column;
  transform: translateY(100%);
  /* visibility keeps the closed drawer's inputs out of the tab order (a11y) */
  visibility: hidden;
  transition: transform 0.32s var(--ease-drawer), visibility 0s 0.32s;
  border-top: 1px solid var(--hair-soft);
}
.filter-drawer.is-open { transform: translateY(0); visibility: visible; transition: transform 0.32s var(--ease-drawer), visibility 0s 0s; }
.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem var(--gutter); border-bottom: 1px solid var(--hair-soft);
}
.drawer__head h3 { font-family: var(--font-display); font-size: 1.6rem; font-weight: 400; }
.drawer__body { flex: 1; overflow-y: auto; padding: 0.5rem var(--gutter) 1rem; }
.drawer__foot {
  display: grid; grid-template-columns: 1fr 2fr; gap: 0.8rem;
  padding: 1rem var(--gutter) calc(1rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--hair-soft); background: var(--paper);
}

/* mobile sticky bottom bar */
.mobile-bar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--hair-soft);
  padding: 0.8rem var(--gutter) calc(0.8rem + env(safe-area-inset-bottom));
}
.mobile-bar button {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.85rem 1rem; font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink);
  border: 1px solid var(--hair-soft); background: transparent;
  transition: transform 0.16s var(--ease-out), border-color 0.3s var(--ease-out);
}
.mobile-bar button:hover { border-color: var(--ink); }
.mobile-bar button:active { transform: scale(0.97); }
.mobile-bar button em { font-style: normal; font-weight: 500; color: var(--accent); }
.mobile-bar button + button { margin-left: 0.6rem; }

/* responsive */
@media (max-width: 1100px) {
  .prod-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 880px) {
  .collection-body { grid-template-columns: 1fr; gap: 0; }
  .filters { display: none; }
  .prod-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .toolbar { padding-bottom: 1rem; }
  .mobile-bar { display: flex; }
  .collection { padding-bottom: 88px; }
  .shape-tile { width: 80px; padding: 0.7rem 0.5rem; }
  .chero h1 { font-size: clamp(2.2rem, 9vw, 3.4rem); }
  /* sort menu becomes a bottom sheet (reachable from the sticky bar's Sort button) */
  .sort__menu {
    position: fixed; left: 14px; right: 14px; top: auto;
    bottom: calc(84px + env(safe-area-inset-bottom));
    min-width: 0; z-index: 96; transform-origin: bottom center;
    box-shadow: 0 -14px 50px rgba(22,23,27,0.14);
  }
  .sort__menu li { padding: 0.85rem 1rem; }
  /* comfortable touch targets in the filter drawer + chips */
  .filter-drawer .filter-list label, .filter-drawer .metal-row { padding-block: 0.65rem; }
  .filter-drawer .filter-group summary { padding-block: 0.7rem; }
  .active-filters__chip { padding-block: 0.6rem; }
  .drawer__head .iconbtn { width: 44px; height: 44px; }
}
@media (max-width: 480px) {
  .crumb { font-size: 0.62rem; }
  .prod__body h3 { font-size: 1.1rem; }
}

/* collection empty state */
.empty-state { text-align: center; padding: clamp(4rem, 8vw, 7rem) 0; }
.empty-state h3 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 300; }
.empty-state p { margin-top: 1rem; color: var(--ink-soft); }
.empty-state a { border-bottom: 1px solid var(--accent); color: var(--accent); }

/* ============ REELS (vertical snap feed; collection ?view=reels) ============ */

/* Hide the global WM chrome on reels pages, dark the body, lock body scroll. */
body.wm-reels { background: #050505 !important; overflow: hidden !important; }
body.wm-reels .wm-section--header,
body.wm-reels .wm-section--footer { display: none !important; }

/* Reels palette adds (only used when body.wm-reels is set) */
body.wm-reels { --hot: #ff3b6b; }

.reel-top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  display: grid; grid-template-columns: 44px 1fr 44px; align-items: center;
  padding: calc(env(safe-area-inset-top, 0) + 14px) 14px 14px;
  background: linear-gradient(180deg, rgba(0,0,0,0.6), transparent);
  pointer-events: none;
}
.reel-top > * { pointer-events: auto; }
.reel-icon {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  color: #fff; border-radius: 999px;
  transition: background 0.3s var(--ease-out), transform 0.16s var(--ease-out);
}
.reel-icon:hover { background: rgba(255,255,255,0.1); }
.reel-icon:active { transform: scale(0.92); }
.reel-brand {
  justify-self: center;
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-display); font-size: 0.92rem; letter-spacing: 0.32em;
  color: #fff;
}

.reels {
  position: fixed; inset: 0;
  overflow-y: auto; overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  background: #050505;
  color: #fff;
}
.reels::-webkit-scrollbar { display: none; }

@media (min-width: 880px) {
  .reels {
    inset: 0; left: 50%; transform: translateX(-50%);
    width: min(440px, 100vw);
    box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
  }
  .reel-top { left: 50%; transform: translateX(-50%); width: min(440px, 100vw); }
  .reels-hint { left: 50%; transform: translateX(-50%); width: min(440px, 100vw); }
}

.reel {
  position: relative;
  height: 100dvh; width: 100%;
  scroll-snap-align: start; scroll-snap-stop: always;
  overflow: hidden; background: #050505;
}
.reel__track {
  position: absolute; inset: 0;
  display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  touch-action: pan-x pan-y;
}
.reel__track::-webkit-scrollbar { display: none; }
.reel__media {
  flex: 0 0 100%; width: 100%; height: 100%;
  scroll-snap-align: start; scroll-snap-stop: always;
  position: relative; background: #0c0c0c;
}
.reel__media img,
.reel__media video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.reel__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.55) 100%),
    linear-gradient(90deg, transparent 60%, rgba(0,0,0,0.25) 100%);
}

.video-badge {
  position: absolute; top: calc(env(safe-area-inset-top, 0) + 66px); left: 14px; z-index: 4;
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.34rem 0.6rem;
  background: rgba(0,0,0,0.45); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff; font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase;
}
.video-badge::before { content: ""; display: inline-block; width: 0; height: 0; border-left: 6px solid #fff; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }

.reel__dots {
  position: absolute; top: calc(env(safe-area-inset-top, 0) + 60px); left: 50%; transform: translateX(-50%); z-index: 4;
  display: flex; gap: 0.34rem;
}
.reel__dots .dot {
  width: 22px; height: 2px; background: rgba(255,255,255,0.32);
  transition: background 0.35s var(--ease-out), width 0.35s var(--ease-out);
}
.reel__dots .dot.is-active { background: #fff; width: 28px; }

.reel__rail {
  position: absolute; right: 12px; bottom: clamp(150px, 22vh, 220px); z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: 1.2rem;
}
.rail-btn {
  display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
  color: #fff;
  transition: transform 0.16s var(--ease-out);
}
.rail-btn:active { transform: scale(0.92); }
.rail-btn__icon {
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.36); backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out), border-color 0.3s var(--ease-out), transform 0.35s var(--ease-out);
}
.rail-btn:hover .rail-btn__icon { background: rgba(0,0,0,0.55); border-color: rgba(255,255,255,0.22); }
.rail-btn__label { font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.82); }
.rail-btn[data-action="cart"] .rail-btn__icon { background: linear-gradient(140deg, var(--accent), #7d6940); border-color: rgba(255,255,255,0.2); color: #fff; }
.rail-btn[data-action="like"][data-liked="true"] .rail-btn__icon { color: var(--hot); border-color: rgba(255,59,107,0.5); animation: reel-pop 0.4s var(--ease-out); }
.rail-btn[data-action="like"][data-liked="true"] svg { fill: var(--hot); }
@keyframes reel-pop { 0% { transform: scale(1); } 35% { transform: scale(1.22); } 100% { transform: scale(1); } }

.reel__info {
  position: absolute; left: 0; right: 60px; bottom: 0; z-index: 4;
  padding: 1.4rem 1.2rem calc(env(safe-area-inset-bottom, 0) + 1.4rem);
  color: #fff;
}
.reel__name { font-family: var(--font-display); font-size: clamp(1.7rem, 5.5vw, 2.1rem); font-weight: 400; line-height: 1.05; margin: 0; }
.reel__meta { margin-top: 0.4rem; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.74); }
.reel__price { margin-top: 0.5rem; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.92); }
.reel__price strong { color: #fff; font-weight: 500; }
.reel__cta {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-top: 0.9rem; padding: 0.45rem 0;
  font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: #fff; border-bottom: 1px solid var(--accent);
  transition: padding-right 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}
.reel__cta::after { content: "→"; transition: transform 0.3s var(--ease-out); }
.reel__cta:hover { padding-right: 0.4rem; opacity: 0.85; }
.reel__cta:hover::after { transform: translateX(3px); }

.heart-burst {
  position: absolute; top: 50%; left: 50%; z-index: 6;
  width: 110px; height: 110px;
  transform: translate(-50%, -50%) scale(0.4);
  color: var(--hot); opacity: 0; pointer-events: none;
  filter: drop-shadow(0 12px 28px rgba(255,59,107,0.55));
}
.heart-burst.is-on { animation: heart-pop 0.9s var(--ease-out) forwards; }
@keyframes heart-pop {
  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
  18%  { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
}

.reels-toast {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0) + 22px); z-index: 60;
  transform: translate(-50%, 12px);
  padding: 0.78rem 1.25rem;
  background: rgba(15,15,15,0.92); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff; font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.reels-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

.reels-hint {
  position: fixed; bottom: calc(env(safe-area-inset-bottom, 0) + 28px); left: 0; right: 0;
  display: flex; justify-content: center; align-items: center; gap: 0.6rem;
  font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.75);
  pointer-events: none; z-index: 25;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.reels-hint.is-on { opacity: 1; transform: translateY(0); animation: reels-hint-bounce 2.4s var(--ease-out) infinite; }
.reels-hint.is-gone { opacity: 0; pointer-events: none; }
@keyframes reels-hint-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ============ REELS POLISH (overrides) ============
   ui-ux-pro-max: §1 color-contrast, §5 visual-hierarchy,
   §6 truncation-strategy + whitespace-balance.
   Appended last so the cascade wins. */

/* Top scrim: stronger and taller for legibility on light slides */
body.wm-reels .reel-top {
  background: linear-gradient(180deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.42) 50%, transparent 100%);
  padding: calc(env(safe-area-inset-top, 0) + 14px) 14px 36px;
}
/* Brand wordmark: shadowed for guaranteed contrast everywhere */
body.wm-reels .reel-brand {
  font-size: 0.84rem;
  letter-spacing: 0.28em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.55), 0 0 12px rgba(0,0,0,0.35);
}
body.wm-reels .reel-brand svg { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.55)); }
/* Chrome icons: visible stroke even on the lightest images */
body.wm-reels .reel-icon svg { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6)); }
/* Dots: subtle shadow so the inactive ones don't vanish */
body.wm-reels .reel__dots .dot { box-shadow: 0 1px 2px rgba(0,0,0,0.45); }

/* Bottom scrim: deeper, longer fade for the info zone */
body.wm-reels .reel__media::after {
  background:
    linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.82) 100%),
    linear-gradient(90deg, transparent 60%, rgba(0,0,0,0.22) 100%);
}

/* Info block: tighter, clears the rail, never overpowers the image */
body.wm-reels .reel__info {
  right: 78px;
  padding: 1rem 1rem calc(env(safe-area-inset-bottom, 0) + 1rem);
}
body.wm-reels .reel__name {
  font-size: clamp(1.05rem, 3.3vw, 1.4rem);
  line-height: 1.18;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0,0,0,0.55);
}
body.wm-reels .reel__meta {
  margin-top: 0.35rem;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
}
body.wm-reels .reel__price {
  margin-top: 0.4rem;
  font-size: 0.72rem;
}
body.wm-reels .reel__cta {
  margin-top: 0.55rem;
  padding: 0.32rem 0;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
}

/* Rail labels stay legible on bright slides too */
body.wm-reels .rail-btn__label { text-shadow: 0 1px 2px rgba(0,0,0,0.55); }

/* ============ REELS metal swatches ============ */
body.wm-reels .reel__swatches {
  display: flex; gap: 0.55rem; margin-top: 0.45rem;
}
body.wm-reels .rsw {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.4);
  padding: 0; cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
  transition: transform 0.18s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
body.wm-reels .rsw:hover { transform: scale(1.14); }
body.wm-reels .rsw:active { transform: scale(0.92); }
body.wm-reels .rsw.is-active {
  box-shadow: 0 0 0 2px #050505, 0 0 0 4px var(--accent), 0 2px 6px rgba(0,0,0,0.5);
  cursor: default;
}
body.wm-reels .rsw--white    { background: #e8e4de; }
body.wm-reels .rsw--yellow   { background: linear-gradient(135deg, #ecd9b0, #cda863); }
body.wm-reels .rsw--rose     { background: linear-gradient(135deg, #edcbbb, #cf9f8a); }
body.wm-reels .rsw--silver   { background: linear-gradient(135deg, #ececec, #b6b9bf); }
body.wm-reels .rsw--platinum { background: linear-gradient(135deg, #e5e7eb, #aab0ba); }

/* ============ REELS filter sheet ============ */
body.wm-reels .filter-scrim {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.32s var(--ease-out);
}
body.wm-reels .filter-scrim.is-open { opacity: 1; pointer-events: auto; }

body.wm-reels .filter-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 81;
  max-height: 80dvh;
  background: #0c0c0c;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.32s var(--ease-drawer);
  font-family: var(--font-sans);
}
body.wm-reels .filter-sheet.is-open { transform: translateY(0); }
@media (min-width: 880px) {
  body.wm-reels .filter-sheet {
    left: 50%; right: auto; width: min(440px, 100vw); transform: translate(-50%, 100%);
  }
  body.wm-reels .filter-sheet.is-open { transform: translate(-50%, 0); }
}

body.wm-reels .filter-sheet__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem 1rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.08);
}
body.wm-reels .filter-sheet__head h3 {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; color: #fff; margin: 0;
}

body.wm-reels .filter-sheet__body {
  flex: 1; overflow-y: auto; padding: 1rem 1.1rem 1.5rem;
}
body.wm-reels .fgroup { margin-bottom: 1.6rem; }
body.wm-reels .fgroup h4 {
  font-family: var(--font-sans);
  font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent); font-weight: 400; margin: 0 0 0.85rem;
}
body.wm-reels .chip-row { display: flex; flex-wrap: wrap; gap: 0.45rem; }
body.wm-reels .filter-chip {
  padding: 0.55rem 0.9rem;
  font-family: var(--font-sans);
  font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 0;
  transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out), background 0.3s var(--ease-out), transform 0.16s var(--ease-out);
}
body.wm-reels .filter-chip:hover { color: #fff; border-color: rgba(255,255,255,0.4); }
body.wm-reels .filter-chip:active { transform: scale(0.95); }
body.wm-reels .filter-chip.is-active {
  color: #050505; background: #fff; border-color: #fff;
}

body.wm-reels .filter-sheet__foot {
  display: grid; grid-template-columns: 1fr 2fr; gap: 0.7rem;
  padding: 1rem 1rem calc(env(safe-area-inset-bottom, 0) + 1rem);
  border-top: 1px solid rgba(255,255,255,0.08);
}
body.wm-reels .filter-sheet__foot .btn { padding: 0.95rem 1.4rem; font-size: 0.7rem; }
body.wm-reels .filter-sheet__foot .btn--quiet { color: #fff; }
body.wm-reels .filter-sheet__foot .btn--quiet::after { background: rgba(255,255,255,0.55); }
body.wm-reels .filter-sheet__foot .btn--solid {
  background: var(--accent); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}
body.wm-reels .filter-sheet__foot .btn--solid:hover { background: #b39b6b; }

/* Filter count badge on the trigger button */
body.wm-reels [data-filter-open] { position: relative; }
body.wm-reels [data-filter-open][data-filter-count]:not([data-filter-count="0"])::after {
  content: attr(data-filter-count);
  position: absolute; top: 2px; right: 2px;
  min-width: 16px; height: 16px; padding: 0 3px;
  background: var(--accent); color: #fff;
  font-size: 0.58rem; letter-spacing: 0; font-weight: 500;
  display: grid; place-items: center;
  border-radius: 999px;
  border: 1.5px solid #050505;
}

/* ---- card badges + view toggle + list view (Phase 1c) ---- */
.prod__img { position: relative; }
.prod__carat { position: absolute; left: 10px; bottom: 10px; background: rgba(255,255,255,0.9); color: var(--ink); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.25rem 0.5rem; }
.prod__flag { position: absolute; top: 10px; left: 10px; font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.25rem 0.5rem; }
.prod__flag--out { background: var(--ink); color: var(--paper); }
.view-toggle { display: inline-flex; margin-left: auto; margin-right: 1rem; border: 1px solid var(--hair); }
.view-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 30px; color: var(--silver); transition: color 0.2s var(--ease-out), background 0.2s var(--ease-out); }
.view-btn + .view-btn { border-left: 1px solid var(--hair); }
.view-btn:hover { color: var(--ink-soft); }
.view-btn[aria-pressed="true"] { color: var(--paper); background: var(--ink); }
.prod-grid.is-list { grid-template-columns: 1fr; gap: 0; }
.prod-grid.is-list .prod { flex-direction: row; align-items: center; gap: clamp(1.6rem, 3.5vw, 3rem); padding: 2.4rem 0; border-bottom: 1px solid var(--hair-soft); }
.prod-grid.is-list .prod__img { width: clamp(160px, 26vw, 260px); flex: 0 0 auto; aspect-ratio: 4/5; }
.prod-grid.is-list .prod__body { padding: 0; flex: 1; gap: 0.6rem; }
.prod-grid.is-list .prod__body h3 { font-size: clamp(1.45rem, 2.6vw, 2rem); }
.prod-grid.is-list .prod__price { font-size: 0.82rem; color: var(--ink); }
@media (max-width: 760px) { .view-toggle { display: none; } }

/* =========================================================
   WM product comparison (Phase 2)
   ========================================================= */
.prod-cell { position: relative; }
.wm-compare-btn {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.92); color: var(--ink-soft); border: 1px solid var(--hair);
  opacity: 0; transform: translateY(-4px);
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out), color 0.2s var(--ease-out), background 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.prod-cell:hover .wm-compare-btn, .wm-compare-btn:focus-visible, .wm-compare-btn.is-active { opacity: 1; transform: none; }
.wm-compare-btn:hover { color: var(--ink); border-color: var(--ink-soft); }
.wm-compare-btn.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.wm-compare-btn__on { display: none; }
.wm-compare-btn.is-active .wm-compare-btn__add { display: none; }
.wm-compare-btn.is-active .wm-compare-btn__on { display: block; }
@media (hover: none) { .wm-compare-btn { opacity: 1; transform: none; width: 44px; height: 44px; } }
.prod-grid.is-list .wm-compare-btn, .prod-grid.is-list .prod-cell:hover .wm-compare-btn { top: 26px; transform: none; }

/* z-index 70: below the drawer scrim (80) / drawer (81) so it never covers the filter UI */
.wm-compare-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: var(--paper); border-top: 1px solid var(--hair); transform: translateY(100%); transition: transform 0.34s var(--ease-out); box-shadow: 0 -10px 40px rgba(22,23,27,0.08); }
/* on mobile, sit above the sticky Filter/Sort bar (~75px tall) instead of covering it */
@media (max-width: 880px) {
  .wm-compare-bar { bottom: calc(76px + env(safe-area-inset-bottom)); }
}
.wm-compare-bar.is-open { transform: none; }
.wm-compare-bar__inner { max-width: var(--maxw); margin: 0 auto; padding: 0.85rem var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.wm-compare-bar__items { display: flex; gap: 0.6rem; }
.wm-compare-bar__thumb { position: relative; width: 46px; height: 58px; border: 1px solid var(--hair); overflow: hidden; background: var(--bone); }
.wm-compare-bar__thumb img { width: 100%; height: 100%; object-fit: cover; }
.wm-compare-bar__x { position: absolute; top: 0; right: 0; background: var(--ink); color: var(--paper); font-size: 0.72rem; line-height: 1; padding: 1px 5px; opacity: 0; transition: opacity 0.2s var(--ease-out); }
.wm-compare-bar__thumb:hover .wm-compare-bar__x, .wm-compare-bar__thumb:focus-visible .wm-compare-bar__x { opacity: 1; }
.wm-compare-bar__slot { width: 46px; height: 58px; border: 1px dashed var(--hair); }
.wm-compare-bar__actions { display: flex; align-items: center; gap: 1.1rem; }
.wm-compare-bar__clear { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.wm-compare-bar__clear:hover { color: var(--accent); }
.wm-compare-bar__go[disabled] { opacity: 0.4; pointer-events: none; }
@media (max-width: 600px) {
  .wm-compare-bar__inner { padding: 0.65rem 1rem; gap: 0.7rem; }
  .wm-compare-bar__thumb, .wm-compare-bar__slot { width: 38px; height: 48px; }
  .wm-compare-bar__slot:nth-of-type(n+3) { display: none; }
  .wm-compare-bar__clear { display: none; }
}

.wm-compare-modal { position: fixed; inset: 0; z-index: 100; display: none; }
.wm-compare-modal.is-open { display: block; }
.wm-compare-modal__scrim { position: absolute; inset: 0; background: rgba(22,23,27,0.55); backdrop-filter: blur(6px); }
.wm-compare-modal__panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(94vw, 1000px); max-height: 90dvh; overflow: auto; background: var(--paper); padding: clamp(1.4rem, 3vw, 2.6rem); }
.wm-compare-modal__close { position: absolute; top: 12px; right: 16px; font-size: 1.6rem; line-height: 1; color: var(--ink-soft); }
.wm-compare-modal__close:hover { color: var(--ink); }
.wm-compare-modal__title { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 400; margin-bottom: 1.4rem; }
.wm-ct { width: 100%; border-collapse: collapse; font-family: var(--font-sans); }
.wm-ct th, .wm-ct td { padding: 0.8rem 0.9rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hair-soft); }
.wm-ct thead th { vertical-align: bottom; }
.wm-ct__corner { width: 110px; }
.wm-ct__img { display: block; aspect-ratio: 4/5; overflow: hidden; background: var(--bone); margin-bottom: 0.6rem; }
.wm-ct__img img { width: 100%; height: 100%; object-fit: cover; }
.wm-ct__title { display: block; font-family: var(--font-display); font-size: 1rem; line-height: 1.25; color: var(--ink); }
.wm-ct__remove { display: inline-block; font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--silver); margin-top: 0.5rem; text-decoration: underline; text-underline-offset: 2px; }
.wm-ct__remove:hover { color: var(--accent); }
.wm-ct tbody th[scope="row"] { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--silver); font-weight: 400; white-space: nowrap; }
.wm-ct tbody td { font-size: 0.92rem; color: var(--ink); }
@media (max-width: 600px) {
  .wm-compare-modal__panel { padding: 1.3rem 0.9rem; }
  .wm-ct th, .wm-ct td { padding: 0.55rem 0.45rem; }
  .wm-ct__corner { width: 64px; }
  .wm-ct__title { font-size: 0.8rem; }
  .wm-ct tbody td { font-size: 0.82rem; }
}

.wm-compare-toast { position: fixed; left: 50%; bottom: 96px; z-index: 110; transform: translateX(-50%) translateY(12px); background: var(--ink); color: var(--paper); font-size: 0.78rem; letter-spacing: 0.02em; padding: 0.7rem 1.1rem; opacity: 0; transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out); pointer-events: none; }
.wm-compare-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- WM saved searches (Phase 3) ---- */
.toolbar__tools { display: flex; align-items: center; gap: 0.9rem; margin-left: auto; }
.toolbar__tools .view-toggle { margin-left: 0; margin-right: 0; }
.saved-trigger { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); transition: color 0.2s var(--ease-out); }
.saved-trigger:hover, .saved-trigger[aria-expanded="true"] { color: var(--ink); }
.saved-trigger__count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--accent); color: var(--paper); font-size: 0.58rem; font-weight: 500; line-height: 16px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  .saved-trigger > span:not(.saved-trigger__count) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  /* icon-only on small screens — keep a 44px touch target */
  .saved-trigger { min-width: 44px; min-height: 44px; justify-content: center; }
  .toolbar { flex-wrap: wrap; row-gap: 0.6rem; }
}
.wm-saved-panel { position: absolute; z-index: 95; background: var(--paper); border: 1px solid var(--hair); box-shadow: 0 12px 40px rgba(22,23,27,0.12); padding: 0.4rem; }
.wm-saved-panel__head { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 0.7rem 0.7rem; font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--silver); border-bottom: 1px solid var(--hair-soft); }
.wm-saved-panel__close { font-size: 1.2rem; line-height: 1; color: var(--ink-soft); }
.wm-saved-panel__close:hover { color: var(--ink); }
.wm-saved-save { display: flex; gap: 0.5rem; padding: 0.7rem; border-bottom: 1px solid var(--hair-soft); }
.wm-saved-save__name { flex: 1; min-width: 0; border: 1px solid var(--hair); background: var(--paper); padding: 0.5rem 0.6rem; font-family: var(--font-sans); font-size: 0.8rem; color: var(--ink); }
.wm-saved-save__name:focus { outline: none; border-color: var(--ink-soft); }
.wm-saved-save__btn { white-space: nowrap; padding-left: 1rem; padding-right: 1rem; }
.wm-saved-empty { padding: 1.1rem 0.8rem; font-size: 0.78rem; color: var(--silver); line-height: 1.5; }
.wm-saved-list { max-height: 320px; overflow: auto; }
.wm-saved-item { display: flex; align-items: stretch; border-bottom: 1px solid var(--hair-soft); }
.wm-saved-item:last-child { border-bottom: 0; }
.wm-saved-item__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; padding: 0.7rem 0.8rem; }
.wm-saved-item__main:hover { background: var(--bone); }
.wm-saved-item__name { font-size: 0.82rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-saved-item__sum { font-size: 0.66rem; letter-spacing: 0.04em; color: var(--silver); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-saved-item__del { flex: 0 0 auto; width: 36px; color: var(--silver); font-size: 1.1rem; line-height: 1; }
.wm-saved-item__del:hover { color: var(--accent); }

/* ---- WM advanced search (Phase 3) ---- */
.wm-asearch { padding: var(--pt, 64px) var(--gutter) var(--pb, 64px); background: var(--bone); }
.wm-asearch__inner { max-width: 880px; margin: 0 auto; }
.wm-asearch__head { text-align: center; margin-bottom: clamp(1.6rem, 3vw, 2.6rem); }
.wm-asearch__title { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 400; line-height: 1.1; margin-top: 0.4rem; }
.wm-asearch__lede { margin-top: 0.7rem; color: var(--ink-soft); font-size: 0.92rem; }
.wm-asearch__form { display: flex; flex-direction: column; gap: clamp(1.3rem, 2.4vw, 2rem); }
.wm-asearch__group { border: 0; padding: 0; margin: 0; }
.wm-asearch__group legend { font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--silver); margin-bottom: 0.9rem; padding: 0; }
.wm-asearch__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.wm-asearch__chip { cursor: pointer; }
.wm-asearch__chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.wm-asearch__chip span { display: inline-block; padding: 0.5rem 0.95rem; border: 1px solid var(--hair); font-size: 0.74rem; letter-spacing: 0.06em; color: var(--ink-soft); background: var(--paper); transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out), background 0.2s var(--ease-out); }
.wm-asearch__chip:hover span { color: var(--ink); border-color: var(--ink-soft); }
.wm-asearch__chip input:checked + span { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.wm-asearch__chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.wm-asearch__metals { display: flex; flex-wrap: wrap; gap: 1.3rem; }
.wm-asearch__metal { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; cursor: pointer; }
.wm-asearch__metal .vh { position: absolute; opacity: 0; width: 0; height: 0; }
.wm-asearch__metal span:last-child { font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--silver); }
.wm-asearch__metal .vh:checked ~ .metal-pick { box-shadow: 0 0 0 2px var(--bone), 0 0 0 3px var(--accent); }
.wm-asearch__metal .vh:focus-visible ~ .metal-pick { outline: 2px solid var(--accent); outline-offset: 2px; }
.wm-asearch__price { display: flex; align-items: center; gap: 0.8rem; max-width: 360px; }
.wm-asearch__price input { flex: 1; min-width: 0; border: 1px solid var(--hair); background: var(--paper); padding: 0.7rem 0.8rem; font-family: var(--font-sans); font-size: 0.9rem; color: var(--ink); }
.wm-asearch__price input:focus { outline: none; border-color: var(--ink-soft); }
.wm-asearch__dash { color: var(--silver); }
.wm-asearch__actions { display: flex; align-items: center; gap: 1.4rem; margin-top: 0.6rem; }
.wm-asearch__submit { min-width: 220px; justify-content: center; }
.wm-asearch__browse { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.wm-asearch__browse:hover { color: var(--accent); }
@media (max-width: 600px) { .wm-asearch__submit { width: 100%; min-width: 0; } .wm-asearch__actions { flex-direction: column; align-items: stretch; gap: 0.9rem; text-align: center; } }

/* ============ WM PRODUCT — PDP configurator ============ */
/* global visually-hidden utility (form control behind a styled label) */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wm-pdp { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.pdp { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 4vw, 5rem); align-items: start; padding-bottom: clamp(3rem, 6vw, 6rem); }
.pdp__gallery { position: sticky; top: calc(var(--nav-h) + 1.5rem); }
.pdp__stage { background: var(--bone); border: 1px solid var(--hair-soft); aspect-ratio: 1; overflow: hidden; }
.pdp__stage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp__thumbs { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.8rem; padding: 0; list-style: none; }
.pdp__thumb { width: 64px; height: 64px; padding: 0; border: 1px solid var(--hair); background: var(--bone); cursor: pointer; overflow: hidden; transition: border-color 0.25s var(--ease); }
.pdp__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp__thumb:hover { border-color: var(--ink-soft); }
.pdp__thumb.is-active { border-color: var(--accent); }
.pdp__panel { padding-top: 0.4rem; }
.pdp__eyebrow { font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.7rem; }
.pdp__title { font-family: var(--font-display); font-size: clamp(1.8rem, 3.2vw, 2.7rem); line-height: 1.08; color: var(--ink); font-weight: 400; }
.pdp__rating { margin: 0.7rem 0; }
.pdp__price { display: flex; align-items: baseline; gap: 0.8rem; margin-top: 1.1rem; }
.pdp__price-now { font-size: 1.5rem; color: var(--ink); font-family: var(--font-display); }
.pdp__price-was { font-size: 0.95rem; color: var(--silver); text-decoration: line-through; }
.pdp__price-note { font-size: 0.74rem; line-height: 1.6; color: var(--ink-soft); margin-top: 0.5rem; }
.pdp__price-break { font-size: 0.72rem; letter-spacing: 0.04em; color: var(--silver); margin-top: 0.4rem; }
.pdp__price-break span { color: var(--ink); }
.pdp__note { font-size: 0.8rem; color: var(--ink-soft); margin-top: 0.9rem; font-style: italic; }
.opt { border: 0; padding: 0; margin: 1.7rem 0 0; }
.opt__label { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; width: 100%; padding: 0; font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); margin-bottom: 0.9rem; }
.opt__value { letter-spacing: 0.02em; text-transform: none; color: var(--ink-soft); font-size: 0.82rem; }
.opt__guide { font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.opt__guide:hover { color: var(--accent); }
.opt__shapes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5rem; }
.opt__shape { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 0.6rem 0.2rem; border: 1px solid var(--hair); cursor: pointer; margin: 0; transition: border-color 0.25s var(--ease); }
.opt__shape:hover { border-color: var(--ink-soft); }
.opt__shape-ic { color: var(--silver); transition: color 0.25s var(--ease); }
.opt__shape .vh:checked ~ .opt__shape-ic { color: var(--ink); }
.opt__shape .vh:focus-visible ~ .opt__shape-ic { outline: 2px solid var(--accent); outline-offset: 3px; }
.opt__shape:has(.vh:checked) { border-color: var(--accent); }
.opt__shape-name { font-size: 0.56rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--silver); }
.opt__shape .vh:checked ~ .opt__shape-name { color: var(--ink); }
.opt__swatches { display: flex; flex-wrap: wrap; gap: 1.1rem; }
.opt__metal { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; cursor: pointer; margin: 0; }
.opt__metal-name { font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--silver); }
.opt__metal .vh:checked ~ .opt__metal-name { color: var(--ink); }
.opt__metal .vh:checked ~ .metal-pick, .opt__metal .vh:checked ~ .gem-dot { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--accent); }
.opt__metal .vh:focus-visible ~ .metal-pick, .opt__metal .vh:focus-visible ~ .gem-dot { outline: 2px solid var(--accent); outline-offset: 2px; }
.metal-pick--plat { background: linear-gradient(135deg, #dfe2e6, #b9bec6); }
.metal-pick--silver { background: linear-gradient(135deg, #e9ebee, #c7ccd2); }
.gem-dot--lg { width: 26px; height: 26px; }
.gem-pick { display: flex; align-items: center; justify-content: center; line-height: 0; }
.gem-pick .wm-gem { display: block; filter: drop-shadow(0 1px 2px rgba(22, 23, 27, 0.12)); transition: transform 0.16s var(--ease-out); }
.opt--nav .opt__metal:hover .gem-pick .wm-gem { transform: scale(1.06); }
.opt__pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.opt__pill { cursor: pointer; margin: 0; }
.opt__pill span { display: inline-block; padding: 0.5rem 1rem; border: 1px solid var(--hair); font-size: 0.74rem; letter-spacing: 0.06em; color: var(--ink-soft); transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease); }
.opt__pill:hover span { border-color: var(--ink-soft); color: var(--ink); }
.opt__pill .vh:checked ~ span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.wm-carat { width: 100%; -webkit-appearance: none; appearance: none; height: 2px; background: var(--hair); outline: none; margin: 0.4rem 0 0; }
.wm-carat::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--paper); border: 1px solid var(--ink); cursor: pointer; }
.wm-carat::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--paper); border: 1px solid var(--ink); cursor: pointer; }
.wm-carat__scale { display: flex; justify-content: space-between; margin-top: 0.5rem; font-size: 0.66rem; color: var(--silver); }
.wm-select { width: 100%; padding: 0.7rem 0.8rem; border: 1px solid var(--hair); background: var(--paper); font-family: var(--font-sans); font-size: 0.85rem; color: var(--ink); }
.wm-select:focus { outline: none; border-color: var(--ink-soft); }
.pdp__atc { margin-top: 2rem; }
.pdp__add { width: 100%; justify-content: center; font-size: 0.8rem; padding: 1rem; }
.pdp__add[disabled] { opacity: 0.5; cursor: not-allowed; }
.pdp__assurance { font-size: 0.66rem; letter-spacing: 0.04em; color: var(--silver); text-align: center; margin-top: 0.9rem; }
.pdp__acc { border-top: 1px solid var(--hair-soft); margin-top: 2rem; padding: 1.3rem 0; }
.pdp__acc summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); list-style: none; }
.pdp__acc summary::-webkit-details-marker { display: none; }
.pdp__rte { font-size: 0.85rem; line-height: 1.8; color: var(--ink-soft); padding-top: 1rem; }
@media (max-width: 900px) { .pdp { grid-template-columns: 1fr; gap: 1.8rem; } .pdp__gallery { position: static; } }
@media (max-width: 560px) { .opt__shapes { grid-template-columns: repeat(4, 1fr); } }

/* Sticky header fix — the header section wrapper is short (~117px), which
   breaks the inner .header's position:sticky (sticky only works within the
   parent's bounds). Pin the wrapper itself; its parent (.main-container) is
   full-page height, so the header bar now stays put on scroll. */
.wm-section--header { position: sticky; top: 0; z-index: 50; }

/* ============================================================
   Featured products — Editorial Scroll (Option 3)
   Staggered, large product cards on the existing drag/arrow
   carousel (.feat__carousel[data-carousel] -> wm-carousel.js).
   New .es-card markup; reuses .feat__track / .carousel-btn.
   ============================================================ */
.feat--editorial .feat__track { align-items: flex-start; gap: clamp(1.4rem, 3.2vw, 3.2rem); padding: 0.5rem 0 3rem; scroll-snap-type: none; }
.es-card { flex: 0 0 auto; width: clamp(228px, 28vw, 340px); display: block; color: inherit; text-decoration: none; }
.es-card__img { aspect-ratio: 4 / 5; overflow: hidden; background: #fff; border: 1px solid rgba(28, 26, 23, 0.06); }
/* White-background product shots: show the WHOLE piece (contain) on a white
   tile so nothing is cropped; padding frames it. (cover was clipping rings.) */
.es-card__img img { width: 100%; height: 100%; object-fit: contain; padding: 7%; box-sizing: border-box; transition: transform 0.9s var(--ease); }
.es-card:hover .es-card__img img { transform: scale(1.035); }
.es-card__body { padding-top: 1.05rem; }
.es-card__name { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.35rem, 2.3vw, 1.9rem); line-height: 1.12; letter-spacing: 0.01em; color: var(--ink); }
.es-card__price { margin-top: 0.45rem; font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
/* staggered "lookbook" rhythm — every 2nd card drops, every 3rd is taller */
.feat--editorial .es-card:nth-child(2n) { margin-top: clamp(1.8rem, 5vw, 4.5rem); width: clamp(208px, 25vw, 300px); }
.feat--editorial .es-card:nth-child(3n) .es-card__img { aspect-ratio: 3 / 4; }
.feat__empty { flex: 1; padding: 2rem 0; font-family: var(--font-sans); font-size: 0.85rem; color: var(--ink-soft); }
@media (max-width: 640px) {
  .es-card { width: 70vw; }
  .feat--editorial .es-card:nth-child(2n) { width: 62vw; margin-top: 1.4rem; }
}

/* ============================================================
   PDP sibling selectors — Shape / Metal / Diamond Colour navigate
   to real sibling products (style group). Scoped to .opt--nav so it
   doesn't touch the in-product .opt form fields. wm-product.js sets
   .is-active (current) / .is-disabled (combo doesn't exist).
   ============================================================ */
.pdp__selectors[aria-busy="true"] [data-opt]:not(.is-active) { opacity: 0.5; }
.opt--nav { margin-bottom: 1.5rem; }
.opt--nav .opt__shapes,
.opt--nav .opt__swatches { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.opt--nav .opt__shape,
.opt--nav .opt__metal {
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.35rem;
  cursor: pointer; text-decoration: none; color: var(--ink, #1c1a17);
  border: 1px solid color-mix(in srgb, var(--ink, #1c1a17) 14%, transparent);
  border-radius: 10px; padding: 0.55rem 0.6rem; min-width: 4.2rem;
  transition: border-color 0.2s, background 0.2s, opacity 0.2s, transform 0.15s;
}
.opt--nav .opt__shape:hover,
.opt--nav .opt__metal:hover {
  border-color: color-mix(in srgb, var(--accent, #9c8559) 55%, transparent);
  transform: translateY(-1px);
}
.opt--nav .is-active {
  border-color: var(--accent, #9c8559);
  background: color-mix(in srgb, var(--accent, #9c8559) 10%, transparent);
}
.opt--nav .is-disabled {
  opacity: 0.3; cursor: not-allowed; pointer-events: none;
  text-decoration: line-through; text-decoration-thickness: 1px;
}
.opt--nav .opt__shape-name,
.opt--nav .opt__metal-name {
  font-family: var(--font-sans, sans-serif); font-size: 0.6rem;
  letter-spacing: 0.07em; text-transform: uppercase;
}