/* ============================================================
   SILK ROAD NYC — MENU PAGE STYLES v2.9.25.38
   Rich sidebar filters, search, sort, active chips, and grid shell.
   Product-card styling remains in shared-v3.css / SR.renderCard().
   ============================================================ */

.sr-menu-wrap {
  display: flex;
  max-width: 1440px;
  margin: 0 auto;
  padding: calc(var(--sr-header-h, 72px) + 24px) 24px 56px;
  gap: 28px;
  min-height: 100vh;
}

.sr-menu-main {
  flex: 1;
  min-width: 0;
}

.sr-menu-sidebar {
  width: min(320px, 28vw);
  flex: 0 0 min(320px, 28vw);
  position: sticky;
  top: calc(var(--sr-header-h, 72px) + 18px);
  align-self: flex-start;
  max-height: calc(100vh - var(--sr-header-h, 72px) - 36px);
  overflow-y: auto;
  padding: 16px;
  border: 1px solid rgba(10,10,10,.14);
  border-radius: 8px;
  background: #ffffff;
  color: #0a0a0a;
  scrollbar-width: thin;
  scrollbar-color: #209F48 transparent;
}

.sr-menu-sidebar::-webkit-scrollbar { width: 6px; }
.sr-menu-sidebar::-webkit-scrollbar-track { background: transparent; }
.sr-menu-sidebar::-webkit-scrollbar-thumb { background: #209F48; border-radius: 8px; }

.sr-menu-filter-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(10,10,10,.12);
}

.sr-menu-filter-head strong {
  display: block;
  margin-top: 4px;
  color: #0a0a0a;
  font: 850 16px/1.2 var(--sr-font);
  letter-spacing: 0;
}

.sr-menu-filter-kicker,
.sr-menu-filter-loaded {
  display: inline-block;
  color: #209F48;
  font: 850 11px/1.2 var(--sr-font);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sr-menu-filter-loaded {
  min-width: 64px;
  padding: 6px 8px;
  border: 1px solid rgba(32,159,72,.28);
  border-radius: 8px;
  text-align: center;
  white-space: nowrap;
}

.sr-mobile-filter-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  width: calc(100% - 32px);
  margin: calc(var(--sr-header-h, 72px) + 14px) 16px 0;
  border: 2px solid #209F48;
  border-radius: 8px;
  background: #209F48;
  color: #ffffff;
  font: 850 13px/1 var(--sr-font);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}

.sr-filter-count-badge {
  min-width: 22px;
  min-height: 22px;
  padding: 4px 6px;
  border-radius: 999px;
  background: #ffffff;
  color: #209F48;
  font: 900 11px/1 var(--sr-font);
}

.sr-menu-search {
  position: relative;
  margin-bottom: 16px;
}

.sr-menu-search input {
  width: 100%;
  min-height: 44px;
  padding: 12px 14px 12px 42px;
  border: 1.5px solid rgba(10,10,10,.18);
  border-radius: 8px;
  background: #ffffff;
  color: #0a0a0a;
  font: 650 14px/1.2 var(--sr-font);
  outline: none;
  transition: border-color .2s var(--sr-ease), box-shadow .2s var(--sr-ease);
}

.sr-menu-search input::placeholder {
  color: #555555;
  opacity: 1;
}

.sr-menu-search input:focus {
  border-color: #209F48;
  box-shadow: 0 0 0 3px rgba(32,159,72,.18);
}

.sr-menu-search-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  border: 2px solid #209F48;
  border-radius: 50%;
  pointer-events: none;
}

.sr-menu-search-icon::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 2px;
  right: -6px;
  bottom: -4px;
  background: #209F48;
  transform: rotate(45deg);
  border-radius: 2px;
}

.sr-filter-group {
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(10,10,10,.12);
}

.sr-filter-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 0;
  color: #0a0a0a;
  font: 850 12px/1.2 var(--sr-font);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}

.sr-filter-heading::-webkit-details-marker { display: none; }

.sr-filter-heading::after {
  content: "+";
  order: 3;
  width: 20px;
  color: #209F48;
  font: 900 18px/1 var(--sr-font);
  text-align: right;
}

.sr-filter-section[open] .sr-filter-heading::after {
  content: "-";
}

