/** Shopify CDN: Minification failed

Line 2307:5 Unexpected "\"interim CSS written\""

**/
/* =====================================================
   GALLO JEWELRY — Site stylesheet
   ===================================================== */

/* -------- TOKENS -------- */
:root {
  --canvas-pure:#FFFFFF;
  --canvas-snow:#FAFAF7;
  --canvas-platinum:#F4F1EC;
  --canvas-pearl:#EDE8E0;
  --canvas-bone:#E8E2D5;
  --canvas-noir:#1A1A1A;

  --ink-noir:#1A1A1A;
  --ink-graphite:#2E2E2E;
  --ink-shadow:#525252;
  --ink-stone:#8A8A8A;
  --ink-mist:#B8B8B8;
  --ink-invert:#FFFFFF;

  --line-hair:#E5E5E5;
  --line-soft:#EFECE7;
  --line-strong:#D4D4D4;
  --line-noir:#1A1A1A;

  --accent-champagne:#B89968;
  --accent-success:#5B7361;
  --accent-error:#8E2F2F;

  --metal-yellow:#D4AF6A;
  --metal-rose:#D49B8B;
  --metal-white:#E8E8E5;
  --metal-platinum:#DEDDD9;

  --font-serif:"Cormorant Garamond","Times New Roman",Georgia,serif;
  --font-sans:"Inter","Helvetica Neue","Avenir Next",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;

  --z-announce:60;
  --z-utility:55;
  --z-header:50;
  --z-megamenu:45;
  --z-sticky:40;
  --z-modal:90;
  --z-toast:100;
}

/* -------- RESET -------- */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:var(--font-sans);
  font-size:15px;
  color:var(--ink-graphite);
  background:var(--canvas-pure);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
a { color:inherit; text-decoration:none; }
button { background:none; border:0; cursor:pointer; font:inherit; color:inherit; }
ul, ol { list-style:none; }
img { display:block; max-width:100%; }
input, textarea, select { font:inherit; color:inherit; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* -------- LAYOUT -------- */
.container { max-width:1440px; margin:0 auto; padding:0 48px; }
@media (max-width:1024px) { .container { padding:0 32px; } }
@media (max-width:768px)  { .container { padding:0 16px; } }

.section { padding:96px 0; }
.section-sm { padding:64px 0; }
@media (max-width:768px) { .section { padding:64px 0; } .section-sm { padding:48px 0; } }

.band-pure     { background:var(--canvas-pure); }
.band-snow     { background:var(--canvas-snow); }
.band-platinum { background:var(--canvas-platinum); }
.band-pearl    { background:var(--canvas-pearl); }
.band-noir     { background:var(--canvas-noir); color:var(--ink-invert); }

.center { text-align:center; }
.max-w-720 { max-width:720px; margin:0 auto; }
.max-w-560 { max-width:560px; margin:0 auto; }
.max-w-460 { max-width:460px; }
.max-w-540 { max-width:540px; }

.section-head { text-align:center; margin-bottom:64px; }
.section-head h2 { margin-top:12px; }
@media (max-width:768px) { .section-head { margin-bottom:40px; } }

/* -------- TYPOGRAPHY -------- */
.eyebrow      { font-size:.6875rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; line-height:1.2; color:var(--ink-shadow); }
.eyebrow-champ { font-size:.6875rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; line-height:1.2; color:var(--accent-champagne); }
.nav-link     { font-size:.8125rem; letter-spacing:.12em; text-transform:uppercase; line-height:1; }
.button-text  { font-size:.8125rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; line-height:1; }
.display-xl   { font-family:var(--font-serif); font-size:4.5rem; font-weight:400; line-height:1.05; letter-spacing:-.015em; color:var(--ink-noir); }
.display-lg   { font-family:var(--font-serif); font-size:3.5rem; font-weight:400; line-height:1.10; letter-spacing:-.01em; color:var(--ink-noir); }
.display-md   { font-family:var(--font-serif); font-size:2.5rem; font-weight:400; line-height:1.15; color:var(--ink-noir); }
.display-sm   { font-family:var(--font-serif); font-size:1.875rem; font-weight:400; line-height:1.2; color:var(--ink-noir); }
.body-lg      { font-size:1.0625rem; line-height:1.65; letter-spacing:.005em; }
.body-md      { font-size:.9375rem; line-height:1.6; letter-spacing:.01em; }
.body-sm      { font-size:.8125rem; line-height:1.55; letter-spacing:.015em; color:var(--ink-shadow); }
.mono         { font-family:var(--font-mono); font-size:.75rem; letter-spacing:0; }
.price-tk     { font-size:.9375rem; font-weight:500; letter-spacing:.01em; }

@media (max-width:768px) {
  .display-xl { font-size:2.75rem; }
  .display-lg { font-size:2.5rem; }
  .display-md { font-size:1.875rem; }
  .display-sm { font-size:1.5rem; }
}

.color-shadow { color:var(--ink-shadow); }
.color-stone  { color:var(--ink-stone); }
.color-noir   { color:var(--ink-noir); }
.color-champ  { color:var(--accent-champagne); }
.color-success { color:var(--accent-success); }

.mt-1 { margin-top:4px; } .mt-2 { margin-top:8px; } .mt-3 { margin-top:12px; }
.mt-4 { margin-top:16px; } .mt-5 { margin-top:20px; } .mt-6 { margin-top:24px; }
.mt-8 { margin-top:32px; } .mt-10 { margin-top:40px; } .mt-12 { margin-top:48px; }

/* -------- BUTTONS -------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:0 32px; height:48px;
  border:1px solid transparent;
  transition:background 220ms ease, color 220ms ease, border-color 220ms ease;
  cursor:pointer; white-space:nowrap;
}
.btn-lg { height:56px; padding:0 32px; }
.btn-sm { height:36px; padding:0 16px; }
.btn-primary       { background:var(--canvas-noir); color:var(--ink-invert); }
.btn-primary:hover { background:var(--ink-graphite); }
.btn-primary-light       { background:var(--canvas-pure); color:var(--ink-noir); }
.btn-primary-light:hover { background:var(--canvas-snow); }
.btn-secondary       { background:transparent; color:var(--ink-noir); border-color:var(--line-noir); }
.btn-secondary:hover { background:var(--canvas-noir); color:var(--ink-invert); }
.btn-secondary-light       { background:transparent; color:var(--ink-invert); border-color:var(--ink-invert); }
.btn-secondary-light:hover { background:var(--ink-invert); color:var(--ink-noir); }
.btn-tertiary { padding:0; height:auto; border-bottom:1px solid currentColor; padding-bottom:4px; color:var(--ink-noir); display:inline-block; }
.btn-tertiary:hover { color:var(--accent-champagne); }
.btn-full { width:100%; }
.btn-disabled, .btn:disabled { opacity:.5; cursor:not-allowed; }

/* -------- INPUTS -------- */
.input, input[type=text], input[type=email], input[type=tel], input[type=number], select, textarea {
  width:100%; height:48px; padding:0 16px;
  background:var(--canvas-pure);
  border:1px solid var(--line-hair);
  color:var(--ink-noir);
  outline:0; transition:border-color 220ms ease;
}
.input:focus, input:focus, select:focus, textarea:focus { border-color:var(--line-noir); }
textarea { height:auto; padding:12px 16px; line-height:1.55; }
input::placeholder, textarea::placeholder { color:var(--ink-stone); }

.field { display:block; }
.field-label {
  display:flex; align-items:center; gap:8px;
  font-size:.6875rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-noir); margin-bottom:8px;
}
.req-dot { width:4px; height:4px; border-radius:999px; background:var(--accent-champagne); }

/* -------- ANNOUNCEMENT BAR -------- */
.announce {
  height:32px;
  background:var(--canvas-noir);
  color:var(--ink-invert);
  display:flex; align-items:center; justify-content:center;
  position:relative; z-index:var(--z-announce);
}
.announce p { font-size:.6875rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; }

/* -------- UTILITY BAR -------- */
.utility {
  height:40px;
  background:var(--canvas-pure);
  border-bottom:1px solid var(--line-hair);
  position:relative; z-index:var(--z-utility);
}
.utility-inner { height:100%; display:flex; align-items:center; justify-content:space-between; }
.utility ul { display:flex; gap:32px; }
.utility a, .utility span { color:var(--ink-shadow); font-size:.8125rem; letter-spacing:.015em; transition:color 220ms ease; }
.utility a:hover { color:var(--ink-noir); }
@media (max-width:768px) { .utility { display:none; } }

/* -------- HEADER -------- */
header.main {
  position:sticky; top:0; z-index:var(--z-header);
  background:var(--canvas-pure); border-bottom:1px solid var(--line-hair);
}
.logo-row { height:88px; position:relative; }
.logo-row-inner { height:100%; display:flex; align-items:center; justify-content:space-between; }
.wordmark { font-family:var(--font-serif); font-size:1.875rem; letter-spacing:.25em; color:var(--ink-noir); position:absolute; left:50%; transform:translateX(-50%); }
.icon-btn {
  width:40px; height:40px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid transparent; transition:border-color 220ms ease;
  position:relative;
}
.icon-btn:hover { border-color:var(--line-hair); }
.icon-cluster { display:flex; gap:8px; }
.cart-count {
  position:absolute; top:-2px; right:-2px;
  width:16px; height:16px; border-radius:999px;
  background:var(--canvas-noir); color:var(--ink-invert);
  font-size:.625rem; font-weight:500;
  display:flex; align-items:center; justify-content:center;
}

.nav-row { height:48px; border-top:1px solid var(--line-hair); }
.nav-row ul { height:100%; display:flex; align-items:center; justify-content:center; gap:32px; color:var(--ink-noir); flex-wrap:nowrap; }
.nav-row a { font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; transition:color 220ms ease; white-space:nowrap; }
.nav-row a:hover, .nav-row a.active { color:var(--accent-champagne); }
@media (max-width:1100px){ .nav-row ul { gap:22px; } .nav-row a { font-size:.6875rem; letter-spacing:.1em; } }

@media (max-width:768px) {
  .logo-row { height:64px; }
  .wordmark { font-size:1.125rem; letter-spacing:.22em; }
  .nav-row { display:none; }
}

/* -------- MEGA MENU -------- */
.mega-menu {
  position:absolute; left:0; right:0; top:100%;
  background:var(--canvas-pure);
  border-top:1px solid var(--line-hair);
  border-bottom:1px solid var(--line-hair);
  z-index:var(--z-megamenu);
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity 220ms ease, visibility 220ms ease, transform 220ms ease;
}
.mega-menu.open { opacity:1; visibility:visible; transform:translateY(0); }

/* Multi-panel mega menu: only the active panel renders */
.mega-panel { display:none; }
.mega-menu[data-active="engagement"] [data-panel="engagement"],
.mega-menu[data-active="wedding"] [data-panel="wedding"],
.mega-menu[data-active="diamonds"] [data-panel="diamonds"],
.mega-menu[data-active="jewelry"] [data-panel="jewelry"],
.mega-menu[data-active="watches"] [data-panel="watches"],
.mega-menu[data-active="gemstones"] [data-panel="gemstones"] { display:block; }

/* Different panels have different column layouts */
.mega-inner { padding:48px 0; display:grid; grid-template-columns:200px 1fr 240px; gap:48px; }
[data-panel="wedding"] .mega-inner,
[data-panel="jewelry"] .mega-inner,
[data-panel="watches"] .mega-inner,
[data-panel="gemstones"] .mega-inner {
  grid-template-columns:1fr 1fr 1fr 240px;
}
[data-panel="diamonds"] .mega-inner {
  grid-template-columns:1fr 2fr 1fr;
}
.mega-feature img { width:100%; height:100%; object-fit:cover; display:block; }
.mega-col h4 { font-size:.6875rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-shadow); margin-bottom:24px; }
.mega-col li { padding:6px 0; }
.mega-col a { font-size:.9375rem; color:var(--ink-noir); transition:color 220ms ease; }
.mega-col a:hover { color:var(--accent-champagne); }
.mega-feature .feature-img { aspect-ratio:4/5; background:var(--canvas-platinum); margin-bottom:16px; position:relative; overflow:hidden; }
.mega-feature .feature-img svg { position:absolute; inset:0; width:100%; height:100%; }
.mega-feature .eyebrow { color:var(--ink-shadow); }
.mega-feature h5 { font-family:var(--font-serif); font-size:1.5rem; color:var(--ink-noir); margin-top:4px; }
.shape-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px 12px; }
.shape-item { display:flex; flex-direction:column; align-items:center; gap:6px; text-decoration:none; }
.shape-icon { width:48px; height:48px; display:flex; align-items:center; justify-content:center; }
.shape-icon img { width:40px; height:40px; object-fit:contain; display:block; }
.shape-item span { font-size:.6875rem; letter-spacing:.06em; color:var(--ink-graphite); text-transform:uppercase; }
.shape-item:hover span { color:var(--accent-champagne); }
.shape-item:hover .shape-icon img { transform:scale(1.08); }
.shape-icon img { transition:transform 220ms ease; }

/* ── Mega-menu upgrades (#1–#6) ─────────────────────────────────────────── */
/* #6 Active top-nav indicator while its panel is open */
[data-mega].mega-active { color:var(--accent-champagne); }
[data-mega] { position:relative; }
[data-mega].mega-active::after {
  content:''; position:absolute; left:0; right:0; bottom:-6px; height:1.5px;
  background:var(--accent-champagne);
}
/* #1 Visible keyboard focus (mouse users unaffected) */
[data-mega]:focus-visible,
.mega-menu a:focus-visible {
  outline:2px solid var(--accent-champagne); outline-offset:3px; border-radius:2px;
}
/* #2 "Shop all X →" link injected at the foot of every panel */
.mega-shopall {
  grid-column:1 / -1; justify-self:start; margin-top:28px;
  font-size:.8125rem; letter-spacing:.08em; text-transform:uppercase; font-weight:500;
  color:var(--ink-noir); display:inline-flex; align-items:center; gap:8px;
  padding-top:18px; border-top:1px solid var(--line-hair); width:100%;
}
.mega-shopall span { transition:transform 220ms ease; display:inline-block; }
.mega-shopall:hover { color:var(--accent-champagne); }
.mega-shopall:hover span { transform:translateX(4px); }
/* #5 Featured slot reads as a card: hover-zoom the image, lift the title */
.mega-feature .feature-img img,
.mega-feature .feature-img svg { transition:transform 500ms ease; }
.mega-feature:hover .feature-img img,
.mega-feature:hover .feature-img svg { transform:scale(1.05); }
.mega-feature h5 { transition:color 220ms ease; }
.mega-feature:hover h5 { color:var(--accent-champagne); }
/* #4 A small line-icon before every menu link (matches the live site) */
.mega-col li { position:relative; }
.mega-col li a { display:inline-flex; align-items:center; gap:10px; transition:color 220ms ease; }
/* Real icons from the Gallo theme sprite (rings, shapes, colored gemstones) */
.mega-licon {
  width:32px; height:32px; flex:none; display:inline-block;
  background-image:url('https://www.gallojewelry.com/cdn/shop/t/2/assets/tps-header-footer-sprite.svg');
  background-repeat:no-repeat; background-size:auto;
  transition:transform 200ms ease;
}
.mega-col li a:hover .mega-licon { transform:scale(1.08); }
/* Colored gemstones use their own PNG sprite (25px-wide cells) */
.mega-licon--gem {
  width:25px;
  background-image:url('https://www.gallojewelry.com/cdn/shop/t/2/assets/tps-gemstone-menu-sprite.png');
}
/* Shapes shown as an inline icon+label list (like the live "Shop by Shapes"), not a centered grid */
.mega-panel .shape-grid { grid-template-columns:1fr 1fr; gap:12px 20px; }
.mega-panel .shape-item { flex-direction:row; align-items:center; justify-content:flex-start; gap:10px; }
.mega-panel .shape-icon { width:30px; height:30px; }
.mega-panel .shape-icon img { width:28px; height:28px; }
.mega-panel .shape-item span {
  text-transform:none; letter-spacing:normal; font-size:.9375rem; color:var(--ink-noir);
}
.mega-panel .shape-item:hover span { color:var(--accent-champagne); }
/* #3 Consistency: staggered fade so every panel's columns reveal the same way */
.mega-menu.open .mega-inner > * { animation:megaColIn 320ms ease both; }
.mega-menu.open .mega-inner > *:nth-child(2) { animation-delay:40ms; }
.mega-menu.open .mega-inner > *:nth-child(3) { animation-delay:80ms; }
.mega-menu.open .mega-inner > .mega-shopall { animation-delay:120ms; }
@keyframes megaColIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) {
  .mega-menu.open .mega-inner > * { animation:none; }
  .shape-icon img, .mega-feature .feature-img img, .mega-shopall span { transition:none; }
}

