/* ============================================================
   Silvee Design System — Phase 1 Foundation
   Tokens, base typography, custom utilities, print styles.
   This file layers ON TOP of the legacy styles.css (kept as a
   reset/legacy layer until Phase 5). Tailwind via CDN handles
   utility classes; this file holds what Tailwind can't express.
   ============================================================ */

:root {
  /* Brand — Maroon scale */
  --silvee-maroon:      #84292B;
  --silvee-maroon-50:   #FBF1F1;
  --silvee-maroon-100:  #F5DCDC;
  --silvee-maroon-200:  #E8B0B1;
  --silvee-maroon-300:  #D88485;
  --silvee-maroon-400:  #C0595A;
  --silvee-maroon-500:  #A53D3F;
  --silvee-maroon-600:  #84292B;
  --silvee-maroon-700:  #6B2122;
  --silvee-maroon-800:  #511A1B;
  --silvee-maroon-900:  #371112;

  /* Neutrals — warm bias */
  --silvee-cream:       #FAF6EF;     /* primary background */
  --silvee-ivory:       #F2EBDE;     /* secondary surface */
  --silvee-bone:        #E8DFCB;     /* borders, dividers */
  --silvee-stone:       #766C5A;     /* muted text — WCAG AA (~4.6:1) on cream + white */
  --silvee-graphite:    #2A2522;     /* body text */
  --silvee-ink:         #1A1614;     /* headings */

  /* Accent — restrained antique gold for diamond / luxury cues */
  --silvee-gold:        #B69253;
  --silvee-gold-pale:   #E9DCC1;

  /* Semantic */
  --silvee-success:     #3F7B3F;
  --silvee-error:       #A53D3F;
  --silvee-warn:        #B68C32;

  /* Surfaces */
  --silvee-surface:      #FFFFFF;
  --silvee-surface-warm: #FAF6EF;

  /* Tailwind-bridge RGB triplets — these back the silvee-* Tailwind utilities
     (defined as rgb(var(--x-rgb) / <alpha-value>) in tailwind.config.js) so a
     white-label store can recolour the entire site by overriding them at :root
     at runtime (storefront-navbar.js injects an override from site_identity).
     Values mirror the hex vars above exactly, so the default render is
     unchanged. */
  --silvee-maroon-rgb: 132 41 43;
  --silvee-maroon-50-rgb: 251 241 241;
  --silvee-maroon-100-rgb: 245 220 220;
  --silvee-maroon-200-rgb: 232 176 177;
  --silvee-maroon-300-rgb: 216 132 133;
  --silvee-maroon-400-rgb: 192 89 90;
  --silvee-maroon-500-rgb: 165 61 63;
  --silvee-maroon-600-rgb: 132 41 43;
  --silvee-maroon-700-rgb: 107 33 34;
  --silvee-maroon-800-rgb: 81 26 27;
  --silvee-maroon-900-rgb: 55 17 18;
  --silvee-cream-rgb: 250 246 239;
  --silvee-ivory-rgb: 242 235 222;
  --silvee-bone-rgb: 232 223 203;
  --silvee-stone-rgb: 118 108 90;
  --silvee-graphite-rgb: 42 37 34;
  --silvee-ink-rgb: 26 22 20;
  --silvee-gold-rgb: 182 146 83;
  --silvee-gold-pale-rgb: 233 220 193;
  --silvee-success-rgb: 63 123 63;
  --silvee-error-rgb: 165 61 63;
  --silvee-warn-rgb: 182 140 50;
  --silvee-surface-rgb: 255 255 255;
  --silvee-surface-warm-rgb: 250 246 239;

  /* Fonts — overridable per brand (Tailwind font-serif/-sans read these) */
  --silvee-font-serif: "Cormorant Garamond", Georgia, serif;
  --silvee-font-sans:  Inter, -apple-system, system-ui, sans-serif;

  /* Focus + shadow */
  --silvee-focus-ring:  rgba(132, 41, 43, 0.4);
  --silvee-shadow-warm: rgba(42, 37, 34, 0.08);

  /* Containers */
  --silvee-container-narrow:  720px;
  --silvee-container-default: 1200px;
  --silvee-container-wide:    1440px;

  /* z-index scale */
  --silvee-z-base:    0;
  --silvee-z-sticky:  10;
  --silvee-z-overlay: 50;
  --silvee-z-modal:   100;
  --silvee-z-toast:   200;
}

/* ------------------------------------------------------------
   Base typography + motion (only applies on pages that
   explicitly opt in via the `data-silvee-design="on"` body
   attribute, so we don't fight the legacy styles on pages that
   haven't been rebuilt yet)
   ------------------------------------------------------------ */

html { scroll-behavior: smooth; }

/* Zoom is intentionally disabled site-wide (founder decision). The
   viewport meta tag handles the pinch-zoom and double-tap on mobile;
   storefront-navbar.js + admin-shell.js handle the desktop Ctrl+wheel
   and Ctrl+/- shortcuts. `touch-action: pan-x pan-y` here completes
   the picture by suppressing iOS Safari's two-finger pinch on the
   page body (with `manipulation` the gesture still produces a small
   zoom flash before being clamped). Scrolling is preserved. */
html, body { touch-action: pan-x pan-y; }

body[data-silvee-design] {
  background: var(--silvee-cream);
  color: var(--silvee-graphite);
  font-family: "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body[data-silvee-design] h1,
body[data-silvee-design] h2,
body[data-silvee-design] h3,
body[data-silvee-design] h4,
body[data-silvee-design] h5,
body[data-silvee-design] h6 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.005em;
  /* Color is intentionally NOT set here so Tailwind text-* utilities
     (e.g. text-silvee-ink, text-white) on individual headings can win
     without competing with a higher-specificity body[data-attr] selector. */
}

:focus-visible {
  outline: 2px solid var(--silvee-maroon);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ------------------------------------------------------------
   Custom utilities Tailwind can't comfortably express
   ------------------------------------------------------------ */

/* Skeleton shimmer — used by the Skeleton component */
.silvee-skeleton {
  background: linear-gradient(
    90deg,
    var(--silvee-ivory) 0%,
    var(--silvee-bone) 50%,
    var(--silvee-ivory) 100%
  );
  background-size: 200% 100%;
  animation: silvee-shimmer 1.4s ease-in-out infinite;
  border-radius: 4px;
}
@keyframes silvee-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Hover-zoom container for PDP images (Phase 2a builds the full version) */
.silvee-zoom {
  overflow: hidden;
  cursor: zoom-in;
}
.silvee-zoom img {
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: center center;
}
.silvee-zoom:hover img { transform: scale(1.6); }

/* Scroll-snap row used for mobile carousels (no autoplay carousels above the fold) */
.silvee-snap-row {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.silvee-snap-row::-webkit-scrollbar { display: none; }
.silvee-snap-row > * {
  flex: 0 0 78%;
  scroll-snap-align: start;
}
@media (min-width: 768px) {
  .silvee-snap-row > * { flex-basis: 32%; }
}

/* Accessible visually-hidden helper (screen readers only) */
.silvee-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;
}

/* Hide ONLY when JS hasn't kicked in yet (for instant-search panel, drawers, etc.) */
[data-silvee-hidden] { display: none !important; }

/* ------------------------------------------------------------
   Print styles (admin invoice page in Phase 3d)
   ------------------------------------------------------------ */
@media print {
  .silvee-no-print { display: none !important; }
  body { background: white; color: black; }
}

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

/* ------------------------------------------------------------
   Tiny built-in components that ship with the design system
   (these aren't full components — those live in /assets/js/
   components — but they need static CSS hooks)
   ------------------------------------------------------------ */

/* Promo / announcement bar */
.silvee-promo-bar {
  background: var(--silvee-maroon);
  color: #fff;
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
  font-weight: 500;
  line-height: 1.4;
  position: relative;
  z-index: var(--silvee-z-sticky);
}
.silvee-promo-bar-track {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 30px;
  padding: 0.3rem 2.4rem;
  text-align: center;
}
@media (max-width: 540px) {
  .silvee-promo-bar-track { min-height: 26px; font-size: 0.74rem; padding: 0.25rem 2rem; }
}
.silvee-promo-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateX(18px);
  transition: opacity 380ms ease, transform 420ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  padding: 0 2.4rem;
  will-change: transform, opacity;
}
.silvee-promo-slide[data-active="true"] {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .silvee-promo-slide { transform: none !important; transition: opacity 200ms ease; }
}
.silvee-promo-dismiss {
  position: absolute;
  top: 50%;
  right: 0.6rem;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  transition: background-color 150ms ease;
}
.silvee-promo-dismiss:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.silvee-promo-bar[data-dismissed="true"] { display: none; }

/* Sticky header — applied on scroll-y > 100px (the navbar JS toggles the class) */
.silvee-header {
  position: sticky;
  top: 0;
  z-index: var(--silvee-z-sticky);
  background: var(--silvee-cream);
  border-bottom: 1px solid transparent;
  transition: background-color 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.silvee-header[data-scrolled="true"] {
  background: var(--silvee-surface);
  border-bottom-color: var(--silvee-bone);
  box-shadow: 0 2px 8px -1px rgba(42, 37, 34, 0.06), 0 1px 3px -1px rgba(42, 37, 34, 0.04);
}

/* Mega-menu panel (desktop) — content-sized dropdown that anchors
   under the hovered <li>, not the full header width. */
.silvee-mega-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--silvee-surface);
  border: 1px solid var(--silvee-bone);
  border-radius: 8px;
  box-shadow: 0 12px 32px -6px rgba(42, 37, 34, 0.16), 0 6px 12px -3px rgba(42, 37, 34, 0.06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
  pointer-events: none;
  z-index: var(--silvee-z-overlay);
  width: max-content;
  max-width: min(900px, calc(100vw - 32px));
}
.silvee-mega-panel[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
/* If a deeply-right nav item would push the panel past the viewport
   edge, the inline `style` set by JS can override this — but the
   default left:0 covers everything left-of-center. */
.silvee-mega-grid {
  display: grid;
  gap: 1.5rem;
  padding: 1.25rem 1.4rem;
}
.silvee-mega-grid > div {
  min-width: 0;
}
.silvee-mega-grid .text-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--silvee-stone);
  margin: 0 0 0.65rem;
}
.silvee-mega-grid ul { margin: 0; padding: 0; list-style: none; }
.silvee-mega-grid ul li { margin: 0; }
.silvee-mega-grid ul li + li { margin-top: 0.45rem; }
.silvee-mega-grid ul li a {
  display: block;
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--silvee-graphite);
  text-decoration: none;
  transition: color 120ms ease;
}
.silvee-mega-grid ul li a:hover { color: var(--silvee-maroon); }

/* Mobile full-screen menu.
   We toggle visibility + opacity instead of transform: translateY because
   transform transitions on an inset:0 fixed element have proven unreliable
   in practice — the rule matches by specificity but the computed transform
   stays stuck at the closed value. visibility+opacity is the standard
   fade-in modal pattern, transitions cleanly, and doesn't depend on any
   ancestor not creating a new containing block. */
.silvee-mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--silvee-cream);
  z-index: var(--silvee-z-modal);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 0s linear 220ms;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.silvee-mobile-menu[data-open="true"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 220ms ease, visibility 0s linear 0s;
}

/* Floating WhatsApp button */
.silvee-wa-fab {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: #25D366;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px -4px rgba(37, 211, 102, 0.45), 0 4px 8px -2px rgba(0, 0, 0, 0.10);
  text-decoration: none;
  z-index: var(--silvee-z-overlay);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.silvee-wa-fab:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 32px -4px rgba(37, 211, 102, 0.55), 0 4px 8px -2px rgba(0, 0, 0, 0.12);
}
.silvee-wa-fab:active { transform: scale(0.96); }
.silvee-wa-fab svg { width: 28px; height: 28px; }

/* On mobile, hide the floating WhatsApp FAB on pages that have a sticky
   bottom action bar (.mobile-sticky-bar) — the FAB (z-overlay) otherwise
   floats over the right end of the primary CTA (Add to Bag / Checkout),
   covering it. WhatsApp stays reachable via the navbar + footer on every
   page, so nothing is lost. PDP already did this; cart has the same
   conflict (checkout.html doesn't render the FAB, but listed for safety). */
@media (max-width: 920px) {
  body[data-page="detail"] .silvee-wa-fab,
  body[data-page="cart"] .silvee-wa-fab,
  body[data-page="checkout"] .silvee-wa-fab { display: none; }
}

/* Spinners (Toast / Button loading) */
.silvee-spinner {
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  animation: silvee-spin 700ms linear infinite;
  display: inline-block;
}
@keyframes silvee-spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   Phase 2a — PDP layout glue
   The legacy storefront.js writes its own gallery slider into
   #productImage and its own price block into #productPrice.
   These rules adapt that legacy markup to the new Tailwind layout.
   ============================================================ */

/* Hide the empty thumbs column on PDP — storefront.js currently
   renders dots inside the slider instead. Phase 2a-v2 will swap
   to real vertical thumbs. */
body[data-page="detail"] #productImageThumbs:empty {
  display: none;
}

/* Make the legacy slider fill its new aspect-square container. */
body[data-page="detail"] #productImage .product-image-slider {
  width: 100%;
  height: 100%;
}
body[data-page="detail"] #productImage .product-image-viewport {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
body[data-page="detail"] #productImage .product-image-track {
  display: flex;
  height: 100%;
  transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
}
body[data-page="detail"] #productImage .product-image-slide {
  flex: 0 0 100%;
  height: 100%;
  margin: 0;
}
body[data-page="detail"] #productImage .product-image-main {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Override the legacy styles.css pill-chip background — the new PDP
   wants clean Apple-style dots without the chunky frame around them. */
body[data-page="detail"] #productImage .product-image-dots {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  z-index: 3;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  backdrop-filter: none !important;
}
body[data-page="detail"] #productImage .product-image-dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75) !important;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  padding: 0;
  opacity: 1 !important;
  transition: width 180ms ease, background-color 180ms ease;
}
body[data-page="detail"] #productImage .product-image-dot.active {
  width: 26px !important;
  background: var(--silvee-maroon, #84292B) !important;
  border-color: rgba(255, 255, 255, 0.9);
}

/* Price block — adopt the legacy classes into the new typography. */
body[data-page="detail"] #productPrice .detail-price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.6rem;
}
body[data-page="detail"] #productPrice .price-main {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--silvee-graphite);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
body[data-page="detail"] #productPrice .price-main.sale-price {
  color: var(--silvee-maroon);
}
body[data-page="detail"] #productPrice .price-strike {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1rem;
  color: var(--silvee-stone);
  text-decoration: line-through;
  font-weight: 500;
}
body[data-page="detail"] #productPrice .discount-chip {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  background: var(--silvee-maroon);
  color: #fff;
  border-radius: 4px;
}
body[data-page="detail"] #productPrice .savings-line {
  margin-top: 0.4rem;
  font-size: 0.875rem;
  color: var(--silvee-success);
  font-weight: 500;
}

/* Category badges from storefront.js */
body[data-page="detail"] #productCategories .badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 4px;
  background: var(--silvee-ivory);
  color: var(--silvee-graphite);
  border: 1px solid var(--silvee-bone);
}

/* Sale countdown — restyle inside the new buybox.
   Override the legacy bright-maroon look with a softer ivory card. */
/* Sale countdown — restyle inside the new buybox.
   Override the legacy bright-maroon look with a softer ivory card. */
body[data-page="detail"] .sale-countdown {
  background: var(--silvee-ivory);
  border: 1px solid var(--silvee-bone);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  color: var(--silvee-graphite);
}
body[data-page="detail"] .sale-countdown-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}
body[data-page="detail"] .sale-countdown-head strong {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--silvee-maroon);
  font-family: "Inter", system-ui, sans-serif;
}
body[data-page="detail"] .sale-countdown-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--silvee-maroon);
  animation: silvee-pulse 1.6s ease-in-out infinite;
}
@keyframes silvee-pulse {
  0%, 100% { opacity: 1;   transform: scale(1);   }
  50%      { opacity: 0.5; transform: scale(1.2); }
}
body[data-page="detail"] .sale-countdown-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}
body[data-page="detail"] .sale-countdown-cell {
  background: var(--silvee-surface);
  border: 1px solid var(--silvee-bone);
  border-radius: 6px;
  padding: 0.4rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}
body[data-page="detail"] .sale-countdown-cell strong {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--silvee-ink);
  line-height: 1;
}
body[data-page="detail"] .sale-countdown-cell span {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--silvee-stone);
}
body[data-page="detail"] .sale-countdown-track {
  margin-top: 0.7rem;
  height: 5px;
  background: var(--silvee-bone);
  border-radius: 999px;
  overflow: hidden;
}
body[data-page="detail"] .sale-countdown-track [data-countdown-progress] {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--silvee-maroon) 0%, #A0383A 100%);
  border-radius: 999px;
  transition: width 1s linear;
  position: relative;
  overflow: hidden;
}
/* Subtle shimmer over the progress bar so even a tiny remaining
   sliver near the end of the day still reads as alive. */
body[data-page="detail"] .sale-countdown-track [data-countdown-progress]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.45) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: silvee-countdown-shimmer 2.4s ease-in-out infinite;
}
@keyframes silvee-countdown-shimmer {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}

/* Specifications table (storefront.js writes meta-list with .meta-row items) */
body[data-page="detail"] #productMeta {
  display: grid;
  gap: 0.4rem;
}
body[data-page="detail"] #productMeta .meta-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--silvee-bone);
  font-size: 0.94rem;
}
body[data-page="detail"] #productMeta .meta-row:last-child {
  border-bottom: none;
}
body[data-page="detail"] #productMeta .meta-label {
  color: var(--silvee-stone);
  font-weight: 500;
  text-transform: capitalize;
}
body[data-page="detail"] #productMeta .meta-value {
  color: var(--silvee-graphite);
}

/* Related products grid (#detailRecentlyViewedGrid) — the "You might also
   love" cards. Mirror the PLP shop-grid card styling exactly so they look
   identical: same frame, body padding, 1-line bold title, and price sizes. */
/* Column layout: match the PLP — 2-up on mobile, 3-up on desktop. styles.css
   otherwise targets this grid with auto-fill minmax(220px), which collapses
   to a single full-width column on phones. The #id.grid selector outranks
   that rule. */
body[data-page="detail"] #detailRecentlyViewedGrid.grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (min-width: 1024px) {
  body[data-page="detail"] #detailRecentlyViewedGrid.grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
  }
}
body[data-page="detail"] #detailRecentlyViewedGrid .product-card {
  background: var(--silvee-surface);
  border: 1px solid var(--silvee-bone);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 200ms cubic-bezier(0.22, 1, 0.36, 1), border-color 200ms ease;
}
body[data-page="detail"] #detailRecentlyViewedGrid .product-card:hover {
  box-shadow: 0 8px 24px -4px rgba(42, 37, 34, 0.08), 0 4px 8px -2px rgba(42, 37, 34, 0.04);
  border-color: var(--silvee-stone);
}
body[data-page="detail"] #detailRecentlyViewedGrid .product-card-image,
body[data-page="detail"] #detailRecentlyViewedGrid .product-card-media,
body[data-page="detail"] #detailRecentlyViewedGrid .image-wrap.product-card-media {
  aspect-ratio: 1 / 1;
  background: var(--silvee-ivory);
  position: relative;
  overflow: hidden;
}
body[data-page="detail"] #detailRecentlyViewedGrid .product-card-image img,
body[data-page="detail"] #detailRecentlyViewedGrid .product-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
body[data-page="detail"] #detailRecentlyViewedGrid .product-card:hover img {
  transform: scale(1.04);
}
body[data-page="detail"] #detailRecentlyViewedGrid .product-card-body {
  padding: 0.5rem 0.9rem 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}