.sr-filter-group-count,
.sr-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #f2f6f1;
  color: #209F48;
  border: 1px solid rgba(32,159,72,.2);
  font: 850 11px/1 var(--sr-font);
}

.sr-filter-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0 0 16px;
  list-style: none;
}

.sr-filter-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 1.5px solid rgba(10,10,10,.16);
  border-radius: 8px;
  background: #ffffff;
  color: #0a0a0a;
  font: 750 13px/1.25 var(--sr-font);
  cursor: pointer;
  text-align: left;
  transition: background .18s var(--sr-ease), border-color .18s var(--sr-ease), color .18s var(--sr-ease), transform .18s var(--sr-ease);
}

.sr-filter-btn:hover,
.sr-filter-btn:focus-visible {
  border-color: #209F48;
  background: #f2f8f0;
  color: #0a0a0a;
  outline: none;
}

.sr-filter-btn.sr-filter-active {
  background: #209F48;
  border-color: #209F48;
  color: #ffffff;
  box-shadow: 0 8px 18px -14px rgba(32,159,72,.8);
}

.sr-filter-btn.sr-filter-active .sr-filter-count {
  background: #ffffff;
  color: #209F48;
  border-color: #ffffff;
}

.sr-filter-btn:disabled {
  opacity: .48;
  cursor: default;
  background: #f7f8f7;
}

.sr-filter-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex: 0 0 24px;
  border-radius: 6px;
}

.sr-filter-text {
  flex: 1 1 auto;
  min-width: 0;
}

.sr-clear-all-btn,
.sr-clear-filters {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 8px;
  background: #ffffff;
  border: 1.5px solid #209F48;
  color: #209F48;
  font: 850 12px/1 var(--sr-font);
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .18s var(--sr-ease), color .18s var(--sr-ease), border-color .18s var(--sr-ease);
}

.sr-clear-all-btn {
  width: 100%;
  margin-top: 16px;
}

.sr-clear-all-btn:hover,
.sr-clear-filters:hover,
.sr-clear-all-btn:focus-visible,
.sr-clear-filters:focus-visible {
  background: #209F48;
  border-color: #209F48;
  color: #ffffff;
  outline: none;
}

.sr-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
  padding: 0;
  background: transparent;
}

.sr-active-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 7px 10px 7px 12px;
  border-radius: 8px;
  background: #eaf7e5;
  border: 1px solid rgba(32,159,72,.26);
  color: #0a0a0a;
  font: 750 12px/1.2 var(--sr-font);
}

.sr-active-filter-tag button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  border: 0;
  border-radius: 999px;
  background: #209F48;
  color: #ffffff;
  font: 900 12px/1 var(--sr-font);
  cursor: pointer;
}

.sr-menu-topbar {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 18px;
  padding: 12px;
  border: 1px solid rgba(10,10,10,.12);
  border-radius: 8px;
  background: #ffffff;
  color: #0a0a0a;
}

.sr-menu-breadcrumb,
.sr-menu-result-count {
  color: #555555;
  font: 700 13px/1.3 var(--sr-font);
}

.sr-menu-breadcrumb strong,
.sr-menu-result-count strong {
  color: #0a0a0a;
}

.sr-menu-sort select {
  min-height: 44px;
  min-width: 190px;
  padding: 10px 36px 10px 12px;
  border: 1.5px solid rgba(10,10,10,.18);
  border-radius: 8px;
  background: #ffffff;
  color: #0a0a0a;
  font: 750 13px/1.2 var(--sr-font);
}

.sr-menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}

.sr-menu-load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin: 36px auto 0;
  padding: 14px 36px;
  border: 1.5px solid #209F48;
  border-radius: 8px;
  background: #ffffff;
  color: #209F48;
  font: 850 13px/1 var(--sr-font);
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .18s var(--sr-ease), color .18s var(--sr-ease), transform .18s var(--sr-ease);
}

.sr-menu-load-more:hover,
.sr-menu-load-more:focus-visible {
  background: #209F48;
  color: #ffffff;
  outline: none;
  transform: translateY(-1px);
}

.sr-menu-load-more:disabled {
  opacity: .55;
  cursor: default;
  transform: none;
}

