/* ==========================================================================
   PersonalizeIt — Design System v6 "Refined Marigold"
   The warm festive identity stays, but everything is pulled a notch
   toward an editorial boutique feel: a calmer cream canvas, a deeper
   ink ramp, a richer gold accent for hairlines, and a layered shadow
   system that gives cards real elevation instead of resting flat.
   Bold geometric headings (Outfit) over a friendly body face
   (Plus Jakarta Sans). Built on a tokenized type scale.
   ========================================================================== */

:root {
  /* ── Canvas — calmer cream, less "neon festive" ─────────── */
  --bg:          #fbf6ec;
  --bg-subtle:   #f6eedf;
  --bg-muted:    #f4e6cd;
  --surface:     #ffffff;

  /* ── Ink — warm browns, with a near-black for display type */
  --ink-strong:  #1c1308;   /* tightest display type */
  --ink:         #2a1e0c;
  --ink-2:       #43341c;
  --ink-3:       #6b5738;
  --ink-4:       #7a6544;
  --ink-5:       #d8c9ae;

  /* ── Marigold — the primary action colour ───────────────── */
  --marigold:       #e8912d;
  --marigold-light: #f5b45f;
  --marigold-deep:  #a34907;   /* text-safe marigold on cream (AA tightened) */
  --marigold-pale:  #ffefd6;
  --on-marigold:    #3a1f02;   /* dark text used on marigold fills */
  --rust-ink:       #9a4404;   /* AA on all six category tints */

  /* ── Gold — soft accent for hairlines / engraved-metal cue ─ */
  --gold:       #c79a3a;
  --gold-soft:  rgba(199,154,58,0.28);

  /* ── Deep teal — the anchor / dark bands ────────────────── */
  --teal:       #0f5257;
  --teal-2:     #14696f;
  --teal-3:     #1d8188;
  --teal-pale:  #d7e8e8;
  --teal-wash:  #eef6f6;

  /* ── Festive band alias ─────────────────────────────────── */
  --jewel:       var(--teal);
  --jewel-light: var(--teal-2);

  /* ── Category mosaic tints (cycled by home.js) ──────────── */
  --tint-1-bg: #ffeccc; --tint-1-bd: #f5d6a3;
  --tint-2-bg: #dbeeee; --tint-2-bd: #b6dcdc;
  --tint-3-bg: #ffe3d6; --tint-3-bd: #f6c5af;
  --tint-4-bg: #eaeed8; --tint-4-bd: #d2dbb6;
  --tint-5-bg: #fde4e6; --tint-5-bd: #f4c4c9;
  --tint-6-bg: #e5e7f4; --tint-6-bd: #c9cde8;

  /* ── WhatsApp brand ─────────────────────────────────────── */
  --wa:        #22c55e;
  --wa-deep:   #166534;
  --wa-wash:   #f0fdf4;
  --wa-fab:    #25d366;
  --wa-fab-ink:#063318;

  /* ── Borders ─────────────────────────────────────────────── */
  --border:      #ecdcbf;
  --border-2:    #f1e6d2;

  /* ── Typography ─────────────────────────────────────────── */
  --font-display: 'Outfit', system-ui, -apple-system, sans-serif;
  --font-body:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Modular type scale — ~1.2 minor third, sizes in rem.
     Body uses a responsive clamp() floor for mobile legibility. */
  --fs-xs:   0.78rem;  /* minimum legible UI label floor */
  --fs-sm:   0.85rem;
  --fs-base: 0.95rem;
  --fs-md:   1.05rem;
  --fs-lg:   1.2rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  clamp(2rem, 3.6vw, 3rem);
  --fs-3xl:  clamp(2.6rem, 5.2vw, 4.3rem);

  /* ── Radius ─────────────────────────────────────────────── */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-xl:   32px;
  --r-pill: 999px;

  /* ── Shadow — layered, premium elevation ──────────────────
     Two-layer each: a crisp contact line + a soft, wide lift.
     The faint marigold undertone in md/lg reads warmer than grey. */
  --shadow-xs: 0 1px 2px rgba(67,45,16,0.06), 0 1px 3px rgba(67,45,16,0.05);
  --shadow-sm: 0 2px 4px rgba(67,45,16,0.06), 0 4px 12px rgba(67,45,16,0.07);
  --shadow-md: 0 4px 8px rgba(67,45,16,0.07), 0 12px 28px rgba(67,45,16,0.09);
  --shadow-lg: 0 8px 16px rgba(67,45,16,0.09), 0 24px 56px rgba(67,45,16,0.14);
  --shadow-gold: 0 6px 20px rgba(199,154,58,0.20);

  /* ── Focus ring ─────────────────────────────────────────── */
  --focus-ring: 0 0 0 3px var(--gold-soft), 0 0 0 5px rgba(232,145,45,0.22);

  /* ── Motion ─────────────────────────────────────────────── */
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  --container-w: 1160px;
}

/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; color-scheme: light; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink-2);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: var(--fs-base);
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* Contact channels that aren't configured yet set [hidden] on themselves
   (see wireContactLinks in script.js). Components like .btn use
   display:inline-flex, which would otherwise win over the attribute. */
[hidden] { display: none !important; }

/* ── Focus visibility (a11y) ───────────────────────────────
   One consistent on-brand ring for keyboard users on every interactive
   element; mouse users see no ring. Inputs that draw their own focus
   ring via box-shadow (.filter-search, .customize-form input, .sort-select)
   keep that behaviour and are excluded here. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--marigold);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
.filter-search:focus-visible,
.customize-form input:focus-visible,
.sort-select:focus-visible,
.faq-item summary:focus-visible {
  outline: none; /* these use a box-shadow ring defined on :focus instead */
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink-strong);
  line-height: 1.14;
  letter-spacing: 0.005em;
  margin: 0 0 0.5em;
  /* Optical sizing + balanced wrapping keeps large display type smooth
     and avoids orphaned words on headline breaks. */
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  text-wrap: balance;
}
h1 { font-weight: 800; letter-spacing: -0.038em; line-height: 1.0; color: var(--ink-strong); }
h2 { font-weight: 700; letter-spacing: -0.028em; }
h3 { letter-spacing: -0.015em; }
p  { margin: 0 0 1em; color: var(--ink-3); text-wrap: pretty; }

