/* =========================================================================
   theme-dark.css  —  Customer-facing DARK MODE overrides
   v2.9.24.74 — first ship of the real light/dark toggle.

   Scope model:
     * Default (no body class)     → LIGHT (editorial About-DNA from v2.9.24.73)
     * body.sr-theme-light         → LIGHT explicit (same as default)
     * body.sr-theme-dark          → DARK (this file kicks in)

   Why a new class (not the legacy .sr-dark)?
     shared-v3.js unconditionally adds .sr-dark to every body, and shared-v3.css
     line 8072 forces the body WHITE regardless. Rather than fight that cascade
     (the "specificity war" v2.9.24.73 just resolved), we add a parallel class
     `sr-theme-dark` and beat the WHITE override with `html body.sr-theme-dark`
     selectors at equal-or-higher specificity.

   No canvas FX. The v2.9.24.70 dark-fx layer is held back pending a canvas
   clamp fix for the 43MP-bounds crash. This file is pure color inversion.

   Every rule here mirrors a LIGHT rule that lives in about-dna-sitewide.css
   or menu-refinement.css. Keep additions scoped — do not change LIGHT rules.
   ========================================================================= */

/* ----- TOKENS (dark palette) ----- */
body.sr-theme-dark {
  --srn-ink:           #f0f0f0;
  --srn-ink-78:        rgba(240,240,240,.82);
  --srn-ink-65:        rgba(240,240,240,.70);
  --srn-ink-55:        rgba(240,240,240,.58);
  --srn-ink-15:        rgba(255,255,255,.15);
  --srn-ink-10:        rgba(255,255,255,.10);
  --srn-paper:         #1f1f22;
  --srn-paper-soft:    #17171a;
  /* brand greens unchanged so buttons/accents stay on-brand */
}

/* ----- BASE: beat the shared-v3.css line 8072 WHITE override ----- */
/* Specificity bump via `html body.sr-theme-dark` — matches shared-v3's
   `html, html body, body.sr-dark` aggregation and wins because the body
   has our class. */
html body.sr-theme-dark {
  background: #0a0a0a !important;
  background-color: #0a0a0a !important;
  color: #f0f0f0 !important;
}

/* Section bands that were forced light by shared-v3.css */
html body.sr-theme-dark .sr-specials-section {
  background: #0f1511 !important;
  color: #f0f0f0 !important;
}
html body.sr-theme-dark .sr-specials-section .sr-section-title,
html body.sr-theme-dark .sr-specials-section h2 {
  color: #f0f0f0 !important;
  -webkit-text-fill-color: #f0f0f0 !important;
}

/* ----- TYPOGRAPHY ----- */
body.sr-theme-dark h1, body.sr-theme-dark .h1,
body.sr-theme-dark h2, body.sr-theme-dark .h2,
body.sr-theme-dark h3, body.sr-theme-dark .h3,
body.sr-theme-dark h4, body.sr-theme-dark .h4 {
  color: #f0f0f0 !important;
}
body.sr-theme-dark p {
  color: rgba(240,240,240,.82);
}
body.sr-theme-dark small,
body.sr-theme-dark .srn-small {
  color: rgba(240,240,240,.70);
}

/* ----- LINKS (mirror about-dna-sitewide.css but dark-safe) ----- */
body.sr-theme-dark a:not(.sr-btn):not(.sr-m-atc):not([class*="age-gate"]) {
  color: #7ED957;
  text-decoration-color: rgba(126,217,87,.4);
}
body.sr-theme-dark a:not(.sr-btn):not(.sr-m-atc):not([class*="age-gate"]):hover {
  color: #b8ff7c;
  text-decoration-color: #b8ff7c;
}

/* ----- CARDS (generic .sr-card plus specialised tiles) ----- */
body.sr-theme-dark .sr-card,
body.sr-theme-dark .sr-card-light,
body.sr-theme-dark .sr-hero-featured-cards .sr-card,
body.sr-theme-dark .sr-tile-card,
body.sr-theme-dark .sr-press-card {
  background: #1f1f22 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: #f0f0f0 !important;
}
body.sr-theme-dark .sr-card:hover,
body.sr-theme-dark .sr-card-light:hover,
body.sr-theme-dark .sr-hero-featured-cards .sr-card:hover,
body.sr-theme-dark .sr-tile-card:hover,
body.sr-theme-dark .sr-press-card:hover {
  box-shadow: 0 14px 36px rgba(0,0,0,.5) !important;
  border-color: rgba(126,217,87,.35) !important;
}