.sr-menu-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 72px 24px;
  text-align: center;
  gap: 14px;
  border: 1px solid rgba(10,10,10,.12);
  border-radius: 8px;
  background: #ffffff;
}

.sr-menu-empty-icon {
  width: 42px;
  height: 42px;
  border: 3px solid #209F48;
  border-radius: 50%;
  position: relative;
}

.sr-menu-empty-icon::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 3px;
  right: -11px;
  bottom: 2px;
  background: #209F48;
  transform: rotate(45deg);
  border-radius: 2px;
}

.sr-menu-empty h3 {
  margin: 0;
  color: #0a0a0a;
  font: 850 20px/1.2 var(--sr-font);
}

.sr-menu-empty p {
  max-width: 380px;
  margin: 0;
  color: #555555;
  font: 600 14px/1.55 var(--sr-font);
}

@media (max-width: 1024px) {
  .sr-menu-wrap {
    gap: 20px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .sr-menu-sidebar {
    width: 280px;
    flex-basis: 280px;
  }

  .sr-menu-grid {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
  }
}

@media (max-width: 780px) {
  .sr-mobile-filter-toggle {
    display: flex;
  }

  .sr-menu-wrap {
    flex-direction: column;
    padding-top: 16px;
  }

  .sr-menu-sidebar {
    display: none;
    position: static;
    width: 100%;
    flex-basis: auto;
    max-height: none;
    margin-bottom: 16px;
  }

  .sr-menu-sidebar.sr-sidebar-open {
    display: block;
  }

  .sr-menu-topbar {
    grid-template-columns: 1fr;
  }

  .sr-menu-sort select {
    width: 100%;
  }

  .sr-filter-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sr-filter-btn {
    align-items: center;
  }

  .sr-menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .sr-mobile-filter-toggle {
    width: calc(100% - 24px);
    margin-left: 12px;
    margin-right: 12px;
  }

  .sr-menu-wrap {
    padding-left: 12px;
    padding-right: 12px;
  }

  .sr-menu-sidebar {
    padding: 12px;
  }

  .sr-filter-list {
    grid-template-columns: 1fr;
  }

  .sr-menu-grid {
    gap: 10px;
  }
}

/* v2.9.25.38 — beat older shared !important menu overrides. */
html body #sr-menu-app .sr-menu-sidebar,
html body #sr-menu-app .sr-menu-topbar,
html body #sr-menu-app .sr-active-filters {
  background: #ffffff !important;
  color: #0a0a0a !important;
  border-color: rgba(10,10,10,.14) !important;
}

html body #sr-menu-app .sr-filter-btn,
html body #sr-menu-app .sr-menu-load-more,
html body #sr-menu-app .sr-menu-sort select,
html body #sr-menu-app .sr-menu-search input {
  background: #ffffff !important;
  border-color: rgba(10,10,10,.18) !important;
  color: #0a0a0a !important;
}

html body #sr-menu-app .sr-filter-btn:hover,
html body #sr-menu-app .sr-filter-btn:focus-visible {
  background: #f2f8f0 !important;
  border-color: #209F48 !important;
  color: #0a0a0a !important;
}

html body #sr-menu-app .sr-filter-btn.sr-filter-active,
html body #sr-menu-app .sr-filter-btn.sr-filter-active:hover,
html body #sr-menu-app .sr-menu-load-more:hover,
html body #sr-menu-app .sr-clear-all-btn:hover,
html body #sr-menu-app .sr-clear-filters:hover {
  background: #209F48 !important;
  border-color: #209F48 !important;
  color: #ffffff !important;
}

html body #sr-menu-app .sr-filter-count,
html body #sr-menu-app .sr-filter-group-count {
  background: #f2f6f1 !important;
  color: #209F48 !important;
  border-color: rgba(32,159,72,.2) !important;
}

html body #sr-menu-app .sr-filter-btn.sr-filter-active .sr-filter-count {
  background: #ffffff !important;
  color: #209F48 !important;
  border-color: #ffffff !important;
}

html body #sr-menu-app .sr-mobile-filter-toggle {
  background: #209F48 !important;
  border-color: #209F48 !important;
  color: #ffffff !important;
}

