/* ==========================================================================
 * SHOP-AUSWAHL / LANDING (shop-index.php, body.cust-shop OHNE .cust-terminal)
 * --------------------------------------------------------------------------
 * Die Subdomain-Root listet alle aktiven Shops als Karten-Grid. Diese Seite
 * lädt KEIN terminal.css-Layout (kein .cust-terminal) → ohne diese Regeln
 * erscheint sie komplett unstyled („nur Text"). Mobile-first, Breakpoint 600.
 * ========================================================================== */
.shop-index {
    max-width: 940px;
    margin: 0 auto;
    padding: 32px 18px 56px;
    box-sizing: border-box;
}
.shop-index-head {
    text-align: center;
    margin: 8px 0 28px;
}
.shop-index-head h1 {
    margin: 0 0 6px;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #18181f;
}
.shop-index-head p {
    margin: 0;
    font-size: 15.5px;
    color: #6b6b78;
}

.shop-index-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.shop-card {
    --shop-accent: #6B21A8;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 24px 18px 20px;
    background: #fff;
    border: 1px solid #ececf2;
    border-radius: 18px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
    -webkit-tap-highlight-color: transparent;
}
.shop-card:hover,
.shop-card:focus-visible {
    transform: translateY(-2px);
    border-color: var(--shop-accent);
    box-shadow: 0 8px 24px rgba(0,0,0,0.10);
    outline: none;
}
.shop-card:active { transform: translateY(0); }

.shop-card-logo {
    width: 84px;
    height: 84px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--shop-accent);
    overflow: hidden;
    flex: 0 0 auto;
}
.shop-card-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.shop-card-logo-fallback { font-size: 40px; line-height: 1; }