/* -------- HERO (clean image, copy on top with text-shadow for legibility) -------- */
.hero {
  position:relative; width:100%;
  height:clamp(560px,70vh,720px);
  overflow:hidden;
  background:#2a2620;
}
.hero-bg { display:none; }
.hero::after { display:none; }
.hero-inner { position:relative; z-index:2; height:100%; display:flex; align-items:flex-end; padding-left:0; max-width:none; padding-bottom:80px; }
.hero .container.hero-inner { padding-left:0; padding-right:24px; max-width:none; }
.hero-copy {
  max-width:520px; color:#1a1a1a; margin-left:96px;
  text-shadow:0 1px 2px rgba(255,255,255,.4);
}
@media (max-width:768px){ .hero-copy { margin-left:24px; max-width:none; } .hero .container.hero-inner { padding-left:0; padding-right:16px; padding-bottom:48px; } }
.hero-copy .display-xl { color:#0a0a0a; margin-top:18px; font-size:3rem; line-height:1.1; font-weight:500; }
.hero-copy .eyebrow { color:#1a1a1a; font-size:.6875rem; font-weight:600; letter-spacing:.18em; }
.hero-copy p.body-lg { margin-top:18px; max-width:440px; color:#1a1a1a; font-size:1rem; line-height:1.55; font-weight:500; }
.hero-ctas {
  display:flex; flex-direction:row; gap:12px; margin-top:28px;
  flex-wrap:nowrap; text-shadow:none;
}
.hero-ctas .btn { white-space:nowrap; }
@media (max-width:600px){
  .hero-copy .display-xl { font-size:2.125rem; }
  .hero-ctas { flex-wrap:wrap; }
}

/* -------- DUAL ENTRY BLOCK (image fills top, copy underneath) -------- */
.dual-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media (max-width:768px) { .dual-grid { grid-template-columns:1fr; } }
.dual-card {
  background:var(--canvas-pure);
  overflow:hidden;
  cursor:pointer; transition:background 220ms ease;
  display:flex; flex-direction:column;
  text-decoration:none;
}
.dual-card:hover { background:var(--canvas-pearl); }
.dual-card-illus {
  width:100%;
  aspect-ratio:4/3;
  overflow:hidden;
  display:block;
  background:var(--canvas-snow);
}
.dual-card-illus img {
  width:100%; height:100%;
  object-fit:cover; display:block;
  transition:transform 480ms ease-in-out;
}
.dual-card:hover .dual-card-illus img { transform:scale(1.04); }
.dual-card-content {
  padding:28px 32px 32px;
  display:flex; flex-direction:column;
}
.dual-card-bottom { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.dual-card-bottom .eyebrow { color:var(--ink-shadow); }
.dual-card-bottom h3 { color:var(--ink-noir); margin-top:6px; }
.dual-card-bottom p { color:var(--ink-shadow); margin-top:10px; max-width:320px; }
@media (max-width:768px) {
  .dual-card-illus { aspect-ratio:3/2; }
  .dual-card-content { padding:20px 22px 24px; }
}

/* -------- SHOP BY DIAMOND SHAPE -------- */
.shape-rail {
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:24px;
}
@media (max-width:768px){ .shape-rail{ grid-template-columns:repeat(3, 1fr); gap:16px; } }
@media (max-width:480px){ .shape-rail{ grid-template-columns:repeat(2, 1fr); gap:12px; } }

.shape-card {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:36px 16px;
  text-decoration:none;
  text-align:center;
  border:1px solid var(--line-hair);
  transition:all 220ms ease;
  cursor:pointer;
  background:var(--canvas-pure);
  min-height:200px;
  color:var(--ink-noir);
}
.shape-card:hover {
  border-color:var(--line-strong);
  background:var(--canvas-snow);
  color:var(--ink-noir);
}
.shape-card img {
  width:82px; height:82px;
  object-fit:contain;
  display:block;
  transition:transform 320ms ease;
}
.shape-card:hover img { transform:scale(1.08); }
.shape-card .label {
  font-size:.8125rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-noir);
  margin-top:22px;
  line-height:1;
}
@media (max-width:768px){
  .shape-card { padding:28px 12px; min-height:170px; }
  .shape-card img { width:72px; height:72px; }
  .shape-card .label { font-size:.75rem; margin-top:16px; }
}
@media (max-width:480px){
  .shape-card { padding:22px 8px; min-height:150px; }
  .shape-card img { width:64px; height:64px; }
}

/* -------- SHOP BY CATEGORY GRID -------- */
/* Widen the container only when it wraps the cat-grid so tiles get more room */
.container:has(> .cat-grid),
.container:has(> .section-head + .cat-grid),
#categories > .container { max-width:1800px; padding:0 24px; }
.cat-grid {
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:16px;
}
@media (max-width:1100px){ .cat-grid{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width:768px){  .cat-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:480px){  .cat-grid{ grid-template-columns:repeat(2, 1fr); gap:8px; } }

.cat-card {
  display:block;
  text-decoration:none;
  cursor:pointer;
  text-align:center;
}
.cat-card > img {
  display:block;
  width:100%;
  aspect-ratio:1 / 1;
  object-fit:cover;
  background:var(--canvas-platinum);
  transition:transform 600ms ease-in-out;
}
.cat-card:hover > img { transform:scale(1.03); }
.cat-card-overlay {
  padding:20px 0 4px;
  background:none;
  color:#0a0a0a;
}
.cat-card-overlay .eyebrow { display:none; }
.cat-card-overlay h3 {
  font-family:'Inter', system-ui, sans-serif;
  font-weight:600;
  font-size:1rem;
  line-height:1.2;
  letter-spacing:.04em;
  color:#0a0a0a;
  margin:0;
}
.cat-card-arrow { display:none; }
.cat-grid { gap:10px; }
@media (max-width:1100px){ .cat-grid{ gap:10px; } }
@media (max-width:768px){  .cat-grid{ gap:8px; } }
@media (max-width:480px){
  .cat-card-overlay { padding:14px 0 2px; }
  .cat-card-overlay h3 { font-size:.875rem; }
  .cat-grid { gap:6px; }
}

/* -------- COLLECTION CARD GRID -------- */
.col-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
@media (max-width:1024px) { .col-grid { grid-template-columns:repeat(2,1fr); } }
.col-card { display:block; cursor:pointer; }
.col-card-img {
  aspect-ratio:4/5; background:var(--canvas-pure);
  overflow:hidden; position:relative;
}
.col-card-img .swatch { position:absolute; inset:0; transition:opacity 400ms ease-in-out; }
.col-card-img .swatch img { width:100%; height:100%; object-fit:cover; }
.col-card-img .alt { opacity:0; }
.col-card:hover .swatch:not(.alt) { opacity:0; }
.col-card:hover .alt { opacity:1; }
.gallery-cell img { width:100%; height:100%; object-fit:cover; }
/* Override removed — new dual-card-illus img rules above use object-fit:cover */
.line-img img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.editorial-image img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.editorial-image { position:relative; overflow:hidden; }
.col-card-info { padding-top:20px; text-align:center; }
.col-card-info h3 { font-family:var(--font-serif); font-size:1.875rem; color:var(--ink-noir); font-weight:400; }
.col-card-info p { color:var(--ink-shadow); font-size:.8125rem; margin-top:4px; }

/* -------- PRODUCT CARD (PLP) -------- */
.product-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:32px 32px; }
@media (max-width:1024px) { .product-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:768px)  { .product-grid { grid-template-columns:repeat(2,1fr); gap:24px 16px; } }
.pcard { display:block; }
.pcard-img {
  position:relative; aspect-ratio:4/5;
  background:var(--canvas-pure);
  border:1px solid var(--line-hair);
  overflow:hidden;
}
.pcard-img .primary, .pcard-img .alt {
  position:absolute; inset:0; transition:opacity 400ms ease-in-out;
  width:100%; height:100%; object-fit:cover;
}
.pcard-img .alt { opacity:0; }
.pcard:hover .primary { opacity:0; }
.pcard:hover .alt { opacity:1; }
.pcard-img img { background:var(--canvas-pure); }
.pcard-wishlist {
  position:absolute; top:16px; right:16px;
  width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  background:var(--canvas-pure); border:1px solid var(--line-hair);
  opacity:0; transition:opacity 220ms ease;
  z-index:2;
}
.pcard:hover .pcard-wishlist { opacity:1; }
.pcard-wishlist:hover { color:var(--accent-champagne); }
.pcard-tag {
  position:absolute; top:16px; left:16px; z-index:2;
  background:var(--canvas-pure); padding:4px 8px;
  font-size:.6875rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent-champagne);
}
.pcard-info { padding-top:16px; }
.pcard-info h3 { font-size:.9375rem; color:var(--ink-noir); font-weight:400; }
.pcard-info .price-tk { color:var(--ink-graphite); margin-top:4px; }
.pcard-metals { display:flex; gap:8px; margin-top:12px; }
.metal-dot {
  width:12px; height:12px; border-radius:999px;
  border:1px solid var(--line-strong);
  cursor:pointer; transition:transform 180ms ease;
}
.metal-dot:hover { transform:scale(1.15); }
.metal-dot.yellow   { background:var(--metal-yellow); }
.metal-dot.white    { background:var(--metal-white); }
.metal-dot.rose     { background:var(--metal-rose); }
.metal-dot.platinum { background:var(--metal-platinum); }

/* Ring background gradients */
.bg-yellow { background:radial-gradient(circle at 50% 50%,#fff 0%,#f8f4ec 30%,#e8dcc4 60%,#cdbb98 100%); }
.bg-yellow-2 { background:radial-gradient(circle at 45% 45%,#fff 0%,#f4ede0 25%,#dac8a4 60%,#b89968 100%); }
.bg-rose { background:radial-gradient(circle at 50% 50%,#fff 0%,#f8f4f0 30%,#dac4b8 60%,#b88a72 100%); }
.bg-white-metal { background:radial-gradient(circle at 50% 50%,#fff 0%,#f0eee8 30%,#d8d4cc 60%,#b8b4ac 100%); }
.bg-platinum { background:radial-gradient(circle at 50% 50%,#fff 0%,#f0efe8 30%,#cfcdc4 60%,#a8a59c 100%); }

/* -------- BREADCRUMB -------- */
.breadcrumb { padding:16px 0; color:var(--ink-shadow); font-size:.8125rem; }
.breadcrumb a { transition:color 220ms ease; }
.breadcrumb a:hover { color:var(--ink-noir); }
.breadcrumb .sep { padding:0 8px; }
.breadcrumb .current { color:var(--ink-noir); }

/* -------- FILTER BAR (PLP) -------- */
.filter-bar {
  position:sticky; top:96px; z-index:var(--z-sticky);
  background:var(--canvas-pure);
  border-top:1px solid var(--line-hair);
  border-bottom:1px solid var(--line-hair);
}
@media (max-width:768px) { .filter-bar { top:64px; } }
.filter-bar-inner { height:64px; display:flex; align-items:stretch; }
.filter-list { display:flex; flex:1; }
.filter-list li { border-right:1px solid var(--line-hair); }
.filter-trigger {
  height:100%; padding:0 24px;
  display:flex; align-items:center; gap:8px;
  font-size:.8125rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-noir); transition:color 220ms ease;
}
.filter-trigger:hover { color:var(--accent-champagne); }
.filter-count { color:var(--ink-stone); font-size:.75rem; }
.filter-sort { display:flex; align-items:center; padding-left:32px; border-left:1px solid var(--line-hair); }

.chips-row { padding:16px 0; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.chip {
  display:inline-flex; align-items:center;
  padding:4px 12px 4px 16px;
  border:1px solid var(--line-hair); border-radius:999px;
  font-size:.8125rem; color:var(--ink-noir);
  transition:border-color 220ms ease;
}
.chip:hover { border-color:var(--line-strong); }
.chip button {
  margin-left:8px; width:16px; height:16px;
  display:inline-flex; align-items:center; justify-content:center;
}
.chips-clear {
  margin-left:auto; font-size:.8125rem; color:var(--ink-shadow);
  text-decoration:underline; text-underline-offset:4px; transition:color 220ms ease;
}
.chips-clear:hover { color:var(--ink-noir); }

@media (max-width:768px) {
  .filter-bar-inner { overflow-x:auto; }
  .filter-trigger { padding:0 16px; font-size:.6875rem; }
}

/* -------- PAGINATION -------- */
.pagination { margin-top:80px; display:flex; flex-direction:column; align-items:center; gap:16px; }

/* -------- PDP -------- */
.pdp-grid {
  display:grid;
  /* Nov 3 2026: was 58% 42% + 64px gap = wider than the page on laptops (right column ran off-screen) */
  grid-template-columns:minmax(0,58fr) minmax(0,42fr);
  gap:64px;
  padding-bottom:96px;
}
@media (max-width:1024px) { .pdp-grid { grid-template-columns:1fr; gap:32px; } }

.gallery-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.gallery-cell {
  position:relative; aspect-ratio:1/1;
  background:var(--canvas-pure); overflow:hidden;
  cursor:zoom-in;
}
.gallery-cell.span2 { grid-column:span 2; aspect-ratio:16/12; }
.gallery-cell svg { position:absolute; inset:0; width:100%; height:100%; }
.gallery-cell .video-tag {
  position:absolute; bottom:12px; left:12px;
  background:rgba(26,26,26,.85); color:var(--ink-invert);
  padding:4px 8px;
  font-size:.6875rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
}

.pdp-config { position:sticky; top:120px; align-self:start; }
@media (max-width:1024px) { .pdp-config { position:static; } }
.pdp-config h1 { margin-top:12px; color:var(--ink-noir); }
.pdp-config .price { font-size:1.5rem; font-weight:500; color:var(--ink-graphite); margin-top:20px; letter-spacing:.01em; }
.pdp-config .price-sub { color:var(--ink-shadow); font-size:.8125rem; margin-top:4px; }
.pdp-divider { border-top:1px solid var(--line-hair); margin:24px 0; }
.pdp-cert { font-family:var(--font-mono); font-size:.75rem; color:var(--ink-shadow); }
.pdp-cert a { text-decoration:underline; text-underline-offset:4px; }
.pdp-cert a:hover { color:var(--accent-champagne); }

/* Strip browser default fieldset frame */
fieldset { border:0; padding:0; margin:0; min-width:0; }
legend { padding:0; }

.metals { display:flex; gap:18px; margin-bottom:12px; }
.metal-swatch {
  position:relative; width:32px; height:32px; border-radius:999px;
  border:0; padding:0; cursor:pointer;
  background:transparent;
  transition:box-shadow 180ms ease;
}
.metal-swatch .fill { position:absolute; inset:0; border-radius:999px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
.metal-swatch.selected { box-shadow:0 0 0 3px var(--canvas-pure), 0 0 0 4px var(--ink-noir); }
.metal-swatch:not(.selected):hover { box-shadow:0 0 0 3px var(--canvas-pure), 0 0 0 4px var(--line-strong); }
.metal-name { color:var(--ink-noir); font-size:.8125rem; }

.shapes { display:flex; gap:18px; flex-wrap:wrap; margin-top:4px; }
.shape-pill {
  padding:6px 2px 0;
  border:0;
  background:transparent;
  color:var(--ink-graphite);
  font-size:.6875rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  transition:color 220ms ease, opacity 220ms ease;
  cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  min-width:auto;
  position:relative;
}
.shape-pill img { width:36px; height:36px; object-fit:contain; display:block; transition:transform 220ms ease; }
.shape-pill:hover img { transform:scale(1.08); }
.shape-pill.selected { color:var(--ink-noir); }
.shape-pill.selected::after {
  content:''; position:absolute; left:50%; right:auto; bottom:-6px;
  transform:translateX(-50%);
  width:24px; height:1px; background:var(--ink-noir);
}
.shape-pill:not(.selected):not(:disabled):hover { color:var(--ink-noir); }
.shape-pill:disabled { opacity:.35; cursor:not-allowed; }

.cta-stack { margin-top:40px; display:flex; flex-direction:column; gap:12px; }

.trust-strip {
  margin-top:32px; padding:16px 0;
  border-top:1px solid var(--line-hair); border-bottom:1px solid var(--line-hair);
  display:flex; justify-content:space-between; gap:16px;
  font-size:.8125rem; color:var(--ink-shadow);
  flex-wrap:wrap;
}

.accordion { margin-top:32px; }
.accordion details { border-top:1px solid var(--line-hair); padding:20px 0; }
.accordion details:last-child { border-bottom:1px solid var(--line-hair); }
.accordion summary {
  display:flex; justify-content:space-between; align-items:center;
  cursor:pointer;
  font-size:.6875rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-noir); list-style:none;
}
.accordion summary::-webkit-details-marker { display:none; }
.accordion summary .plus { transition:transform 220ms ease; }
.accordion details[open] summary .plus { transform:rotate(45deg); }
.spec-table {
  margin-top:16px;
  display:grid; grid-template-columns:200px 1fr; gap:12px 16px;
  font-size:.8125rem;
}
.spec-table dt { color:var(--ink-shadow); }
.spec-table dd { font-family:var(--font-mono); font-size:.75rem; color:var(--ink-noir); }
.spec-table dd a { text-decoration:underline; text-underline-offset:4px; }
.spec-table dd a:hover { color:var(--accent-champagne); }

/* -------- CUSTOMIZER STEPPER -------- */
.stepper {
  position:sticky; top:96px; z-index:var(--z-sticky);
  background:var(--canvas-pure);
  border-top:1px solid var(--line-hair); border-bottom:1px solid var(--line-hair);
}
@media (max-width:768px) { .stepper { top:64px; } }
.stepper-inner { position:relative; }
.stepper ol { display:grid; grid-template-columns:repeat(3,1fr); height:96px; }
.step-cell {
  padding:0 24px;
  display:flex; flex-direction:column; justify-content:center;
  text-align:left; width:100%; height:100%;
  border-bottom:2px solid transparent;
  cursor:pointer;
}
.step-cell.active { border-bottom-color:var(--ink-noir); }
.step-cell.disabled { opacity:.5; cursor:not-allowed; }
.step-cell .head { display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.step-circle {
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:999px;
  font-size:.8125rem; font-weight:500; border:1px solid;
}
.step-circle.pending   { border-color:var(--line-strong); color:var(--ink-stone); background:var(--canvas-pure); }
.step-circle.active    { border-color:var(--canvas-noir); background:var(--canvas-noir); color:var(--ink-invert); }
.step-circle.completed { border-color:var(--accent-champagne); background:var(--accent-champagne); color:var(--ink-invert); }
.step-label { font-size:.6875rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-noir); }
.step-label.muted { color:var(--ink-shadow); }
.step-value { font-family:var(--font-serif); font-size:1.5rem; color:var(--ink-noir); line-height:1.2; }
.step-value.muted { color:var(--ink-stone); }
.step-price { color:var(--ink-graphite); font-size:.9375rem; font-weight:500; margin-top:4px; }
.step-rail { position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--line-hair); }
.step-rail .fill { height:1px; background:var(--ink-noir); transition:width 400ms ease; }
@media (max-width:768px) {
  .stepper ol { height:auto; }
  .step-cell { padding:12px 12px; }
  .step-value { font-size:1rem; }
}

/* -------- DIAMOND TABLE (CUSTOMIZER STEP 2) -------- */
.dt-wrap { padding-bottom:64px; }
.dt-filter {
  background:var(--canvas-pure);
  border-top:1px solid var(--line-hair); border-bottom:1px solid var(--line-hair);
  margin-bottom:24px;
}
.dt-filter ul { display:flex; flex-wrap:wrap; }
.dt-filter li { border-right:1px solid var(--line-hair); }
.dt-filter button {
  height:56px; padding:0 24px;
  display:flex; align-items:center; gap:8px;
  font-size:.8125rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-noir); transition:color 220ms ease;
}
.dt-filter button:hover { color:var(--accent-champagne); }
.dt-filter .sort-li { margin-left:auto; border-right:0; border-left:1px solid var(--line-hair); }

table.dt { width:100%; border-collapse:collapse; }
table.dt thead { background:var(--canvas-snow); }
table.dt thead th {
  padding:16px 24px;
  font-size:.6875rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-shadow); text-align:left;
  border-bottom:1px solid var(--line-hair);
}
table.dt thead th.num { text-align:right; }
table.dt thead th.cent { text-align:center; }
table.dt tbody tr {
  border-bottom:1px solid var(--line-hair);
  transition:background 220ms ease;
}
table.dt tbody tr:hover { background:var(--canvas-snow); }
table.dt tbody tr.selected {
  background:var(--canvas-platinum);
  box-shadow:inset 2px 0 0 var(--accent-champagne);
}
table.dt td { padding:20px 24px; font-size:.9375rem; color:var(--ink-graphite); }
table.dt td.mono { font-family:var(--font-mono); font-size:.75rem; color:var(--ink-noir); }
table.dt td.num { text-align:right; }
table.dt td.cent { text-align:center; }
table.dt td.dt-empty { text-align:center; color:var(--ink-shadow); padding:48px 24px; }
table.dt .btn-sm { padding:6px 14px; font-size:.8125rem; }
table.dt tr.dt-row { cursor:pointer; }
table.dt tr.dt-row td:last-child { white-space:nowrap; text-align:right; }
.dt-view-btn {
  background:none; border:1px solid var(--line-hair); border-radius:4px;
  padding:6px 12px; font-size:.8125rem; margin-right:8px; cursor:pointer;
  color:var(--ink-graphite); transition:border-color .15s, color .15s;
}
.dt-view-btn:hover { border-color:var(--accent-champagne); color:var(--ink-noir); }

/* -------- VIEW TOGGLE (grid / list) -------- */
.dview-toggle { display:inline-flex; gap:0; border:1px solid var(--line-hair); border-radius:6px; overflow:hidden; margin-left:auto; }
.dview-btn {
  background:#fff; border:0; padding:7px 12px; font-size:1rem; line-height:1; cursor:pointer;
  color:var(--ink-shadow); transition:background .15s, color .15s;
}
.dview-btn + .dview-btn { border-left:1px solid var(--line-hair); }
.dview-btn.active { background:var(--ink-noir,#1a1a1a); color:#fff; }
.dfilter-toolbar .dfilter-sort { margin-left:16px; }

/* -------- DIAMOND GRID (Brilliant Earth style) -------- */
.dgrid {
  display:grid; grid-template-columns:repeat(4, 1fr);   /* 4 per row — larger cards, Brilliant Earth style */
  gap:24px; padding:8px 0 16px;
}
@media (max-width:1024px) { .dgrid { grid-template-columns:repeat(3, 1fr); } }
@media (max-width:680px)  { .dgrid { grid-template-columns:repeat(2, 1fr); } }
.dgrid[hidden] { display:none; }
.dgrid-empty { grid-column:1/-1; text-align:center; color:var(--ink-shadow); padding:56px 24px; }
.dcard {
  border:1px solid var(--line-hair); border-radius:10px; background:#fff; overflow:hidden;
  cursor:pointer; display:flex; flex-direction:column;
  transition:box-shadow .18s, transform .18s, border-color .18s;
}
.dcard:hover { box-shadow:0 12px 32px rgba(0,0,0,.12); transform:translateY(-3px); border-color:transparent; }
.dcard-media {
  position:relative; aspect-ratio:1/1; background:var(--canvas-snow,#f6f4f1);
  display:flex; align-items:center; justify-content:center;
}
.dcard-media img { width:100%; height:100%; object-fit:cover; -webkit-user-drag:none; user-select:none; }
/* CANVAS: we draw the real frame for each angle onto it (genuine image-sequence
   frame-swapping). Frames are stored together in one "film strip" image (loaded
   once = all preloaded), and we draw the exact cell per angle so the facets move. */
.dcard-media .dcard-canvas {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1;
  pointer-events:none;
  opacity:0; transition:opacity .12s ease;
}
/* The vendor's 360° viewer (same as the detail popup, chrome hidden). It takes
   the mouse so you can HOLD AND ROTATE the stone right in the card — which means
   clicks on the picture belong to the viewer; open details via the card text. */
.dcard-media iframe {
  position:absolute; inset:0; width:100%; height:100%; border:0; z-index:1;
  object-fit:cover; pointer-events:none;
  opacity:0; transition:opacity .12s ease;
}
.dcard-media.is-spinning .dcard-canvas,
.dcard-media.is-spinning iframe { opacity:1; pointer-events:auto; }
/* The viewer page is transparent and shorter than the square card — hide the
   static photo behind it so its bottom edge can't peek out below the rotation. */
.dcard-media.is-spinning > img { visibility:hidden; }
.dcard-noimg {
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(160deg,#f3efe9,#e9e2d8);
  color:var(--ink-shadow); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em;
}
.dcard-noimg::before {
  content:""; width:30px; height:30px; opacity:.5; background:var(--ink-shadow);
  -webkit-mask:no-repeat center/contain; mask:no-repeat center/contain;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M5 8 L9 3 H15 L19 8 L12 21 Z M5 8 H19 M9 3 L12 8 L15 3 M9.5 8 L12 21 L14.5 8'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M5 8 L9 3 H15 L19 8 L12 21 Z M5 8 H19 M9 3 L12 8 L15 3 M9.5 8 L12 21 L14.5 8'/%3E%3C/svg%3E");
}
.dcard-360 {
  position:absolute; top:10px; right:10px; z-index:3; background:rgba(0,0,0,.65); color:#fff;
  font-size:.6875rem; letter-spacing:.04em; padding:3px 7px; border-radius:20px;
}
.dcard-media.is-spinning .dcard-360 { background:var(--accent-champagne,#b8946a); }
.dcard-body { padding:16px; display:flex; flex-direction:column; gap:4px; flex:1; }
.dcard-title { font-size:.9375rem; font-weight:600; color:var(--ink-noir); margin:0; }
.dcard-specs { font-size:.8125rem; color:var(--ink-shadow); margin:0; }
.dcard-price { font-size:1.125rem; font-weight:600; color:var(--ink-noir); margin:6px 0 0; }
.dcard-actions { margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.dcard-actions .btn { width:100%; text-align:center; }
.dcard-view {
  background:none; border:0; padding:2px; cursor:pointer; font-size:.8125rem;
  color:var(--accent-champagne,#b8946a); text-decoration:underline; text-underline-offset:3px;
}
table.dt[hidden] { display:none; }

/* -------- DIAMOND DETAIL MODAL -------- */
.ddetail-backdrop {
  position:fixed; inset:0; z-index:1000;
  background:rgba(20,18,16,.55); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.ddetail-backdrop[hidden] { display:none; }
.ddetail-panel {
  background:var(--canvas-pure,#fff); border-radius:10px; overflow:hidden;
  width:min(920px,100%); max-height:90vh; position:relative;
  box-shadow:0 24px 80px rgba(0,0,0,.35); display:flex; flex-direction:column;
}
.ddetail-close {
  position:absolute; top:12px; right:16px; z-index:2;
  background:rgba(255,255,255,.85); border:0; border-radius:50%;
  width:36px; height:36px; font-size:24px; line-height:1; cursor:pointer;
  color:var(--ink-noir); display:flex; align-items:center; justify-content:center;
}
.ddetail-close:hover { background:#fff; }
.ddetail-body { display:grid; grid-template-columns:1fr 1fr; overflow:auto; }
@media (max-width:760px){ .ddetail-body { grid-template-columns:1fr; } }
.ddetail-media { background:var(--canvas-snow,#f6f4f1); padding:24px; display:flex; flex-direction:column; gap:12px; }
.ddetail-media-stage {
  aspect-ratio:1/1; background:#fff; border-radius:6px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.ddetail-media-stage img { width:100%; height:100%; object-fit:contain; }
.ddetail-media-stage iframe { width:100%; height:100%; border:0; }
.ddetail-noimg { color:var(--ink-shadow); font-size:.875rem; }
.ddetail-media-tabs { display:flex; gap:8px; }
.ddetail-tab {
  flex:1; padding:8px; border:1px solid var(--line-hair); background:#fff;
  border-radius:4px; cursor:pointer; font-size:.8125rem; color:var(--ink-graphite);
}
.ddetail-tab.active { border-color:var(--ink-noir); color:var(--ink-noir); font-weight:600; }
.ddetail-info { padding:32px; display:flex; flex-direction:column; }
.ddetail-eyebrow { font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-champagne,#b8946a); margin-bottom:6px; }
.ddetail-title { font-size:1.5rem; margin:0 0 8px; color:var(--ink-noir); }
.ddetail-price { font-size:1.75rem; font-weight:600; color:var(--ink-noir); margin:0 0 20px; }
.ddetail-specs { display:grid; grid-template-columns:1fr 1fr; gap:0 24px; margin-bottom:24px; }
.ddetail-spec { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--line-hair); font-size:.875rem; }
.ddetail-spec-l { color:var(--ink-shadow); }
.ddetail-spec-v { color:var(--ink-noir); font-weight:500; text-align:right; }
.ddetail-actions { display:flex; gap:12px; margin-top:auto; }
.ddetail-actions .btn { flex:1; text-align:center; }
.ddetail-note { font-size:.8125rem; color:var(--ink-shadow); margin-top:14px; }

/* Loading shimmer */
.dt-wrap { position:relative; }
.dt-wrap.dt-loading::after {
  content:'';
  position:absolute; inset:0;
  background:rgba(255,255,255,.65);
  z-index:10;
  border-radius:4px;
}
.dt-wrap.dt-loading #diamond-table tbody tr td { opacity:.4; transition:opacity .2s; }

/* -------- REVIEW PANEL (CUSTOMIZER STEP 3) -------- */
.review-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; }
@media (max-width:1024px) { .review-grid { grid-template-columns:1fr; gap:32px; } }
.composite-img {
  aspect-ratio:1/1; background:var(--canvas-platinum);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-shadow); font-size:.8125rem;
}
.composite-img svg { max-width:60%; max-height:60%; }
.row-summary { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.row-summary .col-title { color:var(--ink-noir); font-size:.9375rem; margin-top:4px; }
.row-summary .col-sub { color:var(--ink-shadow); font-family:var(--font-mono); font-size:.75rem; margin-top:4px; }
.row-summary .col-edit {
  display:inline-block; margin-top:4px;
  color:var(--ink-shadow); font-size:.8125rem;
  text-decoration:underline; text-underline-offset:4px;
  transition:color 220ms ease;
}
.row-summary .col-edit:hover { color:var(--ink-noir); }
.review-total { display:flex; justify-content:space-between; align-items:baseline; }
.review-total .label { font-size:.6875rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-noir); }
.review-total .amount { font-family:var(--font-serif); font-size:2.5rem; color:var(--ink-noir); }

/* -------- EDITORIAL BLOCK -------- */
.editorial { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
@media (max-width:768px) { .editorial { grid-template-columns:1fr; gap:32px; } }
.editorial-image {
  aspect-ratio:3/4; background:var(--canvas-platinum);
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}

/* -------- TRUST ROW -------- */
.trust-row {
  display:grid; grid-template-columns:repeat(4,1fr);
}
@media (max-width:768px) { .trust-row { grid-template-columns:repeat(2,1fr); gap:32px 0; } }
.trust-cell { text-align:center; padding:0 24px; }
.trust-cell + .trust-cell { border-left:1px solid var(--line-hair); }
@media (max-width:768px) {
  .trust-cell + .trust-cell { border-left:0; }
  .trust-cell:nth-child(3) { border-left:0; }
}
.trust-cell svg { margin:0 auto 16px; color:var(--ink-noir); }

/* -------- NEWSLETTER -------- */
.newsletter-form {
  margin-top:32px;
  display:flex; border:1px solid var(--line-noir);
  background:var(--canvas-pure);
}
.newsletter-form input {
  flex:1; height:48px; padding:0 16px;
  background:transparent; border:0; outline:0;
  font-size:.9375rem; color:var(--ink-noir);
}
.newsletter-form button {
  height:48px; padding:0 32px;
  background:var(--canvas-noir); color:var(--ink-invert);
  font-size:.8125rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  transition:background 220ms ease;
}
.newsletter-form button:hover { background:var(--ink-graphite); }

/* -------- FOOTER -------- */
footer.main {
  background:var(--canvas-pearl);
  padding:80px 0 32px;
  border-top:1px solid var(--line-hair);
}
.footer-grid {
  display:grid; grid-template-columns:1.5fr repeat(4,1fr);
  gap:48px; padding-bottom:64px;
}
@media (max-width:1024px) { .footer-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:768px)  { .footer-grid { grid-template-columns:repeat(2,1fr); gap:32px; } }
.footer-grid h5 {
  font-size:.6875rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-noir); margin-bottom:20px;
}
.footer-grid li { margin-top:12px; }
.footer-grid li:first-child { margin-top:0; }
.footer-grid a { color:var(--ink-shadow); font-size:.8125rem; transition:color 220ms ease; }
.footer-grid a:hover { color:var(--ink-noir); }
.footer-brand-name { font-family:var(--font-serif); font-size:1.5rem; letter-spacing:.25em; color:var(--ink-noir); }
.footer-brand-meta { color:var(--ink-shadow); font-size:.8125rem; margin-top:24px; line-height:1.6; }
.footer-bottom {
  border-top:1px solid var(--line-hair); padding-top:24px;
  display:flex; justify-content:space-between; align-items:center;
  color:var(--ink-shadow); font-size:.8125rem; flex-wrap:wrap; gap:12px;
}
.footer-bottom .legal { display:flex; gap:24px; }

/* -------- CART DRAWER -------- */
.drawer-backdrop {
  position:fixed; inset:0;
  background:rgba(26,26,26,0.4);
  opacity:0; pointer-events:none;
  transition:opacity 220ms ease;
  z-index:var(--z-modal);
}
.drawer-backdrop.open { opacity:1; pointer-events:auto; }

.cart-drawer {
  position:fixed; top:0; right:0; bottom:0;
  width:440px; max-width:100vw;
  background:var(--canvas-pure);
  box-shadow:-16px 0 48px rgba(26,26,26,0.08);
  z-index:calc(var(--z-modal) + 1);
  display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform 280ms cubic-bezier(0.4,0,0.2,1);
}
.cart-drawer.open { transform:translateX(0); }
.cart-head {
  height:72px; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--line-hair);
}
.cart-shipping {
  padding:12px 24px; background:var(--canvas-snow);
  border-bottom:1px solid var(--line-hair);
}
.cart-shipping .lbl { color:var(--accent-success); font-size:.8125rem; display:flex; align-items:center; gap:8px; }
.cart-shipping .bar { height:2px; background:var(--line-hair); margin-top:8px; }
.cart-shipping .fill { height:100%; background:var(--accent-success); }
.cart-body { flex:1; overflow-y:auto; padding:0 24px; }
.line-item { display:flex; gap:16px; padding:24px 0; border-bottom:1px solid var(--line-hair); }
.line-img {
  width:80px; height:80px; flex-shrink:0;
  background:var(--canvas-platinum); position:relative; overflow:hidden;
}
.line-img svg { position:absolute; inset:0; width:100%; height:100%; }
.line-body { flex:1; min-width:0; }
.line-title { color:var(--ink-noir); font-size:.9375rem; }
.line-meta { color:var(--ink-shadow); font-size:.8125rem; margin-top:4px; }
.edit-link {
  display:inline-block; margin-top:8px;
  color:var(--ink-noir); border-bottom:1px solid currentColor; padding-bottom:2px;
  font-size:.6875rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
}
.edit-link:hover { color:var(--accent-champagne); }
.line-row { display:flex; align-items:center; justify-content:space-between; margin-top:12px; }
.qty { display:flex; align-items:center; border:1px solid var(--line-hair); }
.qty button { width:32px; height:32px; display:flex; align-items:center; justify-content:center; transition:background 220ms ease; }
.qty button:hover { background:var(--canvas-snow); }
.qty .val { width:32px; height:32px; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:.75rem; border-left:1px solid var(--line-hair); border-right:1px solid var(--line-hair); }
.remove { color:var(--ink-shadow); width:24px; height:24px; display:flex; align-items:center; justify-content:center; transition:color 220ms ease; margin-left:12px; }
.remove:hover { color:var(--accent-error); }

.cart-foot { border-top:1px solid var(--line-hair); padding:24px; background:var(--canvas-pure); }
.cart-totals .row { display:flex; justify-content:space-between; padding:4px 0; font-size:.9375rem; }
.cart-totals .row .mono { font-family:var(--font-mono); font-size:.75rem; }
.cart-totals .total { padding-top:16px; margin-top:8px; border-top:1px solid var(--line-hair); }
.cart-totals .total dt, .cart-totals .total dd { font-family:var(--font-serif); font-size:1.875rem; color:var(--ink-noir); }
.cart-trust { border-top:1px solid var(--line-hair); margin-top:24px; padding-top:16px; }
.cart-trust li { display:flex; align-items:center; gap:8px; color:var(--ink-shadow); font-size:.8125rem; padding:4px 0; }

.empty-cart { padding:64px 24px; text-align:center; }
.empty-cart svg { margin:0 auto 24px; color:var(--ink-stone); }
.empty-cart h3 { color:var(--ink-noir); }
.empty-cart p { color:var(--ink-shadow); margin-top:12px; }
.empty-cart .links { display:flex; flex-direction:column; gap:12px; margin-top:32px; }

/* -------- SEARCH OVERLAY -------- */
.search-overlay {
  position:fixed; inset:0;
  background:var(--canvas-pure);
  z-index:var(--z-modal);
  display:none; flex-direction:column;
}
.search-overlay.open { display:flex; }
.search-head { height:56px; padding:0 24px; display:flex; align-items:center; justify-content:flex-end; border-bottom:1px solid var(--line-hair); }
.search-body { padding:48px; flex:1; overflow:auto; max-width:1100px; margin:0 auto; width:100%; }
.search-input-wrap { display:flex; align-items:center; border-bottom:1px solid var(--line-hair); padding-bottom:12px; }
.search-input-wrap svg { margin-right:16px; color:var(--ink-shadow); }
.search-input-wrap input {
  flex:1; height:56px;
  border:0; background:transparent; outline:0;
  font-size:1.0625rem; color:var(--ink-noir);
}
.search-input-wrap input::placeholder { color:var(--ink-stone); }
.chip-row { margin-top:32px; }
.chip-row-label { font-size:.6875rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-shadow); margin-bottom:16px; }
.chip-row-items { display:flex; flex-wrap:wrap; gap:8px; }
.chip-pill {
  padding:8px 16px; border:1px solid var(--line-hair); border-radius:999px;
  font-size:.8125rem; background:var(--canvas-pure); cursor:pointer;
  transition:border-color 220ms ease;
}
.chip-pill:hover { border-color:var(--line-strong); }
.result-group { margin-top:48px; }
.result-group h4 { font-size:.6875rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-shadow); margin-bottom:16px; }
.result-group ul li { border-bottom:1px solid var(--line-hair); }
.result-product { display:flex; align-items:center; gap:16px; padding:12px 16px; cursor:pointer; transition:background 220ms ease; }
.result-product:hover { background:var(--canvas-snow); }
.result-product .thumb { width:56px; height:56px; background:var(--canvas-platinum); flex-shrink:0; position:relative; }
.result-product .thumb svg { position:absolute; inset:0; width:100%; height:100%; }
.result-product .title { flex:1; color:var(--ink-noir); }
.result-product .price { font-weight:500; }

/* -------- VISIT PAGE / APPOINTMENT FORM -------- */
.visit-hero {
  position:relative; height:60vh; min-height:480px; overflow:hidden;
  background:linear-gradient(135deg,#3a2f24 0%,#5a4a36 50%,#8a7250 100%);
}
.visit-hero::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(to right,rgba(0,0,0,.55) 0%,rgba(0,0,0,.2) 50%,transparent 80%);
  pointer-events:none;
}
.visit-hero-inner { position:relative; z-index:2; height:100%; display:flex; align-items:center; }
.visit-hero-copy { color:var(--ink-invert); max-width:540px; }
.visit-hero-copy .display-lg { color:var(--ink-invert); margin-top:16px; }
.visit-hero-copy .eyebrow { color:rgba(255,255,255,0.85); }
.visit-hero-copy p { color:rgba(255,255,255,0.85); margin-top:24px; }

.visit-info-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; }
@media (max-width:768px) { .visit-info-grid { grid-template-columns:1fr; gap:32px; } }
.visit-info h3 { color:var(--ink-noir); font-family:var(--font-serif); font-size:1.875rem; margin-bottom:16px; font-weight:400; }
.visit-info p { color:var(--ink-shadow); }
.map-placeholder {
  margin-top:24px; aspect-ratio:16/9; background:var(--canvas-platinum);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-shadow); font-size:.75rem; letter-spacing:.18em; text-transform:uppercase;
}

.expect-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
@media (max-width:768px) { .expect-grid { grid-template-columns:1fr; gap:24px; } }
.expect-card { padding:32px; border:1px solid var(--line-hair); background:var(--canvas-pure); }
.expect-card svg { color:var(--ink-noir); }
.expect-card h4 { color:var(--ink-noir); font-family:var(--font-serif); font-size:1.5rem; margin-top:16px; font-weight:400; }
.expect-card p { color:var(--ink-shadow); font-size:.9375rem; margin-top:12px; }

.booking-form { max-width:720px; margin:0 auto; }
.step-bar { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:40px; }
.step-item { display:flex; align-items:center; gap:12px; }
.step-num {
  width:24px; height:24px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.8125rem; font-weight:500; border:1px solid;
}
.step-num.pending { border-color:var(--line-strong); color:var(--ink-stone); background:var(--canvas-pure); }
.step-num.active { border-color:var(--canvas-noir); background:var(--canvas-noir); color:var(--ink-invert); }
.step-num.done { border-color:var(--accent-champagne); background:var(--accent-champagne); color:var(--ink-invert); }
.step-label-form { font-size:.6875rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-stone); }
.step-label-form.active, .step-label-form.done { color:var(--ink-noir); }

.visit-types { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:768px) { .visit-types { grid-template-columns:1fr; } }
.visit-type-card {
  text-align:left; padding:24px;
  border:1px solid var(--line-hair); cursor:pointer;
  transition:all 220ms ease; background:var(--canvas-pure);
}
.visit-type-card:hover { border-color:var(--line-strong); }
.visit-type-card.selected { border-color:var(--canvas-noir); background:var(--canvas-snow); }
.visit-type-card .title { font-family:var(--font-serif); font-size:1.5rem; color:var(--ink-noir); font-weight:400; }
.visit-type-card .sub { color:var(--ink-shadow); font-size:.8125rem; margin-top:8px; }

.calendar { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
.day-cell {
  aspect-ratio:1; border:1px solid var(--line-hair); background:var(--canvas-pure);
  cursor:pointer; transition:all 220ms ease;
  display:flex; flex-direction:column; justify-content:center; align-items:center; padding:8px;
}
.day-cell:hover:not(.disabled):not(.selected) { border-color:var(--line-strong); }
.day-cell.disabled { opacity:.4; cursor:not-allowed; }
.day-cell.today { border-color:var(--accent-champagne); }
.day-cell.selected { background:var(--canvas-noir); border-color:var(--canvas-noir); color:var(--ink-invert); }
.day-cell .dow { font-size:.6875rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; }
.day-cell .num { font-family:var(--font-serif); font-size:1.5rem; line-height:1; margin-top:4px; }

.time-slots { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.time-pill {
  padding:8px 16px; border:1px solid var(--line-hair); background:var(--canvas-pure);
  font-size:.8125rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  cursor:pointer; transition:all 220ms ease;
}
.time-pill:hover:not(.selected) { border-color:var(--line-strong); }
.time-pill.selected { background:var(--canvas-noir); color:var(--ink-invert); border-color:var(--canvas-noir); }

.form-row { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media (max-width:768px) { .form-row { grid-template-columns:1fr; } }
.lux-input { height:56px; }
.step-nav { display:flex; justify-content:space-between; margin-top:32px; gap:16px; flex-wrap:wrap; }

/* -------- TOAST -------- */
.toast {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--canvas-noir); color:var(--ink-invert);
  padding:14px 24px;
  font-size:.8125rem; font-weight:500; letter-spacing:.05em;
  opacity:0; transition:opacity 220ms ease, transform 220ms ease;
  z-index:var(--z-toast);
  pointer-events:none;
  white-space:nowrap;
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* -------- HELPERS -------- */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
@media (max-width:768px) { .grid-2 { grid-template-columns:1fr; gap:32px; } }
.flex { display:flex; }
.flex-1 { flex:1; }
.gap-2 { gap:8px; } .gap-3 { gap:12px; } .gap-4 { gap:16px; } .gap-6 { gap:24px; }

/* -------- HOMEPAGE OVERLAY ILLUSTRATION HELPERS -------- */
.illus-ring { width:240px; height:200px; }
.illus-diamond { width:160px; height:200px; }
.editorial-svg { width:60%; max-width:280px; height:auto; }

/* ==========================================================
   NEW COMPONENTS (Journal, FAQ, Categories, Conversion CTAs)
   ========================================================== */

/* PAGE HERO (shared by category pages) */
.page-hero { padding:64px 0 48px; }
.page-hero .breadcrumb { font-size:.75rem; letter-spacing:.06em; margin-bottom:24px; color:var(--ink-shadow); }
.page-hero .breadcrumb a { color:var(--ink-shadow); }
.page-hero .breadcrumb .sep { margin:0 8px; }
.page-hero .breadcrumb .current { color:var(--ink-noir); }
.page-hero .eyebrow { margin-bottom:16px; }
.page-hero .lede { font-size:1.0625rem; line-height:1.55; max-width:640px; color:var(--ink-graphite); margin-top:16px; }
.page-hero .hero-ctas { margin-top:32px; display:flex; gap:12px; flex-wrap:wrap; }
.center { text-align:center; }

/* TRUST BAND */
.trust-band { background:var(--canvas-snow); border-top:1px solid var(--line-hair); border-bottom:1px solid var(--line-hair); padding:28px 0; }
.trust-band-inner { display:grid; grid-template-columns:repeat(5, 1fr); gap:24px; text-align:center; }
.trust-tile strong { display:block; font-size:.8125rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-noir); margin-bottom:6px; }
.trust-tile span { display:block; font-size:.75rem; color:var(--ink-shadow); line-height:1.4; }
@media (max-width:900px){ .trust-band-inner { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:480px){ .trust-band-inner { grid-template-columns:1fr; gap:16px; } }

/* STICKY APPOINTMENT CTA */
.sticky-cta {
  position:fixed; right:24px; bottom:92px;   /* stacks ABOVE the chat fab (bottom-right) */
  background:var(--ink-noir); color:var(--ink-invert);
  padding:14px 22px; border-radius:999px;
  font-size:.8125rem; letter-spacing:.12em; text-transform:uppercase; font-weight:500;
  display:flex; align-items:center; gap:8px;
  box-shadow:0 8px 24px rgba(20,20,20,.18);
  z-index:50;
  transition:transform 220ms ease, box-shadow 220ms ease, opacity 220ms ease;
}
.sticky-cta:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(20,20,20,.24); color:var(--ink-invert); }
@media (max-width:768px){ .sticky-cta { right:16px; bottom:80px; padding:12px 18px; font-size:.6875rem; } }
/* Below ~1560px the 1440px content column runs under the pill, so the full
   label sits on top of cards mid-scroll — collapse to an icon-only dot
   (the aria-label still announces it). .is-off hides it while the footer,
   which carries the same booking link, is in view. */
@media (max-width:1560px) and (min-width:769px){
  .sticky-cta { padding:0; width:48px; height:48px; justify-content:center; }
  .sticky-cta svg { width:18px; height:18px; }
  .sticky-cta span { display:none; }
}
.sticky-cta.is-off { opacity:0; pointer-events:none; transform:translateY(10px); }

/* FOOTER */
.site-footer { background:var(--canvas-snow); border-top:1px solid var(--line-hair); padding:64px 0 32px; margin-top:80px; }
.footer-inner { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:48px; }
.footer-brand .wordmark-sm { font-family:'Cormorant Garamond', serif; font-size:1.0625rem; letter-spacing:.22em; margin-bottom:16px; }
.footer-tag { font-style:italic; color:var(--ink-graphite); margin-bottom:20px; line-height:1.55; }
.footer-addr, .footer-hours { font-size:.8125rem; color:var(--ink-shadow); line-height:1.65; margin-bottom:12px; }
.footer-col h5 { font-size:.6875rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; margin-bottom:18px; color:var(--ink-noir); }
.footer-col ul li { margin-bottom:10px; }
.footer-col a { font-size:.875rem; color:var(--ink-graphite); transition:color 220ms ease; }
.footer-col a:hover { color:var(--accent-champagne); }
.footer-bottom { display:flex; justify-content:space-between; padding-top:32px; margin-top:48px; border-top:1px solid var(--line-hair); font-size:.75rem; color:var(--ink-shadow); }
.footer-bottom-links { display:flex; gap:24px; }
.footer-bottom-links a { font-size:.75rem; color:var(--ink-shadow); }
@media (max-width:900px){ .footer-inner { grid-template-columns:1fr 1fr; gap:32px; } .footer-brand { grid-column:1 / -1; } }
@media (max-width:480px){ .footer-inner { grid-template-columns:1fr; } .footer-bottom { flex-direction:column; gap:12px; } }

/* JOURNAL */
.journal-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:40px; }
.journal-card { display:flex; flex-direction:column; }
.journal-card-img { aspect-ratio:4/3; overflow:hidden; margin-bottom:20px; background:var(--canvas-snow); }
.journal-card-img img { width:100%; height:100%; object-fit:cover; transition:transform 480ms ease; }
.journal-card:hover .journal-card-img img { transform:scale(1.04); }
.journal-card h3 { font-family:'Cormorant Garamond', serif; font-size:1.5rem; line-height:1.2; margin:8px 0 10px; color:var(--ink-noir); }
.journal-deck { color:var(--ink-graphite); line-height:1.5; margin-bottom:14px; font-size:.9375rem; }
.link-arrow { font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-champagne); }
@media (max-width:900px){ .journal-grid { grid-template-columns:1fr 1fr; gap:28px; } }
@media (max-width:600px){ .journal-grid { grid-template-columns:1fr; } }

/* ARTICLE / BLOG POST */
.article { padding:48px 0 0; }
.article-narrow { max-width:720px; margin:0 auto; }
.article .breadcrumb { font-size:.75rem; letter-spacing:.06em; margin-bottom:24px; color:var(--ink-shadow); }
.article-eyebrow { margin:0 0 16px; }
.article-deck { font-size:1.25rem; line-height:1.5; color:var(--ink-graphite); margin:20px 0 32px; font-style:italic; }
.article-hero { max-width:1100px; margin:0 auto 48px; padding:0; }
.article-hero img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.article-body { font-size:1.0625rem; line-height:1.75; color:var(--ink-graphite); }
.article-intro { font-size:1.125rem; line-height:1.65; margin-bottom:40px; color:var(--ink-noir); }
.article-section { margin-bottom:36px; }
.article-section h2 { font-family:'Cormorant Garamond', serif; font-size:1.75rem; line-height:1.2; color:var(--ink-noir); margin:24px 0 14px; }
.article-section p { margin-bottom:16px; }
.key-takeaways { background:var(--canvas-snow); padding:32px; margin:48px 0; border-left:3px solid var(--accent-champagne); }
.key-takeaways h3 { font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:12px; }
.key-takeaways p { font-size:.9375rem; line-height:1.65; margin:0; color:var(--ink-noir); }
.article-cta { background:var(--canvas-pure); border:1px solid var(--line-hair); padding:40px; text-align:center; margin:48px 0; }
.article-cta h3 { font-family:'Cormorant Garamond', serif; font-size:1.5rem; margin-bottom:8px; }
.article-cta p { margin-bottom:24px; color:var(--ink-graphite); }
.cta-row { display:flex; gap:12px; justify-content:flex-start; flex-wrap:wrap; }
.cta-row.center { justify-content:center; }

/* RELATED */
.related-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:32px; }
.related-card { display:flex; flex-direction:column; }
.related-img { aspect-ratio:4/3; overflow:hidden; margin-bottom:14px; background:var(--canvas-snow); }
.related-img img { width:100%; height:100%; object-fit:cover; }
.related-card h4 { font-family:'Cormorant Garamond', serif; font-size:1.125rem; line-height:1.3; margin-top:6px; color:var(--ink-noir); }
@media (max-width:768px){ .related-grid { grid-template-columns:1fr; gap:24px; } }

/* FAQ */
.faq-item { padding:20px 0; border-bottom:1px solid var(--line-hair); }
.faq-item summary { font-size:1.0625rem; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; color:var(--ink-noir); font-weight:500; }
.faq-item summary::after { content:'+'; font-size:1.5rem; font-weight:300; transition:transform 220ms ease; }
.faq-item[open] summary::after { transform:rotate(45deg); }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item p { margin-top:14px; line-height:1.65; color:var(--ink-graphite); font-size:.9375rem; }
.faq-section { margin-bottom:48px; }
.faq-section h2 { font-family:'Cormorant Garamond', serif; font-size:1.5rem; padding-bottom:14px; border-bottom:2px solid var(--ink-noir); margin-bottom:8px; }
.see-all-faq { margin-top:24px; text-align:center; }

/* PLP TOOLBAR + PRODUCT GRID */
.plp-toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:32px; padding-bottom:16px; border-bottom:1px solid var(--line-hair); }
.plp-count { font-size:.8125rem; color:var(--ink-shadow); }
.plp-sort label { font-size:.75rem; color:var(--ink-shadow); margin-right:8px; }
.plp-sort select { border:1px solid var(--line-hair); padding:6px 10px; background:transparent; font-size:.8125rem; }

/* Widen the container ONLY when it wraps a product grid so 4 columns fit
   at the same image size we had at 3 columns previously */
.container:has(> .product-grid) { max-width:1880px; }
.product-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:32px; }
.product-card { display:flex; flex-direction:column; text-decoration:none; }
.product-img { aspect-ratio:1; overflow:hidden; margin-bottom:16px; background:var(--canvas-snow); }
.product-img img { width:100%; height:100%; object-fit:cover; transition:transform 480ms ease; }
.product-card:hover .product-img img { transform:scale(1.04); }
.product-name { font-family:'Cormorant Garamond', serif; font-size:1.125rem; color:var(--ink-noir); margin-bottom:4px; line-height:1.3; }
.product-sub { font-size:.8125rem; color:var(--ink-shadow); margin-bottom:8px; }
.product-price { font-size:.875rem; color:var(--ink-noir); font-weight:500; letter-spacing:.04em; }
@media (max-width:1280px){ .product-grid { grid-template-columns:repeat(3, 1fr); } .container:has(> .product-grid) { max-width:1440px; } }
@media (max-width:900px){ .product-grid { grid-template-columns:1fr 1fr; gap:24px; } }
@media (max-width:600px){ .product-grid { grid-template-columns:1fr; } }

/* WHY GRID */
.why-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:32px; }
.why-grid h4 { font-family:'Cormorant Garamond', serif; font-size:1.25rem; margin-bottom:10px; color:var(--ink-noir); }
.why-grid p { font-size:.9375rem; line-height:1.6; color:var(--ink-graphite); }
@media (max-width:900px){ .why-grid { grid-template-columns:1fr 1fr; gap:24px; } }
@media (max-width:600px){ .why-grid { grid-template-columns:1fr; } }

/* COMPARE (lab vs natural) */
.compare-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px; max-width:880px; margin:0 auto; }
.compare-card { background:var(--canvas-pure); padding:32px; border:1px solid var(--line-hair); }
.compare-card h3 { font-family:'Cormorant Garamond', serif; font-size:1.5rem; margin-bottom:6px; }
.compare-tag { font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-shadow); margin-bottom:20px; }
.compare-list { list-style:none; padding:0; margin:0 0 28px; }
.compare-list li { padding:8px 0; border-bottom:1px solid var(--line-hair); font-size:.9375rem; color:var(--ink-graphite); }
.compare-list li:last-child { border-bottom:0; }
.compare-note { text-align:center; margin-top:32px; color:var(--ink-shadow); font-size:.9375rem; }
@media (max-width:768px){ .compare-grid { grid-template-columns:1fr; } }

/* 4Cs */
.four-cs-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; }
.four-cs-grid > div { padding:24px; background:var(--canvas-snow); }
.four-cs-grid strong { display:block; font-family:'Cormorant Garamond', serif; font-size:1.75rem; color:var(--ink-noir); margin-bottom:10px; }
.four-cs-grid p { font-size:.875rem; line-height:1.6; color:var(--ink-graphite); }
.four-cs-grid a { color:var(--accent-champagne); display:block; margin-top:8px; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; }
@media (max-width:900px){ .four-cs-grid { grid-template-columns:1fr 1fr; } }

/* GEMSTONE CARDS */
.gem-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:32px; }
.gem-card { background:var(--canvas-snow); padding:32px; }
.gem-card h3 { font-family:'Cormorant Garamond', serif; font-size:1.5rem; margin-bottom:6px; }
.gem-meta { font-size:.6875rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-shadow); margin-bottom:14px; }
.gem-card p { font-size:.9375rem; line-height:1.6; color:var(--ink-graphite); }
@media (max-width:900px){ .gem-grid { grid-template-columns:1fr; } }

/* EDUCATION CARDS */
.edu-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:32px; }
.edu-card { display:block; padding:32px; border:1px solid var(--line-hair); background:var(--canvas-pure); transition:all 220ms ease; }
.edu-card:hover { border-color:var(--ink-noir); transform:translateY(-2px); }
.edu-card h3 { font-family:'Cormorant Garamond', serif; font-size:1.375rem; margin:6px 0 10px; color:var(--ink-noir); }
.edu-card p { font-size:.9375rem; line-height:1.6; color:var(--ink-graphite); }
@media (max-width:900px){ .edu-grid { grid-template-columns:1fr 1fr; gap:24px; } }
@media (max-width:600px){ .edu-grid { grid-template-columns:1fr; } }

/* CONTACT */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; }
.contact-info h2 { margin-bottom:24px; }
.contact-line { margin-bottom:14px; line-height:1.6; color:var(--ink-graphite); }
.contact-info h3 { font-family:'Cormorant Garamond', serif; font-size:1.25rem; color:var(--ink-noir); margin-bottom:12px; }
.contact-list { list-style:none; padding:0; }
.contact-list li { padding:10px 0; border-bottom:1px solid var(--line-hair); font-size:.9375rem; color:var(--ink-graphite); }
.contact-form label { display:block; margin-bottom:20px; font-size:.8125rem; color:var(--ink-noir); }
.contact-form input, .contact-form select, .contact-form textarea { display:block; width:100%; padding:12px; border:1px solid var(--line-hair); background:var(--canvas-pure); margin-top:6px; font-family:inherit; font-size:.9375rem; }
.contact-form button { margin-top:8px; }
.form-note { margin-top:16px; font-size:.75rem; color:var(--ink-shadow); }
@media (max-width:768px){ .contact-grid { grid-template-columns:1fr; gap:48px; } }
.mt-8 { margin-top:32px; }
.mt-3 { margin-top:12px; }

/* POLICIES */
.policy-toc { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:48px; padding:16px; background:var(--canvas-snow); }
.policy-toc a { font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; padding:6px 12px; background:var(--canvas-pure); border:1px solid var(--line-hair); color:var(--ink-noir); }
.policy-toc a:hover { background:var(--ink-noir); color:var(--ink-invert); }
.policy-section { margin-bottom:48px; padding-top:24px; border-top:1px solid var(--line-hair); }
.policy-section h2 { font-family:'Cormorant Garamond', serif; font-size:1.75rem; margin-bottom:18px; color:var(--ink-noir); }
.policy-section p, .policy-section ul { line-height:1.65; color:var(--ink-graphite); margin-bottom:14px; font-size:.9375rem; }
.policy-section ul li { padding:6px 0 6px 24px; position:relative; }
.policy-section ul li::before { content:'·'; position:absolute; left:8px; font-weight:bold; color:var(--ink-noir); }

/* DIRECTIONS GRID (Contact) */
.directions-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; }
.directions-grid h4 { font-family:'Cormorant Garamond', serif; font-size:1.125rem; margin-bottom:8px; color:var(--ink-noir); }
.directions-grid p { font-size:.875rem; line-height:1.55; color:var(--ink-graphite); }
@media (max-width:900px){ .directions-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .directions-grid { grid-template-columns:1fr; } }

/* CAT TILES (jewelry, generic categories) */
.cat-tile { display:block; text-decoration:none; transition:transform 220ms ease; }
.cat-tile:hover { transform:translateY(-2px); }
.cat-tile-img { aspect-ratio:4/3; overflow:hidden; margin-bottom:14px; background:var(--canvas-snow); }
.cat-tile-img img { width:100%; height:100%; object-fit:cover; }
.cat-tile h3 { font-family:'Cormorant Garamond', serif; font-size:1.25rem; color:var(--ink-noir); }
.cat-tile:has(h3:only-child) { padding:32px; background:var(--canvas-snow); text-align:center; }
.cat-tile:has(h3:only-child) h3 { margin:0; }


/* ==========================================================
   STYLE RAIL (Brilliant Earth pattern — horizontal at top of PLP)
   ========================================================== */
.style-rail-section { padding:32px 0 24px; border-bottom:1px solid var(--line-hair); }
.style-rail-scroller {
  display:flex; gap:24px; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding-bottom:8px;
  scrollbar-width:thin;
}
.style-rail-scroller::-webkit-scrollbar { height:4px; }
.style-rail-scroller::-webkit-scrollbar-thumb { background:var(--line-strong); border-radius:2px; }
.style-rail-tile {
  flex:0 0 auto; width:110px;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  text-decoration:none;
  scroll-snap-align:start;
  transition:transform 220ms ease;
}
.style-rail-tile:hover { transform:translateY(-2px); }
.style-rail-img {
  width:110px; height:110px;
  background:var(--canvas-snow); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  border-radius:0;
}
.style-rail-img img { width:100%; height:100%; object-fit:cover; transition:transform 320ms ease; }
.style-rail-tile:hover .style-rail-img img { transform:scale(1.08); }
/* Diamond-shape PNGs (transparent) on the diamonds page get padding instead of filling */
[data-shape-tile] .style-rail-img img,
.style-rail-img img[src*="_medium.png"] { object-fit:contain; width:78%; height:78%; }
.style-rail-label {
  font-size:.75rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-noir); text-align:center;
  line-height:1.2;
  font-weight:500;
}
@media (max-width:600px){
  .style-rail-tile { width:88px; }
  .style-rail-img { width:88px; height:88px; }
  .style-rail-label { font-size:.6875rem; }
}

/* ==========================================================
   PLP TOOLBAR (Filters button + sort dropdown)
   ========================================================== */
.plp-toolbar-bar { border-bottom:1px solid var(--line-hair); background:var(--canvas-pure); padding:16px 0; }
.plp-toolbar-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.filter-btn {
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 18px;
  background:var(--ink-noir); color:var(--ink-invert);
  border:0; cursor:pointer;
  font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  transition:background 220ms ease;
}
.filter-btn:hover { background:#000; }
.plp-results-count { font-size:.8125rem; color:var(--ink-shadow); }
.plp-sort-wrap { display:flex; align-items:center; gap:10px; }
.plp-sort-wrap label { font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-shadow); }
.plp-sort {
  border:1px solid var(--line-hair); padding:8px 14px;
  background:var(--canvas-pure); font-size:.8125rem;
  font-family:inherit; color:var(--ink-noir); cursor:pointer;
}
@media (max-width:600px){
  .plp-toolbar-inner { gap:8px; }
  .plp-results-count { display:none; }
  .filter-btn { padding:8px 14px; font-size:.6875rem; }
  .plp-sort { font-size:.75rem; padding:6px 10px; }
}

/* ==========================================================
   FILTER DRAWER (slides in from right)
   ========================================================== */
.filter-drawer {
  position:fixed; top:0; right:0; bottom:0;
  width:min(420px, 100vw);
  background:var(--canvas-pure);
  z-index:90;
  transform:translateX(100%);
  transition:transform 320ms cubic-bezier(.4, 0, .2, 1);
  display:flex; flex-direction:column;
  box-shadow:-12px 0 32px rgba(20,20,20,.12);
}
.filter-drawer.open { transform:translateX(0); }
.filter-backdrop {
  position:fixed; inset:0;
  background:rgba(20,20,20,.32);
  z-index:89;
  opacity:0; visibility:hidden;
  transition:opacity 320ms ease, visibility 320ms ease;
}
.filter-backdrop.open { opacity:1; visibility:visible; }
.filter-drawer-inner { display:flex; flex-direction:column; height:100%; }
.filter-drawer-head {
  display:flex; justify-content:space-between; align-items:center;
  padding:24px 28px; border-bottom:1px solid var(--line-hair);
}
.filter-drawer-head h3 { font-family:'Cormorant Garamond', serif; font-size:1.5rem; margin:0; }
.filter-drawer-actions { display:flex; gap:14px; align-items:center; }
.filter-reset { background:transparent; border:0; cursor:pointer; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-graphite); padding:6px 8px; }
.filter-reset:hover { color:var(--ink-noir); }
.filter-close { background:transparent; border:0; cursor:pointer; padding:6px; color:var(--ink-noir); }

.filter-drawer-body { flex:1; overflow-y:auto; padding:8px 28px 28px; }
.filter-section { padding:20px 0; border-bottom:1px solid var(--line-hair); }
.filter-section summary {
  list-style:none; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center;
  font-size:.8125rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  color:var(--ink-noir);
}
.filter-section summary::after { content:'−'; font-size:1.25rem; font-weight:300; transition:transform 220ms ease; }
.filter-section:not([open]) summary::after { content:'+'; }
.filter-section summary::-webkit-details-marker { display:none; }
.filter-checks { list-style:none; padding:0; margin:16px 0 0; }
.filter-checks li { padding:8px 0; }
.filter-checks label { display:flex; align-items:center; gap:10px; cursor:pointer; font-size:.9375rem; color:var(--ink-graphite); }
.filter-checks input[type="checkbox"] { accent-color:var(--ink-noir); width:16px; height:16px; cursor:pointer; }
.filter-checks label:hover { color:var(--ink-noir); }
.filter-range { display:flex; gap:12px; margin-top:16px; }
.filter-range label { flex:1; display:block; font-size:.75rem; color:var(--ink-shadow); }
.filter-range input { display:block; width:100%; margin-top:4px; padding:10px; border:1px solid var(--line-hair); background:var(--canvas-pure); font-size:.9375rem; font-family:inherit; }

.filter-drawer-foot {
  padding:20px 28px; border-top:1px solid var(--line-hair);
  background:var(--canvas-pure);
}
.filter-drawer-foot .btn { width:100%; }

/* ==========================================================
   GOOGLE REVIEWS (homepage bottom)
   ========================================================== */
.reviews-head {
  display:flex; justify-content:space-between; align-items:flex-end; gap:32px;
  margin-bottom:48px; flex-wrap:wrap;
}
.reviews-summary { text-align:right; display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
.reviews-stars { display:inline-flex; gap:3px; }
.reviews-meta { font-size:.9375rem; color:var(--ink-graphite); }
.reviews-meta strong { color:var(--ink-noir); }
.reviews-google {
  display:inline-flex; align-items:center; gap:6px;
  font-size:.75rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-noir); border-bottom:1px solid var(--ink-noir); padding-bottom:2px;
}
.reviews-google:hover { color:var(--accent-champagne); border-color:var(--accent-champagne); }

.reviews-grid {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;
}
.review-card {
  background:var(--canvas-snow); padding:28px;
  display:flex; flex-direction:column; gap:14px;
  border:1px solid var(--line-hair);
}
.review-stars { color:#E5A845; font-size:.9375rem; letter-spacing:.04em; }
.review-text { font-size:.9375rem; line-height:1.6; color:var(--ink-graphite); margin:0; flex:1; }
.review-author { font-size:.8125rem; margin:0; }
.review-author strong { color:var(--ink-noir); display:block; }
.review-author span { color:var(--ink-shadow); font-size:.75rem; }
.reviews-cta { text-align:center; margin-top:40px; }
@media (max-width:900px){
  .reviews-grid { grid-template-columns:1fr 1fr; }
  .reviews-head { flex-direction:column; align-items:flex-start; }
  .reviews-summary { text-align:left; align-items:flex-start; }
}
@media (max-width:600px){
  .reviews-grid { grid-template-columns:1fr; }
}

/* ==========================================================
   INSTAGRAM GRID (homepage bottom)
   ========================================================== */
.ig-head { text-align:center; margin-bottom:40px; }
.ig-head h2 a { color:var(--accent-champagne); border-bottom:1px solid var(--accent-champagne); padding-bottom:2px; }
.ig-head h2 a:hover { color:var(--ink-noir); border-color:var(--ink-noir); }
.ig-head .lede { font-size:1rem; color:var(--ink-graphite); margin-top:12px; max-width:520px; margin-left:auto; margin-right:auto; }

.ig-grid {
  display:grid; grid-template-columns:repeat(6, 1fr); gap:4px;
}
.ig-tile {
  position:relative; aspect-ratio:1; overflow:hidden; background:var(--canvas-snow);
  display:block;
}
.ig-tile img {
  width:100%; height:100%; object-fit:cover;
  transition:transform 480ms ease, opacity 220ms ease;
}
.ig-overlay {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(20,20,20,.4);
  color:#fff;
  opacity:0; transition:opacity 220ms ease;
}
.ig-tile:hover img { transform:scale(1.06); }
.ig-tile:hover .ig-overlay { opacity:1; }

.ig-cta { text-align:center; margin-top:40px; }
@media (max-width:900px){ .ig-grid { grid-template-columns:repeat(3, 1fr); } }
@media (max-width:480px){ .ig-grid { grid-template-columns:repeat(2, 1fr); } }

/* ==========================================================
   DIAMOND SEARCH (Brilliant Earth pattern on customizer step 2)
   ========================================================== */

/* Natural / Lab toggle */
.diamond-type-toggle {
  display:inline-flex; gap:0; margin-top:24px;
  border:1px solid var(--line-strong); border-radius:999px;
  overflow:hidden;
}
.diamond-type-pill {
  background:transparent; border:0; padding:10px 28px; cursor:pointer;
  font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  color:var(--ink-graphite);
  transition:background 220ms ease, color 220ms ease;
}
.diamond-type-pill.active { background:var(--ink-noir); color:var(--ink-invert); }

/* Shape rail */
.diamond-shape-rail { padding:24px 0; border-bottom:1px solid var(--line-hair); background:var(--canvas-pure); }
.dshape-scroller {
  display:flex; gap:18px; overflow-x:auto; padding-bottom:6px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
}
.dshape-tile {
  flex:0 0 auto; width:90px;
  background:transparent; border:0; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  scroll-snap-align:start;
  padding:8px 4px;
  position:relative;
  transition:transform 180ms ease;
}
.dshape-tile:hover { transform:translateY(-2px); }
.dshape-tile img {
  width:64px; height:64px; object-fit:contain; opacity:.55;
  transition:opacity 220ms ease;
}
.dshape-tile span {
  font-size:.6875rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-graphite); font-weight:500;
}
.dshape-tile.selected img { opacity:1; }
.dshape-tile.selected span { color:var(--ink-noir); }
.dshape-tile.selected::after {
  content:''; position:absolute; bottom:-2px; left:50%; transform:translateX(-50%);
  width:36px; height:2px; background:var(--ink-noir);
}

/* Filter panel */
.diamond-filter-panel { padding:36px 0 28px; background:var(--canvas-snow); border-bottom:1px solid var(--line-hair); }
.dfilter-grid {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:32px 48px;
}
@media (max-width:900px){ .dfilter-grid { grid-template-columns:1fr 1fr; gap:24px; } }
@media (max-width:600px){ .dfilter-grid { grid-template-columns:1fr; } }

.dfilter-block { display:flex; flex-direction:column; gap:10px; }
.dfilter-head { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.dfilter-head h3 {
  font-family:'Inter', sans-serif; font-size:.75rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-noir); margin:0;
}
.dfilter-val { font-size:.75rem; color:var(--ink-shadow); }

/* Pill row */
.dfilter-pills { display:flex; gap:6px; flex-wrap:wrap; }
.dpill {
  background:var(--canvas-pure); border:1px solid var(--line-hair);
  color:var(--ink-graphite); padding:8px 14px; cursor:pointer;
  font-size:.75rem; letter-spacing:.04em; font-weight:500;
  transition:all 180ms ease;
  min-width:40px; text-align:center;
}
.dpill:hover { border-color:var(--line-strong); color:var(--ink-noir); }
.dpill.selected { background:var(--ink-noir); color:var(--ink-invert); border-color:var(--ink-noir); }
.dfilter-pills-grade .dpill { min-width:42px; padding:8px 10px; font-family:'Inter', sans-serif; }

/* Range slider */
.range-wrap { position:relative; height:32px; }
.range-track { position:absolute; top:50%; left:0; right:0; height:2px; background:var(--line-hair); transform:translateY(-50%); border-radius:2px; }
.range-fill { position:absolute; top:0; bottom:0; background:var(--ink-noir); border-radius:2px; }
.range-wrap input[type="range"] {
  position:absolute; top:0; left:0; right:0;
  width:100%; height:32px; background:transparent;
  pointer-events:none; -webkit-appearance:none; appearance:none;
  margin:0;
}
.range-wrap input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; border-radius:50%;
  background:var(--canvas-pure); border:2px solid var(--ink-noir);
  cursor:pointer; pointer-events:auto;
  box-shadow:0 1px 4px rgba(0,0,0,.18);
}
.range-wrap input[type="range"]::-moz-range-thumb {
  width:18px; height:18px; border-radius:50%;
  background:var(--canvas-pure); border:2px solid var(--ink-noir);
  cursor:pointer; pointer-events:auto;
  box-shadow:0 1px 4px rgba(0,0,0,.18);
}
.range-labels { display:flex; justify-content:space-between; font-size:.6875rem; color:var(--ink-shadow); letter-spacing:.08em; text-transform:uppercase; }