/* ----- PRODUCT MENU CARDS — menu-refinement.css parity -----
   menu-refinement.css uses compound `body .sr-wrap .sr-menu-grid .sr-card
   .sr-card-name` = 0,4,1 with !important. We beat that with
   `body.sr-theme-dark .sr-wrap .sr-menu-grid ...` = 0,5,1. Same principle
   across every nested card class. */
body.sr-theme-dark .sr-menu-grid .sr-card,
body.sr-theme-dark .sr-m-card,
body.sr-theme-dark .sr-menu-card {
  background: #1f1f22 !important;
  border-color: rgba(255,255,255,.08) !important;
  color: #f0f0f0 !important;
}
/* Card name — beat the 0,4,1 rule in menu-refinement.css */
body.sr-theme-dark .sr-wrap .sr-menu-grid .sr-card .sr-card-name,
body.sr-theme-dark .sr-wrap .sr-menu-wrap .sr-card .sr-card-name,
body.sr-theme-dark .sr-wrap .sr-menu-app  .sr-card .sr-card-name,
body.sr-theme-dark .sr-menu-grid .sr-card .sr-card-name,
body.sr-theme-dark .sr-menu-wrap .sr-card .sr-card-name,
body.sr-theme-dark .sr-menu-app  .sr-card .sr-card-name,
body.sr-theme-dark .sr-card-name,
body.sr-theme-dark .sr-m-card .sr-card-name,
body.sr-theme-dark .sr-m-card-name {
  color: #f0f0f0 !important;
  -webkit-text-fill-color: #f0f0f0 !important;
  background: none !important;
  background-image: none !important;
}
/* Card meta (THC%, weight) — currently rgba(15,21,17,.55) = dark on dark */
body.sr-theme-dark .sr-wrap .sr-menu-grid .sr-card .sr-card-meta,
body.sr-theme-dark .sr-wrap .sr-menu-wrap .sr-card .sr-card-meta,
body.sr-theme-dark .sr-wrap .sr-menu-app  .sr-card .sr-card-meta,
body.sr-theme-dark .sr-menu-grid .sr-card-meta,
body.sr-theme-dark .sr-menu-wrap .sr-card-meta,
body.sr-theme-dark .sr-menu-app  .sr-card-meta,
body.sr-theme-dark .sr-card-meta {
  color: rgba(240,240,240,.70) !important;
  -webkit-text-fill-color: rgba(240,240,240,.70) !important;
}
body.sr-theme-dark .sr-card-brand,
body.sr-theme-dark .sr-m-card-brand {
  color: #7ED957 !important;
  -webkit-text-fill-color: #7ED957 !important;
}
/* Card price — beat menu-refinement's 0,4,1 price rule */
body.sr-theme-dark .sr-wrap .sr-menu-grid .sr-card .sr-card-price,
body.sr-theme-dark .sr-wrap .sr-menu-wrap .sr-card .sr-card-price,
body.sr-theme-dark .sr-wrap .sr-menu-app  .sr-card .sr-card-price,
body.sr-theme-dark .sr-menu-grid .sr-card-price,
body.sr-theme-dark .sr-menu-wrap .sr-card-price,
body.sr-theme-dark .sr-menu-app  .sr-card-price,
body.sr-theme-dark .sr-card-price,
body.sr-theme-dark .sr-m-card-price {
  color: #f0f0f0 !important;
  -webkit-text-fill-color: #f0f0f0 !important;
  background: none !important;
}
body.sr-theme-dark .sr-card-desc,
body.sr-theme-dark .sr-m-card-desc,
body.sr-theme-dark .sr-card-subline {
  color: rgba(240,240,240,.68) !important;
}
/* Card body / price-row wrapper */
body.sr-theme-dark .sr-wrap .sr-menu-grid .sr-card .sr-card-body,
body.sr-theme-dark .sr-menu-grid .sr-card-body,
body.sr-theme-dark .sr-card-body {
  color: #f0f0f0 !important;
  background: transparent !important;
}