.container {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 28px;
}

/* ── Utility ─────────────────────────────────────────────────── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--marigold-deep);
  margin-bottom: 1em;
}
.eyebrow.center { display: flex; justify-content: center; }

.section-title {
  font-size: var(--fs-2xl);
  color: var(--ink-strong);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.06;
}
.section-sub {
  max-width: 560px;
  color: var(--ink-3);
  font-size: var(--fs-md);
  line-height: 1.75;
  font-weight: 400;
}
.center { text-align: center; margin-left: auto; margin-right: auto; }

.section { padding: 74px 0; }
.section-alt { background: var(--bg-subtle); }
.section-tight { padding-top: 72px; }

/* ── Section head: left-aligned title with an optional trailing link.
      Replaces the centre-everything rhythm that made every band look alike. ── */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 38px;
}
.section-head .section-sub { margin-bottom: 0; }
.section-head-copy { max-width: 620px; }
.section-head-copy .section-title { margin-bottom: 14px; }
.section-link {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-2);
  border-bottom: 1px solid var(--ink-5);
  padding-bottom: 3px;
  white-space: nowrap;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.section-link:hover { color: var(--marigold); border-color: var(--marigold); }

/* Thin rule used to open a section without a heavy header block */
.rule {
  height: 1px;
  background: var(--border-2);
  border: 0;
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════
   BUTTONS — flat with a soft lift; no gradients
   ══════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 12px 24px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.18s var(--ease), box-shadow 0.22s var(--ease),
              background 0.18s var(--ease), border-color 0.18s var(--ease),
              color 0.18s var(--ease);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.985); }

/* Marigold is the brand primary action colour */
.btn-primary {
  background: var(--marigold);
  color: var(--on-marigold);
  border-color: var(--marigold);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
  background: var(--marigold-light);
  box-shadow: var(--shadow-md);
}

.btn-outline {
  background: var(--surface);
  border-color: var(--border);
  color: var(--ink-2);
}
.btn-outline:hover {
  border-color: var(--gold);
  background: var(--bg-subtle);
  box-shadow: var(--shadow-xs);
}

.btn-whatsapp {
  background: var(--surface);
  border-color: var(--border);
  color: var(--ink-2);
  padding: 10px 18px;
  font-size: var(--fs-sm);
}
.btn-whatsapp svg { color: var(--wa); flex-shrink: 0; }
.btn-whatsapp:hover {
  border-color: var(--wa);
  color: var(--wa-deep);
  background: var(--wa-wash);
}

.btn-gold {
  background: var(--marigold);
  color: #fff;
  border-color: var(--marigold);
}
.btn-gold:hover {
  background: var(--teal-2);
  box-shadow: var(--shadow-gold);
}

.btn-lg { padding: 15px 32px; font-size: var(--fs-base); }
.btn-block { width: 100%; justify-content: center; }

/* ══════════════════════════════════════════════════════════════
   ANNOUNCEMENT BAR
   ══════════════════════════════════════════════════════════════ */
.announce-bar {
  background:
    linear-gradient(90deg, rgba(255,255,255,0.04), transparent 30%, transparent 70%, rgba(255,255,255,0.04)),
    var(--jewel);
  color: rgba(255,255,255,0.92);
  text-align: center;
  font-size: var(--fs-xs);
  padding: 10px 20px;
  font-family: var(--font-body);
  letter-spacing: 0.01em;
}
.announce-bar p   { margin: 0; color: inherit; }
.announce-bar strong { color: #fff; font-weight: 600; }
.announce-link {
  color: var(--marigold-pale);
  font-weight: 600;
  margin-left: 10px;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.15s;
}
.announce-link:hover { opacity: 0.78; }

/* ══════════════════════════════════════════════════════════════
   HEADER — borderless on load, hairline + soft shadow on scroll
   ══════════════════════════════════════════════════════════════ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.site-header.scrolled {
  background: rgba(255,255,255,0.94);
  border-bottom-color: var(--border-2);
  box-shadow: 0 1px 0 var(--border-2), var(--shadow-sm);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
  gap: 24px;
  transition: padding 0.3s ease;
}
.site-header.scrolled .header-inner { padding-top: 10px; padding-bottom: 10px; }

.logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  white-space: nowrap;
  transition: opacity 0.15s;
}
.logo:hover { opacity: 0.7; }
.logo span { color: var(--marigold); }

/* Image variant — the wordmark PNG is deep teal on white. In the header it
   sits on the light cream canvas directly. On the teal footer band the white
   background would clash, so .footer-logo frames it as a rounded chip. */
.logo--image { display: inline-flex; align-items: center; }
.logo-img {
  height: 44px;
  width: auto;
  display: block;
}
@media (max-width: 720px) {
  .logo-img { height: 34px; }
}

/* Footer logo — the PNG carries a white background, so on the teal band it
   is wrapped and padded into a soft rounded chip that reads as intentional. */
.footer-logo {
  display: inline-block;
  background: #fff;
  border-radius: var(--r-sm);
  padding: 8px 14px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 14px;
}
.footer-logo img {
  height: 34px;
  width: auto;
  display: block;
}
@media (max-width: 720px) {
  .footer-logo img { height: 28px; }
}

.main-nav {
  display: flex;
  gap: 4px;
  flex: 1;
  justify-content: center;
}
.main-nav a {
  font-weight: 500;
  font-size: var(--fs-sm);
  color: var(--ink-3);
  padding: 7px 14px;
  border-radius: var(--r-pill);
  transition: color 0.15s, background 0.15s;
  letter-spacing: 0em;
}
.main-nav a:hover { color: var(--ink); background: var(--bg-subtle); }
.main-nav a.active { color: var(--ink); background: var(--bg-muted); font-weight: 600; }

.header-actions { display: flex; align-items: center; gap: 10px; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4.5px;
  width: 36px;
  height: 36px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  padding: 0 9px;
}
.nav-toggle span {
  display: block;
  height: 1.5px;
  background: var(--ink-2);
  border-radius: 2px;
  transition: all 0.2s ease;
}

/* ══════════════════════════════════════════════════════════════
   HERO — editorial split layout, big type, minimal clutter
   ══════════════════════════════════════════════════════════════ */
.hero {
  padding: 84px 0 76px;
  background: var(--bg);
  border-bottom: 1px solid var(--border-2);
  position: relative;
  overflow: hidden;
}
/* Subtle warm wash top-right + a faint teal wash bottom-left for depth */
.hero::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(232,145,45,0.10) 0%, transparent 70%);
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: -160px;
  left: -120px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(15,82,87,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  align-items: center;
  gap: 72px;
  position: relative;
}

