/* Remove the theme's bar container box — owner wanted the big gold-bordered
   box gone; icons should float as individual pills. Theme's xstore-child ships
   many rules at `body.wp-site-premium .x6b-mobile-actions { ... !important }`
   (specificity 0,0,2,1). We beat them with `html body.wp-site-premium` (0,0,2,2,
   tie on classes / more elements wins). */
html body.wp-site-premium .x6b-mobile-actions,
.x6b-mobile-actions.x6b-mobile-actions.x6b-mobile-actions{background:transparent !important;border:0 none !important;box-shadow:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;gap:12px !important;padding:8px 12px !important}
/* Each item gets its own dark-glass pill background + subtle gold border. */
html body.wp-site-premium .x6b-mobile-actions .x6g-mbar-item,
.x6b-mobile-actions.x6b-mobile-actions .x6g-mbar-item{background:rgba(18,16,14,.94) !important;border:1px solid rgba(229,163,60,.3) !important;border-radius:16px !important;backdrop-filter:blur(8px) !important;-webkit-backdrop-filter:blur(8px) !important;box-shadow:0 4px 14px rgba(0,0,0,.35) !important}
html body.wp-site-premium .x6b-mobile-actions .x6g-mbar-item:hover,
.x6b-mobile-actions.x6b-mobile-actions .x6g-mbar-item:hover{background:rgba(30,26,22,.96) !important;border-color:rgba(229,163,60,.5) !important}
/* Middle slot (Suche): keep the theme's original stacked icon/label layout
   (logo image ON TOP, label below — just like the Reserve slot had). Owner:
   "same logo then below search icon and text". Add a small search glyph to
   the label via an inline SVG from the JS. No 2x width, no pill shape. */