body[data-page="detail"] #detailRecentlyViewedGrid .product-card-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--silvee-ink);
  line-height: 1.3;
  margin: 0;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body[data-page="detail"] #detailRecentlyViewedGrid .product-card-price {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  flex-wrap: wrap;
  font-family: "Inter", system-ui, sans-serif;
}
body[data-page="detail"] #detailRecentlyViewedGrid .product-card-price .price-main {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--silvee-graphite);
  white-space: nowrap;
}
body[data-page="detail"] #detailRecentlyViewedGrid .product-card-price .price-main.sale-price {
  color: var(--silvee-maroon);
}
body[data-page="detail"] #detailRecentlyViewedGrid .product-card-price .price-strike {
  font-size: 0.72rem;
  color: var(--silvee-stone);
  white-space: nowrap;
  text-decoration: line-through;
}

/* Breadcrumbs are toggleable site-wide from Admin → Content → Breadcrumbs.
   storefront.js adds .silvee-breadcrumbs-off to <html> when the saved
   setting is disabled; this hides the breadcrumb bar on every page. */
html.silvee-breadcrumbs-off nav[aria-label="Breadcrumb"] { display: none; }

/* ─── iOS input auto-zoom guard ─────────────────────────────────────────
   iOS zooms the whole page in when you focus a form control whose
   font-size is < 16px. Pin every text field / select / textarea to 16px on
   touch (and narrow) screens so tapping a field never triggers that zoom.
   We deliberately do NOT lock the viewport (maximum-scale / user-scalable)
   — pinch-zoom is kept enabled for low-vision users + product-image zoom
   (see the note at the top of storefront.js). 16px is the standard field
   size, so nothing about the layout changes. */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* Hide the legacy "container" wrapper if styles.css is interfering with our max-width inside main */
body[data-page="detail"] main.max-w-\[1200px\] .container {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Hide the legacy promo-bar that might still come from storefront.js into
   any nested slot (safety belt — should never fire). */
body[data-page="detail"] .promo-bar:not(.silvee-promo-bar) {
  display: none;
}

/* ============================================================
   Phase 2b — PLP layout glue
   Re-skin the legacy .page-chip / .filter-list items inside the
   new Tailwind layout. Storefront.js writes anchor/button chips
   into #categorySidebar / #tagSidebar / #collectionSidebar.
   ============================================================ */

body[data-page="listing"] .filter-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
body[data-page="listing"] .filter-list .page-chip,
body[data-page="listing"] .filter-list .tag-chip,
body[data-page="listing"] .filter-list .collection-chip {
  display: inline-flex;
  align-items: center;
  width: 100%;
  padding: 0.55rem 0.75rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--silvee-graphite);
  text-align: left;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
body[data-page="listing"] .filter-list .page-chip:hover,
body[data-page="listing"] .filter-list .tag-chip:hover,
body[data-page="listing"] .filter-list .collection-chip:hover {
  background: var(--silvee-ivory);
  color: var(--silvee-maroon);
}
body[data-page="listing"] .filter-list .page-chip.active,
body[data-page="listing"] .filter-list .tag-chip.active,
body[data-page="listing"] .filter-list .collection-chip.active {
  background: var(--silvee-maroon-50);
  color: var(--silvee-maroon);
  border-color: var(--silvee-maroon-200);
  font-weight: 600;
}

/* Active filter chips strip above grid */
body[data-page="listing"] #activeFilters .page-chip,
body[data-page="listing"] #activeFilters .tag-chip,
body[data-page="listing"] #activeFilters .collection-chip,
body[data-page="listing"] #activeFilters .filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem 0.65rem 0.3rem 0.75rem;
  background: var(--silvee-maroon-50);
  color: var(--silvee-maroon);
  border: 1px solid var(--silvee-maroon-200);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}
body[data-page="listing"] #activeFilters .page-chip:hover,
body[data-page="listing"] #activeFilters .tag-chip:hover,
body[data-page="listing"] #activeFilters .collection-chip:hover {
  background: var(--silvee-maroon-100);
}

/* Mobile filter drawer — when storefront.js makes #filtersPanel visible on mobile */
@media (max-width: 1023px) {
  body[data-page="listing"] #filtersPanel[style*="block"],
  body[data-page="listing"] #filtersPanel:not(.hidden):not([hidden]) {
    position: fixed !important;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 90vw);
    z-index: 50;
    background: var(--silvee-surface);
    box-shadow: -8px 0 24px -4px rgba(42, 37, 34, 0.10);
    padding: 1.25rem 1rem;
    overflow-y: auto;
    max-height: none;
  }
}

/* Mobile sort menu */
body[data-page="listing"] .mobile-sort-menu:not(.hidden) {
  display: block;
}
body[data-page="listing"] .mobile-sort-menu .sort-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 0.875rem;
  color: var(--silvee-graphite);
  background: transparent;
  border: 0;
  cursor: pointer;
  border-bottom: 1px solid var(--silvee-bone);
}
body[data-page="listing"] .mobile-sort-menu .sort-option:last-child { border-bottom: 0; }
body[data-page="listing"] .mobile-sort-menu .sort-option:hover {
  background: var(--silvee-ivory);
}
body[data-page="listing"] .mobile-sort-menu .sort-option.active {
  color: var(--silvee-maroon);
  font-weight: 600;
}

/* ============================================================
   Phase 12 — filter sidebar redesign + active-filter chip bar.
   New chip + radio + link components used by the PLP sidebar.
   The old .page-chip / .tag-chip / .collection-chip rules above
   are kept for legacy callers; new code emits .silvee-filter-*.
   ============================================================ */

/* Filter group (the <details>) — softer divider + tighter heading */
body[data-page="listing"] .silvee-filter-group {
  border-color: var(--silvee-bone);
}
body[data-page="listing"] .silvee-filter-group > summary {
  padding: 0.15rem 0;
  font-size: 0.7rem;
  letter-spacing: 0.085em;
  color: var(--silvee-graphite);
}
body[data-page="listing"] .silvee-filter-group[open] > summary .silvee-filter-chev {
  transform: rotate(180deg);
}
body[data-page="listing"] .silvee-filter-group > summary::-webkit-details-marker {
  display: none;
}

/* Category links — primary navigation feel, not chip-like.
   The whole row is the click target so the count badge anchors to the
   right edge (justify-content: space-between) and the label gets a min-
   width:0 so long names truncate with an ellipsis instead of pushing
   the count off the rail. */
body[data-page="listing"] .silvee-filter-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.5rem 0.625rem;
  margin: 0 -0.625rem;
  border-radius: 6px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.86rem;
  color: var(--silvee-graphite);
  text-align: left;
  text-decoration: none;
  transition: background 140ms ease, color 140ms ease;
}
body[data-page="listing"] .silvee-filter-link-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-page="listing"] .silvee-filter-link:hover {
  background: var(--silvee-ivory);
  color: var(--silvee-maroon);
}
body[data-page="listing"] .silvee-filter-link.active {
  color: var(--silvee-maroon);
  font-weight: 600;
  background: var(--silvee-maroon-50);
}
body[data-page="listing"] .silvee-filter-link-count {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  color: var(--silvee-stone);
  font-weight: 500;
  letter-spacing: 0;
}
body[data-page="listing"] .silvee-filter-link.active .silvee-filter-link-count {
  color: var(--silvee-maroon-700);
}

/* Tag + collection chips — pill grid (multi-select, tactile) */
body[data-page="listing"] .silvee-filter-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
body[data-page="listing"] .silvee-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  background: var(--silvee-surface);
  border: 1px solid var(--silvee-bone);
  border-radius: 999px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--silvee-graphite);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
  -webkit-tap-highlight-color: transparent;
}
body[data-page="listing"] .silvee-filter-chip:hover {
  background: var(--silvee-ivory);
  border-color: var(--silvee-stone);
}
body[data-page="listing"] .silvee-filter-chip:focus-visible {
  outline: 2px solid var(--silvee-maroon);
  outline-offset: 2px;
}
body[data-page="listing"] .silvee-filter-chip.active {
  background: var(--silvee-maroon);
  border-color: var(--silvee-maroon);
  color: #fff;
  font-weight: 600;
}
body[data-page="listing"] .silvee-filter-chip.active::before {
  content: "✓";
  font-size: 0.7rem;
  line-height: 1;
  margin-right: 0.05rem;
}
body[data-page="listing"] .silvee-filter-chip-count {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--silvee-stone);
  background: var(--silvee-cream);
  padding: 0.08rem 0.42rem;
  border-radius: 999px;
  margin-left: 0.4rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}
body[data-page="listing"] .silvee-filter-chip.active .silvee-filter-chip-count {
  color: #fff;
  background: rgba(255, 255, 255, 0.22);
}

/* Radio rows — for Price + Material (single-select) */
body[data-page="listing"] .silvee-filter-list {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}
body[data-page="listing"] .silvee-filter-radio {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.625rem;
  margin: 0 -0.625rem;
  border-radius: 6px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.86rem;
  color: var(--silvee-graphite);
  cursor: pointer;
  transition: background 140ms ease;
}
body[data-page="listing"] .silvee-filter-radio:hover {
  background: var(--silvee-ivory);
}
body[data-page="listing"] .silvee-filter-radio input[type="radio"] {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--silvee-maroon);
  cursor: pointer;
}
body[data-page="listing"] .silvee-filter-radio:has(input:checked) {
  color: var(--silvee-maroon);
  font-weight: 600;
}

/* "+ N more" toggle for collapsed category lists */
body[data-page="listing"] .silvee-filter-link-more[hidden] { display: none; }
body[data-page="listing"] .silvee-filter-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.4rem;
  padding: 0.35rem 0;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--silvee-maroon);
  background: transparent;
  border: 0;
  cursor: pointer;
}
body[data-page="listing"] .silvee-filter-more-btn:hover { text-decoration: underline; }
body[data-page="listing"] .silvee-filter-more-btn:focus-visible {
  outline: 2px solid var(--silvee-maroon);
  outline-offset: 2px;
  border-radius: 4px;
}
body[data-page="listing"] .silvee-filter-more-chev {
  transition: transform 200ms ease;
  flex-shrink: 0;
}
body[data-page="listing"] .silvee-filter-more-btn[aria-expanded="true"] .silvee-filter-more-chev {
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
  body[data-page="listing"] .silvee-filter-more-chev { transition: none; }
}

/* Active filter chips bar (above grid) — removable pills */
body[data-page="listing"] #activeFilters {
  align-items: center;
}
body[data-page="listing"] #activeFilters.is-empty {
  display: none !important;
}
body[data-page="listing"] .silvee-active-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.55rem 0.32rem 0.8rem;
  background: var(--silvee-maroon-50);
  color: var(--silvee-maroon);
  border: 1px solid var(--silvee-maroon-200);
  border-radius: 999px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  line-height: 1;
  transition: background 140ms ease, color 140ms ease;
}
body[data-page="listing"] .silvee-active-chip:hover {
  background: var(--silvee-maroon);
  color: #fff;
  border-color: var(--silvee-maroon);
}
body[data-page="listing"] .silvee-active-chip:focus-visible {
  outline: 2px solid var(--silvee-maroon);
  outline-offset: 2px;
}
body[data-page="listing"] .silvee-active-chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1;
  background: rgba(132, 41, 43, 0.12);
}
body[data-page="listing"] .silvee-active-chip:hover .silvee-active-chip-x {
  background: rgba(255, 255, 255, 0.2);
}
body[data-page="listing"] .silvee-active-chip-clear {
  background: transparent;
  color: var(--silvee-stone);
  border: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0.32rem 0.4rem;
  border-radius: 4px;
}
body[data-page="listing"] .silvee-active-chip-clear:hover {
  background: transparent;
  color: var(--silvee-maroon);
}

/* Mobile Filter button — count pill showing how many filters are
   active. Hidden when 0 (matches the BlueStone / Tanishq pattern of
   surfacing the count at the trigger so a shopper knows whether to
   open the drawer at all). */
body[data-page="listing"] .silvee-mobile-filter-trigger.has-filters {
  border-color: var(--silvee-maroon);
  color: var(--silvee-maroon);
}
body[data-page="listing"] .silvee-mobile-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 2px;
  background: var(--silvee-maroon);
  color: #fff;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Product cards in the PLP grid — storefront.js renders .product-card via productCard() */
body[data-page="listing"] #productsGrid .product-card {
  background: var(--silvee-surface);
  border: 1px solid var(--silvee-bone);
  border-radius: 6px;
  overflow: hidden;
  transition: box-shadow 200ms cubic-bezier(0.22, 1, 0.36, 1), border-color 200ms ease;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
body[data-page="listing"] #productsGrid .product-card:hover {
  box-shadow: 0 8px 24px -4px rgba(42, 37, 34, 0.08), 0 4px 8px -2px rgba(42, 37, 34, 0.04);
  border-color: var(--silvee-stone);
}
body[data-page="listing"] #productsGrid .product-card-image,
body[data-page="listing"] #productsGrid .product-card-media,
body[data-page="listing"] #productsGrid .image-wrap.product-card-media {
  aspect-ratio: 1 / 1;
  background: var(--silvee-ivory);
  position: relative;
  overflow: hidden;
}
body[data-page="listing"] #productsGrid .product-card-image img,
body[data-page="listing"] #productsGrid .product-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
body[data-page="listing"] #productsGrid .product-card:hover img {
  transform: scale(1.04);
}
body[data-page="listing"] #productsGrid .product-card-body {
  /* Tighter top (was 0.85rem — too big a gap under the image) and a
     trimmed bottom (was 1rem — too much space under the price). */
  padding: 0.5rem 0.9rem 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}
/* Title: ONE line, ellipsis on overflow, a little smaller + bold. The
   render emits .product-card-title — the old .product-card-name rule here
   never matched it. This high-specificity selector also wins over the
   scattered styles.css title rules (incl. the mobile @media one). Scoped
   to the PLP grid: home/detail cards use a fixed 2-line title row, so a
   1-line title there would leave empty space. */
body[data-page="listing"] #productsGrid .product-card-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--silvee-ink);
  line-height: 1.3;
  margin: 0;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body[data-page="listing"] #productsGrid .product-card-price {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  /* Let the strikethrough wrap to its own line on a narrow card rather than
     forcing the रु prefix away from its amount. */
  flex-wrap: wrap;
  font-family: "Inter", system-ui, sans-serif;
}
body[data-page="listing"] #productsGrid .product-card-price .price-main {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--silvee-graphite);
  /* Keep the रु symbol on the same line as the value (both widths). */
  white-space: nowrap;
}
body[data-page="listing"] #productsGrid .product-card-price .price-main.sale-price {
  color: var(--silvee-maroon);
}
body[data-page="listing"] #productsGrid .product-card-price .price-strike {
  /* Original price reads a touch smaller than the sale price — clearer
     hierarchy, and the smaller pair fits on one line so it no longer wraps. */
  font-size: 0.72rem;
  color: var(--silvee-stone);
  text-decoration: line-through;
  white-space: nowrap;
}

/* Pager / Load More button */
body[data-page="listing"] #productsPager .pager-btn,
body[data-page="listing"] #productsPager .page-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  min-width: 44px;
  padding: 0 1rem;
  background: transparent;
  border: 1px solid var(--silvee-graphite);
  color: var(--silvee-graphite);
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
body[data-page="listing"] #productsPager .pager-btn:hover,
body[data-page="listing"] #productsPager .page-chip:hover {
  background: var(--silvee-ivory);
}
body[data-page="listing"] #productsPager .pager-btn.active,
body[data-page="listing"] #productsPager .page-chip.active {
  background: var(--silvee-maroon);
  color: #ffffff;
  border-color: var(--silvee-maroon);
}

/* Loading skeleton for product cards (storefront.js renderSkeletonCards) */
body[data-page="listing"] .product-card-skeleton,
body[data-page="listing"] .product-card.skeleton {
  background: var(--silvee-surface);
  border: 1px solid var(--silvee-bone);
  border-radius: 6px;
  overflow: hidden;
  pointer-events: none;
}
body[data-page="listing"] .product-card-skeleton .skeleton-image {
  aspect-ratio: 1 / 1;
  background: linear-gradient(90deg, var(--silvee-ivory) 0%, var(--silvee-bone) 50%, var(--silvee-ivory) 100%);
  background-size: 200% 100%;
  animation: silvee-shimmer 1.4s ease-in-out infinite;
}
body[data-page="listing"] .product-card-skeleton .skeleton-text {
  height: 14px;
  margin: 12px;
  background: linear-gradient(90deg, var(--silvee-ivory) 0%, var(--silvee-bone) 50%, var(--silvee-ivory) 100%);
  background-size: 200% 100%;
  animation: silvee-shimmer 1.4s ease-in-out infinite;
  border-radius: 4px;
}

/* The "No products matched" legacy fallback — match the new empty state look */
body[data-page="listing"] #productsGrid > .alert.err {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem 1.5rem;
  background: var(--silvee-surface);
  border: 1px solid var(--silvee-bone);
  border-radius: 6px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--silvee-ink);
}

/* ──────────────────────────────────────────────────────────────
   Phase 2d — Instant search overlay
   ────────────────────────────────────────────────────────────── */
.silvee-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: none;
  pointer-events: none;
}
.silvee-search-overlay[data-open="true"] {
  display: block;
  pointer-events: auto;
}
.silvee-search-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 22, 20, 0.40);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 200ms ease;
}
.silvee-search-overlay[data-open="true"] .silvee-search-backdrop { opacity: 1; }

.silvee-search-panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--silvee-surface);
  display: flex;
  flex-direction: column;
  transform: translateY(-12px);
  opacity: 0;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease;
}
.silvee-search-overlay[data-open="true"] .silvee-search-panel {
  transform: translateY(0);
  opacity: 1;
}
@media (min-width: 1024px) {
  .silvee-search-panel {
    left: 50%;
    right: auto;
    top: 24px;
    bottom: auto;
    transform: translateX(-50%) translateY(-12px);
    width: min(720px, calc(100vw - 32px));
    max-height: calc(100vh - 120px);
    border-radius: 12px;
    box-shadow: 0 24px 64px -8px rgb(42 37 34 / 0.18),
                0 8px 24px -4px rgb(42 37 34 / 0.10);
    overflow: hidden;
  }
  .silvee-search-overlay[data-open="true"] .silvee-search-panel {
    transform: translateX(-50%) translateY(0);
  }
}

.silvee-search-input-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1rem;
  border-bottom: 1px solid var(--silvee-bone);
}
.silvee-search-icon {
  color: var(--silvee-stone);
  display: inline-flex;
}
.silvee-search-input-row input[type="search"] {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1rem;
  color: var(--silvee-ink);
  padding: 0.5rem 0;
}
.silvee-search-input-row input[type="search"]::placeholder {
  color: var(--silvee-stone);
  font-style: normal;
}
.silvee-search-input-row input[type="search"]::-webkit-search-cancel-button { display: none; }
.silvee-search-clear,
.silvee-search-close {
  background: transparent;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--silvee-graphite);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
}
.silvee-search-clear:hover,
.silvee-search-close:hover { background: var(--silvee-ivory); }
.silvee-search-close-icon { display: none; }
@media (max-width: 1023.98px) {
  .silvee-search-close-label { display: none; }
  .silvee-search-close-icon { display: inline-flex; }
}
.silvee-search-close-label {
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0 0.25rem;
}