/* v2.9.25.107 — Sohan: menu cards looked inconsistent. Unify ALL strain/potency
   badges to ONE clean style (was a jarring mix of white-on-green, green-on-white,
   per-strain colors). Light-green pill + dark-green text + thin border, identical
   across hybrid/indica/sativa/thc/cbd. Scoped to #sr-menu-app = menu page only
   (protected cards on home/kiosk untouched). */
html body #sr-menu-app .sr-card .sr-badge,
html body #sr-menu-app .sr-card .sr-badge-hybrid,
html body #sr-menu-app .sr-card .sr-badge-indica,
html body #sr-menu-app .sr-card .sr-badge-sativa,
html body #sr-menu-app .sr-card .sr-badge-thc,
html body #sr-menu-app .sr-card .sr-badge-cbd {
  background: rgba(126,217,87,.14) !important;
  color: #176b32 !important;
  -webkit-text-fill-color: #176b32 !important;
  border: 1px solid rgba(32,159,72,.30) !important;
  font-weight: 700 !important;
  border-radius: 100px !important;
  padding: 3px 9px !important;
}
/* brand name a touch more present (was too light per critique) */
html body #sr-menu-app .sr-card .sr-card-brand { color: #5a6a5a !important; -webkit-text-fill-color: #5a6a5a !important; }
/* a bit more breathing room between cards */
html body #sr-menu-app .sr-menu-grid { gap: 20px !important; }

/* ============================================================
   v2.9.25.150 — MENU DARK THEME (match the kiosk).
   Sohan: menu page is all white + blue/grey; make it dark like the kiosk.
   Flips page + sidebar + search + filter chrome to near-black + green + light
   text. Product cards were already dark (#1f1f22). Everything scoped to
   #sr-menu-app / body:has(#sr-menu-app) so no other page is touched. */

/* Page canvas → near-black (kiosk space) */
body:has(#sr-menu-app) { background: #08080b !important; }
body:has(#sr-menu-app) .site-main,
body:has(#sr-menu-app) .entry-content,
body:has(#sr-menu-app) article { background: transparent !important; }

/* Sidebar shell */
html body #sr-menu-app .sr-menu-sidebar {
  background: #0e0e12 !important;
  color: #e6e9e4 !important;
  border-color: rgba(126,217,87,.18) !important;
}
html body #sr-menu-app .sr-menu-filter-head { border-bottom-color: rgba(255,255,255,.10) !important; }
html body #sr-menu-app .sr-menu-filter-head strong { color: #f2f4f0 !important; -webkit-text-fill-color: #f2f4f0 !important; }
html body #sr-menu-app .sr-filter-group { border-top-color: rgba(255,255,255,.08) !important; }
html body #sr-menu-app .sr-filter-heading { color: #ecefe9 !important; }

/* Search field */
html body #sr-menu-app .sr-menu-search input {
  background: #141417 !important;
  color: #ecefe9 !important;
  border-color: rgba(255,255,255,.14) !important;
}
html body #sr-menu-app .sr-menu-search input::placeholder { color: #8a8f88 !important; }

/* Filter option buttons */
html body #sr-menu-app .sr-filter-btn {
  background: #141417 !important;
  color: #e6e9e4 !important;
  border-color: rgba(255,255,255,.12) !important;
}
html body #sr-menu-app .sr-filter-btn:hover,
html body #sr-menu-app .sr-filter-btn:focus-visible {
  background: rgba(126,217,87,.12) !important;
  border-color: #7ED957 !important;
  color: #ffffff !important;
}
html body #sr-menu-app .sr-filter-btn.sr-filter-active {
  background: #209F48 !important; border-color: #7ED957 !important; color: #ffffff !important;
}
html body #sr-menu-app .sr-filter-btn:disabled { background: #101013 !important; }

/* Filter count pills → faint green on dark */
html body #sr-menu-app .sr-filter-group-count,
html body #sr-menu-app .sr-filter-count {
  background: rgba(126,217,87,.14) !important;
  color: #7ED957 !important;
  border-color: rgba(126,217,87,.30) !important;
}
html body #sr-menu-app .sr-filter-btn.sr-filter-active .sr-filter-count { background: #ffffff !important; color: #176b32 !important; }