.hero-copy .eyebrow { margin-bottom: 1.2em; }

.hero h1 {
  font-size: var(--fs-3xl);
  line-height: 0.98;
  margin-bottom: 0.34em;
  font-weight: 800;
  letter-spacing: -0.04em;
}
.accent { color: var(--marigold-deep); font-weight: 800; }

.hero-sub {
  font-size: var(--fs-md);
  max-width: 460px;
  color: var(--ink-3);
  line-height: 1.75;
  font-weight: 400;
}
.hero-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 32px 0 28px;
}
.hero-trust {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.hero-trust li {
  font-size: var(--fs-xs);
  color: var(--ink-4);
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.01em;
}
.hero-trust li::before {
  content: '✓';
  color: var(--marigold);
  font-weight: 700;
  font-size: var(--fs-xs);
}

/* Hero visual — a composed mosaic panel. */
.hero-visual {
  position: relative;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  grid-template-rows: repeat(2, 1fr);
  gap: 14px;
  height: 460px;
}

.hero-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.28s var(--ease), box-shadow 0.22s var(--ease), border-color 0.22s ease;
}
.hero-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--gold);
}

/* Feature tile spans the full left column */
.hero-card-1 {
  grid-row: span 2;
  background: linear-gradient(160deg, var(--bg-subtle), var(--surface));
  justify-content: space-between;
}
.hero-card-1 .hero-icon-wrap { width: 128px; height: 128px; }
.hero-card-1 .hero-icon-wrap svg { width: 68px; height: 68px; }
.hero-card-1 span { font-size: var(--fs-base); }

.hero-icon-wrap {
  width: 76px;
  height: 76px;
  color: var(--ink);
  background: var(--marigold-pale);
  border: 1px solid var(--gold-soft);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
  transition: transform 0.28s var(--ease-spring), background 0.2s ease;
}
.hero-icon-wrap svg { width: 42px; height: 42px; }
.hero-card:hover .hero-icon-wrap { transform: scale(1.06); background: var(--teal-pale); }

.hero-card span {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: -0.01em;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   TRUST STRIP — simple, clean, no dark band
   ══════════════════════════════════════════════════════════════ */
.trust-strip {
  background: var(--bg-subtle);
  border-top: 1px solid var(--border-2);
  border-bottom: 1px solid var(--border-2);
  padding: 30px 0;
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
}
.trust-item {
  padding: 10px 24px;
  position: relative;
}
.trust-item + .trust-item::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  height: 36px;
  width: 1px;
  background: var(--border);
}
.trust-item strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--ink-strong);
  letter-spacing: 0.02em;
  margin-bottom: 3px;
}
.trust-item span {
  font-size: var(--fs-xs);
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
}

/* ══════════════════════════════════════════════════════════════
   CATEGORY GRID — clean cards, minimal
   ══════════════════════════════════════════════════════════════ */
/* Bento mosaic — varied tile sizes so the eye has somewhere to travel,
   instead of nine identical boxes in a uniform 4-column grid. */
.category-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
/* Tiles 1 and 2 are wide features; the rest fill a tighter rhythm below. */
.category-card:nth-child(1),
.category-card:nth-child(2) { grid-column: span 3; }
.category-card:nth-child(1) .category-icon-wrap,
.category-card:nth-child(2) .category-icon-wrap { width: 124px; height: 124px; }
.category-card:nth-child(1) .category-icon-wrap svg,
.category-card:nth-child(2) .category-icon-wrap svg { width: 68px; height: 68px; }
.category-card:nth-child(1) h3,
.category-card:nth-child(2) h3 { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.025em; }
.category-card:nth-child(n+3) { grid-column: span 2; }

.category-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 30px 22px 24px;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-xs);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), border-color 0.22s ease;
}
.category-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: var(--gold);
}

/* Six colour blocks, cycled by home.js. Colour-blocking the tiles is what
   turns a grid of white boxes into something worth looking at. */
.category-card.tint-1 { background: var(--tint-1-bg); border-color: var(--tint-1-bd); }
.category-card.tint-2 { background: var(--tint-2-bg); border-color: var(--tint-2-bd); }
.category-card.tint-3 { background: var(--tint-3-bg); border-color: var(--tint-3-bd); }
.category-card.tint-4 { background: var(--tint-4-bg); border-color: var(--tint-4-bd); }
.category-card.tint-5 { background: var(--tint-5-bg); border-color: var(--tint-5-bd); }
.category-card.tint-6 { background: var(--tint-6-bg); border-color: var(--tint-6-bd); }

