/* v2.9.25.606 — MENU + KIOSK BRIGHT (Sohan 11/2: "brighter whiter bgs and maybe some gradients w the
   light green… not that dark olive green… plain black is not gona cut it unless u have the patterns
   from the hero banner in the back… ppl enjoyed the matrix screensaver… keep the glowing and
   breathing logo… bottom of the menu page is a whole white bg where it cud match the btc bg").
   One layer loaded LAST on the menu + kiosk, after clean-v1. Presentation only: no markup, data,
   cart or checkout changes. The RRH product card (#3d433e) is locked and untouched.
   Palette = RRH mint #e1fdd6 → white; green #209F48 / #7ED957 for actions; ink #0b1f12.
   ₿ tile = assets/brand/v1-migrated/SR-Pattern-Bitcoin-Gradient-1024.webp (same as the home footer);
   the hero ₿ tide canvas behind the heading is mounted by menu-kiosk-bright-v1.js.
   Specificity note: shop-polish-v1.css forces the menu dark with "html:root body #sr-menu-app#sr-menu-app …
   !important" and some :has() rules, so every menu rule here uses the id three times. */

:root { --mk-mint: #e1fdd6; --mk-line: #cdeec0; --mk-ink: #0b1f12; --mk-dim: #33473a; --mk-g: #209F48; --mk-g2: #7ED957; }

/* ---------- shared: ₿ tide canvas (JS) ---------- */
.sr-tide { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 0; pointer-events: none; flex: 0 0 0 !important; width: 100%; grid-column: 1 / -1; }
.sr-tide canvas { position: absolute; inset: 0; display: block; }

/* =========================================================
   MENU PAGE — top stays the dark hero look (heading, search, chips) exactly as shipped;
   the product area (specials strip → grid → load more) gets the light green with the
   hero's ₿ tide + ₿ tile behind the cards (Sohan 11/2: "the white bg behind the product
   cards shud have effects"). Footer below = ₿ tile + smoke like home.
   ========================================================= */
html:root body #sr-menu-app#sr-menu-app#sr-menu-app { position: relative; z-index: 1; }
html:root body #sr-menu-app#sr-menu-app#sr-menu-app .sr-menu-wrap { position: relative; isolation: isolate; background: linear-gradient(180deg, var(--mk-mint) 0, #f4fdf0 420px, #ffffff 100%) !important; }
html:root body #sr-menu-app#sr-menu-app#sr-menu-app .sr-menu-wrap::before { content: "" !important; display: block !important; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url(../brand/v1-migrated/SR-Pattern-Bitcoin-Gradient-1024.webp) center top / 560px repeat; opacity: .12; }
html:root body #sr-menu-app#sr-menu-app#sr-menu-app .sr-menu-wrap > *:not(.sr-tide) { position: relative; z-index: 2; }
html:root body #sr-menu-app#sr-menu-app#sr-menu-app .sr-menu-wrap > .sr-tide { z-index: 1;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 75%, transparent); mask-image: linear-gradient(180deg, #000 0, #000 75%, transparent); }

/* sidebar (category jump rail) sits in the light area */
html:root body #sr-menu-app#sr-menu-app#sr-menu-app #sr-menu-sidebar, html:root body #sr-menu-app#sr-menu-app#sr-menu-app .sr-menu-sidebar { background: rgba(255,255,255,.92) !important; border-right: 1px solid var(--mk-line) !important; }
html:root body #sr-menu-app#sr-menu-app#sr-menu-app .sr-menu-jump-btn { background: #fff !important; color: var(--mk-ink) !important; -webkit-text-fill-color: var(--mk-ink) !important; }
html:root body #sr-menu-app#sr-menu-app#sr-menu-app .sr-menu-jump-btn * { color: var(--mk-ink) !important; -webkit-text-fill-color: var(--mk-ink) !important; }
html:root body #sr-menu-app#sr-menu-app#sr-menu-app .sr-menu-jump-btn.sr-filter-active, html:root body #sr-menu-app#sr-menu-app#sr-menu-app .sr-menu-jump-btn[aria-pressed="true"], html:root body #sr-menu-app#sr-menu-app#sr-menu-app .sr-menu-jump-btn.is-active { background: var(--mk-g2) !important; }
html:root body #sr-menu-app#sr-menu-app#sr-menu-app .sr-menu-jump-btn.sr-filter-active *, html:root body #sr-menu-app#sr-menu-app#sr-menu-app .sr-menu-jump-btn[aria-pressed="true"] * { color: #07130b !important; -webkit-text-fill-color: #07130b !important; }

/* specials strip, section headings, load more, rewards — all inside the light area */
html:root body #sr-menu-app#sr-menu-app#sr-menu-app .sr-menu-wrap h2, html:root body #sr-menu-app#sr-menu-app#sr-menu-app .sr-menu-wrap h3 { color: var(--mk-ink) !important; -webkit-text-fill-color: var(--mk-ink) !important; }
html:root body #sr-menu-app#sr-menu-app#sr-menu-app .sr-specials-head { background: rgba(255,255,255,.94) !important; border: 1px solid var(--mk-line) !important; }
html:root body #sr-menu-app#sr-menu-app#sr-menu-app .sr-specials-head, html:root body #sr-menu-app#sr-menu-app#sr-menu-app .sr-specials-head *, html:root body #sr-menu-app#sr-menu-app#sr-menu-app .sr-specials-head a { color: var(--mk-ink) !important; -webkit-text-fill-color: var(--mk-ink) !important; }
html:root body #sr-menu-app#sr-menu-app#sr-menu-app .sr-hot-deals-btn { background: var(--mk-g2) !important; }
html:root body #sr-menu-app#sr-menu-app#sr-menu-app .sr-hot-deals-btn, html:root body #sr-menu-app#sr-menu-app#sr-menu-app .sr-hot-deals-btn * { color: #07130b !important; -webkit-text-fill-color: #07130b !important; }
html:root body #sr-menu-app#sr-menu-app#sr-menu-app .sr-load-more, html:root body #sr-menu-app#sr-menu-app#sr-menu-app button[class*=load-more] { background: var(--mk-g2) !important; color: #07130b !important; -webkit-text-fill-color: #07130b !important; }
html:root body #sr-menu-app#sr-menu-app#sr-menu-app [class*=rewards] { color: var(--mk-ink) !important; }
html:root body #sr-menu-app#sr-menu-app#sr-menu-app .sr-rewards-check, html:root body #sr-menu-app#sr-menu-app#sr-menu-app [class*=rewards-bar], html:root body #sr-menu-app#sr-menu-app#sr-menu-app [class*=rewards-check] { background: rgba(255,255,255,.94) !important; border: 1px solid var(--mk-line) !important; }
html:root body #sr-menu-app#sr-menu-app#sr-menu-app [class*=rewards] * { color: var(--mk-ink) !important; -webkit-text-fill-color: var(--mk-ink) !important; }
html:root body #sr-menu-app#sr-menu-app#sr-menu-app [class*=rewards] button { background: var(--mk-g2) !important; color: #07130b !important; -webkit-text-fill-color: #07130b !important; }
html:root body #sr-menu-app#sr-menu-app#sr-menu-app [class*=rewards] input { background: #fff !important; color: var(--mk-ink) !important; -webkit-text-fill-color: var(--mk-ink) !important; border: 1px solid var(--mk-line) !important; }
html:root body #sr-menu-app#sr-menu-app#sr-menu-app .sr-menu-wrap > p, html:root body #sr-menu-app#sr-menu-app#sr-menu-app .sr-menu-disclaimer, html:root body #sr-menu-app#sr-menu-app#sr-menu-app .sr-menu-wrap small { color: var(--mk-dim) !important; -webkit-text-fill-color: var(--mk-dim) !important; }

/* under the grid: SEO block light, footer = ₿ tile + drifting smoke (same as the home footer) */
html:root body #sr-menu-seo-fallback, html:root body .sr-seo-fallback { background: linear-gradient(180deg, #fff 0, var(--mk-mint) 100%) !important; color: var(--mk-ink) !important; }
html:root body .sr-seo-fallback h2, html:root body .sr-seo-fallback h3, html:root body .sr-seo-fallback p, html:root body .sr-seo-fallback li, html:root body .sr-seo-fallback a { color: var(--mk-ink) !important; }
html:root body footer.sr-footer, html:root body footer.sr-footer.sr-galaxy { position: relative; isolation: isolate; overflow: hidden; background: #070908 !important; color: #e3ece6 !important; }
html:root body footer.sr-footer::before, html:root body.sr-light.sr-light footer.sr-footer.sr-footer::before { content: "" !important; display: block !important; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url(../brand/v1-migrated/SR-Pattern-Bitcoin-Gradient-1024.webp) center top / 560px repeat !important; opacity: .26 !important; }
html:root body footer.sr-footer > * { position: relative; z-index: 3; }
/* light text on the dark footer (the sr-light body theme paints these dark) */
html:root body footer.sr-footer h3, html:root body footer.sr-footer h4, html:root body.sr-light.sr-light footer.sr-footer.sr-footer h3, html:root body.sr-light.sr-light footer.sr-footer.sr-footer strong, html:root body.sr-light.sr-light footer.sr-footer.sr-footer h4 { color: #fff !important; }
html:root body footer.sr-footer a, html:root body footer.sr-footer .sr-footer-col a, html:root body footer.sr-footer p, html:root body footer.sr-footer li, html:root body footer.sr-footer span, html:root body footer.sr-footer td, html:root body footer.sr-footer .sr-footer-hours * { color: #e3ece6 !important; }
html:root body footer.sr-footer a:hover { color: #7ED957 !important; }
html:root body footer.sr-footer .sr-footer-bottom, html:root body footer.sr-footer .sr-footer-credit, html:root body footer.sr-footer .sr-footer-compliance { color: #a9b8ad !important; }
html:root body footer.sr-footer .sr-footer-compliance * { color: inherit !important; }
html:root body footer.sr-footer::after, html:root body.sr-light.sr-light footer.sr-footer.sr-footer::after { content: "" !important; display: block !important; position: absolute; left: 0; top: 0; height: 100%; width: 200%; z-index: 1; pointer-events: none;
  background: url(../brand/hero-v2/smoke.webp) repeat-x 0 100% / 50% 60%; opacity: .7;
  -webkit-mask-image: linear-gradient(0deg, #000 35%, rgba(0,0,0,.35) 70%, transparent); mask-image: linear-gradient(0deg, #000 35%, rgba(0,0,0,.35) 70%, transparent);
  animation: mkFtrSmk 70s linear infinite; will-change: transform; }
@keyframes mkFtrSmk { to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { html:root body footer.sr-footer::after, html:root body.sr-light.sr-light footer.sr-footer.sr-footer::after { animation: none; } }
html:root body .sr-footer-logo-img { filter: drop-shadow(0 0 18px rgba(126,217,87,.55)); }

/* =========================================================
   KIOSK
   ========================================================= */
html:root body #sr-kiosk-app#sr-kiosk-app { background: linear-gradient(180deg, var(--mk-mint) 0, #fff 480px) !important; position: relative; isolation: isolate; }
html:root body #sr-kiosk-app#sr-kiosk-app::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url(../brand/v1-migrated/SR-Pattern-Bitcoin-Gradient-1024.webp) center top / 560px repeat; opacity: .07; }
html:root body #sr-kiosk-app#sr-kiosk-app > * { position: relative; z-index: 1; }
/* matrix rain stays the 90s screensaver (kiosk-v1.js fades it in); the shop screen gets the ₿ tide instead */
html:root body .sr-kiosk-main { position: relative; }
html:root body .sr-kiosk-main > *:not(.sr-tide) { position: relative; z-index: 2; }
html:root body .sr-kiosk-main > .sr-tide { z-index: 1; }

/* header: stays dark so the breathing camel + white wordmark glow; green rule under it */
html:root body .sr-kiosk-header { background: #070908 !important; border-bottom: 2px solid var(--mk-g2) !important; box-shadow: 0 6px 24px rgba(7,9,8,.18) !important; }
html:root body .sr-kiosk-camel { filter: drop-shadow(0 0 16px rgba(126,217,87,.7)); animation: mkBreathe 2.8s ease-in-out infinite; }
@keyframes mkBreathe { 0%,100% { transform: scale(1); filter: drop-shadow(0 0 12px rgba(126,217,87,.55)); } 50% { transform: scale(1.05); filter: drop-shadow(0 0 24px rgba(126,217,87,.95)); } }
@media (prefers-reduced-motion: reduce) { html:root body .sr-kiosk-camel { animation: none; } }

/* heading, search, sort, chips */
html:root body .sr-kiosk-main h1, html:root body .sr-kiosk-main h1 *, html:root body .sr-kiosk-main .sr-kiosk-title { color: var(--mk-ink) !important; -webkit-text-fill-color: var(--mk-ink) !important; text-shadow: none !important; background: none !important; }
html:root body .sr-kiosk-main .sr-kiosk-sub, html:root body .sr-kiosk-main > p, html:root body .sr-kiosk-main .sr-kiosk-heading p { color: var(--mk-dim) !important; }
html:root body .sr-kiosk-main .sr-kiosk-heading [class*=live], html:root body .sr-kiosk-main .sr-kiosk-heading [class*=pill] { background: var(--mk-g) !important; color: #fff !important; }
html:root body #sr-kiosk-search-input, html:root body .sr-kiosk-search, html:root body .sr-kiosk-search input { background: #fff !important; color: var(--mk-ink) !important; border-color: var(--mk-line) !important; box-shadow: 0 2px 10px rgba(32,159,72,.08) !important; }
html:root body .sr-kiosk-main input::placeholder { color: #6b8071 !important; }
html:root body .sr-kiosk-sort select, html:root body #sr-kiosk-sort-select, html:root body .sr-kiosk-main .sr-filter-btn { background: #fff !important; color: var(--mk-ink) !important; border: 1px solid var(--mk-line) !important; }
html:root body .sr-kiosk-main .sr-kiosk-feel-chip, html:root body .sr-kiosk-main [class*=chip] { background: #fff !important; color: var(--mk-ink) !important; border: 1.5px solid var(--mk-g) !important; }
html:root body .sr-kiosk-main .sr-filter-active, html:root body .sr-kiosk-main [aria-pressed="true"][class*=chip] { background: var(--mk-g) !important; color: #fff !important; border-color: var(--mk-g) !important; }
html:root body .sr-kiosk-main .sr-kiosk-feel-kicker { color: var(--mk-dim) !important; }

/* left rail (categories) + filter panel + drawer foot */
html:root body .sr-kiosk-rail { background: #fff !important; border-right: 1px solid var(--mk-line) !important; }
html:root body .sr-kiosk-rail button, html:root body .sr-kiosk-rail a, html:root body .sr-kiosk-rail button * { color: var(--mk-ink) !important; }
html:root body .sr-kiosk-rail .sr-filter-active, html:root body .sr-kiosk-rail [aria-pressed="true"], html:root body .sr-kiosk-rail .is-active { background: var(--mk-g2) !important; }
html:root body .sr-kiosk-rail .sr-filter-active *, html:root body .sr-kiosk-rail [aria-pressed="true"] *, html:root body .sr-kiosk-rail .is-active * { color: #07130b !important; }
html:root body .sr-kiosk-filter-panel { background: #fff !important; color: var(--mk-ink) !important; border-right: 1px solid var(--mk-line) !important; }
html:root body .sr-kiosk-filter-panel * { color: var(--mk-ink); }
html:root body .sr-kiosk-filter-panel .sr-filter-active { background: var(--mk-g) !important; color: #fff !important; }
html:root body .sr-kiosk-drawer-foot { background: rgba(255,255,255,.98) !important; border-top: 1px solid var(--mk-line) !important; }

/* specials strip, quick tiles, section labels */
html:root body #sr-kiosk-app#sr-kiosk-app#sr-kiosk-app .sr-kiosk-specials-rail .sr-specials-head { background: #fff !important; color: var(--mk-ink) !important; border: 1px solid var(--mk-line) !important; }
html:root body #sr-kiosk-app#sr-kiosk-app#sr-kiosk-app .sr-kiosk-specials-rail .sr-specials-head, html:root body #sr-kiosk-app#sr-kiosk-app#sr-kiosk-app .sr-specials-head *, html:root body #sr-kiosk-app#sr-kiosk-app#sr-kiosk-app .sr-specials-head a { color: var(--mk-ink) !important; -webkit-text-fill-color: var(--mk-ink) !important; }
html:root body #sr-kiosk-app#sr-kiosk-app#sr-kiosk-app .sr-hot-deals-btn { background: var(--mk-g2) !important; }
html:root body #sr-kiosk-app#sr-kiosk-app#sr-kiosk-app .sr-hot-deals-btn, html:root body #sr-kiosk-app#sr-kiosk-app#sr-kiosk-app .sr-hot-deals-btn * { color: #07130b !important; -webkit-text-fill-color: #07130b !important; }
html:root body .sr-kiosk-main .sr-kiosk-quick > *, html:root body .sr-kiosk-main .sr-kiosk-quick button { background: #fff !important; color: var(--mk-ink) !important; border: 1px solid var(--mk-line) !important; }
html:root body .sr-kiosk-main .sr-kiosk-quick * { color: var(--mk-ink) !important; }
html:root body .sr-kiosk-main h2, html:root body .sr-kiosk-main h3, html:root body .sr-kiosk-main [class*=section-title] { color: var(--mk-ink) !important; }

/* bottom cart bar: white, green checkout */
html:root body .sr-kiosk-cartbar, html:root body [class*=kiosk-order-bar], html:root body .sr-kiosk-footer, html:root body .sr-kiosk-cart-summary { background: rgba(255,255,255,.96) !important; color: var(--mk-ink) !important; border-top: 1px solid var(--mk-line) !important; box-shadow: 0 -8px 30px rgba(7,9,8,.08) !important; }
html:root body .sr-kiosk-cartbar *, html:root body [class*=kiosk-order-bar] *, html:root body .sr-kiosk-cart-summary * { color: var(--mk-ink); }
html:root body .sr-kiosk-cartbar button[class*=checkout], html:root body [class*=kiosk-order-bar] button[class*=checkout], html:root body button.sr-kiosk-checkout, html:root body .sr-kiosk-cart-summary button[class*=checkout] { background: var(--mk-g2) !important; color: #07130b !important; }

/* the old dark theme sets -webkit-text-fill-color:#fff on inputs/selects/buttons; reset it on the light surfaces */
html:root body .sr-kiosk-main select, html:root body .sr-kiosk-main input, html:root body .sr-kiosk-main .sr-filter-btn:not(.sr-filter-active), html:root body .sr-kiosk-main [class*=chip]:not(.sr-filter-active), html:root body .sr-kiosk-rail button, html:root body .sr-kiosk-filter-panel { -webkit-text-fill-color: var(--mk-ink) !important; }
html:root body .sr-kiosk-main .sr-filter-active, html:root body .sr-kiosk-filter-panel .sr-filter-active { -webkit-text-fill-color: #fff !important; }
html:root body .sr-kiosk-rail .sr-filter-active, html:root body .sr-kiosk-rail .sr-filter-active *, html:root body .sr-kiosk-rail [aria-pressed="true"], html:root body .sr-kiosk-rail [aria-pressed="true"] * { -webkit-text-fill-color: #07130b !important; }

/* ---------- menu top: compact (Sohan 11/2: "why such a big waste of space… that cud all be much better utilized") ----------
   Title + live-SKU count on the left, "Order by voice" as a compact pill on the right, search + chips
   tight underneath. Products start ~120px higher on desktop. Phone: voice lives in the search mic (clean-v1). */
html:root body #sr-menu-app#sr-menu-app#sr-menu-app .sr-menu-heading { padding: 10px 16px 0 !important; max-width: none !important; width: auto !important; margin: 0 !important; display: grid !important; grid-template-columns: 1fr auto; grid-template-areas: "h1 talk" "sub talk"; align-items: center; column-gap: 18px; row-gap: 2px; }
html:root body #sr-menu-app#sr-menu-app#sr-menu-app .sr-menu-heading h1 { grid-area: h1; font-size: 24px !important; line-height: 1.15 !important; margin: 0 !important; }
html:root body #sr-menu-app#sr-menu-app#sr-menu-app .sr-menu-heading p, html:root body #sr-menu-app#sr-menu-app#sr-menu-app .sr-menu-heading .sr-menu-sub { grid-area: sub; margin: 0 !important; font-size: 12.5px !important; }
html:root body #sr-menu-app#sr-menu-app#sr-menu-app .sr-talk-entry { grid-area: talk; justify-self: end; margin: 0 !important; padding: 6px 14px 6px 8px !important; min-height: 0 !important; height: 44px; width: auto !important; }
html:root body #sr-menu-app#sr-menu-app#sr-menu-app .sr-talk-entry b { font-size: 13.5px !important; }
html:root body #sr-menu-app#sr-menu-app#sr-menu-app .sr-talk-entry small { font-size: 11px !important; }
html:root body #sr-menu-app#sr-menu-app#sr-menu-app .sr-menu-topbar { padding: 8px 0 6px !important; }
html:root body #sr-menu-app#sr-menu-app#sr-menu-app .sr-menu-toolbar { margin-bottom: 6px !important; }
html:root body #sr-menu-app#sr-menu-app#sr-menu-app .sr-kiosk-feel-row { height: auto !important; padding-bottom: 2px !important; }
html:root body #sr-menu-app#sr-menu-app#sr-menu-app .sr-kiosk-feel-kicker { display: none !important; }
html:root body #sr-menu-app#sr-menu-app#sr-menu-app .sr-menu-wrap { padding-top: 10px !important; }
@media (max-width: 720px) {
  html:root body #sr-menu-app#sr-menu-app#sr-menu-app .sr-menu-heading { grid-template-columns: 1fr; grid-template-areas: "h1" "sub"; padding: 8px 14px 0 !important; }
  html:root body #sr-menu-app#sr-menu-app#sr-menu-app .sr-menu-heading h1 { font-size: 19px !important; }
  html:root body #sr-menu-app#sr-menu-app#sr-menu-app .sr-menu-heading p { font-size: 11.5px !important; }
}

/* ---------- 11/2 evening pass (Sohan): footer headings readable + tighter; RRH card width (220) → 5-up at 1440;
   ₿ tide smaller behind cards (set in JS: gap W/34); black top band gets the dark tide (JS) ---------- */
html:root body footer.sr-footer .sr-footer-col h3, html:root body.sr-light.sr-light footer.sr-footer.sr-footer h3 { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-size: 16px !important; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px !important; }
html:root body footer.sr-footer { padding: 30px 32px 18px !important; }
html:root body footer.sr-footer .sr-footer-inner { padding-bottom: 18px !important; }
html:root body footer.sr-footer .sr-footer-col a, html:root body footer.sr-footer .sr-footer-col li, html:root body footer.sr-footer .sr-footer-hours * { font-size: 13px !important; line-height: 1.7 !important; }
html:root body footer.sr-footer .sr-footer-logo-img { max-height: 240px !important; width: auto !important; }
html:root body #sr-menu-app#sr-menu-app#sr-menu-app .sr-menu-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 14px !important; }
@media (max-width: 1300px) { html:root body #sr-menu-app#sr-menu-app#sr-menu-app .sr-menu-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
@media (max-width: 1024px) { html:root body #sr-menu-app#sr-menu-app#sr-menu-app .sr-menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 720px) { html:root body #sr-menu-app#sr-menu-app#sr-menu-app .sr-menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } }
/* the black band above the grid (header → chips) carries the dark tide + ₿ tile so it isn't flat black */
html:root body #sr-menu-app#sr-menu-app#sr-menu-app .sr-menu-top { position: relative; isolation: isolate; }
html:root body #sr-menu-app#sr-menu-app#sr-menu-app .sr-menu-top::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url(../brand/v1-migrated/SR-Pattern-Bitcoin-Gradient-1024.webp) center top / 560px repeat; opacity: .10; }
html:root body #sr-menu-app#sr-menu-app#sr-menu-app .sr-menu-top > *:not(.sr-tide) { position: relative; z-index: 2; }
html:root body #sr-menu-app#sr-menu-app#sr-menu-app .sr-menu-top > .sr-tide { z-index: 1; }
/* no olive→black: the top band + app shell are a clean near-black with a faint deep-green glow at the top */
html:root body #sr-menu-app#sr-menu-app#sr-menu-app, html:root body #sr-menu-app#sr-menu-app#sr-menu-app > .sr-menu-top { background: #070b08 !important; background-image: none !important; }
html:root body #sr-menu-app#sr-menu-app#sr-menu-app > .sr-menu-top { background: radial-gradient(120% 90% at 50% 0%, #0f2a17 0%, #0a140d 45%, #070b08 100%) !important; }
/* footer sits INSIDE #sr-menu-app on the menu page, so the light theme's `#sr-menu-app h3` rule (1 id) was winning → ids here */
html:root body #sr-menu-app#sr-menu-app footer.sr-footer h3, html:root body #sr-menu-app#sr-menu-app footer.sr-footer h4, html:root body #sr-menu-app#sr-menu-app footer.sr-footer strong, html:root body #sr-kiosk-app#sr-kiosk-app footer.sr-footer h3 { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; }
html:root body #sr-menu-app#sr-menu-app footer.sr-footer a, html:root body #sr-menu-app#sr-menu-app footer.sr-footer li, html:root body #sr-menu-app#sr-menu-app footer.sr-footer p { color: #d9e4dc !important; -webkit-text-fill-color: #d9e4dc !important; }
html:root body #sr-menu-app#sr-menu-app footer.sr-footer a:hover { color: var(--mk-g2) !important; -webkit-text-fill-color: var(--mk-g2) !important; }
/* wide screens: shop-polish centres with padding max(24px, 50% - 680px) but shared-v3 caps the wrap at 1380 → huge dead padding past 1440.
   Let the wrap run full width (mint + ₿ tide edge to edge) and centre the content inside it. */
html:root body #sr-menu-app#sr-menu-app#sr-menu-app .sr-menu-wrap { max-width: none !important; width: 100% !important; margin: 0 !important; padding-left: max(24px, calc(50% - 760px)) !important; padding-right: max(24px, calc(50% - 760px)) !important; }
/* RRH card standard (220px): rrh-cards-v1 pins 4 columns with 4 ids → 5 ids here. auto-fill at 220 gives 5-up at 1440, 2-up on phones */
html:root body #sr-menu-grid#sr-menu-grid#sr-menu-grid#sr-menu-grid#sr-menu-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; gap: 14px !important; }
@media (max-width: 768px) { html:root body #sr-menu-grid#sr-menu-grid#sr-menu-grid#sr-menu-grid#sr-menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } }
/* every footer label readable on the dark tile (hours day names, copyright, the one-line SEO blurb) … */
html:root body #sr-menu-app#sr-menu-app footer.sr-footer .sr-footer-col *, html:root body #sr-menu-app#sr-menu-app footer.sr-footer .sr-footer-bottom *, html:root body #sr-menu-app#sr-menu-app footer.sr-footer .sr-footer-hours *, html:root body #sr-menu-app#sr-menu-app .sr-mp-seo-copy, html:root body #sr-kiosk-app#sr-kiosk-app footer.sr-footer .sr-footer-col * { color: #d9e4dc !important; -webkit-text-fill-color: #d9e4dc !important; opacity: 1 !important; }
html:root body #sr-menu-app#sr-menu-app footer.sr-footer .sr-footer-col h3, html:root body #sr-menu-app#sr-menu-app footer.sr-footer .sr-footer-col h4 { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; }
/* … except the yellow compliance notice, which stays dark-on-yellow */
html:root body #sr-menu-app#sr-menu-app footer.sr-footer .sr-footer-compliance, html:root body #sr-menu-app#sr-menu-app footer.sr-footer .sr-footer-compliance * { color: #141400 !important; -webkit-text-fill-color: #141400 !important; }
html:root body #sr-menu-app#sr-menu-app footer.sr-footer .sr-footer-compliance a { color: #0a4a1c !important; -webkit-text-fill-color: #0a4a1c !important; text-decoration: underline; }
/* ---------- product pop-up gallery (thumbs + arrows under the big photo; shared-v3 modal untouched) ---------- */
html:root body .sr-modal .sr-modal-img-col.sr-has-gal { position: relative; overflow: visible !important; max-height: none !important; display: flex; flex-direction: column; }
html:root body .sr-modal .sr-modal-img-col.sr-has-gal img.sr-modal-img { cursor: pointer; aspect-ratio: 1 / 1; height: auto !important; max-height: 420px; background: #fff; border-radius: 16px; }
html:root body .sr-modal .sr-gal { position: relative; margin-top: 10px; }
html:root body .sr-modal .sr-gal-thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 4px; scrollbar-width: none; }
html:root body .sr-modal .sr-gal-thumbs::-webkit-scrollbar { display: none; }
html:root body .sr-modal .sr-gal-th { flex: 0 0 auto; width: 58px; height: 58px; padding: 0; border-radius: 10px; overflow: hidden; border: 2px solid rgba(126,217,87,.25); background: #fff; cursor: pointer; opacity: .75; transition: opacity .15s, border-color .15s, transform .15s; }
html:root body .sr-modal .sr-gal-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
html:root body .sr-modal .sr-gal-th.is-on, html:root body .sr-modal .sr-gal-th:hover { opacity: 1; border-color: #7ED957; transform: translateY(-1px); }
html:root body .sr-modal .sr-gal-stage { position: relative; }
html:root body .sr-modal .sr-gal-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; opacity: .85; border-radius: 50%; border: 0; background: rgba(11,31,18,.72); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; display: grid; place-items: center; box-shadow: 0 2px 10px rgba(0,0,0,.35); z-index: 3; }
html:root body .sr-modal .sr-gal-prev { left: 8px; } html:root body .sr-modal .sr-gal-next { right: 8px; }
html:root body .sr-modal .sr-gal-nav:hover { background: #209F48; }
html:root body .sr-modal .sr-gal-count { position: absolute; left: 50%; transform: translateX(-50%); bottom: 10px; font: 700 11.5px/1 Poppins, system-ui, sans-serif; letter-spacing: .04em; color: #fff; background: rgba(11,31,18,.72); border-radius: 100px; padding: 5px 9px; z-index: 3; }
@media (max-width: 720px) { html:root body .sr-modal .sr-gal-th { width: 50px; height: 50px; } html:root body .sr-modal .sr-modal-img-col.sr-has-gal img.sr-modal-img { max-height: 320px; } }
/* ---------- 11/2 late (Sohan): KIOSK TOP — "top black and darker parts all made into the ₿ effects… no camel on the left…
   middle scripted Silk Road NYC breathing like on the menu… better space usage above the live specials".
   kiosk-v1.js builds the DOM; menu-kiosk-bright-v1.js wraps .sr-kiosk-heading + .sr-kiosk-toolbar into one .sr-kiosk-top
   band (presentation only) and mounts the dark ₿ tide on it and on the header. ---------- */
/* header: no camel, wordmark centred + breathing (same keyframes feel as the menu logo), ₿ tile under the tide */
html:root body #sr-kiosk-app#sr-kiosk-app .sr-kiosk-header { position: relative; isolation: isolate; background: #070908 !important; border-bottom: 1px solid rgba(126,217,87,.35) !important; box-shadow: none !important; }
html:root body #sr-kiosk-app#sr-kiosk-app .sr-kiosk-header::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url(../brand/v1-migrated/SR-Pattern-Bitcoin-Gradient-1024.webp) center / 560px repeat; opacity: .08; }
html:root body #sr-kiosk-app#sr-kiosk-app .sr-kiosk-header > *:not(.sr-tide) { position: relative; z-index: 2; }
html:root body #sr-kiosk-app#sr-kiosk-app .sr-kiosk-header > .sr-tide { z-index: 1; }
html:root body #sr-kiosk-app#sr-kiosk-app .sr-kiosk-header .sr-kiosk-brand { display: none !important; }
html:root body #sr-kiosk-app#sr-kiosk-app .sr-kiosk-header .sr-kiosk-events { margin-left: 16px !important; }
html:root body.sr-kiosk-v3 #sr-kiosk-app#sr-kiosk-app .sr-kiosk-wordmark, html:root body #sr-kiosk-app#sr-kiosk-app .sr-kiosk-wordmark { display: block !important; position: absolute; left: 50%; top: 50%; height: 44px !important; width: auto; transform: translate(-50%,-50%); transform-origin: center; animation: mkWordBreathe 3.2s ease-in-out infinite; filter: drop-shadow(0 0 12px rgba(126,217,87,.45)); pointer-events: none; }
@keyframes mkWordBreathe { 0%,100% { transform: translate(-50%,-50%) scale(1); filter: drop-shadow(0 0 4px rgba(126,217,87,.25)); } 50% { transform: translate(-50%,-50%) scale(1.06); filter: drop-shadow(0 0 16px rgba(126,217,87,.7)); } }
@media (prefers-reduced-motion: reduce) { html:root body #sr-kiosk-app#sr-kiosk-app .sr-kiosk-wordmark { animation: none; } }
/* the band: heading + search/sort/filters + feel chips on one dark ₿ panel, no grey box, no 60px of dead mint */
html:root body #sr-kiosk-app#sr-kiosk-app .sr-kiosk-top { position: relative; isolation: isolate; background: radial-gradient(120% 90% at 50% 0%, #0f2a17 0%, #0a140d 45%, #070b08 100%) !important; padding: 10px 20px 10px !important; border-bottom: 2px solid var(--mk-g2); }
html:root body #sr-kiosk-app#sr-kiosk-app .sr-kiosk-top::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url(../brand/v1-migrated/SR-Pattern-Bitcoin-Gradient-1024.webp) center top / 560px repeat; opacity: .10; }
html:root body #sr-kiosk-app#sr-kiosk-app .sr-kiosk-top > *:not(.sr-tide) { position: relative; z-index: 2; }
html:root body #sr-kiosk-app#sr-kiosk-app .sr-kiosk-top > .sr-tide { z-index: 1; }
html:root body #sr-kiosk-app#sr-kiosk-app .sr-kiosk-top .sr-kiosk-heading { display: grid !important; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 14px; padding: 0 0 8px !important; margin: 0 !important; max-width: none !important; width: auto !important; }
html:root body #sr-kiosk-app#sr-kiosk-app .sr-kiosk-top .sr-kiosk-heading-title { font-size: 24px !important; line-height: 1.1 !important; margin: 0 !important; color: #fff !important; -webkit-text-fill-color: #fff !important; }
html:root body #sr-kiosk-app#sr-kiosk-app .sr-kiosk-top .sr-kiosk-heading-kicker { order: 2; margin: 0 !important; font-size: 12px !important; letter-spacing: .08em; text-transform: uppercase; color: var(--mk-g2) !important; -webkit-text-fill-color: var(--mk-g2) !important; }
html:root body #sr-kiosk-app#sr-kiosk-app .sr-kiosk-top .sr-kiosk-heading-kicker #sr-kiosk-heading-count { background: var(--mk-g); color: #fff; -webkit-text-fill-color: #fff; border-radius: 100px; padding: 2px 8px; margin-left: 4px; }
html:root body #sr-kiosk-app#sr-kiosk-app .sr-kiosk-top .sr-kiosk-heading-copy { display: none !important; }
html:root body #sr-kiosk-app#sr-kiosk-app .sr-kiosk-top .sr-kiosk-toolbar { background: transparent !important; padding: 0 !important; margin: 0 !important; max-width: none !important; width: auto !important; box-shadow: none !important; border: 0 !important; row-gap: 8px !important; }
html:root body #sr-kiosk-app#sr-kiosk-app .sr-kiosk-top .sr-kiosk-search, html:root body #sr-kiosk-app#sr-kiosk-app .sr-kiosk-top .sr-kiosk-search input { background: #fff !important; color: var(--mk-ink) !important; -webkit-text-fill-color: var(--mk-ink) !important; border-color: transparent !important; }
html:root body #sr-kiosk-app#sr-kiosk-app .sr-kiosk-top .sr-kiosk-sort select, html:root body #sr-kiosk-app#sr-kiosk-app .sr-kiosk-top .sr-kiosk-sort, html:root body #sr-kiosk-app#sr-kiosk-app .sr-kiosk-top .sr-kiosk-filter-toggle { background: rgba(255,255,255,.08) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; border: 1px solid rgba(126,217,87,.55) !important; }
html:root body #sr-kiosk-app#sr-kiosk-app .sr-kiosk-top .sr-kiosk-feel-row { height: auto !important; padding: 0 !important; }
html:root body #sr-kiosk-app#sr-kiosk-app .sr-kiosk-top .sr-kiosk-feel-kicker { display: none !important; }
html:root body #sr-kiosk-app#sr-kiosk-app .sr-kiosk-top .sr-kiosk-feel-chip, html:root body #sr-kiosk-app#sr-kiosk-app .sr-kiosk-top [class*=chip] { background: rgba(255,255,255,.06) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; border: 1.5px solid rgba(126,217,87,.5) !important; }
html:root body #sr-kiosk-app#sr-kiosk-app .sr-kiosk-top .sr-filter-active, html:root body #sr-kiosk-app#sr-kiosk-app .sr-kiosk-top [aria-pressed="true"][class*=chip] { background: var(--mk-g2) !important; color: #07130b !important; -webkit-text-fill-color: #07130b !important; border-color: var(--mk-g2) !important; }
/* below the band: rail/specials start right away; the mint→white gradient + light ₿ tide carry the grid */
html:root body #sr-kiosk-app#sr-kiosk-app .sr-kiosk-layout { padding-top: 0 !important; margin-top: 0 !important; }
html:root body #sr-kiosk-app#sr-kiosk-app .sr-kiosk-main { padding-top: 10px !important; }
html:root body #sr-kiosk-app#sr-kiosk-app .sr-kiosk-specials-rail { margin-top: 0 !important; }
/* 11/3 — menu top matches the kiosk top: kicker inline + uppercase green, same hairline under the header */
html:root body #sr-menu-app#sr-menu-app#sr-menu-app .sr-menu-top .sr-menu-heading p, html:root body #sr-menu-app#sr-menu-app#sr-menu-app .sr-menu-top .sr-menu-heading .sr-menu-sub { font-size: 12px !important; letter-spacing: .08em; text-transform: uppercase; color: var(--mk-g2) !important; -webkit-text-fill-color: var(--mk-g2) !important; font-weight: 700; }
html:root body #sr-menu-app#sr-menu-app#sr-menu-app .sr-menu-top .sr-menu-heading { grid-template-columns: auto 1fr auto; grid-template-areas: "h1 sub talk"; align-items: baseline; column-gap: 14px; }
html:root body #sr-menu-app#sr-menu-app#sr-menu-app .sr-menu-top .sr-menu-heading h1 { grid-area: h1; }
html:root body #sr-menu-app#sr-menu-app#sr-menu-app .sr-menu-top .sr-menu-heading .sr-talk-entry, html:root body #sr-menu-app#sr-menu-app#sr-menu-app .sr-menu-top .sr-menu-heading [class*=talk] { grid-area: talk; align-self: center; }
@media (max-width: 720px) { html:root body #sr-menu-app#sr-menu-app#sr-menu-app .sr-menu-top .sr-menu-heading { grid-template-columns: 1fr; grid-template-areas: "h1" "sub" "talk"; } }