.range-row { display:flex; gap:8px; }
.range-row label { flex:1; display:block; font-size:.6875rem; color:var(--ink-shadow); letter-spacing:.06em; text-transform:uppercase; }
.range-row input { display:block; width:100%; margin-top:4px; padding:8px; border:1px solid var(--line-hair); background:var(--canvas-pure); font-family:'Inter', sans-serif; font-size:.875rem; }

/* Advanced details */
.dfilter-advanced { margin-top:28px; padding-top:24px; border-top:1px dashed var(--line-hair); }
.dfilter-advanced summary {
  list-style:none; cursor:pointer;
  font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  color:var(--ink-noir); padding:6px 0;
  display:inline-flex; align-items:center; gap:8px;
}
.dfilter-advanced summary::-webkit-details-marker { display:none; }
.dfilter-advanced .caret { transition:transform 220ms ease; display:inline-block; }
.dfilter-advanced[open] .caret { transform:rotate(180deg); }
.dfilter-advanced > .dfilter-grid { margin-top:24px; }

/* Filter toolbar (reset + count + sort) */
.dfilter-toolbar {
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding-top:28px; margin-top:32px; border-top:1px solid var(--line-hair);
  flex-wrap:wrap;
}
.dfilter-reset {
  background:transparent; border:0; cursor:pointer;
  font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-graphite);
  padding:6px 8px;
}
.dfilter-reset:hover { color:var(--ink-noir); }
.dfilter-count { font-size:.875rem; color:var(--ink-noir); }
.dfilter-count strong { font-weight:600; }
.dfilter-sort { display:flex; align-items:center; gap:10px; }
.dfilter-sort label { font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-shadow); }
.dfilter-sort select {
  padding:8px 14px; border:1px solid var(--line-hair); background:var(--canvas-pure);
  font-family:'Inter', sans-serif; font-size:.8125rem; cursor:pointer; color:var(--ink-noir);
}

