/* Masalas Lieferando-Style Ordering Shell 2026-04-19 v2 */
[x-cloak]{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* NE-website-F8b/c 2026-05-22 — high-specificity light-theme overrides
   that beat both the xstore-child theme AND the xstore-kirki-styles
   inline CSS (which has `html body.wp-site-premium { background:#000 }`
   with !important at specificity 0,2,3). We need >= (0,3,2) which is
   why every selector includes BOTH .mas-ordering-active AND
   .wp-site-premium chained — bumps to (0,3,2)+ and the :has() pseudo
   contributes another class-level. */
html body.mas-ordering-active.wp-site-premium:has(.mas-shell[data-theme="light"]),
html body.mas-ordering-active.wp-site-premium:has(.mas-shell[data-theme="system"]){
  background:#fbf6ec !important; color:#1a1614 !important;
}
@media (prefers-color-scheme: dark){
  html body.mas-ordering-active.wp-site-premium:has(.mas-shell[data-theme="system"]){
    background:#0b0b0b !important; color:#f5f1e6 !important;
  }
}
html body.mas-ordering-active.wp-site-premium:has(.mas-shell[data-theme="dark"]){
  background:#0b0b0b !important; color:#f5f1e6 !important;
}
/* Force the key shell text elements to follow --ink — beats xstore. */
.mas-shell .mas-item-name,
.mas-shell .mas-section-title,
.mas-shell .mas-promo-title,
.mas-shell .mas-beliebt-name,
.mas-shell .mas-rail-item{ color:var(--ink) !important; }
.mas-shell .mas-item-desc,
.mas-shell .mas-promo-sub,
.mas-shell .mas-beliebt-section{ color:var(--muted) !important; }
.mas-shell .mas-item-price,
.mas-shell .mas-beliebt-price{ color:var(--accent) !important; }
/* NE-website-A-iter2 2026-05-25 — light-theme price contrast fix.
   Owner complaint: "day theme unreadable". Gold #c87f1d on white cards has
   too-low luminance contrast (WCAG AA fails at small sizes). Override to
   accent-deep #8f5710 for [data-theme=light]+system. Dark theme keeps gold
   on dark which already passes contrast. */
.mas-shell[data-theme="light"] .mas-item-price,
.mas-shell[data-theme="light"] .mas-item-price .woocommerce-Price-amount,
.mas-shell[data-theme="light"] .mas-beliebt-price,
.mas-shell[data-theme="light"] .mas-beliebt-price .woocommerce-Price-amount,
.mas-shell[data-theme="light"] .mas-inhaber-price,
.mas-shell[data-theme="light"] .mas-inhaber-price .woocommerce-Price-amount,
.mas-shell[data-theme="system"] .mas-item-price,
.mas-shell[data-theme="system"] .mas-item-price .woocommerce-Price-amount,
.mas-shell[data-theme="system"] .mas-beliebt-price,
.mas-shell[data-theme="system"] .mas-beliebt-price .woocommerce-Price-amount,
.mas-shell[data-theme="system"] .mas-inhaber-price,
.mas-shell[data-theme="system"] .mas-inhaber-price .woocommerce-Price-amount{
  /* NE-website-A-iter4 — also target inner .woocommerce-Price-amount span;
     it had its own color rule that countered the parent override. Use ink
     for unambiguous readability on white cards. */
  color:var(--ink) !important;
  font-size:1.12rem; font-weight:800; letter-spacing:.005em;
}
@media (prefers-color-scheme: dark){
  .mas-shell[data-theme="system"] .mas-item-price,
  .mas-shell[data-theme="system"] .mas-item-price .woocommerce-Price-amount,
  .mas-shell[data-theme="system"] .mas-beliebt-price,
  .mas-shell[data-theme="system"] .mas-beliebt-price .woocommerce-Price-amount,
  .mas-shell[data-theme="system"] .mas-inhaber-price,
  .mas-shell[data-theme="system"] .mas-inhaber-price .woocommerce-Price-amount{ color:var(--accent) !important; font-size:1rem; }
}

/* NE-website-F8 2026-05-22 — body bg/color was hardcoded dark which
   leaked through on light theme (cream cards on dark page bg, plus
   text inheritance issues on un-themed elements like menu names).
   Now mirrors .mas-shell[data-theme] via CSS :has() — no JS, no PHP
   change needed. Default (dark) stays as the fallback so anything
   not yet themed stays usable. */
body.mas-ordering-active{background:#0b0b0b;color:#f5f1e6}
body.mas-ordering-active:has(.mas-shell[data-theme="light"]){background:#fbf6ec;color:#1a1614}
body.mas-ordering-active:has(.mas-shell[data-theme="system"]){background:#fbf6ec;color:#1a1614}
@media (prefers-color-scheme: dark){
  body.mas-ordering-active:has(.mas-shell[data-theme="system"]){background:#0b0b0b;color:#f5f1e6}
}
body.mas-ordering-active #main,body.mas-ordering-active .site-content,body.mas-ordering-active .site-main{padding-top:0 !important;padding-bottom:0 !important}

/* NE-website-A-iter9 2026-05-26 — Owner: cream MUST extend full viewport,
   no gray edges. Force cream on html + all xstore template wrappers when a
   light-theme shell is present. Body bg alone leaves gaps because the
   xstore page-wrapper / template-content can paint over body in some
   layouts. !important needed because xstore theme has high-specificity
   defaults. */
html:has(.mas-shell[data-theme="light"]),
html:has(.mas-shell[data-theme="system"]){background:#fbf6ec !important}
html:has(.mas-shell[data-theme="light"]) body,
html:has(.mas-shell[data-theme="system"]) body,
html:has(.mas-shell[data-theme="light"]) .template-container,
html:has(.mas-shell[data-theme="system"]) .template-container,
html:has(.mas-shell[data-theme="light"]) .template-content,
html:has(.mas-shell[data-theme="system"]) .template-content,
html:has(.mas-shell[data-theme="light"]) .page-wrapper,
html:has(.mas-shell[data-theme="system"]) .page-wrapper,
html:has(.mas-shell[data-theme="light"]) .container.content-page,
html:has(.mas-shell[data-theme="system"]) .container.content-page,
html:has(.mas-shell[data-theme="light"]) .row,
html:has(.mas-shell[data-theme="system"]) .row,
html:has(.mas-shell[data-theme="light"]) .content,
html:has(.mas-shell[data-theme="system"]) .content,
html:has(.mas-shell[data-theme="light"]) .sidebar-position-without,
html:has(.mas-shell[data-theme="system"]) .sidebar-position-without{background:#fbf6ec !important}
@media (prefers-color-scheme: dark){
  html:has(.mas-shell[data-theme="system"]),
  html:has(.mas-shell[data-theme="system"]) body,
  html:has(.mas-shell[data-theme="system"]) .template-container,
  html:has(.mas-shell[data-theme="system"]) .template-content,
  html:has(.mas-shell[data-theme="system"]) .page-wrapper,
  html:has(.mas-shell[data-theme="system"]) .container.content-page,
  html:has(.mas-shell[data-theme="system"]) .row,
  html:has(.mas-shell[data-theme="system"]) .content,
  html:has(.mas-shell[data-theme="system"]) .sidebar-position-without{background:#0b0b0b !important}
}

/* NE-website-A1 — Day/Night palette. Default = light per owner (2026-05-21).
   The data-theme attribute on .mas-shell is server-rendered from cookie
   masalas_scheme via masalas_resolve_theme() (PHP helper near the top of
   this snippet). Three values supported: light (default + force light),
   dark (force dark), system (follow OS via prefers-color-scheme below). */
.mas-shell{color:var(--ink);min-height:100vh;font-family:inherit;--legacy-bar:64px}
/* DT-5 2026-05-26 — bottom-bar safe-area: ensure last bits of shell
   content (theme toggle, search field, loyalty/promo cards) can scroll
   above the floating mobile action bar. Bar is ~56-74px tall + safe
   area; reserve ~120px so the last menu item never hides under it. */
@media (max-width: 959px){
  .mas-shell{ padding-bottom: calc(var(--legacy-bar, 64px) + 56px + env(safe-area-inset-bottom, 0px)); }
}
.mas-shell,
.mas-shell[data-theme="light"],
.mas-shell[data-theme="system"]{
  /* NE-website-A-iter8 2026-05-25 — middle-ground surface: white at 50%
     opacity. On cream #fbf6ec body bg this resolves to ~#fdfaf3 — barely
     lighter cream. Cards still differentiate from bg via warmth + gold
     border, but no longer look like white blocks. Same visual feel as
     dark theme's "dark on dark" pattern, just inverted. Deviates from
     app's 0.92 (which works on phone retina) because on desktop white
     pixels are bigger and stand out more. Owner: "white cream everywhere
     so look transparent... exactly like black [theme]".
     S3 2026-05-26 — owner picked Raise-to-0.85 (closer to app's 0.92).
     Cards now look more solid/premium against cream bg. */
  --bg:#fbf6ec;--surface:rgba(255,255,255,0.85);--surface-2:rgba(26,22,20,0.04);
  --ink:#1a1614;--muted:#5c5650;--muted-2:#867d72;
  --line:rgba(26,22,20,0.10);
  --accent:#c87f1d;--accent-deep:#8f5710;--accent-ink:#ffffff;
  --ok:#2f8758;--err:#b1342f /* v126.2 iter#9 — align with app lightTokens */
}
.mas-shell[data-theme="dark"]{
  --bg:#0b0b0b;--surface:rgba(22,22,22,.82);--surface-2:rgba(255,255,255,.04);
  --ink:#f5f1e6;--muted:#b3a99a;--muted-2:#7f7769;
  --line:rgba(255,255,255,.08);
  --accent:#e5a33c;--accent-deep:#b5822f;--accent-ink:#1a1a1a;
  --ok:#3aa76d;--err:#d24545
}
@media (prefers-color-scheme: dark){
  .mas-shell[data-theme="system"]{
    --bg:#0b0b0b;--surface:rgba(22,22,22,.82);--surface-2:rgba(255,255,255,.04);
    --ink:#f5f1e6;--muted:#b3a99a;--muted-2:#7f7769;
    --line:rgba(255,255,255,.08);
    --accent:#e5a33c;--accent-deep:#b5822f;--accent-ink:#1a1a1a;
    --ok:#3aa76d;--err:#d24545
  }
}
/* Background painted on body when shell is mounted so the page bg
   matches the palette outside the shell box (header, footer gaps). */
body.mas-ordering-active{background:var(--bg)}

/* NE-website-A4/F5 — Bollywood-poster hero. Viewport-split:
   - Desktop (≥768px): single landscape `mas-hero-desktop` (1672×941),
     SAME image on both themes (Masu+Biru+10%Rabatt baked in).
   - Mobile (<768px): portrait day/night swap (`mas-hero-day` cream
     when light/system, `mas-hero-night` dark when dark theme).
   The poster sits at the top of the shell, full-width up to a max
   so it doesn't dominate the menu. */
/* NE-website-F9 2026-05-22 — owner wants desktop hero FULL-BLEED.
   Mobile keeps the constrained portrait layout. */
.mas-hero-poster{
  position:relative;
  margin:1rem auto 0;
  padding:0 1rem;
}
.mas-hero-poster .mas-hero-desktop,
.mas-hero-poster .mas-hero-day,
.mas-hero-poster .mas-hero-night{
  display:none;
  position:relative;
}
.mas-hero-poster img{
  display:block; width:100%; height:auto;
  border-radius:10px;
  box-shadow:0 8px 28px rgba(229,163,60,.22), 0 2px 8px rgba(26,22,20,.06);
}

/* === DESKTOP (≥768px) === Full-bleed landscape — no max-width, no
   horizontal padding, no border-radius (edge-to-edge look). */
@media (min-width: 768px){
  .mas-hero-poster{
    margin:0; padding:0; max-width:none;
  }
  .mas-hero-poster .mas-hero-desktop{ display:block; }
  .mas-hero-poster .mas-hero-day,
  .mas-hero-poster .mas-hero-night{ display:none !important; }
  .mas-hero-poster img{
    border-radius:0;
    box-shadow:0 4px 24px rgba(26,22,20,.10);
  }
}

/* === MOBILE (<768px) === */
@media (max-width: 767.98px){
  .mas-hero-poster .mas-hero-desktop{ display:none !important; }
  /* Show DAY hero when theme is light/system (default = dark on first
     visit per F2; the toggle UI lets user pick light). */
  .mas-shell[data-theme="light"] .mas-hero-poster .mas-hero-day,
  .mas-shell[data-theme="system"] .mas-hero-poster .mas-hero-day{
    display:block;
  }
  /* Show NIGHT hero when theme is dark. */
  .mas-shell[data-theme="dark"] .mas-hero-poster .mas-hero-night{
    display:block;
  }
  /* System-theme follows OS — flip to night when OS is dark. */
  @media (prefers-color-scheme: dark){
    .mas-shell[data-theme="system"] .mas-hero-poster .mas-hero-day{ display:none; }
    .mas-shell[data-theme="system"] .mas-hero-poster .mas-hero-night{ display:block; }
  }
}

/* S13 2026-05-27 — app parity: hero at natural full-bleed aspect ratio.
   Reverted DT-1's 46vh crop per owner: "the hero image not full". App
   renders the Bollywood poster at natural size and lets the menu/cards
   scroll under it; web should do the same. Kept the 1rem side-gutter
   removed so the hero reaches edge-to-edge on mobile.
   (DT-1 history: previously capped at 46vh + object-fit:cover to push
   menu/controls above the fold. Reverted 2026-05-27.) */
@media (max-width: 767.98px){
  .mas-hero-poster{
    border-radius: 0;
    margin: 0;
    padding: 0;
  }
  .mas-hero-poster img,
  .mas-hero-poster .mas-hero-day img,
  .mas-hero-poster .mas-hero-night img{
    width: 100%;
    height: auto;
    border-radius: 0;
    box-shadow: 0 6px 18px rgba(26,22,20,.10);
  }
  /* Tap-zone over baked JETZT BESTELLEN pill — restored to original
     67% top, 80% width that fits the natural portrait. */
  .mas-hero-tap{ top: 69%; left: 10%; width: 80%; height: 5%; } /* v126.5 iter#13 — app HeroSection tap top 69% (was 67%, 2% high). */
}

/* Invisible tap-zone over the baked JETZT BESTELLEN pill.
   Position differs slightly between landscape (≈53% from top) and
   portrait (≈67% from top). */
.mas-hero-tap{
  position:absolute;
  top:67%; left:10%; width:80%; height:5%;
  background:transparent; border:0; cursor:pointer;
  z-index:2;
}
@media (min-width: 768px){
  .mas-hero-tap{ top:53%; left:30%; width:40%; height:10%; }
}

/* NE-website-B1 — InhaberEmpfiehlt owner-pick card. Sits between promos
   and the Beliebt rail. Masu chef-hat portrait left, product info center,
   add (+) button right, dismiss (×) top-right corner. */
/* v126.2 iter#9 — app InhaberEmpfiehlt: borderWidth:0.5 + borderColor:tokens.accent + backgroundColor:'transparent', thumb 76x76. */
.mas-inhaber{
  position:relative;
  display:grid;
  grid-template-columns:76px 1fr auto;
  align-items:center;
  gap:.85rem;
  margin:.8rem 1rem 0;
  padding:14px;
  border:0.5px solid var(--accent);
  border-radius:14px;
  background:transparent;
}
.mas-inhaber-thumb{
  display:grid; place-items:center;
  width:76px; height:76px;
  background:transparent; border:0; padding:0;
  cursor:pointer;
}
.mas-inhaber-thumb img{
  width:76px; height:76px; object-fit:contain;
}
.mas-inhaber-body{
  display:flex; flex-direction:column; gap:2px;
  min-width:0;
}
.mas-inhaber-eyebrow{
  color:var(--accent);
  font-size:10px;
  font-weight:700;
  letter-spacing:1px; /* v126.2 iter#9 — app:1 not 1.4 */
}
.mas-inhaber-title{
  color:var(--ink);
  font-size:.95rem;
  font-weight:700;
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mas-inhaber-price{
  color:var(--muted);
  font-size:.85rem;
}
/* 2026-05-28 AUDIT — was a round 42x42 + icon. App spec
   (masalas-native/components/InhaberEmpfiehlt.tsx) uses a gold pill
   with paddingX 12 / paddingY 6 and the literal text "Hinzufügen".
   Markup-side we still emit "+" for visual brevity at narrow widths
   on the small Inhaber card, but expand to a pill so the affordance
   reads correctly. */
.mas-inhaber-add{
  padding:.4rem .8rem;
  border-radius:999px;
  border:0;
  background:var(--accent);
  color:var(--accent-ink);
  font-size:.85rem; font-weight:800; line-height:1;
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(229,163,60,.30);
  transition:transform .14s, background .18s;
  min-height:28px;
}
.mas-inhaber-add:hover{ background:var(--accent-deep); transform:translateY(-1px); }
.mas-inhaber-add.is-loading{ opacity:.7; cursor:wait; }
.mas-inhaber-dismiss{
  position:absolute;
  top:6px; right:8px;
  width:24px; height:24px;
  border:0; background:transparent;
  color:var(--muted);
  font-size:1.1rem; line-height:1;
  cursor:pointer;
  border-radius:8px;
  padding:0;
}
.mas-inhaber-dismiss:hover{ color:var(--ink); background:var(--surface-2); }

/* NE-website-A5 — Character image styling. Transparent illustrations
   render on either palette without halos or circle clips (app parity). */
.mas-pc.mas-pc--bad{
  display:flex; align-items:center; gap:.8rem;
}
.mas-pc-character{
  width:64px; height:64px; flex:none; object-fit:contain;
}
.mas-search-character{
  display:flex; justify-content:center; padding:1rem 0;
}
.mas-search-character-img{
  max-width:160px; height:auto; object-fit:contain;
}
@keyframes masSpinBob{
  0%,100%{ transform:translateY(0) rotate(-2deg); }
  50%{ transform:translateY(-6px) rotate(2deg); }
}
.mas-spin-bob{ animation:masSpinBob 1.4s ease-in-out infinite; transform-origin:center bottom; }
@media (prefers-reduced-motion: reduce){
  .mas-spin-bob{ animation:none; }
}
.mas-basket-empty{
  display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:.6rem; padding:2rem 1rem;
}
.mas-basket-empty img{
  max-width:200px; width:60%; height:auto;
}
.mas-basket-empty h3{
  margin:0; font-family:'Playfair Display', serif;
  font-size:1.4rem; color:var(--ink);
}
.mas-basket-empty p{
  margin:0; color:var(--muted); max-width:340px;
  font-size:.95rem; line-height:1.45;
}
.mas-basket-empty-cta{
  margin-top:.6rem; padding:.7rem 1.4rem;
  background:var(--accent); color:var(--accent-ink);
  border:0; border-radius:999px;
  font-weight:700; font-size:.95rem;
  cursor:pointer;
}
.mas-basket-empty-cta:hover{ background:var(--accent-deep); }

/* NE-website-A3 — Theme toggle pill row. Sits below the search bar.
   Three buttons (System / Hell / Dunkel) styled as a segmented control.
   Active option is filled with --accent. */
.mas-theme-toggle{
  display:inline-flex; gap:2px;
  margin:.6rem 1rem 0; padding:3px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface);
  width:fit-content;
}
.mas-theme-opt{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px;
  border:0; background:transparent;
  border-radius:999px;
  color:var(--muted);
  font-size:12px; font-weight:600;
  letter-spacing:.2px;
  cursor:pointer;
  transition:background-color 160ms ease, color 160ms ease;
}
.mas-theme-opt:hover{ color:var(--ink); }
.mas-theme-opt[aria-pressed="true"]{
  background:var(--accent);
  color:var(--accent-ink);
}
.mas-theme-opt[aria-pressed="true"]:hover{ color:var(--accent-ink); }
.mas-theme-opt svg{ flex:none; }
.mas-shell *{box-sizing:border-box}
.mas-shell button{font:inherit;cursor:pointer}
.mas-shell a{color:inherit}

/* Legacy hero classes kept only for backwards compat if anything references
   them elsewhere; shell itself no longer renders them. */

/* WORKSPACE: ordering container opens BELOW the existing page-9792 hero. */
.mas-workspace{background:var(--bg);padding:1.2rem 1rem .4rem;border-top:1px solid var(--line)}
.mas-workspace-head{display:grid;gap:.7rem;margin-bottom:.7rem}
/* Workspace h2 "Masalas Indisches Restaurant" is a duplicate of the fixed
   header wordmark and shows up when the page is scrolled past the hero.
   Hidden site-wide — still in DOM for accessibility (aria-label on section
   covers the context). */
.mas-workspace-title h2{display:none !important}
.mas-workspace-meta{display:flex;gap:.6rem;flex-wrap:wrap;color:var(--muted);font-size:.88rem}
/* NE-website-B3 — ModePill sliding pill background.
   The original .active state set its own background — we keep that as a
   fallback for old browsers — but layer a transform-driven sliding
   pseudo-element behind it for a Lieferando-style smooth slide. Uses
   the Alpine :data-active-mode attribute on the wrapper so CSS knows
   which slot is active without inspecting child .active classes. */
.mas-mode-pill{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;gap:0;padding:4px;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;width:100%;isolation:isolate}
.mas-mode-pill::before{
  content:""; position:absolute; top:4px; bottom:4px; left:4px;
  width:calc(50% - 4px);
  background:var(--accent);
  border-radius:999px;
  box-shadow:0 8px 22px rgba(229,163,60,.35);
  /* v126.2 iter#9 — app uses withSpring(damping:22, stiffness:180). Approximate with overshoot cubic-bezier for tactile bounce. */
  transition:transform .45s cubic-bezier(.34,1.56,.64,1);
  z-index:0;
}
.mas-mode-pill[data-active-mode="delivery"]::before{ transform:translateX(0); }
.mas-mode-pill[data-active-mode="collection"]::before{ transform:translateX(100%); }
@media (prefers-reduced-motion: reduce){
  .mas-mode-pill::before{ transition:none; }
}

/* 2026-05-23 — Cuisine filter pill (Alles / Indisch / Südindisch /
   Burger). Mirrors .mas-mode-pill above but with 4 equal segments and
   the sliding ::before pseudo-element snapping to 25% width. Sits
   immediately below .mas-mode-pill in the markup; margin-top adds a
   visual gap matching .mas-postcode-row's gap below it. */
.mas-cuisine-pill{position:relative;display:inline-grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:0;padding:4px;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;width:100%;isolation:isolate;margin-top:.55rem}
.mas-cuisine-pill::before{
  content:""; position:absolute; top:4px; bottom:4px; left:4px;
  width:calc(25% - 2px);
  background:var(--accent);
  border-radius:999px;
  box-shadow:0 8px 22px rgba(229,163,60,.35);
  /* v126.2 iter#9 — spring approximation to match app withSpring. */
  transition:transform .45s cubic-bezier(.34,1.56,.64,1);
  z-index:0;
}
.mas-cuisine-pill[data-active-cuisine="all"]::before{ transform:translateX(0); }
.mas-cuisine-pill[data-active-cuisine="indisch"]::before{ transform:translateX(100%); }
.mas-cuisine-pill[data-active-cuisine="suedindisch"]::before{ transform:translateX(200%); }
.mas-cuisine-pill[data-active-cuisine="burger"]::before{ transform:translateX(300%); }
@media (prefers-reduced-motion: reduce){
  .mas-cuisine-pill::before{ transition:none; }
}
.mas-cuisine-opt{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;padding:.5rem .4rem;border:0;background:transparent;color:var(--ink);border-radius:999px;min-height:40px;transition:color .18s;cursor:pointer;min-width:0}
.mas-cuisine-opt .mas-cuisine-title{font-weight:700;font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} /* v126.2 iter#9 — app:12.5px */
.mas-cuisine-opt.active{color:var(--accent-ink)}
/* iPhone SE / narrow phones — shrink label font + drop "indische" syllable
   in active-state title so 4 segments still fit on a 320px viewport
   without ellipsizing critical text. */
@media (max-width:360px){
  .mas-cuisine-opt .mas-cuisine-title{font-size:.78rem}
}
.mas-mode-opt{position:relative;z-index:1;display:grid;grid-template-columns:18px 1fr auto;grid-template-rows:auto auto;column-gap:.55rem;align-items:center;padding:.55rem .8rem;border:0;background:transparent;color:var(--ink);border-radius:999px;min-height:52px;transition:color .18s}
.mas-mode-opt .mas-mode-ico{grid-row:1 / span 2;width:18px;height:18px;opacity:.75}
.mas-mode-opt .mas-mode-title{font-weight:700;font-size:.82rem} /* v126.2 iter#9 — app:13px /700 */
.mas-mode-opt .mas-mode-eta{grid-column:3;grid-row:1 / span 2;font-size:.78rem;color:var(--muted);padding-left:.4rem;border-left:1px solid var(--line);margin-left:.25rem}
/* Active state — now relies on the sliding pseudo-element. We just flip
   text/icon colour for contrast. */
.mas-mode-opt.active{color:var(--accent-ink)}
.mas-mode-opt.active .mas-mode-ico{opacity:1;color:var(--accent-ink)}
.mas-mode-opt.active .mas-mode-eta{color:var(--accent-ink);border-left-color:rgba(26,26,26,.3)}

.mas-postcode-row{margin:.3rem 0 .7rem;display:grid;gap:.55rem}
.mas-postcode{display:grid;grid-template-columns:1fr auto;gap:.4rem}
.mas-postcode input{min-height:48px;padding:0 .8rem;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:1rem}
.mas-postcode button{min-height:48px;padding:0 1rem;border-radius:12px;border:0;background:var(--accent);color:var(--accent-ink);font-weight:700;min-width:108px}
.mas-postcode button:disabled{opacity:.6;cursor:wait}
.mas-postcode-result{display:grid;gap:.4rem}
.mas-pc{display:grid;gap:.2rem;padding:.75rem .9rem;border-radius:12px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);font-size:.92rem}
.mas-pc strong{font-weight:700}
.mas-pc--ok{border-color:rgba(58,167,109,.5);background:rgba(58,167,109,.1);color:#9be3b9}
.mas-pc--ok strong{color:#d5fce7}
.mas-pc--bad{border-color:rgba(210,69,69,.55);background:rgba(210,69,69,.1);display:grid;grid-template-columns:1fr auto;gap:.5rem;align-items:center}
.mas-pc--bad strong{color:#ffb4b4}
.mas-pc--bad button{background:var(--accent);color:var(--accent-ink);border:0;border-radius:999px;padding:.4rem .8rem;font-weight:600}
.mas-pc--pickup{border-color:rgba(229,163,60,.4);background:rgba(229,163,60,.08);color:var(--ink)}
.mas-pc--pickup strong{color:var(--accent)}
.mas-pickup-row{margin:.3rem 0 .7rem}

/* NE-website-B4 / SEARCH-APP-PARITY base — search pill base styles.
   The rotating-gradient ring lives in the SEARCH-APP-PARITY block below
   (single source of truth, mirrors app's SearchBar.tsx SVG ring). The
   earlier @property --mas-search-angle on .mas-search:focus-within was
   removed 2026-05-28 so we don't double-paint the halo (both painted at
   once made the ring look thicker / less crisp). */
.mas-search-ico{position:absolute;left:.9rem;width:18px;height:18px;color:var(--accent);z-index:2}
/* v126.6 iter#16 — app SearchBar Clear: 36px tap region, 22px × glyph. */
.mas-search-clear{position:absolute;right:.6rem;min-height:36px;min-width:36px;border:0;background:transparent;color:var(--muted);font-size:22px;line-height:22px;border-radius:0;z-index:2}

/* PROMO CARDS */
.mas-promos{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;padding:.8rem 1rem 0}
.mas-promo{display:grid;gap:.2rem;padding:.9rem;border-radius:14px;background:var(--surface);color:var(--ink);text-decoration:none;border:1px solid var(--line);min-height:88px}
.mas-promo-badge{display:inline-block;padding:.1rem .5rem;font-size:.7rem;border-radius:999px;background:var(--accent);color:var(--accent-ink);width:max-content}
.mas-promo-title{font-weight:600;font-size:.98rem}
.mas-promo-sub{color:var(--muted);font-size:.85rem}

/* BELIEBT — horizontal "Best Seller" scroll row (Lieferando-style Popular).
   Snap-x for smooth swipes, hide scrollbar, cards at 72vw / max 240px so two
   peek in on typical phone widths. Tapping the card opens the product sheet;
   the `+` button adds directly (or opens the sheet when the product has
   add-ons so the user can pick options). */
.mas-beliebt{padding:1.1rem 1rem .4rem;margin:0}
.mas-beliebt-title{font-size:1.15rem;font-weight:700;color:var(--ink);margin:0 0 .6rem;letter-spacing:.005em}
.mas-beliebt-emoji{display:inline-block;margin-left:.25rem;transform:translateY(-1px)}
.mas-beliebt-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-beliebt-scroller::-webkit-scrollbar{display:none}
/* v126.2 iter#9 — app BeliebtCarousel: hairline gold border + transparent bg, no card shadow. */
.mas-beliebt-card{position:relative;flex:0 0 auto;width:min(72vw,240px);background:transparent;border:0.5px solid var(--accent);border-radius:16px;overflow:hidden;scroll-snap-align:start;cursor:pointer;transition:transform .18s ease,border-color .18s ease}
.mas-beliebt-card:hover,.mas-beliebt-card:focus-visible{border-color:var(--accent-deep);transform:translateY(-1px);outline:none}
.mas-beliebt-img{width:100%;height:128px;object-fit:cover;display:block;background:var(--surface-2)}
.mas-beliebt-body{display:grid;gap:.2rem;padding:.7rem .85rem .95rem}
.mas-beliebt-name{font-size:.97rem;font-weight:700;color:var(--ink);line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mas-beliebt-section{font-size:.72rem;color:var(--muted-2);text-transform:uppercase;letter-spacing:.04em}
.mas-beliebt-price{font-size:1.02rem;color:var(--accent);font-weight:800;margin-top:.2rem;letter-spacing:.005em}
.mas-beliebt-price .woocommerce-Price-amount{color:var(--accent)}
.mas-beliebt-add{position:absolute;top:10px;right:10px;width:34px;height:34px;border:0;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-size:1.25rem;line-height:1;font-weight:700;cursor:pointer;box-shadow:0 6px 14px rgba(229,163,60,.30);display:grid;place-items:center;transition:transform .15s}
.mas-beliebt-add:hover{filter:brightness(1.05)}
.mas-beliebt-add:active{transform:scale(.9)}
.mas-beliebt-add[aria-busy="true"],.mas-beliebt-add.is-loading{cursor:wait}
/* Loading spinner inside + button (Lieferando-style instant feedback). */
.mas-spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(26,26,26,.35);border-top-color:var(--accent-ink);border-radius:50%;animation:masSpin .6s linear infinite}
@keyframes masSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){ .mas-spinner{animation:none;opacity:.6} }
/* Qty badge on card — top-LEFT corner, shows how many are in the cart. */
.mas-beliebt-qty{position:absolute;top:10px;left:10px;min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:.78rem;font-weight:800;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(229,163,60,.32);pointer-events:none;animation:masQtyIn .2s ease-out}
@keyframes masQtyIn{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}

/* Zufall section title uses a slightly muted accent so it's visually
   distinct from Beliebt without looking like a different page element. */
.mas-zufall .mas-beliebt-title{color:#f5f1e6}
.mas-zufall .mas-beliebt-emoji{filter:drop-shadow(0 0 4px rgba(229,163,60,.45))}

/* BOARD: rail / main / basket panel */
.mas-board{display:block;padding:0 1rem 140px}
.mas-rail{display:none}
.mas-basket-panel{display:none}

/* CHIPS (mobile) — MUST be `overflow-x:auto; overflow-y:visible` so the
   element isn't its own scroll root (WebKit treats `overflow:auto` as both
   axes, which in turn disables its own sticky positioning). */
.mas-chips{position:sticky;top:0;z-index:40;display:flex;gap:10px;overflow-x:auto;overflow-y:visible;padding:12px 16px;background:var(--surface);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);margin:0 -1rem;border-bottom:1px solid var(--line);scrollbar-width:none;will-change:transform}
.mas-chips::-webkit-scrollbar{display:none}

/* Some page templates wrap the shell in `.template-container { overflow: hidden }`
   which BREAKS `position: sticky` for any descendant. When the shell mounts
   we flip every known wrapper back to `overflow: visible` so the chips can
   actually stick to the viewport top on scroll. */
body.mas-ordering-active .template-container,
body.mas-ordering-active .template-content,
body.mas-ordering-active .page-wrapper,
body.mas-ordering-active .container.content-page,
body.mas-ordering-active .sidebar-position-without,
body.mas-ordering-active .sidebar-position-without > .row,
body.mas-ordering-active .content.col-md-12{overflow:visible !important;overflow-x:visible !important;overflow-y:visible !important}
.mas-chips::-webkit-scrollbar{display:none}
/* v126.5 iter#13 — app CategoryChips: fontSize 13, active fontWeight 600. Was .9rem (~14.4) inactive only. */
.mas-chip{flex:0 0 auto;min-height:40px;padding:.35rem .9rem;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);white-space:nowrap;font-size:.8125rem;font-weight:400}
.mas-chip.active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
.mas-chip--drawer{margin-left:auto;min-width:44px;display:grid;place-items:center;padding:0}

/* SECTIONS + PRODUCT ROWS */
.mas-list-root{padding:.2rem 0}
.mas-section{margin:1.6rem 0;scroll-margin-top:180px}
.mas-section-title{font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:1.35rem;margin:.2rem 0 .8rem;color:var(--ink)}
.mas-list{list-style:none;padding:0;margin:0;display:grid;gap:.8rem}
.mas-item{position:relative;display:grid;grid-template-columns:1fr 120px;gap:.85rem;padding:1rem;background:var(--surface);color:var(--ink);border:1px solid rgba(229,163,60,.35);border-radius:18px;transition:transform .18s,box-shadow .18s,border-color .18s;cursor:pointer;list-style:none;box-shadow:0 4px 16px rgba(26,22,20,.06)}
.mas-item:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(26,22,20,.10);border-color:rgba(229,163,60,.35)}
.mas-item.is-oos{opacity:.55;cursor:default}
.mas-item-text{display:grid;gap:.2rem;align-content:start}
.mas-item-name{font-size:1rem;margin:0;line-height:1.25;font-weight:400} /* v126.5 iter#13 — explicit 400 weight to match app ProductRow (h3 UA default would be 700). */
.mas-item-desc{color:var(--muted);font-size:.86rem;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* v126.17 iter#43 — !important to beat xstore-child's heavier price weight override; v126.5 spec is 600 per app ProductRow. */
.mas-item-price{color:var(--accent);font-weight:600 !important;font-size:1.02rem;margin-top:.2rem;letter-spacing:.005em}
body.mas-ordering-active .mas-item .mas-item-price{font-weight:600 !important}
.mas-item-section{display:block;font-size:.72rem;color:var(--muted-2);margin-top:.2rem}
.mas-item-media{position:relative;aspect-ratio:1/1;min-height:96px}
.mas-item-media img,.mas-item-noimg{width:100%;height:100%;border-radius:12px;object-fit:cover;background:var(--surface-2);display:block}
/* v126.5 iter#13 — app QuickAdd uses shadowRadius:8 offset {0,4} opacity:.5 (lighter coin). Was 0 8px 18px α.35 — too floating. */
.mas-add{position:absolute;right:-6px;bottom:-6px;width:38px;height:38px;border-radius:999px;border:0;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;box-shadow:0 4px 8px rgba(229,163,60,.5);cursor:pointer;z-index:2}
.mas-add:hover{transform:scale(1.06)}
/* v126.11 iter#24 — Fly-to-cart pellet (matches app FlyToCart.tsx: 36x36 gold, 620ms arc, scale 0.4→1 pop-in via back-out, opacity fade at end). Spawned by flyToCart() JS via Web Animations API. */
.mas-fly-pellet{position:fixed;left:0;top:0;width:36px;height:36px;border-radius:18px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font:800 14px/16px inherit;box-shadow:0 4px 8px rgba(229,163,60,.6);pointer-events:none;z-index:80;will-change:transform,opacity;contain:layout style paint}
@media (prefers-reduced-motion:reduce){.mas-fly-pellet{display:none}}
/* v126.10 iter#23 — app QuickAdd: 110ms scale→1.18 + spring on press. CSS-only with cubic-bezier overshoot approximation. */
.mas-add{transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .15s}
.mas-add:active{transform:scale(1.18);transition:transform .11s cubic-bezier(.34,1.56,.64,1)}
.mas-add svg{width:18px;height:18px}
/* v126.5 iter#13 — app Batch5 §5.7 fix moved qty-badge INSIDE image bounds (top:6, right:6) to avoid Android clipping. Web still had it outside. */
.mas-qty-badge{position:absolute;right:6px;top:6px;min-width:22px;height:22px;border-radius:999px;background:var(--surface);color:var(--accent);border:2px solid var(--accent);font-size:.72rem;display:grid;place-items:center;padding:0 .3rem;z-index:2;transform-origin:center}
/* v126.10 iter#23 — app QtyBadge bounces on every increment (120ms scale→1.25 + spring back). x-effect on the span re-arms .is-bumping class. */
.mas-qty-badge.is-bumping{animation:masQtyBump .24s cubic-bezier(.34,1.56,.64,1)}
@keyframes masQtyBump{0%{transform:scale(1)}45%{transform:scale(1.25)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.mas-qty-badge.is-bumping{animation:none}}
.mas-oos-badge{position:absolute;left:1rem;bottom:1rem;padding:.2rem .55rem;background:rgba(0,0,0,.7);color:#fff;border-radius:999px;font-size:.72rem}
.mas-item-text{display:grid;gap:.2rem;align-content:start;min-width:0}
.mas-item-text .mas-item-name,.mas-item-text .mas-item-desc{text-overflow:ellipsis}

/* Lazy-loaded image skeleton — gives rows stable size while image defers. */
.mas-lazy-img{background:linear-gradient(120deg,#161616 0%,#1e1e1e 50%,#161616 100%);background-size:200% 100%;transition:opacity .3s ease;border-radius:12px}
.mas-lazy-img[data-src]{animation:masShimmer 1.6s linear infinite;opacity:.9}
.mas-lazy-img.is-loaded{animation:none;opacity:1}
@media (prefers-reduced-motion: reduce){ .mas-lazy-img[data-src]{animation:none} }

/* Below-minimum warning row (inside desktop basket panel). */
.mas-below-min{display:flex;align-items:center;gap:.5rem;padding:.6rem .75rem;border-radius:10px;background:rgba(210,69,69,.12);border:1px solid rgba(210,69,69,.45);color:#ffb4b4;font-size:.87rem;margin:.3rem 0}
.mas-below-min strong{color:#fff;font-variant-numeric:tabular-nums}
.mas-below-min svg{color:#ffb4b4;flex:0 0 auto}
.mas-shell a.mas-cta.is-locked,.mas-shell a.mas-cta.is-locked:link,.mas-shell a.mas-cta.is-locked:visited{opacity:.55 !important;pointer-events:none;filter:grayscale(.3)}

/* Green delivery-ready banner (Lieferando-style "Nice! You can get this delivered") */
.mas-delivery-ready{position:fixed;left:0;right:0;bottom:calc(var(--legacy-bar) + 64px + env(safe-area-inset-bottom,0));z-index:44;margin:0 .9rem;display:flex;align-items:center;gap:.5rem;padding:.65rem .9rem;border-radius:12px;background:linear-gradient(0deg,rgba(58,167,109,.92),rgba(58,167,109,.92));color:#0b2a19;font-weight:600;font-size:.92rem;box-shadow:0 10px 24px rgba(26,22,20,.18);animation:masDeliveryReadyIn .35s ease}
.mas-delivery-ready .mas-thumb{color:#0b2a19;flex:0 0 auto}
@keyframes masDeliveryReadyIn{from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)}}

/* v126.9 iter#22 — Sheet slide-up utility classes used by .mas-detail-panel + .mas-overlay--basket .mas-page-panel x-transition directives. Mirrors RN Modal animationType="slide" (~300ms ease-out / ~250ms ease-in). */
.mas-tx-enter{transition:transform .3s cubic-bezier(.2,.8,.2,1), opacity .3s ease-out}
.mas-tx-leave{transition:transform .25s cubic-bezier(.4,0,.6,1), opacity .25s ease-in}
.mas-tx-from-bottom{transform:translateY(100%);opacity:0}
.mas-tx-to-rest{transform:translateY(0);opacity:1}
@media (prefers-reduced-motion: reduce){
  .mas-tx-enter, .mas-tx-leave{transition:opacity .15s linear !important}
  .mas-tx-from-bottom{transform:none !important}
}
@media (prefers-reduced-motion: reduce){ .mas-delivery-ready{animation:none} }

/* BASKET BAR (mobile) — lives ABOVE the legacy .x6b-mobile-actions */
.mas-basket-bar{position:fixed;left:0;right:0;bottom:calc(var(--legacy-bar) + env(safe-area-inset-bottom,0));z-index:45;padding:.65rem 1rem;display:grid}
/* v126.3 iter#10 — app CartBar: height 44, radius 12, low-elevation shadow y2 blur6 alpha .22. Was 52/14/y10 blur28 alpha .35 — over-elevated. */
.mas-basket-bar button{min-height:44px;border-radius:12px;border:0;font-weight:700;padding:0 1rem;font-size:15px;box-shadow:0 2px 6px rgba(229,163,60,.22)}
.mas-basket-bar.is-ready button{background:var(--accent);color:var(--accent-ink)}
.mas-basket-bar.is-below button{background:#3a3a3a;color:var(--muted)}
.mas-basket-bar.is-unsupported button{background:#3a3a3a;color:var(--ink)}
.mas-basket-bar.is-postcode-required button{background:var(--accent);color:var(--accent-ink)}
.mas-basket-bar.is-paused button{background:#3a3a3a;color:var(--muted)}

/* OVERLAYS — top of the stack. Some theme builds pin the mobile header /
   bottom bar at z-index 9999+, so we use near-max int to guarantee the
   drawer/sheet/modal always sit on top. */
.mas-overlay{position:fixed;inset:0;z-index:2147483646}
/* When any shell overlay is open, hide the legacy fixed bars below it so
   nothing peeks through. Alpine sets `.mas-overlay-open` on <body> whenever
   drawer / basket sheet / detail / note is active (see init + watchers). */
/* When any shell overlay is open, hide legacy fixed bars so nothing peeks through. */
body.mas-overlay-open .x6b-mobile-actions,
body.mas-overlay-open .x6b-site-header-wrap,
body.mas-overlay-open .x6b-mobile-header,
body.mas-overlay-open [class*="x6b-header"]{display:none !important;visibility:hidden !important;pointer-events:none !important}

/* Neutralize the theme's nav OVERLAY ONLY when closed. The JS guard
   below toggles data-mas-open="1" based on the overlay's actual
   computed visibility. Closed overlay ⇒ pointer-events:none ⇒ doesn't
   intercept taps aimed at the Menu button underneath. Open overlay ⇒
   pointer-events:auto ⇒ fully usable, including nested kitchens +
   chips + all interactive descendants which inherit pointer-events
   naturally. We deliberately do NOT add a `* { pointer-events:none }`
   descendant rule — that over-neutralized off-screen chips inside
   `.masalas-mobile-kitchens-20260317` (they'd fail the guard's
   in-viewport check and become unclickable until scrolled into view). */
body.mas-ordering-active #x6e-menu-overlay:not([data-mas-open="1"]){pointer-events:none !important}
.mas-overlay-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.65)}
.mas-close{width:40px;height:40px;border-radius:999px;border:0;background:var(--surface);color:var(--ink);font-size:1.5rem;line-height:1;cursor:pointer;display:grid;place-items:center;border:1px solid var(--line)}
.mas-close--float{position:absolute;right:.75rem;top:.75rem;z-index:2;background:rgba(0,0,0,.65);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

/* Category drawer — full-screen on mobile so nothing can peek from behind. */
.mas-drawer-panel{position:absolute;right:0;top:0;bottom:0;width:100vw;max-width:100vw;background:var(--bg);display:flex;flex-direction:column;z-index:1;overflow:hidden}
.mas-drawer-panel>header{flex:0 0 auto;padding:1rem 1rem;background:var(--bg);display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}
.mas-drawer-panel>ul{flex:1 1 auto;overflow-y:auto;padding:1rem;margin:0;list-style:none;display:grid;gap:.35rem}
.mas-drawer-panel header{display:flex;justify-content:space-between;align-items:center}
.mas-drawer-panel ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
/* Category-list buttons only (not the header close button). */
.mas-drawer-panel ul button{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:.5rem;row-gap:.15rem;width:100%;text-align:left;padding:.8rem .9rem;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink)}
.mas-drawer-panel ul button.active{border-color:var(--accent);background:rgba(229,163,60,.08)}
.mas-drawer-label{font-weight:600}
.mas-drawer-count{font-size:.75rem;color:var(--muted);align-self:center}
.mas-drawer-preview{grid-column:1 / -1;color:var(--muted-2);font-size:.8rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Pre-checkout "Ihre Bestellung" full-screen page overlay — matches
   Lieferando's "Your order" screen, not a bottom sheet. */
.mas-overlay--page{background:var(--bg)}
.mas-page-panel{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;overflow:hidden}
.mas-page-head{display:flex;align-items:center;gap:.9rem;padding:1rem;border-bottom:1px solid var(--line);flex:0 0 auto;background:var(--bg)}
/* v126.7 iter#17 — app CartDrawer title uses 'Playfair Display-Bold' fontFamily. Web inherited body sans — drift. */
/* v126.17 iter#43 — !important to beat xstore-child's Cormorant Garamond override on h2 selectors. */
.mas-page-head h2{font-size:1.15rem;margin:0;color:var(--ink);font-weight:700;font-family:'Playfair Display','Cormorant Garamond',Georgia,serif !important}
body.mas-ordering-active .mas-overlay--basket .mas-page-head h2,
body.mas-ordering-active .mas-overlay--auth .mas-page-head h2{
  font-family:'Playfair Display', Georgia, serif !important;
}
.mas-page-back{background:transparent;border:0;color:var(--accent);cursor:pointer;padding:0;display:inline-grid;place-items:center;width:32px;height:32px}
.mas-page-body{flex:1 1 auto;overflow-y:auto;padding:.4rem 1rem 1rem;-webkit-overflow-scrolling:touch}
.mas-page-foot{padding:.9rem 1rem calc(.9rem + env(safe-area-inset-bottom,0));border-top:1px solid var(--line);background:var(--bg)}
.mas-cta--pill{display:block;text-align:center;text-decoration:none;background:var(--accent) !important;color:var(--accent-ink) !important;border-radius:999px;padding:1rem;font-weight:700;font-size:1rem;cursor:pointer;border:0;width:100%;box-sizing:border-box}
/* v112: disabled state when cart below minimum-order for zone. Desaturated
   gold with muted ink + no pointer cursor. Uses same pill as ready state
   so the button doesn't jump shape when state flips. */
.mas-cta--pill.mas-cta--disabled,button.mas-cta.mas-cta--pill[disabled]{background:#3a342a !important;color:#8a8376 !important;cursor:not-allowed;box-shadow:none !important;filter:none}
.mas-cta--pill.mas-cta--warn{background:linear-gradient(135deg,#c04a2a,#8e2f18) !important;color:#fff !important}
/* Hint line under the CTA — always visible when a relevant minimum hint
   exists (below / unsupported / postcode-unknown). `text-transform:none`
   stops the Xstore/Neumark theme from force-Title-Casing German
   prepositions ("Ab", "Von", "Abhängig") that should stay lowercase. */
.mas-page-foot .mas-min-hint,.mas-page-foot .mas-cta--pill{text-transform:none !important;letter-spacing:normal !important}
.mas-page-foot .mas-min-hint{margin:.55rem 0 0;padding:0;color:#cfc9bb;font-size:.82rem;line-height:1.35;text-align:center;opacity:.9}

/* v121.1: returning-customer last-order banner. Slim strip at the very
   top of the workspace, orange-gradient left dot, deep-link CTA on the
   right, × to dismiss. Mirrors the Lieferando "Your active order" card
   pattern but without blocking the rest of the page. */
/* v125: paused-orders banner. Sits above the workspace. */
/* Phase 3.4: live-status banner for the logged-in customer with an active order. */
/* v126.3 iter#10 — app HomeActiveOrderCard uses flat tokens.surface bg, solid accent border, tokens.ink text. Drop gradient + #fff. */
.mas-live-status{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:.5rem .75rem .8rem;padding:14px;background:var(--surface);border:1px solid var(--accent);border-radius:14px;color:var(--ink);text-decoration:none !important;text-transform:none !important;transition:transform .15s ease, box-shadow .15s ease}
.mas-live-status:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(229,163,60,.18)}
.mas-live-status[data-state="cooking"]{background:linear-gradient(135deg,rgba(229,163,60,.24),rgba(229,163,60,.08));border-color:rgba(229,163,60,.7)}
.mas-live-status[data-state="ready"]{background:linear-gradient(135deg,rgba(245,215,106,.24),rgba(245,215,106,.08));border-color:rgba(245,215,106,.7)}
.mas-live-status[data-state="en_route"]{background:linear-gradient(135deg,rgba(108,180,245,.26),rgba(108,180,245,.08));border-color:rgba(108,180,245,.7)}
.mas-live-status-left{display:flex;align-items:center;gap:.85rem;flex:1;min-width:0}
.mas-live-status-pulse{width:12px;height:12px;border-radius:50%;background:#e5a33c;flex:0 0 auto;box-shadow:0 0 0 4px rgba(229,163,60,.18);animation:mas-live-pulse 1.5s ease-in-out infinite}
.mas-live-status[data-state="ready"] .mas-live-status-pulse{background:#f5d76a;box-shadow:0 0 0 4px rgba(245,215,106,.18)}
.mas-live-status[data-state="en_route"] .mas-live-status-pulse{background:#6cb4f5;box-shadow:0 0 0 4px rgba(108,180,245,.18)}
.mas-live-status-text{display:flex;flex-direction:column;gap:2px;min-width:0}
/* v126.3 iter#10 — app uses tokens.ink for headline + tokens.muted for sub. */
.mas-live-status-text strong{font-weight:700;font-size:.98rem;color:var(--ink)}
.mas-live-status-sub{font-size:.78rem;color:var(--muted);font-weight:600}
.mas-live-status-right{display:flex;align-items:center;gap:.7rem;flex:0 0 auto}
.mas-live-status-dots{display:flex;gap:5px}
.mas-live-status-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.18)}
.mas-live-status-dot.is-on{background:#fff;box-shadow:0 0 6px rgba(255,255,255,.5)}
.mas-live-status-cta{font-size:.82rem;font-weight:700;color:var(--accent);white-space:nowrap} /* v126.3 iter#10 — match app's accent CTA text on tokens.surface */
@media (max-width:540px){
  .mas-live-status{flex-direction:column;align-items:flex-start;padding:.85rem .9rem}
  .mas-live-status-right{width:100%;justify-content:space-between}
}
@keyframes mas-live-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.85);opacity:.6}}

.mas-paused-banner{display:flex;align-items:center;gap:.85rem;margin:.5rem .75rem .8rem;padding:.85rem 1rem;background:linear-gradient(135deg,rgba(210,69,69,.22),rgba(210,69,69,.08));border:1px solid rgba(210,69,69,.55);border-radius:14px;color:#ffd2d2;text-transform:none !important}
.mas-paused-banner-dot{width:12px;height:12px;border-radius:50%;background:#d24545;flex:0 0 auto;box-shadow:0 0 0 4px rgba(210,69,69,.18);animation:mas-pause-pulse 1.5s ease-in-out infinite}
.mas-paused-banner-text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.mas-paused-banner-text strong{color:#ffb3b3;font-weight:700;font-size:.95rem}
.mas-paused-banner-text span{color:#e3a8a8;font-size:.8rem}
@keyframes mas-pause-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.85);opacity:.6}}
.mas-min-hint--paused{color:#ff8a8a !important;font-weight:600 !important}
.mas-last-order{margin:0 .75rem .6rem;text-transform:none !important}
.mas-last-order-body{display:flex;align-items:center;gap:.75rem;padding:.7rem .9rem;background:linear-gradient(135deg,rgba(245,124,26,.14),rgba(245,124,26,.06));border:1px solid rgba(245,124,26,.4);border-radius:14px;color:#f5f1e6}
.mas-last-order-dot{width:10px;height:10px;border-radius:50%;background:#f57c1a;box-shadow:0 0 0 4px rgba(245,124,26,.18);flex:0 0 auto;animation:mas-last-pulse 2s ease-in-out infinite}
@keyframes mas-last-pulse{0%,100%{box-shadow:0 0 0 4px rgba(245,124,26,.18)}50%{box-shadow:0 0 0 7px rgba(245,124,26,.08)}}
.mas-last-order-text{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0;font-size:.85rem;line-height:1.3}
.mas-last-order-text strong{font-weight:700;color:#fff}
.mas-last-order-text span{color:#cfc9bb;font-size:.78rem}
.mas-last-order-cta{padding:.45rem .85rem;background:#f57c1a;color:#fff !important;text-decoration:none !important;border-radius:999px;font-weight:700;font-size:.8rem;white-space:nowrap;flex:0 0 auto}
.mas-last-order-cta:hover{background:#e67013}
.mas-last-order-close{background:transparent;border:0;color:#cfc9bb;font-size:1.3rem;line-height:1;padding:0 .2rem;cursor:pointer;flex:0 0 auto}
.mas-last-order-close:hover{color:#fff}
.mas-page-foot[data-state="below"] .mas-min-hint{color:#f0d08a}
.mas-page-foot[data-state="unsupported"] .mas-min-hint{color:#f4a58f}

/* Basket-sheet mode switch (Lieferando-style) — white active pill +
   dark inactive pill, side-by-side row at the top of the sheet. */
.mas-basket-mode{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:4px;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;margin:0 0 1rem}
.mas-basket-mode-opt{display:grid;grid-template-columns:18px 1fr auto;grid-template-rows:auto auto;column-gap:.55rem;align-items:center;padding:.55rem .85rem;border:0;background:transparent;color:rgba(245,241,230,.75);border-radius:999px;min-height:52px;cursor:pointer;transition:background .18s,color .18s,box-shadow .18s}
.mas-basket-mode-opt svg{grid-row:1 / span 2;width:18px;height:18px;opacity:.85}
.mas-basket-mode-label{font-weight:700;font-size:.95rem;grid-row:1;color:inherit}
.mas-basket-mode-eta{grid-row:2;font-size:.72rem;color:rgba(245,241,230,.55);grid-column:2 / span 2;text-align:left}
.mas-basket-mode-opt.active{background:#f5f1e6;color:#1a1a1a;box-shadow:0 6px 18px rgba(26,22,20,.12)}
.mas-basket-mode-opt.active .mas-basket-mode-label{color:#1a1a1a}
.mas-basket-mode-opt.active .mas-basket-mode-eta{color:rgba(26,26,26,.62)}
.mas-basket-mode-opt.active svg{opacity:1;color:#e5a33c}

.mas-basket-items{list-style:none;padding:0;margin:0}
/* v126.10 iter#23 — app CartLine Layout prop fades+slides new items in (200ms, 12px). CSS @starting-style works on Alpine x-for inserts (Chrome 117+/Safari 17.5+/Firefox 129+). Older browsers gracefully degrade to instant. */
.mas-basket-item{padding:1rem 0;border-bottom:1px solid var(--line);opacity:1;transform:translateY(0);transition:opacity .2s ease-out,transform .2s ease-out}
@starting-style{.mas-basket-item{opacity:0;transform:translateY(12px)}}
@media (prefers-reduced-motion:reduce){.mas-basket-item{transition:none}}
.mas-basket-item-head{display:flex;justify-content:space-between;align-items:flex-start;gap:.6rem}
.mas-basket-item-head strong{font-size:1rem;color:var(--ink);flex:1 1 auto;font-weight:700}
.mas-basket-item-price{color:var(--ink);font-weight:700;white-space:nowrap}
.mas-basket-item-desc{color:var(--muted);font-size:.85rem;margin:.2rem 0 .55rem;line-height:1.35}
.mas-basket-item-actions{display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin-top:.4rem}
.mas-basket-note-btn{display:inline-flex;align-items:center;gap:.4rem;background:transparent;border:1px solid var(--line);color:var(--ink);border-radius:999px;padding:.4rem .75rem;font-size:.82rem;cursor:pointer}
.mas-basket-note-btn svg{flex:0 0 auto}
.mas-basket-stepper{display:inline-flex;align-items:center;gap:.25rem;background:#2a2a2a;border-radius:999px;padding:.2rem .3rem;transition:background .15s}
.mas-basket-stepper button{width:32px;height:32px;border:0;background:transparent;color:var(--ink);border-radius:999px;cursor:pointer;display:grid;place-items:center;transition:background .15s,transform .1s}
.mas-basket-stepper button:active{transform:scale(.92)}
.mas-basket-stepper button:hover{background:rgba(255,255,255,.08)}
.mas-basket-step-qty{min-width:18px;text-align:center;color:var(--ink);font-weight:700;transition:transform .2s ease-out,color .2s;display:inline-block}
/* When the item is being updated, pulse the stepper bg + dim qty briefly
   so the customer feels the change is live. Owner: "quanity change it
   should be dynamic so the wait used animaiton will not feel like waiting". */
.mas-basket-item.is-updating .mas-basket-stepper{background:#383838}
.mas-basket-item.is-updating .mas-basket-step-qty{color:var(--accent);transform:scale(1.18)}
.mas-basket-note-preview{margin:.4rem 0 0;color:var(--accent);font-size:.8rem;font-style:italic}

/* "Haben Sie das schon gesehen..." upsell block. Light surface +
   dark cards inside, matching the Lieferando mint-background screenshot. */
.mas-basket-upsell{background:#d4e1e2;color:#0d0d0d;border-radius:18px;padding:1.1rem 1rem;margin:1rem 0}
/* v119: title in the brand gold — on the light mint-grey panel the
   previous `#0d0d0d` read as flat/dead. Owner: "this text not visible
   make it golden have you seen it text on order summary". Needs
   `body.wp-site-premium` qualifier to beat the theme's site-wide
   `body.wp-site-premium h3{color:var(--x6h-text-main)!important}`
   rule (1 class + 2 tags) with our 2 classes + 2 tags. */
body.wp-site-premium .mas-basket-upsell h3,
.mas-basket-upsell h3{margin:0 0 .8rem;color:#b27514 !important;font-size:1.05rem;font-weight:800;letter-spacing:.01em}
.mas-basket-upsell ul{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.mas-basket-upsell li{display:flex;align-items:center;gap:.8rem;background:#1e1e1e;color:var(--ink);padding:.8rem 1rem;border-radius:14px;cursor:pointer;transition:background .15s}
.mas-basket-upsell li:hover,.mas-basket-upsell li:focus-visible{background:#262626;outline:none}
.mas-basket-upsell-img{width:48px;height:48px;object-fit:cover;border-radius:10px;flex:0 0 auto;display:block;background:#111}
.mas-basket-upsell-body{flex:1 1 auto;display:grid;gap:.15rem;min-width:0}
.mas-basket-upsell-body strong{font-size:.95rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mas-basket-upsell-price{color:var(--accent);font-size:.9rem;font-weight:700}
.mas-basket-upsell-price .woocommerce-Price-amount{color:var(--accent)}
.mas-basket-upsell-add{width:34px;height:34px;flex:0 0 auto;border-radius:999px;border:1px solid var(--accent);background:transparent;color:var(--accent);font-size:1.3rem;line-height:1;cursor:pointer}

/* Info (i) button in totals — small circular pill matching Lieferando. */
.mas-info-btn{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;border:1px solid rgba(229,163,60,.6);background:transparent;color:var(--accent);font-style:italic;font-family:Georgia,serif;font-size:.72rem;font-weight:700;line-height:1;margin-left:6px;vertical-align:middle;cursor:pointer;padding:0;flex:0 0 auto}
.mas-info-btn:hover,.mas-info-btn:focus-visible{background:rgba(229,163,60,.15);outline:none}
.mas-row-label{display:inline-flex;align-items:center;gap:4px;color:var(--ink);font-weight:500}
.mas-row-amount{color:var(--accent);font-weight:600;white-space:nowrap}
.mas-row-placeholder{color:rgba(245,241,230,.55);font-style:italic;font-weight:500}

/* Totals rows — white labels FLUSH LEFT, gold amounts FLUSH RIGHT.
   Owner: "zwischen summe should and below gesamt should be left align and
   the cost right align", "make prices in same golden color … text make it
   white". */
.mas-basket-totals{display:grid;gap:10px;margin:1.4rem 0 .4rem;padding:14px 0 4px;border-top:1px solid var(--line);width:100%}
.mas-basket-totals .row{display:flex !important;justify-content:space-between !important;align-items:center;gap:12px;color:var(--ink);font-size:.95rem;width:100%}
.mas-basket-totals .row .mas-row-label{text-align:left !important;color:var(--ink);font-weight:500;flex:1 1 auto;min-width:0}
/* v126.2 iter#9 — app uses tokens.ink for default amount, gold ONLY on .total. Drop opacity stacking on muted rows. */
.mas-basket-totals .row .mas-row-amount{text-align:right !important;color:var(--ink);font-weight:600;white-space:nowrap;margin-left:auto;flex:0 0 auto}
.mas-basket-totals .row.mas-row-muted{font-size:.82rem}
.mas-basket-totals .row.mas-row-muted .mas-row-label,
.mas-basket-totals .row.mas-row-muted .mas-row-amount{color:rgba(245,241,230,.65);font-weight:400}
/* MwSt summary row — same muted style but slightly bolder to mark the
   sub-total of the VAT breakdown. */
.mas-basket-totals .row.mas-row-tax-total .mas-row-label,
.mas-basket-totals .row.mas-row-tax-total .mas-row-amount{font-weight:600;color:rgba(245,241,230,.8)}
/* Big-row modifier — Zwischensumme matches Gesamt size. */
.mas-basket-totals .row.mas-row-big .mas-row-label{font-size:1.1rem;font-weight:700}
.mas-basket-totals .row.mas-row-big .mas-row-amount{font-size:1.22rem;font-weight:800}
.mas-basket-totals .row.total{border-top:1px solid var(--line);padding-top:14px;margin-top:6px}
.mas-basket-totals .row.total .mas-row-label{color:var(--ink);font-weight:700;font-size:1.1rem}
.mas-basket-totals .row.total .mas-row-amount{color:var(--accent);font-weight:800;font-size:1.22rem}

/* Info bottom-sheet (Liefergebühr / Servicegebühr explanation). Slides up
   over the basket sheet; close returns to the basket. Owner: "when i click
   on liferando exclamation mark small box come from down and then i close
   it back to the smae screen not another page". */
.mas-overlay--info{background:rgba(0,0,0,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:flex-end;justify-content:center}
.mas-overlay--info .mas-overlay-backdrop{position:absolute;inset:0}
.mas-info-sheet{position:relative;width:100%;max-width:560px;background:#121212;border-top:1px solid rgba(229,163,60,.28);border-radius:22px 22px 0 0;padding:18px 20px calc(24px + env(safe-area-inset-bottom,0));box-shadow:0 -24px 60px rgba(0,0,0,.55);color:var(--ink);z-index:2}
.mas-info-sheet-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 10px}
.mas-info-sheet-title{font-family:'Playfair Display',Georgia,serif;font-size:1.28rem;font-weight:700;color:var(--ink);margin:0;line-height:1.2}
.mas-info-sheet-close{flex:0 0 auto;width:34px;height:34px;border:0;border-radius:50%;background:rgba(245,241,230,.08);color:var(--ink);font-size:24px;line-height:1;cursor:pointer;padding:0}
.mas-info-sheet-close:hover{background:rgba(245,241,230,.16)}
.mas-info-sheet-body{color:rgba(245,241,230,.82)}
.mas-info-sheet-desc{margin:0 0 14px;font-size:.92rem;line-height:1.5;color:rgba(245,241,230,.85)}
.mas-info-sheet-min{display:block;margin:0 0 14px;font-size:1.05rem;color:var(--ink);font-weight:700}
.mas-info-sheet-row{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;background:rgba(255,255,255,.04);border:1px solid rgba(229,163,60,.22);border-radius:12px;margin:0 0 10px;font-size:.95rem;color:var(--ink)}
.mas-info-sheet-row > span:last-child{color:var(--accent);font-weight:700}
.mas-info-sheet-footer{margin:12px 0 0;font-size:.78rem;color:rgba(245,241,230,.55);line-height:1.45}

/* ============================================================
 * v107: AUTH SHEET — "Anmelden oder Konto erstellen"
 * ============================================================
 * Reuses the .mas-overlay--page full-screen scaffold on mobile and the
 * centered-modal treatment on desktop (same pattern as .mas-overlay--basket,
 * styled below in the @media (min-width:960px) block).
 */
.mas-auth-panel{padding:0;background:#0e0e0e;color:var(--ink)}
/* v120: REVERT v119 center-justify — on tall mobile viewports (iPhone
   Pro Max and up) the panel body was ~920 px tall while the content
   column was only ~500 px, so `justify-content:center` left ~210 px
   dead space above the Google button and ~210 px below. Owner:
   "on mobile spacing issue still there beutify it and fix it should
   look good". Top-align instead: content starts ~28 px under the
   header, legal text gets pushed to the bottom via `margin-top:auto`
   so the layout feels anchored top + bottom, not floating. */
.mas-overlay--auth .mas-page-body{
  padding:28px 22px 32px;
  display:flex;flex-direction:column;gap:14px;
  max-width:420px;margin:0 auto;width:100%;
}
/* v120: the inner `<div x-show="!auth.magicSent">` is the actual
   vertical flex column that holds every auth button + the legal.
   On mobile we need it to STRETCH (flex:1) to the body's full height
   so `margin-top:auto` on the legal has room to push it downward.
   Without flex:1, the wrapper shrinks to its content height and the
   legal sits right under the buttons with a sea of dead space below. */
.mas-overlay--auth .mas-page-body > div[x-show]{
  display:flex;flex-direction:column;gap:14px;
  flex:1 1 auto;min-height:0;
}
/* The email form is a visual group — tighten its inner gap. */
.mas-overlay--auth .mas-auth-email{display:flex;flex-direction:column;gap:8px;margin:0}
/* "Oder" divider: small margin, tight with sections around it. */
.mas-overlay--auth .mas-auth-divider{margin:4px 0}
/* v120: soften the disabled-button look. v119 left the "Verifikations-
   code senden" pill at opacity .72 on gold which rendered muddy brown.
   Swap to a muted outline treatment when disabled — stays clearly a
   button, stops pretending to be primary. Only affects buttons that
   are actually disabled (Facebook "Bald verfügbar" + magic-link until
   an email is typed); enabled buttons keep their full accent. */
.mas-overlay--auth .mas-auth-btn--magic[disabled]{
  background:rgba(229,163,60,.12);
  color:rgba(229,163,60,.65) !important;
  box-shadow:inset 0 0 0 1px rgba(229,163,60,.32);
  opacity:1;
}
/* Legal + helper text at the bottom of the sheet — push them slightly
   away from the buttons so the cluster doesn't feel jammed together. */
/* v120: push legal notice to the BOTTOM of the auth body via
   margin-top:auto so tall mobile viewports feel visually balanced —
   content at top, legal anchored at bottom, empty breathing room in
   between. Helper text stays tight to the Gast button. */
.mas-overlay--auth .mas-auth-helper{margin-top:4px}
.mas-overlay--auth .mas-auth-legal{margin-top:auto;padding-top:24px}

/* Shared pill style for every button inside the sheet. Rounded, chunky,
   44 px minimum tap target, subtle elevation.
   Layout: [icon][label fills remaining space, centered][badge] — all three
   are flex children with their own hit-box. Avoids the absolute-positioned
   badge overlapping the label when the label text is long (v107.1 fix). */
.mas-auth-btn{
  position:relative;display:flex;align-items:center;gap:10px;
  width:100%;min-height:52px;padding:12px 18px;
  border:0;border-radius:999px;font-family:inherit;font-size:1rem;font-weight:600;
  letter-spacing:normal;text-transform:none;
  cursor:pointer;transition:opacity .15s ease,transform .15s ease,box-shadow .15s ease;
  box-shadow:0 6px 18px rgba(229,163,60,.30);
}
.mas-auth-btn[disabled]{cursor:not-allowed;opacity:.72}
.mas-auth-btn:not([disabled]):hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(229,163,60,.35)}
.mas-auth-btn-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px}
.mas-auth-btn-label{flex:1 1 auto;text-align:center;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mas-auth-btn-badge{
  flex:0 0 auto;
  font-size:.7rem;font-weight:600;letter-spacing:.01em;
  background:rgba(0,0,0,.22);color:inherit;padding:3px 9px;border-radius:999px;opacity:.85;
  white-space:nowrap;
}
.mas-auth-btn-badge--soft{background:rgba(229,163,60,.18);color:var(--accent)}
/* When the button has NO icon (Verifikationscode senden, Als Gast fortfahren),
   add a left-side spacer so the label still centers correctly with just a
   badge on the right. */
.mas-auth-btn--magic,
.mas-auth-btn--guest{justify-content:center}

/* Google pill — white bg, dark text, Google icon on the left.
   v126.3 iter#10 — app uses flat 1px solid #d4d4d4 outline, no shadow.
   Gold drop-shadow under a white button looks wrong vs the app's clean outline. */
.mas-auth-btn--google{background:#ffffff;color:#1f1f1f;border:1px solid #d4d4d4;box-shadow:none}
.mas-auth-btn--google:not([disabled]):hover{box-shadow:0 2px 6px rgba(0,0,0,.08)}
.mas-auth-btn--google .mas-auth-btn-label{color:#1f1f1f}
.mas-auth-btn--google .mas-auth-btn-badge{background:rgba(0,0,0,.08);color:#555}

/* Facebook pill — Facebook blue, white text. */
.mas-auth-btn--facebook{background:#1877f2;color:#fff}
.mas-auth-btn--facebook .mas-auth-btn-label{color:#fff}
.mas-auth-btn--facebook .mas-auth-btn-badge{background:rgba(0,0,0,.25);color:#e8eefa}

/* Orange magic-link pill. */
.mas-auth-btn--magic{background:var(--accent);color:var(--accent-ink)}
.mas-auth-btn--magic[disabled]{opacity:.55}

/* Outlined "Als Gast fortfahren" pill. */
.mas-auth-btn--guest{background:transparent;color:var(--ink);border:1px solid rgba(245,241,230,.28)}
.mas-auth-btn--guest:hover{background:rgba(245,241,230,.06)}

/* "Oder" divider with a center chip — matches the screenshot. */
.mas-auth-divider{position:relative;display:flex;align-items:center;justify-content:center;margin:4px 0}
.mas-auth-divider::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(245,241,230,.12)}
.mas-auth-divider span{position:relative;background:#0e0e0e;color:rgba(245,241,230,.58);padding:0 14px;font-size:.85rem}

/* Email input + submit button grouped together. */
.mas-auth-email{display:flex;flex-direction:column;gap:10px;margin:0}
.mas-auth-email-label{font-size:.95rem;font-weight:600;color:var(--ink)}
/* v126.3 iter#10 — app login uses tokens.surface bg (cream-blend in light), tokens.line border. Drop hard-coded dark. */
.mas-auth-email input{
  min-height:48px;padding:0 16px;
  background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:10px;
  font-family:inherit;font-size:1rem;
}
.mas-auth-email input::placeholder{color:rgba(245,241,230,.42)}
.mas-auth-email input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px rgba(229,163,60,.18)}

/* Helper + legal text at the bottom of the sheet. */
.mas-auth-helper{font-size:.82rem;color:rgba(245,241,230,.62);margin:4px 0 0;text-align:center;line-height:1.5}
.mas-auth-legal{font-size:.76rem;color:rgba(245,241,230,.5);margin:6px 0 0;text-align:center;line-height:1.55}
.mas-auth-legal a{color:rgba(245,241,230,.7);text-decoration:underline}
.mas-auth-legal a:hover{color:var(--accent)}

/* v111: magic-link "check your inbox" confirmation. Swaps in for the
   Google/Facebook/email/guest stack after the email is sent successfully.
   Large icon, a short friendly message with the target email bolded, and
   a "use a different email" escape hatch. */
/* v126.3 iter#10 — app uses tokens.ok green for success confirmation, not accent gold. */
.mas-auth-sent{display:flex;flex-direction:column;align-items:center;gap:14px;padding:12px 4px;text-align:center}
.mas-auth-sent svg{color:var(--ok);opacity:.9}
.mas-auth-sent-title{margin:0;font-family:'Playfair Display',Georgia,serif;font-size:1.35rem;color:var(--ink)}
.mas-auth-sent-body{margin:0;color:var(--muted);font-size:.95rem;line-height:1.5;max-width:400px}
.mas-auth-sent-body strong{color:var(--ok)}
.mas-auth-sent .mas-auth-btn{margin-top:6px;max-width:320px}

/* Transient toast — slides up from the bottom of the sheet, 3 s auto-dismiss. */
.mas-auth-toast{
  position:fixed;left:50%;bottom:max(24px,calc(24px + env(safe-area-inset-bottom,0)));
  transform:translateX(-50%);
  background:#f5f1e6;color:#1f1f1f;
  padding:12px 20px;border-radius:999px;
  font-size:.92rem;font-weight:600;
  box-shadow:0 12px 32px rgba(26,22,20,.16);
  z-index:60;pointer-events:none;max-width:88vw;text-align:center;
}

/* Legacy sheet (rarely used; keep styles available as fallback) */
.mas-sheet-panel{position:absolute;left:0;right:0;bottom:0;background:var(--bg);border-radius:18px 18px 0 0;max-height:92vh;display:flex;flex-direction:column}
.mas-sheet-panel>header{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.8rem}
.mas-mode-pill--sheet{display:flex;gap:.3rem;background:rgba(0,0,0,.55);border:1px solid var(--line);border-radius:999px;padding:3px}
.mas-mode-pill--sheet button{flex:1;min-height:40px;padding:.35rem .65rem;border:0;background:transparent;color:var(--ink);border-radius:999px;font-size:.85rem}
.mas-mode-pill--sheet button.active{background:var(--accent);color:var(--accent-ink)}
.mas-sheet-items{list-style:none;padding:0 1rem;margin:0;overflow-y:auto;flex:1}
.mas-sheet-items li{display:grid;grid-template-columns:56px 1fr auto auto;gap:.7rem;align-items:center;padding:.7rem 0;border-bottom:1px solid var(--line)}
.mas-sheet-item-body{display:grid;gap:.15rem}
.mas-note-btn{justify-self:start;background:transparent;color:var(--accent);border:0;padding:0;font-size:.8rem;cursor:pointer}
.mas-note-preview{color:var(--muted);font-size:.72rem}
.mas-stepper{display:inline-flex;gap:.25rem;align-items:center}
.mas-stepper button{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--ink)}
/* v126.6 iter#16 — app StepBtn: 40x40 round-pill, bg rgba(255,255,255,.08), font 22, no border. Was 42x42 square + line border. */
.mas-stepper--lg button{width:40px;height:40px;font-size:22px;line-height:22px;border-radius:999px;border:0;background:rgba(255,255,255,.08)}
body.mas-theme-light .mas-stepper--lg button{background:rgba(26,22,20,.06)}
.mas-stepper--lg button:disabled{opacity:.4;background:rgba(255,255,255,.04)}
body.mas-theme-light .mas-stepper--lg button:disabled{background:rgba(26,22,20,.04)}
.mas-remove{width:30px;height:30px;border-radius:8px;border:0;background:transparent;color:var(--muted)}
.mas-sheet-totals{padding:.6rem 1rem;display:grid;gap:.25rem}
.mas-sheet-totals .mas-total{font-weight:700;font-size:1.05rem;border-top:1px solid var(--line);padding-top:.5rem;margin-top:.25rem}
.mas-sheet-panel footer{padding:.6rem 1rem calc(var(--legacy-bar) + .9rem + env(safe-area-inset-bottom,0))}
.mas-shell .mas-cta,
.mas-shell a.mas-cta,
.mas-shell a.mas-cta:link,
.mas-shell a.mas-cta:visited,
.mas-shell a.mas-cta:hover,
.mas-shell a.mas-cta:active,
.mas-shell button.mas-cta{display:flex;align-items:center;justify-content:center;gap:.3rem;min-height:52px;border-radius:14px;background:var(--accent) !important;color:#1a1a1a !important;font-weight:700 !important;text-decoration:none !important;border:0;padding:0 1rem;width:100%;letter-spacing:.01em;text-shadow:none !important;white-space:nowrap}
/* v126.7 iter#16 — Split CTA: label left + price right (matches app's flex justify-content:space-between). */
.mas-shell button.mas-cta--split{justify-content:space-between !important;padding:14px 18px !important}
.mas-cta-label{flex:1 1 auto;text-align:left}
.mas-cta-price{flex:0 0 auto;text-align:right;font-variant-numeric:tabular-nums}
.mas-shell .mas-cta *,
.mas-shell a.mas-cta *,
.mas-shell button.mas-cta *{color:#1a1a1a !important}
.mas-shell .mas-cta[disabled],
.mas-shell a.mas-cta[aria-disabled="true"]{opacity:.5;pointer-events:none}

/* Product detail — mobile sheet sits ABOVE the legacy .x6b-mobile-actions bar
   so the CTA is always visible. */
/* v126.2 iter#9 — app ProductSheet uses tokens.surface for sheet bg, not bg; adds a 44x5 muted-2 grabber handle at top. */
.mas-detail-panel{position:relative;left:0;right:0;bottom:calc(var(--legacy-bar) + env(safe-area-inset-bottom,0));background:var(--surface);border-radius:18px 18px 0 0;max-height:calc(100vh - var(--legacy-bar) - 8vh);overflow-y:auto}
.mas-detail-panel::before{content:"";display:block;width:44px;height:5px;border-radius:3px;background:var(--muted-2);margin:8px auto 4px;flex:0 0 auto}
.mas-detail-inner{display:block}
.mas-detail-img{width:100%;height:min(46vh,360px);object-fit:cover;display:block}
.mas-detail-body{padding:1rem 1.1rem calc(var(--legacy-bar) + 1.2rem + env(safe-area-inset-bottom,0))}
.mas-detail-title{font-family:'Playfair Display',Georgia,serif;font-weight:700;margin:0 0 .5rem;font-size:1.4rem}
.mas-detail-short{color:var(--muted);margin:0 0 .4rem}
.mas-detail-desc{color:var(--ink);margin:.4rem 0 1rem;font-size:.95rem;line-height:1.5}
.mas-detail-variations{display:grid;gap:.7rem;margin:.4rem 0 .8rem}
.mas-detail-attr strong{display:block;margin-bottom:.3rem;color:var(--muted)}
.mas-detail-attr-opts{display:flex;flex-wrap:wrap;gap:.35rem}
.mas-detail-attr-opts button{padding:.35rem .7rem;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:.85rem}
.mas-detail-attr-opts button.active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.mas-detail-foot{display:grid;grid-template-columns:auto 1fr;gap:.6rem;align-items:center;margin-top:1rem}

/* Product add-ons — Lieferando-style extras / special / drinks sections
   rendered inside the detail modal, above the CTA. Checkbox / radio
   inputs are native so screen readers + keyboard nav work out of the
   box; custom look comes from the surrounding row + label. */
.mas-addon-section{margin:.9rem 0 0;padding:.8rem;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.02)}
.mas-addon-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin:0 0 .5rem}
.mas-addon-head strong{font-size:1rem;color:var(--ink)}
.mas-addon-tag{font-size:.72rem;color:var(--muted);padding:.15rem .55rem;border-radius:999px;background:rgba(255,255,255,.06);letter-spacing:.01em}
.mas-addon-tag--req{background:var(--accent);color:var(--accent-ink);font-weight:600}
.mas-addon-list{list-style:none;padding:0;margin:0;display:grid;gap:.1rem}
.mas-addon-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.55rem .25rem;border-bottom:1px solid rgba(255,255,255,.04)}
.mas-addon-row:last-child{border-bottom:0}
.mas-addon-row label{display:flex;align-items:center;gap:.65rem;flex:1;cursor:pointer;color:var(--ink);font-size:.95rem}
.mas-addon-row input[type="checkbox"],.mas-addon-row input[type="radio"]{width:20px;height:20px;accent-color:var(--accent);flex:0 0 auto;cursor:pointer}
.mas-addon-label{flex:1;line-height:1.3}
.mas-addon-price{color:var(--muted);font-size:.9rem;white-space:nowrap;flex:0 0 auto;transition:color .15s ease}
/* v126.8 iter#19 — app ProductSheet flips addon price to tokens.accent when selected. CSS :has() (Safari 15.4+/Chrome 105+) reads :checked state without touching Alpine bindings. */
.mas-addon-row:has(input:checked) .mas-addon-price{color:var(--accent)}

/* Note sheet */
.mas-note-panel{position:absolute;left:0;right:0;bottom:0;background:var(--bg);border-radius:18px 18px 0 0;padding:1rem 1rem calc(var(--legacy-bar) + 1rem + env(safe-area-inset-bottom,0));display:grid;gap:.6rem}
.mas-note-panel header{display:flex;justify-content:space-between;align-items:center}
/* v126.6 iter#16 — app uses tokens.surface for textarea bg, not hard #121212. */
.mas-note-panel textarea{width:100%;min-height:120px;padding:.7rem;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;resize:vertical}
/* S12 2026-05-27 — preset chips grid (mirrors CartLine.tsx L256-296) */
.mas-note-presets{display:flex;flex-wrap:wrap;gap:6px;margin:.2rem 0 .3rem}
.mas-note-chip{
  padding:6px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--ink);
  font-size:12px;
  font-weight:500;
  font-family:inherit;
  cursor:pointer;
  transition:background .15s, border-color .15s, color .15s;
}
.mas-note-chip:hover{ border-color:rgba(229,163,60,.45); }
.mas-note-chip.is-active{
  background:rgba(229,163,60,.16);
  border-color:var(--accent);
  color:var(--accent);
  font-weight:700;
}
.mas-note-freeform-intro{
  margin:.4rem 0 .1rem;
  font-size:11px;
  color:var(--muted-2);
}
/* Light-mode override — textarea bg #121212 unreadable on cream */
.mas-shell[data-theme="light"] .mas-note-panel textarea,
.mas-shell[data-theme="system"] .mas-note-panel textarea{
  background:#ffffff !important;
  color:#1a1614 !important;
  border:1px solid rgba(26,22,20,.12) !important;
}
@media (prefers-color-scheme: dark){
  .mas-shell[data-theme="system"] .mas-note-panel textarea{
    background:#121212 !important;
    color:var(--ink) !important;
    border:1px solid var(--line) !important;
  }
}

/* Search results */
.mas-search-results{padding:.6rem 0 2rem}
.mas-search-results .mas-item{margin-bottom:.5rem}

/* Toast */
/* v126.4 iter#11 — app Toast: borderColor rgba(229,163,60,.25) gold tint, padding 12/16, radius 12, fontSize 14. Web kept bottom-position (mobile-web convention vs RN top); rest harmonized. */
.mas-toast{position:fixed;left:50%;bottom:calc(var(--legacy-bar) + 84px + env(safe-area-inset-bottom,0));transform:translateX(-50%);z-index:80;background:#1a1a1a;color:var(--ink);border:1px solid rgba(229,163,60,.25);padding:12px 16px;border-radius:12px;font-size:14px}

.mas-skeleton{height:180px;border-radius:14px;background:linear-gradient(90deg,#141414,#1d1d1d,#141414);background-size:200% 100%;animation:masShimmer 1.4s linear infinite}
@keyframes masShimmer{0%{background-position:0 0}100%{background-position:200% 0}}
@media (prefers-reduced-motion: reduce){ .mas-skeleton{animation:none} }

/* FOOTER — compact Lieferando-style single row. Brand + phone + tagline
   on top, dot-separated link row, single © line. Replaces the old 271 px
   pill-style list AND hides the theme's 808 px duplicate footer. */
.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}
.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;margin:0 auto;font-size:.78rem;line-height:1.5}
.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}

/* Hide the theme's 808 px duplicate footer site-wide so only ours renders. */
body.mas-ordering-active footer.x6d-site-footer,
html body.wp-site-premium footer.x6d-site-footer{display:none !important}

/* ============== DESKTOP LAYOUT ≥960px ============== */
@media (min-width:960px){
  .mas-shell{--legacy-bar:0px}
  .mas-workspace{padding:1.6rem 2rem;max-width:1280px;margin:0 auto;width:100%;border-top:0}
  .mas-workspace-head{grid-template-columns:1fr auto;align-items:center;gap:1.2rem}
  .mas-workspace-title h2{margin:0 0 .15rem}
  .mas-mode-pill{width:auto;min-width:340px}
  .mas-postcode-row{grid-template-columns:auto 1fr;align-items:center;gap:.7rem;margin:0}
  .mas-postcode{width:auto;min-width:360px}
  .mas-postcode-result{align-self:center}
  .mas-pickup-row{max-width:560px}
  .mas-search{margin:.8rem 0 .2rem}
  .mas-promos{grid-template-columns:repeat(2,1fr);max-width:1280px;margin:0 auto;padding:1rem 2rem 0}
  /* v105 desktop: 2-column board (rail + main). The right-hand sticky
     basket panel is REMOVED — desktop uses a floating "Ihre Bestellung"
     CTA (`.mas-desktop-basket-fab`) that opens the same full-screen
     `.mas-overlay--basket` sheet as mobile. Owner: "order summary dont
     come on same page once it add to cart right side it will click to go
     to order summary then there the page of mobile like optimized for
     desktop". */
  .mas-board{display:grid;grid-template-columns:240px minmax(0,1fr);gap:1.5rem;padding:0 2rem 3rem;max-width:1280px;margin:0 auto}
  .mas-rail{grid-column:1;display:block;position:sticky;top:96px;align-self:start;max-height:calc(100vh - 112px);overflow-y:auto;overflow-x:hidden;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:.6rem .6rem 1.2rem;scrollbar-width:thin;scrollbar-color:rgba(229,163,60,.45) transparent;-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 28px),transparent 100%)}
  .mas-rail::-webkit-scrollbar{width:6px}
  .mas-rail::-webkit-scrollbar-track{background:transparent}
  .mas-rail::-webkit-scrollbar-thumb{background:rgba(229,163,60,.35);border-radius:999px}
  .mas-rail::-webkit-scrollbar-thumb:hover{background:rgba(229,163,60,.65)}
  .mas-rail nav{display:grid;gap:.15rem}
  .mas-rail-item{display:grid;grid-template-columns:1fr auto;gap:.4rem;align-items:center;padding:.6rem .75rem;border-radius:10px;text-decoration:none;color:var(--ink);font-size:.9rem}
  .mas-rail-item:hover{background:var(--surface-2)}
  .mas-rail-item.active{background:var(--accent);color:var(--accent-ink)}
  .mas-rail-count{font-size:.72rem;color:var(--muted)}
  .mas-rail-item.active .mas-rail-count{color:var(--accent-ink)}
  .mas-main{grid-column:2;min-width:0}
  .mas-chips{display:none}
  .mas-basket-bar{display:none}
  /* Mobile-fixed green banner hides on desktop; desktop uses the floating
     FAB + basket sheet for all order feedback. */
  .mas-delivery-ready{display:none !important}

  /* Uber-Eats/Lieferando-style desktop grid: product cards tile in columns
     rather than stacking one per row. 2 columns at 960-1400px, 3 columns
     when the middle content region gets wide enough. */
  .mas-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
  .mas-item{grid-template-columns:1fr 128px;padding:1rem;gap:1rem}
  .mas-item-media{min-height:112px}
  .mas-item-name{font-size:1.02rem}
  .mas-item-desc{-webkit-line-clamp:2;font-size:.88rem}
  .mas-section-title{font-size:1.5rem;margin:.4rem 0 .9rem}
  .mas-section{margin:1.8rem 0}
  /* Widen the container + drop the basket width slightly at very wide
     viewports so 2-column cards don't feel cramped. */
}
@media (min-width:1440px){
  .mas-board{grid-template-columns:260px minmax(0,1fr);max-width:1380px}
  .mas-workspace,.mas-promos{max-width:1380px}
}

/* v105: Beliebt + Zufall live OUTSIDE `.mas-board` now so they can span
   the full board width on desktop (owner: "these boxes tipe menu can go
   up so it can have full width left to right to show the product"). */
.mas-popular-wide{padding:0 1rem;margin:.3rem 0 1rem}
@media (min-width:960px){
  .mas-popular-wide{padding:0 2rem;max-width:1280px;margin:.4rem auto 1.2rem}
}
@media (min-width:1440px){
  .mas-popular-wide{max-width:1380px}
}

/* v105: desktop floating "Ihre Bestellung" CTA — replaces the old sticky
   right-column basket panel. Mobile hides the FAB (mobile has its own
   bottom basket bar). Tap → opens the full-screen `.mas-overlay--basket`
   sheet (same one mobile uses, restyled as a centered modal on desktop). */
.mas-desktop-basket-fab{display:none}
@media (min-width:960px){
  .mas-desktop-basket-fab{
    display:inline-flex;position:fixed;right:2rem;bottom:2rem;z-index:55;
    align-items:center;gap:.75rem;
    padding:.9rem 1.25rem;border:0;border-radius:999px;
    background:var(--accent);color:var(--accent-ink);
    font-weight:700;font-size:1rem;cursor:pointer;
    box-shadow:0 14px 36px rgba(229,163,60,.40);
    transition:transform .15s ease,box-shadow .15s ease;
  }
  .mas-desktop-basket-fab:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(229,163,60,.45)}
  .mas-desktop-basket-fab .mas-fab-count{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:26px;height:26px;padding:0 .5rem;border-radius:999px;
    background:rgba(0,0,0,.22);color:#fff;font-size:.85rem;font-weight:800;
  }
  .mas-desktop-basket-fab .mas-fab-label{font-size:1rem}
  .mas-desktop-basket-fab .mas-fab-total{opacity:.9;font-weight:800}
}

/* v105: desktop-optimized basket overlay. Mobile uses full-screen
   `.mas-page-panel`; desktop transforms it into a centered modal with
   max-width, rounded corners, and a scrollable middle. Owner: "the page
   of mobile like optimized for desktop come with all the details". */
@media (min-width:960px){
  .mas-overlay--basket{background:rgba(0,0,0,.72)}
  /* v109: bumped from 720 → 880 wide, 90vh → 92vh tall. Owner: "make
     that pop or what you call big so customer can see it fully". */
  .mas-overlay--basket .mas-page-panel{
    /* v114: same `inset:auto` reset as auth — see note above. */
    position:fixed;inset:auto;top:50%;left:50%;right:auto;bottom:auto;
    transform:translate(-50%,-50%);
    width:min(880px,94vw);max-height:92vh;height:auto;
    border-radius:22px;overflow:hidden;
    display:flex;flex-direction:column;
    box-shadow:0 24px 80px rgba(26,22,20,.35);
    background:var(--surface);
  }
  .mas-overlay--basket .mas-page-head{padding:1.2rem 1.6rem;border-bottom:1px solid var(--line)}
  .mas-overlay--basket .mas-page-body{padding:1.2rem 1.6rem;overflow-y:auto;flex:1 1 auto;min-height:0}
  .mas-overlay--basket .mas-page-foot{padding:1.1rem 1.6rem;border-top:1px solid var(--line);background:var(--surface-2);flex:0 0 auto}
  .mas-overlay--basket .mas-page-head h2{font-size:1.4rem}
  /* Bigger CTA in the footer so "Zur Kasse · 13,49 €" is unmissable. */
  .mas-overlay--basket .mas-cta--pill{font-size:1.05rem;padding:1.15rem;letter-spacing:.005em}
  /* On desktop the close button becomes an X (the back-arrow implies
     a previous page which doesn't exist). Swap glyph via CSS. */
  .mas-overlay--basket .mas-page-back{border-radius:999px}

  /* v109: auth modal bumped from 560 → 680 wide. */
  .mas-overlay--auth{background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center}
  .mas-overlay--auth .mas-page-panel{
    /* v114: explicitly reset `inset:0` from the generic `.mas-page-panel`
       rule. Without this, right:0 + bottom:0 stay set and force the
       panel height to (viewport - top:50%) = half the viewport (450 px
       at 900 px tall), clipping the login form. Owner reported this
       as "the alginment this on desktop. it is not fixed". */
    position:fixed;inset:auto;top:50%;left:50%;right:auto;bottom:auto;
    transform:translate(-50%,-50%);
    width:min(680px,94vw);max-height:92vh;height:auto;
    border-radius:22px;overflow:hidden;
    display:flex;flex-direction:column;
    box-shadow:0 24px 80px rgba(26,22,20,.35);
  }
  .mas-overlay--auth .mas-page-head{padding:1.2rem 1.6rem;border-bottom:1px solid var(--line)}
  /* v114: panel scrolls instead of body. The old `flex:1 1 auto +
     overflow-y:auto` on body only works if the panel has a fixed
     height — it doesn't; it has `max-height:92vh`. In that configuration
     body's flex-grow has nothing to grow INTO, so body collapses to
     ~383 px and the content inside is clipped by the overflow:auto.
     Owner saw the modal as "bad alignment".
     Fix: body is natural-sized, panel scrolls up to 92vh. */
  .mas-overlay--auth .mas-page-panel{overflow-y:auto}
  .mas-overlay--auth .mas-page-body{
    padding:1.8rem 2rem 2rem;
    display:flex;flex-direction:column;gap:14px;
    /* Override the generic `.mas-page-body` rule that has
       `flex:1 1 auto; overflow-y:auto` — those collapse this body to
       383 px inside an auto-height panel. */
    flex:0 0 auto !important;
    overflow:visible !important;
    min-height:0;
  }
  /* The `<div x-show="!auth.magicSent">` wrapper around the default
     body content also needs flex-column so its own children
     (Google/FB/Oder/email-form/guest/helper/legal) get the same 14 px
     gap instead of collapsing into a block stack. */
  .mas-overlay--auth .mas-page-body > div[x-show]{display:flex;flex-direction:column;gap:14px}
  .mas-overlay--auth .mas-page-head h2{font-size:1.4rem}
  .mas-overlay--auth .mas-page-back{border-radius:999px}
  /* Bigger pills inside the auth sheet on desktop so the buttons are
     easy to hit with a trackpad. */
  .mas-overlay--auth .mas-auth-btn{min-height:58px;font-size:1.05rem;padding:14px 22px}
  .mas-overlay--auth .mas-auth-email input{min-height:54px;font-size:1.02rem}
}
@media (min-width:960px){
  /* Uber-Eats-style centered product modal: image on the LEFT (~48%),
     content on the RIGHT with a sticky-bottom CTA. These rules MUST live
     inside the min-width:960px block so they apply to desktop (they were
     previously trapped in the 1680px block and never fired at 1440). */
  .mas-detail-panel{left:50%;right:auto;transform:translate(-50%,-50%);bottom:auto;top:50%;width:min(920px,96vw);border-radius:20px;max-height:min(86vh,760px);overflow:hidden;display:flex;flex-direction:column}
  .mas-detail-inner{display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1fr);align-items:stretch;min-height:0;flex:1 1 auto;overflow:hidden}
  .mas-detail-img{width:100%;height:100%;max-height:560px;object-fit:cover;aspect-ratio:auto;border-radius:0}
  .mas-detail-body{padding:1.6rem 1.8rem 1.4rem;overflow-y:auto;display:flex;flex-direction:column}
  .mas-detail-title{font-size:1.7rem;margin:0 0 .6rem}
  .mas-detail-short{color:var(--muted);margin:.2rem 0 .8rem;font-size:1rem}
  .mas-detail-desc{flex:1 1 auto;overflow-y:auto}
  .mas-detail-foot{position:sticky;bottom:-1.4rem;margin:1rem -1.8rem -1.4rem;padding:.9rem 1.4rem calc(.9rem + env(safe-area-inset-bottom,0));background:var(--bg);border-top:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:center}
  .mas-sheet-panel{left:auto;right:1.5rem;bottom:1.5rem;transform:none;top:auto;width:min(420px,96vw);border-radius:20px;max-height:80vh}
  .mas-note-panel{left:50%;right:auto;transform:translate(-50%,-50%);bottom:auto;top:50%;width:min(480px,94vw);border-radius:20px}
  /* Drawer on desktop is a side sheet, not full-screen. */
  .mas-drawer-panel{width:min(440px,92vw);max-width:440px;border-left:1px solid var(--line)}
  .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}
}
@media (min-width:1680px){
  .mas-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* A11y */
.mas-shell button:focus-visible,.mas-shell a:focus-visible,.mas-shell input:focus-visible,.mas-shell textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Legacy site bottom bar keeps working; hide only if shell basket has items on mobile to avoid double-CTA */
body.mas-ordering-active .x6b-mobile-actions{z-index:30}
@media (min-width:960px){ body.mas-ordering-active .x6b-mobile-actions{display:none} }

/* Top-right hamburger hide moved to site-wide CSS (see
   masalas_ordering_mbar_site_css()) so it applies to /my-account/,
   /shop/, etc., not just home. */

/* DESKTOP: hide ONLY the theme's "Menu" nav link. The rest of the theme
   header (Shop, Liefergebiet, Anrufen, Jetzt bestellen, WhatsApp, logo,
   search icon) stays intact. The Menu link duplicates the shell's own
   bottom-left Menu drawer and — because it carries `aria-controls=
   "x6e-menu-overlay"` — would re-open the hidden theme overlay if tapped.
   Targeted via the `data-masalas-menu-trigger` attribute so we don't
   accidentally catch unrelated /menu/ links elsewhere on the site. */
body.mas-ordering-active .x6b-site-nav a[data-masalas-menu-trigger],
body.mas-ordering-active .x6e-desktop-nav a[data-masalas-menu-trigger]{
  display: none !important;
}

/* v109: the .x6b-site-cta header-bleed hide moved to the site-wide CSS
   function (masalas_ordering_mbar_site_css) so it applies to every page,
   not just the home shell. Was scoped to body.mas-ordering-active here. */

/* Mobile bottom bar reshape + icon/label swap lives in site-wide CSS /
   JS (masalas_ordering_mbar_site_css + masalas_ordering_print_mbar_site_assets)
   so it applies on every page the theme renders .x6b-mobile-actions. The
   top .mas-search form in the shell is intentionally VISIBLE on mobile
   again (owner: "take it back that search bare") — the bottom Suche pill
   scrolls to it + focuses. */

/* ============================================================
 * Hero: keep page 9792's original Elementor hero — background image,
 * serif Playfair typography, gold divider borders, transparent
 * gold-bordered buttons. NO design changes. We only:
 *  - center the text (theme default was `text-align: start`);
 *  - hide the badge blocks the owner moved to the bottom-info strip
 *    (`.premium-linkline` + any element flagged via `[data-mas-hide]`
 *    by `mountHeroCleanup()`);
 *  - inject a 3rd CTA (`mountHeroThirdButton`);
 *  - fix three words (`mountHeroTextFixes`).
 * ============================================================ */

body.mas-ordering-active .premium-hero,
body.mas-ordering-active .premium-hero *,
body.mas-ordering-active .premium-home .premium-hero *{
  text-align:center !important;
}
body.mas-ordering-active .premium-actions{
  justify-content:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
  /* Force ALL three CTAs (Jetzt bestellen / Reservieren / Liefergebiet prüfen)
     on a single line. Owner: "also can you make this 3 button in one line".
     Compact buttons on tight viewports so they fit. */
  flex-wrap:nowrap !important;
  gap:6px !important;
  max-width:100% !important;
  overflow:visible !important;
}
body.mas-ordering-active .premium-actions .premium-btn,
body.mas-ordering-active .premium-actions a,
body.mas-ordering-active .premium-actions button{
  flex:0 1 auto !important;
  white-space:nowrap !important;
  min-width:0 !important;
}
@media (max-width:767px){
  body.mas-ordering-active .premium-actions .premium-btn,
  body.mas-ordering-active .premium-actions a,
  body.mas-ordering-active .premium-actions button{
    padding:10px 12px !important;
    font-size:13px !important;
    letter-spacing:0 !important;
  }
}

body.mas-ordering-active .premium-hero .premium-linkline,
body.mas-ordering-active .premium-home .premium-linkline,
body.mas-ordering-active [data-mas-hide="1"]{display:none !important}

/* HERO LOGO OVERLAY — fills the ENTIRE hero (edge-to-edge, top to bottom
   past the 3 CTA buttons). Owner: "make it big so the area below the are
   of 3 button should be cover". Watermark opacity so text reads clearly;
   hero children get z-index:2 so they sit above the medallion; `inset:0`
   stretches the container to full hero; img `object-fit:cover` scales the
   logo to fill both dimensions, cropping horizontally where the square
   image exceeds the narrower viewport. */
body.mas-ordering-active .premium-hero{position:relative !important}
/* VISIBLE centered logo medallion (NOT a watermark) at the top of the hero.
   Owner reverted the v77 full-bleed background watermark: "second logo went
   behind the txt not visible i said what logo you put keep it there just
   make it little big and the text will go down so the empty space belwo3
   buttons will be less". Back to the v71 overlay — square medallion sized
   ~160 px, fully opaque, ABOVE the hero background + above the text (z-
   index 3). Hero padding-top pushes the copy below it so the content runs
   further down the hero and leaves less empty space under the CTAs. Theme
   has `body.wp-site-premium.home .premium-home .premium-hero > *
   { position: relative !important }` at (0,0,4,2); our selector prefix
   `html body.wp-site-premium.home .premium-home .premium-hero >` hits
   (0,0,5,2) to win and keep the overlay absolute. */
html body.wp-site-premium.home .premium-home .premium-hero > .mas-hero-logo,
body.mas-ordering-active .mas-hero-logo{
  position:absolute !important;
  /* v106: top bumped 40→55 so the gap between the fixed site header and
     the logo matches the gap between the logo and the first hero text
     line. Owner: "keep space between header and logo and the text adn
     both should be equal". Paired with the `padding-top: 175px` change
     below — tuned empirically via `_probe_hero_spacing.js` so gap_above
     == gap_below == ~50 px on iPhone 13 mini. */
  top:55px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  width:min(160px,36vw) !important;
  height:auto !important;
  max-height:none !important;
  right:auto !important;
  bottom:auto !important;
  z-index:3 !important;
  pointer-events:none !important;
  opacity:1 !important;
  overflow:visible !important;
  display:block !important;
  background:none !important;
}
body.mas-ordering-active .mas-hero-logo img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
}
/* Push the hero copy down so text starts BELOW the 135 px logo medallion
   with breathing room. Theme ships `body.wp-site-premium.home .premium-
   home .premium-hero { padding-top: 94px !important }` (specificity
   0,0,4,2) — our selector needs `html body.wp-site-premium.home
   .premium-home .premium-hero` (0,0,5,2) to win.
   v106: 240 → 175. The previous 240 produced gap_above=35 / gap_below=130
   on iPhone 13 mini — wildly uneven. 175 puts gap_above ≈ gap_below ≈
   50 px with `.mas-hero-logo { top: 55px }` above. Owner: "keep space
   between header and logo and the text adn both should be equal".
   Math: logo.top = hero.top + 55, logo.bottom = logo.top + 135,
   text.top = hero.top + padding-top + theme_extra_gap (≈65 px from the
   Elementor hero wrap). Setting padding-top=175 makes text.top match
   logo.bottom + 50. */
@media (max-width:767px){
  html body.wp-site-premium.home .premium-home .premium-hero{
    padding-top:175px !important;
  }
}
/* Desktop — theme ships padding-top: 117px, which is less than (logo.top 55
   + logo.height 160) = 215. The logo therefore OVERLAPPED the hero text by
   ~63 px. Tuned via `_probe_hero_spacing.js` to 232 px for ~52 / 52 px
   symmetric gaps above and below the logo at 1280×900. */
@media (min-width:768px){
  html body.wp-site-premium.home .premium-home .premium-hero{
    padding-top:232px !important;
  }
}

/* KPI CARDS — owner brought the 3 `.premium-kpis > li` cards back (Timing /
   Phone / Halal & Direkt). Tune the row to look visually balanced against
   the logo (top) and CTAs (above). */
body.mas-ordering-active .premium-kpis{
  margin-top:2rem !important;
  display:grid !important;
  gap:12px !important;
  max-width:520px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding:0 14px !important;
  list-style:none !important;
}
/* High-specificity selector (0,0,5,4) to beat theme rules on bg-image +
   border-color. Owner: match the 3 CTA secondary buttons above (Reservieren,
   Liefergebiet prüfen). Fully transparent, gold border matching CTAs,
   compact vertical padding. */
html body.wp-site-premium.home .premium-home .premium-hero .premium-kpis li,
body.mas-ordering-active .premium-kpis li{
  padding:12px 18px !important;
  border-radius:18px !important;
  border:1px solid rgba(197,148,86,.38) !important;
  background:transparent !important;
  background-image:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  text-align:center !important;
  list-style:none !important;
  box-shadow:none !important;
}
body.mas-ordering-active .premium-kpis li strong{
  display:block !important;
  font-family:'Playfair Display','Cormorant Garamond',Georgia,serif !important;
  font-size:1.12rem !important;
  font-weight:700 !important;
  color:#f5f1e6 !important;
  margin-bottom:3px !important;
  line-height:1.15 !important;
  letter-spacing:.005em !important;
}
body.mas-ordering-active .premium-kpis li strong a{color:inherit !important;text-decoration:none !important}
body.mas-ordering-active .premium-kpis li span{
  display:block !important;
  font-size:.82rem !important;
  color:rgba(245,241,230,.72) !important;
  line-height:1.3 !important;
}
@media (max-width:767px){
  html body.wp-site-premium.home .premium-home .premium-hero .premium-kpis{margin-top:28px !important;padding-bottom:1rem !important;gap:10px !important}
  body.mas-ordering-active .premium-kpis li{padding:10px 16px !important}
  body.mas-ordering-active .premium-kpis li strong{font-size:1.02rem !important;margin-bottom:2px !important}
  body.mas-ordering-active .premium-kpis li span{font-size:.78rem !important}
}

/* (v55's `.mas-big-logo` block was reverted on owner request —
   "remove the logo it look worst make it like before". Centering via
   `mountHeroForceCenter()` JS remains in place so the hero copy stays
   centered on mobile and desktop.) */

/* Bottom info strip (outside the hero) — keeps "Seit 2010 · Täglich
   11-23 Uhr · Halal & direkt" + ONE bold phone number, below the
   shell content so the hero stays clean. */
body.mas-ordering-active .mas-bottom-info{
  padding:1.5rem 1rem 2rem;
  border-top:1px solid rgba(229,163,60,.15);
  background:#0a0907;
  text-align:center;
  color:rgba(245,241,230,.78);
  font-size:.9rem;
  line-height:1.55;
}
body.mas-ordering-active .mas-bottom-info .mas-bottom-meta{display:block;margin-bottom:.4rem;color:rgba(245,241,230,.66);font-size:.82rem;letter-spacing:.02em}
body.mas-ordering-active .mas-bottom-info .mas-bottom-phone{display:block;margin-top:.2rem;font-size:1.15rem;letter-spacing:.02em;color:#f5f1e6}
body.mas-ordering-active .mas-bottom-info .mas-bottom-phone a{color:#f5f1e6;text-decoration:none;font-weight:800}
body.mas-ordering-active .mas-bottom-info .mas-bottom-phone a:hover{color:#e5a33c}

/* Header — minimal change per owner feedback: keep the theme's default
   look, ONLY center the "Masalas Indisches Restaurant" wordmark. No
   logo bleeding, no shadow stacks, no height overrides. */
body.mas-ordering-active .x6b-brand-wordmark,
body.mas-ordering-active .x6b-site-logo .x6b-brand-wordmark{
  text-align:center !important;
  flex:1 1 auto;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
/* Balance the flex row so the wordmark sits centered next to the
   logo (logo stays its native size on the left). */
body.mas-ordering-active .x6b-site-logo{
  display:flex;
  align-items:center;
  gap:.5rem;
}

/* The top-right hamburger (site nav) must keep working as before — it opens
   the theme's own navigation overlay. We do NOT hide that overlay globally.
   The hijack below (in the Alpine factory) intercepts ONLY the bottom-bar
   `.x6g-mbar-menu` tap so it opens our subcategory drawer instead of the
   theme overlay; the top hamburger takes a different click path and is
   left untouched. */

/* ============================================================
 * S22/S23/S26 2026-05-27 — App-parity polish:
 *  - S22: Search input gemini-glow on focus (rotating gold conic gradient
 *    around the rounded pill, matching app's SearchBar)
 *  - S23: CTA 3D emboss — top highlight + bottom-shadow edge so primary
 *    buttons (Zur Kasse, Prüfen, Hinzufügen) get the raised feel from the
 *    app's CartBar / TagesangebotCard / Bestellen-und-bezahlen
 *  - S26: Cross-sell strip horizontal scroll (was vertical grid)
 * ============================================================ */

/* SEARCH-APP-PARITY 2026-05-27 — full app-spec search per owner option A.
   Mirror of app's SearchBar (components/search/SearchBar.tsx) +
   suggestions dropdown (app/index.tsx:687-758). */

/* Inline search bar at rest — pill, transparent at rest */
.mas-search{
  position:relative;
  display:flex; align-items:center; gap:.4rem;
  margin-top:.3rem;
  border-radius:999px;
  padding:3px;
  background:transparent;
  transition:background .22s ease;
}
/* v126.2 iter#9 — app SearchBar: hairline accent border, transparent bg. */
.mas-search input{
  flex:1; min-height:48px;
  padding:0 2.8rem 0 2.6rem;
  border-radius:999px;
  border:0.5px solid var(--accent);
  background:transparent;
  color:var(--ink);
  font-size:16px;
  position:relative; z-index:2;
}
.mas-search input::placeholder{ color:var(--muted-2); }
/* Rotating conic-gradient ring on focus — animates the gradient ANGLE via
   @property (the rectangle stays still, only the gradient direction sweeps
   360°). Mirrors app's SVG <Rect stroke="url(#searchGlow)" fill="none">
   behaviour. Border-mask trick keeps just the perimeter ring visible.
   2026-05-28 — replaces the previous transform:rotate() approach which
   rotated the whole pseudo-element rectangle and produced a giant
   orbiting capsule far outside the form.                              */
@supports (background: conic-gradient(from 0deg, red, red)) {
  @property --mas-search-glow-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
  }
  .mas-search::before{
    content:"";
    position:absolute;
    inset:-3px;
    border-radius:999px;
    padding:2px;
    background:conic-gradient(from var(--mas-search-glow-angle),
      #ffd700, #ff8c00, #ff3d8e, #dc6428, #ffd700);
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
            mask-composite: exclude;
    opacity:0;
    pointer-events:none;
    transition:opacity .22s ease;
    animation:masSearchGlowRotate 2800ms linear infinite;
    z-index:1;
  }
  @keyframes masSearchGlowRotate{
    to { --mas-search-glow-angle: 360deg; }
  }
}
.mas-shell.is-search-active .mas-search,
.mas-search:focus-within{
  background:transparent;
}
.mas-shell.is-search-active .mas-search::before,
.mas-search:focus-within::before{ opacity:1; }
@media (prefers-reduced-motion: reduce) {
  .mas-search::before{ animation:none; }
}

/* Active search overlay — backdrop + floating search + dropdown.
   2026-05-28: z-index bumped above 9998 so the floating bar+backdrop clear
   the WP site header (`.x6b-site-header-wrap{z-index:9998}`). Also hide
   the WP header while search is active so the input sits at the very top
   of the viewport, matching the app's full-screen search mode. */
.mas-shell.is-search-active ~ .x6b-site-header-wrap,
body:has(.mas-shell.is-search-active) .x6b-site-header-wrap{
  opacity:0 !important;
  pointer-events:none !important;
  transition:opacity .18s ease;
}
.mas-search-backdrop{
  position:fixed; inset:0;
  background:rgba(0,0,0,0.55);
  z-index:9990;
}
.mas-shell.is-search-active .mas-search{
  position:fixed;
  top:env(safe-area-inset-top, 12px);
  left:16px; right:16px;
  z-index:10001;
  margin:0;
  padding-top:12px;
  background:var(--bg);
}
.mas-shell.is-search-active .mas-search input{
  background:var(--bg);
  border:1px solid var(--accent-deep);
}
/* Dropdown sits below the floating search bar */
.mas-search-dropdown{
  position:fixed;
  top:calc(env(safe-area-inset-top, 12px) + 78px);
  left:16px; right:16px;
  z-index:10000;
  background:var(--bg);
  border:1px solid var(--accent);
  border-radius:14px;
  box-shadow:0 8px 16px rgba(0,0,0,.35);
  max-height:calc(100vh - 200px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.mas-search-rows{
  list-style:none; padding:0; margin:0;
}
.mas-search-rows li + li .mas-search-row{
  border-top:1px solid var(--line);
}
.mas-search-row{
  display:block; width:100%;
  padding:12px 14px;
  background:transparent;
  border:0;
  text-align:left;
  cursor:pointer;
  font-family:inherit;
  color:inherit;
}
.mas-search-row:hover,
.mas-search-row:focus-visible{
  background:rgba(229,163,60,.10);
  outline:none;
}
.mas-search-row-name{
  display:block;
  font-size:15px;
  font-weight:600;
  color:var(--ink);
  line-height:1.3;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.mas-search-row-desc{
  display:block;
  margin-top:2px;
  font-size:12px;
  font-weight:400;
  color:var(--muted);
  line-height:1.3;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.mas-search-empty{
  padding:18px 14px;
  margin:0;
  text-align:center;
  font-size:13px;
  color:var(--muted);
  line-height:1.4;
}
/* Hide the old inline results section if any browser cached it */
.mas-search-results{display:none !important;}

/* --- S23 CTA 3D emboss --------------------------------------- */
.mas-cta--pill,
.mas-beliebt-add,
.mas-inhaber-add,
.mas-add,
.mas-basket-bar button,
.mas-basket-upsell-add,
button.mas-cta.mas-cta--pill:not([disabled]){
  border-top:1.5px solid rgba(255,255,255,0.45) !important;
  border-bottom:1.5px solid var(--accent-deep) !important;
}
/* v126 iter#7 — Drawer/checkout pill elevation. App's CartBar CTA reads
   as a lifted, glossy gold pill. Border emboss alone is too flat on cream
   bg. Add inset highlight + amber drop shadow so the "Zur Kasse" pill in
   the cart drawer matches the floating .mas-basket-bar's elevation cue.
   Excluded from disabled state. */
.mas-overlay--basket .mas-cta--pill:not([disabled]):not(.mas-cta--disabled),
.mas-page-foot .mas-cta--pill:not([disabled]):not(.mas-cta--disabled){
  box-shadow:0 1px 0 rgba(255,255,255,0.45) inset,
             0 6px 14px rgba(200,127,29,0.30) !important;
}
.mas-overlay--basket .mas-cta--pill:not([disabled]):not(.mas-cta--disabled):active,
.mas-page-foot .mas-cta--pill:not([disabled]):not(.mas-cta--disabled):active{
  box-shadow:0 1px 0 rgba(255,255,255,0.20) inset,
             0 3px 8px rgba(200,127,29,0.24) !important;
  transform:translateY(1px);
}
.mas-cta--pill:active,
.mas-beliebt-add:active,
.mas-inhaber-add:active,
.mas-add:active,
.mas-basket-bar button:active{
  border-top-color:rgba(255,255,255,0.2) !important;
  transform:translateY(1px);
}
/* Disabled CTA should NOT emboss (no hover lift) */
button.mas-cta.mas-cta--pill[disabled],
.mas-cta--pill.mas-cta--disabled{
  border-top:1.5px solid rgba(200,127,29,.55) !important;
  border-bottom:1.5px solid rgba(200,127,29,.55) !important;
}

/* --- S14 Card alignment pass — 16px outer margin / 14px inner pad / 14px gap
   App uses a consistent 16/14/14 rhythm. Web mixed 12/16/18 — boxes "not
   properly aligned" per owner. Normalize the main scrollable surfaces. */
@media (max-width: 767.98px){
  /* Outer wrapper containing menu sections */
  .mas-popular-wide,
  .mas-promos,
  .mas-section,
  .mas-inhaber,
  .mas-tages-wrap,
  .mas-hero-promo-wrap{
    margin-left: 16px !important;
    margin-right: 16px !important;
  }
  .mas-section + .mas-section{ margin-top: 14px !important; }

  /* Card-style components — promo cards row, inhaber, tagesangebot */
  .mas-inhaber,
  .mas-tages,
  .mas-promo-card,
  .mas-hero-promo{
    padding: 14px !important;
    border-radius: 16px !important;
  }
  /* Promo grid 2-col with explicit gap */
  .mas-promos{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }
  /* Beliebt carousel — inner card padding consistent */
  .mas-beliebt-card{ border-radius: 16px !important; }
  .mas-beliebt-body{ padding: 12px 12px 14px !important; }
  /* Item grid (menu sections below) — gap normalized */
  .mas-list{ gap: 14px !important; }
}

/* --- S26 Cross-sell horizontal scroll ------------------------ */
.mas-basket-upsell ul{
  display:flex !important;
  flex-direction:row !important;
  gap:.8rem !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding-bottom:.3rem;
  margin:0 -.2rem;
}
.mas-basket-upsell li{
  flex:0 0 auto !important;
  width:min(64vw, 240px) !important;
  scroll-snap-align:start;
  flex-direction:column !important;
  align-items:stretch !important;
  padding:0 !important;
  overflow:hidden;
  border-radius:14px !important;
}
.mas-basket-upsell-img{
  width:100% !important;
  height:96px !important;
  border-radius:14px 14px 0 0 !important;
  object-fit:cover;
}
.mas-basket-upsell-body{
  padding:.5rem .7rem .35rem !important;
  gap:.2rem !important;
}
.mas-basket-upsell-body strong{
  font-size:.85rem !important;
  line-height:1.25 !important;
  white-space:normal !important;
  overflow:visible !important;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden !important;
}
.mas-basket-upsell-add{
  align-self:flex-end;
  margin:0 .55rem .55rem auto !important;
}

/* ============================================================
 * S6 + S7 2026-05-26 — Tagesangebot card + HeroPromo strip.
 * Both mirror their app counterparts: gold-bordered cards on
 * cream/dark, eyebrow + title + price/CTA. Inserted between
 * the hero poster and the menu sections.
 * ============================================================ */

/* --- S6 Tagesangebot card --- */
/* v126.2 iter#9 — app TagesangebotCard uses borderWidth:0.5 (hairline) not 1px. */
.mas-tages{
  position:relative;
  display:grid;
  grid-template-columns:130px 1fr auto;
  align-items:center;
  gap:.9rem;
  margin:.8rem 1rem 0;
  padding:14px;
  border:0.5px solid var(--accent);
  border-radius:14px;
  background:var(--surface);
  box-shadow:0 4px 14px rgba(229,163,60,.18);
}
.mas-tages-thumb{
  display:grid; place-items:center;
  width:130px; height:130px;
  background:transparent; border:0; padding:0;
  cursor:pointer; border-radius:12px; overflow:hidden;
}
.mas-tages-img{
  width:130px; height:130px;
  object-fit:cover; border-radius:12px;
}
.mas-tages-body{
  display:flex; flex-direction:column; gap:4px;
  min-width:0;
}
.mas-tages-eyebrow{
  color:var(--accent);
  font-size:10px;
  font-weight:700;
  letter-spacing:1px; /* v126.2 iter#9 — app:1 not 1.6 */
  text-transform:uppercase;
}
.mas-tages-title{
  color:var(--ink);
  font-size:1.125rem; /* v126.2 iter#9 — app:18px (was 1.05rem ~16.8px) */
  font-weight:700;
  line-height:1.22;
  white-space:normal;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
/* v126.2 iter#9 — app uses tokens.accent (not accentDeep) for price. */
.mas-tages-price{
  color:var(--accent);
  font-size:1.125rem;
  font-weight:800;
}
.mas-tages-price .woocommerce-Price-amount{
  color:var(--accent);
}
.mas-tages-price bdi{
  color:var(--accent);
}
/* 2026-05-28 AUDIT — was a 42x42 round + icon. App spec
   (masalas-native/components/TagesangebotCard.tsx) uses a 3D-embossed
   gold PILL with paddingX 14 / paddingY 8, top-white highlight +
   bottom-accentDeep shadow edge. Updated to match. The +/spinner
   still renders inside the pill — no markup change. */
.mas-tages-add{
  flex:0 0 auto;
  padding:.5rem .9rem;
  border-radius:999px;
  border-top:1.5px solid rgba(255,255,255,.45);
  border-bottom:1.5px solid var(--accent-deep);
  border-left:.5px solid rgba(255,255,255,.2);
  border-right:.5px solid var(--accent-deep);
  background:var(--accent);
  color:var(--accent-ink);
  font-size:.88rem; line-height:1; font-weight:800; letter-spacing:.02em;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer;
  box-shadow:0 6px 14px rgba(229,163,60,.45);
  transition:transform .15s ease, box-shadow .15s ease;
  min-height:34px;
}
.mas-tages-add:hover{ transform:translateY(-1px); box-shadow:0 10px 20px rgba(229,163,60,.5); }
.mas-tages-add:active{ transform:scale(.96); }
.mas-tages-add.is-loading{ pointer-events:none; opacity:.85; }
@media (max-width: 540px){
  .mas-tages{ grid-template-columns:88px 1fr auto; gap:.7rem; padding:.7rem .8rem; }
  .mas-tages-thumb,.mas-tages-img{ width:88px; height:88px; }
  .mas-tages-title{ font-size:.98rem; }
}

/* --- S7 HeroPromo strip --- */
.mas-hero-promo{
  position:relative;
  margin:.6rem 1rem 0;
  padding:.85rem 1rem;
  border:1px solid var(--accent);
  border-radius:14px;
  background:linear-gradient(135deg, rgba(229,163,60,.10), rgba(200,127,29,.04));
  box-shadow:0 4px 14px rgba(229,163,60,.18);
}
.mas-hero-promo-row{
  display:flex;
  align-items:center;
  gap:1rem;
}
.mas-hero-promo-text{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}
.mas-hero-promo-eyebrow{
  color:var(--accent);
  font-size:10px;
  font-weight:800;
  letter-spacing:1.6px;
  text-transform:uppercase;
}
.mas-hero-promo-title{
  color:var(--ink);
  font-size:1rem;
  font-weight:700;
  line-height:1.3;
}
.mas-hero-promo-cta{
  flex:0 0 auto;
  border:0;
  border-radius:999px;
  background:var(--accent);
  color:var(--accent-ink);
  padding:.55rem 1rem;
  font-size:.85rem;
  font-weight:700;
  letter-spacing:.02em;
  cursor:pointer;
  white-space:nowrap;
  box-shadow:0 4px 10px rgba(229,163,60,.30);
  transition:transform .15s ease, box-shadow .15s ease;
}
.mas-hero-promo-cta:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(229,163,60,.40); }
.mas-hero-promo-cta:active{ transform:scale(.96); }
@media (max-width: 480px){
  .mas-hero-promo-row{ flex-direction:column; align-items:stretch; gap:.6rem; }
  .mas-hero-promo-cta{ width:100%; padding:.7rem; font-size:.95rem; }
}
@media (min-width: 768px){
  .mas-hero-promo{ margin:.8rem 0 0; border-radius:0; border-left:0; border-right:0; }
}

/* ============================================================
 * DT-6 + DT-7 + DT-8  2026-05-26 — light-mode surface overrides
 * for cart drawer, auth sheet, info sheet, checkout. Many of the
 * basket/auth selectors above were hard-coded with dark-only hex
 * (#2a2a2a, #1e1e1e, #0e0e0e, #191919, #121212, #d4e1e2 mint, etc.)
 * and white-on-dark RGBA text (rgba(245,241,230,X)). On a cream
 * background those read as dark-on-dark or white-on-cream — both
 * unreadable. This block flips every offender to a light-mode token
 * equivalent under .mas-shell[data-theme="light"]/[="system"], and
 * reverts inside @media (prefers-color-scheme: dark) so OS-dark
 * users on "system" still see the dark variants.
 * Owner feedback (2026-05-26): "order summary login checkout page
 * all have white issues theme issue".
 * ============================================================ */

/* --- Cart drawer: stepper (trash / qty / + pill) --- */
.mas-shell[data-theme="light"] .mas-basket-stepper,
.mas-shell[data-theme="system"] .mas-basket-stepper{
  background:rgba(26,22,20,.06);
}
.mas-shell[data-theme="light"] .mas-basket-stepper button:hover,
.mas-shell[data-theme="system"] .mas-basket-stepper button:hover{
  background:rgba(26,22,20,.10);
}
.mas-shell[data-theme="light"] .mas-basket-item.is-updating .mas-basket-stepper,
.mas-shell[data-theme="system"] .mas-basket-item.is-updating .mas-basket-stepper{
  background:rgba(26,22,20,.12);
}

/* --- Cart drawer: Lieferung/Abholung mode pill at top --- */
.mas-shell[data-theme="light"] .mas-basket-mode-opt,
.mas-shell[data-theme="system"] .mas-basket-mode-opt{
  color:rgba(26,22,20,.62);
}
.mas-shell[data-theme="light"] .mas-basket-mode-eta,
.mas-shell[data-theme="system"] .mas-basket-mode-eta{
  color:rgba(26,22,20,.48);
}
.mas-shell[data-theme="light"] .mas-basket-mode-opt.active,
.mas-shell[data-theme="system"] .mas-basket-mode-opt.active{
  background:#ffffff; color:#1a1614;
  box-shadow:0 6px 18px rgba(26,22,20,.10);
}
.mas-shell[data-theme="light"] .mas-basket-mode-opt.active .mas-basket-mode-label,
.mas-shell[data-theme="system"] .mas-basket-mode-opt.active .mas-basket-mode-label{
  color:#1a1614;
}
.mas-shell[data-theme="light"] .mas-basket-mode-opt.active .mas-basket-mode-eta,
.mas-shell[data-theme="system"] .mas-basket-mode-opt.active .mas-basket-mode-eta{
  color:rgba(26,22,20,.62);
}

/* --- Cart drawer: "Haben Sie das schon gesehen" upsell carousel --- */
.mas-shell[data-theme="light"] .mas-basket-upsell,
.mas-shell[data-theme="system"] .mas-basket-upsell{
  background:rgba(255,250,242,.86) !important;
  color:#1a1614 !important;
  border:1px solid rgba(200,127,29,.18);
}
.mas-shell[data-theme="light"] .mas-basket-upsell li,
.mas-shell[data-theme="system"] .mas-basket-upsell li{
  background:#ffffff;
  color:#1a1614;
  border:1px solid rgba(26,22,20,.08);
}
.mas-shell[data-theme="light"] .mas-basket-upsell li:hover,
.mas-shell[data-theme="light"] .mas-basket-upsell li:focus-visible,
.mas-shell[data-theme="system"] .mas-basket-upsell li:hover,
.mas-shell[data-theme="system"] .mas-basket-upsell li:focus-visible{
  background:#fffaf2;
  border-color:rgba(200,127,29,.35);
}
.mas-shell[data-theme="light"] .mas-basket-upsell-body strong,
.mas-shell[data-theme="system"] .mas-basket-upsell-body strong{
  color:#1a1614;
}
.mas-shell[data-theme="light"] .mas-basket-upsell-img,
.mas-shell[data-theme="system"] .mas-basket-upsell-img{
  background:rgba(26,22,20,.06);
}

/* --- Cart drawer: totals muted / tax / placeholder rows --- */
.mas-shell[data-theme="light"] .mas-row-placeholder,
.mas-shell[data-theme="system"] .mas-row-placeholder{
  color:rgba(26,22,20,.46);
}
.mas-shell[data-theme="light"] .mas-basket-totals .row.mas-row-muted .mas-row-label,
.mas-shell[data-theme="light"] .mas-basket-totals .row.mas-row-muted .mas-row-amount,
.mas-shell[data-theme="system"] .mas-basket-totals .row.mas-row-muted .mas-row-label,
.mas-shell[data-theme="system"] .mas-basket-totals .row.mas-row-muted .mas-row-amount{
  color:rgba(26,22,20,.56);
}
.mas-shell[data-theme="light"] .mas-basket-totals .row.mas-row-tax-total .mas-row-label,
.mas-shell[data-theme="light"] .mas-basket-totals .row.mas-row-tax-total .mas-row-amount,
.mas-shell[data-theme="system"] .mas-basket-totals .row.mas-row-tax-total .mas-row-label,
.mas-shell[data-theme="system"] .mas-basket-totals .row.mas-row-tax-total .mas-row-amount{
  color:rgba(26,22,20,.72);
}

/* --- Info bottom-sheet ("Liefergebühr / Servicegebühr") --- */
.mas-shell[data-theme="light"] .mas-info-sheet,
.mas-shell[data-theme="system"] .mas-info-sheet{
  background:#ffffff; color:#1a1614;
  border-top:1px solid rgba(200,127,29,.28);
  box-shadow:0 -24px 60px rgba(26,22,20,.18);
}
.mas-shell[data-theme="light"] .mas-info-sheet-title,
.mas-shell[data-theme="system"] .mas-info-sheet-title{ color:#1a1614; }
.mas-shell[data-theme="light"] .mas-info-sheet-close,
.mas-shell[data-theme="system"] .mas-info-sheet-close{
  background:rgba(26,22,20,.08); color:#1a1614;
}
.mas-shell[data-theme="light"] .mas-info-sheet-close:hover,
.mas-shell[data-theme="system"] .mas-info-sheet-close:hover{
  background:rgba(26,22,20,.16);
}
.mas-shell[data-theme="light"] .mas-info-sheet-body,
.mas-shell[data-theme="system"] .mas-info-sheet-body{ color:rgba(26,22,20,.78); }
.mas-shell[data-theme="light"] .mas-info-sheet-desc,
.mas-shell[data-theme="system"] .mas-info-sheet-desc{ color:rgba(26,22,20,.82); }
.mas-shell[data-theme="light"] .mas-info-sheet-footer,
.mas-shell[data-theme="system"] .mas-info-sheet-footer{ color:rgba(26,22,20,.55); }

/* --- Auth sheet (login / magic-link) --- */
/* Panel BG — was hard-coded #0e0e0e at line ~7133. THIS is what made
   the whole auth sheet render as a dark slab on a cream homepage. */
.mas-shell[data-theme="light"] .mas-auth-panel,
.mas-shell[data-theme="system"] .mas-auth-panel{
  background:var(--bg) !important; color:var(--ink) !important;
}
/* h2 heading "Anmelden oder Konto erstellen" — xstore theme paints
   ALL h1/h2/h3 with var(--x6h-text-main) at !important specificity
   (1 class + 1 tag). Beat it with 1 class + 1 attr + 1 tag + !important. */
html body.wp-site-premium .mas-shell[data-theme="light"] .mas-auth-panel .mas-page-head h2,
html body.wp-site-premium .mas-shell[data-theme="system"] .mas-auth-panel .mas-page-head h2{
  color:#1a1614 !important;
}
/* Guest button border was white-tinged rgba(245,241,230,.28) — flip
   to ink-tinged so the outline is visible on cream. */
.mas-shell[data-theme="light"] .mas-auth-btn--guest,
.mas-shell[data-theme="system"] .mas-auth-btn--guest{
  border:1px solid rgba(26,22,20,.22); color:#1a1614;
}
.mas-shell[data-theme="light"] .mas-auth-btn--guest:hover,
.mas-shell[data-theme="system"] .mas-auth-btn--guest:hover{
  background:rgba(26,22,20,.06);
}
/* Email input bg was #191919 — DT-7 covered .mas-auth-email input,
   but the inputs inside might be elsewhere; reinforce. */
.mas-shell[data-theme="light"] .mas-overlay--auth input[type="email"],
.mas-shell[data-theme="light"] .mas-overlay--auth input[type="text"],
.mas-shell[data-theme="system"] .mas-overlay--auth input[type="email"],
.mas-shell[data-theme="system"] .mas-overlay--auth input[type="text"]{
  background:#ffffff !important; color:#1a1614 !important;
  border:1px solid rgba(26,22,20,.16) !important;
}
.mas-shell[data-theme="light"] .mas-auth-divider::before,
.mas-shell[data-theme="system"] .mas-auth-divider::before{
  background:rgba(26,22,20,.14);
}
.mas-shell[data-theme="light"] .mas-auth-divider span,
.mas-shell[data-theme="system"] .mas-auth-divider span{
  background:var(--bg); color:rgba(26,22,20,.58);
}
.mas-shell[data-theme="light"] .mas-auth-email input,
.mas-shell[data-theme="system"] .mas-auth-email input{
  background:rgba(255,255,255,.86); color:#1a1614;
  border:1px solid rgba(26,22,20,.14);
}
.mas-shell[data-theme="light"] .mas-auth-email input::placeholder,
.mas-shell[data-theme="system"] .mas-auth-email input::placeholder{
  color:rgba(26,22,20,.45);
}
.mas-shell[data-theme="light"] .mas-auth-helper,
.mas-shell[data-theme="system"] .mas-auth-helper{ color:rgba(26,22,20,.62); }
.mas-shell[data-theme="light"] .mas-auth-legal,
.mas-shell[data-theme="system"] .mas-auth-legal{ color:rgba(26,22,20,.55); }
.mas-shell[data-theme="light"] .mas-auth-legal a,
.mas-shell[data-theme="system"] .mas-auth-legal a{ color:rgba(26,22,20,.72); }
.mas-shell[data-theme="light"] .mas-auth-sent-body,
.mas-shell[data-theme="system"] .mas-auth-sent-body{ color:rgba(26,22,20,.78); }

/* --- Toast --- */
.mas-shell[data-theme="light"] .mas-toast,
.mas-shell[data-theme="system"] .mas-toast{
  background:#1a1614; color:#f5f1e6; border:1px solid rgba(26,22,20,.1);
}

/* System theme follows OS — when OS prefers dark, revert all the
   light-mode overrides above so "system" users get the dark
   experience again. */
@media (prefers-color-scheme: dark){
  .mas-shell[data-theme="system"] .mas-basket-stepper{ background:#2a2a2a; }
  .mas-shell[data-theme="system"] .mas-basket-stepper button:hover{ background:rgba(255,255,255,.08); }
  .mas-shell[data-theme="system"] .mas-basket-item.is-updating .mas-basket-stepper{ background:#383838; }
  .mas-shell[data-theme="system"] .mas-basket-mode-opt{ color:rgba(245,241,230,.75); }
  .mas-shell[data-theme="system"] .mas-basket-mode-eta{ color:rgba(245,241,230,.55); }
  .mas-shell[data-theme="system"] .mas-basket-mode-opt.active{ background:#f5f1e6; color:#1a1a1a; box-shadow:0 6px 18px rgba(26,22,20,.12); }
  .mas-shell[data-theme="system"] .mas-basket-mode-opt.active .mas-basket-mode-label{ color:#1a1a1a; }
  .mas-shell[data-theme="system"] .mas-basket-mode-opt.active .mas-basket-mode-eta{ color:rgba(26,26,26,.62); }
  .mas-shell[data-theme="system"] .mas-basket-upsell{ background:#d4e1e2 !important; color:#0d0d0d !important; border:none; }
  .mas-shell[data-theme="system"] .mas-basket-upsell li{ background:#1e1e1e; color:var(--ink); border:none; }
  .mas-shell[data-theme="system"] .mas-basket-upsell li:hover,
  .mas-shell[data-theme="system"] .mas-basket-upsell li:focus-visible{ background:#262626; border-color:transparent; }
  .mas-shell[data-theme="system"] .mas-basket-upsell-body strong{ color:var(--ink); }
  .mas-shell[data-theme="system"] .mas-basket-upsell-img{ background:#111; }
  .mas-shell[data-theme="system"] .mas-row-placeholder{ color:rgba(245,241,230,.55); }
  .mas-shell[data-theme="system"] .mas-basket-totals .row.mas-row-muted .mas-row-label,
  .mas-shell[data-theme="system"] .mas-basket-totals .row.mas-row-muted .mas-row-amount{ color:rgba(245,241,230,.65); }
  .mas-shell[data-theme="system"] .mas-basket-totals .row.mas-row-tax-total .mas-row-label,
  .mas-shell[data-theme="system"] .mas-basket-totals .row.mas-row-tax-total .mas-row-amount{ color:rgba(245,241,230,.8); }
  .mas-shell[data-theme="system"] .mas-info-sheet{ background:#121212; color:var(--ink); border-top:1px solid rgba(229,163,60,.28); box-shadow:0 -24px 60px rgba(0,0,0,.55); }
  .mas-shell[data-theme="system"] .mas-info-sheet-title{ color:var(--ink); }
  .mas-shell[data-theme="system"] .mas-info-sheet-close{ background:rgba(245,241,230,.08); color:var(--ink); }
  .mas-shell[data-theme="system"] .mas-info-sheet-close:hover{ background:rgba(245,241,230,.16); }
  .mas-shell[data-theme="system"] .mas-info-sheet-body{ color:rgba(245,241,230,.82); }
  .mas-shell[data-theme="system"] .mas-info-sheet-desc{ color:rgba(245,241,230,.85); }
  .mas-shell[data-theme="system"] .mas-info-sheet-footer{ color:rgba(245,241,230,.55); }
  .mas-shell[data-theme="system"] .mas-auth-divider::before{ background:rgba(245,241,230,.12); }
  .mas-shell[data-theme="system"] .mas-auth-panel{ background:#0e0e0e !important; color:var(--ink) !important; }
  html body.wp-site-premium .mas-shell[data-theme="system"] .mas-auth-panel .mas-page-head h2{ color:#f5f1e6 !important; }
  .mas-shell[data-theme="system"] .mas-auth-btn--guest{ border:1px solid rgba(245,241,230,.28); color:var(--ink); }
  .mas-shell[data-theme="system"] .mas-auth-btn--guest:hover{ background:rgba(245,241,230,.06); }
  .mas-shell[data-theme="system"] .mas-overlay--auth input[type="email"],
  .mas-shell[data-theme="system"] .mas-overlay--auth input[type="text"]{ background:#191919 !important; color:var(--ink) !important; border:1px solid rgba(245,241,230,.14) !important; }
  .mas-shell[data-theme="system"] .mas-auth-divider span{ background:#0e0e0e; color:rgba(245,241,230,.58); }
  .mas-shell[data-theme="system"] .mas-auth-email input{ background:#191919; color:var(--ink); border:1px solid rgba(245,241,230,.14); }
  .mas-shell[data-theme="system"] .mas-auth-email input::placeholder{ color:rgba(245,241,230,.42); }
  .mas-shell[data-theme="system"] .mas-auth-helper{ color:rgba(245,241,230,.62); }
  .mas-shell[data-theme="system"] .mas-auth-legal{ color:rgba(245,241,230,.5); }
  .mas-shell[data-theme="system"] .mas-auth-legal a{ color:rgba(245,241,230,.7); }
  .mas-shell[data-theme="system"] .mas-auth-sent-body{ color:rgba(245,241,230,.78); }
  .mas-shell[data-theme="system"] .mas-toast{ background:#1a1a1a; color:var(--ink); border:1px solid var(--line); }
}

/* DT-S9 2026-05-26 — Product detail panel day-mode. The xstore h1/h2/p
   rule at (0,2,1)!important was overriding .mas-detail-title and
   .mas-detail-short with cream colors. Plus the addon-list (extras)
   labels inherit the cream too. Force all detail-panel text to dark
   ink / muted brown. Owner: "extras list all faded". */
html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="light"]) .mas-detail-title,
html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="system"]) .mas-detail-title{
  color:#1a1614 !important;
}
html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="light"]) .mas-detail-short,
html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="system"]) .mas-detail-short{
  color:#5c5650 !important;
}
html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="light"]) .mas-detail-desc,
html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="system"]) .mas-detail-desc{
  color:#1a1614 !important;
}
/* Addon (extras) list: section bg, header label, tag, rows, dividers */
html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="light"]) .mas-addon-section,
html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="system"]) .mas-addon-section{
  background:rgba(26,22,20,.025) !important;
  border-color:rgba(26,22,20,.10) !important;
}
html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="light"]) .mas-addon-head,
html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="system"]) .mas-addon-head{
  color:#1a1614 !important;
}
html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="light"]) .mas-addon-tag,
html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="system"]) .mas-addon-tag{
  color:#5c5650 !important;
  background:rgba(26,22,20,.06) !important;
}
html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="light"]) .mas-addon-row,
html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="system"]) .mas-addon-row{
  border-bottom:1px solid rgba(26,22,20,.08) !important;
}
html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="light"]) .mas-addon-label,
html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="system"]) .mas-addon-label{
  color:#1a1614 !important;
  font-weight:500 !important;
}
html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="light"]) .mas-addon-price,
html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="system"]) .mas-addon-price{
  color:#8f5710 !important;
  font-weight:700 !important;
}
/* OS-dark revert */
@media (prefers-color-scheme: dark){
  html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="system"]) .mas-detail-title{ color:var(--ink) !important; }
  html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="system"]) .mas-detail-short{ color:var(--muted) !important; }
  html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="system"]) .mas-detail-desc{ color:var(--ink) !important; }
  html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="system"]) .mas-addon-section{
    background:rgba(255,255,255,.02) !important;
    border-color:var(--line) !important;
  }
  html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="system"]) .mas-addon-head{ color:var(--ink) !important; }
  html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="system"]) .mas-addon-tag{
    color:var(--muted) !important;
    background:rgba(255,255,255,.06) !important;
  }
  html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="system"]) .mas-addon-row{
    border-bottom:1px solid rgba(255,255,255,.04) !important;
  }
  html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="system"]) .mas-addon-label{
    color:var(--ink) !important;
    font-weight:400 !important;
  }
  html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="system"]) .mas-addon-price{
    color:var(--muted) !important;
    font-weight:400 !important;
  }
}

/* DT-12 2026-05-26 — xstore-child theme rule
   `body.wp-site-premium h1/h2/h3/p/li/label { color:var(--x6h-text-*) !important }`
   ties (0,2,1)!important — beats my (0,2,1)!important selectors above
   for cart-drawer text. Chain `body.wp-site-premium` to reach (0,3,1)+
   and force dark text in day mode. Owner: "order summary looks terrible"
   — subtitle text was rendering as rgba(232,236,244,.88) (cream-on-cream
   invisible) instead of the muted brown intended. */
html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="light"]) .mas-overlay--basket .mas-page-head h2,
html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="system"]) .mas-overlay--basket .mas-page-head h2{
  color:#1a1614 !important;
}
/* S1-v3 2026-05-27 — App parity: CartDrawer.tsx renders item line as
   name + price + qty only (no description). Owner: "copy same from app".
   Hide the .mas-basket-item-desc subtitle in cart drawer entirely so
   the website matches the app. The product detail panel still shows
   description (that's where it belongs); the cart is for committed
   choices, not menu browsing. */
.mas-basket-item-desc{ display:none !important; }
/* S1-v2 2026-05-27 — disabled CTA text was #3d3833 (too soft on cream
   bg #fff8eb). Bump to solid ink #1a1614 + heavier weight so the
   "Liefer-PLZ eingeben für Mindestbestellwert" prompt reads as a
   confident instruction, not a faded label. Owner: "order summary not
   fixed". */
html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="light"]) .mas-cta--pill.mas-cta--disabled,
html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="light"]) button.mas-cta.mas-cta--pill[disabled],
html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="system"]) .mas-cta--pill.mas-cta--disabled,
html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="system"]) button.mas-cta.mas-cta--pill[disabled]{
  color:#1a1614 !important;
  font-weight:700 !important;
}
/* Min-hint below the disabled CTA — make it readable too. */
html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="light"]) .mas-page-foot .mas-min-hint,
html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="system"]) .mas-page-foot .mas-min-hint{
  color:#5c5650 !important;
  font-weight:500 !important;
}
/* S1 2026-05-26 — disabled CTA ("Liefer-PLZ eingeben für Mindestbestellwert")
   was hard-coded #3a342a bg + #8a8376 ink — looks dim/dead on cream.
   In day mode, swap to soft cream bg + gold outline + dark ink so the
   "minimum-order" prompt remains LEGIBLE and clearly clickable-when-met. */