.category-icon-wrap {
  width: 92px;
  height: 92px;
  margin: 0 auto 14px;
  color: var(--ink);
  background: rgba(255,255,255,0.72);
  border: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), var(--shadow-xs);
  transition: transform 0.25s var(--ease-spring), box-shadow 0.22s ease;
}
/* Icons now fill their badge instead of floating in an empty box */
.category-icon-wrap svg { width: 50px; height: 50px; }

/* ── Real photos, when a product has one (see productMediaHtml).
      .has-photo makes the badge a full-bleed square frame; the icon
      fallback stays in the DOM and reappears if the image 404s. ── */
.product-card-icon.has-photo,
.preview-icon-wrap.has-photo,
.category-icon-wrap.has-photo {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  padding: 0;
  overflow: hidden;
}
.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.has-photo .media-fallback { display: none; }
.media-fallback { width: 100%; height: 100%; }

/* Photos read better as rounded squares than circles */
.product-card-icon.has-photo { width: 100%; aspect-ratio: 1/1; height: auto; border-radius: var(--r-md); }
.preview-icon-wrap.has-photo { width: 100%; aspect-ratio: 1/1; height: auto; border-radius: var(--r-md); }
.category-icon-wrap.has-photo { border-radius: 50%; }
.category-card:hover .category-icon-wrap { transform: scale(1.07) rotate(-3deg); }

.category-card h3 {
  font-size: 1rem;
  margin-bottom: 3px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.category-price {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--rust-ink);
  margin-bottom: 0;
}

/* ══════════════════════════════════════════════════════════════
   STEPS — connected line layout
   ══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
   BESTSELLERS — one large feature beside a stacked pair, so the
   section reads as a composition rather than three equal tiles.
   (Kept separate from .product-grid, which shop/product pages share.)
   ══════════════════════════════════════════════════════════════ */
.feature-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  grid-auto-rows: 1fr;
  gap: 14px;
}
.feature-grid .product-card:first-child {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(155deg, var(--bg-subtle), var(--surface));
  padding: 48px 32px;
}
.feature-grid .product-card:first-child .product-card-icon {
  width: 128px; height: 128px; margin-bottom: 26px;
}
.feature-grid .product-card:first-child .product-card-icon svg { width: 64px; height: 64px; }
.feature-grid .product-card:first-child .product-card-name {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  border-top: 0;
  padding-top: 0;
}
.feature-grid .product-card:first-child .product-card-price { font-size: 1.05rem; }

/* The two stacked cards sit horizontally so they don't look cramped */
.feature-grid .product-card:not(:first-child) {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 22px;
  text-align: left;
  padding: 24px 26px;
}
.feature-grid .product-card:not(:first-child) .product-card-icon { margin: 0; }
.feature-grid .product-card:not(:first-child) .btn { display: none; }
/* Hairline separator doesn't suit the horizontal row layout */
.feature-grid .product-card:not(:first-child) .product-card-name {
  border-top: 0;
  padding-top: 0;
}

/* ══════════════════════════════════════════════════════════════
   STEPS — left-aligned timeline with oversized ghost numerals
   ══════════════════════════════════════════════════════════════ */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  position: relative;
  counter-reset: step;
}
.steps-grid::before {
  content: '';
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border-2);
  z-index: 0;
}
.step {
  position: relative;
  z-index: 1;
  padding-top: 0;
}
.step-num {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink-4);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 26px;
  box-shadow: var(--shadow-xs);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s var(--ease);
}
.step:hover .step-num {
  color: var(--teal);
  border-color: var(--teal-3);
  background: var(--teal-wash);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.step h3 {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--ink-strong);
  margin-bottom: 10px;
  text-align: left;
  letter-spacing: -0.015em;
}
.step p {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  text-align: left;
  margin-bottom: 0;
  line-height: 1.7;
  max-width: 24ch;
}

/* ══════════════════════════════════════════════════════════════
   OCCASION SPOTLIGHT — jewel band, editorial
   ══════════════════════════════════════════════════════════════ */
.occasion {
  background:
    radial-gradient(circle at 100% 0%, rgba(232,145,45,0.18), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(29,129,136,0.30), transparent 55%),
    var(--jewel);
  position: relative;
  overflow: hidden;
}
.occasion-inner {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.occasion-copy h2 {
  font-size: clamp(2rem, 3.5vw, 3rem);
  color: #fff;
  letter-spacing: 0.01em;
  font-weight: 400;
  font-style: italic;
}
.occasion-copy p { color: rgba(255,255,255,0.8); font-size: var(--fs-base); }
/* Marigold is tuned for the cream canvas; on the teal band use the pale tint */
.occasion .eyebrow { color: var(--marigold-pale); }
.occasion-calendar {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--r-lg);
  padding: 6px 26px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.18);
  backdrop-filter: blur(2px);
}
.occ-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.78);
  gap: 12px;
}
.occ-row:last-child { border-bottom: none; }
.occ-row strong { color: var(--marigold-pale); font-weight: 600; }

/* ══════════════════════════════════════════════════════════════
   VALUE GRID (WHY US) — minimal icon + text
   ══════════════════════════════════════════════════════════════ */
/* Editorial two-column: a sticky statement on the left, the four points
   stacked as a list on the right. Breaks the four-equal-boxes pattern. */
.value-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 80px;
  align-items: start;
}
.value-intro { position: sticky; top: 120px; }
.value-intro .section-title { margin-bottom: 16px; }