/* ==========================================================
   LAB-GROWN EMPHASIS (diamonds.html)
   ========================================================== */
.lab-emphasis {
  display:grid; grid-template-columns:1fr 1fr; gap:32px;
  max-width:1000px; margin:0 auto;
}
.lab-emphasis-card {
  background:var(--canvas-pure); padding:32px; border:1px solid var(--line-hair);
}
.lab-emphasis-card h3 {
  font-family:'Cormorant Garamond', serif; font-size:1.375rem;
  color:var(--ink-noir); margin-bottom:12px; line-height:1.25;
}
.lab-emphasis-card p { font-size:.9375rem; line-height:1.65; color:var(--ink-graphite); margin:0; }
@media (max-width:768px){ .lab-emphasis { grid-template-columns:1fr; gap:20px; max-width:560px; } }

/* Post notice banner */
.post-notice {
  background:var(--canvas-snow); border-left:3px solid var(--accent-champagne);
  padding:20px 24px; margin:32px 0;
}
.post-notice p { font-size:.9375rem; line-height:1.55; margin:0; color:var(--ink-noir); }
.post-notice a { color:var(--accent-champagne); border-bottom:1px solid var(--accent-champagne); }

/* ==========================================================
   PAGE HERO WITH BANNER IMAGE
   ========================================================== */