.silvee-search-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.25rem 1.5rem;
}
.silvee-search-section { display: block; }
.silvee-search-section.hidden { display: none; }

.silvee-search-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--silvee-bone);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--silvee-graphite);
  background: var(--silvee-surface);
  text-decoration: none;
  transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}
.silvee-search-chip:hover {
  border-color: var(--silvee-maroon);
  color: var(--silvee-maroon);
  background: var(--silvee-cream);
}

.silvee-search-recent-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.25rem;
  font-size: 0.9375rem;
  color: var(--silvee-graphite);
  text-decoration: none;
  border-radius: 4px;
}
.silvee-search-recent-item:hover {
  color: var(--silvee-maroon);
  background: var(--silvee-cream);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.silvee-search-result-item {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.5rem;
  border-radius: 6px;
  text-decoration: none;
  transition: background 150ms ease;
}
.silvee-search-result-item:hover { background: var(--silvee-cream); }
.silvee-search-result-img {
  width: 56px;
  height: 56px;
  border-radius: 4px;
  background: var(--silvee-ivory);
  object-fit: cover;
  flex-shrink: 0;
}
.silvee-search-result-meta { min-width: 0; }
.silvee-search-result-name {
  font-size: 0.9375rem;
  color: var(--silvee-ink);
  font-weight: 500;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.silvee-search-result-price {
  font-size: 0.8125rem;
  color: var(--silvee-stone);
  margin: 0;
  margin-top: 2px;
}

.silvee-search-view-all {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--silvee-maroon);
  text-decoration: none;
  padding: 0.75rem 0 0;
}
.silvee-search-view-all:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ──────────────────────────────────────────────────────────────
   Phase 2e — Cart page
   ────────────────────────────────────────────────────────────── */
.silvee-cart-item {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  background: var(--silvee-surface);
  border: 1px solid var(--silvee-bone);
  border-radius: 8px;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.silvee-cart-item:hover {
  border-color: var(--silvee-bone);
  box-shadow: 0 2px 8px -1px rgb(42 37 34 / 0.06);
}
.silvee-cart-item-thumb {
  display: block;
  width: 96px;
  height: 96px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--silvee-ivory);
}
.silvee-cart-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.silvee-cart-item-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.silvee-cart-item-name {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--silvee-ink);
  text-decoration: none;
  line-height: 1.25;
  /* Cap to 2 lines so a long-format product name like
     "Aniya Diamond Solitaire Engagement Ring — White Gold 18KT" doesn't
     push the qty stepper + price column off the visible card. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.silvee-cart-item-name:hover { color: var(--silvee-maroon); }
.silvee-cart-item-sku {
  font-size: 0.75rem;
  color: var(--silvee-stone);
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.02em;
}
.silvee-cart-item-price {
  font-size: 0.9375rem;
  color: var(--silvee-graphite);
  font-weight: 500;
  margin: 0.25rem 0 0;
}
.silvee-cart-item-price.is-sale { color: var(--silvee-maroon); }
.silvee-cart-item-was {
  font-size: 0.8125rem;
  color: var(--silvee-stone);
  margin-left: 0.4rem;
  font-weight: 400;
}
.silvee-cart-item-each {
  font-size: 0.75rem;
  color: var(--silvee-stone);
  font-weight: 400;
}
.silvee-cart-item-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}
.silvee-cart-item-line-total {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.25rem;
  color: var(--silvee-ink);
  font-weight: 500;
  white-space: nowrap;
  align-self: flex-start;
  text-align: right;
}
@media (max-width: 639.98px) {
  .silvee-cart-item {
    grid-template-columns: 80px 1fr;
    grid-template-rows: auto auto;
    gap: 0.75rem 1rem;
  }
  .silvee-cart-item-thumb {
    width: 80px;
    height: 80px;
    grid-row: span 2;
  }
  .silvee-cart-item-line-total {
    grid-column: 2;
    grid-row: 2;
    text-align: left;
    font-size: 1.125rem;
    margin-top: -0.25rem;
  }
}

.silvee-qty-stepper {
  display: inline-flex;
  align-items: center;
  height: 36px;
  border: 1px solid var(--silvee-bone);
  border-radius: 4px;
  overflow: hidden;
  background: var(--silvee-surface);
}
.silvee-qty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 100%;
  background: transparent;
  border: 0;
  color: var(--silvee-graphite);
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.silvee-qty-btn:hover {
  background: var(--silvee-cream);
  color: var(--silvee-maroon);
}
.silvee-qty-value {
  min-width: 32px;
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--silvee-ink);
  user-select: none;
}

.silvee-cart-remove {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: transparent;
  border: 0;
  color: var(--silvee-stone);
  padding: 0.5rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8125rem;
}
.silvee-cart-remove:hover { color: var(--silvee-maroon); background: var(--silvee-cream); }
@media (max-width: 639.98px) {
  .silvee-cart-remove-label { display: none; }
}

/* Cart options (gift wrap, note) */
.silvee-cart-option {
  background: var(--silvee-surface);
  border: 1px solid var(--silvee-bone);
  border-radius: 8px;
  overflow: hidden;
}
.silvee-cart-option-summary {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  cursor: pointer;
  list-style: none;
}
.silvee-cart-option-summary::-webkit-details-marker { display: none; }
.silvee-cart-option-check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--silvee-stone);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  transition: background 150ms ease, border-color 150ms ease;
}
.silvee-cart-option[open] .silvee-cart-option-check {
  background: var(--silvee-maroon);
  border-color: var(--silvee-maroon);
}
.silvee-cart-option[open] .silvee-cart-option-check::after {
  content: '';
  width: 6px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg) translate(-1px, -1px);
}
.silvee-cart-note-body {
  padding: 0 1rem 1rem;
}
.silvee-cart-note-textarea {
  width: 100%;
  padding: 0.75rem;
  background: var(--silvee-cream);
  border: 1px solid var(--silvee-bone);
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--silvee-ink);
  resize: vertical;
  min-height: 80px;
}
.silvee-cart-note-textarea:focus {
  outline: none;
  border-color: var(--silvee-maroon);
  background: var(--silvee-surface);
  /* Box-shadow ring as a focus indicator replacement — the bare
     border-color flip alone wasn't enough for keyboard users to
     spot which element had focus. Matches the same maroon halo
     pattern used on checkout fields + notify modal inputs. */
  box-shadow: 0 0 0 3px rgb(132 41 43 / 0.12);
}
.silvee-cart-note-count {
  text-align: right;
  font-size: 0.75rem;
  color: var(--silvee-stone);
  margin: 0.5rem 0 0;
}

/* Summary card */
.silvee-cart-summary {
  background: var(--silvee-surface);
  border: 1px solid var(--silvee-bone);
  border-radius: 8px;
  padding: 1.5rem;
}

/* Mobile sticky checkout bar */
.silvee-cart-mobile-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--silvee-surface);
  border-top: 1px solid var(--silvee-bone);
  box-shadow: 0 -4px 16px -4px rgb(42 37 34 / 0.10);
  z-index: 40;
  padding: env(safe-area-inset-bottom);
}
.silvee-cart-mobile-bar.hidden { display: none; }
.silvee-cart-mobile-bar-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
}
.silvee-cart-mobile-bar-meta {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.silvee-cart-mobile-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 48px;
  padding: 0 1.25rem;
  background: var(--silvee-maroon);
  color: #fff;
  border: 0;
  border-radius: 4px;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 150ms ease;
}
.silvee-cart-mobile-cta:hover { background: var(--silvee-maroon-700); }

/* Empty cart bestseller cards */
.silvee-cart-bestseller {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--silvee-bone);
  border-radius: 6px;
  overflow: hidden;
  background: var(--silvee-surface);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.silvee-cart-bestseller:hover {
  border-color: var(--silvee-maroon);
  box-shadow: 0 2px 8px -1px rgb(42 37 34 / 0.08);
}
.silvee-cart-bestseller-img {
  aspect-ratio: 1 / 1;
  background: var(--silvee-ivory);
  overflow: hidden;
}
.silvee-cart-bestseller-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.silvee-cart-bestseller-name {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1rem;
  color: var(--silvee-ink);
  margin: 0;
  padding: 0.5rem 0.75rem 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.silvee-cart-bestseller-price {
  font-size: 0.8125rem;
  color: var(--silvee-graphite);
  margin: 0;
  padding: 0.125rem 0.75rem 0.75rem;
}

/* Money prefix tweak inside summary totals */
.silvee-cart-summary .money-prefix {
  font-size: 0.8em;
  color: var(--silvee-stone);
  margin-right: 0.125rem;
}

/* ──────────────────────────────────────────────────────────────
   Phase 2f — Checkout page
   ────────────────────────────────────────────────────────────── */

/* Simplified header */
.silvee-checkout-header {
  background: var(--silvee-surface);
  border-bottom: 1px solid var(--silvee-bone);
  position: sticky;
  top: 0;
  z-index: 30;
}
.silvee-checkout-brand img { display: block; }
.silvee-checkout-secure {
  color: var(--silvee-graphite);
}

/* Form sections — compacted Phase 6. Padding + gap trimmed so two
   sections (Your details + Payment) fit above the fold on a 13"
   laptop. The title bottom-border was removed in favor of a single
   inline-flex header with a smaller numbered badge; the section now
   reads as one tight block instead of "title divider rule, then
   form" with an artificial mid-section line. */
.silvee-checkout-section {
  background: var(--silvee-surface);
  border: 1px solid var(--silvee-bone);
  border-radius: 10px;
  padding: 1.125rem 1.25rem 1.25rem;
  margin-bottom: 0.75rem;
}
.silvee-checkout-section-title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--silvee-ink);
  margin: 0 0 0.875rem;
  padding: 0;
  border: 0;
  width: 100%;
  line-height: 1.1;
}
.silvee-checkout-section-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--silvee-maroon);
  color: #fff;
  border-radius: 999px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  flex-shrink: 0;
}
.silvee-checkout-section-sub {
  font-size: 0.875rem;
  color: var(--silvee-stone);
  margin: 0 0 1rem 0;
}

/* Grid layout for fields */
.silvee-checkout-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 0.75rem;
}
@media (max-width: 639.98px) {
  .silvee-checkout-grid { grid-template-columns: 1fr; }
}

.silvee-checkout-field {
  display: flex;
  flex-direction: column;
}
.silvee-checkout-field-full { grid-column: 1 / -1; }

.silvee-checkout-label {
  font-size: 0.8125rem;
  color: var(--silvee-graphite);
  font-weight: 500;
  margin-bottom: 0.3rem;
  letter-spacing: 0.01em;
}
.silvee-checkout-help {
  font-size: 0.75rem;
  color: var(--silvee-stone);
  margin-top: 0.375rem;
}

/* Inputs and selects */
.silvee-checkout-field input[type="text"],
.silvee-checkout-field input[type="email"],
.silvee-checkout-field input[type="tel"],
.silvee-checkout-field select {
  height: 42px;
  padding: 0 0.75rem;
  background: var(--silvee-cream);
  border: 1px solid var(--silvee-bone);
  border-radius: 6px;
  font-size: 0.9375rem;
  color: var(--silvee-ink);
  font-family: inherit;
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
  width: 100%;
}
.silvee-checkout-field textarea {
  min-height: 64px;
  padding: 0.5rem 0.75rem;
  background: var(--silvee-cream);
  border: 1px solid var(--silvee-bone);
  border-radius: 6px;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--silvee-ink);
  font-family: inherit;
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
  width: 100%;
  resize: vertical;
}
.silvee-checkout-field input:focus,
.silvee-checkout-field select:focus,
.silvee-checkout-field textarea:focus {
  outline: none;
  border-color: var(--silvee-maroon);
  background: var(--silvee-surface);
  box-shadow: 0 0 0 3px rgb(132 41 43 / 0.10);
}
/* Inline validation states (storefront.js toggles these). !important so an
   invalid field stays red and a valid one green even while focused. */
.silvee-checkout-field input.silvee-field-invalid,
.silvee-checkout-field textarea.silvee-field-invalid {
  border-color: var(--silvee-error) !important;
  box-shadow: 0 0 0 3px rgb(165 61 63 / 0.15) !important;
}
.silvee-checkout-field input.silvee-field-valid,
.silvee-checkout-field textarea.silvee-field-valid {
  border-color: var(--silvee-success) !important;
  box-shadow: 0 0 0 3px rgb(63 123 63 / 0.13) !important;
}
.silvee-checkout-field input:disabled,
.silvee-checkout-field select:disabled,
.silvee-checkout-field textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.silvee-checkout-field input:invalid:not(:placeholder-shown):not(:focus),
.silvee-checkout-field textarea:invalid:not(:placeholder-shown):not(:focus) {
  border-color: var(--silvee-error);
}

/* Phone row with country prefix */
.silvee-checkout-phone-row {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--silvee-bone);
  border-radius: 6px;
  overflow: hidden;
  background: var(--silvee-cream);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.silvee-checkout-phone-row:focus-within {
  border-color: var(--silvee-maroon);
  background: var(--silvee-surface);
  box-shadow: 0 0 0 3px rgb(132 41 43 / 0.10);
}
.silvee-checkout-phone-prefix {
  display: inline-flex;
  align-items: center;
  padding: 0 0.75rem;
  background: var(--silvee-ivory);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--silvee-graphite);
  border-right: 1px solid var(--silvee-bone);
  white-space: nowrap;
}
.silvee-checkout-phone-row input {
  flex: 1;
  height: 42px;
  padding: 0 0.75rem;
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 0.9375rem;
  color: var(--silvee-ink);
}

/* Delivery info strip — Phase 6 compaction. The earlier delivery
   card was an 80-px tall block with a 36-px circular icon + serif
   headline; now it's a single inline-flex strip the same height as
   a form input row, sitting just under the address fields as
   visual reassurance. The kept-icon-color and brand serif still
   carry the Silvee tone. */
.silvee-checkout-delivery-strip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.85rem 0 0;
  padding: 0.3rem 0.7rem;
  background: rgba(63, 123, 63, 0.07);
  border: 1px solid rgba(63, 123, 63, 0.2);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--silvee-graphite);
  letter-spacing: 0.01em;
}
.silvee-checkout-delivery-strip svg { flex-shrink: 0; }
/* Legacy class kept for backwards-compat in case anyone else renders it. */
.silvee-checkout-delivery-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: rgba(63, 123, 63, 0.06);
  border: 1px solid rgba(63, 123, 63, 0.30);
  border-radius: 8px;
  padding: 0.625rem 0.875rem;
}
.silvee-checkout-delivery-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--silvee-surface);
  border-radius: 999px;
}
.silvee-checkout-delivery-eta {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1rem;
  font-weight: 500;
  color: var(--silvee-ink);
  margin: 0;
}
.silvee-checkout-delivery-sub {
  font-size: 0.75rem;
  color: var(--silvee-graphite);
  margin: 0.125rem 0 0;
}

/* Payment cards — Phase 6 compaction. The list now uses a 2-col
   grid on tablet+desktop (`.silvee-checkout-payment-list-grid` is
   the opt-in modifier the storefront sets) so 5 methods fit in 3
   rows instead of 5, saving ~130px of vertical space without
   shrinking individual tap targets. The card itself is also tighter:
   56-px logo column (was 72), 0.75rem padding (was 0.875rem). */
.silvee-checkout-payment-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.silvee-checkout-payment-list-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}
@media (min-width: 640px) {
  .silvee-checkout-payment-list-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.silvee-checkout-payment-option {
  display: block;
  cursor: pointer;
}
.silvee-checkout-payment-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.silvee-checkout-payment-card {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.875rem;
  border: 1.5px solid var(--silvee-bone);
  background: var(--silvee-surface);
  border-radius: 8px;
  min-height: 60px;
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}
.silvee-checkout-payment-option:hover .silvee-checkout-payment-card {
  border-color: var(--silvee-stone);
  background: var(--silvee-cream);
}
.silvee-checkout-payment-option.is-selected .silvee-checkout-payment-card {
  border-color: var(--silvee-maroon);
  background: rgb(132 41 43 / 0.04);
  box-shadow: 0 0 0 2px rgb(132 41 43 / 0.08);
}
.silvee-checkout-payment-option input[type="radio"]:focus-visible ~ .silvee-checkout-payment-card {
  outline: 2px solid var(--silvee-maroon);
  outline-offset: 2px;
}
.silvee-checkout-payment-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  border-radius: 4px;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  padding: 0 0.5rem;
}
/* CyberSource (Credit/Debit Card) logo cluster — Phase 6 fix.
   VISA + MC side-by-side at the original pill size (~70 px combined)
   were overflowing the 56-px logo column and bleeding into the
   start of "Visa or Mastercard · processed by CyberSource", causing
   a visible text/pill overlap. Stack them vertically and shrink to
   a denser pill so they sit cleanly inside the 56-px cell. */
.silvee-checkout-payment-cards {
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0;
  width: 100%;
  height: auto;
  min-height: 32px;
}
.silvee-checkout-payment-cards .silvee-pay-pill {
  height: 16px;
  padding: 0 0.4rem;
  font-size: 0.6rem;
  line-height: 1;
  min-width: 38px;
  justify-content: center;
}
.silvee-checkout-payment-text strong {
  display: block;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--silvee-ink);
  margin: 0;
}
.silvee-checkout-payment-text small {
  font-size: 0.75rem;
  color: var(--silvee-stone);
}
/* Surcharge pill — appended by checkout.js when a payment method has a
   non-zero surcharge_percent. Replaces the inline style.cssText that
   the JS used to set so we keep the look in one place. */
.silvee-checkout-payment-surcharge {
  display: inline-block;
  margin-top: 2px;
  padding: 2px 6px;
  background: #f5e9d6;
  color: #7c5a18;
  border-radius: 3px;
  font-size: 0.7rem;
  font-weight: 600;
}
.silvee-checkout-payment-indicator {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--silvee-stone);
  border-radius: 999px;
  transition: border-color 150ms ease, background 150ms ease;
  position: relative;
}
.silvee-checkout-payment-option.is-selected .silvee-checkout-payment-indicator {
  border-color: var(--silvee-maroon);
  background: var(--silvee-maroon);
}
.silvee-checkout-payment-option.is-selected .silvee-checkout-payment-indicator::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 6px; height: 6px;
  background: var(--silvee-surface);
  border-radius: 999px;
}