.value-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px 40px;
}
.value-card {
  padding: 0;
  text-align: left;
}
.value-icon {
  width: 42px;
  height: 42px;
  margin: 0 0 18px;
  border-radius: var(--r-sm);
  background: var(--teal-wash);
  color: var(--marigold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  border: 1px solid var(--teal-pale);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
  transition: background 0.2s ease, transform 0.2s var(--ease-spring), box-shadow 0.2s ease;
}
.value-card:hover .value-icon {
  background: var(--teal-pale);
  transform: scale(1.08);
  box-shadow: var(--shadow-sm);
}
.value-card h3 {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--ink-strong);
  margin-bottom: 8px;
}
.value-card p {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  margin-bottom: 0;
  line-height: 1.7;
}

/* ══════════════════════════════════════════════════════════════
   TESTIMONIALS
   ══════════════════════════════════════════════════════════════ */
.placeholder-note {
  font-size: var(--fs-xs);
  color: var(--marigold);
  font-weight: 500;
}
/* Layout adapts to how many real reviews exist (data-count set by
   testimonials.js) so one or two never look stranded in a 3-column grid. */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: start;
}
.testimonial-grid[data-count="1"] {
  grid-template-columns: minmax(0, 560px);
  justify-content: center;
}
.testimonial-grid[data-count="2"] {
  grid-template-columns: repeat(2, minmax(0, 420px));
  justify-content: center;
}
/* Stagger only reads as intentional with a full row of three. */
.testimonial-grid[data-count="3"] > :nth-child(2) { margin-top: 32px; }
.testimonial-grid[data-count="3"] > :nth-child(3) { margin-top: 64px; }

.testimonial-card blockquote { margin: 0; }
.testimonial-card blockquote p::before { content: "\201C"; }
.testimonial-card blockquote p::after  { content: "\201D"; }
.star-off { color: var(--ink-5); }
.testimonial-product {
  display: block;
  margin-top: 3px;
  font-weight: 500;
  color: var(--marigold-deep);
}
.testimonial-product:hover { text-decoration: underline; }
.testimonial-card {
  /* <figure> ships with a UA default of `margin: 1em 40px`, which would
     inset every card inside its grid cell and offset the stagger. */
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 30px 26px;
  box-shadow: var(--shadow-xs);
  transition: box-shadow 0.22s ease, transform 0.22s var(--ease), border-color 0.22s ease;
}
.testimonial-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--gold);
}
.stars { color: var(--marigold); margin-bottom: 14px; letter-spacing: 1px; font-size: var(--fs-sm); }
.testimonial-card > p { color: var(--ink-3); font-size: var(--fs-sm); line-height: 1.75; }
.testimonial-name {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-4);
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════
   CTA SECTION — clean, centered
   ══════════════════════════════════════════════════════════════ */
.cta-section {
  background:
    radial-gradient(circle at 50% 0%, rgba(232,145,45,0.10), transparent 60%),
    var(--bg-muted);
  text-align: center;
  border-top: 1px solid var(--border-2);
  border-bottom: 1px solid var(--border-2);
}
.cta-inner { position: relative; }
.cta-inner::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid var(--gold-soft);
  border-radius: var(--r-xl);
  pointer-events: none;
}
.cta-inner h2 { color: var(--ink-strong); font-size: clamp(1.8rem, 3vw, 2.4rem); position: relative; }
.cta-inner p  {
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
  font-size: var(--fs-base);
  color: var(--ink-3);
  position: relative;
}
.cta-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 28px;
  position: relative;
}

/* ══════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════ */
.site-footer {
  background:
    radial-gradient(circle at 0% 0%, rgba(29,129,136,0.30), transparent 45%),
    radial-gradient(circle at 100% 0%, rgba(232,145,45,0.12), transparent 40%),
    var(--teal);
  padding: 64px 0 0;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer-brand p {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.72);   /* AA on teal */
  margin-top: 12px;
  line-height: 1.7;
  max-width: 260px;
}
.footer-col h4 {
  color: var(--marigold-pale);     /* AA on teal, and on-brand */
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 18px;
}
.footer-col a {
  display: block;
  font-size: var(--fs-sm);
  margin-bottom: 10px;
  color: rgba(255,255,255,0.82);   /* AA on teal */
  transition: color 0.15s ease;
}
.footer-col a:hover { color: #fff; }
.footer-bottom {
  padding: 22px 0;
  font-size: var(--fs-xs);
  text-align: center;
  color: rgba(255,255,255,0.66);   /* AA on teal */
}

/* ══════════════════════════════════════════════════════════════
   SCROLL REVEAL
   ══════════════════════════════════════════════════════════════ */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
[data-reveal].revealed { opacity: 1; transform: translateY(0); }
[data-reveal-delay="1"] { transition-delay: 0.08s; }
[data-reveal-delay="2"] { transition-delay: 0.16s; }
[data-reveal-delay="3"] { transition-delay: 0.24s; }
[data-reveal-delay="4"] { transition-delay: 0.32s; }

/* ══════════════════════════════════════════════════════════════
   SHARED COMPONENTS
   ══════════════════════════════════════════════════════════════ */
.breadcrumb {
  font-size: var(--fs-xs);
  color: var(--ink-4);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.breadcrumb a { color: var(--ink-4); transition: color 0.15s; }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb span { color: var(--ink-2); font-weight: 500; }
.breadcrumb::before { display: none; }

.product-badge {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--marigold);
  color: var(--on-marigold);
  font-size: var(--fs-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-xs);
  z-index: 2;
}

/* ══════════════════════════════════════════════════════════════
   PRODUCT GRID + CARD
   ══════════════════════════════════════════════════════════════ */
.product-grid {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.product-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 28px 22px;
  text-align: center;
  box-shadow: var(--shadow-xs);
  transition: transform 0.22s var(--ease), box-shadow 0.22s ease, border-color 0.22s ease;
  display: block;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--gold);
}
.product-card-icon {
  width: 96px;
  height: 96px;
  margin: 4px auto 16px;
  color: var(--ink);
  background: var(--marigold-pale);
  border: 1px solid var(--gold-soft);
  border-radius: var(--r-sm);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s var(--ease-spring), background 0.2s ease, border-color 0.2s ease;
}
.product-card-icon svg { width: 52px; height: 52px; }
.product-card:hover .product-card-icon {
  transform: scale(1.07) rotate(-3deg);
  background: var(--teal-pale);
  border-color: var(--teal-pale);
}
.product-card-category {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-4);
  font-weight: 600;
  margin-bottom: 5px;
}
/* Gold hairline separates the icon area from the copy below it. */
.product-card-name {
  font-size: var(--fs-base);
  color: var(--ink-strong);
  margin: 0 0 6px;
  padding-top: 14px;
  border-top: 1px solid var(--border-2);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.product-card-price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-md);
  color: var(--ink-strong);
  margin-bottom: 18px;
}