/* Clear buttons — ghost green on dark */
html body #sr-menu-app .sr-clear-all-btn,
html body #sr-menu-app .sr-clear-filters {
  background: transparent !important; color: #7ED957 !important; border-color: #7ED957 !important;
}
html body #sr-menu-app .sr-clear-all-btn:hover,
html body #sr-menu-app .sr-clear-filters:hover { background: #209F48 !important; color: #ffffff !important; }

/* Heading + topbar text → light */
html body #sr-menu-app .sr-menu-heading h1,
html body #sr-menu-app .sr-menu-heading h2 { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; }
html body #sr-menu-app .sr-menu-heading-copy { color: rgba(255,255,255,.66) !important; -webkit-text-fill-color: rgba(255,255,255,.66) !important; }
html body #sr-menu-app .sr-menu-breadcrumb,
html body #sr-menu-app .sr-menu-result-count { color: rgba(255,255,255,.62) !important; -webkit-text-fill-color: rgba(255,255,255,.62) !important; }
html body #sr-menu-app .sr-menu-breadcrumb strong { color: #7ED957 !important; -webkit-text-fill-color: #7ED957 !important; }
html body #sr-menu-app #sr-sort-select,
html body #sr-menu-app .sr-menu-sort select {
  background: #141417 !important; color: #ecefe9 !important; border: 1.5px solid rgba(255,255,255,.14) !important;
}

/* Menu product cards: lift brand + badge greens for the dark canvas */
html body #sr-menu-app .sr-card .sr-card-brand { color: #9fb0a4 !important; -webkit-text-fill-color: #9fb0a4 !important; }
html body #sr-menu-app .sr-card .sr-badge,
html body #sr-menu-app .sr-card .sr-badge-hybrid,
html body #sr-menu-app .sr-card .sr-badge-indica,
html body #sr-menu-app .sr-card .sr-badge-sativa,
html body #sr-menu-app .sr-card .sr-badge-thc,
html body #sr-menu-app .sr-card .sr-badge-cbd {
  background: rgba(126,217,87,.16) !important;
  color: #a8e08a !important;
  -webkit-text-fill-color: #a8e08a !important;
  border-color: rgba(126,217,87,.34) !important;
}

/* Active-filter chips (top of results) → dark */
html body #sr-menu-app .sr-active-filters .sr-af-chip,
html body #sr-menu-app .sr-active-filters button {
  background: rgba(126,217,87,.12) !important; color: #dfe7da !important; border-color: rgba(126,217,87,.3) !important;
}

/* v2.9.25.151 — MENU DARK THEME (cards). The menu product cards were rendering
   WHITE with dark text (inherited light-theme). To match the kiosk, force them to
   the dark card DNA: #141417 card, light name/price, muted brand. Scoped to
   #sr-menu-app (home carousels + kiosk untouched). */
html body #sr-menu-app .sr-card {
  background: #141417 !important;
  color: #f0f0f0 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}
html body #sr-menu-app .sr-card .sr-card-body { background: transparent !important; }
html body #sr-menu-app .sr-card .sr-card-name,
html body #sr-menu-app .sr-card .sr-card-price,
html body #sr-menu-app .sr-card .sr-card-price-special {
  color: #f4f4f2 !important; -webkit-text-fill-color: #f4f4f2 !important;
}
html body #sr-menu-app .sr-card .sr-card-price-special { color: #7ED957 !important; -webkit-text-fill-color: #7ED957 !important; }
html body #sr-menu-app .sr-card .sr-card-price-old { color: #7f7f83 !important; -webkit-text-fill-color: #7f7f83 !important; }
html body #sr-menu-app .sr-card .sr-card-weight { color: #9fb0a4 !important; -webkit-text-fill-color: #9fb0a4 !important; }
/* keep product image tile clean/white so products pop on the dark card */
html body #sr-menu-app .sr-card .sr-card-img-wrap { background: #f4f4f2 !important; }

/* v2.9.25.152 — MENU DARK THEME (the missing panels). The main column, product
   grid, and topbar had their own WHITE backgrounds — the real reason the page
   read white despite the dark body. Make them transparent so the near-black page
   shows through and the dark cards pop. Plus a dark page scrollbar. */