html body.wp-site-premium .x6b-mobile-actions .x6g-mbar-reserve-logo[data-mas-reshape="search"] .x6g-mbar-logo{width:24px !important;height:24px !important;object-fit:contain !important;margin:0 auto 2px !important;display:block !important;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
html body.wp-site-premium .x6b-mobile-actions .x6g-mbar-reserve-logo[data-mas-reshape="search"] .x6g-mbar-label{color:#f5f1e6 !important}
html body.wp-site-premium .x6b-mobile-actions .x6g-mbar-reserve-logo[data-mas-reshape="search"] .mas-mbar-search-ico{display:inline-block;vertical-align:-2px;margin-right:3px;color:#e5a33c}
/* Right slot (Konto): same stacked layout; person SVG via JS. */
html body.wp-site-premium .x6b-mobile-actions .x6g-mbar-cart[data-mas-reshape="account"] .x6g-mbar-ico,
.x6b-mobile-actions .x6g-mbar-cart[data-mas-reshape="account"] .x6g-mbar-ico{display:inline-grid !important;place-items:center !important}
html body.wp-site-premium .x6b-mobile-actions .x6g-mbar-cart[data-mas-reshape="account"] .x6g-mbar-ico svg,
.x6b-mobile-actions .x6g-mbar-cart[data-mas-reshape="account"] .x6g-mbar-ico svg{display:block !important;width:22px !important;height:22px !important;color:inherit !important}
html body.wp-site-premium .x6b-mobile-actions .x6g-mbar-cart[data-mas-reshape="account"]::before,
html body.wp-site-premium .x6b-mobile-actions .x6g-mbar-cart[data-mas-reshape="account"]::after{content:none !important}
/* Kill the theme's cart-count "0" bubble on the new Konto slot site-wide. */
html body.wp-site-premium .x6b-mobile-actions .x6g-mbar-cart[data-mas-reshape="account"] .x6e-cart-count,
html body.wp-site-premium .x6b-mobile-actions .x6g-mbar-cart[data-mas-reshape="account"] .x6g-mbar-count,
html body.wp-site-premium .x6b-mobile-actions .x6g-mbar-cart[data-mas-reshape="account"] [class*="cart-count"],
html body.wp-site-premium .x6b-mobile-actions .x6g-mbar-cart[data-mas-reshape="account"] [class*="cart-badge"],
html body.wp-site-premium .x6b-mobile-actions .x6g-mbar-cart[data-mas-reshape="account"] [class*="mbar-count"]{display:none !important}
/* Top-right theme search toggle hidden on mobile site-wide — the shell's own
   inline top search bar (`.mas-search`) is the canonical search entry, and
   the bottom Suche pill scrolls to it. */
@media (max-width:959px){#x6e-search-toggle{display:none !important}}

/* ============================================================
 * CRITIC-LOOP ITER 1  2026-05-27 — fixes from background critic-agent
 * report (run via Agent tool, full findings in transcript). Targets
 * every dark-theme token leaking into day mode that the critic flagged.
 * Pattern: override under `body.mas-theme-light` so it fires site-wide
 * (homepage, /checkout/, /checkout-login/, /my-account/, /shop/).
 *
 * Tokens being neutralized (root-cause palette):
 *   rgb(231,238,248) / rgb(232,236,244) — light-blue text (was for dark
 *   theme); rgb(245,239,228) / rgb(244,239,230) — cream text; rgb(7,7,7)
 *   pure-black `.mas-footer` bg; rgba(141,173,205,.26) — light-blue
 *   border; rgba(20,17,13,.55) — dark chip bg; rgba(7,13,24,.78) — dark
 *   checkbox; rgba(2,6,12,*) / rgba(13,13,13,*) — dark gradients.
 * ============================================================ */

/* --- 2026-07-05 SYSTEMIC: the theme's Night-Fusion text tokens paint every
   p/li/span/label site-wide (rule: body.wp-site-premium p,... {color:var(--x6h-text-soft)}).
   In light mode those tokens must be dark ink — this replaces a dozen
   per-element patches at the root. --- */
body.mas-theme-light{
  --x6h-text-main:#1a1614;
  --x6h-text-soft:rgba(26,22,20,.75);
}

/* --- Theme header band (top of every page) — was dark gradient --- */
body.mas-theme-light .x6b-site-header-wrap{
  background:linear-gradient(rgba(251,246,236,.92),rgba(251,246,236,.6)) !important;
  border-bottom:1px solid rgba(200,127,29,.18) !important;
}

/* --- Footer (the BLACK panel below dock — biggest visible offender) --- */
body.mas-theme-light .mas-footer,
body.mas-theme-light footer.mas-footer{
  background:#ffffff !important;
  color:#1a1614 !important;
  border-top:1px solid rgba(200,127,29,.18) !important;
}
body.mas-theme-light .mas-footer-brand-name{ color:#1a1614 !important; }
body.mas-theme-light .mas-footer-brand-meta,
body.mas-theme-light .mas-footer-copy{ color:rgba(26,22,20,.72) !important; }
body.mas-theme-light .mas-footer-links a{
  color:rgba(26,22,20,.78) !important;
  border-right-color:rgba(26,22,20,.18) !important;
}
body.mas-theme-light .mas-footer-links a:hover{ color:#8f5710 !important; }
/* v126.13 iter#29 — day-mode footer-phone hover bug: base rule .mas-footer-phone:hover{color:#f5f1e6} renders cream-on-cream invisible. Override to dark-gold ink. */
body.mas-theme-light .mas-footer-phone:hover{ color:#8f5710 !important; }

/* --- 2026-07-05: dark-theme gradients that wash the light checkout gray --- */
body.mas-theme-light form.checkout.woocommerce-checkout{
  background-image:none !important;
}
body.mas-theme-light .x6b-site-header-wrap{
  background-image:linear-gradient(rgba(251,246,236,.97), rgba(251,246,236,.88)) !important;
}
/* 2026-07-05: checkout map — the invert() dark-map filter belongs to dark mode
   only; in light mode it rendered the map as a solid black box. */
body.mas-theme-light .mas-co-map iframe{ filter:none !important; }
body.mas-theme-light .mas-co-map{ background:#eee9dd !important; }
/* 2026-07-05: several pages (checkout-login 14029, restaurant-infos 14026, …)
   draw a dark body::before scrim meant for the dark theme; in light mode it
   reads as a full-page gray wash. Kill it globally in light theme. */
html body.mas-theme-light.mas-theme-light.mas-theme-light::before{
  content:none !important;
  background:none !important;
  background-image:none !important;
}
body.mas-theme-light.page-id-14029 .checkout-login-heading,
body.mas-theme-light.page-id-14029 h1, body.mas-theme-light.page-id-14029 h2{ color:#1a1614 !important; }
body.mas-theme-light .mas-cl-email-label,
body.mas-theme-light .mas-cl-guest-hint{ color:rgba(26,22,20,.78) !important; }
body.mas-theme-light .mas-cl-legal{ color:rgba(26,22,20,.62) !important; }
body.mas-theme-light .mas-cl-ghost{
  color:#1a1614 !important;
  border-color:rgba(26,22,20,.35) !important;
}
/* 2026-07-05: static-page copy (booking, infos, lieferung-*) was styled
   light-on-dark; flip inherited text ink in light mode. Elements with their
   own explicit color rules (dark product cards, promo tiles) keep them. */
body.mas-theme-light .template-content,
body.mas-theme-light .entry-content{ color:#1a1614; }
/* 2026-07-05: premium-trust SEO sections (speisekarte, lieferung-*) carry a
   translucent dark gradient meant for dark mode. Light mode: text sections
   become soft cream cards; the white-text hero keeps a solid dark card. */
html body.wp-site-premium.mas-theme-light .premium-trust-section,
html body.wp-site-premium.mas-theme-light .premium-final-cta{
  background-image:none !important;
  background-color:rgba(255,250,242,.75) !important;
}
html body.wp-site-premium.mas-theme-light .premium-trust-hero{
  background-image:none !important;
  background-color:#1d1712 !important;
}
html body.wp-site-premium.mas-theme-light .premium-trust-hero .premium-eyebrow,
html body.wp-site-premium.mas-theme-light .premium-trust-hero p,
html body.wp-site-premium.mas-theme-light .premium-trust-hero h1,
html body.wp-site-premium.mas-theme-light .premium-trust-hero h2{ color:#f5efe4 !important; }
html body.wp-site-premium.mas-theme-light .premium-btn-secondary{
  color:#8f5710 !important; border-color:rgba(200,127,29,.4) !important;
}
/* 2026-07-05: category chips on menu pages — pale gold on cream. */
body.mas-theme-light .x6c-chip{
  color:#8f5710 !important;
  border-color:rgba(200,127,29,.35) !important;
}
/* 2026-07-05: order-received page (mas-po) — an earlier light layer flips
   the card BACKGROUNDS to white but left the dark-mode cream TEXT, so the
   whole thank-you page was unreadable in light mode. */
body.mas-theme-light .mas-po-hero-title,
body.mas-theme-light .mas-po-hero-meta strong,
body.mas-theme-light .mas-po-item-name,
body.mas-theme-light .mas-po-summary-titles h2,
body.mas-theme-light .mas-po-summary-meta-row strong,
body.mas-theme-light .mas-po-totals-row--total,
body.mas-theme-light .mas-po-track-addr strong,
body.mas-theme-light .mas-po-help strong,
body.mas-theme-light .mas-po-steps li.is-done,
body.mas-theme-light .mas-po-steps li.is-active{ color:#1a1614 !important; }
body.mas-theme-light .mas-po-hero-meta,
body.mas-theme-light .mas-po-item-price,
body.mas-theme-light .mas-po-totals-row,
body.mas-theme-light .mas-po-item-note,
body.mas-theme-light .mas-po-track-addr,
body.mas-theme-light .mas-po-help,
body.mas-theme-light .mas-po-code-hint{ color:rgba(26,22,20,.72) !important; }
body.mas-theme-light .mas-po-steps li{ color:rgba(26,22,20,.45) !important; }
body.mas-theme-light .mas-po-steps li::before{ background:rgba(26,22,20,.16) !important; }
body.mas-theme-light .mas-po-step-icon{ background:#f3ede1 !important; border-color:rgba(26,22,20,.18) !important; color:rgba(26,22,20,.55) !important; }
body.mas-theme-light .mas-po-steps li.is-done .mas-po-step-icon,
body.mas-theme-light .mas-po-steps li.is-active .mas-po-step-icon{ background:#e5a33c !important; border-color:#e5a33c !important; color:#1a1a1a !important; }
body.mas-theme-light .mas-po-track-head-title{ color:#8f5710 !important; }
/* 2026-07-07: "Vielleicht Noch?" recommendation cards (.mas-random-card)
   were hardcoded dark (#161310 bg + cream text) with no light override, so
   they rendered as black cards on cream pages (booking, contact, etc.). */
body.mas-theme-light .mas-random-card{
  background:#ffffff !important;
  color:#1a1614 !important;
  border-color:rgba(200,127,29,.20) !important;
  box-shadow:0 2px 10px rgba(26,22,20,.06) !important;
}
body.mas-theme-light .mas-random-card-name{ color:#1a1614 !important; }
body.mas-theme-light .mas-random-card-section{ color:rgba(26,22,20,.55) !important; }
body.mas-theme-light .mas-random-card:hover,
body.mas-theme-light .mas-random-card:focus-visible{ border-color:rgba(200,127,29,.55) !important; }
body.mas-theme-light .mas-po-hero-ref,
body.mas-theme-light .mas-po-hero-eta,
body.mas-theme-light .mas-po-step-body,
body.mas-theme-light .mas-po-step-time,
body.mas-theme-light .mas-po-summary,
body.mas-theme-light .mas-po-summary-meta-row{ color:rgba(26,22,20,.68) !important; }
body.mas-theme-light .mas-po-steps li.is-done .mas-po-step-body,
body.mas-theme-light .mas-po-steps li.is-active .mas-po-step-body{ color:#1a1614 !important; }
body.mas-theme-light .mas-po-step-label,
body.mas-theme-light .mas-po-step-body span{ color:inherit !important; }
body.mas-theme-light .template-content :is(p,li,h1,h2,h3,h4,h5,strong,em):not([class]):not(:is(.mas-random-strip,.mas-co-block,[class*="masalas-mobile-kitchens"],.mas-hero-promo,footer,.x6e-modal) *){
  color:inherit;
}

/* --- Inputs site-wide that have inherited light-text-on-light-bg --- */
body.mas-theme-light #mas-postcode-input,
body.mas-theme-light .mas-postcode input,
body.mas-theme-light .mas-search input,
body.mas-theme-light .x6e-search-form input[type="search"],
body.mas-theme-light .checkout-login input,
body.mas-theme-light input[type="text"]:not(.mas-co-sheet-body *):not([class*="payment"]),
body.mas-theme-light input[type="email"]:not(.mas-co-sheet-body *):not([class*="payment"]){
  color:#1a1614 !important;
  border-color:rgba(200,127,29,.30) !important;
}
body.mas-theme-light .mas-search input::placeholder,
body.mas-theme-light #mas-postcode-input::placeholder{
  color:rgba(26,22,20,.45) !important;
}

/* --- "Beliebt" / "Vielleicht" rail titles — were cream-on-cream --- */
body.mas-theme-light .mas-beliebt-title,
body.mas-theme-light .mas-zufall-title,
body.mas-theme-light .mas-random-strip-title{
  color:#1a1614 !important;
}

/* --- Cart notiz sheet leftovers from critic --- */
body.mas-theme-light .mas-note-freeform-intro{
  color:rgba(26,22,20,.62) !important;
}
body.mas-theme-light .mas-note-panel textarea{
  background:#fff8eb !important;
  color:#1a1614 !important;
  border:1px solid rgba(200,127,29,.25) !important;
}
body.mas-theme-light .mas-note-chip{
  background:rgba(255,250,242,.85) !important;
  border-color:rgba(200,127,29,.25) !important;
  color:#1a1614 !important;
}
body.mas-theme-light .mas-note-chip.is-active{
  background:rgba(200,127,29,.16) !important;
  border-color:#c87f1d !important;
  color:#8f5710 !important;
}

/* --- Product detail close X button (was dark on dark, invisible glyph) --- */
body.mas-theme-light .mas-close--float{
  background:rgba(255,255,255,.85) !important;
  color:#1a1614 !important;
  border:1px solid rgba(200,127,29,.30) !important;
}
body.mas-theme-light .mas-overlay--detail .mas-overlay-backdrop{
  background:rgba(26,22,20,.35) !important;
}

/* --- Auth sheet leftovers --- */
body.mas-theme-light .mas-auth-email-label{ color:#1a1614 !important; }

/* --- Product detail addon checkboxes --- */
body.mas-theme-light .mas-addon-row input[type="checkbox"]{
  border-color:rgba(200,127,29,.45) !important;
}

/* --- InhaberEmpfiehlt card bg softening --- */
body.mas-theme-light .mas-inhaber{
  background:rgba(255,250,242,.92) !important;
}

/* --- Basket mode track --- */
body.mas-theme-light .mas-basket-mode{
  background:rgba(26,22,20,.06) !important;
}

/* CRITIC ITER 3 — additional findings 2026-05-27 */

/* RED #1 — restaurant chooser strip between WP header and hero — was
   near-black navy rgba(8,12,18,.84) bleeding through to cream pages */
body.mas-theme-light .masalas-mobile-kitchens-20260317__item{
  background:rgba(255,250,242,.92) !important;
  border:1px solid rgba(200,127,29,.22) !important;
  color:#1a1614 !important;
}

/* RED #2 — search gold-burst too loud on focus. Critic says: keep soft
   ring, drop radial sunburst. Simplify the ::before pseudo. */
body.mas-theme-light .mas-search::before{
  background:transparent !important;
  border:1.5px solid rgba(200,127,29,.55) !important;
  border-radius:999px !important;
  inset:-1px !important;
  padding:0 !important;
  animation:none !important;
}
body.mas-theme-light .mas-search:focus-within::before{
  border-color:#c87f1d !important;
  box-shadow:0 0 0 3px rgba(200,127,29,.18) !important;
}

/* YELLOW #6 — .mas-beliebt-card + .mas-item pure-white → cream-blend */
body.mas-theme-light .mas-beliebt-card,
body.mas-theme-light .mas-item{
  background:rgba(255,250,242,.92) !important;
}

/* YELLOW #7 — active mode pill inside basket drawer track pure-white */
body.mas-theme-light .mas-basket-mode-opt.active,
body.mas-theme-light .mas-basket-mode-btn.active{
  background:rgba(255,250,242,.98) !important;
}

/* YELLOW #8 — notiz sheet textarea + close cream-blend */
body.mas-theme-light .mas-note-panel .mas-close,
body.mas-theme-light .mas-overlay--detail .mas-close{
  background:rgba(255,250,242,.92) !important;
  color:#1a1614 !important;
  border:1px solid rgba(200,127,29,.30) !important;
}

/* YELLOW #9 — .mas-close--float on product detail already covered, but
   reinforce with cream-blend */
body.mas-theme-light .mas-close--float{
  background:rgba(255,250,242,.92) !important;
}

/* YELLOW #10 — auth sheet CTAs cream-blend (keep Facebook blue brand) */
body.mas-theme-light .mas-auth-btn--google{
  background:rgba(255,250,242,.96) !important;
  color:#1f1f1f !important;
  border:1px solid rgba(200,127,29,.30) !important;
}
body.mas-theme-light .mas-auth-btn--guest{
  background:rgba(255,250,242,.92) !important;
}
body.mas-theme-light .mas-auth-email input{
  background:rgba(255,250,242,.92) !important;
}

/* S25 2026-05-27 — ParentBand cuisine divider matching app's
   `function ParentBand` at masalas-native/app/index.tsx:838. Centered
   Playfair label flanked by gold ornament rules. Renders before the
   first section of each cuisine bucket (Indische / Südindische /
   Burger / Getränke & Extras). Hides when search active. */
.mas-cuisine-band{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin:24px 16px 12px;
  padding:0;
}
/* v126.6 iter#16 — app ParentBand: rule SOLID rgba(229,163,60,.55) (web faded gradient @ .45), label 22px / letterSpacing 0.6px / textShadow 0 1px 4px rgba(0,0,0,.7). */
.mas-cuisine-band-rule{
  flex:1 1 auto;
  height:1px;
  background:rgba(229,163,60,.55);
}
.mas-cuisine-band-label{
  flex:0 0 auto;
  margin:0;
  padding:0 4px;
  font-family:'Playfair Display', Georgia, serif;
  font-weight:700;
  font-size:1.375rem;
  letter-spacing:0.6px;
  color:var(--accent);
  text-align:center;
  white-space:nowrap;
  text-shadow:0 1px 4px rgba(0,0,0,.7);
}
body.mas-theme-light .mas-cuisine-band-label{
  color:#8f5710 !important;
}
/* v126.17 iter#43 — day-mode override was resetting BACK to gradient, overriding the v126.6 solid rule. Make solid to match app. */
body.mas-theme-light .mas-cuisine-band-rule{
  background:rgba(200,127,29,.55) !important;
}
/* v126.17 iter#43 + v126.18 iter#43 — bump specificity + !important to beat xstore's Cormorant Garamond typography.
   v126.18: html font-size on this site is 14px (xstore-child base), so 1.375rem renders as 19.25px not 22px.
   Use absolute px to be base-independent and match app spec of 22px exactly. */
body.mas-ordering-active .mas-cuisine-band-label{
  font-family:'Playfair Display', Georgia, serif !important;
  font-size:22px !important;
  letter-spacing:0.6px !important;
  text-shadow:0 1px 4px rgba(0,0,0,.7) !important;
}
/* Hide the band for the cuisine that isn't currently picked */
.mas-shell:not([data-cuisine="all"]) .mas-cuisine-band[data-cuisine="indisch"],
.mas-shell:not([data-cuisine="all"]) .mas-cuisine-band[data-cuisine="suedindisch"],
.mas-shell:not([data-cuisine="all"]) .mas-cuisine-band[data-cuisine="burger"]{
  /* Show only when filtering for that cuisine */
}

/* DT-S14 2026-05-27 — Site-wide light-mode mbar via body.mas-theme-light
   for non-shell pages (/checkout-login/, /my-account/, /shop/, etc).
   Mirrors the DT-2 :has() rules below but uses the body-class fallback
   added by masalas_global_theme_body_class(). */
html body.wp-site-premium.mas-theme-light .x6b-mobile-actions.x6b-mobile-actions .x6g-mbar-item.x6g-mbar-item{
  background:rgba(255,250,242,.96) !important;
  border:1px solid rgba(200,127,29,.35) !important;
  box-shadow:0 4px 14px rgba(26,22,20,.10) !important;
  color:#1a1614 !important;
}
html body.wp-site-premium.mas-theme-light .x6b-mobile-actions.x6b-mobile-actions .x6g-mbar-item.x6g-mbar-item:hover{
  background:#ffffff !important;
  border-color:rgba(200,127,29,.55) !important;
}
html body.wp-site-premium.mas-theme-light .x6b-mobile-actions.x6b-mobile-actions .x6g-mbar-item.x6g-mbar-item .x6g-mbar-label,
html body.wp-site-premium.mas-theme-light .x6b-mobile-actions .x6g-mbar-reserve-logo[data-mas-reshape="search"] .x6g-mbar-label{
  color:#1a1614 !important;
}
html body.wp-site-premium.mas-theme-light .x6b-mobile-actions .x6g-mbar-reserve-logo[data-mas-reshape="search"] .mas-mbar-search-ico{
  color:#c87f1d !important;
}
html body.wp-site-premium.mas-theme-light .x6b-mobile-actions .x6g-mbar-cart[data-mas-reshape="account"] .x6g-mbar-ico svg{
  color:#1a1614 !important;
}
@media (prefers-color-scheme: light){
  html body.wp-site-premium.mas-theme-system .x6b-mobile-actions.x6b-mobile-actions .x6g-mbar-item.x6g-mbar-item{
    background:rgba(255,250,242,.96) !important;
    border:1px solid rgba(200,127,29,.35) !important;
    box-shadow:0 4px 14px rgba(26,22,20,.10) !important;
    color:#1a1614 !important;
  }
  html body.wp-site-premium.mas-theme-system .x6b-mobile-actions.x6b-mobile-actions .x6g-mbar-item.x6g-mbar-item .x6g-mbar-label,
  html body.wp-site-premium.mas-theme-system .x6b-mobile-actions .x6g-mbar-reserve-logo[data-mas-reshape="search"] .x6g-mbar-label{
    color:#1a1614 !important;
  }
  html body.wp-site-premium.mas-theme-system .x6b-mobile-actions .x6g-mbar-reserve-logo[data-mas-reshape="search"] .mas-mbar-search-ico{
    color:#c87f1d !important;
  }
  html body.wp-site-premium.mas-theme-system .x6b-mobile-actions .x6g-mbar-cart[data-mas-reshape="account"] .x6g-mbar-ico svg{
    color:#1a1614 !important;
  }
}

/* DT-2 2026-05-26 — day-mode variant of the floating mobile bottom bar.
   Existing rules hard-code dark-glass pills (rgba(18,16,14,.94)) that
   look harsh against a cream day background. When the shell is mounted
   in light/system mode, swap pills to warm-cream with gold border so
   they harmonise with the day palette. Inner pages without the shell
   keep the dark default. Selector uses :has() — works in Safari 15.4+,
   Chrome 105+, Firefox 121+ (all current Masalas customers). */
html body.wp-site-premium:has(.mas-shell[data-theme="light"]) .x6b-mobile-actions .x6g-mbar-item,
.x6b-mobile-actions.x6b-mobile-actions .x6g-mbar-item:where(html body.wp-site-premium:has(.mas-shell[data-theme="light"]) *){
  background:rgba(255,250,242,.96) !important;
  border:1px solid rgba(200,127,29,.35) !important;
  box-shadow:0 4px 14px rgba(26,22,20,.10) !important;
  color:#1a1614 !important;
}
html body.wp-site-premium:has(.mas-shell[data-theme="light"]) .x6b-mobile-actions .x6g-mbar-item:hover{
  background:#ffffff !important;
  border-color:rgba(200,127,29,.55) !important;
}
html body.wp-site-premium:has(.mas-shell[data-theme="light"]) .x6b-mobile-actions .x6g-mbar-item .x6g-mbar-label,
html body.wp-site-premium:has(.mas-shell[data-theme="light"]) .x6b-mobile-actions .x6g-mbar-reserve-logo[data-mas-reshape="search"] .x6g-mbar-label{
  color:#1a1614 !important;
}
html body.wp-site-premium:has(.mas-shell[data-theme="light"]) .x6b-mobile-actions .x6g-mbar-reserve-logo[data-mas-reshape="search"] .mas-mbar-search-ico{
  color:#c87f1d !important;
}
html body.wp-site-premium:has(.mas-shell[data-theme="light"]) .x6b-mobile-actions .x6g-mbar-cart[data-mas-reshape="account"] .x6g-mbar-ico svg{
  color:#1a1614 !important;
}
/* System-theme follows OS: if shell is system AND OS prefers dark, keep dark pills. */
@media (prefers-color-scheme: light){
  html body.wp-site-premium:has(.mas-shell[data-theme="system"]) .x6b-mobile-actions .x6g-mbar-item{
    background:rgba(255,250,242,.96) !important;
    border:1px solid rgba(200,127,29,.35) !important;
    box-shadow:0 4px 14px rgba(26,22,20,.10) !important;
    color:#1a1614 !important;
  }
  html body.wp-site-premium:has(.mas-shell[data-theme="system"]) .x6b-mobile-actions .x6g-mbar-item .x6g-mbar-label,
  html body.wp-site-premium:has(.mas-shell[data-theme="system"]) .x6b-mobile-actions .x6g-mbar-reserve-logo[data-mas-reshape="search"] .x6g-mbar-label{
    color:#1a1614 !important;
  }
  html body.wp-site-premium:has(.mas-shell[data-theme="system"]) .x6b-mobile-actions .x6g-mbar-reserve-logo[data-mas-reshape="search"] .mas-mbar-search-ico{
    color:#c87f1d !important;
  }
  html body.wp-site-premium:has(.mas-shell[data-theme="system"]) .x6b-mobile-actions .x6g-mbar-cart[data-mas-reshape="account"] .x6g-mbar-ico svg{
    color:#1a1614 !important;
  }
}

/* v109: HEADER BLEED FIX — theme's `.x6b-site-cta` (Anrufen + "Jetzt
   bestellen" cluster) floats past the right edge of the viewport at
   ≥1280 px because the child-theme's flex-end layout doesn't account
   for our centered wordmark + dual logos. Hide site-wide (was scoped
   to body.mas-ordering-active, so only homepage got it). Both buttons
   duplicate shell functionality anyway (the shell IS the order flow;
   Anrufen lives in the mobile bottom bar + KPI card). */
html body.wp-site-premium .x6b-site-cta,
body .x6b-site-cta{display:none !important}

/* v110: FOUC prevention — hide the theme carousel variants via CSS
   (not just JS) so the owner no longer sees the old "Alle Kategorien.
   Was dürfen wir Ihnen anbieten?" strip briefly before the site-wide
   JS kicks in. Our replacement scroller is injected by
   `replaceOldCarousel()` in the mobile-bar site assets; this CSS just
   makes the interim invisible. Legal pages don't need the block
   because the JS never runs there — but these selectors only match
   the legacy theme carousel anyway, so no harm on legal pages either.
   Wrapped in :not([data-mas-random-scroller]) so our own scroller
   (same DOM neighbours) is never caught.
   v113: added the stray `.swiper-button-*` / `.swiper-nav` arrow
   selectors — they're outside the `.categoriesCarousel` wrapper and
   kept rendering as orphan `<` / `>` pills even after the carousel
   itself was hidden (owner saw them on /booking/ mobile as "empty
   scroll"). Scoped to non-home pages only via `body:not(.home)` so
   Alpine's detail modal arrows on homepage still work. */
.categoriesCarousel,
.et_promo_text_carousel,
.slider-3982,
.etheme-headline + .swiper-container,
.etheme-headline.has-animation{display:none !important}
body:not(.home) .swiper-button-prev,
body:not(.home) .swiper-button-next,
body:not(.home) .swiper-nav,
body:not(.home) .swiper-custom-left,
body:not(.home) .swiper-custom-right,
body:not(.home) .et-swiper-elementor-nav,
body:not(.home) [class*="swiper-pagination"]:not(.mas-keep){display:none !important}
/* Also hide the "Alle Kategorien" / "Was dürfen wir Ihnen anbieten?"
   headings on every page EXCEPT the homepage (where no such heading
   renders). Match by their distinctive theme wrapper classes.
   v115: the actual theme class is `etheme_animated_headline` (with
   an UNDERSCORE); the hyphenated version from the old CSS never matched
   anything, leaving a FOUC before our JS ran. Also dropped the
   `:has()` check — browser support is still patchy and the widget
   class is specific enough on its own. */
body:not(.home) .elementor-widget-etheme_animated_headline,
body:not(.home) .elementor-widget-etheme-headline{display:none !important}

/* ============================================================
 * v109: NON-HOME RANDOM-PRODUCT STRIP
 * ============================================================
 * Injected by replaceOldCarousel() as a drop-in for the theme's
 * `.categoriesCarousel` on every non-home, non-legal page. Matches the
 * homepage Beliebt/Zufall scroller visually so the site feels coherent.
 * Clicking a card navigates to the homepage with ?open_product=<id>
 * which the shell honours by auto-opening the product detail sheet.
 */
/* v116: restyled to mirror the homepage "Vielleicht noch? ✨" (Zufall)
   row exactly. Owner: "i ask cc to make it like this and have then same
   order summary and login and then checkout". The dark card + uppercase
   category label + gold price match `.mas-beliebt-card` on the home shell. */
.mas-random-strip{padding:1.1rem 1rem .4rem;margin:0;color:#f5f1e6}
.mas-random-strip-title{margin:0 0 .6rem;font-size:1.15rem;font-weight:700;color:#f5f1e6;letter-spacing:.005em}
.mas-random-strip-emoji{display:inline-block;margin-left:.25rem;transform:translateY(-1px);filter:drop-shadow(0 0 4px rgba(229,163,60,.45))}
.mas-random-strip-scroller{display:flex;gap:.7rem;overflow-x:auto;overflow-y:visible;padding:.2rem 0 .6rem;margin:0 -1rem;padding-left:1rem;padding-right:1rem;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}
.mas-random-strip-scroller::-webkit-scrollbar{display:none}
.mas-random-card{position:relative;flex:0 0 auto;width:min(72vw,240px);display:flex;flex-direction:column;text-decoration:none;color:#f5f1e6;background:#161310;border:1px solid rgba(245,241,230,.08);border-radius:16px;overflow:hidden;scroll-snap-align:start;cursor:pointer;transition:transform .18s ease,border-color .18s ease}
.mas-random-card:hover,.mas-random-card:focus-visible{border-color:rgba(229,163,60,.55);transform:translateY(-1px);outline:none}
.mas-random-card-img{width:100%;height:128px;object-fit:cover;display:block;background:var(--surface-2)}
.mas-random-card-body{display:grid;gap:.2rem;padding:.7rem .85rem .95rem}
.mas-random-card-name{font-size:.97rem;font-weight:700;color:#f5f1e6;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mas-random-card-section{font-size:.72rem;color:rgba(245,241,230,.55);text-transform:uppercase;letter-spacing:.04em}
.mas-random-card-price{color:#e5a33c;font-weight:700;font-size:.95rem;margin-top:.15rem}
.mas-random-card-price .woocommerce-Price-amount,.mas-random-card-price .amount,.mas-random-card-price bdi{color:inherit !important;background:none !important}
@media (min-width:960px){
  .mas-random-strip{padding:1.4rem 2rem .6rem}
  .mas-random-strip-title{font-size:1.35rem}
  .mas-random-card{width:240px}
  .mas-random-card-img{height:140px}
}

/* ============================================================
 * v108: SITE-WIDE FOOTER (appears on every page)
 * ============================================================
 * Owner: "also footer is still the old. not new the new one". Previously
 * `.mas-footer` rendered inside the `[masalas_ordering_app]` shortcode
 * only, so it only appeared on the homepage. Moved to a `wp_footer` hook
 * so it appears on every page; this matching CSS also lives in the
 * site-wide stylesheet (not the shell's own CSS) so it loads alongside
 * the footer HTML on every page. Previously the styling was in the
 * shell's `masalas_ordering_app_css()` → footer was unstyled on other
 * pages even if we'd rendered it. */
html body.wp-site-premium footer.x6d-site-footer,
html body.wp-site-premium .x6d-site-footer,
footer.x6d-site-footer,
.x6d-site-footer{display:none !important}

/* The shell's footer — styled to match on every page. */
.mas-footer{
  padding:20px 16px calc(100px + env(safe-area-inset-bottom,0));
  background:#070707;border-top:1px solid rgba(229,163,60,.18);
  color:rgba(245,241,230,.7);
  display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center;
  font-family:inherit;
}
.mas-footer-brand{display:flex;flex-direction:column;gap:4px;align-items:center}
.mas-footer-brand-name{font-family:'Playfair Display','Cormorant Garamond',Georgia,serif;font-size:1.02rem;font-weight:700;color:#f5f1e6;letter-spacing:.005em;text-decoration:none;transition:color .15s ease}
.mas-footer-brand-name:hover,.mas-footer-brand-name:focus-visible{color:#e5a33c;text-decoration:none}
.mas-footer-brand-meta{font-size:.82rem;color:rgba(245,241,230,.62);line-height:1.4}
.mas-footer-phone{color:#e5a33c;text-decoration:none;font-weight:600}
.mas-footer-phone:hover{color:#f5f1e6}
.mas-footer-links{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 0;max-width:560px;font-size:.78rem;line-height:1.5;margin:0 auto;padding:0;list-style:none}
.mas-footer-links a{color:rgba(245,241,230,.72);text-decoration:none;padding:0 8px;border-right:1px solid rgba(245,241,230,.18);white-space:nowrap;transition:color .15s}
.mas-footer-links a:last-child{border-right:0}
.mas-footer-links a:hover,.mas-footer-links a:focus-visible{color:#e5a33c}
.mas-footer-copy{margin:0;font-size:.72rem;color:rgba(245,241,230,.45);letter-spacing:.01em}
@media (min-width:960px){
  .mas-footer{padding:28px 2rem 2rem}
  .mas-footer-links{max-width:880px;margin:0 auto;font-size:.85rem}
  .mas-footer-brand-name{font-size:1.15rem}
  .mas-footer-brand-meta{font-size:.9rem}
}

/* Top-right hamburger + its overlay hidden SITE-WIDE so every page matches
   the home ordering shell. Account navigation moves into the bottom-bar
   Konto pill which links to /my-account/. */
#x6e-nav-toggle,
#x6e-menu-overlay,
#x6e-menu-overlay [class*="masalas-mobile-kitchens"]{display:none !important}

/* Remove the theme-wide "galaxy" background image (a PNG the snippet pool
   overlays on every page) — owner: "there is galaxy image … i think we
   should remove it as it take memory and we keep black … only galaxy image
   that come on theme wise on every page". The hero's own `.premium-hero`
   background image is on a different element and is NOT affected.

   NE-website-F8c 2026-05-22 — was previously `background:#000 !important`
   which forced black even on light theme. Now ONLY kills background-image
   (the galaxy). The actual body bg COLOR is set theme-aware further down
   via the `mas-light-theme-bodybg-override` inline style (in wp_head
   priority 999) so dark/light each get their right palette. */
html body.wp-site-premium,
html body.wp-site-premium.wp-site-premium{
  background-image:none !important;
}
/* Default dark bg — applies when no theme cookie or theme=dark.
   Overridden by the wp_head priority-999 inline style on light/system. */
html body.wp-site-premium.mas-ordering-active,
html body.wp-site-premium.wp-site-premium.mas-ordering-active{
  background-color:#0b0b0b !important;
}

/* HEADER — dual-logo + centered-wordmark layout applied to BOTH mobile and
   desktop. Owner: "check desktop version it is not align with mobile some
   feature we ajdusted for mobile it is perfect now but on desktop not
   showing or just dont appearing correctly". Geometry (font-size, logo
   size, padding) is tuned per breakpoint in @media blocks below. */
html body.wp-site-premium .x6b-site-header-wrap{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  z-index:9998 !important;
}
html body.wp-site-premium .x6b-site-header{position:relative !important;grid-template-columns:1fr auto !important}
html body.wp-site-premium .x6b-brand-wordmark{
  position:absolute !important;
  top:50% !important;
  left:50% !important;
  transform:translate(-50%,-50%) !important;
  z-index:3 !important;
  pointer-events:none !important;
  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
  max-width:none !important;
  line-height:1.15 !important;
  letter-spacing:.005em !important;
  text-align:center !important;
  margin:0 !important;
}
html body.wp-site-premium .x6b-site-logo{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  width:100% !important;
  gap:0 !important;
  grid-template-columns:unset !important;
  position:static !important;
}
html body.wp-site-premium .x6b-site-header-wrap > .x6b-site-header .x6b-site-logo > a.custom-logo-link:not([data-mas-right-logo]),
html body.wp-site-premium .x6b-site-logo > a.custom-logo-link:not([data-mas-right-logo]){
  position:absolute !important;
  left:12px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  z-index:2 !important;
}
html body.wp-site-premium .x6b-site-logo > [data-mas-right-logo]{
  position:absolute !important;
  right:12px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  z-index:2 !important;
  pointer-events:none !important;
}
html body.wp-site-premium .x6b-site-logo img{object-fit:contain !important}

/* Theme's desktop top-bar row + utility pills "Heute geöffnet · Call ·
   WhatsApp · Liefergebiet · Jetzt bestellen" duplicate info that now lives
   in the footer / bottom bar / kpi cards — hide them site-wide to give
   our clean header + hero primacy. Desktop nav selectors that may exist. */
html body.wp-site-premium .x6e-desktop-nav,
html body.wp-site-premium .x6e-status-bar,
html body.wp-site-premium .x6e-status-pill,
html body.wp-site-premium .x6e-topbar,
html body.wp-site-premium .x6e-utility-bar,
html body.wp-site-premium .x6b-site-nav,
html body.wp-site-premium .x6e-util-btn{display:none !important}

/* Top-right theme search toggle hidden SITE-WIDE (was mobile-only). */
#x6e-search-toggle{display:none !important}

/* MOBILE HEADER geometry (≤ 767 px). */
@media (max-width:767px){
  html body.wp-site-premium .x6b-brand-wordmark{
    font-size:clamp(14px,4vw,18px) !important;
  }
  html body.wp-site-premium .x6b-site-header{min-height:50px !important}
  html body.wp-site-premium .x6b-site-header-wrap{padding:6px 10px !important}
  html body.wp-site-premium .x6b-site-logo img{height:34px !important;width:34px !important}
  html body.wp-site-premium{padding-top:58px !important}
}

/* DESKTOP HEADER geometry (≥ 768 px) — matches mobile structurally but at
   a larger scale so the wordmark + logo flank read well on wide viewports. */
@media (min-width:768px){
  html body.wp-site-premium .x6b-brand-wordmark{
    font-size:clamp(20px,2.4vw,28px) !important;
    font-family:'Playfair Display','Cormorant Garamond',Georgia,serif !important;
  }
  html body.wp-site-premium .x6b-site-header{min-height:64px !important}
  html body.wp-site-premium .x6b-site-header-wrap{padding:8px 20px !important}
  html body.wp-site-premium .x6b-site-logo img{height:46px !important;width:46px !important}
  html body.wp-site-premium{padding-top:78px !important}
}

/* MOBILE BOTTOM BAR — hug the bottom edge (was theme `bottom: max(8px,
   env(safe-area-inset-bottom))`). Owner: "on bottom icons there is gap
   below it i think it is too much gap yu can reduce it". Keep iPhone home
   indicator clear via safe-area; drop the hard 8px minimum. */
@media (max-width:959px){
  html body.wp-site-premium .x6b-mobile-actions,
  .x6b-mobile-actions.x6b-mobile-actions.x6b-mobile-actions{
    bottom:max(2px,env(safe-area-inset-bottom)) !important;
  }
  /* Body padding-bottom can shrink to match (bar ~74 + 2 safety = 76 + 10 breathing). */
  html body.wp-site-premium{
    padding-bottom:calc(92px + env(safe-area-inset-bottom)) !important;
  }
}