/* Payment pills */
.silvee-pay-pill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 0.5rem;
  border-radius: 3px;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
}
.silvee-pay-visa { background: #1a1f71; color: #f7b600; }
.silvee-pay-mc   { background: #eb001b; color: #fff; }
.silvee-pay-esewa { background: #60bb46; color: #fff; }
.silvee-pay-khalti { background: #5c2d91; color: #fff; }
.silvee-pay-fonepay { background: #ed1c24; color: #fff; }
.silvee-pay-cod  { background: var(--silvee-graphite); color: #fff; }

/* Submit row */
.silvee-checkout-submit-row {
  margin-top: 1rem;
  text-align: center;
}
.silvee-checkout-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: 52px;
  padding: 0 1.25rem;
  background: var(--silvee-maroon);
  color: #fff;
  border: 0;
  border-radius: 6px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 150ms ease, opacity 150ms ease;
}
.silvee-checkout-submit-btn:hover { background: var(--silvee-maroon-700); }
.silvee-checkout-submit-btn:disabled {
  background: var(--silvee-stone);
  cursor: not-allowed;
  opacity: 0.7;
}
.silvee-checkout-submit-amount {
  font-weight: 600;
  letter-spacing: 0;
}
.silvee-checkout-submit-helper {
  margin-top: 0.625rem;
  font-size: 0.75rem;
  color: var(--silvee-stone);
  line-height: 1.5;
}
.silvee-checkout-draft-hint {
  margin-top: 0.25rem;
  font-size: 0.6875rem;
  color: var(--silvee-stone);
}

/* Summary card (desktop right column) — Phase 6 compaction.
   - Top sticky offset 96 → 80 so the card hugs the simplified header
   - Card padding 1.25rem 1.5rem 1.5rem → 1rem 1.25rem
   - Items list gap + bottom-margin tightened
   - Trust list now merges INTO this card as a small chip row at the
     bottom (was a separate sibling card with its own padding+border) */
.silvee-checkout-summary-col { align-self: start; position: sticky; top: 80px; }
.silvee-checkout-summary-card {
  background: var(--silvee-surface);
  border: 1px solid var(--silvee-bone);
  border-radius: 10px;
  padding: 1rem 1.25rem 1.125rem;
}
.silvee-checkout-summary-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--silvee-ink);
  margin: 0 0 0.875rem;
  line-height: 1.1;
}
.silvee-checkout-summary-items {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin: 0 0 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--silvee-bone);
}
.silvee-checkout-summary-item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 0.75rem;
  align-items: start;
}
.silvee-checkout-summary-item-thumb {
  position: relative;
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--silvee-ivory);
}
.silvee-checkout-summary-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.silvee-checkout-summary-item-qty {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: var(--silvee-graphite);
  color: #fff;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.silvee-checkout-summary-item-meta { min-width: 0; }
.silvee-checkout-summary-item-name {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 0.9375rem;
  color: var(--silvee-ink);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.2;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.silvee-checkout-summary-item-sku {
  font-size: 0.6875rem;
  color: var(--silvee-stone);
  margin: 0.125rem 0 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}
/* Price on its own line beneath the name + SKU. */
.silvee-checkout-summary-item-priceline {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.3rem 0 0;
}
.silvee-checkout-summary-item-price {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--silvee-ink);
}
.silvee-checkout-summary-item-price.is-sale { color: var(--silvee-maroon); }
.silvee-checkout-summary-item-was {
  font-size: 0.75rem;
  color: var(--silvee-stone);
  font-weight: 400;
}
/* Remove = a round bin button mirroring the slide-in cart drawer's trash
   control: quiet by default, maroon tint on hover/focus, 36px tap target. */
.silvee-checkout-summary-item-remove {
  align-self: center;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(132, 41, 43, 0.5);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease, transform 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
.silvee-checkout-summary-item-remove:hover,
.silvee-checkout-summary-item-remove:focus-visible {
  background: rgba(132, 41, 43, 0.09);
  color: var(--silvee-maroon);
  border-color: rgba(132, 41, 43, 0.18);
  outline: none;
}
.silvee-checkout-summary-item-remove:active { transform: scale(0.9); }

.silvee-checkout-summary-totals {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.silvee-checkout-summary-totals > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.silvee-checkout-summary-totals dt {
  font-size: 0.875rem;
  color: var(--silvee-graphite);
}
.silvee-checkout-summary-totals dd {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--silvee-ink);
  margin: 0;
}
/* Discount row — green text + inline mono pill for the coupon code. */
.silvee-checkout-summary-discount dt,
.silvee-checkout-summary-discount dd { color: var(--silvee-success); }
.silvee-checkout-summary-coupon {
  display: inline-block;
  font-family: "IBM Plex Mono", "SF Mono", monospace;
  font-size: 0.72rem;
  font-weight: 600;
  background: rgba(31, 107, 50, 0.10);
  color: var(--silvee-success);
  padding: 1px 6px;
  border-radius: 3px;
  letter-spacing: 0.04em;
  margin-left: 4px;
}
.silvee-checkout-summary-total {
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--silvee-bone);
}
.silvee-checkout-summary-total dt {
  font-size: 1rem;
  font-weight: 500;
  color: var(--silvee-graphite);
}
.silvee-checkout-summary-total dd {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--silvee-ink);
}

/* Trust list — Phase 6 compaction. Was a separate card under the
   order summary, now an inline chip row at the bottom of the
   summary card itself. Saves ~50px of vertical chrome (border +
   padding + radius + outer-gap) while still showing the four trust
   signals at a glance. */
.silvee-checkout-trust-list {
  margin: 0.875rem 0 0;
  padding: 0.75rem 0 0;
  border-top: 1px solid var(--silvee-bone);
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 0.875rem;
  font-size: 0.75rem;
  color: var(--silvee-graphite);
}
.silvee-checkout-trust-list li {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}

/* Mobile collapsible summary at top */
.silvee-checkout-mobile-summary { background: transparent; border: 0; border-radius: 0; }
.silvee-checkout-mobile-summary-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: var(--silvee-surface);
  border: 1px solid var(--silvee-bone);
  border-radius: 10px;
  cursor: pointer;
  list-style: none;
}
.silvee-checkout-mobile-summary-bar::-webkit-details-marker { display: none; }
.silvee-checkout-mobile-summary-action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--silvee-stone);
}
.silvee-checkout-mobile-summary[open] .silvee-checkout-mobile-summary-expand::before {
  content: "Hide";
}
.silvee-checkout-mobile-summary:not([open]) .silvee-checkout-mobile-summary-expand::before {
  content: "Show";
}
.silvee-checkout-mobile-summary-expand { font-size: 0; }
.silvee-checkout-mobile-summary-expand::before { font-size: 0.875rem; }
.silvee-checkout-mobile-summary[open] .silvee-checkout-mobile-summary-action svg { transform: rotate(180deg); }
.silvee-checkout-mobile-summary-action svg { transition: transform 200ms ease; }
.silvee-checkout-mobile-summary-body {
  background: var(--silvee-surface);
  border: 1px solid var(--silvee-bone);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  padding: 1rem 1.25rem 1.25rem;
  margin-top: -1px;
}

/* Mobile sticky bottom bar (Place Order) */
.silvee-checkout-mobile-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--silvee-surface);
  border-top: 1px solid var(--silvee-bone);
  box-shadow: 0 -4px 16px -4px rgb(42 37 34 / 0.10);
  z-index: 40;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
}
.silvee-checkout-mobile-cta {
  width: 100%;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem;
  background: var(--silvee-maroon);
  color: #fff;
  border: 0;
  border-radius: 6px;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 150ms ease;
}
.silvee-checkout-mobile-cta:hover { background: var(--silvee-maroon-700); }
.silvee-checkout-mobile-cta-amount {
  font-weight: 600;
  letter-spacing: 0;
}

/* Footer (minimal) — Phase 6 compaction. Margin-top + internal
   padding trimmed since the place-order button already provides
   visual closure; the footer is just a legal/contact reassurance
   strip. */
.silvee-checkout-footer {
  background: var(--silvee-surface);
  border-top: 1px solid var(--silvee-bone);
  margin-top: 1.25rem;
}
.silvee-checkout-footer > div:first-child {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

/* Money prefix tweak inside checkout totals */
.silvee-checkout-summary-total .money-prefix {
  font-size: 0.6em;
  color: var(--silvee-stone);
  margin-right: 0.125rem;
}

/* ──────────────────────────────────────────────────────────────
   Phase 2g — Order confirmation
   ────────────────────────────────────────────────────────────── */
.silvee-order-hero {
  text-align: center;
  padding: 2rem 1rem 2.5rem;
}
.silvee-order-check {
  display: inline-flex;
  width: 96px;
  height: 96px;
  align-items: center;
  justify-content: center;
  background: rgba(63, 123, 63, 0.10);
  color: var(--silvee-success);
  border-radius: 999px;
  margin-bottom: 1.25rem;
  animation: silvee-order-pop 600ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes silvee-order-pop {
  0%   { transform: scale(0.5); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}
.silvee-order-thanks {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 500;
  color: var(--silvee-ink);
  margin: 0;
  line-height: 1.2;
}
.silvee-order-number {
  margin: 0.875rem 0 0;
  font-size: 1rem;
  color: var(--silvee-graphite);
}
.silvee-order-number strong {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 500;
  color: var(--silvee-ink);
  letter-spacing: 0.02em;
}
.silvee-order-whatsapp {
  margin: 0.5rem 0 0;
  font-size: 0.9375rem;
  color: var(--silvee-graphite);
}
.silvee-order-eta {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: var(--silvee-stone);
}
.silvee-order-eta-label { font-weight: 500; color: var(--silvee-graphite); }
.silvee-order-eta strong { color: var(--silvee-ink); font-weight: 500; }

.silvee-order-payment-note {
  margin: 1.5rem auto 0;
  max-width: 540px;
}
.silvee-order-payment-callout {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  text-align: left;
  padding: 1rem 1.25rem;
  background: rgba(132, 41, 43, 0.04);
  border: 1px solid rgba(132, 41, 43, 0.20);
  border-radius: 10px;
}
.silvee-order-payment-callout.silvee-order-payment-cod {
  background: rgba(182, 146, 83, 0.10);
  border-color: rgba(182, 146, 83, 0.35);
}
.silvee-order-payment-callout p {
  font-size: 0.9375rem;
  color: var(--silvee-graphite);
  margin: 0;
  line-height: 1.55;
}
.silvee-order-payment-callout strong { color: var(--silvee-ink); font-weight: 500; }

.silvee-order-cta-row {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}
.silvee-order-cta-primary,
.silvee-order-cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 48px;
  padding: 0 1.5rem;
  border-radius: 6px;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.silvee-order-cta-primary {
  background: #25d366;
  color: #fff;
}
.silvee-order-cta-primary:hover { background: #1ebe5b; }
.silvee-order-cta-secondary {
  background: transparent;
  border: 1px solid var(--silvee-graphite);
  color: var(--silvee-graphite);
}
.silvee-order-cta-secondary:hover { background: var(--silvee-ivory); }

.silvee-order-error {
  margin-top: 1rem;
  padding: 0.875rem 1rem;
  background: rgba(165, 61, 63, 0.10);
  border: 1px solid rgba(165, 61, 63, 0.50);
  color: var(--silvee-error);
  border-radius: 8px;
  font-size: 0.875rem;
}

/* Order details accordion */
.silvee-order-details {
  margin-top: 1.5rem;
  background: var(--silvee-surface);
  border: 1px solid var(--silvee-bone);
  border-radius: 10px;
  overflow: hidden;
}
.silvee-order-details-summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.125rem 1.5rem;
  cursor: pointer;
}
.silvee-order-details-summary::-webkit-details-marker { display: none; }
.silvee-order-details-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--silvee-ink);
}
.silvee-order-details-chev { color: var(--silvee-stone); transition: transform 200ms ease; }
.silvee-order-details[open] .silvee-order-details-chev { transform: rotate(180deg); }
.silvee-order-details-body {
  padding: 0 1.5rem 1.5rem;
  border-top: 1px solid var(--silvee-bone);
}
.silvee-order-section-title {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.75rem;
  color: var(--silvee-stone);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 1.25rem 0 0.75rem;
}
.silvee-order-items {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.silvee-order-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: var(--silvee-cream);
  border-radius: 6px;
}
.silvee-order-item-meta { min-width: 0; }
.silvee-order-item-name {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1rem;
  color: var(--silvee-ink);
  font-weight: 500;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.silvee-order-item-sku {
  font-size: 0.75rem;
  color: var(--silvee-stone);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  margin: 0.125rem 0 0;
}
.silvee-order-item-price {
  font-size: 0.9375rem;
  color: var(--silvee-ink);
  font-weight: 500;
  white-space: nowrap;
}

.silvee-order-address {
  font-size: 0.9375rem;
  color: var(--silvee-graphite);
  line-height: 1.55;
}
.silvee-order-payment-label {
  font-size: 0.9375rem;
  color: var(--silvee-ink);
  font-weight: 500;
  margin: 0;
}
.silvee-order-status {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
  color: var(--silvee-stone);
}

.silvee-order-totals {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--silvee-bone);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.silvee-order-totals > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.875rem;
}
.silvee-order-totals dt { color: var(--silvee-graphite); }
.silvee-order-totals dd { color: var(--silvee-ink); font-weight: 500; margin: 0; }
.silvee-order-totals-total {
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--silvee-bone);
}
.silvee-order-totals-total dt { font-size: 1rem; }
.silvee-order-totals-total dd {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.5rem;
}

.silvee-order-note-block {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--silvee-cream);
  border-radius: 8px;
}
.silvee-order-note-pre {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.875rem;
  color: var(--silvee-graphite);
  white-space: pre-wrap;
  margin: 0.5rem 0 0;
}

/* Save order block */
.silvee-order-save {
  margin-top: 1.5rem;
  background: var(--silvee-surface);
  border: 1px solid var(--silvee-bone);
  border-radius: 10px;
  padding: 1.5rem;
  text-align: center;
}
.silvee-order-save-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--silvee-ink);
  margin: 0;
}
.silvee-order-save-sub {
  font-size: 0.875rem;
  color: var(--silvee-stone);
  margin: 0.5rem 0 1.25rem;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.55;
}
.silvee-order-save-form {
  display: flex;
  gap: 0.5rem;
  max-width: 420px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.silvee-order-save-form input {
  flex: 1;
  min-width: 200px;
  height: 44px;
  padding: 0 0.875rem;
  background: var(--silvee-cream);
  border: 1px solid var(--silvee-bone);
  border-radius: 6px;
  font-size: 0.9375rem;
}
.silvee-order-save-form input:focus {
  outline: none;
  border-color: var(--silvee-maroon);
  background: var(--silvee-surface);
  box-shadow: 0 0 0 3px rgb(132 41 43 / 0.10);
}
.silvee-order-save-form button {
  height: 44px;
  padding: 0 1.25rem;
  background: var(--silvee-maroon);
  color: #fff;
  border: 0;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 150ms ease;
}
.silvee-order-save-form button:hover { background: var(--silvee-maroon-700); }
.silvee-order-save-form button:disabled {
  background: var(--silvee-stone);
  cursor: not-allowed;
}
.silvee-order-save-msg {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
}

/* Social / share row */
.silvee-order-social {
  margin-top: 1.5rem;
  background: var(--silvee-surface);
  border: 1px solid var(--silvee-bone);
  border-radius: 10px;
  padding: 1.5rem;
  text-align: center;
}
.silvee-order-social-sub {
  font-size: 0.875rem;
  color: var(--silvee-stone);
  margin: 0.5rem 0 1.25rem;
}
.silvee-order-social-row {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.silvee-order-social-tile {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  background: var(--silvee-cream);
  border: 1px solid var(--silvee-bone);
  border-radius: 999px;
  color: var(--silvee-graphite);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}
.silvee-order-social-tile:hover {
  border-color: var(--silvee-maroon);
  color: var(--silvee-maroon);
  background: var(--silvee-cream);
}
.silvee-order-share {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding: 0.625rem 1.25rem;
  background: #25d366;
  color: #fff;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 150ms ease;
}
.silvee-order-share:hover { background: #1ebe5b; }

/* ──────────────────────────────────────────────────────────────
   Phase 2h — About page
   ────────────────────────────────────────────────────────────── */
.silvee-about-eyebrow {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--silvee-gold);
  margin: 0 0 0.75rem;
  font-weight: 500;
}
.silvee-about-h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.875rem, 3.5vw, 2.5rem);
  font-weight: 500;
  color: var(--silvee-ink);
  margin: 0 0 1.25rem;
  line-height: 1.15;
}
.silvee-about-h3 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  font-weight: 500;
  color: var(--silvee-ink);
  margin: 0;
  line-height: 1.2;
}

/* Hero */
.silvee-about-hero {
  position: relative;
  width: 100%;
  min-height: 64vh;
  max-height: 720px;
  overflow: hidden;
  background: var(--silvee-ink);
}
.silvee-about-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
}
.silvee-about-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(26, 22, 20, 0.85) 0%,
    rgba(26, 22, 20, 0.45) 45%,
    rgba(26, 22, 20, 0.15) 100%);
}
.silvee-about-hero-text {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 1.5rem 4rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 64vh;
}
.silvee-about-hero-eyebrow {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--silvee-gold-pale);
  margin: 0 0 0.75rem;
  font-weight: 500;
}
.silvee-about-hero-headline {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  font-weight: 500;
  color: #fff;
  line-height: 1.05;
  margin: 0;
  letter-spacing: -0.01em;
  max-width: 720px;
}

/* Sections common spacing */
.silvee-about-story,
.silvee-about-promise,
.silvee-about-process,
.silvee-about-honesty,
.silvee-about-cta-band {
  padding: clamp(3rem, 7vw, 6rem) 0;
}

/* Story */
.silvee-about-story { background: var(--silvee-cream); }
.silvee-about-prose {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.silvee-about-prose p {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--silvee-graphite);
  font-weight: 400;
}
.silvee-about-prose strong {
  font-weight: 500;
  color: var(--silvee-ink);
}

/* Promise grid */
.silvee-about-promise { background: var(--silvee-ivory); }
.silvee-about-promise-grid {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.silvee-about-promise-card {
  background: var(--silvee-surface);
  border: 1px solid var(--silvee-bone);
  border-radius: 10px;
  padding: 1.75rem 1.5rem;
  text-align: center;
  transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
}
.silvee-about-promise-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px -4px rgb(42 37 34 / 0.08);
  border-color: var(--silvee-stone);
}
.silvee-about-promise-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--silvee-cream);
  margin-bottom: 1rem;
}
.silvee-about-promise-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--silvee-ink);
  margin: 0 0 0.5rem;
}
.silvee-about-promise-text {
  font-size: 0.875rem;
  color: var(--silvee-graphite);
  margin: 0;
  line-height: 1.55;
}

/* Store band */
.silvee-about-store {
  position: relative;
  background: var(--silvee-ink);
  min-height: 480px;
  display: grid;
  align-items: end;
}
.silvee-about-store-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.65;
}
.silvee-about-store-card {
  position: relative;
  z-index: 1;
  max-width: 480px;
  margin: 0 auto;
  background: var(--silvee-surface);
  padding: 2rem 1.75rem;
  border-radius: 12px;
  box-shadow: 0 16px 48px -8px rgb(26 22 20 / 0.30);
  transform: translateY(60px);
}
.silvee-about-store-meta {
  margin: 1rem 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  font-size: 0.9375rem;
  color: var(--silvee-graphite);
}
.silvee-about-store-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.silvee-about-store-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.silvee-about-cta-primary,
.silvee-about-cta-secondary,
.silvee-about-cta-ghost-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 44px;
  padding: 0 1.25rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.silvee-about-cta-primary {
  background: var(--silvee-maroon);
  color: #fff;
}
.silvee-about-cta-primary:hover { background: var(--silvee-maroon-700); }
.silvee-about-cta-secondary {
  background: transparent;
  border: 1px solid var(--silvee-graphite);
  color: var(--silvee-graphite);
}
.silvee-about-cta-secondary:hover { background: var(--silvee-ivory); }
.silvee-about-cta-ghost-light {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
}
.silvee-about-cta-ghost-light:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
}