html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="light"]) .mas-cta--pill.mas-cta--disabled,
html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="light"]) button.mas-cta.mas-cta--pill[disabled],
html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="system"]) .mas-cta--pill.mas-cta--disabled,
html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="system"]) button.mas-cta.mas-cta--pill[disabled]{
  background:#fff8eb !important;
  color:#3d3833 !important;
  border:1.5px solid rgba(200,127,29,.55) !important;
  box-shadow:0 2px 8px rgba(26,22,20,.06) !important;
}
/* OS-dark revert for system scheme */
@media (prefers-color-scheme: dark){
  html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="system"]) .mas-cta--pill.mas-cta--disabled,
  html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="system"]) button.mas-cta.mas-cta--pill[disabled]{
    background:#3a342a !important;
    color:#8a8376 !important;
    border:0 !important;
    box-shadow:none !important;
  }
}
html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="light"]) .mas-basket-item-head strong,
html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="system"]) .mas-basket-item-head strong,
html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="light"]) .mas-basket-item-price,
html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="system"]) .mas-basket-item-price{
  color:#1a1614 !important;
}
html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="light"]) .mas-basket-upsell h3,
html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="system"]) .mas-basket-upsell h3{
  color:#8f5710 !important;
}
html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="light"]) .mas-basket-upsell-body strong,
html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="system"]) .mas-basket-upsell-body strong{
  color:#1a1614 !important;
}
html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="light"]) .mas-basket-upsell-price,
html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="system"]) .mas-basket-upsell-price,
html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="light"]) .mas-basket-upsell-price .woocommerce-Price-amount,
html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="system"]) .mas-basket-upsell-price .woocommerce-Price-amount{
  color:#8f5710 !important;
}
html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="light"]) .mas-basket-totals .row,
html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="system"]) .mas-basket-totals .row,
html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="light"]) .mas-basket-totals .row .mas-row-label,
html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="system"]) .mas-basket-totals .row .mas-row-label{
  color:#1a1614 !important;
}
html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="light"]) .mas-basket-totals .row .mas-row-amount,
html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="system"]) .mas-basket-totals .row .mas-row-amount{
  color:#8f5710 !important;
}
/* OS-dark revert when scheme=system */
@media (prefers-color-scheme: dark){
  html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="system"]) .mas-overlay--basket .mas-page-head h2{ color:var(--ink) !important; }
  html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="system"]) .mas-basket-item-desc{ color:var(--muted) !important; }
  html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="system"]) .mas-basket-item-head strong,
  html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="system"]) .mas-basket-item-price{ color:var(--ink) !important; }
  html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="system"]) .mas-basket-upsell h3{ color:#b27514 !important; }
  html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="system"]) .mas-basket-upsell-body strong{ color:var(--ink) !important; }
  html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="system"]) .mas-basket-upsell-price,
  html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="system"]) .mas-basket-upsell-price .woocommerce-Price-amount{ color:var(--accent) !important; }
  html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="system"]) .mas-basket-totals .row,
  html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="system"]) .mas-basket-totals .row .mas-row-label{ color:var(--ink) !important; }
  html body.wp-site-premium.mas-ordering-active:has(.mas-shell[data-theme="system"]) .mas-basket-totals .row .mas-row-amount{ color:var(--accent) !important; }
}