/* ----- MENU SIDEBAR + FILTERS ----- */
body.sr-theme-dark .sr-menu-sidebar {
  background: #1a1a1d !important;
  border-color: rgba(255,255,255,.08) !important;
  color: #f0f0f0 !important;
}
body.sr-theme-dark .sr-menu-sidebar .sr-sidebar-title,
body.sr-theme-dark .sr-menu-sidebar h3,
body.sr-theme-dark .sr-menu-sidebar h4 {
  color: #f0f0f0 !important;
}
body.sr-theme-dark .sr-filter-btn {
  background: transparent !important;
  color: rgba(240,240,240,.82) !important;
  border-color: rgba(255,255,255,.12) !important;
}
body.sr-theme-dark .sr-filter-btn:hover {
  background: rgba(126,217,87,.08) !important;
  color: #f0f0f0 !important;
}
body.sr-theme-dark .sr-filter-btn.sr-filter-active {
  background: rgba(126,217,87,.18) !important;
  color: #7ED957 !important;
  border-color: rgba(126,217,87,.5) !important;
}
body.sr-theme-dark .sr-active-filter-tag {
  background: rgba(126,217,87,.18) !important;
  color: #7ED957 !important;
  border-color: rgba(126,217,87,.35) !important;
}

/* ----- SEARCH + SELECTS + INPUTS ----- */
body.sr-theme-dark input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
body.sr-theme-dark select,
body.sr-theme-dark textarea {
  background: #1f1f22 !important;
  color: #f0f0f0 !important;
  border: 1.5px solid rgba(255,255,255,.15) !important;
}
body.sr-theme-dark input::placeholder,
body.sr-theme-dark textarea::placeholder {
  color: rgba(240,240,240,.45) !important;
}
body.sr-theme-dark input:focus,
body.sr-theme-dark select:focus,
body.sr-theme-dark textarea:focus {
  border-color: #7ED957 !important;
  box-shadow: 0 0 0 4px rgba(126,217,87,.18) !important;
}
body.sr-theme-dark .sr-menu-search input {
  background: #1f1f22 !important;
  color: #f0f0f0 !important;
  border-color: rgba(255,255,255,.15) !important;
}

/* ----- BUTTONS (ghost/secondary — primary keeps green gradient) ----- */
body.sr-theme-dark .sr-btn-ghost,
body.sr-theme-dark .sr-btn-secondary {
  background: transparent;
  color: #f0f0f0;
  border: 1.5px solid rgba(255,255,255,.2);
}
body.sr-theme-dark .sr-btn-ghost:hover,
body.sr-theme-dark .sr-btn-secondary:hover {
  background: #f0f0f0;
  color: #0a0a0a;
  border-color: #f0f0f0;
}

/* ----- "Load more" + sort wrap ----- */
body.sr-theme-dark .sr-menu-load-more {
  background: #1f1f22 !important;
  color: #f0f0f0 !important;
  border-color: rgba(255,255,255,.15) !important;
}
body.sr-theme-dark .sr-menu-load-more:hover {
  color: #7ED957 !important;
  border-color: rgba(126,217,87,.5) !important;
}
body.sr-theme-dark .sr-sort-wrap select {
  background: #1f1f22 !important;
  color: #f0f0f0 !important;
  border-color: rgba(255,255,255,.15) !important;
}

/* ----- CART DRAWER ----- */
body.sr-theme-dark .sr-drawer,
body.sr-theme-dark .sr-drawer-summary {
  background: #141416 !important;
  color: #f0f0f0 !important;
}
body.sr-theme-dark .sr-drawer-header {
  background: #141416 !important;
  border-bottom-color: rgba(255,255,255,.08) !important;
}
body.sr-theme-dark .sr-drawer-title {
  color: #f0f0f0 !important;
}
body.sr-theme-dark .sr-drawer-item {
  border-bottom-color: rgba(255,255,255,.06) !important;
}
body.sr-theme-dark .sr-drawer-item-name {
  color: #f0f0f0 !important;
}
body.sr-theme-dark .sr-drawer-item-price {
  color: #7ED957 !important;
}
body.sr-theme-dark .sr-drawer-empty-text {
  color: rgba(240,240,240,.6) !important;
}