/* Process */
.silvee-about-process { background: var(--silvee-cream); padding-top: clamp(5rem, 10vw, 9rem); }
.silvee-about-process-list {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 6vw, 5rem);
}
.silvee-about-process-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.silvee-about-process-row.is-reverse {
  direction: rtl;
}
.silvee-about-process-row.is-reverse > * {
  direction: ltr;
}
@media (max-width: 767.98px) {
  .silvee-about-process-row,
  .silvee-about-process-row.is-reverse {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    direction: ltr;
  }
}
.silvee-about-process-img {
  aspect-ratio: 5 / 4;
  overflow: hidden;
  border-radius: 10px;
  background: var(--silvee-ivory);
}
.silvee-about-process-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.silvee-about-process-row:hover .silvee-about-process-img img {
  transform: scale(1.03);
}
.silvee-about-process-num {
  display: inline-block;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--silvee-gold);
  margin-bottom: 0.625rem;
}
.silvee-about-process-text {
  margin: 0.875rem 0 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--silvee-graphite);
  max-width: 460px;
}

/* Honesty */
.silvee-about-honesty { background: var(--silvee-surface); }
.silvee-about-honesty-grid {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
.silvee-about-honesty-card {
  background: var(--silvee-cream);
  border: 1px solid var(--silvee-bone);
  border-radius: 12px;
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.silvee-about-honesty-emblem {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 500;
  letter-spacing: 0.06em;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  margin-bottom: 0.75rem;
  font-size: 0.9375rem;
}
.silvee-about-honesty-silver {
  background: rgba(168, 154, 130, 0.12);
  color: var(--silvee-stone);
  border: 1.5px solid rgba(168, 154, 130, 0.5);
}
.silvee-about-honesty-diamond {
  background: rgba(182, 146, 83, 0.15);
  color: var(--silvee-gold);
  border: 1.5px solid rgba(182, 146, 83, 0.55);
}
.silvee-about-honesty-text {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--silvee-graphite);
  margin: 0.25rem 0 0;
}
.silvee-about-honesty-text strong {
  font-weight: 500;
  color: var(--silvee-ink);
}
.silvee-about-honesty-link {
  margin-top: 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--silvee-maroon);
  text-decoration: none;
}
.silvee-about-honesty-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* CTA band */
.silvee-about-cta-band {
  background: linear-gradient(135deg, var(--silvee-graphite) 0%, var(--silvee-ink) 100%);
  color: #fff;
}
.silvee-about-cta-band .silvee-about-h2 { color: #fff; }
.silvee-about-cta-text {
  margin: 0.75rem auto 1.75rem;
  max-width: 540px;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
}
.silvee-about-cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

/* ──────────────────────────────────────────────────────────────
   Phase 2i — Find a Store (single-store hero treatment)
   ────────────────────────────────────────────────────────────── */

/* Hero photo */
.silvee-stores-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 60vh;
  overflow: hidden;
  background: var(--silvee-ink);
}
.silvee-stores-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.silvee-stores-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(26, 22, 20, 0) 50%, rgba(26, 22, 20, 0.30) 100%);
}

/* Offset store card */
.silvee-stores-card-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 1rem;
  margin-top: clamp(-80px, -8vw, -40px);
  position: relative;
  z-index: 5;
}
.silvee-stores-card {
  background: var(--silvee-surface);
  border-radius: 12px;
  padding: 2rem 1.75rem;
  box-shadow: 0 16px 48px -8px rgb(26 22 20 / 0.18), 0 4px 12px -4px rgb(26 22 20 / 0.08);
}
.silvee-stores-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 500;
  color: var(--silvee-ink);
  margin: 0.25rem 0 1.5rem;
  line-height: 1.15;
}
.silvee-stores-meta {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}
.silvee-stores-meta li {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  font-size: 0.9375rem;
  color: var(--silvee-graphite);
  line-height: 1.4;
}
.silvee-stores-meta-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--silvee-cream);
  color: var(--silvee-gold);
}
.silvee-stores-meta-strong {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 500;
  color: var(--silvee-ink);
}
.silvee-stores-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--silvee-bone);
}
.silvee-stores-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  height: 42px;
  padding: 0 1rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.silvee-stores-cta-primary {
  background: var(--silvee-maroon);
  color: #fff;
}
.silvee-stores-cta-primary:hover { background: var(--silvee-maroon-700); }
.silvee-stores-cta-secondary {
  background: transparent;
  border: 1px solid var(--silvee-bone);
  color: var(--silvee-graphite);
}
.silvee-stores-cta-secondary:hover {
  border-color: var(--silvee-graphite);
  background: var(--silvee-cream);
}
.silvee-stores-cta-whatsapp {
  background: #25d366;
  color: #fff;
}
.silvee-stores-cta-whatsapp:hover { background: #1ebe5b; }

/* Map */
.silvee-stores-map-wrap {
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: var(--silvee-cream);
}
.silvee-stores-map {
  margin-top: 1.5rem;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 480px;
  background: var(--silvee-ivory);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.silvee-stores-map-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: var(--silvee-stone);
  font-size: 0.875rem;
}
.silvee-stores-map-placeholder .silvee-skeleton {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.silvee-stores-map-placeholder p { position: relative; z-index: 1; background: rgba(255,255,255,0.7); padding: 0.25rem 0.75rem; border-radius: 999px; }

/* What to expect */
.silvee-stores-expect {
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: var(--silvee-surface);
}
.silvee-stores-expect-list {
  margin: 2rem auto 0;
  max-width: 760px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.silvee-stores-expect-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1rem 1.25rem;
  background: var(--silvee-cream);
  border: 1px solid var(--silvee-bone);
  border-radius: 8px;
  font-size: 0.9375rem;
  color: var(--silvee-graphite);
  line-height: 1.55;
}
.silvee-stores-expect-list li strong { color: var(--silvee-ink); font-weight: 500; }
.silvee-stores-expect-check {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(63, 123, 63, 0.10);
  color: var(--silvee-success);
  margin-top: 2px;
}

/* Gallery */
.silvee-stores-gallery-wrap {
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: var(--silvee-cream);
}
.silvee-stores-gallery {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px;
  gap: 0.75rem;
}
.silvee-stores-gallery-tile {
  display: block;
  overflow: hidden;
  border-radius: 8px;
  background: var(--silvee-ivory);
  cursor: zoom-in;
  position: relative;
}
.silvee-stores-gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.silvee-stores-gallery-tile:hover img { transform: scale(1.05); }
.silvee-stores-gallery-large {
  grid-row: span 2;
  grid-column: span 2;
}
@media (max-width: 767.98px) {
  .silvee-stores-gallery {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 160px;
  }
  .silvee-stores-gallery-large {
    grid-row: span 2;
    grid-column: span 2;
  }
}

/* Lightbox */
.silvee-lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.92);
  opacity: 0;
  transition: opacity 200ms ease;
}
.silvee-lightbox[data-open="true"] {
  display: flex;
  opacity: 1;
}
.silvee-lightbox-img {
  max-width: min(94vw, 1200px);
  max-height: 88vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 24px 48px -8px rgb(0 0 0 / 0.6);
}
.silvee-lightbox-close,
.silvee-lightbox-prev,
.silvee-lightbox-next {
  position: absolute;
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 150ms ease;
}
.silvee-lightbox-close:hover,
.silvee-lightbox-prev:hover,
.silvee-lightbox-next:hover { background: rgba(255, 255, 255, 0.2); }
.silvee-lightbox-close { top: 1rem; right: 1rem; }
.silvee-lightbox-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.silvee-lightbox-next { right: 1rem; top: 50%; transform: translateY(-50%); }
.silvee-lightbox-counter {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.875rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.05em;
}
@media (max-width: 639.98px) {
  .silvee-lightbox-prev { left: 0.5rem; }
  .silvee-lightbox-next { right: 0.5rem; }
}

/* ──────────────────────────────────────────────────────────────
   Phase 2j — Policy / Info page template
   ────────────────────────────────────────────────────────────── */
.silvee-policy-header {
  background: var(--silvee-cream);
  padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(1.5rem, 3vw, 2rem);
  border-bottom: 1px solid var(--silvee-bone);
}
.silvee-policy-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 500;
  color: var(--silvee-ink);
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.silvee-policy-updated {
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
  color: var(--silvee-stone);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.02em;
}

.silvee-policy-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 3rem;
  padding: clamp(2rem, 4vw, 3.5rem) 0;
}
@media (max-width: 1023.98px) {
  .silvee-policy-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* ToC */
.silvee-policy-toc {
  position: sticky;
  top: 96px;
  align-self: start;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
@media (max-width: 1023.98px) {
  .silvee-policy-toc {
    position: static;
    max-height: none;
  }
}
.silvee-policy-toc-mobile-summary {
  display: none;
}
@media (max-width: 1023.98px) {
  .silvee-policy-toc[data-mobile-collapsible] .silvee-policy-toc-mobile-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    background: var(--silvee-surface);
    border: 1px solid var(--silvee-bone);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--silvee-graphite);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .silvee-policy-toc[data-mobile-collapsible] .silvee-policy-toc-list {
    display: none;
    padding: 0.5rem;
    background: var(--silvee-surface);
    border: 1px solid var(--silvee-bone);
    border-top: 0;
    border-radius: 0 0 8px 8px;
    margin-top: -1px;
  }
  .silvee-policy-toc[data-mobile-collapsible][data-toc-open="true"] .silvee-policy-toc-list {
    display: block;
  }
  .silvee-policy-toc[data-mobile-collapsible][data-toc-open="true"] .silvee-policy-toc-mobile-summary svg { transform: rotate(180deg); }
  .silvee-policy-toc-mobile-summary svg { transition: transform 200ms ease; }
}
.silvee-policy-toc-title {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--silvee-stone);
  margin: 0 0 1rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--silvee-bone);
}
@media (max-width: 1023.98px) {
  .silvee-policy-toc-title { display: none; }
}
.silvee-policy-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.silvee-policy-toc-list a {
  display: block;
  padding: 0.5rem 0.75rem;
  border-left: 2px solid transparent;
  font-size: 0.875rem;
  color: var(--silvee-graphite);
  text-decoration: none;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
  border-radius: 0 4px 4px 0;
}
.silvee-policy-toc-list a:hover {
  color: var(--silvee-maroon);
  background: var(--silvee-cream);
}
.silvee-policy-toc-list a.is-active {
  color: var(--silvee-maroon);
  border-left-color: var(--silvee-maroon);
  font-weight: 500;
  background: var(--silvee-cream);
}

/* Content */
.silvee-policy-content {
  max-width: 65ch;
  color: var(--silvee-graphite);
  font-size: 1rem;
  line-height: 1.7;
}
.silvee-policy-content h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.5rem, 2.5vw, 1.875rem);
  font-weight: 500;
  color: var(--silvee-ink);
  margin: 2.5rem 0 1rem;
  scroll-margin-top: 96px;
}
.silvee-policy-content h2:first-child { margin-top: 0; }
.silvee-policy-content h3 {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--silvee-ink);
  margin: 1.5rem 0 0.5rem;
}
.silvee-policy-content p {
  margin: 0 0 1rem;
}
.silvee-policy-content ul,
.silvee-policy-content ol {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}
.silvee-policy-content li {
  margin: 0.375rem 0;
}
.silvee-policy-content strong {
  color: var(--silvee-ink);
  font-weight: 600;
}
.silvee-policy-content a {
  color: var(--silvee-maroon);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.silvee-policy-content a:hover { color: var(--silvee-maroon-700); }
.silvee-policy-content blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--silvee-gold);
  background: var(--silvee-cream);
  border-radius: 0 6px 6px 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.125rem;
  font-style: italic;
  color: var(--silvee-graphite);
}
.silvee-policy-content table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 1.5rem 0;
  font-size: 0.875rem;
  border: 1px solid var(--silvee-bone);
  border-radius: 8px;
  overflow: hidden;
}
.silvee-policy-content thead { background: var(--silvee-cream); }
.silvee-policy-content th,
.silvee-policy-content td {
  padding: 0.625rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--silvee-bone);
}
.silvee-policy-content tbody tr:last-child td { border-bottom: 0; }
.silvee-policy-content th {
  font-weight: 600;
  color: var(--silvee-ink);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Highlight call-out */
.silvee-policy-callout {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  background: rgba(63, 123, 63, 0.06);
  border: 1px solid rgba(63, 123, 63, 0.30);
  border-radius: 8px;
}
.silvee-policy-callout.is-warn {
  background: rgba(182, 140, 50, 0.08);
  border-color: rgba(182, 140, 50, 0.40);
}
.silvee-policy-callout p { margin: 0; font-size: 0.9375rem; color: var(--silvee-graphite); }
.silvee-policy-callout strong { font-weight: 500; color: var(--silvee-ink); }
.silvee-policy-callout svg { flex-shrink: 0; margin-top: 2px; }

/* WhatsApp CTA at the end of every page */
.silvee-policy-cta {
  margin-top: 2.5rem;
  padding: 1.5rem 1.75rem;
  background: var(--silvee-graphite);
  color: #fff;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
}
.silvee-policy-cta-text {
  flex: 1;
  min-width: 240px;
}
.silvee-policy-cta-text h3 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.5rem;
  font-weight: 500;
  margin: 0;
  color: #fff;
}
.silvee-policy-cta-text p {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.75);
}
.silvee-policy-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 44px;
  padding: 0 1.25rem;
  background: #25d366;
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background 150ms ease;
}
.silvee-policy-cta-btn:hover { background: #1ebe5b; }

/* FAQ specific styling */
.silvee-policy-faq-group {
  margin-bottom: 2rem;
}
.silvee-policy-faq-item {
  border-top: 1px solid var(--silvee-bone);
}
.silvee-policy-faq-item:last-child {
  border-bottom: 1px solid var(--silvee-bone);
}
.silvee-policy-faq-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  cursor: pointer;
  list-style: none;
  font-weight: 500;
  font-size: 1rem;
  color: var(--silvee-ink);
}
.silvee-policy-faq-summary::-webkit-details-marker { display: none; }
.silvee-policy-faq-summary svg { color: var(--silvee-stone); transition: transform 200ms ease; }
.silvee-policy-faq-item[open] .silvee-policy-faq-summary svg { transform: rotate(180deg); }
.silvee-policy-faq-body {
  padding: 0 0 1rem;
  color: var(--silvee-graphite);
  font-size: 0.9375rem;
  line-height: 1.7;
}
.silvee-policy-faq-body p { margin: 0 0 0.75rem; }
.silvee-policy-faq-body p:last-child { margin-bottom: 0; }

/* Buyback / pricing table emphasis (used on returns) */
.silvee-policy-table-hero {
  margin: 1.5rem 0;
  border: 1.5px solid var(--silvee-gold);
  border-radius: 10px;
  overflow: hidden;
  background: var(--silvee-surface);
}
.silvee-policy-table-hero table { margin: 0; border: 0; border-radius: 0; }
.silvee-policy-table-hero thead {
  background: linear-gradient(135deg, var(--silvee-gold) 0%, #d4b58c 100%);
}
.silvee-policy-table-hero th { color: #fff; }

/* ──────────────────────────────────────────────────────────────
   Phase 2k — 404 + 500 error pages
   ────────────────────────────────────────────────────────────── */
.silvee-error-main {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) 1rem clamp(3rem, 6vw, 4rem);
}
.silvee-error-card {
  background: var(--silvee-surface);
  border: 1px solid var(--silvee-bone);
  border-radius: 14px;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 3vw, 2.5rem);
  text-align: center;
  box-shadow: 0 4px 16px -4px rgb(42 37 34 / 0.05);
}
.silvee-error-code {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: clamp(2.75rem, 5vw, 4rem);
  font-weight: 500;
  color: var(--silvee-stone);
  letter-spacing: 0.08em;
  margin: 0 0 0.25rem;
  line-height: 1;
}
.silvee-error-code-warn { color: var(--silvee-warn); }
.silvee-error-card-500 { border-color: rgba(182, 140, 50, 0.40); }
.silvee-error-headline {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  font-weight: 500;
  color: var(--silvee-ink);
  margin: 0 0 0.875rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.silvee-error-sub {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--silvee-graphite);
  margin: 0 auto;
  max-width: 540px;
}
.silvee-error-cta-row {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.625rem;
}
.silvee-error-cta-primary,
.silvee-error-cta-secondary,
.silvee-error-cta-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  height: 46px;
  padding: 0 1.25rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.silvee-error-cta-primary {
  background: var(--silvee-maroon);
  color: #fff;
  border: 1px solid var(--silvee-maroon);
}
.silvee-error-cta-primary:hover { background: var(--silvee-maroon-700); border-color: var(--silvee-maroon-700); }
.silvee-error-cta-secondary {
  background: transparent;
  border: 1px solid var(--silvee-graphite);
  color: var(--silvee-graphite);
}
.silvee-error-cta-secondary:hover { background: var(--silvee-cream); }
.silvee-error-cta-whatsapp {
  background: #25d366;
  color: #fff;
  border: 1px solid #25d366;
}
.silvee-error-cta-whatsapp:hover { background: #1ebe5b; border-color: #1ebe5b; }

/* Featured collection cards on the error pages */
.silvee-error-collections {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.silvee-error-collections-title {
  text-align: center;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--silvee-stone);
  margin: 0 0 1.25rem;
  font-weight: 500;
}
.silvee-error-collections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.875rem;
}
.silvee-error-collection-tile {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 10px;
  background: var(--silvee-ivory);
  text-decoration: none;
}
.silvee-error-collection-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.silvee-error-collection-tile:hover img { transform: scale(1.06); }
.silvee-error-collection-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: linear-gradient(to top, rgba(26, 22, 20, 0.65) 0%, rgba(26, 22, 20, 0.10) 50%, rgba(26, 22, 20, 0) 100%);
  color: #fff;
}
.silvee-error-collection-name {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.375rem;
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.005em;
}
.silvee-error-collection-arrow {
  font-size: 1.5rem;
  line-height: 1;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 250ms ease, transform 250ms cubic-bezier(0.22, 1, 0.36, 1);
}
.silvee-error-collection-tile:hover .silvee-error-collection-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* ──────────────────────────────────────────────────────────────
   Phase 3h — Notify when restocked (PDP link + modal)
   ────────────────────────────────────────────────────────────── */
.silvee-pdp-notify-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0.5rem 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--silvee-stone);
  font-family: inherit;
  cursor: pointer;
  margin-top: -0.25rem;
  transition: color 150ms ease;
}
.silvee-pdp-notify-link:hover { color: var(--silvee-maroon); }

.silvee-notify-modal {
  position: fixed;
  inset: 0;
  z-index: 75;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.silvee-notify-modal[data-open="true"] { display: flex; }
.silvee-notify-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 22, 20, 0.50);
  backdrop-filter: blur(4px);
}
.silvee-notify-panel {
  position: relative;
  background: var(--silvee-surface);
  border-radius: 14px;
  width: 100%;
  max-width: 420px;
  padding: 2rem 1.75rem 1.5rem;
  box-shadow: 0 24px 48px -8px rgb(0 0 0 / 0.25);
  text-align: center;
}
.silvee-notify-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: transparent;
  border: 0;
  color: var(--silvee-stone);
  cursor: pointer;
  padding: 0.25rem;
}
.silvee-notify-close:hover { color: var(--silvee-maroon); }
.silvee-notify-icon {
  display: inline-flex;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  background: rgba(132, 41, 43, 0.08);
  color: var(--silvee-maroon);
  border-radius: 999px;
  margin-bottom: 0.75rem;
}
.silvee-notify-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--silvee-ink);
  margin: 0;
  line-height: 1.15;
}
.silvee-notify-sub {
  margin: 0.5rem 0 1.25rem;
  font-size: 0.875rem;
  color: var(--silvee-graphite);
  line-height: 1.5;
}
.silvee-notify-phone-row {
  display: flex;
  align-items: stretch;
  background: var(--silvee-cream);
  border: 1px solid var(--silvee-bone);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}