/* ══════════════════════════════════════════════════════════════
   SHOP PAGE
   ══════════════════════════════════════════════════════════════ */
.shop-hero {
  padding: 48px 0 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border-2);
}
.shop-hero h1 { font-size: clamp(1.9rem, 3.5vw, 2.8rem); }

.shop-body { padding: 40px 0 100px; }
.shop-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
  align-items: start;
}

.filters {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 24px 20px;
  position: sticky;
  top: 100px;
  box-shadow: var(--shadow-xs);
}
.filter-block { margin-bottom: 26px; }
.filter-block:last-of-type { margin-bottom: 16px; }
.filter-block h3 {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-4);
  font-weight: 600;
  margin-bottom: 12px;
}
.filter-search {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  background: var(--surface);
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.filter-search::placeholder { color: var(--ink-4); }
.filter-search:focus {
  border-color: var(--ink-3);
  box-shadow: var(--focus-ring);
}
/* ── Filter options as scannable rows with live counts.
      Replaces 19 wrapping pills, which were unreadable in a 240px column. ── */
.filter-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.filter-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  border-radius: var(--r-xs);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-3);
  cursor: pointer;
  text-align: left;
  transition: background 0.14s ease, color 0.14s ease;
}
.filter-option:hover { background: var(--bg-subtle); color: var(--ink); }
.filter-option.active {
  background: var(--teal);
  color: #fff;
  font-weight: 600;
  box-shadow: var(--shadow-xs);
}
.filter-option .count {
  font-size: var(--fs-xs);
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.filter-option.active .count { color: rgba(255,255,255,0.66); }
/* An option that would return nothing given the other active filters */
.filter-option.empty { opacity: 0.38; cursor: not-allowed; }
.filter-option.empty:hover { background: transparent; color: var(--ink-3); }

/* ── Toolbar: search + count + sort, above the grid where they belong ── */
.shop-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.toolbar-search { position: relative; }
.toolbar-search svg {
  position: absolute;
  left: 13px; top: 50%;
  transform: translateY(-50%);
  width: 15px; height: 15px;
  color: var(--ink-4);
  pointer-events: none;
}
.filter-search {
  width: 100%;
  padding: 11px 14px 11px 36px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  background: var(--surface);
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.filter-search::placeholder { color: var(--ink-4); }
.filter-search:focus {
  border-color: var(--ink-3);
  box-shadow: var(--focus-ring);
}

.toolbar-right { display: flex; align-items: center; gap: 12px; }
.results-count {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--ink-4);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.sort-select {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.sort-select:focus { border-color: var(--ink-3); box-shadow: var(--focus-ring); }

/* ── Active filter chips — lets people see and undo one filter at a time ── */
.active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-2);
}
.active-filters[hidden] { display: none; }
.active-filters .af-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-4);
  font-weight: 600;
  margin-right: 2px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px 6px 13px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: var(--fs-xs);
  color: var(--ink-2);
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 500;
  box-shadow: var(--shadow-xs);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.chip:hover { border-color: var(--ink-4); background: var(--bg-muted); box-shadow: var(--shadow-sm); }
.chip .x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--ink-5);
  color: #fff;
  font-size: var(--fs-xs);
  line-height: 1;
}
.chip:hover .x { background: var(--ink-3); }
.chip-clear {
  font-size: var(--fs-xs);
  color: var(--ink-4);
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-body);
  padding: 6px 4px;
}
.chip-clear:hover { color: var(--ink); }

/* ── Mobile filter drawer trigger (hidden on desktop) ── */
.filters-toggle { display: none; }
.filters-backdrop { display: none; }
.filters-close { display: none; }

.empty-state {
  text-align: center;
  padding: 72px 20px;
  color: var(--ink-4);
}
.empty-state a { color: var(--marigold); font-weight: 600; }

/* ══════════════════════════════════════════════════════════════
   PRODUCT DETAIL
   ══════════════════════════════════════════════════════════════ */
.product-detail { padding: 48px 0 88px; }
.product-detail-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 56px;
  align-items: start;
}