/* DT-11 2026-05-26 — desktop cart-drawer + auth-overlay opacity fix.
   At ≥960px the basket overlay backdrop is rgba(0,0,0,.72) and the
   centered modal panel uses background:var(--surface) which is
   rgba(255,255,255,0.5) (50% white) in day mode. Result: panel is
   semi-transparent + dark backdrop dims the menu behind, so customer
   sees menu food cards bleeding through the cart. Owner: "this is
   the order summary and it looks terrible." Fix: solid white panel +
   warm-cream-tinted dim backdrop in day mode. */
@media (min-width: 960px){
  body.mas-ordering-active:has(.mas-shell[data-theme="light"]) .mas-overlay--basket,
  body.mas-ordering-active:has(.mas-shell[data-theme="system"]) .mas-overlay--basket{
    background:rgba(26,22,20,.45) !important;
  }
  body.mas-ordering-active:has(.mas-shell[data-theme="light"]) .mas-overlay--basket .mas-page-panel,
  body.mas-ordering-active:has(.mas-shell[data-theme="system"]) .mas-overlay--basket .mas-page-panel{
    background:#ffffff !important;
    box-shadow:0 24px 80px rgba(26,22,20,.25) !important;
  }
  body.mas-ordering-active:has(.mas-shell[data-theme="light"]) .mas-overlay--basket .mas-page-foot,
  body.mas-ordering-active:has(.mas-shell[data-theme="system"]) .mas-overlay--basket .mas-page-foot{
    background:#fbf6ec !important;
  }
  /* Auth overlay backdrop too. */
  body.mas-ordering-active:has(.mas-shell[data-theme="light"]) .mas-overlay--auth,
  body.mas-ordering-active:has(.mas-shell[data-theme="system"]) .mas-overlay--auth{
    background:rgba(26,22,20,.45) !important;
  }
  /* OS-dark revert when scheme=system */
  @media (prefers-color-scheme: dark){
    body.mas-ordering-active:has(.mas-shell[data-theme="system"]) .mas-overlay--basket{
      background:rgba(0,0,0,.72) !important;
    }
    body.mas-ordering-active:has(.mas-shell[data-theme="system"]) .mas-overlay--basket .mas-page-panel{
      background:var(--surface) !important;
      box-shadow:0 24px 80px rgba(26,22,20,.35) !important;
    }
    body.mas-ordering-active:has(.mas-shell[data-theme="system"]) .mas-overlay--basket .mas-page-foot{
      background:var(--surface-2) !important;
    }
    body.mas-ordering-active:has(.mas-shell[data-theme="system"]) .mas-overlay--auth{
      background:rgba(0,0,0,.72) !important;
    }
  }
}