.silvee-notify-phone-row:focus-within {
  border-color: var(--silvee-maroon);
  background: #fff;
  box-shadow: 0 0 0 3px rgb(132 41 43 / 0.10);
}
.silvee-notify-phone-prefix {
  padding: 0 0.75rem;
  display: inline-flex;
  align-items: center;
  background: var(--silvee-ivory);
  color: var(--silvee-graphite);
  font-size: 0.875rem;
  font-weight: 500;
  border-right: 1px solid var(--silvee-bone);
  white-space: nowrap;
}
.silvee-notify-phone-row input {
  flex: 1;
  height: 44px;
  padding: 0 0.75rem;
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 0.9375rem;
  color: var(--silvee-ink);
  text-align: left;
}
.silvee-notify-panel input[type="email"],
.silvee-notify-panel input[type="text"] {
  width: 100%;
  height: 44px;
  padding: 0 0.75rem;
  background: var(--silvee-cream);
  border: 1px solid var(--silvee-bone);
  border-radius: 6px;
  font-size: 0.9375rem;
  color: var(--silvee-ink);
  margin-bottom: 0.5rem;
  font-family: inherit;
  text-align: left;
}
.silvee-notify-panel input:focus {
  outline: none;
  border-color: var(--silvee-maroon);
  background: #fff;
  box-shadow: 0 0 0 3px rgb(132 41 43 / 0.10);
}
.silvee-notify-msg {
  margin: 0.5rem 0;
  padding: 0.625rem 0.75rem;
  border-radius: 6px;
  font-size: 0.8125rem;
}
.silvee-notify-msg.is-error {
  background: rgba(165, 61, 63, 0.08);
  color: var(--silvee-error);
  border: 1px solid rgba(165, 61, 63, 0.30);
}
.silvee-notify-msg.is-success {
  background: rgba(63, 123, 63, 0.08);
  color: var(--silvee-success);
  border: 1px solid rgba(63, 123, 63, 0.30);
}
.silvee-notify-submit {
  width: 100%;
  height: 48px;
  background: var(--silvee-maroon);
  color: #fff;
  border: 0;
  border-radius: 6px;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  margin-top: 0.75rem;
  font-family: inherit;
  transition: background 150ms ease;
}
.silvee-notify-submit:hover { background: var(--silvee-maroon-700); }
.silvee-notify-submit:disabled { background: var(--silvee-stone); cursor: not-allowed; }
.silvee-notify-fineprint {
  margin: 0.75rem 0 0;
  font-size: 0.6875rem;
  color: var(--silvee-stone);
  line-height: 1.5;
}

/* ──────────────────────────────────────────────────────────────
   Phase 3g — Blog / Silvee Journal
   ────────────────────────────────────────────────────────────── */
.silvee-blog-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}
.silvee-blog-chip {
  background: var(--silvee-surface);
  border: 1px solid var(--silvee-bone);
  color: var(--silvee-graphite);
  padding: 0.4rem 0.875rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.silvee-blog-chip:hover {
  border-color: var(--silvee-maroon);
  color: var(--silvee-maroon);
}
.silvee-blog-chip.is-active {
  background: var(--silvee-maroon);
  border-color: var(--silvee-maroon);
  color: #fff;
}

.silvee-blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
.silvee-blog-card {
  background: var(--silvee-surface);
  border: 1px solid var(--silvee-bone);
  border-radius: 10px;
  overflow: hidden;
  transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
}
.silvee-blog-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -8px rgb(42 37 34 / 0.10);
  border-color: var(--silvee-stone);
}
.silvee-blog-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.silvee-blog-card-img {
  aspect-ratio: 4 / 3;
  background: var(--silvee-ivory);
  overflow: hidden;
}
.silvee-blog-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.silvee-blog-card:hover .silvee-blog-card-img img { transform: scale(1.04); }
.silvee-blog-card-body { padding: 1.25rem 1.25rem 1.5rem; }
.silvee-blog-card-eyebrow {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--silvee-gold);
  margin: 0 0 0.5rem;
  font-weight: 600;
}
.silvee-blog-card-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--silvee-ink);
  margin: 0;
  line-height: 1.2;
  /* Cap to 3 lines so a long editorial title doesn't push cards
     in the grid to wildly different heights. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.silvee-blog-card-excerpt {
  margin: 0.625rem 0 0;
  font-size: 0.875rem;
  color: var(--silvee-graphite);
  line-height: 1.55;
}
.silvee-blog-card-cta {
  display: inline-block;
  margin-top: 0.875rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--silvee-maroon);
}

/* Single post */
.silvee-blog-article { font-family: "Inter", system-ui, sans-serif; }
.silvee-blog-eyebrow {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--silvee-gold);
  margin: 0 0 0.75rem;
  font-weight: 500;
}
.silvee-blog-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2rem, 4.5vw, 2.875rem);
  font-weight: 500;
  color: var(--silvee-ink);
  margin: 0 0 0.75rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.silvee-blog-meta {
  color: var(--silvee-stone);
  font-size: 0.8125rem;
  margin: 0 0 1.5rem;
}
.silvee-blog-cover {
  margin: 0 0 2rem;
}
.silvee-blog-cover img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
}
.silvee-blog-body {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--silvee-graphite);
}
.silvee-blog-body h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.75rem;
  font-weight: 500;
  color: var(--silvee-ink);
  margin: 2rem 0 0.875rem;
  line-height: 1.2;
}
.silvee-blog-body h3 {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--silvee-ink);
  margin: 1.5rem 0 0.5rem;
}
.silvee-blog-body p { margin: 0 0 1rem; }
.silvee-blog-body ul,
.silvee-blog-body ol { margin: 0 0 1rem; padding-left: 1.25rem; }
.silvee-blog-body li { margin: 0.375rem 0; }
.silvee-blog-body a { color: var(--silvee-maroon); text-decoration: underline; text-underline-offset: 3px; }
.silvee-blog-body strong { color: var(--silvee-ink); font-weight: 600; }
.silvee-blog-body blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--silvee-gold);
  background: var(--silvee-cream);
  border-radius: 0 6px 6px 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.125rem;
  font-style: italic;
  color: var(--silvee-graphite);
}

.silvee-blog-footer {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--silvee-bone);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}
.silvee-blog-share-btn {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 1rem;
  background: var(--silvee-cream);
  border: 1px solid var(--silvee-bone);
  color: var(--silvee-graphite);
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.silvee-blog-share-btn:hover {
  border-color: var(--silvee-maroon);
  color: var(--silvee-maroon);
}
.silvee-blog-back-link {
  font-size: 0.875rem;
  color: var(--silvee-stone);
  text-decoration: none;
}
.silvee-blog-back-link:hover { color: var(--silvee-maroon); }

/* ──────────────────────────────────────────────────────────────
   Phase 2l — Collection / campaign landing template
   ────────────────────────────────────────────────────────────── */
.silvee-coll-eyebrow {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--silvee-gold);
  margin: 0 0 0.75rem;
  font-weight: 500;
}
.silvee-coll-h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  font-weight: 500;
  color: var(--silvee-ink);
  margin: 0 0 1rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

/* 1. Hero */
.silvee-coll-hero {
  position: relative;
  width: 100%;
  min-height: 80vh;
  overflow: hidden;
  background: var(--silvee-ink);
}
.silvee-coll-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
}
.silvee-coll-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(26, 22, 20, 0.70) 0%, rgba(26, 22, 20, 0.45) 50%, rgba(26, 22, 20, 0.15) 100%);
}
.silvee-coll-hero-text {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 1.5rem 5rem;
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.silvee-coll-hero-text .silvee-coll-eyebrow {
  color: var(--silvee-gold-pale);
}
.silvee-coll-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  font-weight: 500;
  color: #fff;
  line-height: 1.05;
  margin: 0 0 1rem;
  letter-spacing: -0.01em;
  max-width: 760px;
}
.silvee-coll-sub {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 1.75rem;
  max-width: 540px;
  line-height: 1.5;
}
.silvee-coll-hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.silvee-coll-cta-primary,
.silvee-coll-cta-secondary,
.silvee-coll-cta-ghost-light {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 48px;
  padding: 0 1.5rem;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.silvee-coll-cta-primary {
  background: var(--silvee-maroon);
  color: #fff;
  border: 1px solid var(--silvee-maroon);
}
.silvee-coll-cta-primary:hover {
  background: var(--silvee-maroon-700);
  border-color: var(--silvee-maroon-700);
  transform: translateY(-1px);
}
.silvee-coll-cta-secondary {
  background: transparent;
  border: 1px solid var(--silvee-graphite);
  color: var(--silvee-graphite);
}
.silvee-coll-cta-secondary:hover { background: var(--silvee-cream); }
.silvee-coll-cta-ghost-light {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
}
.silvee-coll-cta-ghost-light:hover { background: rgba(255, 255, 255, 0.10); border-color: #fff; }

/* 2. Countdown strip */
.silvee-coll-countdown {
  background: linear-gradient(to right, var(--silvee-gold) 0%, #d4b58c 50%, var(--silvee-gold) 100%);
  padding: 0.6875rem 0;
  color: #fff;
}
.silvee-coll-countdown.hidden { display: none; }
.silvee-coll-countdown-text {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
}
.silvee-coll-countdown-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #fff;
  animation: silvee-coll-pulse 1500ms ease-in-out infinite;
}
@keyframes silvee-coll-pulse {
  0%, 100% { opacity: 0.5; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.1); }
}
.silvee-coll-countdown-sep { opacity: 0.65; padding: 0 0.125rem; }

/* 3. Story */
.silvee-coll-story {
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: var(--silvee-cream);
}
.silvee-coll-story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
@media (max-width: 767.98px) {
  .silvee-coll-story-grid { grid-template-columns: 1fr; gap: 2rem; }
}
.silvee-coll-prose {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.25rem;
}
.silvee-coll-prose p {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--silvee-graphite);
  margin: 0;
}
.silvee-coll-story-img-wrap { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 10px; }
.silvee-coll-story-img { width: 100%; height: 100%; object-fit: cover; }

/* 4. The Edit — product grid */
.silvee-coll-edit {
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: var(--silvee-surface);
}
.silvee-coll-section-header { text-align: center; margin-bottom: 2rem; }
.silvee-coll-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.875rem;
}
@media (min-width: 768px) {
  .silvee-coll-edit-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
}
@media (min-width: 1024px) {
  .silvee-coll-edit-grid { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
}
.silvee-coll-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--silvee-surface);
  border: 1px solid var(--silvee-bone);
  border-radius: 8px;
  overflow: hidden;
  transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
}
.silvee-coll-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px -4px rgb(42 37 34 / 0.08);
  border-color: var(--silvee-stone);
}
.silvee-coll-card-img {
  aspect-ratio: 1 / 1;
  background: var(--silvee-ivory);
  overflow: hidden;
}
.silvee-coll-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.silvee-coll-card:hover .silvee-coll-card-img img { transform: scale(1.04); }
.silvee-coll-card-body { padding: 0.75rem 0.875rem 0.875rem; }
.silvee-coll-card-name {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1rem;
  font-weight: 500;
  color: var(--silvee-ink);
  margin: 0;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.silvee-coll-card-price {
  margin: 0.375rem 0 0;
  font-size: 0.875rem;
  color: var(--silvee-graphite);
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.silvee-coll-card-was {
  color: var(--silvee-stone);
  text-decoration: line-through;
  font-size: 0.75rem;
}
.silvee-coll-card-now {
  color: var(--silvee-maroon);
  font-weight: 600;
}
.silvee-coll-card-skel .silvee-coll-card-img {
  /* skeleton already animated via .silvee-skeleton mixin */
}

/* 5. Gifting picks */
.silvee-coll-gifting { padding: clamp(3rem, 6vw, 5rem) 0; background: var(--silvee-cream); }
.silvee-coll-gifting.hidden { display: none; }
.silvee-coll-gifting-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 768px) { .silvee-coll-gifting-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.silvee-coll-gifting-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--silvee-surface);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--silvee-bone);
  transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
}
.silvee-coll-gifting-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -8px rgb(42 37 34 / 0.12);
  border-color: var(--silvee-gold);
}
.silvee-coll-gifting-img { aspect-ratio: 4 / 5; background: var(--silvee-ivory); overflow: hidden; }
.silvee-coll-gifting-img img { width: 100%; height: 100%; object-fit: cover; }
.silvee-coll-gifting-body { padding: 1rem 1.25rem 1.25rem; }
.silvee-coll-gifting-link {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--silvee-maroon);
}

/* 6. Mosaic */
.silvee-coll-mosaic-wrap { padding: clamp(3rem, 6vw, 5rem) 0; background: var(--silvee-surface); }
.silvee-coll-mosaic-wrap.hidden { display: none; }
.silvee-coll-mosaic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 180px;
  gap: 0.75rem;
}
@media (max-width: 767.98px) {
  .silvee-coll-mosaic-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; }
}
.silvee-coll-mosaic-tile {
  overflow: hidden;
  border-radius: 8px;
  background: var(--silvee-ivory);
}
.silvee-coll-mosaic-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.silvee-coll-mosaic-tile:hover img { transform: scale(1.05); }
.silvee-coll-mosaic-tile.is-large { grid-column: span 2; grid-row: span 2; }

/* CTA band */
.silvee-coll-cta-band {
  background: linear-gradient(135deg, var(--silvee-graphite) 0%, var(--silvee-ink) 100%);
  color: #fff;
  padding: clamp(3rem, 6vw, 5rem) 0;
}
.silvee-coll-cta-band .silvee-coll-h2 { color: #fff; }
.silvee-coll-cta-text {
  margin: 0.5rem auto 1.5rem;
  max-width: 540px;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.55;
}
.silvee-coll-cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

/* ───────────────────────────────────────────────────────────────────────
   Mobile filter drawer (PLP / category / collection)
   ───────────────────────────────────────────────────────────────────────
   The aside #filtersPanel ships with Tailwind classes `hidden lg:block`
   so it's display:none on mobile and a sticky sidebar on desktop. When
   the user taps the mobile Filter button, JS adds `catalog-filters-open`
   to <body>. These rules below turn the aside into a slide-in drawer
   when that body class is present — overriding the Tailwind .hidden
   with !important since the JS doesn't touch the class list directly. */
@media (max-width: 1023px) {
  body[data-page="listing"].catalog-filters-open #filtersPanel {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(340px, 92vw) !important;
    max-width: 92vw !important;
    max-height: 100vh !important;
    height: 100vh;
    /* Has to sit above the .catalog-filter-backdrop, which a legacy
       rule at styles.css:5393 bumps to z-index 138 (along with a
       backdrop-filter: blur(2px)). Anything ≤138 lets the backdrop
       sit IN FRONT of the panel, blurring the panel content and
       eating the clicks. 200 puts us safely clear. */
    z-index: 200 !important;
    background: var(--silvee-cream, #FAF6EF) !important;
    padding: 0 0 6rem !important;
    margin: 0 !important;
    box-shadow: 16px 0 34px rgba(14, 7, 18, 0.18);
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    transform: translateX(0);
    transition: transform 240ms ease;
  }
  /* Restore inner padding via a wrapper rule — we zero'd the panel's
     padding so the sticky header can flush to the panel edge. */
  body[data-page="listing"].catalog-filters-open #filtersPanel > *:not(:first-child) {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
  }
  /* Sticky drawer header — keep "Filters" + close button pinned at
     the top of the drawer when the buyer scrolls down through long
     tag lists. Cream bg matches the panel so the scroll content
     fades behind it cleanly. */
  body[data-page="listing"].catalog-filters-open #filtersPanel > div:first-child {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 0 !important;
    padding: 1rem 1.1rem !important;
    background: var(--silvee-cream, #FAF6EF);
    border-bottom: 1px solid var(--silvee-bone);
  }
  body[data-page="listing"]:not(.catalog-filters-open) #filtersPanel {
    transform: translateX(-104%);
  }
  /* Also keep the backdrop pinned BELOW the panel — the legacy rule
     gives it z-index 138 + blur(2px) which is fine for the dim+blur
     pass over the page content; we just need the panel one layer up. */
  body[data-page="listing"].catalog-filters-open #mobileFilterBackdrop {
    z-index: 138 !important;
  }
  body[data-page="listing"].catalog-filters-open {
    overflow: hidden;
  }
}

/* ============================================================
   Homepage hero carousel
   ============================================================ */
.silvee-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #1A1614;
  outline: none;
}

.silvee-hero-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.silvee-hero-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  overflow: hidden;
  isolation: isolate;
}

.silvee-hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.95;
}

.silvee-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(26, 22, 20, 0.72) 0%, rgba(26, 22, 20, 0.42) 45%, rgba(26, 22, 20, 0.05) 100%);
  pointer-events: none;
}

.silvee-hero-content {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 4rem 1.25rem;
  min-height: 70vh;
  display: flex;
  align-items: center;
}
@media (min-width: 1024px) {
  .silvee-hero-content {
    padding: 5rem 2rem;
    min-height: 80vh;
  }
}

.silvee-hero-content-inner {
  max-width: 36rem;
  color: #FFFFFF;
}

.silvee-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.45rem 0.85rem;
  margin: 0 0 1.25rem;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 4px;
  color: #FFFFFF;
}
.silvee-hero-eyebrow[hidden] { display: none; }

.silvee-hero-headline {
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 500;
  line-height: 1.05;
  margin: 0;
  letter-spacing: 0.005em;
  color: #FFFFFF;
}

.silvee-hero-sub {
  margin: 1rem 0 0;
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  max-width: 28rem;
}
.silvee-hero-sub[hidden] { display: none; }

.silvee-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.75rem;
}

.silvee-hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 2rem;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: 4px;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 120ms ease;
}
.silvee-hero-btn:active { transform: scale(0.98); }
.silvee-hero-btn[hidden] { display: none; }