.shop-card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}
.shop-card-name {
    font-size: 18px;
    font-weight: 700;
    color: #18181f;
    overflow-wrap: anywhere;
}
.shop-card-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
}
.shop-card-badge.is-open    { background: #e7f7ee; color: #157347; }
.shop-card-badge.is-closed  { background: #fbeaea; color: #b42318; }

.shop-index-empty {
    text-align: center;
    padding: 60px 20px;
    color: #6b6b78;
}
.shop-index-empty-icon { font-size: 52px; display: block; margin-bottom: 12px; }

@media (min-width: 600px) {
    .shop-index { padding: 48px 24px 72px; }
    .shop-index-head h1 { font-size: 34px; }
    .shop-index-grid { gap: 20px; }
    .shop-card-logo { width: 96px; height: 96px; }
}

/* ==========================================================================
 * shop.css — Online-Shop-Kanal (body.cust-shop)
 * --------------------------------------------------------------------------
 * Lädt NACH terminal.css und gilt AUSSCHLIESSLICH unter body.cust-shop.
 * Macht das fixe Kiosk-Layout (terminal.php / terminal-konfig.php) mobile-first
 * responsive, ohne terminal.css anzufassen.
 *
 * Layout-Strategie:
 *   - Mobil (< 600px):  Sidebar = horizontale Scroll-Leiste oben (Burger optional),
 *                       Produkt-Grid 1–2 Spalten, Cart = sticky Bottom-Bar.
 *   - Tablet (600–899): Produkt-Grid füllt auf, Cart bleibt sticky unten.
 *   - Desktop (≥ 900):  Sidebar links + Produkt-Mitte + Cart als rechte Sidebar.
 *
 * Scrollen ist im Shop IMMER erlaubt (Kiosk hatte overflow:hidden + 100vh fix).
 * Breakpoints: 600px / 900px.
 * ========================================================================== */

/* ── Grundgerüst: Kiosk-Vollbild-Sperre aufheben ─────────────────────────── */
body.cust-shop {
    overflow-y: auto !important;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}
body.cust-shop,
.cust-shop html {
    height: auto !important;
}

/* Kiosk-Force-Light bleibt erwünscht; nur die Höhen-/Scroll-Sperre lösen. */
.cust-shop .term-shell {
    height: auto !important;
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    overflow: visible !important;
}

/* ──────────────────────────────────────────────────────────────────────────
 * MOBILE-FIRST (Default, < 600px)
 * ────────────────────────────────────────────────────────────────────────── */
.cust-shop .term-shell {
    display: flex;
    flex-direction: column;
}

/* Sidebar → horizontale, scrollbare Kategorie-/Marken-Leiste oben (sticky). */
.cust-shop .term-sidebar {
    grid-area: auto;
    position: sticky;
    top: 0;
    z-index: 40;
    width: 100%;
    height: auto !important;
    max-height: none;
    flex-direction: column;
    border-right: 0;
    border-bottom: 1px solid #e6e6ec;
    overflow: visible;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}

/* Brand kompakt + zentriert auf Mobile. */
.cust-shop .term-brand,
.cust-shop .term-sidebar-mcd .term-brand {
    text-align: center;
    padding: 12px 14px 8px;
    border-bottom: 0;
}
.cust-shop .term-sidebar-mcd .term-brand img {
    margin: 0 auto 4px !important;
    max-height: 56px !important;
}

/* System-Nav (Allergene/Rewards/Coupon) horizontal scrollbar. */
.cust-shop .term-sysnav {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    padding: 4px 10px 8px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.cust-shop .term-sysnav-item {
    flex: 0 0 auto;
    flex-direction: column;
    width: auto;
    min-width: 76px;
    padding: 8px 10px;
    font-size: 12px;
    border-radius: 12px;
    text-align: center;
}
.cust-shop .term-sysnav-label { font-size: 11px; }

/* Divider unsichtbar machen auf Mobile (spart vertikalen Platz). */
.cust-shop .term-sidebar-divider { display: none; }

/* Marken-/Kategorie-Leiste: horizontal scrollbar, „Chips". */
.cust-shop .term-marken {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    padding: 4px 10px 10px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.cust-shop .term-marke-btn,
.cust-shop .term-kat-btn {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: auto;
    padding: 9px 14px;
    border-radius: 999px;
    border: 1.5px solid #e6e6ec;
    white-space: nowrap;
    font-size: 14px;
}
.cust-shop .term-marke-btn.active,
.cust-shop .term-kat-btn.active {
    border-color: var(--accent);
    background: var(--accent-tint);
    color: var(--accent);
}
.cust-shop .term-marke-emoji { font-size: 18px; }

/* Kategorie-Slide-Navigation in den normalen Fluss holen. Im SOT sind die
   Panels absolut positioniert (`position:absolute; inset:0` für die
   Slide-Animation) und füllen die feste Kiosk-Sidebar. In der auto-hohen
   Shop-Sidebar (<900px, horizontale Leiste) bekommt der nav-stack dadurch
   keine Höhe → kollabiert auf 0 → `overflow:hidden` blendet ALLE Kategorien
   aus. `display:contents` löst den nav-stack-Wrapper auf, sodass das aktive
   Panel direkt in der Marken-/Kategorie-Leiste mitfließt. Branch/Zurück-
   Navigation bleibt funktional (JS toggelt weiter is-active). */
.cust-shop .term-nav-stack { display: contents; }
.cust-shop .term-nav-panel {
    position: static;
    inset: auto;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    display: none;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    min-width: 0;
}
.cust-shop .term-nav-panel.is-active { display: flex; }
.cust-shop .term-nav-panel.is-left   { display: none; }

.cust-shop .term-sidebar-foot { display: none; }

/* Hauptbereich: normaler Fluss, scrollbar, Platz unten für die Cart-Bar. */
.cust-shop .term-main {
    grid-area: auto;
    overflow: visible;
    height: auto;
    padding: 16px 14px 132px; /* unten Platz für sticky Cart-Bar */
}
.cust-shop .term-main-head h1 { font-size: 24px; }

/* Produkt-Grid: dichte, fluide Kacheln. */
.cust-shop .term-product-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}
/* Sehr schmale Phones (≤ 360px): 2 schmale Spalten bleiben gut tippbar. */
@media (max-width: 360px) {
    .cust-shop .term-product-grid {
        grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
        gap: 10px;
    }
}
/* Produkt-Kachel: bequemes Touch-Target, Text bricht statt zu klemmen. */
.cust-shop .term-product {
    min-height: 92px;
    -webkit-tap-highlight-color: transparent;
}
.cust-shop .term-product strong { overflow-wrap: anywhere; }
/* Info-Button (ⓘ) groß genug zum Treffen. */
.cust-shop .term-product-info-btn {
    min-width: 34px;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Kategorie-Überschrift bricht sauber um. */
.cust-shop .term-cat-head { overflow-wrap: anywhere; }

/* ── Cart: sticky Bottom-Bar auf Mobile ──────────────────────────────────── */
.cust-shop .term-cart {
    grid-area: auto;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    border-top: 1px solid #e6e6ec;
    box-shadow: 0 -6px 24px rgba(0,0,0,0.10);
    background: #fff;
    max-height: 46vh;
}
/* Item-Liste im Bottom-Bar bleibt horizontal scrollbar (kompakt). */
.cust-shop .term-cart-list {
    max-height: 96px;
    padding: 10px 14px;
}
.cust-shop .term-cart-summary {
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #ececf2;
}
.cust-shop .term-cart-pay {
    width: 100%;
    text-align: center;
    justify-content: center;
    min-height: 52px;             /* großes, gut erreichbares Bezahl-Target */
}
/* Total ÜBER dem Pay-Button (gestapelt): nebeneinander liefen die beiden
   nowrap-Inhalte („GESAMT € 17,40" + „Bestellung abschließen →") auf der
   360px-Cart-Spalte und schmalen Phones zusammen breiter als der Platz —
   Flex schrumpft nowrap-Items nicht, der Button ragte rechts aus dem
   Fenster. Gestapelt trägt EIN Layout alle Breiten. */
.cust-shop .term-cart-total-and-pay {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}
.cust-shop .term-cart-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.cust-shop .term-cart-total-and-pay .term-cart-pay { width: 100%; min-width: 0; }
/* Leerer-Warenkorb-Hinweis lesbar zentriert. */
.cust-shop .term-cart-empty { text-align: center; padding: 16px; }

/* Konfigurator (terminal-konfig.php) — schon weitgehend responsiv; nur die
 * Vorschau-Spalte auf schmalen Screens stapeln und Touch-Targets entzerren. */
.cust-shop.tk-body .tk-hero,
.cust-shop .tk-hero {
    max-height: 200px;
}
/* Per-Option-Zähler (+/−): auf Touch-Geräten etwas größere Tap-Fläche. */
@media (pointer: coarse) {
    body.cust-shop .tk-cnt-btn { width: 38px; height: 38px; }
    body.cust-shop .tk-opt { padding: 10px 10px; }
}
/* Wizard-Bottom-Nav (tk-nav): sicheren Abstand zur Home-Indicator-Zone. */
body.cust-shop .tk-nav {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
body.cust-shop .tk-nav-back,
body.cust-shop .tk-nav-next,
body.cust-shop .tk-nav-add { min-height: 50px; }
/* Optionen brechen auf sehr schmalen Phones auf 1 Spalte (statt 220px-Min). */
@media (max-width: 380px) {
    body.cust-shop .tk-options { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────────────────────────────────
 * TABLET (≥ 600px)
 * ────────────────────────────────────────────────────────────────────────── */
@media (min-width: 600px) {
    .cust-shop .term-main {
        padding: 22px 24px 140px;
    }
    .cust-shop .term-product-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 16px;
    }
    .cust-shop .term-cart-list {
        max-height: 120px;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
 * DESKTOP (≥ 900px) — klassisches 3-Spalten-Shop-Layout:
 *   Sidebar links · Produkt-Mitte · Cart als rechte Sidebar.
 * ────────────────────────────────────────────────────────────────────────── */
@media (min-width: 900px) {
    .cust-shop .term-shell {
        display: grid;
        grid-template-columns: 260px 1fr 360px;
        grid-template-rows: 1fr;
        grid-template-areas: "sidebar main cart";
        min-height: 100vh;
        min-height: 100dvh;
    }

    /* Sidebar wieder vertikal links. */
    .cust-shop .term-sidebar {
        grid-area: sidebar;
        position: sticky;
        top: 0;
        align-self: start;
        height: 100vh;
        height: 100dvh;
        flex-direction: column;
        border-right: 1px solid #e6e6ec;
        border-bottom: 0;
        overflow-y: auto;
        box-shadow: none;
    }
    .cust-shop .term-brand,
    .cust-shop .term-sidebar-mcd .term-brand {
        text-align: left;
        padding: 20px 16px 12px;
    }
    .cust-shop .term-sidebar-mcd .term-brand img {
        margin: 0 0 6px !important;
        max-height: 72px !important;
    }
    .cust-shop .term-sysnav {
        flex-direction: column;
        overflow: visible;
        padding: 6px 8px 0;
    }
    .cust-shop .term-sysnav-item {
        flex-direction: row;
        width: 100%;
        min-width: 0;
        text-align: left;
    }
    .cust-shop .term-sidebar-divider { display: flex; }
    .cust-shop .term-marken {
        flex-direction: column;
        overflow: visible;
        padding: 4px 8px 12px;
    }
    .cust-shop .term-marke-btn,
    .cust-shop .term-kat-btn {
        width: 100%;
        border-radius: 12px;
        white-space: normal;
    }
    /* Aktives Kategorie-Panel als vertikale Liste (statt horizontaler Chips). */
    .cust-shop .term-nav-panel {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 4px;
        width: 100%;
    }
    .cust-shop .term-sidebar-foot { display: block; }

    /* Hauptbereich scrollt eigenständig. */
    .cust-shop .term-main {
        grid-area: main;
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
        padding: 28px 30px 40px;
    }
    .cust-shop .term-main-head h1 { font-size: 30px; }
    .cust-shop .term-product-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    /* Cart als rechte, eigenständig scrollende Sidebar (vertikal). */
    .cust-shop .term-cart {
        grid-area: cart;
        position: sticky;
        top: 0;
        align-self: start;
        height: 100vh;
        height: 100dvh;
        flex-direction: column;
        border-top: 0;
        border-left: 1px solid #e6e6ec;
        box-shadow: -6px 0 24px rgba(0,0,0,0.05);
        max-height: none;
    }
    .cust-shop .term-cart-list {
        flex: 1 1 auto;
        flex-direction: column;
        align-items: stretch;
        max-height: none;
        overflow-x: hidden;
        overflow-y: auto;
        white-space: normal;
        gap: 8px;
        padding: 16px;
    }
    /* Cart-Items im Sidebar-Modus volle Breite (kein Inline-Chip mehr). */
    .cust-shop .term-cart-item {
        display: flex;
        width: 100%;
        flex-shrink: 1;
    }
    .cust-shop .term-cart-item-name { white-space: normal; }
    .cust-shop .term-cart-summary {
        flex: 0 0 auto;
        border-top: 1px solid #ececf2;
        padding: 16px;
    }
}

/* ==========================================================================
 * SHOP-CHECKOUT-STEPS (body.cust-shop.sot-co-body)
 * --------------------------------------------------------------------------
 * Der Multi-Step-Wizard (terminal-checkout-shop.inc.php) ist für das 27"-SOT-
 * Kiosk-Display gebaut (terminal-checkout.css: 36px-H1, 240px-min-Buttons,
 * 220–320px-Tiles). Hier wird er für echte Geräte poliert: kleine Smartphones
 * (320–480), Querformat-Handys und Tablet/Desktop. Alles ADDITIV, höher
 * spezifiziert als terminal-checkout.css + die Inline-Styles der inc.php
 * (body.cust-shop … schlägt .sot-co-* / .shop-co-*).
 * Die Checkout-Seite trägt KEIN .cust-terminal → keine Kollision mit dem
 * Katalog-Layout oben. terminal-checkout.css bleibt unangetastet.
 * ========================================================================== */

/* ── Header kompakter + umbruchsicher ─────────────────────────────────────── */
body.cust-shop .sot-co-header {
    padding: 14px 16px 0;
}
body.cust-shop .sot-co-header-inner {
    flex-wrap: wrap;
    gap: 12px;
}
body.cust-shop .sot-co-logo {
    width: 44px;
    height: 44px;
}
body.cust-shop .sot-co-titles { min-width: 0; }
body.cust-shop .sot-co-titles strong { overflow-wrap: anywhere; }
body.cust-shop .sot-co-total {
    padding: 8px 14px;
}
body.cust-shop .sot-co-total strong { font-size: 22px; }
body.cust-shop .sot-co-member-badge { margin: 12px 16px 0; }

/* ── Main: lesbare Ränder, nicht überbreit auf Phones ─────────────────────── */
body.cust-shop .sot-co-main {
    padding: 24px 16px 48px;
}

/* ── Formularfelder: volle Breite, 16px (kein iOS-Zoom), große Touch-Targets ─ */
body.cust-shop .shop-co-field { margin: 0 0 14px; }
body.cust-shop .shop-co-field label {
    font-size: 13.5px;
    margin: 0 0 6px;
}
body.cust-shop .shop-co-field input,
body.cust-shop .shop-co-field select {
    width: 100%;
    box-sizing: border-box;
    font-size: 16px;             /* verhindert iOS-Auto-Zoom beim Fokus */
    min-height: 50px;            /* komfortables Touch-Target */
    padding: 13px 14px;
    border-radius: 12px;
}
/* select auf Mobile mit sichtbarem Chevron + voller Klickfläche */
body.cust-shop .shop-co-field select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b6b78' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
}
body.cust-shop .shop-co-field input:focus,
body.cust-shop .shop-co-field select:focus {
    box-shadow: 0 0 0 3px var(--accent-tint);
}

/* PLZ/Ort-Zeile: auf sehr schmalen Phones stapeln, sonst nebeneinander. */
body.cust-shop .shop-co-row2 {
    display: grid;
    grid-template-columns: minmax(96px, 1fr) 2fr;
    gap: 10px;
}
@media (max-width: 360px) {
    body.cust-shop .shop-co-row2 { grid-template-columns: 1fr; }
}

/* ── Member-Token-Karte ───────────────────────────────────────────────────── */
body.cust-shop .sot-co-member-card {
    padding: 22px 18px;
}

/* ── Zeitfenster (slot) ───────────────────────────────────────────────────── */
body.cust-shop .shop-co-slot-grid {
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 8px;
}
body.cust-shop .shop-co-slot-btn {
    min-height: 48px;
    padding: 12px 6px;
    border-radius: 12px;
    -webkit-tap-highlight-color: transparent;
}
body.cust-shop .shop-co-asap { min-height: 50px; }

/* ── Buttons: auf Phones volle Breite statt fixer 240px-Mindestbreite ─────── */
body.cust-shop .sot-co-actions,
body.cust-shop .sot-co-back {
    margin-top: 22px;
}
body.cust-shop .sot-co-actions .sot-co-btn,
body.cust-shop .sot-co-back .sot-co-btn {
    width: 100%;
    max-width: 420px;
}
body.cust-shop .sot-co-btn { min-height: 52px; }

/* ── Auswahl-Tiles (mode / pay): 1 Spalte auf Phones, niedriger, Touch-OK ──── */
body.cust-shop .sot-co-tiles {
    grid-template-columns: 1fr;
    gap: 14px;
}
body.cust-shop .sot-co-tile {
    min-height: auto;
    padding: 22px 20px;
    gap: 10px;
}
body.cust-shop .sot-co-tiles-pay .sot-co-tile { min-height: auto; padding: 22px 20px; }
body.cust-shop .sot-co-tile-icon { font-size: 44px; }
body.cust-shop .sot-co-tile-pay .sot-co-tile-icon { font-size: 48px; }
body.cust-shop .sot-co-tile-title { font-size: 21px; }
body.cust-shop .sot-co-tile-desc { font-size: 13.5px; }

/* ── H1/Subline auf Phones lesbar, nicht überdimensioniert ────────────────── */
body.cust-shop .sot-co-h1 { font-size: 26px; }
body.cust-shop .sot-co-sub { font-size: 15.5px; margin: 0 0 24px; }

/* ── Summary-Cart-Zeilen sauberer Umbruch ─────────────────────────────────── */
body.cust-shop .sot-co-cart-item { font-size: 16px; padding: 13px 14px; gap: 10px; }
body.cust-shop .sot-co-cart-name { min-width: 0; overflow-wrap: anywhere; }
body.cust-shop .sot-co-cart-total-row strong { font-size: 28px; }

/* ── Zelt/Tisch-Bestätigung (QR): kleinere Ziffer auf Phones ──────────────── */
body.cust-shop .sot-co-zelt-display { font-size: 44px; padding: 22px 12px; min-height: 84px; }

/* ──────────────────────────────────────────────────────────────────────────
 * TABLET / DESKTOP-Checkout (≥ 600px): Tiles wieder mehrspaltig, mehr Luft.
 * (terminal-checkout.css macht das selbst, hier nur konsistent halten + die
 *  oben gesetzten Phone-Overrides für größere Screens wieder lockern.)
 * ────────────────────────────────────────────────────────────────────────── */
@media (min-width: 600px) {
    body.cust-shop .sot-co-main { padding: 32px 24px 56px; }
    body.cust-shop .sot-co-h1 { font-size: 30px; }
    body.cust-shop .sot-co-sub { font-size: 16.5px; }
    body.cust-shop .sot-co-tiles { grid-template-columns: 1fr 1fr; gap: 18px; }
    body.cust-shop .sot-co-tile { min-height: 200px; padding: 32px 22px; }
    body.cust-shop .sot-co-tiles-pay .sot-co-tile { min-height: 240px; }
    body.cust-shop .sot-co-tile-icon { font-size: 56px; }
    body.cust-shop .sot-co-tile-pay .sot-co-tile-icon { font-size: 64px; }
    body.cust-shop .sot-co-tile-title { font-size: 24px; }
    /* Mode/Pay haben max. 2 sinnvolle Optionen → nicht überbreit zerren. */
    body.cust-shop .sot-co-tiles { max-width: 720px; margin-left: auto; margin-right: auto; }
    body.cust-shop .shop-co-slot-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
    /* Actions/Back wieder zentrierte Pillen statt full-width. */
    body.cust-shop .sot-co-actions .sot-co-btn,
    body.cust-shop .sot-co-back .sot-co-btn { width: auto; min-width: 240px; }
}

/* ──────────────────────────────────────────────────────────────────────────
 * QUERFORMAT-HANDY (kurze Höhe): Header + Tiles flach halten, damit der
 * Weiter-Button ohne langes Scrollen erreichbar bleibt.
 * ────────────────────────────────────────────────────────────────────────── */
@media (max-height: 480px) and (orientation: landscape) {
    body.cust-shop .sot-co-header { padding: 8px 16px 0; }
    body.cust-shop .sot-co-progress { padding: 8px 0 8px; }
    body.cust-shop .sot-co-main { padding: 16px 18px 32px; }
    body.cust-shop .sot-co-h1 { font-size: 22px; margin-bottom: 4px; }
    body.cust-shop .sot-co-sub { font-size: 14px; margin-bottom: 16px; }
    /* Tiles im Querformat nebeneinander + flach. */
    body.cust-shop .sot-co-tiles { grid-template-columns: 1fr 1fr; gap: 12px; }
    body.cust-shop .sot-co-tile,
    body.cust-shop .sot-co-tiles-pay .sot-co-tile {
        min-height: auto;
        padding: 16px 16px;
        flex-direction: row;
        text-align: left;
        flex-wrap: wrap;
        gap: 4px 12px;
        align-items: center;
    }
    body.cust-shop .sot-co-tile-icon,
    body.cust-shop .sot-co-tile-pay .sot-co-tile-icon { font-size: 34px; }
    body.cust-shop .sot-co-tile-title { font-size: 18px; flex: 1 1 auto; }
    body.cust-shop .sot-co-tile-desc { flex: 1 0 100%; }
    body.cust-shop .sot-co-btn { min-height: 46px; padding: 12px 28px; }
}

/* ════════════════════════════════════════════════════════════════════
   SHOP-STARTSEITE (shop-start.php) — „Jetzt bestellen" / „Anmelden"
   Mobile-first: eine zentrierte Karte, die auf jedem Format trägt —
   Smartphone hoch, Tablet, Desktop quer, niedrige Landscape-Fenster.
   ════════════════════════════════════════════════════════════════════ */
.shop-start {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100dvh - 140px);   /* Platz unter der cust-nav */
    padding: 20px 16px 44px;
}
.shop-start-card {
    width: 100%;
    max-width: 440px;
    background: #fff;
    border: 1px solid #e6e6ec;
    border-radius: 24px;
    padding: 32px 22px 26px;
    text-align: center;
    box-shadow: 0 16px 40px rgba(0,0,0,.07);
}
.shop-start-logo {
    width: 92px; height: 92px;
    margin: 0 auto 14px;
    border-radius: 22px;
    background: #f4f4f7;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.shop-start-logo img { width: 100%; height: 100%; object-fit: contain; }
.shop-start-logo-fallback { font-size: 42px; }
.shop-start-name {
    font-size: 26px; font-weight: 800; letter-spacing: -.01em;
    margin: 0 0 8px; text-wrap: balance;
}
.shop-start-badge {
    display: inline-block;
    font-size: 13px; font-weight: 600;
    padding: 4px 12px; border-radius: 999px;
}
.shop-start-badge.is-open   { background: #e8f5ec; color: #15803d; }
.shop-start-badge.is-closed { background: #fdecec; color: #b91c1c; }

.shop-start-actions {
    display: flex; flex-direction: column; gap: 12px;
    margin-top: 24px;
}
.shop-start-btn {
    display: block;
    padding: 16px 18px;                  /* ≥ 48px Touch-Ziel */
    border-radius: 14px;
    font-size: 17px; font-weight: 700;
    text-decoration: none;
    transition: transform .12s ease, box-shadow .12s ease;
}
.shop-start-btn:active { transform: scale(.98); }
.shop-start-btn.is-primary {
    background: var(--shop-accent, var(--accent, #6B21A8));
    color: #fff;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--shop-accent, var(--accent, #6B21A8)) 35%, transparent);
}
.shop-start-btn.is-secondary {
    background: #fff;
    color: var(--shop-accent, var(--accent, #6B21A8));
    border: 2px solid currentColor;
}
.shop-start-hint {
    font-size: 13px; color: #6b6b78; line-height: 1.5;
    margin: 2px 0 0;
}

/* Angemeldet: Punkte-Kachel statt Login-Knopf */
.shop-start-member {
    background: color-mix(in srgb, var(--shop-accent, var(--accent, #6B21A8)) 8%, #fff);
    border: 1px solid color-mix(in srgb, var(--shop-accent, var(--accent, #6B21A8)) 25%, #fff);
    border-radius: 14px;
    padding: 14px 16px;
    display: flex; flex-direction: column; gap: 4px;
}
.shop-start-member-hallo  { font-size: 14px; font-weight: 600; }
.shop-start-member-punkte { font-size: 15px; }
.shop-start-member-punkte strong { font-size: 22px; color: var(--shop-accent, var(--accent, #6B21A8)); }
.shop-start-member-link {
    font-size: 14px; font-weight: 600; margin-top: 4px;
    color: var(--shop-accent, var(--accent, #6B21A8));
}

/* Tablet / Desktop: mehr Luft, Karte bleibt kompakt lesbar */
@media (min-width: 600px) {
    .shop-start { padding: 44px 24px 64px; }
    .shop-start-card { padding: 40px 34px 32px; }
    .shop-start-name { font-size: 30px; }
}

/* Niedrige Querformate (Smartphone quer): Karte breiter, Logo neben Text,
   damit nichts unter die Falz rutscht */
@media (max-height: 520px) and (orientation: landscape) {
    .shop-start { min-height: 0; padding: 16px; align-items: flex-start; }
    .shop-start-card {
        max-width: 640px;
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 6px 20px;
        text-align: left;
        padding: 22px 24px;
    }
    .shop-start-logo { grid-row: 1 / 3; width: 72px; height: 72px; margin: 0; }
    .shop-start-name { font-size: 22px; margin: 0; }
    .shop-start-actions { grid-column: 1 / -1; margin-top: 14px; }
}