.hero-with-image {
  display:flex; align-items:center;
  position:relative;
  border-bottom:1px solid var(--line-hair);
  padding:80px 0 64px;
}
.hero-with-image .container { position:relative; z-index:1; }
.hero-with-image .breadcrumb { color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.6); }
.hero-with-image .breadcrumb a { color:#fff; }
.hero-with-image h1 { color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.75), 0 1px 2px rgba(0,0,0,.9); max-width:640px; }
.hero-with-image .lede { color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.7); max-width:560px; }
@media (max-width:768px){ .hero-with-image { min-height:320px !important; padding:48px 0 40px; } }

/* ==========================================================
   JOURNAL — Brilliant Earth-style guide directory
   ========================================================== */

/* Breadcrumb */
.guide-breadcrumb {
  padding:24px 48px 16px;
  font-size:.8125rem;
  color:var(--ink-shadow);
  letter-spacing:.04em;
}
.guide-breadcrumb a { color:var(--ink-shadow); text-decoration:none; }
.guide-breadcrumb a:hover { color:var(--ink-noir); }
.guide-breadcrumb .sep { margin:0 8px; }
.guide-breadcrumb .current { color:var(--ink-noir); }

/* Hero featured */
.guide-hero {
  width:100%;
  max-width:1600px;
  margin:0 auto 64px;
  padding:0 48px;
}
.guide-hero-link {
  display:block;
  position:relative;
  width:100%;
  aspect-ratio:21/9;
  overflow:hidden;
  background:var(--canvas-snow);
  text-decoration:none;
}
.guide-hero-img { position:absolute; inset:0; }
.guide-hero-img img {
  width:100%; height:100%; object-fit:cover;
  transition:transform 600ms ease-in-out;
}
.guide-hero-link:hover .guide-hero-img img { transform:scale(1.03); }
.guide-hero-overlay {
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  text-align:left; padding:48px 48px 48px 64px;
  background:linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0) 70%);
}
.guide-hero-overlay h2 {
  font-family:'Cormorant Garamond', serif;
  font-size:clamp(2rem, 4vw, 3.5rem);
  color:#fff; font-weight:400; line-height:1.1;
  text-shadow:0 2px 12px rgba(0,0,0,.4);
  max-width:760px;
  margin:0;
}
.guide-hero-overlay .learn-more {
  margin-top:24px;
  font-size:.875rem; letter-spacing:.16em; text-transform:uppercase;
  color:#fff; font-weight:500;
  border-bottom:1px solid #fff;
  padding-bottom:4px;
}
@media (max-width:768px){
  .guide-hero { padding:0 16px; margin-bottom:40px; }
  .guide-hero-link { aspect-ratio:4/3; }
  .guide-hero-overlay h2 { font-size:1.625rem; }
}