.silvee-hero-btn-primary {
  background: var(--silvee-maroon);
  color: #FFFFFF;
  border: 1px solid var(--silvee-maroon);
}
.silvee-hero-btn-primary:hover { background: #6A2022; border-color: #6A2022; }

.silvee-hero-btn-secondary {
  background: transparent;
  color: #FFFFFF;
  border: 1px solid #FFFFFF;
}
.silvee-hero-btn-secondary:hover { background: rgba(255, 255, 255, 0.10); }

/* ── Carousel controls ─────────────────────────────────────── */
.silvee-hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(132, 41, 43, 0.16);
  color: #1A1614;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(26, 22, 20, 0.2);
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.silvee-hero-nav:hover { background: var(--silvee-maroon); color: #FFFFFF; }
.silvee-hero-nav[hidden] { display: none; }
.silvee-hero-nav-prev { left: 1rem; }
.silvee-hero-nav-next { right: 1rem; }
@media (max-width: 767px) {
  .silvee-hero-nav { display: none; }
}

.silvee-hero-dots {
  position: absolute;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  background: rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 999px;
}
.silvee-hero-dots[hidden] { display: none; }
.silvee-hero-dot {
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  padding: 0;
  transition: width 200ms ease, background 200ms ease;
}
.silvee-hero-dot[aria-selected="true"] {
  width: 26px;
  background: #FFFFFF;
}

/* ─────────────────────────────────────────────────────────────────
   Order success page — Phase 5 rebuild
   /order-success.html

   Two visual tones driven by `[data-payment-state]` on <main>:
     - paid → gold accents, "Order confirmed" headline, success-green status
     - cod  → warm cream accent, "Order placed" headline, gold-warm status

   Layout: single column on every viewport (the page is task-focused,
   not browse-focused). Max-width 640px so prose stays readable on
   wide monitors. Cards have generous internal padding + 1px bone
   borders — matches the rest of the site.
   ───────────────────────────────────────────────────────────────── */

.silvee-os-main {
  max-width: 640px;
  margin: 0 auto;
  padding: 32px 16px 96px;
  /* Sticky-CTA bottom-pad on mobile so the last section isn't hidden
     under the floating bar. lg: hides the sticky CTA and trims this. */
}
@media (min-width: 1024px) {
  .silvee-os-main { padding-bottom: 48px; }
}

/* ── Hero ─────────────────────────────────────────────────────── */
.silvee-os-hero {
  text-align: center;
  padding: 18px 8px 28px;
}
.silvee-os-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 18px;
}
.silvee-os-ornament-line {
  display: inline-block;
  width: 36px;
  height: 1px;
  background: var(--silvee-bone);
}
.silvee-os-ornament-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--silvee-gold);
  border-radius: 50%;
}
.silvee-os-eyebrow {
  font: 600 11px/1 'Inter', -apple-system, sans-serif;
  color: var(--silvee-stone);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  margin: 0 0 14px 0;
}
.silvee-os-headline {
  font-family: 'Cormorant Garamond', serif;
  font-size: 42px;
  font-weight: 500;
  line-height: 1.05;
  color: var(--silvee-ink);
  margin: 0 0 12px 0;
  letter-spacing: -0.01em;
}
@media (max-width: 560px) {
  .silvee-os-headline { font-size: 34px; }
}
[data-payment-state="paid"] .silvee-os-headline {
  color: var(--silvee-maroon);
}
.silvee-os-subline {
  font-size: 15px;
  line-height: 1.55;
  color: var(--silvee-graphite);
  margin: 0 0 18px 0;
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}
.silvee-os-orderno {
  font: 400 13px/1.4 'Inter', sans-serif;
  color: var(--silvee-stone);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.silvee-os-orderno code {
  font-family: 'IBM Plex Mono', 'SF Mono', Menlo, monospace;
  font-size: 13px;
  font-weight: 600;
  background: var(--silvee-ivory);
  color: var(--silvee-ink);
  padding: 4px 10px;
  border-radius: 3px;
  letter-spacing: 0.03em;
  border: 1px solid var(--silvee-bone);
}

/* ── Status card (the big tone difference between paid and COD) ── */
.silvee-os-status {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 8px;
  margin: 8px 0 28px;
  border: 1px solid var(--silvee-bone);
}
.silvee-os-status[data-tone="paid"] {
  background: #DFF2E3;
  border-color: rgba(31, 107, 50, 0.30);
}
.silvee-os-status[data-tone="cod"] {
  background: #FBE9D1;
  border-color: rgba(168, 136, 74, 0.40);
}
.silvee-os-status-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #FFFFFF;
}
.silvee-os-status[data-tone="paid"] .silvee-os-status-icon { color: #1F6B32; }
.silvee-os-status[data-tone="cod"] .silvee-os-status-icon { color: #7C5A18; }
.silvee-os-status-body { flex: 1; min-width: 0; }
.silvee-os-status-label {
  font: 600 11px/1 'Inter', sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 6px 0;
  color: var(--silvee-stone);
}
.silvee-os-status[data-tone="paid"] .silvee-os-status-label { color: #1F6B32; }
.silvee-os-status[data-tone="cod"] .silvee-os-status-label { color: #7C5A18; }
.silvee-os-status-amount {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 500;
  color: var(--silvee-ink);
  margin: 0;
}
.silvee-os-status-method {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--silvee-graphite);
  margin-left: 4px;
}
.silvee-os-status-meta {
  font-size: 12px;
  line-height: 1.5;
  color: var(--silvee-stone);
  margin: 6px 0 0;
}
.silvee-os-status-meta code {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.7);
  padding: 1px 6px;
  border-radius: 3px;
  color: var(--silvee-graphite);
}

/* ── "What's next" 3-step ─────────────────────────────────────── */
.silvee-os-next {
  margin: 0 0 28px;
}
.silvee-os-section-title {
  font: 600 11px/1 'Inter', sans-serif;
  color: var(--silvee-stone);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 14px 0;
}
.silvee-os-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.silvee-os-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.silvee-os-step-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--silvee-bone);
  font: 500 13px/1 'Cormorant Garamond', serif;
  color: var(--silvee-maroon);
  background: var(--silvee-surface);
  margin-top: 1px;
}
.silvee-os-step-body { flex: 1; min-width: 0; }
.silvee-os-step-title {
  display: block;
  font: 500 15px/1.4 'Inter', sans-serif;
  color: var(--silvee-ink);
  margin: 0 0 2px 0;
}
.silvee-os-step-sub {
  font-size: 13px;
  line-height: 1.5;
  color: var(--silvee-stone);
  margin: 0;
}

/* ── Card (used for "Your order" + "Delivering to") ───────────── */
.silvee-os-card {
  background: var(--silvee-surface);
  border: 1px solid var(--silvee-bone);
  border-radius: 6px;
  padding: 20px;
  margin: 0 0 16px;
}
.silvee-os-items {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.silvee-os-items .silvee-order-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--silvee-bone);
}
.silvee-os-items .silvee-order-item:first-child { border-top: 0; padding-top: 0; }
.silvee-os-items .silvee-order-item-meta { flex: 1; min-width: 0; }
.silvee-os-items .silvee-order-item-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--silvee-ink);
  margin: 0 0 3px 0;
  line-height: 1.3;
}
.silvee-os-items .silvee-order-item-sku {
  font-size: 12px;
  color: var(--silvee-stone);
  margin: 0;
  line-height: 1.4;
}
.silvee-os-items .silvee-order-item-price {
  font: 500 15px/1.3 'Inter', sans-serif;
  color: var(--silvee-ink);
  white-space: nowrap;
}

/* ── Totals ───────────────────────────────────────────────────── */
.silvee-os-totals {
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--silvee-bone);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.silvee-os-totals > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
/* Tailwind's .hidden loses specificity to the display:flex above, so
   restate it more narrowly. Same trick for the note block. */
.silvee-os-totals > div.hidden,
#successNoteBlock.silvee-os-note-block.hidden { display: none !important; }
.silvee-os-totals dt {
  font-size: 14px;
  color: var(--silvee-graphite);
  font-weight: 400;
  margin: 0;
}
.silvee-os-totals dd {
  font-size: 14px;
  color: var(--silvee-graphite);
  margin: 0;
  text-align: right;
  white-space: nowrap;
}
.silvee-os-totals-discount dt,
.silvee-os-totals-discount dd { color: #1F6B32; }
.silvee-os-totals-discount .silvee-os-coupon-code {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  background: #DFF2E3;
  color: #1F6B32;
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 0.04em;
  margin-left: 4px;
}
.silvee-os-totals-total {
  border-top: 1px solid var(--silvee-bone);
  padding-top: 12px !important;
  margin-top: 4px;
  align-items: center !important;
}
.silvee-os-totals-total dt {
  font: 600 12px/1 'Inter', sans-serif;
  color: var(--silvee-stone);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.silvee-os-totals-total dd {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  line-height: 1.1;
  font-weight: 500;
  color: var(--silvee-maroon);
}

.silvee-os-note-block {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--silvee-bone);
}
.silvee-os-note-label {
  font: 600 11px/1 'Inter', sans-serif;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--silvee-stone);
  margin: 0 0 6px 0;
}
.silvee-os-note {
  font-size: 13px;
  line-height: 1.6;
  color: var(--silvee-graphite);
  white-space: pre-wrap;
  margin: 0;
  font-family: 'Inter', sans-serif;
}

/* ── Delivery ─────────────────────────────────────────────────── */
.silvee-os-delivery-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}
.silvee-os-delivery-head .silvee-os-section-title { margin: 0; }
.silvee-os-delivery-method {
  font: 500 12px/1 'Inter', sans-serif;
  color: var(--silvee-graphite);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--silvee-bone);
  background: var(--silvee-ivory);
  white-space: nowrap;
}
.silvee-os-address {
  font-size: 14px;
  line-height: 1.6;
  color: var(--silvee-graphite);
  margin: 0;
}
.silvee-os-address strong {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--silvee-ink);
  display: block;
  margin-bottom: 2px;
}

/* ── Actions ──────────────────────────────────────────────────── */
.silvee-os-actions {
  margin: 8px 0 28px;
  text-align: center;
}
.silvee-os-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: #25D366;
  color: #FFFFFF;
  text-decoration: none;
  border-radius: 4px;
  font: 600 14px/1 'Inter', sans-serif;
  letter-spacing: 0.04em;
  transition: filter 150ms ease;
}
.silvee-os-cta-primary:hover { filter: brightness(0.96); }
.silvee-os-cta-secondary {
  display: inline-block;
  margin-top: 14px;
  font: 400 13px/1.4 'Inter', sans-serif;
  color: var(--silvee-stone);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.silvee-os-cta-secondary:hover { color: var(--silvee-maroon); }

/* ── Trust strip ──────────────────────────────────────────────── */
.silvee-os-trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 32px;
  padding: 18px 0;
  border-top: 1px solid var(--silvee-bone);
  border-bottom: 1px solid var(--silvee-bone);
}
@media (max-width: 560px) {
  .silvee-os-trust { grid-template-columns: 1fr; gap: 16px; padding: 16px 4px; }
}
.silvee-os-trust-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--silvee-graphite);
}
.silvee-os-trust-item svg { color: var(--silvee-gold); flex-shrink: 0; margin-top: 2px; }
.silvee-os-trust-item strong {
  display: block;
  font: 500 13px/1.3 'Inter', sans-serif;
  color: var(--silvee-ink);
  margin: 0 0 2px 0;
}
.silvee-os-trust-item small {
  font: 400 12px/1.4 'Inter', sans-serif;
  color: var(--silvee-stone);
  display: block;
}

/* ── Stay connected ───────────────────────────────────────────── */
.silvee-os-stay {
  text-align: center;
}
.silvee-os-stay-sub {
  font-size: 13px;
  color: var(--silvee-stone);
  margin: 0 0 14px;
}
.silvee-os-stay-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 0 18px;
}
.silvee-os-stay-tile {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--silvee-bone);
  border-radius: 999px;
  font: 500 13px/1 'Inter', sans-serif;
  color: var(--silvee-graphite);
  text-decoration: none;
  background: var(--silvee-surface);
  transition: border-color 150ms ease, color 150ms ease;
}
.silvee-os-stay-tile:hover {
  border-color: var(--silvee-maroon);
  color: var(--silvee-maroon);
}
.silvee-os-share {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 400 13px/1.4 'Inter', sans-serif;
  color: var(--silvee-maroon);
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
  padding-bottom: 1px;
}
.silvee-os-share:hover { color: var(--silvee-ink); }

/* ── Mobile sticky CTA ────────────────────────────────────────── */
.silvee-os-mobile-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px calc(env(safe-area-inset-bottom, 0) + 12px) 16px;
  background: var(--silvee-cream);
  border-top: 1px solid var(--silvee-bone);
  z-index: 50;
  box-shadow: 0 -4px 16px rgba(61, 42, 31, 0.06);
}
.silvee-os-mobile-cta a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 0;
  background: #25D366;
  color: #FFFFFF;
  text-decoration: none;
  border-radius: 4px;
  font: 600 15px/1 'Inter', sans-serif;
  letter-spacing: 0.02em;
}

/* ── Error placeholder ────────────────────────────────────────── */
.silvee-os-error {
  margin: 16px 0;
  padding: 14px 18px;
  border-radius: 6px;
  background: rgba(176, 0, 32, 0.06);
  border: 1px solid rgba(176, 0, 32, 0.30);
  color: #9B1C1C;
  font-size: 14px;
  text-align: center;
}

/* ─────────────────────────────────────────────────────────────
   Touch-device hover suppression
   ─────────────────────────────────────────────────────────────
   On touch-only devices (phones/tablets), the `:hover` pseudo-class
   gets stuck after a tap until the next interaction elsewhere — so
   a quick tap on a product card or hero button leaves it in its
   hover state visually (lifted shadow, scaled image, recoloured
   border) until the user taps something else. That looks like a
   stuck loading or selection state.
   The audit flagged 60+ :hover rules without an @media (hover: hover)
   guard. Rewriting each one is too churny. Instead, neutralise the
   most common offending effects on touch devices in one place: card
   lift transforms, image zoom transforms, elevated box-shadows on
   product cards and tiles. Buttons keep their colour-only hovers
   because those visually decay back to the base state immediately.
*/
@media (hover: none) {
  .product-card:hover,
  body[data-page="listing"] #productsGrid .product-card:hover,
  body[data-page="detail"] #detailRecentlyViewedGrid .product-card:hover,
  body[data-page="home"] .product-card:hover,
  .silvee-cat-tile:hover,
  .silvee-cart-bestseller:hover,
  .silvee-coll-card:hover,
  .silvee-blog-card:hover {
    box-shadow: none !important;
    transform: none !important;
  }
  .product-card:hover img,
  .product-card:hover .product-card-media img,
  .product-card:hover .image-wrap img,
  body[data-page="listing"] #productsGrid .product-card:hover img,
  .silvee-cat-tile:hover img,
  .silvee-coll-card:hover img,
  .silvee-blog-card:hover img {
    transform: none !important;
  }
  /* Floating WhatsApp FAB scale-up on hover is also sticky on
     touch — keep base, drop the hover scale. */
  .silvee-wa-fab:hover {
    transform: none;
    box-shadow: 0 8px 24px -4px rgba(37, 211, 102, 0.45), 0 4px 8px -2px rgba(0, 0, 0, 0.10);
  }
}

/* ─────────────────────────────────────────────────────────────────
   Storefront mobile audit fixes — phase 5
   ───────────────────────────────────────────────────────────────── */

/* Policy page tables (returns.html buyback summary, shipping.html
   delivery times, etc.) had `width: 100%` but no horizontal-scroll
   wrapper. At 375px the 3–4-column cells crammed text into 2–3
   words per row or overflowed off-screen. Now scrolls horizontally
   with a faint right-edge fade hint, same pattern as the admin
   tables. The table itself keeps a sensible min-width so columns
   stay readable when the user swipes. */
@media (max-width: 640px) {
  .silvee-policy-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 0;
    background-image: linear-gradient(to right, transparent calc(100% - 24px), rgba(132, 41, 43, 0.10) 100%);
    background-repeat: no-repeat;
    background-attachment: local, scroll;
  }
  .silvee-policy-content table thead,
  .silvee-policy-content table tbody { display: table; width: 100%; min-width: 480px; }
  .silvee-policy-content th,
  .silvee-policy-content td {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
  }
}

/* 404 / 500 error CTA row — the three buttons had no internal width
   constraint; long labels ("Talk to us on WhatsApp") forced the row
   to wrap into a misaligned column. Make each CTA full-width on
   phone so they stack cleanly. */
@media (max-width: 540px) {
  .silvee-error-cta-row {
    flex-direction: column;
    align-items: stretch;
  }
  .silvee-error-cta-row > * {
    width: 100%;
    justify-content: center;
  }
}

/* Mobile sort dropdown on PLP/search — was `absolute right-0 w-56`
   inside a flex-1 container. On 375px the dropdown could overflow
   the right viewport edge if the sort button is too far right.
   Force it left-anchored on phones. */
@media (max-width: 640px) {
  .mobile-sort-menu {
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
    max-width: 320px;
  }
}

/* Stores page Google Maps iframe — at 375px the 16:9 aspect ratio
   makes the map ~210px tall, which is too short to be useful.
   Bump to 280px min-height on phone so the buyer can actually
   navigate the map. */
@media (max-width: 640px) {
  .silvee-stores-map-frame,
  .silvee-stores-map iframe {
    min-height: 280px;
  }
}

/* Blog post body — `max-width: none` lets code blocks + images
   overflow the article at 375px. Cap to 100% with an overflow
   wrap so long URLs or words don't blow out the layout. */