html body #sr-menu-app .sr-menu-main,
html body #sr-menu-app .sr-menu-grid,
html body #sr-menu-app #sr-menu-grid,
html body #sr-menu-app .sr-menu-topbar,
html body #sr-menu-app .sr-active-filters { background: transparent !important; }
/* topbar seam line, if any, to a subtle green */
html body #sr-menu-app .sr-menu-topbar { border-color: rgba(126,217,87,.14) !important; }
/* dark page scrollbar on the menu */
body:has(#sr-menu-app) { scrollbar-width: thin; scrollbar-color: #2a2a30 #0b0b0e; }
body:has(#sr-menu-app)::-webkit-scrollbar { width: 12px; }
body:has(#sr-menu-app)::-webkit-scrollbar-track { background: #0b0b0e; }
body:has(#sr-menu-app)::-webkit-scrollbar-thumb { background: #2a2a30; border-radius: 8px; border: 3px solid #0b0b0e; }

/* v2.9.25.153 — MENU: kiosk "space" starfield background + de-blue.
   Sohan: "still blue in places, make it space + stars like the kiosk."
   (a) Fixed starfield + green nebula behind the whole menu (matches kiosk).
   (b) Shift the dark greys off their blue tint to green-neutral near-black. */

/* page canvas: green-neutral near-black (was blue-tinted #08080b) */
body:has(#sr-menu-app) { background: #060806 !important; }

/* fixed nebula glow layer */
body:has(#sr-menu-app)::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(ellipse 780px 440px at 16% 6%, rgba(126,217,87,.11), transparent 72%),
    radial-gradient(ellipse 640px 380px at 88% 70%, rgba(32,159,72,.07), transparent 74%),
    #050705;
}
/* fixed starfield layer */
body:has(#sr-menu-app)::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .78;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.92) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgba(255,255,255,.5) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(126,217,87,.6) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(255,255,255,.34) 0 1.4px, transparent 2.2px),
    radial-gradient(circle, rgba(126,217,87,.26) 0 1.6px, transparent 2.6px);
  background-size: 92px 128px, 146px 190px, 214px 260px, 320px 360px, 470px 520px;
  background-position: 12px 18px, 58px 92px, 124px 42px, 220px 130px, 36px 240px;
}

/* de-blue the panels + let the starfield subtly show through the sidebar */
html body #sr-menu-app .sr-menu-sidebar { background: rgba(8,11,8,.72) !important; border-color: rgba(126,217,87,.20) !important; }
html body #sr-menu-app .sr-menu-search input { background: rgba(18,21,18,.9) !important; }
html body #sr-menu-app .sr-filter-btn { background: rgba(18,21,18,.85) !important; }
html body #sr-menu-app .sr-card { background: #10130f !important; border-color: rgba(126,217,87,.10) !important; }
html body #sr-menu-app #sr-sort-select,
html body #sr-menu-app .sr-menu-sort select { background: rgba(18,21,18,.95) !important; }
/* scrollbar to green-neutral */
body:has(#sr-menu-app) { scrollbar-color: #2c322c #070907; }
body:has(#sr-menu-app)::-webkit-scrollbar-track { background: #070907; }
body:has(#sr-menu-app)::-webkit-scrollbar-thumb { background: #2c322c; border-color: #070907; }

/* v2.9.25.154 — final menu polish: kill residual blue (warm the darks a hair) +
   fix the real page scrollbar (it's the <html> element, not body). */
body:has(#sr-menu-app) { background: #070805 !important; }
html body #sr-menu-app .sr-card { background: #12130e !important; }
html body #sr-menu-app .sr-menu-sidebar { background: rgba(10,12,8,.72) !important; }
/* viewport scrollbar lives on <html> */
html:has(#sr-menu-app) { scrollbar-width: thin; scrollbar-color: #2c322a #070805; }
html:has(#sr-menu-app)::-webkit-scrollbar { width: 12px; }
html:has(#sr-menu-app)::-webkit-scrollbar-track { background: #070805; }
html:has(#sr-menu-app)::-webkit-scrollbar-thumb { background: #2c322a; border-radius: 8px; border: 3px solid #070805; }

/* v2.9.25.155 — kill ALL blue perception: push the menu darks to a clearly
   warm green-black (green = highest channel, blue = lowest). Belt-and-suspenders
   after confirming the computed values were already blue-lowest — this removes
   any residual cool cast on cooler monitors. */
body:has(#sr-menu-app) { background: #080a05 !important; }
html body #sr-menu-app .sr-card { background: #15160d !important; border-color: rgba(126,217,87,.12) !important; }
html body #sr-menu-app .sr-menu-sidebar { background: rgba(12,15,9,.74) !important; }
html body #sr-menu-app .sr-menu-search input,
html body #sr-menu-app .sr-filter-btn,
html body #sr-menu-app #sr-sort-select,
html body #sr-menu-app .sr-menu-sort select { background: rgba(20,23,15,.92) !important; }
body:has(#sr-menu-app)::before { background:
  radial-gradient(ellipse 780px 440px at 16% 6%, rgba(126,217,87,.12), transparent 72%),
  radial-gradient(ellipse 640px 380px at 88% 70%, rgba(32,159,72,.08), transparent 74%),
  #070904 !important; }

/* v2.9.25.156 — final de-blue: lift the card + panel darks to a clearly-warm
   CHARCOAL (olive/green-black, obviously not near-black) so they can't read as
   "dark = blue" on any monitor. Green channel highest, then red, blue lowest. */
html body #sr-menu-app .sr-card { background: #1a1c12 !important; border-color: rgba(126,217,87,.14) !important; }
html body #sr-menu-app .sr-menu-sidebar { background: rgba(16,19,11,.8) !important; }
html body #sr-menu-app .sr-menu-search input,
html body #sr-menu-app .sr-filter-btn,
html body #sr-menu-app #sr-sort-select,
html body #sr-menu-app .sr-menu-sort select { background: rgba(24,27,16,.94) !important; }
body:has(#sr-menu-app) { background: #0a0c07 !important; }

/* v2.9.25.157 — MENU space background, done right. Prior attempts put the
   starfield on a pseudo-element that didn't render, leaving a FLAT dark field
   that read as "blue". Put a real, fixed starfield directly on the body (and fix
   the white <html>). Warm-dark base + white/green stars = homepage "space" feel. */
html:has(#sr-menu-app) { background: #080a06 !important; }
body:has(#sr-menu-app) {
  background-color: #080a06 !important;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.90) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgba(255,255,255,.50) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(126,217,87,.55) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(255,255,255,.32) 0 1.4px, transparent 2.2px),
    radial-gradient(circle, rgba(126,217,87,.24) 0 1.6px, transparent 2.6px),
    radial-gradient(ellipse 900px 520px at 16% 4%, rgba(126,217,87,.10), transparent 70%) !important;
  background-size: 92px 128px, 146px 190px, 214px 260px, 320px 360px, 470px 520px, 100% 100% !important;
  background-position: 12px 18px, 58px 92px, 124px 42px, 220px 130px, 36px 240px, 0 0 !important;
  background-attachment: fixed, fixed, fixed, fixed, fixed, fixed !important;
  background-repeat: repeat, repeat, repeat, repeat, repeat, no-repeat !important;
}
/* neutralize my old pseudo-element attempts so they can't interfere */
body:has(#sr-menu-app)::before, body:has(#sr-menu-app)::after { content: none !important; background: none !important; }

/* v2.9.25.158 — darken product image tiles so rows of (often blue/teal) packaging
   don't read as bright "blue layers"; keep the whole card dark for the space look. */
html body #sr-menu-app .sr-card .sr-card-img-wrap { background: #12140d !important; }

/* v2.9.25.159 — THE BLUE. .sr-menu-wrap had a navy gradient
   (linear-gradient(rgba(14,18,36,.82) ...)) behind the grid AND sidebar — the
   dark blue/purple Sohan saw. Missed before because it's a background-IMAGE
   gradient, not a solid color. Make it transparent so the green-black starfield
   shows through. */
html body .sr-menu-wrap,
html body #sr-menu-app .sr-menu-wrap,
html body #sr-menu-app.sr-menu-wrap { background: transparent !important; background-image: none !important; }