.product-visual { position: relative; }
.customize-preview {
  background: linear-gradient(160deg, var(--bg-subtle), var(--surface));
  border: 1px solid var(--border-2);
  border-radius: var(--r-xl);
  padding: 48px 32px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 100px;
}
.preview-icon-wrap {
  width: 160px;
  height: 160px;
  color: var(--teal-2);
  margin: 0 auto 22px;
  background: var(--teal-wash);
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--teal-pale);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
.preview-icon-wrap svg { width: 88px; height: 88px; }
.preview-photo-wrap {
  width: 120px; height: 120px;
  margin: 0 auto 20px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.preview-photo-wrap img { width:100%; height:100%; object-fit:cover; }
.preview-plate {
  background: var(--ink);
  color: var(--marigold-pale);
  border-radius: var(--r-sm);
  padding: 14px 20px;
  margin-top: 12px;
  box-shadow: var(--shadow-sm);
}
.preview-plate span {
  font-family: var(--font-display);
  font-style: italic;
  letter-spacing: 0.08em;
  font-size: 1.2rem;
  word-break: break-word;
}
.preview-note {
  font-size: var(--fs-xs);
  color: var(--ink-4);
  margin: 16px 0 0;
}

.product-info .eyebrow { margin-bottom: 8px; }
.product-info h1 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 10px; }
.product-price {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--ink-strong);
  margin-bottom: 12px;
  letter-spacing: -0.025em;
}
.product-tagline { font-size: var(--fs-base); line-height: 1.7; }
.product-features {
  margin: 0 0 22px;
  padding-left: 0;
  list-style: none;
  color: var(--ink-3);
  font-size: var(--fs-sm);
}
.product-features li {
  margin-bottom: 8px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.product-features li::before {
  content: '—';
  color: var(--marigold);
  font-weight: 700;
  flex-shrink: 0;
}

.meta-row {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  color: var(--ink-3);
  padding: 16px 0;
  border-top: 1px solid var(--border-2);
  border-bottom: 1px solid var(--border-2);
  margin-bottom: 28px;
}
.meta-row strong { color: var(--ink-2); }

.customize-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 28px 26px;
  box-shadow: var(--shadow-xs);
}
.customize-form h3 {
  font-size: var(--fs-md);
  font-weight: 700;
  margin-bottom: 18px;
  color: var(--ink-strong);
}
.customize-form label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-3);
  margin-bottom: 7px;
  margin-top: 18px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.customize-form label:first-of-type { margin-top: 0; }
.customize-form input[type="text"],
.customize-form input[type="number"] {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  background: var(--bg);
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.customize-form input:focus {
  border-color: var(--ink-3);
  box-shadow: var(--focus-ring);
}
.customize-form input[type="file"] {
  width: 100%;
  padding: 10px 0;
  font-size: var(--fs-xs);
  color: var(--ink-3);
}
.char-count { font-size: var(--fs-xs); color: var(--ink-4); margin: 5px 0 0; }
.form-hint   { font-size: var(--fs-xs); color: var(--marigold); margin: 5px 0 0; }
.form-note {
  font-size: var(--fs-sm);
  background: var(--teal-wash);
  border-left: 3px solid var(--marigold-pale);
  padding: 12px 14px;
  border-radius: var(--r-xs);
  margin-bottom: 16px;
  color: var(--ink-3);
}
.customize-form .btn { margin-top: 22px; }

.product-extra-grid {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.extra-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 24px 22px;
  box-shadow: var(--shadow-xs);
  transition: box-shadow 0.2s ease, transform 0.2s var(--ease);
}
.extra-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.extra-card h3 {
  font-size: var(--fs-sm);
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--ink-strong);
}
.extra-card ul {
  margin: 0;
  padding-left: 18px;
  font-size: var(--fs-xs);
  color: var(--ink-3);
}
.extra-card li { margin-bottom: 6px; }
.extra-card a  { color: var(--marigold); font-weight: 600; }

.related-section { margin-top: 72px; }
.not-found { padding: 110px 0; }

/* ══════════════════════════════════════════════════════════════
   FAQ — native <details>, so it works with JS disabled
   ══════════════════════════════════════════════════════════════ */
.faq-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 24px;
  align-items: start;
}
.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 4px 24px;
  box-shadow: var(--shadow-xs);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.faq-item[open] { border-color: var(--gold); box-shadow: var(--shadow-sm); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 32px 20px 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-base);
  letter-spacing: -0.015em;
  color: var(--ink-strong);
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  color: var(--marigold-deep);
  transition: transform 0.25s var(--ease);
}
.faq-item[open] summary::after { content: "\2212"; transform: translateY(-50%) rotate(180deg); }
.faq-item summary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-xs);
}
.faq-item p {
  margin: 0 0 20px;
  font-size: var(--fs-sm);
  line-height: 1.72;
  color: var(--ink-3);
  max-width: 52ch;
}

/* ── 404 page ── */
.error-page { padding: 96px 0 110px; }
.error-page h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin-bottom: 14px; }
.error-page .cta-buttons { margin-top: 30px; justify-content: center; }
.error-links {
  margin-top: 56px;
  padding-top: 34px;
  border-top: 1px solid var(--border-2);
}
.error-links #errorCategoryLinks {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  justify-content: center;
}

/* ══════════════════════════════════════════════════════════════
   FLOATING CHAT WIDGET
   ══════════════════════════════════════════════════════════════ */