/* ----- EXPLORE-BY / SECTION BANDS ----- */
body.sr-theme-dark .sr-featured-section,
body.sr-theme-dark .sr-moods-section,
body.sr-theme-dark .sr-categories-section,
body.sr-theme-dark .sr-explore-section,
body.sr-theme-dark .sr-press-section,
body.sr-theme-dark [class*="sr-section-"] {
  background: #0a0a0a !important;
  color: #f0f0f0 !important;
}
body.sr-theme-dark .sr-section-title,
body.sr-theme-dark .sr-section-subtitle,
body.sr-theme-dark .sr-featured-section h2,
body.sr-theme-dark .sr-moods-section h2,
body.sr-theme-dark .sr-categories-section h2,
body.sr-theme-dark .sr-explore-section h2,
body.sr-theme-dark .sr-press-section h2 {
  color: #f0f0f0 !important;
  -webkit-text-fill-color: #f0f0f0 !important;
}

/* ----- HERO BAND: already dark in light mode; leave as-is so FX pairing holds.
   But ensure hero H1 + sub-copy stay readable if any rule painted them dark-ink. */
body.sr-theme-dark .sr-hero-v14 .sr-hero-h1,
body.sr-theme-dark .sr-hero-cinematic h1,
body.sr-theme-dark #srnyc-hero h1 {
  color: #fff !important;
}

/* ----- FOOTER (already dark — harmless reinforcement) ----- */
body.sr-theme-dark .sr-footer {
  background: #050608 !important;
  color: #f0f0f0 !important;
}

/* ----- TOGGLE BUTTON ITSELF ----- */
/* Shared button — positioned to match the floating cart language (fixed,
   top-right) so there's a single clear "sun/moon" affordance on every page.
   Cart is bottom-right, toggle is top-right — a deliberate pair.
   v2.9.24.74 — shared-v3.css line 258 hides `.sr-theme-toggle` with
   `display:none !important` (legacy rule from a prior toggle attempt).
   Per ship constraints we don't edit that file, so we beat it here with
   higher specificity (`html body button.sr-theme-toggle` = 0,0,4 vs
   `.sr-theme-toggle` = 0,1,0 — equal important flags resolved by
   specificity, ours wins at 0,1,3 via `html body .sr-theme-toggle`). */
html body .sr-theme-toggle {
  position: fixed !important;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  z-index: 9998; /* below modal (3000 isn't higher than this). Sits above nav + content without fighting checkout. */
  background: rgba(15,21,17,.92);
  color: #7ED957;
  box-shadow: 0 4px 14px rgba(0,0,0,.35), inset 0 0 0 1px rgba(126,217,87,.35);
  transition: transform .18s cubic-bezier(0.2,0.8,0.2,1),
              box-shadow .18s cubic-bezier(0.2,0.8,0.2,1),
              background .18s cubic-bezier(0.2,0.8,0.2,1);
  visibility: visible !important;
  opacity: 1 !important;
}
.sr-theme-toggle:hover {
  transform: scale(1.08) rotate(-6deg);
  box-shadow: 0 6px 20px rgba(126,217,87,.35), inset 0 0 0 1px rgba(126,217,87,.55);
}
.sr-theme-toggle:active {
  transform: scale(.96);
}
.sr-theme-toggle:focus-visible {
  outline: 2px solid #7ED957;
  outline-offset: 3px;
}
.sr-theme-toggle svg {
  width: 20px;
  height: 20px;
  transition: transform .32s cubic-bezier(0.2,0.8,0.2,1), opacity .18s linear;
}
/* Sun shows when user is IN DARK mode (click to go light);
   Moon shows when user is IN LIGHT mode (click to go dark). */
.sr-theme-toggle .sr-theme-toggle-sun { display: none; }
.sr-theme-toggle .sr-theme-toggle-moon { display: block; }
body.sr-theme-dark .sr-theme-toggle {
  background: rgba(240,240,240,.92);
  color: #0a0a0a;
  box-shadow: 0 4px 14px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.25);
}
body.sr-theme-dark .sr-theme-toggle .sr-theme-toggle-sun { display: block; }
body.sr-theme-dark .sr-theme-toggle .sr-theme-toggle-moon { display: none; }

/* Motion-reduce honour */
@media (prefers-reduced-motion: reduce) {
  .sr-theme-toggle,
  .sr-theme-toggle svg {
    transition-duration: 0ms !important;
  }
  .sr-theme-toggle:hover {
    transform: none;
  }
}

/* Keep the toggle out of the way on narrow viewports (small-phone guard).
   Don't collide with Astra's mobile menu button which is also top-right on some
   templates — nudge down a touch below the Astra header. */
@media (max-width: 480px) {
  .sr-theme-toggle {
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
  }
  .sr-theme-toggle svg {
    width: 18px;
    height: 18px;
  }
}