/* Section headlines (H2) */
.guide-section-h2 {
  font-family:'Cormorant Garamond', serif;
  font-size:2.25rem; font-weight:400; line-height:1.15;
  color:var(--ink-noir);
  text-align:center;
  margin-bottom:40px;
}
@media (max-width:768px){ .guide-section-h2 { font-size:1.625rem; margin-bottom:28px; } }

/* 4-card image+headline grid */
.guide-grid {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:32px;
  margin-bottom:48px;
}
.guide-card {
  display:flex; flex-direction:column;
  text-decoration:none;
  color:var(--ink-noir);
}
.guide-card-img {
  width:100%;
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--canvas-snow);
  margin-bottom:16px;
}
.guide-card-img img {
  width:100%; height:100%; object-fit:cover;
  transition:transform 480ms ease-in-out;
}
.guide-card:hover .guide-card-img img { transform:scale(1.04); }
.guide-card h4 {
  font-family:'Cormorant Garamond', serif;
  font-size:1.25rem; line-height:1.25;
  font-weight:400;
  color:var(--ink-noir);
  margin:0; text-align:center;
  padding:0 12px;
}
.guide-card:hover h4 { color:var(--accent-champagne); }
@media (max-width:900px){ .guide-grid { grid-template-columns:1fr 1fr; gap:24px; } }
@media (max-width:480px){ .guide-grid { grid-template-columns:1fr 1fr; gap:16px; } .guide-card h4 { font-size:1rem; } }

/* Explore More text-link list */
.explore-more {
  max-width:1100px;
  margin:48px auto 0;
  padding:32px 24px 0;
  border-top:1px solid var(--line-hair);
}
.explore-more.no-margin { margin-top:0; padding-top:0; border-top:0; }
.explore-more h3 {
  font-family:'Cormorant Garamond', serif;
  font-size:1.5rem; font-weight:400;
  color:var(--ink-noir);
  text-align:center;
  margin-bottom:24px;
}
.explore-list {
  list-style:none; padding:0;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px 32px;
  max-width:900px; margin:0 auto;
}
.explore-list.two-col { grid-template-columns:repeat(2, 1fr); }
.explore-list li {
  padding:8px 0;
  border-bottom:1px solid var(--line-hair);
}
.explore-list a {
  font-size:.9375rem;
  color:var(--ink-graphite);
  text-decoration:none;
}
.explore-list a:hover { color:var(--accent-champagne); }
@media (max-width:768px){
  .explore-list { grid-template-columns:1fr; gap:0; }
  .explore-list.two-col { grid-template-columns:1fr; }
}

.mx-auto { margin-left:auto; margin-right:auto; }

/* ==========================================================
   SHOP BY DIAMOND SHAPE — preview-swap on hover (BE style)
   ========================================================== */
.shape-explorer {
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:40px;
  align-items:start;
  max-width:1200px;
  margin:0 auto;
}
.shape-preview {
  display:block;
  position:relative;
  width:100%;
  aspect-ratio:1;
  overflow:hidden;
  background:var(--canvas-pure);
  text-decoration:none;
}
.shape-preview img {
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:opacity 280ms ease;
}
.shape-preview-cta {
  position:absolute; left:50%; bottom:24px;
  transform:translateX(-50%);
  background:rgba(20,20,20,.85);
  color:var(--ink-invert);
  padding:12px 28px;
  font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  opacity:0; transition:opacity 220ms ease;
  white-space:nowrap;
}
.shape-preview:hover .shape-preview-cta { opacity:1; }

.shape-explorer-rail {
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:14px;
  align-content:start;
}
.shape-explorer-tile {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:14px 6px;
  background:transparent;
  border:1px solid transparent;
  text-decoration:none;
  cursor:pointer;
  transition:all 220ms ease;
}
.shape-explorer-tile img {
  width:54px; height:54px;
  object-fit:contain;
  opacity:.55;
  transition:opacity 220ms ease, transform 220ms ease;
}
.shape-explorer-tile span {
  font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-graphite); font-weight:500;
}
.shape-explorer-tile:hover img,
.shape-explorer-tile.active img { opacity:1; transform:scale(1.08); }
.shape-explorer-tile:hover span,
.shape-explorer-tile.active span { color:var(--ink-noir); }
.shape-explorer-tile.active { border-color:var(--ink-noir); background:var(--canvas-pure); }

@media (max-width:768px){
  .shape-explorer { grid-template-columns:1fr; gap:24px; max-width:520px; }
  .shape-explorer-rail { grid-template-columns:repeat(5,1fr); gap:8px; }
  .shape-explorer-tile img { width:42px; height:42px; }
  .shape-preview-cta { font-size:.625rem; padding:10px 18px; }
}
@media (max-width:480px){
  .shape-explorer-rail { grid-template-columns:repeat(5, 1fr); }
}

/* ==========================================================
   SHOP DIAMONDS BY SHAPE — Brilliant Earth proportions
   Single row, 10 shapes, top-down silhouette icons, image above label
   ========================================================== */
.shop-shapes-h2 {
  font-family:'Cormorant Garamond', serif;
  font-size:2.25rem; font-weight:400; line-height:1.1;
  color:var(--ink-noir);
  margin-bottom:48px;
}
@media (max-width:768px){ .shop-shapes-h2 { font-size:1.625rem; margin-bottom:28px; } }

.be-shape-row {
  display:grid;
  grid-template-columns:repeat(10, 1fr);
  gap:12px;
  max-width:1100px;
  margin:0 auto;
  align-items:end;
}
.be-shape-tile {
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:8px 0;
  text-decoration:none;
  transition:transform 220ms ease;
}
.be-shape-tile img {
  width:80px; height:80px;
  object-fit:contain;
  display:block;
  transition:transform 220ms ease;
}
.be-shape-tile span {
  font-size:.75rem;
  letter-spacing:.04em;
  color:var(--ink-noir);
  font-weight:400;
  text-align:center;
  line-height:1.2;
}
.be-shape-tile:hover img { transform:scale(1.08); }
.be-shape-tile:hover span { color:var(--accent-champagne); }

@media (max-width:900px){
  .be-shape-row { grid-template-columns:repeat(5, 1fr); gap:20px 12px; }
  .be-shape-tile img { width:72px; height:72px; }
}
@media (max-width:480px){
  .be-shape-row { grid-template-columns:repeat(5, 1fr); gap:16px 4px; }
  .be-shape-tile img { width:54px; height:54px; }
  .be-shape-tile span { font-size:.6875rem; }
}

/* ==========================================================
   WATCHES PAGE — left-aligned hero, no overlay, bigger filter tiles,
   taller product cards so the full watch + strap is visible
   ========================================================== */