.chat-widget {
  position: fixed;
  right: 24px; bottom: 24px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.chat-fab {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--wa-fab);
  color: var(--wa-fab-ink);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(37,211,102,0.4);
  transition: transform 0.2s var(--ease-spring), box-shadow 0.2s ease;
}
.chat-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 28px rgba(37,211,102,0.5);
}
.chat-panel {
  width: 272px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.chat-panel-header {
  background: linear-gradient(135deg, var(--ink), var(--teal));
  padding: 18px 20px;
}
.chat-panel-header strong { display:block; color:#fff; margin-bottom:4px; font-size: var(--fs-sm); }
.chat-panel-header p { color:rgba(255,255,255,0.72); font-size: var(--fs-xs); margin:0; }
.chat-panel-body { padding: 10px; }
.chat-option {
  display: block;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--ink-3);
  transition: background 0.12s ease, color 0.12s ease, padding-left 0.12s ease;
}
.chat-option:hover { background: var(--bg-subtle); color: var(--ink); padding-left: 17px; }

/* ══════════════════════════════════════════════════════════════
   POLICIES PAGE
   ══════════════════════════════════════════════════════════════ */
.policies-page h1 { margin-bottom: 14px; }
.policy-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 24px 0 44px;
  padding: 18px 22px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-xs);
}
.policy-nav a { font-weight: 600; font-size: var(--fs-sm); color: var(--ink-3); transition: color 0.15s; }
.policy-nav a:hover { color: var(--ink); }
.policy-block { margin-bottom: 52px; scroll-margin-top: 100px; }
.policy-block h2 { font-size: var(--fs-xl); margin-bottom: 14px; }
.policy-block h3 {
  font-size: var(--fs-md);
  font-weight: 700;
  margin: 28px 0 10px;
  color: var(--ink-strong);
}
.policy-block h3:first-of-type { margin-top: 22px; }
.policy-block ul, .policy-block ol { padding-left: 20px; color: var(--ink-3); }
.policy-block li { margin-bottom: 9px; }
.policy-block a  { color: var(--marigold-deep); font-weight: 600; }
.policy-block em { color: var(--ink-2); font-style: italic; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — Tablet (≤ 980px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  .hero-inner          { grid-template-columns: 1fr; gap: 40px; }
  .hero-visual         { height: 320px; order: -1; }
  .category-grid       { grid-template-columns: repeat(4, 1fr); }
  .category-card:nth-child(1),
  .category-card:nth-child(2),
  .category-card:nth-child(n+3) { grid-column: span 2; }
  .steps-grid          { grid-template-columns: repeat(2, 1fr); gap: 36px 32px; }
  .steps-grid::before  { display: none; }
  .value-layout        { grid-template-columns: 1fr; gap: 40px; }
  .value-intro         { position: static; }
  .value-grid          { grid-template-columns: repeat(2, 1fr); }
  .feature-grid        { grid-template-columns: 1fr; }
  .feature-grid .product-card:first-child { grid-row: auto; padding: 40px 28px; }
  .section-head        { flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 40px; }
  .faq-list            { grid-template-columns: 1fr; }
  .testimonial-grid    { grid-template-columns: 1fr; }
  .testimonial-grid > :nth-child(2),
  .testimonial-grid > :nth-child(3) { margin-top: 0; }
  .occasion-inner      { grid-template-columns: 1fr; gap: 36px; }
  .footer-inner        { grid-template-columns: 1fr 1fr; }
  .product-grid        { grid-template-columns: repeat(2, 1fr); }
  .shop-layout         { grid-template-columns: 1fr; }

  /* Filters become an off-canvas drawer so products stay above the fold
     instead of being pushed down by a tall stack of filter controls. */
  .filters-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    color: var(--ink-2);
    cursor: pointer;
    box-shadow: var(--shadow-xs);
  }
  .filters-toggle .fcount {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    border-radius: var(--r-pill);
    background: var(--ink);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 600;
  }
  .filters-toggle .fcount:empty { display: none; }

  .filters {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: min(320px, 86vw);
    z-index: 200;
    border-radius: 0;
    border-left: 0; border-top: 0; border-bottom: 0;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.28s var(--ease);
    padding: 22px 20px 40px;
  }
  .filters.open { transform: translateX(0); box-shadow: var(--shadow-lg); }

  .filters-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 199;
    background: rgba(42,30,12,0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
  }
  .filters-backdrop.open { opacity: 1; pointer-events: auto; }

  .filters-close {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 20px;
    padding: 0 0 14px;
    border: 0;
    border-bottom: 1px solid var(--border-2);
    background: none;
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--ink);
    cursor: pointer;
  }
  .product-detail-grid { grid-template-columns: 1fr; }
  .product-extra-grid  { grid-template-columns: 1fr; }
  .trust-grid          { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile (≤ 720px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .main-nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(18px) saturate(1.1);
    -webkit-backdrop-filter: blur(18px) saturate(1.1);
    border-bottom: 1px solid var(--border-2);
    flex-direction: column;
    align-items: flex-start;
    padding: 18px 24px;
    gap: 4px;
    display: none;
    box-shadow: var(--shadow-lg);
  }
  .main-nav.open     { display: flex; }
  .nav-toggle        { display: flex; }
  .btn-whatsapp span { display: none; }
  .category-grid     { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .category-card:nth-child(1),
  .category-card:nth-child(2),
  .category-card:nth-child(n+3) { grid-column: span 1; }
  .category-card:nth-child(1) h3,
  .category-card:nth-child(2) h3 { font-size: 0.95rem; font-family: var(--font-body); font-weight: 600; }
  .category-card:nth-child(1) .category-icon-wrap,
  .category-card:nth-child(2) .category-icon-wrap { width: 68px; height: 68px; }
  .steps-grid        { grid-template-columns: 1fr; gap: 28px; }
  .step p            { max-width: none; }
  .value-grid        { grid-template-columns: 1fr; }
  .hero-visual       { grid-template-columns: 1fr 1fr; height: 280px; }
  .hero-card-1       { grid-row: span 2; }
  .feature-grid .product-card:not(:first-child) { grid-template-columns: 1fr; text-align: center; gap: 14px; }
  .feature-grid .product-card:not(:first-child) .product-card-icon { margin: 0 auto; }
  .footer-inner      { grid-template-columns: 1fr; }
  .section           { padding: 64px 0; }
  .product-grid      { grid-template-columns: 1fr; }
  .chat-widget       { right: 16px; bottom: 16px; }
  .chat-panel        { width: 240px; }
  .shop-toolbar      { grid-template-columns: 1fr; }
  .toolbar-right     { justify-content: space-between; }
  .sort-select       { flex: 1; min-width: 0; }
  .hero              { padding: 56px 0 48px; }
  .trust-grid        { grid-template-columns: 1fr 1fr; }
}