@media (max-width: 640px) {
  .silvee-blog-body {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .silvee-blog-body img,
  .silvee-blog-body pre,
  .silvee-blog-body table {
    max-width: 100%;
    height: auto;
  }
  .silvee-blog-body pre {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .silvee-blog-cover img {
    max-width: 100%;
    height: auto;
  }
}

/* PDP trust micro-row — the 4-col grid at 375px gives each tile
   ~80px width which is too tight for icon+label. Drop to 2-col so
   each tile gets ~160px. */
@media (max-width: 540px) {
  body[data-page="detail"] .silvee-buybox ul.grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
  }
}

/* Cart drawer items — long product names wrapped to 3+ lines on
   phone, pushing the line-total + remove button off the visible
   row. Cap to 2 lines with ellipsis. */
@media (max-width: 640px) {
  .cart-drawer-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ════════════════════════════════════════════════════════════════
   PHASE 14 — Homepage block builder (.shb-* = Silvee Homepage Block)
   The homepage is composed of admin-editable blocks rendered by
   /assets/js/modules/homepage-builder.js. Every class below is
   scoped to body[data-page="home"] so it can't leak elsewhere.
   ════════════════════════════════════════════════════════════════ */
body[data-page="home"] #silveeHomepage { display: block; }

/* ── block shell + tones ──────────────────────────────────────── */
body[data-page="home"] .shb-block { width: 100%; }
body[data-page="home"] .shb-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 3rem 1rem;
}
@media (min-width: 1024px) {
  body[data-page="home"] .shb-container { padding: 4.25rem 1.5rem; }
}
body[data-page="home"] .shb-tone-cream   { background: var(--silvee-cream, #FAF6EF); }
body[data-page="home"] .shb-tone-ivory   { background: var(--silvee-ivory, #F3EDDE); }
body[data-page="home"] .shb-tone-surface { background: var(--silvee-surface, #FFFFFF); }
body[data-page="home"] .shb-tone-ink     { background: var(--silvee-graphite, #2A2522); }
body[data-page="home"] .shb-tone-plain   { background: transparent; }
/* Trim the doubled top padding ONLY when two adjacent blocks share a
   background tone (a continuous band — the previous block's bottom padding
   already provides the gap). The earlier version collapsed EVERY adjacent
   block regardless of tone, so wherever the tone changed (e.g. the cream
   category grid under the ivory trust strip, or the white feature cards
   under the cream product grid) the new band's heading sat flush against
   its own coloured top edge — the "section with no gap at the top" issue.
   Scoping the collapse to matching tones keeps a normal top padding at
   every tone change. */
body[data-page="home"] .shb-tone-cream   + .shb-block.shb-tone-cream   .shb-container,
body[data-page="home"] .shb-tone-ivory   + .shb-block.shb-tone-ivory   .shb-container,
body[data-page="home"] .shb-tone-surface + .shb-block.shb-tone-surface .shb-container,
body[data-page="home"] .shb-tone-ink     + .shb-block.shb-tone-ink     .shb-container,
body[data-page="home"] .shb-tone-plain   + .shb-block.shb-tone-plain   .shb-container { padding-top: 0; }
body[data-page="home"] .shb-block--hero + .shb-block .shb-container,
body[data-page="home"] .shb-block--banner + .shb-block .shb-container,
body[data-page="home"] .shb-block + .shb-block--hero .shb-container,
body[data-page="home"] .shb-block + .shb-block--banner .shb-container { padding-top: 3rem; }
@media (min-width: 1024px) {
  body[data-page="home"] .shb-block--hero + .shb-block .shb-container,
  body[data-page="home"] .shb-block--banner + .shb-block .shb-container,
  body[data-page="home"] .shb-block + .shb-block--hero .shb-container,
  body[data-page="home"] .shb-block + .shb-block--banner .shb-container { padding-top: 4.25rem; }
}

body[data-page="home"] .shb-boot { min-height: 60vh; }

/* ── shared section heading ───────────────────────────────────── */
body[data-page="home"] .shb-head { text-align: center; margin-bottom: 2rem; }
@media (min-width: 1024px) { body[data-page="home"] .shb-head { margin-bottom: 2.5rem; } }
body[data-page="home"] .shb-head-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--silvee-ink, #1A1614);
}
body[data-page="home"] .shb-head-sub {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  color: var(--silvee-stone, #8A7D6A);
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
}

/* ── shared buttons ───────────────────────────────────────────── */
body[data-page="home"] .shb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: 3rem;
  padding: 0 1.5rem;
  border-radius: 3px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
body[data-page="home"] .shb-btn--primary {
  background: var(--silvee-maroon, #7A1F2B);
  color: #fff;
}
body[data-page="home"] .shb-btn--primary:hover { background: var(--silvee-maroon-700, #611722); }
body[data-page="home"] .shb-btn--ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.7);
}
body[data-page="home"] .shb-btn--ghost:hover { background: rgba(255, 255, 255, 0.12); }
body[data-page="home"] .shb-btn--outline {
  background: transparent;
  color: var(--silvee-graphite, #2A2522);
  border: 1px solid var(--silvee-graphite, #2A2522);
}
body[data-page="home"] .shb-btn--outline:hover { background: var(--silvee-ivory, #F3EDDE); }

/* ════ HERO — rectangular, contained carousel ════════════════════ */
/* Even padding all round (incl. bottom) so the carousel card floats
   clear of the next block instead of butting against it. */
body[data-page="home"] .shb-block--hero { padding: 1.25rem 1rem; }
@media (min-width: 1024px) { body[data-page="home"] .shb-block--hero { padding: 1.75rem 1.5rem; } }
body[data-page="home"] .shb-hero {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  background: var(--silvee-ivory, #F3EDDE);
}
body[data-page="home"] .shb-hero-track { position: relative; }
body[data-page="home"] .shb-hero-slide { position: relative; display: block; }
body[data-page="home"] .shb-hero-slide[hidden] { display: none; }
body[data-page="home"] .shb-hero-media { display: block; }
body[data-page="home"] .shb-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 5;
  display: block;
}
@media (min-width: 640px) {
  body[data-page="home"] .shb-hero-img { aspect-ratio: 16 / 9; }
}
@media (min-width: 1024px) {
  body[data-page="home"] .shb-hero-img { aspect-ratio: 2.6 / 1; }
}
body[data-page="home"] .shb-hero-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(to top, rgba(20, 12, 10, 0.72) 0%, rgba(20, 12, 10, 0.25) 42%, transparent 70%);
  /* the text overlay covers the whole slide — let clicks fall through
     to the image link underneath; buttons re-enable below */
  pointer-events: none;
}
body[data-page="home"] .shb-hero-text .shb-btn { pointer-events: auto; }
@media (min-width: 1024px) {
  body[data-page="home"] .shb-hero-text {
    align-items: center;
    background: linear-gradient(to right, rgba(20, 12, 10, 0.78) 0%, rgba(20, 12, 10, 0.4) 45%, transparent 75%);
  }
}
body[data-page="home"] .shb-hero-text-inner {
  padding: 1.5rem 1.4rem 1.9rem;
  max-width: 34rem;
  color: #fff;
}
@media (min-width: 1024px) {
  body[data-page="home"] .shb-hero-text-inner { padding: 2rem 3.5rem; }
}
body[data-page="home"] .shb-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--silvee-gold-pale, #E4CE9E);
  margin-bottom: 0.6rem;
}
body[data-page="home"] .shb-hero-headline {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.85rem, 1.2rem + 3.2vw, 3.1rem);
  font-weight: 600;
  line-height: 1.08;
  color: #fff;
}
body[data-page="home"] .shb-hero-sub {
  margin-top: 0.7rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
  max-width: 30rem;
}
body[data-page="home"] .shb-hero-ctas {
  margin-top: 1.3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}
body[data-page="home"] .shb-hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.6rem;
  height: 2.6rem;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  color: var(--silvee-graphite, #2A2522);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  transition: background 150ms ease;
}
body[data-page="home"] .shb-hero-nav:hover { background: #fff; }
body[data-page="home"] .shb-hero-nav--prev { left: 0.9rem; }
body[data-page="home"] .shb-hero-nav--next { right: 0.9rem; }
@media (min-width: 768px) { body[data-page="home"] .shb-hero-nav { display: inline-flex; } }
body[data-page="home"] .shb-hero-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.85rem;
  display: flex;
  justify-content: center;
  gap: 0.45rem;
}
body[data-page="home"] .shb-hero-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 999px;
  border: 0;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background 150ms ease, width 150ms ease;
}
body[data-page="home"] .shb-hero-dot.is-active {
  background: #fff;
  width: 22px;
}
/* full-width (edge-to-edge) hero — admin toggle */
body[data-page="home"] .shb-block--hero.shb-block--full { padding: 0; }
body[data-page="home"] .shb-block--hero.shb-block--full .shb-hero {
  max-width: none;
  border-radius: 0;
}

/* ════ USP STRIP ════════════════════════════════════════════════ */
/* The trust strip is a compact band. Two spacing fixes for an even rhythm:
   1. SYMMETRIC padding. The generic ".shb-block--hero + .shb-block" rule
      (3-class) was forcing this band's top to 3rem/4.25rem while this rule
      only set the bottom (1.4rem) — leaving it visibly top-heavy, so the
      badges looked "pushed down". Bumping to a 3-class selector
      (.shb-block.shb-block--usp_strip …) lets it win the top padding too,
      restoring symmetry.
   2. PROPER GAP TO THE NEXT SECTION. The block after the strip (the
      category grid) had its top padding collapsed to 0 by the generic
      "stacked blocks" rule, so its heading sat almost flush against the
      band. The strip's compact bottom padding alone isn't enough of a
      gap, so we restore a section-sized top padding on the following
      block — matching the page's normal vertical rhythm. */
body[data-page="home"] .shb-block.shb-block--usp_strip .shb-container {
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}
body[data-page="home"] .shb-block--usp_strip + .shb-block .shb-container {
  padding-top: 1.75rem;
}
@media (min-width: 1024px) {
  body[data-page="home"] .shb-block.shb-block--usp_strip .shb-container {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  body[data-page="home"] .shb-block--usp_strip + .shb-block .shb-container {
    padding-top: 2.5rem;
  }
}
body[data-page="home"] .shb-usp {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (min-width: 1024px) {
  body[data-page="home"] .shb-usp { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
}
body[data-page="home"] .shb-usp-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--silvee-graphite, #2A2522);
  font-size: 0.875rem;
  font-weight: 500;
}
body[data-page="home"] .shb-usp-item svg { color: var(--silvee-gold, #C8A465); flex-shrink: 0; }
body[data-page="home"] a.shb-usp-item:hover { color: var(--silvee-maroon, #7A1F2B); }

/* ════ CATEGORY GRID ════════════════════════════════════════════ */
body[data-page="home"] .shb-catgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
@media (min-width: 768px) {
  body[data-page="home"] .shb-catgrid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
  body[data-page="home"] .shb-catgrid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
  body[data-page="home"] .shb-catgrid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
  body[data-page="home"] .shb-catgrid[data-cols="5"] { grid-template-columns: repeat(5, 1fr); }
  body[data-page="home"] .shb-catgrid { gap: 1.25rem; }
}
body[data-page="home"] .shb-cat-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 8px;
  background: var(--silvee-ivory, #F3EDDE);
}
body[data-page="home"] .shb-ratio-1-1  { aspect-ratio: 1 / 1; }
body[data-page="home"] .shb-ratio-4-5  { aspect-ratio: 4 / 5; }
body[data-page="home"] .shb-ratio-3-4  { aspect-ratio: 3 / 4; }
body[data-page="home"] .shb-ratio-16-9 { aspect-ratio: 16 / 9; }
body[data-page="home"] .shb-cat-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
body[data-page="home"] .shb-cat-tile:hover .shb-cat-img { transform: scale(1.05); }
body[data-page="home"] .shb-cat-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 12, 10, 0.62) 0%, rgba(20, 12, 10, 0.08) 45%, transparent 70%);
}
body[data-page="home"] .shb-cat-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  color: #fff;
}
body[data-page="home"] .shb-cat-label {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.15rem, 0.9rem + 1vw, 1.6rem);
  font-weight: 600;
  line-height: 1.1;
}
body[data-page="home"] .shb-cat-sub {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.85);
}

/* ════ BANNER ═══════════════════════════════════════════════════ */
body[data-page="home"] .shb-block--banner { padding: 0 1rem; }
@media (min-width: 1024px) { body[data-page="home"] .shb-block--banner { padding: 0 1.5rem; } }
body[data-page="home"] .shb-banner {
  max-width: 1280px;
  margin: 3rem auto;
  border-radius: 14px;
  overflow: hidden;
}
@media (min-width: 1024px) { body[data-page="home"] .shb-banner { margin: 4.25rem auto; } }
/* full-width (edge-to-edge) banner — admin toggle */
body[data-page="home"] .shb-block--banner.shb-block--full { padding: 0; }
body[data-page="home"] .shb-block--banner.shb-block--full .shb-banner {
  max-width: none;
  border-radius: 0;
}
/* split — image beside copy */
body[data-page="home"] .shb-banner--split {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  body[data-page="home"] .shb-banner--split { grid-template-columns: 1.15fr 1fr; align-items: stretch; }
}
body[data-page="home"] .shb-banner--split .shb-banner-media { display: block; }
body[data-page="home"] .shb-banner--split .shb-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  display: block;
}
@media (min-width: 900px) {
  body[data-page="home"] .shb-banner--split .shb-banner-img { aspect-ratio: auto; min-height: 100%; }
}
body[data-page="home"] .shb-banner--split .shb-banner-copy {
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 1024px) {
  body[data-page="home"] .shb-banner--split .shb-banner-copy { padding: 3.25rem 3rem; }
}
body[data-page="home"] .shb-banner--split.shb-banner--light { background: var(--silvee-surface, #fff); }
body[data-page="home"] .shb-banner--split.shb-banner--dark { background: var(--silvee-graphite, #2A2522); }
/* overlay — text on image */
body[data-page="home"] .shb-banner--overlay { position: relative; }
body[data-page="home"] .shb-banner--overlay .shb-banner-media { display: block; }
body[data-page="home"] .shb-banner--overlay .shb-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  display: block;
}
@media (min-width: 768px) {
  body[data-page="home"] .shb-banner--overlay .shb-banner-img { aspect-ratio: 21 / 9; }
}
body[data-page="home"] .shb-banner--overlay .shb-banner-copy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.75rem 1.5rem;
  background: linear-gradient(to right, rgba(20, 12, 10, 0.8) 0%, rgba(20, 12, 10, 0.45) 50%, transparent 82%);
  /* let clicks fall through to the image link; buttons re-enable below */
  pointer-events: none;
}
body[data-page="home"] .shb-banner--overlay .shb-banner-copy .shb-btn { pointer-events: auto; }
@media (min-width: 1024px) {
  body[data-page="home"] .shb-banner--overlay .shb-banner-copy { padding: 3rem 3.5rem; }
}
body[data-page="home"] .shb-banner-eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--silvee-gold, #C8A465);
  margin-bottom: 0.7rem;
}
body[data-page="home"] .shb-banner--dark .shb-banner-eyebrow,
body[data-page="home"] .shb-banner--overlay .shb-banner-eyebrow { color: var(--silvee-gold-pale, #E4CE9E); }
body[data-page="home"] .shb-banner-heading {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2.65rem);
  font-weight: 600;
  line-height: 1.12;
  color: var(--silvee-ink, #1A1614);
  max-width: 22ch;
}
body[data-page="home"] .shb-banner--dark .shb-banner-heading,
body[data-page="home"] .shb-banner--overlay .shb-banner-heading { color: #fff; }
body[data-page="home"] .shb-banner-body {
  margin-top: 0.85rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--silvee-graphite, #2A2522);
  max-width: 38ch;
}
body[data-page="home"] .shb-banner--dark .shb-banner-body,
body[data-page="home"] .shb-banner--overlay .shb-banner-body { color: rgba(255, 255, 255, 0.88); }
body[data-page="home"] .shb-banner-ctas {
  margin-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}
/* on a light split banner the ghost button needs dark text */
body[data-page="home"] .shb-banner--light .shb-btn--ghost {
  color: var(--silvee-graphite, #2A2522);
  border-color: var(--silvee-graphite, #2A2522);
}
body[data-page="home"] .shb-banner--light .shb-btn--ghost:hover { background: var(--silvee-ivory, #F3EDDE); }

/* ════ PRODUCT GRID ═════════════════════════════════════════════ */
body[data-page="home"] .shb-prodgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
@media (min-width: 640px) { body[data-page="home"] .shb-prodgrid { gap: 1.25rem; } }
@media (min-width: 1024px) {
  body[data-page="home"] .shb-prodgrid--cols-2 { grid-template-columns: repeat(2, 1fr); }
  body[data-page="home"] .shb-prodgrid--cols-3 { grid-template-columns: repeat(3, 1fr); }
  body[data-page="home"] .shb-prodgrid--cols-4 { grid-template-columns: repeat(4, 1fr); }
  body[data-page="home"] .shb-prodgrid--cols-5 { grid-template-columns: repeat(5, 1fr); }
}
body[data-page="home"] .shb-prodgrid-more { margin-top: 2rem; display: flex; justify-content: center; }
body[data-page="home"] .shb-prodgrid-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--silvee-stone, #8A7D6A);
  padding: 2rem 0;
  font-size: 0.9rem;
}
body[data-page="home"] .shb-fallback-card {
  display: block;
  text-decoration: none;
  color: var(--silvee-graphite, #2A2522);
  font-size: 0.85rem;
}
body[data-page="home"] .shb-fallback-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 0.4rem;
}

/* ════ FEATURE CARDS ════════════════════════════════════════════ */
body[data-page="home"] .shb-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 768px) {
  body[data-page="home"] .shb-features { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}
body[data-page="home"] .shb-feature {
  background: var(--silvee-cream, #FAF6EF);
  border: 1px solid var(--silvee-bone, #E8DFC8);
  border-radius: 12px;
  padding: 2rem 1.6rem;
  text-align: center;
}
body[data-page="home"] .shb-feature-icon { color: var(--silvee-maroon, #7A1F2B); display: inline-flex; margin-bottom: 0.7rem; }
body[data-page="home"] .shb-feature-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--silvee-ink, #1A1614);
}
body[data-page="home"] .shb-feature-body {
  margin-top: 0.65rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--silvee-graphite, #2A2522);
}
body[data-page="home"] .shb-feature-link {
  display: inline-flex;
  margin-top: 0.9rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--silvee-maroon, #7A1F2B);
  text-decoration: none;
}
body[data-page="home"] .shb-feature-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ════ REVIEWS ══════════════════════════════════════════════════ */
body[data-page="home"] .shb-reviews-stars {
  color: var(--silvee-gold, #C8A465);
  font-size: 1.35rem;
  letter-spacing: 0.12em;
  margin-bottom: 0.6rem;
}
body[data-page="home"] .shb-reviews {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 768px) { body[data-page="home"] .shb-reviews { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { body[data-page="home"] .shb-reviews { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
body[data-page="home"] .shb-review {
  background: var(--silvee-surface, #fff);
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(42, 37, 34, 0.06);
}
body[data-page="home"] .shb-review-stars { color: var(--silvee-gold, #C8A465); font-size: 1rem; margin-bottom: 0.5rem; }
body[data-page="home"] .shb-review-quote {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--silvee-graphite, #2A2522);
}
body[data-page="home"] .shb-review-author {
  margin-top: 0.9rem;
  font-size: 0.78rem;
  color: var(--silvee-stone, #8A7D6A);
}
body[data-page="home"] .shb-reviews-more { margin-top: 2rem; text-align: center; }

/* ════ NEWSLETTER ═══════════════════════════════════════════════ */
body[data-page="home"] .shb-block--newsletter .shb-container { max-width: 720px; text-align: center; }
body[data-page="home"] .shb-newsletter-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.2rem);
  font-weight: 600;
  color: #fff;
  line-height: 1.15;
}
body[data-page="home"] .shb-newsletter-sub {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: rgba(250, 246, 239, 0.78);
}
body[data-page="home"] .shb-newsletter-form {
  margin-top: 1.5rem;
  display: flex;
  width: 100%;
  max-width: 26rem;
  margin-left: auto;
  margin-right: auto;
}
body[data-page="home"] .shb-newsletter-cc {
  display: inline-flex;
  align-items: center;
  padding: 0 0.75rem;
  background: rgba(255, 255, 255, 0.1);
  color: var(--silvee-cream, #FAF6EF);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-right: 0;
  border-radius: 6px 0 0 6px;
  font-size: 0.875rem;
}
body[data-page="home"] .shb-newsletter-input {
  flex: 1;
  min-width: 0;
  padding: 0.65rem 0.75rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 0.875rem;
}
body[data-page="home"] .shb-newsletter-input::placeholder { color: rgba(255, 255, 255, 0.4); }
body[data-page="home"] .shb-newsletter-input:focus {
  outline: none;
  border-color: var(--silvee-gold-pale, #E4CE9E);
  background: rgba(255, 255, 255, 0.16);
}
body[data-page="home"] .shb-newsletter-btn {
  padding: 0 1.25rem;
  background: var(--silvee-maroon, #7A1F2B);
  color: #fff;
  border: 1px solid var(--silvee-maroon, #7A1F2B);
  border-radius: 0 6px 6px 0;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 150ms ease;
}
body[data-page="home"] .shb-newsletter-btn:hover { background: var(--silvee-maroon-700, #611722); }
body[data-page="home"] .shb-newsletter-msg {
  margin-top: 0.75rem;
  font-size: 0.78rem;
  color: var(--silvee-gold-pale, #E4CE9E);
}

/* ════ RICH TEXT ════════════════════════════════════════════════ */
body[data-page="home"] .shb-richtext { max-width: 52rem; margin: 0 auto; }
body[data-page="home"] .shb-richtext-heading {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.3rem);
  font-weight: 600;
  color: var(--silvee-ink, #1A1614);
  line-height: 1.15;
}
body[data-page="home"] .shb-richtext-body {
  margin-top: 0.75rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--silvee-graphite, #2A2522);
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .shb-cat-img,
  body[data-page="home"] .shb-hero-dot { transition: none; }
}

/* ──────────────────────────────────────────────────────────────
   Breadcrumb — slimmer, cleaner on small screens.
   The default py-3 / 13px row is bulky on phones and wraps long
   product names onto a second line. Below 640px: tighter padding,
   smaller type, softer "›" separators, and a single line — the
   current-page label truncates with an ellipsis instead of wrapping.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  nav[aria-label="Breadcrumb"] ol {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    gap: 0.25rem;
    font-size: 0.6875rem;
    line-height: 1.35;
    flex-wrap: nowrap;
    overflow: hidden;
  }
  nav[aria-label="Breadcrumb"] ol li {
    white-space: nowrap;
  }
  nav[aria-label="Breadcrumb"] ol li[aria-current="page"] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  nav[aria-label="Breadcrumb"] ol li[aria-hidden="true"] {
    opacity: 0.5;
  }
}