/* Hero — image fills the right side, copy sits on the left with no overlay */
.watches-hero {
  position:relative;
  width:100%;
  min-height:520px;
  background:var(--canvas-snow);
  overflow:hidden;
}
.watches-hero-bg {
  position:absolute; inset:0;
  z-index:0;
}
.watches-hero-bg img {
  width:100%; height:100%;
  object-fit:cover;
  object-position:right center;
  display:block;
}
.watches-hero-inner {
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  min-height:520px;
  padding:64px 0;
  max-width:none;
  padding-left:0;
}
.watches-hero-copy {
  background:transparent;
  padding:0;
  max-width:520px;
  margin-left:48px;
  text-shadow:0 2px 8px rgba(0,0,0,.7), 0 1px 2px rgba(0,0,0,.85);
}
.watches-hero-copy .breadcrumb {
  font-size:.75rem;
  letter-spacing:.06em;
  color:rgba(255,255,255,.85);
  margin-bottom:18px;
}
.watches-hero-copy .breadcrumb a { color:rgba(255,255,255,.85); }
.watches-hero-copy .breadcrumb .current { color:#fff; }
.watches-hero-copy .eyebrow { color:var(--accent-champagne); font-weight:600; }
.watches-hero-copy h1 {
  color:#fff;
  margin-top:14px;
  font-size:2.75rem;
  line-height:1.1;
  font-weight:500;
}
.watches-hero-copy .lede {
  color:#fff;
  margin-top:16px;
  font-size:1rem;
  line-height:1.55;
  font-weight:500;
}
.watches-hero-copy .hero-ctas {
  display:flex; gap:12px; margin-top:28px; flex-wrap:wrap;
}
@media (max-width:900px){
  .watches-hero { min-height:auto; }
  .watches-hero-bg img { object-position:center; }
  .watches-hero-inner { padding:32px 0; min-height:auto; }
  .watches-hero-copy { margin-left:16px; margin-right:16px; padding:28px 24px; max-width:none; }
  .watches-hero-copy h1 { font-size:1.875rem; }
}

/* Bigger filter tiles on the watches page — show the actual watch */
.watches.html .style-rail-tile,
.watches-bigger .style-rail-tile,
body.watches-page .style-rail-tile { /* fallback */ }

/* Simpler: page-scoped via attribute selector won't work without HTML attr,
   so target by being inside the watches.html style-rail by checking the
   neighborhood OR simply make the rule apply only when a wrapper class is present.
   Here we apply only on watches.html by adding rules and bumping the tile size. */
section[id="grid"] .style-rail-section .style-rail-tile { width:160px; }
section[id="grid"] .style-rail-section .style-rail-img {
  width:160px; height:160px;
  background:var(--canvas-snow);
  overflow:hidden;
}
section[id="grid"] .style-rail-section .style-rail-img img {
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
section[id="grid"] .style-rail-section .style-rail-label {
  margin-top:14px;
  font-size:.8125rem;
  font-weight:500;
  letter-spacing:.08em;
}
@media (max-width:768px){
  section[id="grid"] .style-rail-section .style-rail-tile { width:120px; }
  section[id="grid"] .style-rail-section .style-rail-img { width:120px; height:120px; }
}

/* Watch product cards — taller aspect so face + strap fit, just like
   gallojewelry.com/collections/bulova does. Page-scoped to the watches
   PLP only so engagement/jewelry stay square. */
body[data-page="watches"] .product-img,
section[id="grid"] + script,
.product-grid.watches-grid .product-img {
  aspect-ratio:3/4;
}
/* Without modifying HTML, scope by being inside the watches PLP product-grid
   that has 4+ cards whose handles start with bulova- or sfj/seiko */
PYEOF
echo "interim CSS written"

/* ----- WATCHES PAGE: scoped via [data-page="watches"] ----- */
[data-page="watches"] .style-rail-tile { width:160px; }
[data-page="watches"] .style-rail-img {
  width:160px; height:160px;
  background:var(--canvas-snow);
  border-radius:0;
}
[data-page="watches"] .style-rail-img img {
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
[data-page="watches"] .style-rail-label {
  margin-top:14px;
  font-size:.8125rem;
  font-weight:500;
  letter-spacing:.08em;
}
@media (max-width:768px){
  [data-page="watches"] .style-rail-tile { width:120px; }
  [data-page="watches"] .style-rail-img { width:120px; height:120px; }
}

/* Taller watch product cards so the full watch (face + strap) is visible */
[data-page="watches"] .product-img {
  aspect-ratio:3/4;
  background:var(--canvas-pure);
}
[data-page="watches"] .product-img img {
  object-fit:contain;
  padding:14px;
}

/* Brand-page hero — high-contrast secondary button (Repair & Service) on dark imagery */
.watches-hero .hero-ctas .btn-secondary {
  background: rgba(255,255,255,.08);
  color: #fff;
  border-color: rgba(255,255,255,.65);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.watches-hero .hero-ctas .btn-secondary:hover {
  background: #fff;
  color: #1a1a1a;
  border-color: #fff;
}
/* Also brighten the primary button on dark hero for parity */
.watches-hero .hero-ctas .btn-primary {
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
}

/* Brand-page hero text overrides — white-on-dark gradient for legibility */
.hero-with-image .eyebrow { color: var(--accent-champagne); text-shadow:0 1px 4px rgba(0,0,0,.7); }
.hero-with-image .breadcrumb .current { color:#fff; }
.hero-with-image .breadcrumb .sep { color: rgba(255,255,255,.7); }
.hero-with-image .hero-ctas .btn-secondary {
  background: rgba(255,255,255,.10);
  color:#fff; border-color: rgba(255,255,255,.65);
}
.hero-with-image .hero-ctas .btn-secondary:hover {
  background:#fff; color:#1a1a1a; border-color:#fff;
}

/* Force page-hero copy block to the actual left edge of the screen */
.hero-with-image .container {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 96px;
  padding-right: 24px;
  width: 100%;
}
.hero-with-image .container > * {
  max-width: 640px;
}
@media (max-width: 768px) {
  .hero-with-image .container {
    padding-left: 24px;
    padding-right: 16px;
  }
}

/* ==========================================================
   JEWELRY PAGE — Brilliant Earth-style tile grid
   ========================================================== */
.be-crumb { padding:18px 0; background:var(--canvas-snow); border-bottom:1px solid var(--line-hair); font-size:.8125rem; }
.be-crumb a { color:var(--ink-shadow); text-decoration:none; }
.be-crumb a:hover { color:var(--ink-noir); }
.be-crumb .sep { margin:0 10px; color:var(--ink-shadow); }
.be-crumb .current { color:var(--ink-noir); }

/* Full-bleed hero */
.be-hero-full {
  position:relative; min-height:560px; display:flex; align-items:flex-end;
  padding:48px 0 64px;
  background-color:#2a241c;
}
.be-hero-full::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, transparent 50%, rgba(0,0,0,.55) 100%);
  pointer-events:none;
}
.be-hero-inner {
  position:relative; z-index:2;
  max-width:1280px; margin:0 auto; width:100%;
  padding:0 48px;
  color:#fff;
}
.be-hero-inner .eyebrow { color:rgba(255,255,255,.85); text-shadow:0 1px 4px rgba(0,0,0,.6); margin-bottom:14px; }
.be-hero-inner .be-hero-h1 {
  font-family:'Cormorant Garamond', serif;
  font-size:clamp(2.5rem, 5vw, 4.25rem);
  line-height:1.05; font-weight:400;
  color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.5);
  margin:0 0 28px;
  max-width:680px;
}
.be-hero-full .btn-light {
  background:#fff; color:#1a1a1a; border:1px solid #fff;
  padding:14px 32px; font-size:.8125rem; letter-spacing:.16em; text-transform:uppercase; font-weight:500;
}
.be-hero-full .btn-light:hover { background:transparent; color:#fff; }

/* Section heading centered */
.section-head.center { text-align:center; margin-bottom:48px; }
.section-head.center .display-md { color:var(--ink-noir); font-family:'Cormorant Garamond', serif; font-weight:400; font-size:clamp(1.75rem, 3vw, 2.5rem); }

/* 4-up category grid (Shop by Category) */
.be-cat-grid-4 {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;
}
@media (max-width:900px){ .be-cat-grid-4 { grid-template-columns:repeat(2, 1fr); } }
.be-cat-grid-3 {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;
}
@media (max-width:900px){ .be-cat-grid-3 { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px){ .be-cat-grid-3 { grid-template-columns:1fr; } }

/* Each tile: square image + label under it */
.be-cat-tile { display:block; text-decoration:none; color:inherit; }
.be-cat-img {
  width:100%; aspect-ratio:1/1; overflow:hidden;
  background:#f9f7f3;
}
.be-cat-img img {
  width:100%; height:100%; object-fit:cover;
  transition:transform 600ms ease-in-out;
}
.be-cat-tile:hover .be-cat-img img { transform:scale(1.03); }
.be-cat-tile h3 {
  margin:16px 0 0;
  font-family:'Cormorant Garamond', serif;
  font-size:1.25rem; font-weight:400;
  color:var(--ink-noir);
  text-align:center;
  letter-spacing:.02em;
}

/* Best Sellers row */
.be-bestseller-row {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;
}
@media (max-width:900px){ .be-bestseller-row { grid-template-columns:repeat(2, 1fr); } }
.be-bestseller {
  display:block; padding:24px 20px;
  background:var(--canvas-snow); border:1px solid var(--line-hair);
  font-family:'Cormorant Garamond', serif;
  font-size:1.125rem; color:var(--ink-noir); text-decoration:none;
  text-align:center;
  transition:background 200ms ease;
}
.be-bestseller:hover { background:#fff; }

/* Featured Collections — 3 stacked wide cards */
.be-feature-stack { display:flex; flex-direction:column; gap:32px; }
.be-feature-card {
  display:grid; grid-template-columns:1fr 1fr;
  background:#fff; border:1px solid var(--line-hair);
  text-decoration:none; color:inherit;
  overflow:hidden;
}
@media (max-width:768px){ .be-feature-card { grid-template-columns:1fr; } }
.be-feature-img { aspect-ratio:16/10; overflow:hidden; background:#f9f7f3; }
.be-feature-img img { width:100%; height:100%; object-fit:cover; transition:transform 600ms ease; }
.be-feature-card:hover .be-feature-img img { transform:scale(1.03); }
.be-feature-info { padding:48px; display:flex; flex-direction:column; justify-content:center; }
.be-feature-info h3 {
  font-family:'Cormorant Garamond', serif;
  font-size:2rem; font-weight:400; color:var(--ink-noir);
  margin:0 0 16px;
}
.be-feature-info p { color:var(--ink-shadow); margin:0 0 24px; line-height:1.55; }
.be-feature-info .cta-link {
  font-size:.8125rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-noir); font-weight:500;
  border-bottom:1px solid var(--ink-noir); padding-bottom:4px;
  align-self:flex-start;
}

/* Shop by Style — 5 tiles in a single row */
.be-cat-grid-5 {
  display:grid; grid-template-columns:repeat(5, 1fr); gap:20px;
}
@media (max-width:1100px){ .be-cat-grid-5 { grid-template-columns:repeat(3, 1fr); } }
@media (max-width:700px){  .be-cat-grid-5 { grid-template-columns:repeat(2, 1fr); } }

/* ==========================================================
   Filter options — icons, swatches, scroll indicator
   ========================================================== */
.fopt-icon, .fopt-swatch {
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; flex-shrink:0;
  margin-right:10px;
}
.fopt-icon svg { width:22px; height:22px; color:var(--ink-noir); }
.fopt-swatch {
  border-radius:50%;
  border:1px solid rgba(0,0,0,.15);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.4);
}
.fopt-label { flex:1; }
.filter-checks label {
  display:flex; align-items:center; gap:0;
}
/* Stone-Shape grid: 4 columns of icon tiles */
.fopt-grid {
  display:grid !important; grid-template-columns:repeat(4, 1fr); gap:10px;
  list-style:none; padding:0; margin:16px 0 0;
}
.fopt-grid li { padding:0 !important; }
.fopt-grid label {
  display:flex; flex-direction:column; align-items:center;
  padding:10px 4px; border:1px solid var(--line-hair);
  cursor:pointer; font-size:.75rem; text-align:center;
  background:var(--canvas-pure);
  transition:background 160ms ease, border-color 160ms ease;
}
.fopt-grid label:hover { background:var(--canvas-snow); border-color:var(--ink-noir); }
.fopt-grid input[type="checkbox"] { display:none; }
.fopt-grid input[type="checkbox"]:checked + .fopt-icon + .fopt-label {
  font-weight:600;
}
.fopt-grid input[type="checkbox"]:checked ~ * { /* nudge selected look */ }
.fopt-grid label:has(input:checked) {
  background:var(--ink-noir); color:#fff; border-color:var(--ink-noir);
}
.fopt-grid label:has(input:checked) .fopt-icon svg { color:#fff; }

/* Scroll-arrow indicator at the bottom of the filter drawer body */
.filter-drawer-body {
  position:relative;
}
.filter-drawer-body::after {
  content:""; position:sticky; bottom:0; left:0; right:0; display:block;
  height:48px; pointer-events:none;
  background:linear-gradient(to bottom, transparent, var(--canvas-pure) 80%);
  margin-top:-48px;
}
.filter-scroll-hint {
  position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
  width:32px; height:32px; border-radius:50%;
  background:var(--ink-noir); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.18);
  cursor:pointer; z-index:5;
  animation:scroll-bounce 1.6s ease-in-out infinite;
}
.filter-scroll-hint svg { width:14px; height:14px; }
@keyframes scroll-bounce {
  0%, 100% { transform:translateX(-50%) translateY(0); opacity:.85; }
  50%      { transform:translateX(-50%) translateY(4px); opacity:1; }
}
.filter-drawer.scrolled-bottom .filter-scroll-hint { opacity:0; pointer-events:none; transition:opacity 200ms ease; }

/* ==========================================================
   Filter — Category tiles (Brilliant Earth Type pattern)
   ========================================================== */
.filter-types {
  display:grid; grid-template-columns:repeat(2, 1fr); gap:10px;
  list-style:none; padding:0; margin:16px 0 0;
}
.filter-types li { padding:0 !important; }
.ftype-tile {
  display:flex; align-items:center; gap:12px;
  padding:8px 10px; border:1px solid var(--line-hair);
  background:var(--canvas-pure); text-decoration:none; color:var(--ink-noir);
  transition:background 160ms ease, border-color 160ms ease, transform 160ms ease;
  border-radius:2px;
}
.ftype-tile:hover { background:var(--canvas-snow); border-color:var(--ink-noir); transform:translateY(-1px); }
.ftype-tile[aria-current="page"] {
  background:var(--ink-noir); color:#fff; border-color:var(--ink-noir);
}
.ftype-thumb {
  width:42px; height:42px; flex-shrink:0;
  border-radius:50%; overflow:hidden;
  background:#f9f7f3;
}
.ftype-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.ftype-label {
  font-size:.8125rem; font-weight:500; letter-spacing:.02em;
  font-family:var(--font-sans);
}
@media (max-width:560px){
  .filter-types { grid-template-columns:1fr; }
}

/* ==========================================================
   Product card — metal color dots + hover image swap
   ========================================================== */
.product-card .card-metals {
  display:flex; gap:8px; justify-content:center;
  margin-top:8px;
}
.card-metal-dot {
  width:16px; height:16px; border-radius:50%;
  background:#e8e6e1;
  border:1.5px solid rgba(0,0,0,.18);
  padding:0; cursor:pointer;
  transition:transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.card-metal-dot[data-metal="yellow"] { background:linear-gradient(135deg,#f4d27a,#d6a743); }
.card-metal-dot[data-metal="white"]  { background:linear-gradient(135deg,#e8e6e1,#b7b3aa); }
.card-metal-dot[data-metal="rose"]   { background:linear-gradient(135deg,#f0c4b6,#c98a73); }

.card-metal-dot:hover,
.card-metal-dot.active {
  transform:scale(1.18);
  border-color:#1a1a1a;
  box-shadow:0 0 0 2px rgba(255,255,255,.9), 0 0 0 3px #1a1a1a;
}

/* Image tinting when hovering a metal dot.
   The :has selector lets the card know which dot is hovered, so the image
   filter changes without JavaScript. */
/* ==========================================================
   Product card — metal color dots + hover image swap (BE style)
   ========================================================== */
.product-card .card-metals,
.pcard .card-metals {
  display:flex; gap:6px; justify-content:flex-start; align-items:center;
  margin:10px 0 0;
  padding:0;
}
.card-metal-dot {
  width:13px; height:13px; border-radius:50%;
  padding:0; cursor:pointer;
  border:1px solid rgba(0,0,0,.25);
  position:relative;
  background:transparent;
  transition:box-shadow 180ms ease, transform 180ms ease;
}
.card-metal-dot[data-metal="yellow"] { background:#d8b25c; border-color:rgba(0,0,0,.3); }
.card-metal-dot[data-metal="white"]  { background:#dcdad4; border-color:rgba(0,0,0,.3); }
.card-metal-dot[data-metal="rose"]   { background:#d6a08a; border-color:rgba(0,0,0,.3); }
.card-metal-dot:hover,
.card-metal-dot.active {
  box-shadow:0 0 0 1.5px #fff, 0 0 0 2.5px #1a1a1a;
}
.card-metal-dot:focus { outline:none; box-shadow:0 0 0 1.5px #fff, 0 0 0 2.5px #1a1a1a; }

/* ==========================================================
   Split Hero — Wedding Bands her/him pattern (BE-style)
   ========================================================== */
.split-hero {
  display:grid; grid-template-columns:1fr 1fr;
  min-height:380px; max-height:440px; width:100%;
}
.split-hero-half {
  position:relative; display:block; overflow:hidden;
  text-decoration:none; color:inherit;
}
.split-hero-half img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 700ms ease;
}
.split-hero-half:hover img { transform:scale(1.04); }
.split-hero-half::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, transparent 40%, rgba(0,0,0,.55) 100%);
}
.split-hero-overlay {
  position:absolute; left:0; right:0; bottom:0;
  z-index:2; padding:32px 40px;
  color:#fff;
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
}
.split-hero-overlay .eyebrow {
  color:rgba(255,255,255,.85);
  text-shadow:0 1px 4px rgba(0,0,0,.6);
}
.split-hero-h1 {
  font-family:'Cormorant Garamond', serif;
  font-size:clamp(1.625rem, 3vw, 2.5rem);
  font-weight:400; line-height:1.1;
  color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.55);
  margin:0;
}
.split-hero .btn-light {
  background:#fff; color:#1a1a1a; border:1px solid #fff;
  padding:10px 22px; font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
}
.split-hero-half:hover .btn-light {
  background:transparent; color:#fff;
}
@media (max-width:768px){
  .split-hero { grid-template-columns:1fr; min-height:auto; }
  .split-hero-half { aspect-ratio:4/5; }
  .split-hero-overlay { padding:32px; }
}

/* ==========================================================
   Product Detail Page — star rating + reviews (compact one-row)
   ========================================================== */
.pdp-rating {
  display:flex; align-items:center; gap:10px;
  margin:8px 0 16px;
}
.pdp-stars { display:inline-flex; gap:2px; color:#d4a843; }
.pdp-rating-num { font-weight:500; color:var(--ink-noir); font-size:.875rem; }
.pdp-rating-count {
  font-size:.8125rem; color:var(--ink-shadow);
  text-decoration:underline; text-underline-offset:3px;
}
.pdp-rating-count:hover { color:var(--ink-noir); }

#reviews { padding:48px 0 56px; }
#reviews .container { max-width:1280px; }

/* Top header — summary stats side by side */
.reviews-head {
  display:grid;
  grid-template-columns:auto auto auto 1fr auto;
  align-items:center; gap:18px 24px;
  margin:18px 0 24px;
  padding:18px 22px;
  background:var(--canvas-snow);
  border:1px solid var(--line-hair);
  border-radius:2px;
}
.reviews-summary { display:contents; }
.reviews-summary .eyebrow { display:none; }
.reviews-big { display:flex; align-items:baseline; gap:10px; margin:0; }
.reviews-bignum { font-family:'Cormorant Garamond', serif; font-size:2.25rem; font-weight:500; line-height:1; color:var(--ink-noir); }
.reviews-bigmeta { display:flex; flex-direction:column; gap:2px; }
.reviews-bigmeta .pdp-stars svg { width:14px; height:14px; }
.reviews-count { font-size:.75rem; color:var(--ink-shadow); margin:0; }
.reviews-bars {
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:3px;
  min-width:160px;
}
.reviews-bars li {
  display:grid; grid-template-columns:24px 1fr 22px;
  align-items:center; gap:6px;
  font-size:.6875rem; color:var(--ink-shadow);
}
.reviews-bar { display:block; height:4px; background:var(--canvas-platinum); border-radius:2px; overflow:hidden; }
.reviews-bar-fill { display:block; height:100%; background:#d4a843; border-radius:2px; }
.reviews-bar-count { text-align:right; }
.reviews-head .btn { white-space:nowrap; padding:8px 16px; font-size:.6875rem; }

/* Single horizontal row of reviews */
.reviews-list {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
}
@media (max-width:1100px){ .reviews-list { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:600px){  .reviews-list { grid-template-columns:1fr; } }
.review-card {
  padding:16px;
  background:var(--canvas-pure);
  border:1px solid var(--line-hair);
  border-radius:2px;
}
.review-head { display:flex; flex-direction:column; gap:6px; margin-bottom:6px; }
.review-head .pdp-stars svg { width:11px; height:11px; }
.review-head h4 {
  font-family:'Cormorant Garamond', serif;
  font-size:.9375rem; font-weight:500;
  color:var(--ink-noir); margin:0; line-height:1.25;
}
.review-meta { font-size:.6875rem; color:var(--ink-shadow); margin:0 0 8px; letter-spacing:.02em; }
.review-meta strong { color:var(--ink-noir); font-weight:500; }
.review-body {
  font-size:.8125rem; line-height:1.55; color:var(--ink-graphite); margin:0;
  display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden;
}
.reviews-list + .btn { margin:20px auto 0; display:block; font-size:.6875rem; padding:10px 22px; }

/* NAP — visible local SEO block above the footer */
.nap-band {
  background: var(--canvas-snow);
  border-top: 1px solid var(--line-hair);
  border-bottom: 1px solid var(--line-hair);
  padding: 28px 0;
}
.nap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  font-size: .875rem;
}
@media (max-width: 700px) { .nap-grid { grid-template-columns: 1fr; gap: 18px; } }
.nap-eyebrow {
  margin: 0 0 6px;
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-shadow);
  font-weight: 500;
}
.nap-col p, .nap-col address {
  margin: 0;
  font-style: normal;
  line-height: 1.6;
  color: var(--ink-graphite);
}
.nap-col strong { color: var(--ink-noir); font-weight: 500; }
.nap-col a { color: var(--ink-noir); text-decoration: none; }
.nap-col a:hover { text-decoration: underline; }

/* ==========================================================
   Watch Product Page (watch-product.html)
   ========================================================== */
.watch-pdp-grid {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:56px;
}
@media (max-width:900px){ .watch-pdp-grid { grid-template-columns:1fr; gap:32px; } }

.watch-gallery-main {
  background:#f9f7f3;
  aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  border:1px solid var(--line-hair);
}
.watch-gallery-main img { width:88%; height:88%; object-fit:contain; }
.watch-gallery-thumbs {
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:12px;
}
.watch-thumb {
  background:#f9f7f3; border:1px solid var(--line-hair); padding:0;
  aspect-ratio:1/1; cursor:pointer; transition:border-color 160ms ease;
}
.watch-thumb img { width:100%; height:100%; object-fit:contain; }
.watch-thumb:hover { border-color:var(--ink-graphite); }
.watch-thumb.active { border-color:var(--ink-noir); border-width:2px; padding:0; }

.watch-info { padding-top:8px; }
.watch-pdp-title {
  font-family:'Cormorant Garamond', serif;
  font-size:2rem; font-weight:500; line-height:1.15;
  color:var(--ink-noir); margin:6px 0 6px;
}
.watch-pdp-ref {
  font-size:.8125rem; letter-spacing:.06em;
  color:var(--ink-shadow); margin:0 0 12px;
  font-family:'JetBrains Mono', monospace;
}
.watch-pdp-price {
  font-size:1.625rem; font-weight:500; color:var(--ink-noir);
  margin:20px 0 6px;
}
.watch-pdp-price-sub {
  font-size:.8125rem; color:var(--ink-shadow); margin:0 0 24px;
}
.watch-availability {
  display:flex; align-items:center; gap:10px;
  background:var(--canvas-snow); padding:12px 14px;
  border-left:3px solid #2a8d4e; margin-bottom:24px;
  font-size:.8125rem; color:var(--ink-graphite);
}
.watch-stock-dot {
  width:8px; height:8px; border-radius:50%; background:#2a8d4e;
  box-shadow:0 0 0 3px rgba(42,141,78,.18);
  display:inline-block;
}
.watch-actions { margin-bottom:32px; }
.watch-spec-block {
  border-top:1px solid var(--line-hair);
  padding:18px 0;
}
.watch-spec-block summary {
  font-family:'Cormorant Garamond', serif;
  font-size:1.125rem; font-weight:500; color:var(--ink-noir);
  cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; align-items:center;
}
.watch-spec-block summary::after {
  content:'+'; font-size:1.5rem; font-weight:300;
}
.watch-spec-block[open] summary::after { content:'\2212'; }
.watch-specs {
  width:100%; margin-top:14px; font-size:.875rem; border-collapse:collapse;
}
.watch-specs tr { border-bottom:1px solid var(--line-hair); }
.watch-specs td { padding:8px 0; color:var(--ink-graphite); }
.watch-specs td:first-child { color:var(--ink-shadow); width:42%; }
.watch-spec-list {
  list-style:none; padding:0; margin:14px 0 0;
  font-size:.875rem; color:var(--ink-graphite);
}
.watch-spec-list li { padding:6px 0; border-bottom:1px solid var(--line-hair); }
.watch-spec-list li:last-child { border-bottom:0; }

/* Jewelry PDP — metal picker */
.pdp-metal-pick { border:0; padding:0; margin:0 0 16px; }
.pdp-metal-pick legend {
  font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-shadow); padding:0 0 8px;
}
.pdp-metal-row { display:flex; gap:8px; flex-wrap:wrap; }
.pdp-metal-btn {
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; border:1px solid var(--line-hair);
  padding:8px 14px; cursor:pointer;
  font-size:.8125rem; color:var(--ink-noir);
  transition:border-color 160ms ease;
}
.pdp-metal-btn:hover { border-color:var(--ink-graphite); }
.pdp-metal-btn.active { border-color:var(--ink-noir); border-width:2px; padding:7px 13px; }
.pdp-metal-swatch {
  width:14px; height:14px; border-radius:50%; border:1px solid rgba(0,0,0,.18);
  display:inline-block;
}

/* Account & Wishlist header icons have no function yet — hidden until wired.
   (Remove this rule to bring them back.) */
.icon-btn[aria-label="Account"] { display:none; }

/* -------- SPLIT HERO (homepage, Brilliant-Earth style) --------
   Two equal full-bleed panels, white serif headline low-centered,
   white pill button; whole panel is the link. */
.hero-split { display:grid; grid-template-columns:1fr 1fr; }
.hero-panel {
  position:relative; min-height:595px;
  background-size:cover; background-position:center;
  display:flex; align-items:flex-end; justify-content:center;
  padding-bottom:52px; text-decoration:none; overflow:hidden;
}
.hero-panel::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.20) 60%, rgba(0,0,0,.58) 100%);
}
.hero-panel-content { position:relative; text-align:center; padding:0 24px; }
.hero-panel h1, .hero-panel .hero-panel-title {
  font-family:var(--font-serif); font-size:clamp(2rem, 2.75vw, 3.25rem);
  font-weight:400; line-height:1.1; color:#fff; margin:0 0 20px;
}
.hero-panel-btn {
  display:inline-flex; align-items:center; justify-content:center;
  height:44px; padding:0 22px; background:#fff; color:#2C2C2C;
  font-size:.875rem; transition:background 180ms ease;
}
.hero-panel:hover .hero-panel-btn { background:var(--canvas-snow,#f6f4f1); }
@media (max-width:768px) {
  .hero-split { grid-template-columns:1fr; }
  .hero-panel { min-height:420px; padding-bottom:36px; }
}

/* Logo: original style, scaled up (was 1.875rem) */
.wordmark { font-size:2.25rem; }

/* -------- OBSESSION-WORTHY RINGS (BE-exact: full width, 32px sides, 8px gaps,
   image ratio 298:344, caption 18px/500 16px below) -------- */
.ow-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; padding:0 32px; }
.ow-tile { text-decoration:none; text-align:center; }
.ow-img { aspect-ratio:298/344; overflow:hidden; background:var(--canvas-snow,#f6f4f1); }
.ow-img img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.ow-tile:hover .ow-img img { transform:scale(1.04); }
.ow-tile span { display:block; margin-top:16px; font-size:1.125rem; font-weight:500; color:var(--ink-noir); }
@media (max-width:1024px){ .ow-grid { grid-template-columns:repeat(3,1fr); padding:0 16px; } }
@media (max-width:560px){ .ow-grid { grid-template-columns:repeat(2,1fr); } }

/* -------- 2026 TREND REPORT (BE-exact: full-bleed, 8px gaps,
   image ratio 624:789, serif titles 30px) -------- */
.tr-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.tr-card { text-decoration:none; text-align:center; }
.tr-img { aspect-ratio:624/789; overflow:hidden; background:var(--canvas-snow,#f6f4f1); }
.tr-img img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.tr-card:hover .tr-img img { transform:scale(1.03); }
.tr-card h3 { font-family:var(--font-serif); font-weight:400; font-size:1.875rem; color:var(--ink-noir); margin:18px 0 6px; }
.tr-cta { font-size:.875rem; color:var(--accent-champagne,#b8946a); text-decoration:underline; text-underline-offset:3px; }
@media (max-width:768px){ .tr-grid { grid-template-columns:1fr; } }

/* Real-catalog product badges */
.product-img { position:relative; }
.product-badge {
  position:absolute; top:10px; left:10px; z-index:2;
  background:var(--ink-noir,#1a1a1a); color:#fff;
  font-size:.6875rem; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 9px;
}
.pdp-financing { font-size:.875rem; color:var(--ink-graphite); margin:6px 0 0; }
.pdp-financing a { color:var(--accent-champagne,#b8946a); }

/* -------- MOBILE NAVIGATION -------- */
.mobile-nav-btn { display:none; }
@media (max-width:768px) { .mobile-nav-btn { display:inline-flex; } }
.mobile-nav {
  position:fixed; top:0; left:0; bottom:0; width:min(320px, 85vw);
  background:#fff; z-index:1200; transform:translateX(-103%);
  transition:transform .28s ease; display:flex; flex-direction:column;
  box-shadow:8px 0 40px rgba(0,0,0,.18);
}
.mobile-nav.open { transform:none; }
.mobile-nav-head { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid var(--line-hair); font-size:.8125rem; letter-spacing:.1em; font-weight:600; }
.mobile-nav nav { overflow:auto; flex:1; }
.mobile-nav ul { list-style:none; margin:0; padding:6px 0; }
.mobile-nav li a { display:block; padding:14px 22px; font-size:1rem; color:var(--ink-noir); text-decoration:none; border-bottom:1px solid var(--line-hair); min-height:48px; }
.mobile-nav-backdrop { position:fixed; inset:0; background:rgba(20,18,16,.45); opacity:0; pointer-events:none; transition:opacity .25s; z-index:1190; }
.mobile-nav-backdrop.open { opacity:1; pointer-events:auto; }

/* -------- WISHLIST -------- */
.pcard-wishlist.active, .pcard-wishlist.active svg { color:#b3403a; fill:#b3403a; }
@media (hover:none) { .pcard .pcard-wishlist { opacity:1 !important; visibility:visible !important; } }
.ddetail-wish { background:none; border:0; padding:4px 0; cursor:pointer; font-size:.875rem; color:var(--accent-champagne,#b8946a); text-align:left; }

/* -------- RECENTLY VIEWED STONES -------- */
.recent-row { display:flex; gap:12px; overflow-x:auto; padding-bottom:6px; -webkit-overflow-scrolling:touch; }
.recent-stone { flex:0 0 auto; width:116px; background:#fff; border:1px solid var(--line-hair); padding:8px; cursor:pointer; text-align:center; }
.recent-stone img { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.recent-stone span { display:block; font-size:.75rem; margin-top:6px; color:var(--ink-graphite); }
.recent-stone .price-tk { color:var(--ink-noir); }

/* -------- TOUCH TAP TARGETS -------- */
@media (max-width:768px) {
  .dfilter-pills .dpill { padding:11px 13px; min-height:42px; }
  .dfilter-pills { gap:8px; }
}
.card-metal-dot { position:relative; }
.card-metal-dot::after { content:''; position:absolute; inset:-9px; }

/* FAQ accordions (engagement/wedding/customize) */
.faq-accordion { border-bottom:1px solid var(--line-hair); padding:14px 0; }
.faq-accordion summary { cursor:pointer; font-weight:600; font-size:1rem; color:var(--ink-noir); list-style:none; display:flex; justify-content:space-between; align-items:center; }
.faq-accordion summary::after { content:'+'; font-size:1.25rem; color:var(--accent-champagne,#b8946a); }
.faq-accordion[open] summary::after { content:'–'; }

/* Footer payment / trust row */
.payment-row { display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; justify-content:center; padding:18px 16px; border-top:1px solid rgba(255,255,255,.12); margin-top:24px; }
.payment-row span { font-size:.75rem; letter-spacing:.04em; color:inherit; opacity:.75; border:1px solid currentColor; border-radius:4px; padding:3px 8px; }
.payment-row .secure { border:0; opacity:.85; }

/* Hero secondary (ghost) button + button row */
.hero-panel-btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.hero-panel-btn { text-decoration:none; }
.hero-panel-btn--ghost { background:transparent; color:#fff; border:1px solid rgba(255,255,255,.85); }
.hero-panel:hover .hero-panel-btn--ghost { background:rgba(255,255,255,.14); }

/* PDP secondary actions: one tidy centered row instead of stacked links */
.pdp-secondary-actions { display:flex; gap:10px; justify-content:center; align-items:center; margin:4px 0 0; font-size:.875rem; }
.pdp-secondary-actions span { color:var(--line-hair); }

/* Price index page */
.pi-headline { padding:8px 0 4px; }
.pi-5k { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.pi-chip { display:flex; flex-direction:column; align-items:center; gap:2px; border:1px solid var(--line-hair); padding:14px 20px; text-decoration:none; min-width:96px; }
.pi-chip strong { font-size:1.25rem; color:var(--ink-noir); }
.pi-chip span { font-size:.8125rem; color:var(--ink-shadow); }
#pi-table td a { color:var(--ink-noir); text-decoration:underline; text-underline-offset:3px; }

/* Skeleton loaders (diamond grid) */
.dcard-skel { background:#fff; border:1px solid var(--line-hair); padding-bottom:14px; }
.dcard-skel .i { aspect-ratio:1/1; background:linear-gradient(100deg,#eee 30%,#f6f4f1 50%,#eee 70%); background-size:200% 100%; animation:skel 1.1s infinite; }
.dcard-skel .l { height:12px; margin:12px 14px 0; background:#eee; border-radius:3px; animation:skel 1.1s infinite; background:linear-gradient(100deg,#eee 30%,#f6f4f1 50%,#eee 70%); background-size:200% 100%; }
.dcard-skel .l.s { width:50%; }
@keyframes skel { to { background-position:-200% 0; } }

/* Compare stones */
.dcard-compare { position:absolute; bottom:10px; left:10px; z-index:3; background:rgba(255,255,255,.92); border:1px solid var(--line-hair); font-size:.6875rem; letter-spacing:.04em; padding:4px 9px; cursor:pointer; border-radius:20px; }
.dcard-compare.on { background:var(--ink-noir); color:#fff; border-color:var(--ink-noir); }
#compare-bar { position:fixed; bottom:18px; left:50%; transform:translateX(-50%); z-index:1100; background:var(--ink-noir); color:#fff; border:0; padding:13px 22px; font-size:.875rem; letter-spacing:.03em; border-radius:30px; cursor:pointer; box-shadow:0 10px 30px rgba(0,0,0,.3); }

/* Ring reveal (builder review) */
.ring-reveal { display:flex; align-items:center; justify-content:center; gap:16px; margin:4px 0 10px; }
.ring-reveal figure { margin:0; text-align:center; }
.ring-reveal img { width:128px; height:128px; object-fit:cover; border-radius:6px; border:1px solid var(--line-hair); }
.ring-reveal figcaption { font-size:.75rem; color:var(--ink-shadow); margin-top:6px; }
.rr-plus { font-size:1.5rem; color:var(--accent-champagne,#b8946a); }

/* Sticky Your Ring bar */
#ring-bar { position:fixed; left:0; right:0; bottom:0; z-index:1150; background:#fff; border-top:1px solid var(--line-hair); box-shadow:0 -8px 30px rgba(0,0,0,.08); display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 20px; flex-wrap:wrap; }
#ring-bar .rb-items { display:flex; gap:10px; align-items:center; font-size:.875rem; flex-wrap:wrap; }
#ring-bar .rb-sep { color:var(--accent-champagne,#b8946a); }
#ring-bar .muted { color:var(--ink-shadow); }
#ring-bar .rb-right { display:flex; gap:14px; align-items:center; }
#ring-bar .rb-total { font-weight:600; font-size:1.05rem; }
body.has-ring-bar { padding-bottom:74px; }
body.has-ring-bar .sticky-cta { bottom:160px; }
body.has-ring-bar #text-jeweler { bottom:88px; }

/* Mobile sticky add-to-cart */
#m-atc { display:none; }
@media (max-width:768px) {
  #m-atc { position:fixed; left:0; right:0; bottom:0; z-index:1140; background:#fff; border-top:1px solid var(--line-hair); padding:10px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; transform:translateY(110%); transition:transform .25s ease; }
  #m-atc.show { transform:none; }
  #m-atc .p { font-weight:600; font-size:1.05rem; }
  #m-atc .btn { padding:12px 18px; }
}

/* Text a Jeweler */
#text-jeweler { position:fixed; right:24px; bottom:18px; z-index:1160; }
#text-jeweler .tj-btn { display:flex; align-items:center; gap:8px; background:var(--accent-champagne,#b8946a); color:#fff; border:0; border-radius:30px; padding:13px 18px; font-size:.875rem; letter-spacing:.03em; cursor:pointer; box-shadow:0 10px 28px rgba(0,0,0,.25); }
#text-jeweler .tj-menu { position:absolute; bottom:58px; right:0; background:#fff; border:1px solid var(--line-hair); border-radius:10px; box-shadow:0 18px 50px rgba(0,0,0,.18); padding:8px; width:230px; }
#text-jeweler .tj-menu a { display:block; padding:11px 12px; color:var(--ink-noir); text-decoration:none; font-size:.9375rem; border-radius:6px; }
#text-jeweler .tj-menu a:hover { background:var(--canvas-snow,#f6f4f1); }
#text-jeweler .tj-menu p { font-size:.75rem; color:var(--ink-shadow); padding:6px 12px 4px; margin:0; border-top:1px solid var(--line-hair); }
@media (max-width:768px) { #text-jeweler { bottom:74px; } #text-jeweler .tj-btn span { display:none; } #text-jeweler .tj-btn { padding:14px; border-radius:50%; } }

/* Card metal dots — colored, only rendered when the product has metal variants */
.card-metals { display:flex; gap:6px; padding:10px 16px 0; }
.product-card .card-metals { padding:10px 0 0; }
.card-metal-dot { width:16px; height:16px; border-radius:50%; border:1px solid rgba(0,0,0,.18); padding:0; cursor:pointer; position:relative; }
.card-metal-dot[data-metal="white"]   { background:var(--metal-white,#e6e6e6); }
.card-metal-dot[data-metal="yellow"]  { background:var(--metal-yellow,#e3c16f); }
.card-metal-dot[data-metal="rose"]    { background:var(--metal-rose,#e0a899); }
.card-metal-dot[data-metal="platinum"]{ background:var(--metal-platinum,#d9d9da); }
.card-metal-dot.active { box-shadow:0 0 0 2px #fff, 0 0 0 3px var(--ink-noir,#1a1a1a); }


/* ---- (1) Hero trust bar ---- */
.trust-bar { background:var(--ink-noir,#1a1a1a); color:#fff; }
.trust-bar-inner { display:flex; flex-wrap:wrap; justify-content:center; gap:14px 40px; padding:16px 24px; text-align:center; }
.trust-bar span { font-size:.8125rem; letter-spacing:.04em; color:rgba(255,255,255,.8); }
.trust-bar b { color:#fff; font-weight:600; }
@media (max-width:600px){ .trust-bar-inner { gap:8px 20px; padding:14px 16px; } .trust-bar span { font-size:.6875rem; } }

/* ---- (2) Product card polish: lift + shadow + financing line ---- */
.product-card { transition:transform .2s ease; }
.product-card:hover { transform:translateY(-4px); }
.product-card .product-img { transition:box-shadow .25s ease; }
.product-card:hover .product-img { box-shadow:0 14px 34px rgba(20,18,16,.13); }
.product-mo { font-size:.75rem; color:var(--ink-shadow); margin-top:3px; letter-spacing:.02em; }

/* ---- (3) Editorial line-length cap on section intros ---- */
.section-head > .body-md, .section-head > .body-lg, .section-head > p { max-width:640px; margin-left:auto; margin-right:auto; }

/* ---- (6) Mobile floating-element stacking (no overlaps) ---- */
@media (max-width:768px){
  .sticky-cta { display:none; }                 /* redundant: Text-a-Jeweler + menu Book cover this */
  /* when a full-width bottom bar is up, lift Text-a-Jeweler above it */
  body.has-ring-bar #text-jeweler { bottom:84px; }
  body:has(#m-atc.show) #text-jeweler { bottom:78px; }
  body:has(#m-atc.show) #compare-bar { bottom:74px; }
}


/* ---- (4) Homepage live diamond strip ---- */
.home-dcard { text-decoration:none; display:block; color:inherit; }
.home-dcard .dcard-media iframe { pointer-events:none; }   /* whole card stays a link */
.home-dia-stat strong { color:var(--ink-noir,#1a1a1a); }
#home-diamonds .home-dia-grid { margin-top:8px; }

/* ===========================================================
   REVIEWS REFRESH — real Google data, avatars, verified, lift
   (placed last to override earlier conflicting review blocks)
   =========================================================== */
#reviews .reviews-head {
  display:flex; justify-content:space-between; align-items:flex-end; gap:28px;
  flex-wrap:wrap; background:none; border:0; border-radius:0; padding:0; margin:0 0 40px;
}
#reviews .reviews-summary { display:flex; align-items:center; gap:14px; text-align:left; }
#reviews .reviews-summary .eyebrow { display:none; }
#reviews .reviews-glogo { flex:none; }
#reviews .reviews-stars { display:inline-flex; align-items:center; gap:4px; }
#reviews .reviews-score { font-family:'Cormorant Garamond',serif; font-size:1.85rem; font-weight:600; color:var(--ink-noir); margin-right:6px; line-height:1; }
#reviews .reviews-meta { font-size:.8125rem; color:var(--ink-shadow); margin:6px 0 0; }
#reviews .reviews-meta strong { color:var(--ink-noir); font-weight:600; }
#reviews .reviews-google { display:inline; border:0; padding:0; text-transform:none; letter-spacing:0; font-size:.8125rem; color:var(--accent-champagne); }
#reviews .reviews-google:hover { color:var(--ink-noir); }

#reviews .reviews-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:900px){ #reviews .reviews-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ #reviews .reviews-grid { grid-template-columns:1fr; } }
#reviews .review-card {
  position:relative; overflow:hidden;
  background:var(--canvas-pure); border:1px solid var(--line-hair); border-radius:4px;
  padding:26px 24px 20px; box-shadow:0 1px 3px rgba(20,20,20,.05);
  display:flex; flex-direction:column; gap:14px;
  transition:box-shadow .22s ease, transform .22s ease;
}
#reviews .review-card:hover { box-shadow:0 14px 32px rgba(20,20,20,.10); transform:translateY(-2px); }
#reviews .review-card::before {
  content:'\201C'; position:absolute; top:-22px; right:16px;
  font-family:'Cormorant Garamond',serif; font-size:6rem; line-height:1;
  color:var(--accent-champagne); opacity:.15; pointer-events:none;
}
#reviews .review-stars { color:#E5A845; letter-spacing:2px; font-size:.95rem; }
#reviews .review-text { font-size:.9375rem; line-height:1.65; color:var(--ink-graphite); margin:0; flex:1; }
#reviews .review-author {
  display:flex; align-items:center; gap:12px; margin:0; padding-top:14px;
  border-top:1px solid var(--line-hair);
}
#reviews .review-avatar {
  flex:none; width:40px; height:40px; border-radius:50%;
  background:linear-gradient(135deg,#cdb38c,#b8946a); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:.8125rem; font-weight:600; letter-spacing:.03em;
}
#reviews .review-byline { display:flex; flex-direction:column; gap:2px; min-width:0; }
#reviews .review-byline strong { color:var(--ink-noir); font-size:.875rem; display:block; }
#reviews .review-verified { display:inline-flex; align-items:center; gap:5px; font-size:.6875rem; color:var(--ink-shadow); }
#reviews .review-verified svg { flex:none; }


/* Nov 3 2026 phone-width fix */
/* Product photos are 600px wide. With plain 1fr columns the grid grew to the photo's width, so on an iPhone the
   collection pages were wider than the screen and slid sideways. minmax(0,1fr) keeps each column inside the screen. */
.product-grid { grid-template-columns:repeat(4, minmax(0,1fr)); }
@media (max-width:1280px){ .product-grid { grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:900px){ .product-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:600px){ .product-grid { grid-template-columns:minmax(0,1fr); } }
.product-card, .product-img { min-width:0; max-width:100%; }
.product-img img { max-width:100%; }

/* Footer: the bottom row of links was 413px wide on a 393px iPhone and pushed the whole page sideways. */
@media (max-width:600px){ .footer-bottom-links { flex-wrap:wrap; max-width:100%; row-gap:8px; } .footer-bottom, .footer-bottom * { min-width:0; } .footer-bottom p, .footer-bottom-links a { overflow-wrap:anywhere; } }

/* Ring builder steps (Setting · Diamond · Review) were 8px wider than an iPhone screen. */
@media (max-width:600px){ .stepper-inner ol { grid-template-columns:repeat(3, minmax(0,1fr)); } .stepper-inner ol li { min-width:0; overflow-wrap:anywhere; } }

/* Phone header: a later ".wordmark { font-size:2.25rem }" made the logo wrap onto two lines in the 64px phone header,
   so "GALLO" was cut off at the top and "JEWELRY" spilled over the hero photo. One line, phone-sized. */
@media (max-width:749px){ .logo-row .wordmark { font-size:.95rem; letter-spacing:.16em; white-space:nowrap; line-height:1; } }
@media (max-width:360px){ .logo-row .wordmark { font-size:.78rem; letter-spacing:.08em; } }

/* Phone header: search sat in the middle under the logo — keep it next to the menu button. */
@media (max-width:749px){ .logo-row-inner { justify-content:flex-start; gap:2px; } .logo-row-inner .icon-cluster { margin-left:auto; } }
/* Small iPhones (SE): long button labels were wider than the screen. */
@media (max-width:380px){ .btn { white-space:normal; max-width:100%; text-align:center; } }