:root {
    /* PIVO & KOBAJE — German Beerhouse × Bavarian Grill × Football Pub
       Palette refined Stage 4A toward modern Munich beerhouse: matte coal
       backgrounds, cream text, brass-amber accents (less orange, more gold). */
    --bg-0: #0b0a09;
    --bg-1: #171311;
    --bg-2: #1d1814;
    --bg-3: #2a2218;
    --bg-brown: #2a1d14;
    --line: rgba(239, 231, 210, 0.08);
    --line-strong: rgba(239, 231, 210, 0.18);
    --text: #efe7d2;
    --text-dim: #a89272;
    --accent: #c6923a;
    --accent-2: #f0d28b;
    --accent-soft: rgba(198, 146, 58, 0.20);
    --accent-grill: #c0392b;
    --shadow: 0 24px 70px rgba(0, 0, 0, 0.62);
    --shadow-deep: 0 40px 110px rgba(0, 0, 0, 0.72);
    --radius: 22px;
    --radius-sm: 14px;

    --gap: clamp(18px, 1.6vw, 28px);
    --pad-x: clamp(18px, 1.6vw, 28px);
    --pad-y: clamp(18px, 1.6vw, 28px);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    min-height: 100%;
    width: 100%;
    background: var(--bg-0);
    color: var(--text);
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    user-select: none;
}

body {
    background:
        radial-gradient(1200px 600px at 15% -10%, rgba(198, 146, 58, 0.10), transparent 60%),
        radial-gradient(900px 500px at 110% 110%, rgba(198, 146, 58, 0.06), transparent 60%),
        linear-gradient(180deg, #0b0b0d 0%, #101014 100%);
    /* 100vh fallback first, then 100dvh so iOS/Android Chrome use the
       *dynamic* viewport (excludes the URL bar when it slides up) and don't
       leave a dark gap below the content when the bar collapses. */
    min-height: 100vh;
    min-height: 100dvh;
    /* iOS notch / Android edge: respect safe area when launched as PWA. */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}

/* ============ CONTAINER ============ */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 16px;
}

.kiosk {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    padding-top: 64px;
}

/* ============ TOP NAV ============ */
.top-nav {
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px;
    background: rgba(20, 20, 24, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 14px;
    border: 1px solid var(--line);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    max-width: calc(100vw - 28px);
    flex-wrap: wrap;
}

.top-nav-link {
    padding: 8px 12px;
    color: var(--text-dim);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    border-radius: 9px;
    text-decoration: none;
    transition: color 0.15s ease, background 0.15s ease;
    font-family: inherit;
}
.top-nav-link:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.05);
}

.top-nav-admin {
    padding: 6px 10px;
    color: rgba(168, 161, 149, 0.55);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-radius: 7px;
    text-decoration: none;
    margin-left: 4px;
    border-left: 1px solid var(--line);
}
.top-nav-admin:hover { color: var(--text-dim); }

/* Tablet-friendly Home/Back buttons (manual navigation only) */
.top-nav-back,
.top-nav-home {
    padding: 12px 18px;
    font-size: 14px;
    letter-spacing: 0.12em;
    color: var(--text);
    border-radius: 11px;
    cursor: pointer;
    min-width: 88px;
    text-align: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line);
}
.top-nav-back { background: rgba(255, 255, 255, 0.02); }
.top-nav-home {
    background: linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 100%);
    color: #1a1306;
    border-color: transparent;
    box-shadow: 0 3px 10px rgba(230, 162, 58, 0.28);
}
.top-nav-back:hover { background: rgba(255, 255, 255, 0.08); color: var(--text); }
.top-nav-home:hover { filter: brightness(1.05); color: #1a1306; }
.top-nav-back:active,
.top-nav-home:active { transform: scale(0.98); }

/* ============ LANGUAGE SWITCH ============ */
.lang-switch {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 100;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 3px;
    max-width: calc(100vw - 28px);
    background: rgba(20, 20, 24, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 5px;
    border-radius: 14px;
    border: 1px solid var(--line);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.lang-switch button {
    padding: 8px 10px;
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    border-radius: 9px;
    cursor: pointer;
    min-width: 40px;
    transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    font-family: inherit;
}

.lang-switch button:hover:not(.active) {
    color: var(--text);
    background: rgba(255, 255, 255, 0.05);
}

.lang-switch button.active {
    background: linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 100%);
    color: #1a1306;
    box-shadow: 0 3px 10px rgba(230, 162, 58, 0.3);
}

/* ============ 1. HERO + QR ============ */
.hero-row {
    display: grid;
    grid-template-columns: 1fr minmax(280px, 40%);
    gap: var(--gap);
    align-items: stretch;
}

.hero {
    position: relative;
    border-radius: var(--radius);
    padding: 22px 28px;
    background:
        linear-gradient(110deg, rgba(230, 162, 58, 0.18) 0%, rgba(230, 162, 58, 0) 55%),
        linear-gradient(180deg, #1b1b22 0%, #141419 100%);
    border: 1px solid var(--line);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    min-height: 140px;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(400px 180px at 85% 50%, rgba(255, 203, 107, 0.20), transparent 70%),
        radial-gradient(500px 250px at 10% 120%, rgba(230, 162, 58, 0.10), transparent 70%);
    pointer-events: none;
}

.hero-brand {
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 1;
}

.hero-logo {
    font-family: "Playfair Display", "Georgia", serif;
    font-weight: 700;
    font-size: clamp(30px, 3.4vw, 46px);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 60%, #b8651e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1;
    text-shadow:
        0 2px 0 rgba(0, 0, 0, 0.45),
        0 8px 22px rgba(230, 162, 58, 0.25);
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.6));
}

.hero-sub {
    font-size: clamp(11px, 1vw, 13px);
    letter-spacing: 0.3em;
    color: var(--text-dim);
    text-transform: uppercase;
}

.hero-slogan {
    font-family: "Playfair Display", "Georgia", serif;
    font-style: italic;
    font-size: clamp(16px, 1.4vw, 20px);
    color: var(--text);
    line-height: 1.35;
    z-index: 1;
    margin-top: 4px;
}

.hero-slogan .accent {
    color: var(--accent-2);
}

/* QR block */
.qr-block {
    border-radius: var(--radius);
    background: linear-gradient(180deg, #1d1d24 0%, #14141a 100%);
    border: 1px solid var(--line);
    padding: 16px;
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 16px;
    align-items: center;
}

.qr-image {
    width: 120px;
    height: 120px;
    border-radius: 12px;
    background: #f4efe6;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qr-image svg { width: 100%; height: 100%; display: block; }
.qr-image img,
.qr-image .home-qr-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.qr-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.qr-title {
    font-size: clamp(13px, 1vw, 15px);
    font-weight: 600;
    color: var(--text);
    line-height: 1.35;
}

.qr-desc {
    font-size: clamp(11px, 0.85vw, 12px);
    color: var(--text-dim);
    line-height: 1.4;
}

.qr-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.qr-btn {
    flex: 1 1 auto;
    padding: 10px 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    border-radius: 10px;
    text-transform: uppercase;
    font-size: 11px;
    text-align: center;
    border: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    font-family: inherit;
    text-decoration: none;
    display: inline-block;
    line-height: 1.2;
    white-space: nowrap;
}

.qr-btn-primary {
    background: linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 100%);
    color: #1a1306;
}
.qr-btn-ghost {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--line-strong);
}
.qr-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--accent);
    color: var(--accent-2);
}

.qr-btn-install {
    background: transparent;
    color: var(--accent-2);
    border: 1px solid var(--accent);
}
.qr-btn-install::before {
    content: "↓ ";
    font-weight: 700;
    margin-right: 2px;
}
.qr-btn-install:hover {
    background: rgba(230, 162, 58, 0.12);
    color: #fff;
}
.qr-btn-install[hidden] { display: none; }

.qr-btn:active {
    transform: scale(0.97);
    box-shadow: 0 4px 14px rgba(230, 162, 58, 0.4);
}

/* ============ 2. MAIN CATEGORY CARDS ============ */
.categories-row {
    position: relative;
}

/* TEMP: small service admin entry in the top-right corner of the
   breakfast/lunch/dinner row. Intentionally low-key — remove once a
   proper admin auth surface lands. */
.admin-entry-temp {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: rgba(230, 162, 58, 0.75);
    background: rgba(10, 8, 6, 0.55);
    border: 1px solid rgba(230, 162, 58, 0.45);
    border-radius: 6px;
    text-decoration: none;
    opacity: 0.55;
    z-index: 5;
    transition: opacity 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.admin-entry-temp:hover,
.admin-entry-temp:focus-visible {
    opacity: 1;
    color: var(--gold, #e6a23a);
    border-color: rgba(230, 162, 58, 0.9);
    outline: none;
}
.admin-entry-temp:active { transform: scale(0.96); }

.categories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap);
}

.cat-card {
    position: relative;
    border-radius: var(--radius);
    border: 1px solid var(--line-strong);
    overflow: hidden;
    cursor: pointer;
    background: var(--bg-2);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 28px;
    min-height: 220px;
    box-shadow: var(--shadow), inset 0 1px 0 rgba(243, 231, 207, 0.06);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.cat-card:hover {
    border-color: var(--accent);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 203, 107, 0.18);
}

.cat-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
    z-index: 0;
}

.cat-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(10, 8, 7, 0.20) 0%, rgba(10, 8, 7, 0.55) 45%, rgba(10, 8, 7, 0.94) 100%),
        radial-gradient(120% 80% at 50% 110%, rgba(184, 101, 30, 0.18), transparent 60%);
    z-index: 1;
}

.cat-card:hover::before, .cat-card:active::before { transform: scale(1.05); }
.cat-card:active { transform: scale(0.985); }

.cat-breakfast::before {
    background-image: image-set(url('/static/images/scenario/scenario_breakfast.webp') type('image/webp'), url('/static/images/scenario/scenario_breakfast.jpg'));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: none;
}

/* When the article carries an inline --cat-bg-img CSS var (set in index.html
   with ASSET_VERSION-busted URLs), prefer it over the static URLs above —
   this lets a fresh deploy invalidate any stale cached scenario photo on
   the user's device. Lunch/dinner go through the same path. */
.cat-card[style*="--cat-bg-img"]::before {
    background-image: var(--cat-bg-img) !important;
}

.cat-lunch::before {
    background-image: image-set(url('/static/images/scenario/scenario_lunch.webp') type('image/webp'), url('/static/images/scenario/scenario_lunch.jpg'));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: none;
}

.cat-dinner::before {
    background-image: image-set(url('/static/images/scenario/scenario_dinner.webp') type('image/webp'), url('/static/images/scenario/scenario_dinner.jpg'));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: none;
}

/* Smart-entry card variants (home page under hero). Scoped via
   body.page-home so nothing else that reuses .cat-card is affected. */
body.page-home .categories--smart {
    grid-template-columns: repeat(4, 1fr);
}
body.page-home .categories--smart .cat-card { min-height: 200px; }

.cat-quick::before {
    background:
        radial-gradient(600px 300px at 25% 20%, rgba(240, 180, 100, 0.38), transparent 60%),
        linear-gradient(135deg, #2a1e12 0%, #120d08 100%);
}
.cat-chef::before {
    background:
        radial-gradient(600px 300px at 70% 30%, rgba(230, 162, 58, 0.5), transparent 60%),
        linear-gradient(135deg, #2a1d10 0%, #14100a 100%);
}
.cat-wine-dinner::before {
    background:
        radial-gradient(600px 300px at 40% 70%, rgba(150, 50, 70, 0.4), transparent 60%),
        linear-gradient(135deg, #251018 0%, #120910 100%);
}
.cat-popular::before {
    background:
        radial-gradient(600px 300px at 60% 30%, rgba(232, 194, 116, 0.25), transparent 60%),
        linear-gradient(135deg, #1f1810 0%, #0e0a06 100%);
}

@media (max-width: 900px) {
    body.page-home .categories--smart { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    body.page-home .categories--smart { grid-template-columns: 1fr; }
}

.cat-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cat-badge {
    align-self: flex-start;
    padding: 6px 12px;
    background: rgba(230, 162, 58, 0.15);
    border: 1px solid rgba(230, 162, 58, 0.35);
    border-radius: 20px;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent-2);
    margin-bottom: 8px;
}

.cat-title {
    font-family: "Playfair Display", "Georgia", serif;
    font-size: clamp(28px, 2.8vw, 40px);
    font-weight: 700;
    color: #fff;
    line-height: 1.05;
}

.cat-sub {
    font-size: clamp(13px, 1vw, 15px);
    color: rgba(244, 239, 230, 0.75);
    line-height: 1.4;
    max-width: 90%;
}

.cat-arrow {
    position: absolute;
    bottom: 24px;
    right: 24px;
    z-index: 2;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.cat-arrow svg { width: 20px; height: 20px; stroke: var(--accent-2); }

/* ============ 3. TIME / DAY SELECTOR ============ */
.selector {
    display: flex;
    gap: 8px;
    padding: 8px;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow-x: auto;
    scrollbar-width: none;
}

.selector::-webkit-scrollbar { display: none; }

.selector-chip {
    flex: 1 1 0;
    min-width: 110px;
    padding: 12px 16px;
    border-radius: 10px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-dim);
    font-size: clamp(13px, 0.95vw, 15px);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    white-space: nowrap;
    font-family: inherit;
}

.selector-chip:hover { color: var(--text); background: rgba(255, 255, 255, 0.03); }

.selector-chip.active {
    background: linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 100%);
    color: #1a1306;
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(230, 162, 58, 0.25);
}

/* ============ 3b. FEATURE CARDS (CHEF DISH / DISH OF THE DAY) ============
   Dynamically hydrated by kiosk.js — glass cards that point at a real
   /menu?section=…&item=… deep link. Sit between the category grid and
   the static promo section. Gold rim on chef, neutral rim on day. */
.features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap);
}

.feature-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-radius: 20px;
    padding: 22px 22px 20px;
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(232, 194, 116, 0.08), transparent 60%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.4) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    cursor: pointer;
    transition:
        transform 0.25s cubic-bezier(0.22, 0.9, 0.3, 1),
        box-shadow 0.25s ease,
        border-color 0.25s ease;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 10px 28px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    min-height: 140px;
}

.feature-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 16px 40px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(232, 194, 116, 0.16);
}

.feature-card:focus-visible {
    outline: 2px solid rgba(232, 194, 116, 0.75);
    outline-offset: 3px;
}

.feature-card--chef {
    border: 1px solid rgba(232, 194, 116, 0.4);
}
.feature-card--chef:hover {
    border-color: rgba(232, 194, 116, 0.6);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 16px 40px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(232, 194, 116, 0.3),
        0 0 28px rgba(232, 194, 116, 0.15);
}

.feature-card--day {
    border: 1px solid rgba(255, 255, 255, 0.15);
}
.feature-card--day:hover {
    border-color: rgba(255, 255, 255, 0.28);
}

.feature-label {
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0.65;
    color: var(--accent-2, #ffcb6b);
}

.feature-card--day .feature-label {
    color: var(--text-dim, rgba(255, 255, 255, 0.6));
}

.feature-title {
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 600;
    line-height: 1.15;
    color: var(--text, #f4efe6);
    letter-spacing: 0.005em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.feature-footer {
    margin-top: auto;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-top: 4px;
}

.feature-price {
    font-family: "Inter", sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--accent-2, #ffcb6b);
    letter-spacing: 0.01em;
}

.feature-action {
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.7;
    color: var(--text, #f4efe6);
}

.feature-card:hover .feature-action { opacity: 1; }

.feature-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cta-reserve {
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-2, #ffcb6b);
    text-decoration: none;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

.cta-reserve:hover {
    opacity: 1;
}

@media (max-width: 768px) {
    .features { grid-template-columns: 1fr; }
}

/* ============ WINE SHOWCASE (homepage) ============
   Compact 3-card rotating wine display that replaces the old
   single wine category tile on the homepage. Cards are populated
   and cross-faded by /static/js/wine_showcase.js every ~6s. */
.wine-showcase {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wine-showcase-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.wine-showcase-title {
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(18px, 1.7vw, 24px);
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--text, #f4efe6);
    margin: 0;
}

.wine-track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    transition: opacity 0.35s ease;
}

.wine-track.is-fading {
    opacity: 0;
}

.wine-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(232, 194, 116, 0.12);
    background:
        radial-gradient(160% 90% at 100% 0%, rgba(232, 194, 116, 0.05), transparent 60%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(0, 0, 0, 0.28) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    min-height: 84px;
}

.wine-card .wine-title {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text, #f4efe6);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wine-card .wine-meta {
    font-family: "Inter", sans-serif;
    font-size: 11px;
    color: var(--text-dim, rgba(255, 255, 255, 0.6));
    letter-spacing: 0.02em;
}

.wine-card .wine-price {
    margin-top: auto;
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-2, #ffcb6b);
    letter-spacing: 0.01em;
}

.wine-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
}

.wine-action {
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--text, #f4efe6);
    opacity: 0.75;
    transition: opacity 0.2s ease;
}

.wine-action:hover { opacity: 1; }

.wine-action--primary {
    color: var(--accent-2, #ffcb6b);
    opacity: 0.9;
}

@media (max-width: 768px) {
    .wine-track { grid-template-columns: 1fr; }
}

/* ============ 4. PROMO (CHEF / DAY) ============ */
.promos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap);
}

.promo {
    position: relative;
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 16px;
    padding: 16px;
    border-radius: var(--radius);
    background: linear-gradient(180deg, #1d1d24 0%, #141419 100%);
    border: 1px solid var(--line);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.promo:hover { border-color: var(--line-strong); }
.promo:active { transform: scale(0.99); }

.promo-image {
    width: 100%;
    height: 100%;
    min-height: 120px;
    border-radius: var(--radius-sm);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* When a real photo is provided via inline `style="background-image: url(...)"`,
   render the whole dish without cropping. The CSS gradient fallback (set on
   .page-menu / .page-wine .promo-image) keeps `cover` so the gradient still
   fills the box; only real photos switch to `contain`. */
body.page-menu .promo-image[style*="url("],
body.page-wine .promo-image[style*="url("] {
    background-size: contain;
}

.promo-chef .promo-image {
    background:
        radial-gradient(circle at 50% 40%, rgba(255, 203, 107, 0.5), transparent 70%),
        linear-gradient(135deg, #2a1d10 0%, #120b06 100%);
}

.promo-day .promo-image {
    background:
        radial-gradient(circle at 50% 40%, rgba(180, 110, 90, 0.55), transparent 70%),
        linear-gradient(135deg, #2a1612 0%, #120807 100%);
}

.promo-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
    min-width: 0;
}

.promo-tag {
    align-self: flex-start;
    font-size: 10px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--accent-2);
    padding: 4px 10px;
    border: 1px solid rgba(230, 162, 58, 0.35);
    background: rgba(230, 162, 58, 0.1);
    border-radius: 20px;
}

.promo-title {
    font-family: "Playfair Display", "Georgia", serif;
    font-size: clamp(18px, 1.6vw, 24px);
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
}

.promo-desc {
    font-size: clamp(12px, 0.85vw, 13px);
    color: var(--text-dim);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.promo-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 4px;
}

.promo-price {
    font-size: clamp(18px, 1.4vw, 22px);
    font-weight: 700;
    color: var(--accent-2);
    letter-spacing: 0.02em;
}

.promo-cta {
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 6px;
}

.promo-cta svg { stroke: var(--accent-2); }

/* ============ TABLET / VERTICAL (max-width: 900px) ============ */
@media (max-width: 900px) {
    .container { padding: 12px; }
    .kiosk { padding-top: 96px; gap: 18px; }

    .lang-switch { top: 12px; right: 12px; padding: 5px; gap: 3px; }
    .lang-switch button { padding: 10px 12px; font-size: 13px; min-width: 44px; }

    .top-nav { top: 12px; left: 12px; padding: 5px; }
    .top-nav-link { padding: 9px 10px; font-size: 12px; }
    .top-nav-back,
    .top-nav-home { padding: 11px 14px; font-size: 13px; min-width: 78px; }

    /* stack hero + QR */
    .hero-row { grid-template-columns: 1fr; }

    .hero { padding: 20px; min-height: auto; }
    .hero-logo { font-size: 34px; }
    .hero-sub { font-size: 12px; }
    .hero-slogan { font-size: 18px; }

    .qr-block { grid-template-columns: 110px 1fr; padding: 14px; }
    .qr-image { width: 110px; height: 110px; }
    .qr-title { font-size: 16px; }
    .qr-desc { font-size: 13px; }
    .qr-btn { padding: 14px 16px; font-size: 14px; }

    /* categories stack */
    .categories { grid-template-columns: 1fr; }
    .cat-card { min-height: 160px; padding: 22px; }
    .cat-title { font-size: 30px; }
    .cat-sub { font-size: 15px; }
    .cat-badge { font-size: 11px; }
    .cat-arrow { width: 48px; height: 48px; bottom: 18px; right: 18px; }

    /* selector: allow horizontal scroll, equal-ish chips */
    .selector { padding: 6px; gap: 6px; }
    .selector-chip { min-width: 130px; padding: 14px 16px; font-size: 14px; }

    /* promos stack */
    .promos { grid-template-columns: 1fr; }
    .promo { grid-template-columns: 120px 1fr; padding: 14px; }
    .promo-image { min-height: 110px; }
    .promo-title { font-size: 20px; }
    .promo-desc { font-size: 13px; }
    .promo-price { font-size: 20px; }
    .promo-cta { font-size: 12px; }
}

@media (max-width: 600px) {
    .kiosk { padding-top: 130px; }
    .lang-switch button { padding: 9px 10px; font-size: 12px; min-width: 40px; }
    .top-nav-link { padding: 7px 9px; font-size: 11px; }
    .top-nav-admin { padding: 5px 7px; font-size: 9px; }
}

@media (max-width: 480px) {
    .promo { grid-template-columns: 90px 1fr; }
    .promo-image { min-height: 90px; }
    .hero-logo { font-size: 28px; }
    .kiosk { padding-top: 110px; }
}

/* ============================================================
   CATALOG PAGES (body.page-menu, body.page-wine) — unified top
   bar, wide layout, tablet-friendly card grid. Scoped so
   index/reservation/admin are untouched.
   ============================================================ */
body.page-menu .container,
body.page-wine .container {
    max-width: 1480px;
    padding: 18px 24px 32px;
}
body.page-menu .kiosk,
body.page-wine .kiosk {
    padding-top: 20px;
    gap: clamp(22px, 2.2vw, 36px);
}

/* Hide legacy hero-row (these pages have their own topbar title) */
body.page-menu .hero-row,
body.page-wine .hero-row { display: none; }

/* --- Top bar in document flow (no floating) --- */
body.page-menu .page-topbar,
body.page-wine .page-topbar {
    position: sticky;
    top: 0;
    z-index: 120;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;
    padding: 14px clamp(18px, 2vw, 28px);
    background: linear-gradient(180deg, rgba(15,15,18,0.96) 0%, rgba(15,15,18,0.82) 100%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}

body.page-menu .topbar-nav,
body.page-wine .topbar-nav {
    display: flex;
    align-items: center;
    gap: 12px;
}

body.page-menu .topbar-btn,
body.page-wine .topbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 112px;
    min-height: 52px;
    padding: 14px 22px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 14px;
    cursor: pointer;
    transition: transform 0.12s ease, filter 0.15s ease, background 0.15s ease;
}
body.page-menu .topbar-btn-back,
body.page-wine .topbar-btn-back {
    color: var(--text);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--line-strong);
}
body.page-menu .topbar-btn-back:hover,
body.page-wine .topbar-btn-back:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text);
}
body.page-menu .topbar-btn-home,
body.page-wine .topbar-btn-home {
    color: #1a1306;
    background: linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 100%);
    border: 1px solid transparent;
    box-shadow: 0 6px 18px rgba(230, 162, 58, 0.35);
}
body.page-menu .topbar-btn-home:hover,
body.page-wine .topbar-btn-home:hover { filter: brightness(1.06); }
body.page-menu .topbar-btn:active,
body.page-wine .topbar-btn:active { transform: scale(0.97); }

body.page-menu .topbar-center,
body.page-wine .topbar-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-align: center;
    min-width: 0;
}
body.page-menu .topbar-sub,
body.page-wine .topbar-sub {
    font-size: clamp(10px, 0.85vw, 12px);
    letter-spacing: 0.3em;
    color: var(--text-dim);
    text-transform: uppercase;
}
body.page-menu .topbar-brand,
body.page-wine .topbar-brand {
    font-family: "Playfair Display", "Georgia", serif;
    font-weight: 700;
    font-size: clamp(22px, 2.2vw, 30px);
    letter-spacing: 0.08em;
    background: linear-gradient(180deg, #ffcb6b 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1;
}
body.page-menu .topbar-page,
body.page-wine .topbar-page {
    font-family: "Playfair Display", "Georgia", serif;
    font-style: italic;
    font-size: clamp(13px, 1.1vw, 16px);
    color: var(--text);
    letter-spacing: 0.05em;
    margin-top: 2px;
}

/* Lang switch docked into the topbar (no fixed positioning) */
body.page-menu .topbar-lang,
body.page-wine .topbar-lang {
    position: static;
    top: auto;
    right: auto;
    padding: 4px;
    background: rgba(20, 20, 24, 0.6);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    max-width: none;
    justify-content: flex-end;
}
body.page-menu .topbar-lang button,
body.page-wine .topbar-lang button {
    padding: 10px 12px;
    min-width: 44px;
    font-size: 13px;
    font-weight: 700;
}

/* --- Content: wider, bigger, readable --- */
body.page-menu .menu-section,
body.page-wine .menu-section { margin-top: 6px; }

/* ---- /menu HUB GRID (top-level 15 cards, drinks subhubs, wine subhubs) ----
   Scoped to body.page-menu only so the home page (body.page-home) and any
   other surface that reuses .cat-card keeps its current visual weight.
   Hard 4-column kiosk grid — the cards are sized so a 1024px tablet still
   fits four across without dropping rows. Mobile breakpoints stay only as
   a small-screen safety net (<560px). */
body.page-menu .categories {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
body.page-menu .cat-card {
    min-height: clamp(96px, 9vw, 140px);
    padding: clamp(12px, 1vw, 18px);
    border-radius: 14px;
}
body.page-menu .cat-card .cat-title {
    font-family: "Playfair Display", "Georgia", serif;
    font-size: clamp(15px, 1.35vw, 20px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.01em;
    margin: 0;
    padding-bottom: 0;
    border-bottom: none;
}
body.page-menu .cat-card .cat-sub {
    font-size: clamp(10px, 0.75vw, 12px);
    opacity: 0.7;
    margin-top: 2px;
}
body.page-menu .cat-card .cat-arrow {
    width: 28px;
    height: 28px;
    bottom: 10px;
    right: 10px;
}
body.page-menu .cat-card .cat-arrow svg { width: 12px; height: 12px; }

/* ---- RICH TOP-LEVEL HUB CARDS (body.page-menu .categories--rich) ---------
   Adds a prominent photo area + short description to each top-level card,
   but keeps the 4-in-a-row compact grid. Scoped via .categories--rich so
   sub-hubs (drinks / wine_list drill-down) keep their original compact look.

   Layout per card:
     [  .cat-photo — portrait-ish photo, ~10:15 feel  ]
     [  .cat-body  — title, short description, count  ]

   The photo either uses a real image (inline background-image set from
   hub.image) or, when hub.image is empty, falls back to a per-id CSS
   gradient theme defined below (keyed on [data-hub="…"]). This means the
   cards look atmospheric right now without any uploaded photos, and
   swapping in real images from a future admin surface is a single data
   field change — no markup change required. */
/* Hub cards hard-locked for Samsung Tab A9+ (1280×800) landscape: 4×4 = 16
   cards fit in one screen without scroll. Each card is exactly 160 px tall
   (photo 80 + body 80) so the whole grid is 4*160 + 3*8 = 664 px plus a
   compact top-bar. Visual language (luxury gradients, gold sub-label,
   Playfair title) is preserved — only sizes shrink. */
body.page-menu .categories--rich { gap: 8px; }

body.page-menu .categories--rich .cat-card {
    padding: 0;
    overflow: hidden;
    justify-content: flex-start;
    height: 160px;
    min-height: 160px;
    max-height: 160px;
    border-radius: 12px;
    background: linear-gradient(180deg, #1d1d24 0%, #14141a 100%);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
body.page-menu .categories--rich .cat-card::before,
body.page-menu .categories--rich .cat-card::after { content: none; }
body.page-menu .categories--rich .cat-card:hover {
    border-color: var(--line-strong);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.36);
}

body.page-menu .categories--rich .cat-photo {
    position: relative;
    width: 100%;
    aspect-ratio: auto;
    height: 80px;
    min-height: 80px;
    max-height: 80px;
    background-color: #14141a;
    background-image:
        radial-gradient(420px 220px at 30% 30%, rgba(230, 162, 58, 0.16), transparent 70%),
        linear-gradient(160deg, #1d1810 0%, #0a0907 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    flex-shrink: 0;
    z-index: 0;
}
/* Real photo: contain so the dish fits whole inside the 80px strip. */
body.page-menu .categories--rich .cat-photo[style*="url("] {
    background-size: contain;
}
body.page-menu .categories--rich .cat-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.55) 100%);
    pointer-events: none;
}

body.page-menu .categories--rich .cat-body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 6px 10px 24px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

body.page-menu .categories--rich .cat-card .cat-title {
    font-size: 13px;
    line-height: 1.1;
    color: var(--text);
    text-shadow: none;
    margin: 0;
    padding: 0;
    border-bottom: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: calc(2 * 1.1em);
}

body.page-menu .categories--rich .cat-card .cat-desc {
    font-size: 10.5px;
    color: var(--text-dim);
    line-height: 1.2;
    letter-spacing: 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 1px;
    max-height: calc(1 * 1.2em);
}

body.page-menu .categories--rich .cat-card .cat-sub {
    font-size: 9px;
    color: var(--accent-2);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.85;
    margin-top: auto;
    padding-top: 1px;
    line-height: 1;
}

body.page-menu .categories--rich .cat-card .cat-arrow {
    width: 20px;
    height: 20px;
    bottom: 6px;
    right: 6px;
    background: rgba(20, 20, 24, 0.78);
    border: 1px solid rgba(230, 162, 58, 0.35);
}
body.page-menu .categories--rich .cat-card .cat-arrow svg { width: 9px; height: 9px; }

/* Hub-only page chrome: trim container/kiosk top/bottom padding so the
   4×4 = 16 cards fit in a tablet viewport without scroll. Scoped by the
   page-menu--hubs body modifier so sub-hubs (drinks/wine drill-down),
   items view and item detail keep their own spacing. */
body.page-menu--hubs .container {
    padding-top: 8px;
    padding-bottom: 12px;
}
body.page-menu--hubs .kiosk {
    padding-top: 8px;
    gap: 8px;
}

/* Hub-photo fallback: a single subdued Apex placeholder (warm gold tint on
   near-black) shared by every category. Replaced the previous 16 colored
   per-hub gradients — those read as loud "плашки" rather than placeholders.
   When config/hub_cards.json supplies a real image, the inline style wins
   and the placeholder sits behind/aside (with `contain`) so the photo isn't
   cropped. */

/* Mobile-only safety net. Tablets/kiosks (>=560px) keep the 4-col grid. */
@media (max-width: 560px) {
    body.page-menu .categories { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    body.page-menu .cat-card { min-height: 92px; padding: 12px; }
    body.page-menu .categories--rich .cat-card { min-height: 200px; }
    body.page-menu .categories--rich .cat-body { padding: 10px 12px 34px; }
}
@media (max-width: 380px) {
    body.page-menu .categories { grid-template-columns: 1fr; }
}

/* ---- SECTION VIEW: hard-locked 5×4 grid (body.page-menu .promos--compact)
   Fixed pixel sizes, no adaptive breakpoints. Target: Samsung Tab A9+ in
   presentation mode — exactly 5 columns × up to 4 rows = 20 cards per
   screen. Card = photo + title + price only; description / ingredients /
   allergens stay in menu.json and render only on /menu?section=X&item=Y.
   Scoped via .promos--compact so the wine list (country/vintage/grapes)
   keeps its original wider grid.

   IMPORTANT: selectors stack both classes (e.g. `.promos.promos--compact`)
   so specificity beats the existing `body.page-menu .promos` rules that
   live further down in the file and would otherwise override these by
   source order. Same reasoning for the @media overrides that follow.
   Without the class stacking the grid silently falls back to 3/2 columns
   on tablet widths. */
body.page-menu .promos.promos--compact {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

body.page-menu .promo.promo--compact {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    gap: 0;
    height: 150px;
    min-height: 150px;
    max-height: 150px;
    padding: 6px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
    overflow: hidden;
}

body.page-menu .promo.promo--compact .promo-image {
    width: 100%;
    height: 78px;
    min-height: 78px;
    max-height: 78px;
    border-radius: 7px;
    margin-bottom: 6px;
}

body.page-menu .promo.promo--compact .promo-content {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    flex: 1;
    justify-content: space-between;
    overflow: hidden;
}

body.page-menu .promo.promo--compact .promo-title {
    font-size: 12px;
    line-height: 1.15;
    letter-spacing: 0;
    margin: 0;
    padding: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: calc(2 * 1.15em);
}

body.page-menu .promo.promo--compact .promo-footer {
    margin-top: 0;
    padding: 0;
    border-top: 0;
    justify-content: flex-end;
}

body.page-menu .promo.promo--compact .promo-price {
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
    font-weight: 800;
    color: var(--accent-2);
}

body.page-menu .promo.promo--compact .promo-price-old {
    text-decoration: line-through;
    color: var(--text-dim);
    margin-left: 4px;
    font-size: 10px;
    font-weight: 500;
}

/* Wine-list cards (.promo--wine) use the same crossed-out old-price look,
   sized to match the wine card's regular price token. Replaces the inline
   style="text-decoration:line-through;..." that lived on each card. */
.promo.promo--wine .promo-price-old {
    text-decoration: line-through;
    color: var(--text-dim);
    margin-left: 6px;
    font-size: 0.8em;
    font-weight: 500;
}

/* Tighten section header + top vertical padding ONLY inside the items view.
   Hubs, sub-hubs and item detail are scoped by a different body modifier
   (page-menu--items is set only when data.view == 'items'), so those
   surfaces keep their existing spacing untouched. */
body.page-menu--items .kiosk {
    padding-top: 10px;
    gap: 10px;
}
body.page-menu--items .menu-section {
    margin-top: 0;
}
body.page-menu--items .menu-section > .cat-title {
    font-size: 22px;
    line-height: 1.1;
    margin: 0 0 8px;
    padding-bottom: 6px;
}

/* ---- ITEM DETAIL (3rd level: /menu?section=X&item=Y) --------------------
   Single dish view. Reuses existing tokens (no new palette) and the same
   warm gold gradient as the item-list .promo-image for the photo fallback
   so swapping in a real image from item.image is a zero-markup change.
   Layout: photo on the left on wide screens, stacked on narrow. */
body.page-menu .item-view {
    margin-top: 8px;
}
body.page-menu .item-view-crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-dim);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: clamp(10px, 1vw, 14px);
}
body.page-menu .item-view-crumb-sep { opacity: 0.55; }
body.page-menu .item-view-grid {
    display: grid;
    grid-template-columns: minmax(260px, 38%) 1fr;
    gap: clamp(18px, 2vw, 32px);
    align-items: start;
    background: linear-gradient(180deg, #1d1d24 0%, #14141a 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: clamp(14px, 1.4vw, 22px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}
body.page-menu .item-view-photo {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-sm);
    background-color: #1a1a20;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image:
        radial-gradient(circle at 50% 40%, rgba(255, 203, 107, 0.35), transparent 70%),
        linear-gradient(135deg, #2a1d10 0%, #120b06 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
/* Real photo: fit whole dish, no crop. Gradient fallback keeps `cover`. */
body.page-menu .item-view-photo[style*="url("] {
    background-size: contain;
}
body.page-menu .item-view-photo--wine {
    background-image:
        radial-gradient(circle at 50% 35%, rgba(180, 60, 80, 0.45), transparent 70%),
        linear-gradient(135deg, #2a0e14 0%, #0e0408 100%);
}
body.page-menu .item-view-body {
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 0.8vw, 12px);
    min-width: 0;
}
body.page-menu .item-view-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
body.page-menu .item-view-title {
    font-family: "Playfair Display", "Georgia", serif;
    font-size: clamp(26px, 2.4vw, 38px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.01em;
    color: var(--text);
    margin: 0;
}
body.page-menu .item-view-desc {
    font-size: clamp(14px, 1.1vw, 17px);
    line-height: 1.5;
    color: var(--text);
    margin: 0;
}
body.page-menu .item-view-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 8px;
    border-top: 1px dashed var(--line);
}
body.page-menu .item-view-row-label {
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent-2);
    opacity: 0.85;
}
body.page-menu .item-view-row-value {
    font-size: clamp(13px, 1vw, 15px);
    line-height: 1.45;
    color: var(--text-dim);
}
body.page-menu .item-view-notes {
    font-style: italic;
    color: var(--text-dim);
    font-size: clamp(12px, 0.95vw, 14px);
    line-height: 1.4;
    margin: 0;
    opacity: 0.85;
}
body.page-menu .item-view-footer {
    margin-top: auto;
    padding-top: clamp(10px, 1vw, 14px);
    border-top: 1px solid var(--line);
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
}
body.page-menu .item-view-price {
    font-size: clamp(28px, 2.6vw, 40px);
    color: var(--accent-2);
    letter-spacing: 0.02em;
}
body.page-menu .item-view-price-old {
    text-decoration: line-through;
    color: var(--text-dim);
    margin-left: 10px;
    font-size: 0.6em;
    font-weight: 500;
}

@media (max-width: 900px) {
    body.page-menu .item-view-grid {
        grid-template-columns: 1fr;
    }
    body.page-menu .item-view-photo {
        aspect-ratio: 16 / 10;
    }
}

body.page-menu .cat-title,
body.page-wine .cat-title {
    font-family: "Playfair Display", "Georgia", serif;
    font-weight: 700;
    font-size: clamp(26px, 2.4vw, 36px);
    color: var(--text);
    letter-spacing: 0.02em;
    margin: 4px 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}

body.page-menu .promos,
body.page-wine .promos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: clamp(18px, 1.8vw, 28px);
}

body.page-menu .promo,
body.page-wine .promo {
    grid-template-columns: 160px 1fr;
    gap: 20px;
    padding: 20px;
    min-height: 180px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: linear-gradient(180deg, #1d1d24 0%, #14141a 100%);
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
body.page-menu .promo:hover,
body.page-wine .promo:hover {
    border-color: var(--line-strong);
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

body.page-menu .promo-image {
    min-height: 140px;
    background-image:
        radial-gradient(circle at 50% 40%, rgba(255, 203, 107, 0.35), transparent 70%),
        linear-gradient(135deg, #2a1d10 0%, #120b06 100%);
}

/* Wine-specific card image: deep burgundy mood */
body.page-wine .promo-image {
    min-height: 140px;
    background-image:
        radial-gradient(circle at 50% 35%, rgba(180, 60, 80, 0.45), transparent 70%),
        linear-gradient(135deg, #2a0e14 0%, #0e0408 100%);
}

body.page-menu .promo-title,
body.page-wine .promo-title {
    font-size: clamp(18px, 1.5vw, 22px);
    line-height: 1.2;
}
body.page-menu .promo-desc,
body.page-wine .promo-desc {
    font-size: clamp(13px, 1vw, 14px);
    -webkit-line-clamp: 3;
    line-clamp: 3;
    color: var(--text-dim);
}
body.page-menu .promo-price,
body.page-wine .promo-price {
    font-size: clamp(20px, 1.6vw, 26px);
    color: var(--accent-2);
}
body.page-menu .promo-tag,
body.page-wine .promo-tag {
    font-size: 11px;
    padding: 4px 10px;
}

/* --- Tablet portrait (<=900px) ---
   Tightens the stacked topbar so it stops eating ~25–30 % of the
   viewport. Measured before: 196 px (800×1280) / 250 px (412×915).
   After: ~140 px / ~150 px. We compress the center text block, drop
   nav-button height to a still-tappable 44 px, and pack the 9-lang
   row tighter so 412 px can fit it in a single row. */
@media (max-width: 900px) {
    body.page-menu .container,
    body.page-wine .container { padding: 12px 14px 28px; }
    body.page-menu .kiosk,
    body.page-wine .kiosk { padding-top: 12px; }
    body.page-menu .page-topbar,
    body.page-wine .page-topbar {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 8px 14px;
    }
    body.page-menu .topbar-nav,
    body.page-wine .topbar-nav { justify-content: center; gap: 8px; }
    body.page-menu .topbar-btn,
    body.page-wine .topbar-btn { min-width: 120px; min-height: 44px; padding: 10px 18px; font-size: 14px; }
    body.page-menu .topbar-center,
    body.page-wine .topbar-center { order: -1; gap: 0; }
    body.page-menu .topbar-sub,
    body.page-wine .topbar-sub { font-size: 9px; letter-spacing: 0.24em; }
    body.page-menu .topbar-brand,
    body.page-wine .topbar-brand { font-size: 22px; }
    body.page-menu .topbar-page,
    body.page-wine .topbar-page { font-size: 13px; margin-top: 1px; }
    body.page-menu .topbar-lang,
    body.page-wine .topbar-lang { justify-content: center; gap: 2px; padding: 3px; }
    body.page-menu .topbar-lang button,
    body.page-wine .topbar-lang button { padding: 8px 9px; min-width: 38px; min-height: 36px; font-size: 12px; }
    body.page-menu .promos,
    body.page-wine .promos { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
    body.page-menu .promo,
    body.page-wine .promo { grid-template-columns: 120px 1fr; padding: 16px; min-height: 150px; }
}

@media (max-width: 560px) {
    body.page-menu .promos,
    body.page-wine .promos { grid-template-columns: 1fr; }
    body.page-menu .promo,
    body.page-wine .promo { grid-template-columns: 90px 1fr; padding: 14px; }
    body.page-menu .promo-image,
    body.page-wine .promo-image { min-height: 90px; }
    body.page-menu .topbar-btn,
    body.page-wine .topbar-btn { min-width: 0; flex: 1 1 0; }
    body.page-menu .topbar-lang button,
    body.page-wine .topbar-lang button { padding: 7px 7px; min-width: 34px; font-size: 11px; }
}

/* ============================================================
   HOME SCREEN (body.page-home) — responsive kiosk UI.
   Breakpoints:
     MOBILE      <768px          → 1 col everywhere, stacked hero
     TABLET      768px – 1199px  → 2 cols (cat, reco, promo), stacked hero
     DESKTOP     ≥1200px         → 4 cat + 4 reco + 2 promo, 2-col hero
     KIOSK WIDE  ≥1600px         → same layout, roomier heights & gaps
   ============================================================ */

/* ----- BASE (tablet-first, 768–1199) — COMPACT KIOSK PANEL ----- */
body.page-home .container {
    max-width: 1760px;
    padding: 4px clamp(10px, 1.4vw, 20px) 4px;
}
body.page-home .kiosk {
    padding-top: 0;
    gap: clamp(4px, 0.6vw, 8px);
}

/* Header row — hero + QR + lang switch in one aligned strip */
body.page-home .hero-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(280px, 26vw, 360px) clamp(110px, 10vw, 150px);
    align-items: stretch;
    gap: clamp(6px, 0.8vw, 12px);
}
body.page-home .hero {
    padding: 10px 16px;
    min-height: 0;
    gap: 2px;
    min-width: 0;
}
body.page-home .hero-logo { font-size: clamp(18px, 2.2vw, 24px); }
body.page-home .hero-sub { font-size: 10px; letter-spacing: 0.24em; }
body.page-home .hero-slogan {
    font-size: clamp(11px, 1vw, 13px);
    line-height: 1.2;
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
body.page-home .qr-block {
    padding: 10px 12px;
    grid-template-columns: 120px 1fr;
    gap: 12px;
    align-self: stretch;
    align-items: center;
}
body.page-home .qr-image { width: 120px; height: 120px; padding: 6px; }
body.page-home .qr-info { gap: 6px; justify-content: center; }
body.page-home .qr-desc { display: none; }

/* Lang switch styled as part of the header composition, not floating */
body.page-home .lang-switch {
    position: static;
    top: auto;
    right: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: min-content;
    align-content: start;
    justify-content: stretch;
    gap: 4px;
    padding: 8px;
    max-width: none;
    border-radius: var(--radius-sm);
    background: linear-gradient(180deg, #1d1d24 0%, #14141a 100%);
    border: 1px solid var(--line);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
    align-self: stretch;
}
body.page-home .lang-switch button {
    padding: 7px 0;
    min-width: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    border-radius: 7px;
    line-height: 1.1;
    color: rgba(168, 161, 149, 0.85);
    transition: color 0.15s ease, background 0.15s ease, box-shadow 0.2s ease;
}
body.page-home .lang-switch button:hover:not(.active) {
    color: var(--text);
    background: rgba(255, 255, 255, 0.06);
}
body.page-home .lang-switch button.active {
    color: #1a1306;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(230, 162, 58, 0.4);
}
body.page-home .qr-title {
    font-size: 12px;
    line-height: 1.3;
    color: var(--text-dim);
    letter-spacing: 0.04em;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
body.page-home .qr-actions { margin-top: 0; gap: 4px; }
body.page-home .qr-btn {
    padding: 9px 14px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    box-shadow: 0 4px 14px rgba(230, 162, 58, 0.35);
}

/* Category cards — 4 in a row on tablet + desktop */
body.page-home .categories {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: auto;
    gap: clamp(8px, 1vw, 12px);
}
body.page-home .cat-card {
    min-height: clamp(80px, 7.6vw, 108px);
    padding: clamp(12px, 1.2vw, 20px);
    justify-content: center;
}
body.page-home .cat-title {
    font-size: clamp(17px, 1.6vw, 24px);
    line-height: 1.05;
    letter-spacing: 0.01em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
body.page-home .cat-sub {
    font-size: clamp(10px, 0.9vw, 12px);
    max-width: 78%;
    line-height: 1.22;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
body.page-home .cat-badge {
    font-size: 10px;
    padding: 3px 9px;
    margin-bottom: 2px;
}
body.page-home .cat-arrow {
    width: 34px;
    height: 34px;
    bottom: 10px;
    right: 10px;
}
body.page-home .cat-arrow svg { width: 16px; height: 16px; }

body.page-home .cat-wine::before {
    background:
        radial-gradient(600px 320px at 70% 30%, rgba(180, 40, 70, 0.55), transparent 65%),
        linear-gradient(135deg, #2a0e14 0%, #0f0408 100%);
}

/* Promos — 2 in a row on tablet, compact */
body.page-home .promos {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(8px, 1vw, 14px);
}
body.page-home .promo {
    grid-template-columns: minmax(90px, 30%) 1fr;
    gap: clamp(8px, 0.9vw, 14px);
    padding: clamp(10px, 1vw, 14px);
    min-height: clamp(94px, 10vw, 124px);
    border-radius: var(--radius);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}
body.page-home .promo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(600px 300px at 10% 0%, rgba(230, 162, 58, 0.12), transparent 70%);
    pointer-events: none;
    border-radius: inherit;
}
body.page-home .promo-image {
    min-height: clamp(72px, 8vw, 100px);
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
body.page-home .promo-tag {
    font-size: 9px;
    padding: 2px 8px;
    letter-spacing: 0.2em;
}
body.page-home .promo-title {
    font-size: clamp(13px, 1.3vw, 18px);
    line-height: 1.12;
    margin-top: 2px;
}
body.page-home .promo-desc {
    font-size: clamp(10px, 0.85vw, 12px);
    -webkit-line-clamp: 2;
    line-clamp: 2;
    line-height: 1.35;
    margin-top: 2px;
}
body.page-home .promo-price {
    font-size: clamp(18px, 1.6vw, 24px);
    font-weight: 800;
    text-shadow: 0 1px 6px rgba(255, 203, 107, 0.25);
}
body.page-home .promo-cta {
    font-size: 10px;
    letter-spacing: 0.18em;
}

/* Recommendations — 2 in a row on tablet, compact */
body.page-home .recos {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
body.page-home .recos-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}
body.page-home .recos-title {
    font-family: "Playfair Display", "Georgia", serif;
    font-weight: 700;
    font-size: clamp(16px, 1.6vw, 20px);
    letter-spacing: 0.02em;
    color: var(--text);
    line-height: 1.1;
    position: relative;
    padding-left: 12px;
}
body.page-home .recos-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12%;
    bottom: 12%;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 100%);
}
body.page-home .recos-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(8px, 1vw, 14px);
}
body.page-home .reco-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 6px;
    padding: clamp(10px, 1vw, 14px);
    border-radius: var(--radius-sm);
    background:
        radial-gradient(500px 220px at 100% 0%, rgba(230, 162, 58, 0.14), transparent 60%),
        linear-gradient(180deg, #1d1d24 0%, #14141a 100%);
    border: 1px solid var(--line);
    cursor: pointer;
    min-height: clamp(78px, 8vw, 100px);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    overflow: hidden;
}
body.page-home .reco-card:hover {
    border-color: var(--line-strong);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
body.page-home .reco-card:active { transform: scale(0.985); }
body.page-home .reco-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
body.page-home .reco-title {
    font-family: "Playfair Display", "Georgia", serif;
    font-weight: 700;
    font-size: clamp(16px, 1.35vw, 20px);
    color: #fff;
    line-height: 1.15;
    letter-spacing: 0.01em;
    /* Clamp long titles to 2 lines so cards don't grow unevenly when one
       dish name wraps past the others. align-items:stretch on the grid still
       equalises heights, but the title block stays predictable. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
body.page-home .reco-desc {
    font-size: clamp(11px, 0.9vw, 13px);
    color: rgba(244, 239, 230, 0.78);
    line-height: 1.32;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
body.page-home .reco-footer {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    border-top: 1px solid var(--line);
    padding-top: 6px;
}
body.page-home .reco-price {
    font-size: clamp(18px, 1.6vw, 24px);
    font-weight: 800;
    color: var(--accent-2);
    letter-spacing: 0.01em;
    text-shadow: 0 1px 6px rgba(255, 203, 107, 0.25);
}
body.page-home .reco-price-old {
    font-size: 13px;
    color: var(--text-dim);
    text-decoration: line-through;
    margin-left: 6px;
    font-weight: 500;
}

/* ----- MOBILE (<768px) ----- */
@media (max-width: 767px) {
    body.page-home .container { padding: 8px 10px 14px; }
    body.page-home .kiosk { padding-top: 0; gap: 10px; }

    body.page-home .hero-row { grid-template-columns: 1fr; gap: 8px; }
    body.page-home .lang-switch {
        grid-template-columns: repeat(5, 1fr);
    }

    body.page-home .categories { grid-template-columns: 1fr; gap: 10px; }
    body.page-home .cat-card { min-height: 110px; padding: 16px; }
    body.page-home .cat-title { font-size: 22px; }
    body.page-home .cat-sub { font-size: 12px; max-width: 92%; }
    body.page-home .cat-arrow { width: 38px; height: 38px; bottom: 12px; right: 12px; }

    body.page-home .recos-grid { grid-template-columns: 1fr; gap: 10px; }
    body.page-home .reco-card { min-height: 90px; padding: 12px; }
    body.page-home .reco-title { font-size: 15px; }
    body.page-home .reco-desc { font-size: 11px; }

    body.page-home .promos { grid-template-columns: 1fr; gap: 10px; }
    body.page-home .promo {
        grid-template-columns: 92px 1fr;
        min-height: 110px;
        padding: 12px;
        gap: 10px;
    }
    body.page-home .promo-image { min-height: 92px; }
    body.page-home .promo-title { font-size: 17px; }
    body.page-home .promo-desc { font-size: 12px; }
    body.page-home .promo-price { font-size: 18px; }
}

@media (max-width: 420px) {
    body.page-home .promo { grid-template-columns: 88px 1fr; padding: 12px; gap: 12px; }
    body.page-home .promo-image { min-height: 92px; }
    body.page-home .cat-title { font-size: 24px; }
}

/* ----- DESKTOP (≥1200px) — 4 in a row, 2-col hero, COMPACT ----- */
@media (min-width: 1200px) {
    body.page-home .container {
        padding: 6px clamp(18px, 1.4vw, 28px) 8px;
    }
    body.page-home .kiosk {
        padding-top: 0;
        gap: clamp(10px, 0.9vw, 16px);
    }

    body.page-home .hero-row {
        grid-template-columns: minmax(0, 1fr) clamp(290px, 24vw, 360px) clamp(130px, 10vw, 160px);
        gap: clamp(10px, 1vw, 16px);
    }
    body.page-home .hero { padding: 14px 20px; min-height: 0; gap: 4px; }
    body.page-home .hero-logo { font-size: clamp(22px, 1.8vw, 28px); }
    body.page-home .hero-sub { font-size: 10px; letter-spacing: 0.26em; }
    body.page-home .hero-slogan { font-size: clamp(12px, 1vw, 14px); line-height: 1.25; margin-top: 2px; }
    body.page-home .qr-block {
        padding: 10px;
        grid-template-columns: 130px 1fr;
        gap: 12px;
    }
    body.page-home .qr-image { width: 130px; height: 130px; padding: 6px; }
    body.page-home .qr-title { font-size: 12px; }
    body.page-home .qr-desc { font-size: 10px; line-height: 1.3; }
    body.page-home .qr-btn { padding: 7px 10px; font-size: 10px; }

    body.page-home .categories {
        gap: clamp(14px, 1.1vw, 20px);
    }
    body.page-home .cat-card {
        padding: clamp(14px, 1.2vw, 22px);
    }
    body.page-home .cat-sub {
        font-size: clamp(11px, 0.85vw, 13px);
        max-width: 100%;
    }
    body.page-home .cat-badge {
        font-size: 10px;
        padding: 4px 10px;
        margin-bottom: 4px;
    }
    body.page-home .cat-arrow { width: 40px; height: 40px; bottom: 14px; right: 14px; }
    body.page-home .cat-arrow svg { width: 18px; height: 18px; }

    body.page-home .recos-grid {
        gap: clamp(14px, 1.1vw, 20px);
    }
    body.page-home .reco-card {
        min-height: clamp(116px, 10vw, 140px);
        padding: clamp(12px, 1vw, 16px);
    }
    body.page-home .reco-title { font-size: clamp(14px, 1.1vw, 17px); }
    body.page-home .reco-desc {
        font-size: clamp(11px, 0.82vw, 12px);
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }
    body.page-home .reco-price { font-size: clamp(16px, 1.3vw, 20px); }

    body.page-home .promos {
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(18px, 1.4vw, 24px);
    }
    body.page-home .promo {
        grid-template-columns: minmax(160px, 32%) 1fr;
        min-height: clamp(140px, 12vw, 180px);
        padding: clamp(14px, 1.2vw, 20px);
        gap: clamp(12px, 1vw, 18px);
    }
    body.page-home .promo-image { min-height: clamp(112px, 10vw, 140px); border-radius: 12px; }
    body.page-home .promo-title { font-size: clamp(18px, 1.5vw, 22px); }
    body.page-home .promo-desc {
        font-size: clamp(11px, 0.9vw, 13px);
        -webkit-line-clamp: 2;
        line-clamp: 2;
        margin-top: 2px;
    }
    body.page-home .promo-price { font-size: clamp(18px, 1.5vw, 24px); }
    body.page-home .promo-tag { font-size: 10px; padding: 3px 10px; }
}

/* ----- KIOSK WIDE (≥1600px) — slightly bigger cards, keeps no-scroll ----- */
@media (min-width: 1600px) {
    body.page-home .container {
        max-width: 1800px;
        padding: 14px clamp(24px, 1.8vw, 40px) 22px;
    }
    body.page-home .kiosk { padding-top: 56px; gap: clamp(16px, 1.2vw, 22px); }

    body.page-home .categories { gap: clamp(16px, 1.2vw, 24px); }
    body.page-home .cat-card { padding: clamp(18px, 1.3vw, 26px); }

    body.page-home .recos-grid { gap: clamp(16px, 1.2vw, 24px); }
    body.page-home .reco-card { min-height: clamp(130px, 10vw, 160px); }

    body.page-home .promos { gap: clamp(20px, 1.4vw, 28px); }
    body.page-home .promo { min-height: clamp(160px, 13vw, 210px); padding: clamp(18px, 1.4vw, 26px); }
    body.page-home .promo-image { min-height: clamp(130px, 11vw, 170px); }
}

/* === FIX FOOTER FOR CHEF/DAY === */

.feature-card--chef .feature-footer,
.feature-card--day .feature-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;        /* прижать к низу карточки */
  padding-top: 8px;
}

.feature-card--chef .feature-price,
.feature-card--day .feature-price {
  font-size: 18px;
  line-height: 1;
  font-weight: 600;
}

/* правая зона действий */
.feature-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* "Подробнее" */
.feature-actions .feature-action {
  font-size: 12px;
  line-height: 1;
  opacity: 0.85;
}

/* CTA РЕЗЕРВАЦИИ — ЗАМЕТНЫЙ, НО НЕ КНОПКА */
.cta-reserve {
  font-size: 13px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffcb6b;          /* золотой акцент */
  text-decoration: none;
  opacity: 1;
}

.cta-reserve:hover {
  opacity: 1;
}

/* ITEM VIEW — bottom CTA row.
   Layout: [ Back ] [ See more ]        [ BOOK A TABLE ]
   Two compact ghost buttons on the left, one wide gold primary on the
   right. No auto-redirects — every link is user-driven. */
body.page-menu .item-view-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

body.page-menu .item-view-cta-btn {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  transition: background 0.2s ease, color 0.2s ease,
              border-color 0.2s ease, transform 0.15s ease;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

body.page-menu .item-view-cta-btn--ghost {
  font-size: 12px;
  padding: 12px 22px;
  color: rgba(244, 239, 230, 0.82);
  background: transparent;
  border: 1px solid var(--line-strong);
}

body.page-menu .item-view-cta-btn--ghost:hover {
  color: var(--text);
  border-color: var(--accent-2);
  background: rgba(255, 255, 255, 0.03);
}

body.page-menu .item-view-cta-btn--primary {
  font-size: 14px;
  padding: 16px 34px;
  color: #1a1410;
  background: linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 100%);
  border: 1px solid var(--accent);
  margin-left: auto;
  box-shadow: 0 10px 30px -14px rgba(230, 162, 58, 0.65);
}

body.page-menu .item-view-cta-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px -14px rgba(255, 203, 107, 0.75);
}

body.page-menu .item-view-cta-btn:active { transform: translateY(0); }

@media (max-width: 640px) {
  body.page-menu .item-view-cta {
    gap: 10px;
  }
  body.page-menu .item-view-cta-btn--primary {
    width: 100%;
    margin-left: 0;
    text-align: center;
    order: 3;
  }
  body.page-menu .item-view-cta-btn--ghost {
    flex: 1 1 0;
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* ---- Recommendations block, reused on /menu top-level (page-menu--hubs) ----
   Mirrors the body.page-home .recos* rules so the same markup looks the same
   on /menu as it does on /. No redesign — only enabling the component outside
   the home body scope. */
body.page-menu--hubs .recos { display: flex; flex-direction: column; gap: 8px; }
body.page-menu--hubs .recos-header {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
}
body.page-menu--hubs .recos-title {
    font-family: "Playfair Display", "Georgia", serif;
    font-weight: 700;
    font-size: clamp(16px, 1.6vw, 20px);
    letter-spacing: 0.02em;
    color: var(--text);
    line-height: 1.1;
    position: relative;
    padding-left: 12px;
}
body.page-menu--hubs .recos-title::before {
    content: "";
    position: absolute;
    left: 0; top: 12%; bottom: 12%;
    width: 3px; border-radius: 3px;
    background: linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 100%);
}
body.page-menu--hubs .recos-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(8px, 1vw, 14px);
}
body.page-menu--hubs .reco-card {
    position: relative;
    display: flex; flex-direction: column; justify-content: space-between; gap: 6px;
    padding: clamp(10px, 1vw, 14px);
    border-radius: var(--radius-sm);
    background:
        radial-gradient(500px 220px at 100% 0%, rgba(230, 162, 58, 0.14), transparent 60%),
        linear-gradient(180deg, #1d1d24 0%, #14141a 100%);
    border: 1px solid var(--line);
    cursor: pointer;
    min-height: clamp(78px, 8vw, 100px);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    overflow: hidden;
}
body.page-menu--hubs .reco-card:hover { border-color: var(--line-strong); box-shadow: 0 12px 30px rgba(0,0,0,0.35); }
body.page-menu--hubs .reco-card:active { transform: scale(0.985); }
body.page-menu--hubs .reco-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
body.page-menu--hubs .reco-title {
    font-family: "Playfair Display", "Georgia", serif;
    font-weight: 700; font-size: clamp(16px, 1.35vw, 20px);
    color: #fff; line-height: 1.15; letter-spacing: 0.01em;
}
body.page-menu--hubs .reco-desc {
    font-size: clamp(11px, 0.9vw, 13px);
    color: rgba(244, 239, 230, 0.78);
    line-height: 1.32;
    display: -webkit-box;
    -webkit-line-clamp: 1; line-clamp: 1;
    -webkit-box-orient: vertical; overflow: hidden;
}
body.page-menu--hubs .reco-footer {
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
    border-top: 1px solid var(--line); padding-top: 6px;
}
body.page-menu--hubs .reco-price {
    font-size: clamp(18px, 1.6vw, 24px); font-weight: 800;
    color: var(--accent-2); letter-spacing: 0.01em;
    text-shadow: 0 1px 6px rgba(255, 203, 107, 0.25);
}
body.page-menu--hubs .reco-price-old {
    font-size: 13px; color: var(--text-dim);
    text-decoration: line-through; margin-left: 6px; font-weight: 500;
}
@media (min-width: 1200px) {
    body.page-menu--hubs .recos-grid { gap: clamp(16px, 1.2vw, 24px); }
    body.page-menu--hubs .reco-card { min-height: clamp(130px, 10vw, 160px); }
}
@media (max-width: 767px) {
    body.page-menu--hubs .recos-grid { grid-template-columns: 1fr; gap: 10px; }
    body.page-menu--hubs .reco-card { min-height: 90px; padding: 12px; }
}

/* Reservation as a standalone action block under the category grid. Uses
   cat-card styling but a separate gradient so it reads as "action", not food. */
body.page-menu--hubs .cat-reservation {
    background:
        radial-gradient(420px 180px at 0% 0%, rgba(230, 162, 58, 0.22), transparent 60%),
        linear-gradient(180deg, #25202b 0%, #161218 100%);
    border: 1px solid var(--accent);
}

/* ---- Recommendations HERO layout (/menu top-level) ----
   First card spans the full row with bigger typography and a warmer
   gradient; the rest sit compact on a second row with N equal columns,
   where N comes from the template via --recos-small-cols. Visually the
   block now dominates the screen without touching any other component. */
body.page-menu--hubs .recos--hero {
    gap: clamp(10px, 1vw, 16px);
}
body.page-menu--hubs .recos-grid--hero {
    grid-template-columns: repeat(var(--recos-small-cols, 3), 1fr);
    grid-auto-rows: auto;
    gap: clamp(10px, 1vw, 16px);
}
body.page-menu--hubs .reco-card--featured {
    grid-column: 1 / -1;
    min-height: clamp(190px, 18vw, 260px);
    padding: clamp(22px, 2vw, 34px);
    border: 1px solid var(--accent);
    background:
        radial-gradient(800px 320px at 90% 0%, rgba(255, 203, 107, 0.22), transparent 60%),
        radial-gradient(600px 260px at 0% 100%, rgba(230, 162, 58, 0.18), transparent 65%),
        linear-gradient(180deg, #25202b 0%, #15131a 100%);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.42);
}
body.page-menu--hubs .reco-card--featured .reco-title {
    font-size: clamp(26px, 2.6vw, 40px);
    line-height: 1.1;
}
body.page-menu--hubs .reco-card--featured .reco-desc {
    font-size: clamp(13px, 1vw, 17px);
    -webkit-line-clamp: 2;
    line-clamp: 2;
    max-width: 72%;
}
body.page-menu--hubs .reco-card--featured .reco-price {
    font-size: clamp(28px, 2.6vw, 42px);
}
body.page-menu--hubs .reco-card--featured .reco-price-old {
    font-size: clamp(14px, 1vw, 18px);
}

/* Small row under the featured card — keep them compact. */
body.page-menu--hubs .recos-grid--hero .reco-card:not(.reco-card--featured) {
    min-height: clamp(90px, 8vw, 120px);
    padding: clamp(10px, 0.9vw, 14px);
}
body.page-menu--hubs .recos-grid--hero .reco-card:not(.reco-card--featured) .reco-title {
    font-size: clamp(14px, 1.1vw, 17px);
}
body.page-menu--hubs .recos-grid--hero .reco-card:not(.reco-card--featured) .reco-desc {
    font-size: clamp(11px, 0.82vw, 12px);
    -webkit-line-clamp: 1;
    line-clamp: 1;
}
body.page-menu--hubs .recos-grid--hero .reco-card:not(.reco-card--featured) .reco-price {
    font-size: clamp(16px, 1.3vw, 20px);
}

@media (max-width: 767px) {
    body.page-menu--hubs .recos-grid--hero { grid-template-columns: 1fr 1fr; }
    body.page-menu--hubs .reco-card--featured {
        grid-column: 1 / -1;
        min-height: 160px;
        padding: 18px;
    }
    body.page-menu--hubs .reco-card--featured .reco-title { font-size: 22px; }
    body.page-menu--hubs .reco-card--featured .reco-price { font-size: 24px; }
}

/* ============================================================================
   PREMIUM REDESIGN — public /menu visuals
   Switches list / hub / detail / wine cards from background-image divs to
   <img> elements with `object-fit: contain`. The photo sits inside a
   gold-tinted dark gradient frame so vertical and horizontal photos both
   read as a complete dish, never as a crop. Scoped tightly under
   body.page-menu and body.page-wine so admin/reservation/hall surfaces
   stay untouched.
   ============================================================================ */

/* ---- Shared photo frame (list cards + wine cards with a real image) ---- */
body.page-menu .promo-photo,
body.page-wine .promo-photo {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 18px;
    padding: 12px;
    background:
        radial-gradient(120% 90% at 30% 20%, rgba(255, 203, 107, 0.18), transparent 65%),
        radial-gradient(80% 70% at 80% 90%, rgba(120, 70, 40, 0.20), transparent 70%),
        linear-gradient(160deg, #1a160d 0%, #0a0807 100%);
    border: 1px solid rgba(230, 162, 58, 0.22);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4),
                0 8px 22px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}
body.page-menu .promo-photo::after,
body.page-wine .promo-photo::after {
    /* subtle inner vignette so contained photos blend into the frame */
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(120% 100% at 50% 50%, transparent 60%, rgba(0,0,0,0.35) 100%);
}
body.page-menu .promo-photo-img,
body.page-wine .promo-photo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: 10px;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
    position: relative;
    z-index: 1;
}

/* ---- List card (.promo--compact): photo top, content below ---- */
body.page-menu .promo.promo--compact {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0) 60%),
        linear-gradient(180deg, #1a1a20 0%, #131318 100%);
    border: 1px solid rgba(230, 162, 58, 0.14);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    height: 100%;
    min-height: 280px;
}
body.page-menu .promo.promo--compact:hover {
    border-color: rgba(230, 162, 58, 0.4);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
    transform: translateY(-1px);
}
body.page-menu .promo.promo--compact .promo-photo {
    aspect-ratio: 4 / 3;
    flex: 0 0 auto;
}
body.page-menu .promo.promo--compact .promo-content {
    padding: 4px 4px 6px;
    gap: 6px;
}
body.page-menu .promo.promo--compact .promo-title {
    font-family: "Playfair Display", "Georgia", serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: 0.005em;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
body.page-menu .promo.promo--compact .promo-footer {
    margin-top: auto;
    padding-top: 4px;
    border-top: 1px solid rgba(230, 162, 58, 0.10);
}
body.page-menu .promo.promo--compact .promo-price {
    font-family: "Playfair Display", "Georgia", serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--accent-2);
    letter-spacing: 0.02em;
}
/* Items grid: 4 columns on tablet/kiosk, taller cards */
body.page-menu--items .promos.promos--compact,
body.page-menu .promos.promos--compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    grid-auto-rows: 1fr;
}
@media (max-width: 900px) {
    body.page-menu--items .promos.promos--compact,
    body.page-menu .promos.promos--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    body.page-menu--items .promos.promos--compact,
    body.page-menu .promos.promos--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Disable the older background-image fallback rules now that <img> drives
   the photo. Empty-image state shows just the frame gradient. */
body.page-menu .promo.promo--compact .promo-image,
body.page-wine .promo .promo-image { display: none; }

/* ---- Hub photo: real category image (contained), or refined placeholder ---- */
body.page-menu .categories--rich .cat-photo {
    /* override earlier height: 80px — give photos breathing room */
    position: relative;
    width: 100%;
    height: 156px;
    min-height: 156px;
    max-height: 156px;
    aspect-ratio: auto;
    padding: 10px;
    border-radius: 16px 16px 8px 8px;
    background:
        radial-gradient(120% 100% at 30% 25%, rgba(255, 203, 107, 0.18), transparent 65%),
        radial-gradient(80% 80% at 80% 90%, rgba(120, 70, 40, 0.22), transparent 70%),
        linear-gradient(160deg, #1a160d 0%, #0a0807 100%);
    border-bottom: 1px solid rgba(230, 162, 58, 0.18);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}
body.page-menu .categories--rich .cat-photo::after { content: none; }
body.page-menu .categories--rich .cat-photo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: 10px;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5));
    position: relative;
    z-index: 1;
}
body.page-menu .categories--rich .cat-photo-mark {
    /* large embossed serif initial — visible only when no real photo */
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Playfair Display", "Georgia", serif;
    font-style: italic;
    font-weight: 700;
    font-size: 78px;
    line-height: 1;
    color: rgba(230, 162, 58, 0.32);
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    letter-spacing: -0.02em;
    pointer-events: none;
    z-index: 0;
}
body.page-menu .categories--rich .cat-photo:not(.cat-photo--empty) .cat-photo-mark {
    display: none;
}
body.page-menu .categories--rich .cat-card {
    min-height: 256px;
    border-radius: 16px;
    border-color: rgba(230, 162, 58, 0.16);
    background: linear-gradient(180deg, #1a1a20 0%, #131318 100%);
    overflow: hidden;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
body.page-menu .categories--rich .cat-card:hover {
    border-color: rgba(230, 162, 58, 0.4);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.5);
    transform: translateY(-1px);
}
body.page-menu .categories--rich .cat-body {
    padding: 12px 14px 28px;
    gap: 4px;
}
body.page-menu .categories--rich .cat-card .cat-title {
    font-family: "Playfair Display", "Georgia", serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.005em;
}
body.page-menu .categories--rich .cat-card .cat-desc {
    font-size: 11.5px;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    max-height: calc(2 * 1.2em);
}
body.page-menu .categories--rich .cat-card .cat-sub {
    font-size: 10px;
    color: rgba(230, 162, 58, 0.7);
}
body.page-menu .categories--rich .cat-card .cat-arrow {
    width: 24px;
    height: 24px;
    bottom: 8px;
    right: 8px;
}
body.page-menu .categories--rich .cat-card .cat-arrow svg { width: 11px; height: 11px; }

/* ---- Smart-entry tiles (Brzo / Od chefa / Večera uz vino / Popularno):
       on /menu, replace the colored ::before gradients with the same Apex
       frame so the top row stops looking like a tech panel. The home page
       (/) keeps its original colorful smart-entry palette via .page-home. */
body.page-menu--hubs .cat-quick::before,
body.page-menu--hubs .cat-chef::before,
body.page-menu--hubs .cat-wine-dinner::before,
body.page-menu--hubs .cat-popular::before {
    background:
        radial-gradient(420px 220px at 30% 25%, rgba(230, 162, 58, 0.18), transparent 70%),
        linear-gradient(160deg, #1a160c 0%, #0a0807 100%);
}
body.page-menu--hubs .cat-card:not(.categories--rich .cat-card) {
    border-radius: 16px;
    border-color: rgba(230, 162, 58, 0.16);
}
body.page-menu--hubs .categories:not(.categories--rich) .cat-card {
    min-height: 116px;
    padding: 18px 22px;
}
body.page-menu--hubs .categories:not(.categories--rich) .cat-title {
    font-family: "Playfair Display", "Georgia", serif;
    font-size: 18px;
    font-weight: 600;
}
body.page-menu--hubs .categories:not(.categories--rich) .cat-sub {
    font-size: 11px;
    color: var(--text-dim);
    max-width: 90%;
}
body.page-menu--hubs .categories:not(.categories--rich) .cat-arrow {
    width: 32px;
    height: 32px;
    bottom: 14px;
    right: 14px;
}

/* ---- Detail view photo: prominent premium frame, contained photo ---- */
body.page-menu .item-view-photo {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 22px;
    padding: 14px;
    /* override earlier background shorthand-ish chain */
    background:
        radial-gradient(120% 90% at 30% 20%, rgba(255, 203, 107, 0.22), transparent 65%),
        radial-gradient(80% 70% at 80% 90%, rgba(120, 70, 40, 0.25), transparent 70%),
        linear-gradient(160deg, #1c1810 0%, #0a0806 100%);
    border: 1px solid rgba(230, 162, 58, 0.25);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4),
                0 16px 36px rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    overflow: hidden;
}
body.page-menu .item-view-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: 14px;
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.55));
}
body.page-menu .item-view-photo--wine {
    background:
        radial-gradient(120% 90% at 30% 20%, rgba(220, 100, 130, 0.22), transparent 65%),
        radial-gradient(80% 70% at 80% 90%, rgba(110, 30, 50, 0.30), transparent 70%),
        linear-gradient(160deg, #1d0d12 0%, #0a0408 100%);
}

/* ---- Wine card (.promo--wine): premium typography when no image ---- */
body.page-menu .promo--wine,
body.page-wine .promo {
    background: linear-gradient(180deg, #1a1a20 0%, #131318 100%);
    border: 1px solid rgba(230, 162, 58, 0.18);
    border-radius: 18px;
    padding: 18px 20px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
body.page-menu .promo--wine:hover,
body.page-wine .promo:hover {
    border-color: rgba(230, 162, 58, 0.42);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}
body.page-menu .promo--wine.promo--no-image,
body.page-wine .promo.promo--no-image {
    /* No image: text-only premium card; left border serves as accent */
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px 24px;
    border-left: 3px solid rgba(230, 162, 58, 0.55);
}
body.page-menu .promo--wine .promo-title,
body.page-wine .promo .promo-title {
    font-family: "Playfair Display", "Georgia", serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.005em;
    line-height: 1.2;
    margin-bottom: 4px;
}
body.page-menu .promo--wine .promo-desc,
body.page-wine .promo .promo-desc {
    font-size: 12px;
    color: rgba(230, 162, 58, 0.78);
    letter-spacing: 0.04em;
    line-height: 1.4;
}
body.page-menu .promo--wine .promo-desc + .promo-desc,
body.page-wine .promo .promo-desc + .promo-desc {
    color: var(--text-dim);
    letter-spacing: 0;
}
body.page-menu .promo--wine .promo-footer,
body.page-wine .promo .promo-footer {
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(230, 162, 58, 0.14);
}
body.page-menu .promo--wine .promo-price,
body.page-wine .promo .promo-price {
    font-family: "Playfair Display", "Georgia", serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--accent-2);
}
/* When a wine has an image: photo left + text right grid */
body.page-menu .promo--wine:not(.promo--no-image),
body.page-wine .promo:not(.promo--no-image) {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 14px;
    align-items: center;
}
body.page-menu .promo--wine:not(.promo--no-image) .promo-photo,
body.page-wine .promo:not(.promo--no-image) .promo-photo {
    aspect-ratio: 3 / 4;
    width: 100%;
    height: 100%;
    padding: 8px;
    border-radius: 12px;
}
/* Wine grid: 3 cols on tablet/kiosk */
body.page-menu .promos:not(.promos--compact),
body.page-wine .promos:not(.promos--compact) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
@media (max-width: 900px) {
    body.page-menu .promos:not(.promos--compact),
    body.page-wine .promos:not(.promos--compact) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    body.page-menu .promos:not(.promos--compact),
    body.page-wine .promos:not(.promos--compact) { grid-template-columns: 1fr; }
}

/* Wine sub-hub group cards (Bijelo vino / Crveno vino / ...): they use
   .cat-card without --rich. Make them text-only premium tiles to match
   the wine list aesthetic. */
body.page-menu--subhubs .cat-card {
    min-height: 120px;
    padding: 22px 24px;
    border-radius: 18px;
    border: 1px solid rgba(230, 162, 58, 0.16);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0) 60%),
        linear-gradient(180deg, #1a1a20 0%, #131318 100%);
    border-left: 3px solid rgba(230, 162, 58, 0.45);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
body.page-menu--subhubs .cat-card:hover {
    border-color: rgba(230, 162, 58, 0.45);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}
body.page-menu--subhubs .cat-card .cat-title {
    font-family: "Playfair Display", "Georgia", serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.01em;
}
body.page-menu--subhubs .cat-card .cat-sub {
    font-size: 11px;
    color: rgba(230, 162, 58, 0.7);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-top: 6px;
}

/* ============================================================================
   PREMIUM RESTAURANT EXPERIENCE — final pass
   Polishes the existing redesign: bigger photos, more whitespace, refined
   typography, deeper hover depth. Scoped to body.page-menu* only. Selectors
   stack base + modifier classes (.promos.promos--compact,
   .categories.categories--rich, .promo.promo--compact) to win source-order
   over earlier blocks per the kiosk.css specificity rule.
   ============================================================================ */

/* ---- 1. HUB CATEGORY CARDS — premium showcase tiles --------------------- */
body.page-menu--hubs .categories.categories--rich {
    gap: 14px;
}
body.page-menu .categories.categories--rich .cat-card {
    min-height: 296px;
    border-radius: 20px;
    border: 1px solid rgba(230, 162, 58, 0.18);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 35%),
        linear-gradient(180deg, #1c1c22 0%, #111116 100%);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.32);
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
body.page-menu .categories.categories--rich .cat-card:hover {
    border-color: rgba(255, 203, 107, 0.5);
    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 203, 107, 0.15) inset;
    transform: translateY(-2px);
}
body.page-menu .categories.categories--rich .cat-card:active {
    transform: translateY(0) scale(0.992);
}
body.page-menu .categories.categories--rich .cat-photo {
    height: 200px;
    min-height: 200px;
    max-height: 200px;
    padding: 12px;
    border-radius: 18px 18px 6px 6px;
    border-bottom: 1px solid rgba(230, 162, 58, 0.22);
    background:
        radial-gradient(120% 100% at 30% 25%, rgba(255, 203, 107, 0.20), transparent 65%),
        radial-gradient(80% 80% at 80% 90%, rgba(120, 70, 40, 0.24), transparent 70%),
        linear-gradient(160deg, #1d1810 0%, #0a0807 100%);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);
}
body.page-menu .categories.categories--rich .cat-photo-img {
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55));
}
body.page-menu .categories.categories--rich .cat-body {
    padding: 16px 18px 32px;
    gap: 6px;
}
body.page-menu .categories.categories--rich .cat-card .cat-title {
    font-family: "Playfair Display", "Georgia", serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: 0.005em;
    color: var(--text);
}
body.page-menu .categories.categories--rich .cat-card .cat-desc {
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-dim);
    -webkit-line-clamp: 2;
    line-clamp: 2;
    max-height: calc(2 * 1.4em);
    margin-top: 2px;
}
body.page-menu .categories.categories--rich .cat-card .cat-sub {
    font-size: 10px;
    color: rgba(255, 203, 107, 0.78);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-top: auto;
}
body.page-menu .categories.categories--rich .cat-card .cat-arrow {
    width: 28px;
    height: 28px;
    bottom: 12px;
    right: 12px;
    background: rgba(15, 15, 19, 0.85);
    border: 1px solid rgba(255, 203, 107, 0.45);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}
body.page-menu .categories.categories--rich .cat-card .cat-arrow svg {
    width: 12px;
    height: 12px;
    stroke: var(--accent-2);
}

/* ---- 2. ITEM LIST CARDS — premium dish tiles ---------------------------- */
body.page-menu .promos.promos--compact {
    gap: 18px;
}
body.page-menu .promo.promo--compact {
    min-height: 326px;
    padding: 14px;
    border-radius: 24px;
    border: 1px solid rgba(230, 162, 58, 0.18);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 35%),
        linear-gradient(180deg, #1c1c22 0%, #111116 100%);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.32);
    gap: 12px;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
body.page-menu .promo.promo--compact:hover {
    border-color: rgba(255, 203, 107, 0.5);
    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 203, 107, 0.15) inset;
    transform: translateY(-2px);
}
body.page-menu .promo.promo--compact:active {
    transform: translateY(0) scale(0.992);
}
body.page-menu .promo.promo--compact .promo-photo {
    aspect-ratio: 4 / 3;
    border-radius: 18px;
    padding: 12px;
    background:
        radial-gradient(120% 90% at 30% 20%, rgba(255, 203, 107, 0.22), transparent 65%),
        radial-gradient(80% 70% at 80% 90%, rgba(120, 70, 40, 0.25), transparent 70%),
        linear-gradient(160deg, #1d1810 0%, #0a0807 100%);
    border: 1px solid rgba(230, 162, 58, 0.22);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);
}
body.page-menu .promo.promo--compact .promo-photo-img {
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55));
}
body.page-menu .promo.promo--compact .promo-content {
    padding: 4px 6px 8px;
    gap: 10px;
}
body.page-menu .promo.promo--compact .promo-title {
    font-family: "Playfair Display", "Georgia", serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: 0.005em;
    color: var(--text);
    -webkit-line-clamp: 2;
    line-clamp: 2;
}
body.page-menu .promo.promo--compact .promo-footer {
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid rgba(230, 162, 58, 0.16);
    justify-content: flex-end;
}
body.page-menu .promo.promo--compact .promo-price {
    font-family: "Playfair Display", "Georgia", serif;
    font-size: 19px;
    font-weight: 600;
    color: var(--accent-2);
    letter-spacing: 0.02em;
}
body.page-menu .promo.promo--compact .promo-price-old {
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-dim);
    text-decoration: line-through;
    margin-left: 8px;
    letter-spacing: 0;
}
body.page-menu--items .promos.promos--compact,
body.page-menu .promos.promos--compact {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-rows: 1fr;
    gap: 18px !important;
}
@media (max-width: 1100px) {
    body.page-menu--items .promos.promos--compact,
    body.page-menu .promos.promos--compact {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 760px) {
    body.page-menu--items .promos.promos--compact,
    body.page-menu .promos.promos--compact {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Empty-photo state — keep the gold frame visible, hide the broken-image
   silhouette. */
body.page-menu .promo.promo--compact.promo--no-image .promo-photo,
body.page-menu .categories.categories--rich .cat-photo.cat-photo--empty {
    background:
        radial-gradient(120% 90% at 30% 20%, rgba(255, 203, 107, 0.14), transparent 65%),
        linear-gradient(160deg, #1a160d 0%, #0a0807 100%);
}

/* ---- 3. ITEM DETAIL — photo dominates, refined typography --------------- */
body.page-menu--item .item-view {
    margin-top: 14px;
}
body.page-menu--item .item-view-crumbs {
    font-size: 12px;
    letter-spacing: 0.22em;
    color: rgba(255, 203, 107, 0.72);
    margin-bottom: 18px;
}
body.page-menu--item .item-view-grid {
    grid-template-columns: minmax(360px, 52%) 1fr;
    gap: 36px;
    padding: 28px;
    border-radius: 28px;
    border: 1px solid rgba(230, 162, 58, 0.20);
    background:
        radial-gradient(900px 380px at 0% 0%, rgba(255, 203, 107, 0.06), transparent 60%),
        linear-gradient(180deg, #1c1c22 0%, #111116 100%);
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.55);
}
body.page-menu--item .item-view-photo {
    aspect-ratio: 1 / 1;
    border-radius: 24px;
    padding: 18px;
    background:
        radial-gradient(120% 90% at 30% 20%, rgba(255, 203, 107, 0.26), transparent 60%),
        radial-gradient(80% 70% at 80% 90%, rgba(120, 70, 40, 0.30), transparent 70%),
        linear-gradient(160deg, #1c1810 0%, #0a0806 100%);
    border: 1px solid rgba(255, 203, 107, 0.30);
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.4),
        0 22px 44px rgba(0, 0, 0, 0.55);
}
body.page-menu--item .item-view-img {
    filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.65));
}
body.page-menu--item .item-view-body {
    gap: 14px;
    padding: 4px 6px;
}
body.page-menu--item .item-view-title {
    font-family: "Playfair Display", "Georgia", serif;
    font-size: 38px;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: 0.01em;
    margin-bottom: 4px;
}
body.page-menu--item .item-view-desc {
    font-size: 16px;
    line-height: 1.55;
    color: rgba(244, 239, 230, 0.92);
}
body.page-menu--item .item-view-row {
    padding-top: 12px;
    margin-top: 4px;
    border-top: 1px solid rgba(230, 162, 58, 0.16);
}
body.page-menu--item .item-view-row-label {
    font-size: 10.5px;
    letter-spacing: 0.26em;
    color: rgba(255, 203, 107, 0.78);
}
body.page-menu--item .item-view-row-value {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-dim);
}
body.page-menu--item .item-view-footer {
    margin-top: 14px;
    padding-top: 16px;
    border-top: 1px solid rgba(230, 162, 58, 0.22);
    justify-content: flex-end;
}
body.page-menu--item .item-view-price {
    font-family: "Playfair Display", "Georgia", serif;
    font-size: 44px;
    font-weight: 700;
    color: var(--accent-2);
    letter-spacing: 0.02em;
    text-shadow: 0 2px 12px rgba(255, 203, 107, 0.18);
}
body.page-menu--item .item-view-price-old {
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-weight: 500;
    margin-left: 14px;
}
body.page-menu--item .item-view-cta {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid rgba(230, 162, 58, 0.20);
}
body.page-menu--item .item-view-cta-btn {
    border-radius: 6px;
}
body.page-menu--item .item-view-cta-btn--primary {
    padding: 18px 38px;
    font-size: 14px;
    box-shadow: 0 14px 34px -12px rgba(255, 203, 107, 0.55);
}
@media (max-width: 1024px) {
    body.page-menu--item .item-view-grid {
        grid-template-columns: 1fr;
        padding: 22px;
    }
    body.page-menu--item .item-view-photo {
        aspect-ratio: 4 / 3;
    }
    body.page-menu--item .item-view-title { font-size: 30px; }
    body.page-menu--item .item-view-price { font-size: 36px; }
}

/* ---- 4. WINE LIST — refined cellar typography --------------------------- */
body.page-menu .promo.promo--wine,
body.page-wine .promo {
    border-radius: 20px;
    padding: 22px 24px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 40%),
        linear-gradient(180deg, #1c1c22 0%, #111116 100%);
    border: 1px solid rgba(230, 162, 58, 0.22);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.32);
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
body.page-menu .promo.promo--wine:hover,
body.page-wine .promo:hover {
    border-color: rgba(255, 203, 107, 0.5);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.5);
    transform: translateY(-1px);
}
body.page-menu .promo.promo--wine.promo--no-image,
body.page-wine .promo.promo--no-image {
    padding: 26px 28px 24px;
    border-left: 3px solid rgba(255, 203, 107, 0.55);
}
body.page-menu .promo.promo--wine .promo-title,
body.page-wine .promo .promo-title {
    font-family: "Playfair Display", "Georgia", serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.005em;
    margin-bottom: 6px;
}
body.page-menu .promo.promo--wine .promo-desc,
body.page-wine .promo .promo-desc {
    font-size: 12px;
    color: rgba(255, 203, 107, 0.78);
    letter-spacing: 0.06em;
    line-height: 1.45;
}
body.page-menu .promo.promo--wine .promo-desc + .promo-desc,
body.page-wine .promo .promo-desc + .promo-desc {
    color: var(--text-dim);
    letter-spacing: 0;
    margin-top: 4px;
}
body.page-menu .promo.promo--wine .promo-footer,
body.page-wine .promo .promo-footer {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(230, 162, 58, 0.18);
}
body.page-menu .promo.promo--wine .promo-price,
body.page-wine .promo .promo-price {
    font-family: "Playfair Display", "Georgia", serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--accent-2);
    letter-spacing: 0.02em;
}
body.page-menu .promo.promo--wine:not(.promo--no-image),
body.page-wine .promo:not(.promo--no-image) {
    grid-template-columns: 130px 1fr;
    gap: 18px;
}
body.page-menu .promo.promo--wine:not(.promo--no-image) .promo-photo,
body.page-wine .promo:not(.promo--no-image) .promo-photo {
    aspect-ratio: 3 / 4;
    padding: 10px;
    border-radius: 14px;
}
body.page-menu .promos:not(.promos--compact),
body.page-wine .promos:not(.promos--compact) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
@media (max-width: 1024px) {
    body.page-menu .promos:not(.promos--compact),
    body.page-wine .promos:not(.promos--compact) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 640px) {
    body.page-menu .promos:not(.promos--compact),
    body.page-wine .promos:not(.promos--compact) {
        grid-template-columns: 1fr;
    }
}

/* ---- 5. SECTION HEADER — refined restaurant typography ------------------ */
body.page-menu--items .menu-section > .cat-title {
    font-family: "Playfair Display", "Georgia", serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.012em;
    color: var(--text);
    margin: 4px 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(230, 162, 58, 0.22);
    position: relative;
}
body.page-menu--items .menu-section > .cat-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 56px;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-2) 0%, var(--accent) 100%);
    border-radius: 2px;
}
body.page-menu--items .kiosk { gap: 22px; }
body.page-menu--items .menu-section { margin-top: 6px; }

/* Subgroup divider on wine list / sectioned pages */
body.page-menu .menu-subgroup .subgroup-title {
    font-family: "Playfair Display", "Georgia", serif;
    font-size: 22px;
    font-weight: 600;
    color: rgba(244, 239, 230, 0.94);
    letter-spacing: 0.015em;
    border-bottom: 1px dashed rgba(230, 162, 58, 0.28);
    padding-bottom: 10px;
    margin: 4px 0 14px;
}

/* ============================================================================
   STAGE 3 — VISUAL FOOD DOMINANCE
   Photo becomes the card itself: object-fit: cover, dark gradient overlay,
   title/price floating on top. Applied to dish list cards (.promo--compact)
   and hub category cards (.categories--rich .cat-card). Wine cards
   (.promo--wine) are intentionally untouched. Detail photo capped at 420px.
   ============================================================================ */

/* ---- 1+2. DISH LIST CARDS — photo background, 4:3, text overlay --------- */
body.page-menu .promo.promo--compact {
    position: relative;
    aspect-ratio: 4 / 3;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    padding: 0;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(230, 162, 58, 0.22);
    background: radial-gradient(circle at center, #2a2a2a 0%, #0f0f0f 100%);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
    display: block;
    gap: 0;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
body.page-menu .promo.promo--compact:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 44px rgba(0, 0, 0, 0.6);
    border-color: rgba(255, 203, 107, 0.55);
}
body.page-menu .promo.promo--compact:active {
    transform: translateY(0) scale(0.992);
}
body.page-menu .promo.promo--compact .promo-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
    display: block;
    aspect-ratio: auto;
    z-index: 0;
}
body.page-menu .promo.promo--compact .promo-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.50) 28%,
        rgba(0, 0, 0, 0.12) 55%,
        rgba(0, 0, 0, 0) 78%
    );
    pointer-events: none;
    z-index: 1;
}
body.page-menu .promo.promo--compact .promo-photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    object-position: center;
    border-radius: 0;
    filter: brightness(0.92) saturate(1.06);
    box-shadow: none;
}
body.page-menu .promo.promo--compact .promo-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: none;
    flex: none;
    justify-content: flex-end;
    overflow: visible;
    min-width: 0;
}
body.page-menu .promo.promo--compact .promo-title {
    font-family: "Playfair Display", "Georgia", serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.18;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.78);
    -webkit-line-clamp: 2;
    line-clamp: 2;
    max-height: calc(2 * 1.18em);
}
body.page-menu .promo.promo--compact .promo-footer {
    border-top: none !important;
    margin-top: 0;
    padding-top: 0;
    background: none;
    justify-content: flex-end;
}
body.page-menu .promo.promo--compact .promo-price {
    font-family: "Playfair Display", "Georgia", serif;
    font-size: 19px;
    font-weight: 700;
    color: var(--accent-2);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.78);
}
body.page-menu .promo.promo--compact .promo-price-old {
    color: rgba(244, 239, 230, 0.6);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

/* ---- 1+2 (mirror). HUB CATEGORY CARDS — same treatment ------------------ */
body.page-menu .categories.categories--rich .cat-card {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: 4 / 3;
    padding: 0;
    border-radius: 20px;
    overflow: hidden;
    background: radial-gradient(circle at center, #2a2a2a 0%, #0f0f0f 100%);
    border: 1px solid rgba(230, 162, 58, 0.22);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
body.page-menu .categories.categories--rich .cat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 44px rgba(0, 0, 0, 0.6);
    border-color: rgba(255, 203, 107, 0.55);
}
body.page-menu .categories.categories--rich .cat-card:active {
    transform: translateY(0) scale(0.992);
}
body.page-menu .categories.categories--rich .cat-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
    aspect-ratio: auto;
    display: block;
    z-index: 0;
}
body.page-menu .categories.categories--rich .cat-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.50) 30%,
        rgba(0, 0, 0, 0.12) 56%,
        rgba(0, 0, 0, 0) 78%
    );
    pointer-events: none;
    z-index: 1;
}
body.page-menu .categories.categories--rich .cat-photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    object-position: center;
    border-radius: 0;
    filter: brightness(0.92) saturate(1.06);
}
body.page-menu .categories.categories--rich .cat-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 14px 16px 16px;
    background: none;
    gap: 4px;
    overflow: visible;
}
body.page-menu .categories.categories--rich .cat-card .cat-title {
    font-family: "Playfair Display", "Georgia", serif;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.16;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.78);
    -webkit-line-clamp: 2;
    line-clamp: 2;
    max-height: calc(2 * 1.16em);
}
body.page-menu .categories.categories--rich .cat-card .cat-desc {
    font-size: 12px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.88);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.82);
    -webkit-line-clamp: 1;
    line-clamp: 1;
    max-height: calc(1 * 1.35em);
    margin-top: 2px;
}
body.page-menu .categories.categories--rich .cat-card .cat-sub {
    font-size: 10px;
    color: rgba(255, 203, 107, 0.95);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.82);
    margin-top: 4px;
}
body.page-menu .categories.categories--rich .cat-card .cat-arrow {
    width: 28px;
    height: 28px;
    bottom: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 203, 107, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    z-index: 2;
}
body.page-menu .categories.categories--rich .cat-card .cat-arrow svg {
    width: 12px;
    height: 12px;
    stroke: var(--accent-2);
}

/* ---- 4. NO-IMAGE / EMPTY-PHOTO STATE ------------------------------------ */
body.page-menu .promo.promo--compact.promo--no-image .promo-photo {
    background: radial-gradient(circle at center, #2a2a2a 0%, #0f0f0f 100%);
}
body.page-menu .promo.promo--compact.promo--no-image .promo-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(220px 160px at 50% 38%, rgba(230, 162, 58, 0.14), transparent 65%);
    z-index: 0;
}
body.page-menu .categories.categories--rich .cat-photo.cat-photo--empty {
    background: radial-gradient(circle at center, #2a2a2a 0%, #0f0f0f 100%);
}
body.page-menu .categories.categories--rich .cat-photo.cat-photo--empty .cat-photo-mark {
    color: rgba(255, 203, 107, 0.42);
    font-size: 76px;
    z-index: 0;
}

/* ---- 3. DETAIL PHOTO — cap height 420, cover, no oversized frame -------- */
body.page-menu--item .item-view-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    padding: 26px;
    align-items: start;
}
body.page-menu--item .item-view-photo {
    width: 100%;
    height: 420px;
    max-height: 420px;
    aspect-ratio: auto;
    padding: 0;
    border-radius: 24px;
    overflow: hidden;
    background: radial-gradient(circle at center, #2a2a2a 0%, #0f0f0f 100%);
    border: 1px solid rgba(255, 203, 107, 0.30);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
    display: block;
}
body.page-menu--item .item-view-img {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    object-position: center;
    border-radius: 24px;
    filter: brightness(0.95) saturate(1.05);
}
body.page-menu--item .item-view-photo--wine {
    background: radial-gradient(circle at center, #2d1820 0%, #0f0608 100%);
}
@media (max-width: 1024px) {
    body.page-menu--item .item-view-grid {
        grid-template-columns: 1fr;
    }
    body.page-menu--item .item-view-photo {
        height: 320px;
        max-height: 320px;
    }
}

/* ---- 5. HERO DEPTH — backdrop blur + warm gradient on /menu hero -------- */
body.page-menu--hubs .recos.recos--hero {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    padding: 16px 18px 18px;
    background: linear-gradient(
        120deg,
        rgba(255, 200, 120, 0.10) 0%,
        rgba(0, 0, 0, 0.55) 75%
    );
    border: 1px solid rgba(255, 203, 107, 0.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.42);
}
body.page-menu--hubs .recos.recos--hero .recos-header {
    padding: 2px 4px 4px;
}
body.page-menu--hubs .recos.recos--hero .reco-card--featured {
    border-color: rgba(255, 203, 107, 0.45);
}

/* Section header in items view: keep its accent bar visible after cards
   switched to photo background (background got brighter on hover). */
body.page-menu--items .menu-section > .cat-title {
    color: #fff;
}

/* ---- 6. RECO CARDS — photo background, gradient overlay ---------------- */
body.page-menu--hubs .reco-card {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(230, 162, 58, 0.22);
    background: radial-gradient(circle at center, #2a2a2a 0%, #0f0f0f 100%);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
body.page-menu--hubs .reco-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.55);
    border-color: rgba(255, 203, 107, 0.55);
}
body.page-menu--hubs .reco-photo {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    display: block;
    z-index: 0;
    overflow: hidden;
}
body.page-menu--hubs .reco-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.88) 0%,
        rgba(0, 0, 0, 0.55) 28%,
        rgba(0, 0, 0, 0.18) 55%,
        rgba(0, 0, 0, 0) 78%
    );
    pointer-events: none;
    z-index: 1;
}
body.page-menu--hubs .reco-photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    object-position: center;
    filter: brightness(0.92) saturate(1.06);
}
body.page-menu--hubs .reco-card .reco-body,
body.page-menu--hubs .reco-card .reco-footer {
    position: relative;
    z-index: 2;
}
body.page-menu--hubs .reco-card .reco-title {
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}
body.page-menu--hubs .reco-card .reco-desc {
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
}
body.page-menu--hubs .reco-card .reco-footer {
    border-top: none;
    background: none;
}
body.page-menu--hubs .reco-card .reco-price {
    color: var(--accent-2);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}
body.page-menu--hubs .reco-card .reco-price-old {
    color: rgba(244, 239, 230, 0.6);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}

/* Featured reco — taller, photo dominates */
body.page-menu--hubs .reco-card--featured {
    min-height: 240px;
}
body.page-menu--hubs .recos-grid--hero .reco-card:not(.reco-card--featured) {
    min-height: 150px;
}

/* Reco without image: keep text-only premium look */
body.page-menu--hubs .reco-card--no-image {
    background:
        radial-gradient(500px 220px at 100% 0%, rgba(230, 162, 58, 0.16), transparent 60%),
        linear-gradient(180deg, #1c1c22 0%, #111116 100%);
}
body.page-menu--hubs .reco-card--no-image .reco-title {
    text-shadow: none;
}
body.page-menu--hubs .reco-card--no-image .reco-desc {
    color: rgba(244, 239, 230, 0.78);
    text-shadow: none;
}
body.page-menu--hubs .reco-card--no-image .reco-footer {
    border-top: 1px solid var(--line);
}
body.page-menu--hubs .reco-card--no-image .reco-price {
    text-shadow: 0 1px 6px rgba(255, 203, 107, 0.25);
}

/* ============================================================================
   SCENARIO CARDS — home page Doručak / Ručak / Večera
   Real food photo backgrounds (set above on .cat-{breakfast,lunch,dinner}::before).
   Soften the ::after overlay so the photo stays vibrant; keep enough dark
   gradient at the bottom for text readability. Sharpen image clarity (no blur,
   no brightness reduction).
   ============================================================================ */
/* Hero-row layout: scenario row as 3 equal cols (gap 18). Locked at 240px tall
   so cards stay neat — not banner-sized. */
body.page-home .categories-row .categories {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
}
@media (max-width: 720px) {
    body.page-home .categories-row .categories {
        grid-template-columns: 1fr !important;
    }
    body.page-home .cat-breakfast,
    body.page-home .cat-lunch,
    body.page-home .cat-dinner {
        min-height: 220px !important;
        height: auto !important;
        max-height: none !important;
    }
}
body.page-home .cat-breakfast,
body.page-home .cat-lunch,
body.page-home .cat-dinner {
    min-height: 240px !important;
    height: 240px !important;
    max-height: 240px !important;
    border: 1px solid rgba(230, 162, 58, 0.22) !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.42);
    overflow: hidden !important;
    padding: 20px 22px;
    box-sizing: border-box;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
body.page-home .cat-breakfast:hover,
body.page-home .cat-lunch:hover,
body.page-home .cat-dinner:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.55);
    border-color: rgba(255, 203, 107, 0.55);
}
/* Sharpen the photo: no filters, cover/center, full opacity */
body.page-home .cat-breakfast::before,
body.page-home .cat-lunch::before,
body.page-home .cat-dinner::before {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    filter: none !important;
    opacity: 1 !important;
}
/* Light bottom-only overlay — text readable, photo stays vibrant */
body.page-home .cat-breakfast::after,
body.page-home .cat-lunch::after,
body.page-home .cat-dinner::after {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.58) 0%,
        rgba(0, 0, 0, 0.18) 45%,
        rgba(0, 0, 0, 0.00) 100%
    ) !important;
}
/* Text on top of photo: white title + soft drop-shadow + gold sub */
body.page-home .cat-breakfast .cat-title,
body.page-home .cat-lunch .cat-title,
body.page-home .cat-dinner .cat-title {
    color: #fff;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.88);
    font-family: "Playfair Display", "Georgia", serif;
    font-weight: 700;
    font-size: clamp(26px, 2.4vw, 36px) !important;
    line-height: 1.1;
    letter-spacing: 0.01em;
}
body.page-home .cat-breakfast .cat-sub,
body.page-home .cat-lunch .cat-sub,
body.page-home .cat-dinner .cat-sub {
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85);
    font-size: clamp(13px, 1.05vw, 15px);
    line-height: 1.4;
    margin-top: 6px;
    max-width: 90%;
}
body.page-home .cat-breakfast .cat-arrow,
body.page-home .cat-lunch .cat-arrow,
body.page-home .cat-dinner .cat-arrow {
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 203, 107, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
body.page-home .cat-breakfast .cat-arrow svg,
body.page-home .cat-lunch .cat-arrow svg,
body.page-home .cat-dinner .cat-arrow svg {
    stroke: var(--accent-2);
}

/* ============================================================================
   HOME — IMAGE-DRIVEN CARDS (recos / wine showcase / popular / chef / day)
   Every facing card on / must read as a restaurant showcase, not a text panel.
   Each card gets a real food/wine photo behind it, a soft bottom gradient for
   text legibility, and graceful fallbacks when an item lacks an image.
   ============================================================================ */

/* ---- RECO CARDS — photo background, text overlay ----------------------- */
body.page-home .reco-card {
    position: relative;
    overflow: hidden;
    min-height: clamp(150px, 13vw, 180px) !important;
    padding: clamp(12px, 1vw, 16px) !important;
    border-radius: 16px !important;
    border: 1px solid rgba(230, 162, 58, 0.22) !important;
    background:
        radial-gradient(circle at center, #2a2a2a 0%, #0f0f0f 100%) !important;
}
body.page-home .reco-card .reco-photo {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    overflow: hidden;
    z-index: 0;
}
body.page-home .reco-card .reco-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.78) 0%,
        rgba(0, 0, 0, 0.36) 38%,
        rgba(0, 0, 0, 0.06) 70%,
        rgba(0, 0, 0, 0.00) 100%
    );
    pointer-events: none;
    z-index: 1;
}
body.page-home .reco-card .reco-photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: brightness(0.95) saturate(1.05);
}
body.page-home .reco-card .reco-body,
body.page-home .reco-card .reco-footer {
    position: relative;
    z-index: 2;
}
body.page-home .reco-card.reco-card--has-photo .reco-title {
    color: #fff !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
}
body.page-home .reco-card.reco-card--has-photo .reco-desc {
    color: rgba(255, 255, 255, 0.92) !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
}
body.page-home .reco-card.reco-card--has-photo .reco-footer {
    border-top: none !important;
    background: none;
}
body.page-home .reco-card.reco-card--has-photo .reco-price {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}
/* No-image fallback: warm radial keeps the card alive instead of looking flat */
body.page-home .reco-card.reco-card--no-image {
    background:
        radial-gradient(420px 200px at 100% 0%, rgba(230, 162, 58, 0.18), transparent 65%),
        linear-gradient(180deg, #1d1d24 0%, #14141a 100%) !important;
}

/* ---- WINE SHOWCASE — bottle photo behind each card --------------------- */
body.page-home .wine-card {
    position: relative;
    overflow: hidden;
    padding: 0 !important;
    min-height: 150px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(232, 194, 116, 0.22) !important;
    background:
        radial-gradient(circle at center, #2a1820 0%, #100808 100%) !important;
}
body.page-home .wine-card .wine-photo {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: brightness(0.78) saturate(1.05);
    z-index: 0;
}
body.page-home .wine-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.86) 0%,
        rgba(0, 0, 0, 0.42) 42%,
        rgba(0, 0, 0, 0.08) 75%,
        rgba(0, 0, 0, 0.00) 100%
    );
    pointer-events: none;
    z-index: 1;
}
body.page-home .wine-card .wine-body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    height: 100%;
    justify-content: flex-end;
    min-height: 150px;
}
body.page-home .wine-card .wine-title {
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}
body.page-home .wine-card .wine-meta {
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
}
body.page-home .wine-card .wine-price {
    color: var(--accent-2, #ffcb6b);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
    margin-top: 6px;
}

/* ---- POPULAR — photo background, spans full row width ----------------- */
/* `.cat-popular` lives inside its own `<section class="categories">` row
   (1fr inline grid). We still force `grid-column: 1 / -1` so the card always
   spans the full row even if a future layout decides to put it back into a
   multi-column grid container. */
body.page-home .cat-popular {
    grid-column: 1 / -1 !important;
    min-height: 200px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 203, 107, 0.22) !important;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.42);
}
body.page-home .cat-popular::before {
    background-image: image-set(url('/static/images/meat_dishes/biftek_sa_pecurkama.webp') type('image/webp'), url('/static/images/meat_dishes/biftek_sa_pecurkama.jpg')) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    filter: brightness(0.95) saturate(1.05) !important;
    opacity: 1 !important;
}
body.page-home .cat-popular::after {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.62) 0%,
        rgba(0, 0, 0, 0.20) 45%,
        rgba(0, 0, 0, 0.00) 100%
    ) !important;
}
body.page-home .cat-popular .cat-title {
    color: #fff !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.88);
}
body.page-home .cat-popular .cat-sub {
    color: rgba(255, 255, 255, 0.92) !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85);
}
body.page-home .cat-popular .cat-arrow {
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 203, 107, 0.65);
}
body.page-home .cat-popular .cat-arrow svg { stroke: var(--accent-2); }

/* ---- CHEF / DAY — hero selling block, photo dominates ----------------- */
body.page-home .features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
body.page-home .feature-card {
    position: relative;
    overflow: hidden;
    height: 320px !important;
    min-height: 320px !important;
    padding: 22px 24px 22px !important;
    border-radius: 22px;
    background:
        radial-gradient(circle at center, #2a2018 0%, #0e0908 100%) !important;
}
body.page-home .feature-card .feature-photo {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    transition: transform 0.6s ease;
}
body.page-home .feature-card.feature-card--has-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.75) 0%,
        rgba(0, 0, 0, 0.25) 40%,
        rgba(0, 0, 0, 0.00) 100%
    );
    z-index: 1;
    pointer-events: none;
}
body.page-home .feature-card.feature-card--has-photo:hover .feature-photo {
    transform: scale(1.04);
}
body.page-home .feature-card .feature-label,
body.page-home .feature-card .feature-title,
body.page-home .feature-card .feature-footer,
body.page-home .feature-card .feature-actions {
    position: relative;
    z-index: 2;
}
body.page-home .feature-card .feature-title {
    font-size: clamp(22px, 2vw, 28px) !important;
    font-weight: 600 !important;
}
body.page-home .feature-card .feature-label {
    font-size: 12px !important;
    letter-spacing: 1px !important;
    opacity: 0.8 !important;
}
body.page-home .feature-card .feature-price {
    font-size: 18px !important;
    font-weight: 600 !important;
}
body.page-home .feature-card.feature-card--has-photo .feature-title {
    color: #fff;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.88);
}
body.page-home .feature-card.feature-card--has-photo .feature-label {
    color: var(--accent-2, #ffcb6b);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
}
body.page-home .feature-card.feature-card--day.feature-card--has-photo .feature-label {
    color: rgba(255, 255, 255, 0.92);
}
body.page-home .feature-card.feature-card--has-photo .feature-price {
    color: var(--accent-2, #ffcb6b);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}
body.page-home .feature-card.feature-card--has-photo .feature-action {
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
    opacity: 1;
}
body.page-home .feature-card.feature-card--has-photo .cta-reserve {
    background: rgba(0, 0, 0, 0.42);
    border: 1px solid rgba(232, 194, 116, 0.55);
    border-radius: 8px;
    padding: 6px 12px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: var(--accent-2, #ffcb6b);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
}

@media (max-width: 768px) {
    body.page-home .features { grid-template-columns: 1fr; }
    body.page-home .feature-card { height: 260px !important; min-height: 260px !important; }
}

/* ============================================================================
   HOME — PREMIUM POLISH (visual-only)
   Softer overlays · glass borders · gentle lift on hover · image zoom on hover
   · calmer gold · unified card radii. No markup, JS, or sizing changes.
   ============================================================================ */

/* Unified transitions on every facing card */
body.page-home .reco-card,
body.page-home .wine-card,
body.page-home .feature-card,
body.page-home .cat-breakfast,
body.page-home .cat-lunch,
body.page-home .cat-dinner,
body.page-home .cat-popular {
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease !important;
}

/* Glass border + inset highlight (premium depth) */
body.page-home .reco-card,
body.page-home .wine-card,
body.page-home .feature-card,
body.page-home .cat-breakfast,
body.page-home .cat-lunch,
body.page-home .cat-dinner,
body.page-home .cat-popular {
    border: 1px solid rgba(232, 194, 116, 0.20) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 8px 22px rgba(0, 0, 0, 0.38) !important;
}

/* Gentle hover lift — translateY(-2px) scale(1.01), deeper shadow */
body.page-home .reco-card:hover,
body.page-home .wine-card:hover,
body.page-home .feature-card:hover,
body.page-home .cat-breakfast:hover,
body.page-home .cat-lunch:hover,
body.page-home .cat-dinner:hover,
body.page-home .cat-popular:hover {
    transform: translateY(-2px) scale(1.01) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 18px 40px rgba(0, 0, 0, 0.55) !important;
    border-color: rgba(232, 194, 116, 0.42) !important;
}

/* Image zoom on hover — subtle, smooth, no blur */
body.page-home .cat-breakfast::before,
body.page-home .cat-lunch::before,
body.page-home .cat-dinner::before,
body.page-home .cat-popular::before,
body.page-home .feature-card .feature-photo,
body.page-home .wine-card .wine-photo,
body.page-home .reco-card .reco-photo-img {
    transition: transform 0.5s ease !important;
}
body.page-home .cat-breakfast:hover::before,
body.page-home .cat-lunch:hover::before,
body.page-home .cat-dinner:hover::before,
body.page-home .cat-popular:hover::before,
body.page-home .feature-card:hover .feature-photo,
body.page-home .wine-card:hover .wine-photo,
body.page-home .reco-card:hover .reco-photo-img {
    transform: scale(1.035) !important;
}

/* Softer photo overlays — less "dirty" darkening */
body.page-home .reco-card .reco-photo::after {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.66) 0%,
        rgba(0, 0, 0, 0.28) 42%,
        rgba(0, 0, 0, 0.04) 75%,
        rgba(0, 0, 0, 0.00) 100%
    ) !important;
}
body.page-home .wine-card::after {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.74) 0%,
        rgba(0, 0, 0, 0.32) 45%,
        rgba(0, 0, 0, 0.06) 80%,
        rgba(0, 0, 0, 0.00) 100%
    ) !important;
}

/* Calmer gold (#d8b478) — warmer, less neon, easier on eye */
body.page-home .reco-card.reco-card--has-photo .reco-price,
body.page-home .wine-card .wine-price,
body.page-home .feature-card.feature-card--has-photo .feature-price,
body.page-home .feature-card.feature-card--has-photo .feature-label {
    color: #d8b478 !important;
}

/* Hero / QR / lang-switch — unified glass framing, calmer borders */
body.page-home .hero,
body.page-home .qr-block,
body.page-home .lang-switch {
    border-radius: 14px !important;
    border: 1px solid rgba(232, 194, 116, 0.16) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 8px 22px rgba(0, 0, 0, 0.32) !important;
}

/* Primary CTA "Otvori meni" — soft gold glow, lifts on hover */
body.page-home .qr-btn-primary {
    box-shadow: 0 6px 18px rgba(230, 162, 58, 0.28) !important;
    transition: box-shadow 0.3s ease, transform 0.2s ease !important;
}
body.page-home .qr-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow:
        0 10px 28px rgba(230, 162, 58, 0.42),
        0 0 22px rgba(232, 194, 116, 0.22) !important;
}

/* CTA "Rezervisi sto" inside chef/day — gentle gold shine on hover */
body.page-home .feature-card.feature-card--has-photo .cta-reserve {
    transition: color 0.2s ease, box-shadow 0.25s ease, transform 0.2s ease,
                border-color 0.2s ease !important;
}
body.page-home .feature-card.feature-card--has-photo:hover .cta-reserve {
    box-shadow: 0 0 18px rgba(232, 194, 116, 0.28);
    border-color: rgba(232, 194, 116, 0.85) !important;
    transform: translateY(-1px);
}

/* Lang switch active button — softer glow */
body.page-home .lang-switch button.active {
    box-shadow: 0 4px 14px rgba(230, 162, 58, 0.30) !important;
}

/* Defensive: no horizontal scroll on tablet — prevents 100vw overflow tricks
   (full-bleed hero, animations) from spawning a stray horizontal scrollbar
   on Samsung Tab / iPad / Android Chrome where overlay scrollbars can paint
   one frame of overflow before settling. */
body.page-home,
body.page-menu,
body.page-wine { overflow-x: hidden; }

/* Wine items list CTA — sits below the wine cards, reuses .item-view-cta
   classes so the visual stays in step with the third-level page. */
body.page-menu--items .menu-list-cta {
    margin-top: 32px;
    padding: 22px 4px 4px;
}

/* ============================================================================
   WINE SUBHUBS — photo-driven premium tiles (/menu?section=wine_list)
   The subhub view template renders cards as `.cat-card.cat-{group_id}` without
   an inner <img>; we drive the photo through the existing .cat-card::before
   pseudo (already cover/center). Each wine group gets a curated bottle/glass
   image; layout grows to scenario-style tiles ~210px tall.
   ============================================================================ */

body.page-menu--subhubs .categories {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
}
/* Drinks subhubs are exactly 4 — show them as one even row of 4 instead of
   3+1 orphan. Wine subhubs (5) keep the 3-col grid. Picked via :has() so we
   don't need to thread an extra body class through the template. */
body.page-menu--subhubs .categories:has(.cat-drinks_hot_cold),
body.page-menu--subhubs .categories:has(.cat-spirits),
body.page-menu--subhubs .categories:has(.cat-beer) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
@media (max-width: 900px) {
    body.page-menu--subhubs .categories { grid-template-columns: repeat(2, 1fr) !important; }
    body.page-menu--subhubs .categories:has(.cat-drinks_hot_cold),
    body.page-menu--subhubs .categories:has(.cat-spirits),
    body.page-menu--subhubs .categories:has(.cat-beer) {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 540px) {
    body.page-menu--subhubs .categories { grid-template-columns: 1fr !important; }
    body.page-menu--subhubs .categories:has(.cat-drinks_hot_cold),
    body.page-menu--subhubs .categories:has(.cat-spirits),
    body.page-menu--subhubs .categories:has(.cat-beer) {
        grid-template-columns: 1fr !important;
    }
}

/* Reset the small text-only tile look from the earlier subhubs block (~2890),
   replace with photo-driven scenario tile. */
body.page-menu--subhubs .cat-card {
    min-height: 210px !important;
    height: 210px !important;
    padding: 20px 22px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(232, 194, 116, 0.22) !important;
    border-left: 1px solid rgba(232, 194, 116, 0.22) !important;
    background:
        radial-gradient(circle at center, #1c1612 0%, #0a0908 100%) !important;
    overflow: hidden !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 10px 22px rgba(0, 0, 0, 0.42) !important;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
body.page-menu--subhubs .cat-card:hover {
    transform: translateY(-2px) scale(1.01) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 18px 40px rgba(0, 0, 0, 0.55) !important;
    border-color: rgba(232, 194, 116, 0.55) !important;
}

/* Per-group photo via the existing .cat-card::before pseudo. */
body.page-menu--subhubs .cat-white_wines::before {
    background-image: image-set(url('/static/images/wine/vinarija_plantaze_chardonnay.webp') type('image/webp'), url('/static/images/wine/vinarija_plantaze_chardonnay.jpg')) !important;
}
body.page-menu--subhubs .cat-red_wines::before {
    background-image: image-set(url('/static/images/wine/vinarija_delic_vranac.webp') type('image/webp'), url('/static/images/wine/vinarija_delic_vranac.jpg')) !important;
}
body.page-menu--subhubs .cat-rose_wines::before {
    background-image: image-set(url('/static/images/wine/plantaze_rose.webp') type('image/webp'), url('/static/images/wine/plantaze_rose.jpg')) !important;
}
body.page-menu--subhubs .cat-sparkling_wines::before {
    background-image: image-set(url('/static/images/wine/sampanjac_moet.webp') type('image/webp'), url('/static/images/wine/sampanjac_moet.jpg')) !important;
}
body.page-menu--subhubs .cat-dessert_wine::before {
    background-image: image-set(url('/static/images/wine/inarija_plantaze_pro_corde.webp') type('image/webp'), url('/static/images/wine/inarija_plantaze_pro_corde.jpg')) !important;
}

/* Drinks subhubs (/menu?section=drinks): 4 photo-driven tiles in one row.
   Reuses the same photo + overlay + lift system declared above for wines. */
body.page-menu--subhubs .cat-drinks_hot_cold::before {
    background-image: image-set(url('/static/images/hot_and_cold_drinks/lce_kafa.webp') type('image/webp'), url('/static/images/hot_and_cold_drinks/lce_kafa.png')) !important;
}
body.page-menu--subhubs .cat-water_soft::before {
    background-image: image-set(url('/static/images/water_and_soft_drinks/limunada.webp') type('image/webp'), url('/static/images/water_and_soft_drinks/limunada.jpg')) !important;
}
body.page-menu--subhubs .cat-spirits::before {
    background-image: image-set(url('/static/images/alcoholic_drinks/cocktails.webp') type('image/webp'), url('/static/images/alcoholic_drinks/cocktails.jpg')) !important;
}
body.page-menu--subhubs .cat-beer::before {
    background-image: image-set(url('/static/images/beer/toceno_pivo.webp') type('image/webp'), url('/static/images/beer/toceno_pivo.jpg')) !important;
}

/* Wine subhub photo: cover, center, no blur, full vibrancy. Subtle zoom on
   hover, matching the home page polish. */
body.page-menu--subhubs .cat-card::before {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    filter: none !important;
    opacity: 1 !important;
    transition: transform 0.5s ease !important;
}
body.page-menu--subhubs .cat-card:hover::before {
    transform: scale(1.04) !important;
}

/* Soft bottom-only gradient — text legible, photo stays vibrant. Overrides
   the heavy default .cat-card::after (180deg, alpha 0.85 at the bottom). */
body.page-menu--subhubs .cat-card::after {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.66) 0%,
        rgba(0, 0, 0, 0.26) 45%,
        rgba(0, 0, 0, 0.00) 100%
    ) !important;
}

/* Title + sub on top of photo. */
body.page-menu--subhubs .cat-card .cat-content {
    position: relative;
    z-index: 2;
    margin-top: auto;
}
body.page-menu--subhubs .cat-card .cat-title {
    color: #fff !important;
    font-family: "Playfair Display", "Georgia", serif !important;
    font-weight: 700 !important;
    font-size: clamp(22px, 2vw, 28px) !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.88);
    letter-spacing: 0.01em !important;
}
body.page-menu--subhubs .cat-card .cat-sub {
    color: rgba(232, 194, 116, 0.90) !important;
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    margin-top: 6px !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
}
body.page-menu--subhubs .cat-card .cat-arrow {
    position: relative;
    z-index: 2;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(232, 194, 116, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
body.page-menu--subhubs .cat-card .cat-arrow svg {
    stroke: var(--accent-2);
}

/* ============================================================================
   WINE ITEM CARDS — full-bleed photo, no card-in-card
   Earlier blocks (~2513 .promo-photo, ~2857/3288 .promo--wine:not(--no-image))
   gave the photo its own border + gradient + 10-12px padding + inset shadow,
   so it read as a standalone tile sitting inside the wine card. This block
   strips those layers: photo spans the full left edge of the card, cover fit,
   left-only rounded corners matching the outer card radius. A soft left→right
   overlay gives photo depth without darkening the bottle.
   ============================================================================ */
body.page-menu .promo.promo--wine:not(.promo--no-image),
body.page-wine .promo:not(.promo--no-image) {
    grid-template-columns: 34% 66% !important;
    gap: 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
    overflow: hidden !important;
    min-height: 160px !important;
}
body.page-menu .promo.promo--wine:not(.promo--no-image) .promo-photo,
body.page-wine .promo:not(.promo--no-image) .promo-photo {
    position: relative !important;
    aspect-ratio: auto !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    border-radius: 20px 0 0 20px !important;
    box-shadow: none !important;
    overflow: hidden !important;
    display: block;
}
/* Premium left→right overlay: subtle depth, leaves the bottle bright. */
body.page-menu .promo.promo--wine:not(.promo--no-image) .promo-photo::before,
body.page-wine .promo:not(.promo--no-image) .promo-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.18),
        rgba(0, 0, 0, 0.05),
        rgba(0, 0, 0, 0.00)
    );
    pointer-events: none;
    z-index: 1;
}
body.page-menu .promo.promo--wine:not(.promo--no-image) .promo-photo::after,
body.page-wine .promo:not(.promo--no-image) .promo-photo::after {
    content: none !important;
    background: none !important;
}
body.page-menu .promo.promo--wine:not(.promo--no-image) .promo-photo-img,
body.page-wine .promo:not(.promo--no-image) .promo-photo-img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 0 !important;
    filter: none !important;
    transition: transform 0.35s ease !important;
}
body.page-menu .promo.promo--wine:not(.promo--no-image):hover .promo-photo-img,
body.page-wine .promo:not(.promo--no-image):hover .promo-photo-img {
    transform: scale(1.03) !important;
}
body.page-menu .promo.promo--wine:not(.promo--no-image) .promo-content,
body.page-wine .promo:not(.promo--no-image) .promo-content {
    padding: 18px 20px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 0;
}

/* ============================================================================
   RESPONSIVE QA — tablet portrait + mobile fixes
   Baseline scan (Playwright at 1280/820/390) showed: no horizontal scroll on
   any viewport; tablet grids drop correctly via existing breakpoints; the
   only real break is the wine card horizontal grid (34%/66%) becoming
   unreadable below ~768px (photo column ≈ 120px). Stack photo-on-top there,
   bump touch targets to 44px, and tighten typography for mobile.
   ============================================================================ */

/* Wine card stack: photo on top, text below — under 768px */
@media (max-width: 768px) {
    body.page-menu .promo.promo--wine:not(.promo--no-image),
    body.page-wine .promo:not(.promo--no-image) {
        grid-template-columns: 1fr !important;
        min-height: 0 !important;
    }
    body.page-menu .promo.promo--wine:not(.promo--no-image) .promo-photo,
    body.page-wine .promo:not(.promo--no-image) .promo-photo {
        height: 200px !important;
        width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
    }
    body.page-menu .promo.promo--wine:not(.promo--no-image) .promo-photo::before,
    body.page-wine .promo:not(.promo--no-image) .promo-photo::before {
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.00) 60%,
            rgba(0, 0, 0, 0.18) 100%
        ) !important;
    }
    body.page-menu .promo.promo--wine:not(.promo--no-image) .promo-content,
    body.page-wine .promo:not(.promo--no-image) .promo-content {
        padding: 16px !important;
    }
}

/* Touch targets: bump small buttons to Apple-recommended 44px on mobile */
@media (max-width: 768px) {
    body.page-home .lang-switch button,
    body.page-menu .lang-switch button,
    body.page-wine .lang-switch button {
        min-width: 44px;
        min-height: 44px;
        font-size: 14px;
    }
    body.page-menu .item-view-cta-btn--ghost {
        min-height: 44px;
        padding: 12px 18px;
        font-size: 13px;
    }
    body.page-home .qr-btn {
        min-height: 44px;
        font-size: 13px;
    }
    /* Fixed top-nav text buttons: keep them comfortable on small screens
       so Back / Home / nav links don't shrink below a tappable size. */
    body.page-home .top-nav-link,
    body.page-menu .top-nav-link,
    body.page-wine .top-nav-link {
        min-height: 40px;
    }
    body.page-home .top-nav-back,
    body.page-home .top-nav-home {
        min-height: 44px;
    }
}

/* Mobile typography polish — keep things readable at 390px */
@media (max-width: 480px) {
    body.page-menu .promo.promo--compact .promo-title {
        font-size: 14px;
    }
    body.page-menu .promo.promo--wine .promo-title {
        font-size: 17px;
    }
    body.page-menu .promo.promo--wine .promo-desc {
        font-size: 13px;
    }
    body.page-menu .menu-section .cat-title,
    body.page-menu .subgroup-title {
        font-size: 22px;
    }
}

/* Single-column dish list at very narrow widths (≤420px) for breathing room */
@media (max-width: 420px) {
    body.page-menu .promos.promos--compact,
    body.page-menu--items .promos.promos--compact {
        grid-template-columns: 1fr !important;
    }
}


/* ============================================================
   AI v1 — Interactive photo logic + daypart visuals + combos
   ============================================================
   - .daypart-* lives on <body> on /, and is mirrored client-side
     onto .page-scenario when ?daypart= is present. Used purely for
     visual mood (background tint, reco-photo filter), not layout.
   - .reco-photo-img / .combo-photo-img get a smooth scale on
     hover/touch — premium feel without changing image_engine.
   - .combos block renders the role-tagged combo cards from
     get_meal_combos(). Reuses the same gold accent palette as .recos.
   ============================================================ */

/* Interactive photo zoom — applies to existing .reco-photo + new
   .combo-photo. A scale-in on hover and a subtle scale-out on touch
   release. Hardware-accelerated transform so large photos don't jank. */
.reco-photo,
.combo-photo {
    overflow: hidden;
}
.reco-photo-img,
.combo-photo-img {
    transition:
        transform 480ms cubic-bezier(0.22, 0.9, 0.3, 1),
        filter 320ms ease;
    will-change: transform;
}
.reco-card:hover .reco-photo-img,
.combo-card:hover .combo-photo-img {
    transform: scale(1.06);
    filter: saturate(1.10) brightness(1.04);
}
.reco-card:active .reco-photo-img,
.combo-card:active .combo-photo-img,
.reco-card.is-touched .reco-photo-img,
.combo-card.is-touched .combo-photo-img {
    transform: scale(1.10);
    filter: saturate(1.18) brightness(1.06);
}

/* Daypart visual moods — keep contrast small so the existing kiosk
   palette reads through. Breakfast = bright/light, Lunch = warm
   neutral, Dinner = darker/premium. Applied as a thin overlay tint
   on the body, not on individual cards, to avoid touching the
   carefully tuned .reco-card colors. */
body.daypart-breakfast {
    background-image:
        radial-gradient(1200px 600px at 50% -100px, rgba(245, 220, 160, 0.07), transparent 60%);
}
body.daypart-lunch {
    background-image:
        radial-gradient(1200px 600px at 50% -100px, rgba(220, 170, 110, 0.06), transparent 60%);
}
body.daypart-dinner {
    background-image:
        radial-gradient(1200px 600px at 50% -100px, rgba(120, 50, 70, 0.10), transparent 60%);
}

/* Combos block — three role-tagged cards on /. Reuses the same
   bottle-shoulder grid breakpoints as .recos so the home page keeps
   a clean 1/2/3-column rhythm at the same widths. */
body.page-home .combos {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: clamp(12px, 1.4vw, 22px);
}
body.page-home .combos-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
}
body.page-home .combos-title {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    font-size: clamp(22px, 1.8vw, 30px);
    color: var(--ink, #efe7d8);
    position: relative;
    padding-left: 18px;
}
body.page-home .combos-title::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    width: 8px; height: 8px;
    background: linear-gradient(135deg, #ffcb6b, #e6a23a);
    border-radius: 50%;
    transform: translateY(-50%);
    box-shadow: 0 0 12px rgba(232, 194, 116, 0.45);
}
body.page-home .combos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(14px, 1.2vw, 22px);
}
body.page-home .combo-card {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    background: #1a1612;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.3),
        0 14px 36px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition:
        transform 220ms cubic-bezier(0.22, 0.9, 0.3, 1),
        box-shadow 220ms ease,
        border-color 220ms ease;
    min-height: clamp(220px, 18vw, 320px);
    display: flex;
    flex-direction: column;
}
body.page-home .combo-card:hover {
    transform: translateY(-3px);
    border-color: rgba(232, 194, 116, 0.4);
    box-shadow:
        0 22px 50px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(232, 194, 116, 0.22);
}
body.page-home .combo-card:active { transform: scale(0.985); }
body.page-home .combo-photo {
    position: relative;
    height: 55%;
    min-height: 140px;
    background: linear-gradient(135deg, #2a2118 0%, #161210 100%);
}
body.page-home .combo-photo-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
body.page-home .combo-card--no-photo .combo-photo { display: none; }
body.page-home .combo-body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}
body.page-home .combo-role {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #ffcb6b;
}
body.page-home .combo-title {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    font-size: clamp(16px, 1.3vw, 22px);
    color: var(--ink, #efe7d8);
    line-height: 1.2;
}
body.page-home .combo-desc {
    font-family: 'Inter', sans-serif;
    font-size: clamp(12px, 0.9vw, 14px);
    color: var(--ink-soft, #c8bca6);
    opacity: 0.85;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
body.page-home .combo-title {
    /* Two-line clamp keeps role-tagged combo cards visually balanced when
       one dish name is much longer than the others (e.g. "Pizza Margherita
       with Buffalo Mozzarella"). */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
body.page-home .combo-price {
    margin-top: auto;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(14px, 1.1vw, 18px);
    color: #ffcb6b;
}
body.page-home .combo-price-old {
    font-weight: 400;
    color: var(--ink-soft, #c8bca6);
    text-decoration: line-through;
    margin-left: 6px;
    opacity: 0.7;
}

/* Per-role accent stripe on the left edge — quick visual cue that
   the three cards form a sequenced combo, not three random recos. */
body.page-home .combo-card::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, transparent, rgba(232, 194, 116, 0.55), transparent);
    z-index: 1;
}
body.page-home .combo-card--starter::before { background: linear-gradient(180deg, transparent, #b4dc8c, transparent); }
body.page-home .combo-card--main::before    { background: linear-gradient(180deg, transparent, #dc6e3c, transparent); }
body.page-home .combo-card--drink::before   { background: linear-gradient(180deg, transparent, #ffcb6b, transparent); }
body.page-home .combo-card--extra::before   { background: linear-gradient(180deg, transparent, #f0be82, transparent); }

@media (max-width: 900px) {
    body.page-home .combos-grid { grid-template-columns: 1fr; gap: 10px; }
    body.page-home .combo-card { min-height: 160px; flex-direction: row; }
    body.page-home .combo-photo { width: 40%; height: auto; min-height: 0; }
    body.page-home .combo-body { flex: 1; }
}

/* ============================================================
   APEX FINAL POLISH — premium micro-interactions (CSS only).
   Layered AT THE END so it complements existing rules without
   overriding them. No JS, no new keyframes beyond a single
   image fade. Lightweight, tablet-safe.
   ============================================================ */

/* 1. Tap highlight: kill the iOS Safari grey flash so the custom
      :active scale is the only feedback the user sees. Scoped to
      interactive surfaces; we do NOT set this on body to avoid
      stripping the highlight from links inside long-form content. */
.cat-card,
.reco-card,
.combo-card,
.promo,
.promo--compact,
.hub-card,
.menu-card,
.qr-btn,
.btn,
.topbar-btn,
.res-btn,
.lang-switch button,
.topbar-lang button,
.pwa-install-btn,
.pwa-install-close,
button,
a[role="button"],
a[data-tap],
[data-tap] {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* 2. Premium focus ring — gold halo only on keyboard focus. Uses
      :focus-visible so we never decorate a touch tap. The first rule
      covers any focusable surface (a, button, [tabindex]); the second
      adds the soft gold glow only to interactive primitives we ship
      (cards, buttons, language pills) — content links keep just the
      outline so paragraphs of text don't grow a gold halo. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
[data-tap]:focus-visible {
    outline: 2px solid rgba(255, 203, 107, 0.85);
    outline-offset: 3px;
}
.cat-card:focus-visible,
.reco-card:focus-visible,
.combo-card:focus-visible,
.promo:focus-visible,
.qr-btn:focus-visible,
.btn:focus-visible,
.topbar-btn:focus-visible,
.res-btn:focus-visible,
.lang-switch button:focus-visible,
.topbar-lang button:focus-visible,
.pwa-install-btn:focus-visible,
.pwa-install-close:focus-visible {
    box-shadow: 0 0 0 4px rgba(230, 162, 58, 0.18);
}

/* 3. Image fade-in for lazy-loaded assets. Reco cards, combo cards,
      and promo cards all use the same `<img loading="lazy">` pattern,
      so a single rule covers them. The image starts transparent and
      fades to opaque once the browser sets `complete`. */
@keyframes apex-img-fadein {
    from { opacity: 0; transform: scale(1.01); }
    to   { opacity: 1; transform: scale(1); }
}
img[loading="lazy"] {
    animation: apex-img-fadein 320ms ease-out both;
    will-change: opacity;
}
/* Skip the animation if the image was already cached and complete on
   first paint — avoids a flicker on warm reloads. */
img[loading="lazy"].is-cached,
img[loading="lazy"][data-cached="true"] {
    animation: none;
}

/* 4. Lightweight skeleton shimmer — opt-in via a class so existing
      cards stay unaffected. Add `.is-loading` to a `.reco-photo` /
      `.promo-image` / `.combo-photo` wrapper to show a soft pulse. */
@keyframes apex-skel-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}
.is-loading,
.skel-shimmer {
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.02) 0%,
        rgba(255, 255, 255, 0.06) 50%,
        rgba(255, 255, 255, 0.02) 100%
    );
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: apex-skel-shimmer 1.4s ease-in-out infinite;
}

/* 5. Safe-area awareness for elements that anchor to the page edges
      (PWA install card already does this; this rule generalises). */
.has-safe-area-bottom { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
.has-safe-area-top    { padding-top:    max(14px, env(safe-area-inset-top)); }

/* 6. Reduced-motion compliance — when the user prefers calmer UI we
      strip animations and shorten transitions instead of leaving
      anything jumpy. We never set duration to 0 to keep state changes
      visible (otherwise toggles/buttons feel broken). */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 80ms !important;
        scroll-behavior: auto !important;
    }
    img[loading="lazy"] { animation: none; opacity: 1; transform: none; }
    .is-loading, .skel-shimmer { animation: none; }
}

/* ============================================================
   STAGE C3 — PUBLIC HOME TABLET-PORTRAIT OVERFLOW FIX
   (append-only, 2026-04-30)

   Problem: at exactly 768×1024 (portrait tablet), the existing
   "mobile" collapse `@media (max-width: 767px)` does NOT fire,
   so body.page-home .hero-row stays in its 3-col base layout
   `1fr | clamp(280px, 26vw, 360px) | clamp(110px, 10vw, 150px)`.
   Track 3 clamps to 110px, but the lang-switch's three "EN/RU/ME"
   buttons (12px bold + 0.08em letter-spacing + 8px padding +
   4px gaps) have intrinsic min-content ≈ 148px. The buttons
   overflow their track, propagating 28px overflow up to body.

   Fix: extend the same single-column hero-row collapse to the
   one-pixel-wide tablet-portrait band (768–799px) using a fresh
   media query. We do NOT touch the existing @media (max-width: 767px)
   block. We do NOT touch desktop (≥800px) layouts. Lang-switch
   reuses the same 5-col grid shape that already runs on phones.

   Rollback = remove this block.
   ============================================================ */

@media (min-width: 768px) and (max-width: 799px) {
    body.page-home .hero-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    body.page-home .lang-switch {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* ============================================================
   END STAGE C3
   ============================================================ */

/* ============================================================
   STAGE D5 — PUBLIC KIOSK PREMIUM POLISH (append-only, 2026-04-30)

   P0:
     /wine premium transformation — uses item.image (now emitted by
       wine.html template), gives wines without image a calm
       silhouette placeholder, equalises card heights, tightens
       section breathing to reduce 6.5-screen scroll fatigue.

   P1:
     /menu --item view (target of /chef redirect) — wider hero card,
       stronger typography so the single-dish "chef special" view
       reads as deliberate, not unfinished.
     /scenario card title — guarantees title is always visible
       even when the JS-rendered card image dominates.
     /home wine teaser (.wine-track) — fewer columns at tablet,
       bigger title, more legible at 1024×768 and below.
     Lang-switch chips on tablet — bumped to 40px tap target.
     /menu category-grid — reaffirm auto-fit clean wrap.

   No backend, no data, no JS, no admin. Rollback = remove this
   block (and revert wine.html promo-image inline-style addition).
   ============================================================ */

/* ============ 1. /wine — PREMIUM CARD RHYTHM (P0) ============ */

/* Override the legacy "display: none" on .promo-image set at line 2683
   (matches its specificity 0,3,0 and comes later in source order). The
   wine.html template now emits inline background-image, so the image
   slot must be visible. */
body.page-wine .promo .promo-image { display: block; }

/* Tighter section spacing — kills ~1 screen of scroll on phone */
body.page-wine .menu-section { margin-top: clamp(18px, 1.8vw, 28px); }
body.page-wine .menu-section:first-of-type { margin-top: 6px; }
body.page-wine .menu-subgroup { margin-top: 16px; }
body.page-wine .menu-subgroup:first-of-type { margin-top: 4px; }
body.page-wine .subgroup-title {
    margin: 4px 0 10px;
    padding-bottom: 6px;
    font-size: clamp(17px, 1.5vw, 22px);
}

/* Tighter promo grid + card geometry */
body.page-wine .promos {
    gap: clamp(12px, 1.2vw, 18px);
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    align-items: stretch;
}
body.page-wine .promo {
    min-height: 168px;
    grid-template-columns: 130px 1fr;
    gap: 16px;
    padding: 14px;
    border-radius: var(--radius);
}
body.page-wine .promo-image { min-height: 140px; }

/* Silhouette placeholder for wines that have no item.image — calm
   bottle-mood gradient (no fake bottle illustration) so rhythm
   holds with the photographed bottles. */
body.page-wine .promo--no-image .promo-image {
    background-image:
        radial-gradient(ellipse 18% 62% at 50% 52%, rgba(232, 200, 130, 0.18), transparent 72%),
        linear-gradient(135deg, #2a0e14 0%, #0e0408 100%);
    position: relative;
}
body.page-wine .promo--no-image .promo-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 80% at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.35) 100%);
    pointer-events: none;
}

/* Wine card content rhythm — denser, less air */
body.page-wine .promo-content { gap: 5px; }
body.page-wine .promo-title {
    font-size: clamp(16px, 1.4vw, 20px);
    line-height: 1.2;
}
body.page-wine .promo-desc {
    font-size: 12px;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}
body.page-wine .promo-footer { margin-top: 6px; }
body.page-wine .promo-price {
    font-size: clamp(18px, 1.4vw, 22px);
    font-variant-numeric: tabular-nums;
}

/* Tablet portrait — keep 2-up grid, tighten rows */
@media (min-width: 600px) and (max-width: 960px) {
    body.page-wine .promos { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
    body.page-wine .promo {
        grid-template-columns: 110px 1fr;
        min-height: 140px;
        padding: 12px;
        gap: 12px;
    }
    body.page-wine .promo-image { min-height: 120px; }
}

/* Phone — single column, compact */
@media (max-width: 599px) {
    body.page-wine .promos { grid-template-columns: 1fr; gap: 10px; }
    body.page-wine .promo {
        grid-template-columns: 92px 1fr;
        min-height: 116px;
        padding: 10px;
        gap: 10px;
    }
    body.page-wine .promo-image { min-height: 96px; }
    body.page-wine .promo-title { font-size: 15px; }
    body.page-wine .promo-desc { font-size: 11.5px; }
    body.page-wine .promo-price { font-size: 17px; }
}

/* ============ 2. /menu --item DETAIL VIEW (P1, target of /chef) ============ */

body.page-menu--item .container { max-width: 1100px; }
body.page-menu--item .kiosk { gap: clamp(12px, 1.4vw, 20px); }

body.page-menu--item .promo {
    grid-template-columns: minmax(260px, 1fr) 1.05fr;
    min-height: clamp(280px, 32vw, 400px);
    padding: clamp(20px, 2vw, 28px);
    gap: clamp(20px, 2vw, 32px);
    background:
        radial-gradient(900px 320px at 50% -10%, rgba(230, 162, 58, 0.14), transparent 60%),
        linear-gradient(180deg, #1d1d24 0%, #14141a 100%);
    border-color: rgba(230, 162, 58, 0.30);
    box-shadow: 0 28px 70px -32px rgba(20, 18, 10, 0.50);
}
body.page-menu--item .promo-image {
    min-height: clamp(220px, 28vw, 360px);
    border-radius: var(--radius);
}
body.page-menu--item .promo-content {
    justify-content: center;
    gap: 12px;
    padding: 6px 4px;
}
body.page-menu--item .promo-title {
    font-size: clamp(24px, 2.4vw, 34px);
    line-height: 1.12;
    letter-spacing: 0.005em;
}
body.page-menu--item .promo-desc {
    font-size: clamp(13px, 1.1vw, 16px);
    line-height: 1.5;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    color: rgba(244, 239, 230, 0.82);
}
body.page-menu--item .promo-footer { margin-top: 14px; gap: 14px; }
body.page-menu--item .promo-price {
    font-size: clamp(26px, 2.2vw, 36px);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

@media (max-width: 760px) {
    body.page-menu--item .promo {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    body.page-menu--item .promo-image { min-height: 220px; }
}

/* ============ 3. /scenario CARD TITLE VISIBILITY (P1) ============ */
/* Cards are JS-rendered (scenario.js); ensure title is never hidden
   by image dominance or :empty CSS-tricks even when item.title is sparse. */
body.page-scenario .sc-card { position: relative; }
body.page-scenario .sc-card .sc-card-title,
body.page-scenario .sc-card .sc-title,
body.page-scenario .sc-card h3,
body.page-scenario .sc-card h4 {
    visibility: visible !important;
    opacity: 1 !important;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
    min-height: 1em;
}
/* If a card body has no readable title for the current language, fall back
   to id text via the data-item-id attribute (visible only in CSS, no JS). */
body.page-scenario .sc-card[data-item-id]:not(:has(.sc-card-title:not(:empty))):not(:has(h3:not(:empty)))::after {
    content: "·";
    position: absolute;
    bottom: 14px;
    left: 16px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 18px;
    font-weight: 700;
    pointer-events: none;
}

/* ============ 4. /home WINE TEASER (.wine-track) READABILITY (P1) ============ */
@media (min-width: 901px) and (max-width: 1199px) {
    body.page-home .wine-track { grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
    body.page-home .wine-card .wine-title { font-size: 15px; line-height: 1.2; }
    body.page-home .wine-card .wine-meta { font-size: 11px; }
    body.page-home .wine-card .wine-price { font-size: 14px; }
}
@media (min-width: 600px) and (max-width: 900px) {
    body.page-home .wine-track { grid-template-columns: 1fr 1fr; gap: 10px; }
    body.page-home .wine-card .wine-title { font-size: 15px; }
}
@media (max-width: 599px) {
    body.page-home .wine-track { grid-template-columns: 1fr; gap: 8px; }
}

/* ============ 5. LANG-SWITCH TABLET 40 PX TAP TARGET ============ */
@media (min-width: 901px) and (max-width: 1199px) {
    body.page-menu .topbar-lang button,
    body.page-wine .topbar-lang button,
    body.page-scenario .topbar-lang button {
        min-height: 40px;
        min-width: 40px;
        padding: 9px 10px;
        font-size: 12.5px;
    }
    /* Home page lang-switch sits inside the hero — same touch target */
    body.page-home .lang-switch button {
        min-height: 38px;
        font-size: 12.5px;
    }
}

/* ============ 6. /menu CATEGORY GRID — auto-fit clean wrap (P1) ============ */
/* Already auto-fill in the base; reaffirm at the four-of-three boundary
   so the bottom row terminates gracefully without leaving 1 stranded card. */
body.page-menu .categories,
body.page-menu .cat-grid {
    grid-auto-flow: row dense;
}

/* ============================================================
   END STAGE D5 — PUBLIC KIOSK PREMIUM POLISH
   ============================================================ */

/* ============================================================
   STAGE D6 — /wine MOBILE COMPACT (append-only, 2026-04-30)

   Problem: D5 surfaced bottle photos on every wine card. Existing
   responsive rule at line ~4617 stacks photo-on-top under 768px,
   making each wine card ~286-310px tall. With 39 wines that's
   10 screens of scroll on a 412×915 phone (was 6.5 screens
   pre-D5 when the page was text-only).

   Fix: switch phones + tablet portrait wine cards back to a
   compact side-photo layout (similar to the 800×1280 baseline),
   trim the densest text fields, slightly smaller typography.

   Result targets:
     - 412×915 phone:  10  screens → ~5  screens (-50%)
     - 768×1024 tab:    5.2 screens → ~3 screens
     - 800×1280:        unchanged (already side-photo, fine)
     - desktop:         unchanged

   Rollback = remove this block.
   ============================================================ */

/* === 1. <=768 (tablet portrait + phone): side-photo layout === */
@media (max-width: 768px) {
    body.page-menu .promo.promo--wine:not(.promo--no-image),
    body.page-wine .promo:not(.promo--no-image) {
        grid-template-columns: 110px minmax(0, 1fr) !important;
        min-height: 132px !important;
    }
    /* Image: side-bleed left, full card height (vs previous 200px top stack) */
    body.page-wine .promo:not(.promo--no-image) .promo-image {
        height: 100% !important;
        min-height: 0 !important;
        border-radius: 18px 0 0 18px !important;
    }
    /* Existing rule had height:200px+border-radius:20px 20px 0 0 on .promo-photo
       (img-tag wrapper); template-D5 wines use .promo-image instead. Keep
       .promo-photo override scoped to img-driven cards on /menu. */
    body.page-menu .promo.promo--wine:not(.promo--no-image) .promo-photo {
        height: 100% !important;
        width: 100% !important;
        border-radius: 18px 0 0 18px !important;
    }
    body.page-menu .promo.promo--wine:not(.promo--no-image) .promo-photo::before {
        background: linear-gradient(
            to right,
            rgba(0, 0, 0, 0.10),
            rgba(0, 0, 0, 0.00)
        ) !important;
    }
    /* Tighter content rhythm */
    body.page-menu .promo.promo--wine:not(.promo--no-image) .promo-content,
    body.page-wine .promo:not(.promo--no-image) .promo-content {
        padding: 12px 14px !important;
        gap: 3px;
    }
    body.page-wine .promo .promo-title {
        font-size: 14.5px;
        line-height: 1.2;
        margin-bottom: 2px;
    }
    body.page-wine .promo .promo-desc {
        font-size: 11.5px;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        margin-bottom: 0;
    }
    /* Hide italic "Servirati ..." notes line on small viewports — saves
       ~30px per card without losing primary metadata. The notes are still
       in the DOM (data preserved) and re-appear on tablet landscape+. */
    body.page-wine .promo .promo-desc + .promo-desc { display: none; }
    body.page-wine .promo .promo-footer {
        margin-top: 4px;
        padding-top: 6px;
    }
    body.page-wine .promo .promo-price {
        font-size: 16px;
        font-variant-numeric: tabular-nums;
    }
}

/* === 2. <=599 (phone): even tighter === */
@media (max-width: 599px) {
    body.page-menu .promo.promo--wine:not(.promo--no-image),
    body.page-wine .promo:not(.promo--no-image) {
        grid-template-columns: 88px minmax(0, 1fr) !important;
        min-height: 116px !important;
    }
    body.page-wine .promo:not(.promo--no-image) .promo-image {
        border-radius: 16px 0 0 16px !important;
    }
    body.page-menu .promo.promo--wine:not(.promo--no-image) .promo-photo,
    body.page-wine .promo:not(.promo--no-image) .promo-photo {
        border-radius: 16px 0 0 16px !important;
    }
    body.page-menu .promo.promo--wine:not(.promo--no-image) .promo-content,
    body.page-wine .promo:not(.promo--no-image) .promo-content {
        padding: 10px 12px !important;
    }
    body.page-wine .promo .promo-title { font-size: 14px; }
    body.page-wine .promo .promo-desc { font-size: 11px; -webkit-line-clamp: 2; line-clamp: 2; }
    body.page-wine .promo .promo-price { font-size: 15.5px; }
    /* Section heading slightly smaller on phone */
    body.page-wine .subgroup-title { font-size: 16px; margin: 4px 0 8px; }
}

/* ============================================================
   END STAGE D6 — /wine MOBILE COMPACT
   ============================================================ */

/* ============================================================
   STAGE D7 — FINAL PREMIUM RHYTHM + CTA HIERARCHY
   (append-only, 2026-04-30)

   Last-pass polish before public freeze:
     - /scenario card backdrop: stronger bottom gradient so titles
       stay readable on bright dish photos (e.g. whipped cream).
     - /scenario duplicate footer: hide the .sc-info time/price strip
       since the hero already surfaces both metadata fields above.
     - CTA hierarchy: unified primary gold-gradient + soft halo across
       /home / /scenario / /menu detail (one dominant CTA per page).
     - Hover rhythm: subtle translateY(-1) lift on all card surfaces.
     - /home Vinska karta: cleaner header rhythm, calmer separator.
     - Lang-switch tablet (1024 range): tighter gap.

   Does NOT redesign anything. Builds on D5/D6 contracts.
   Rollback = remove this block.
   ============================================================ */

/* === 1. /scenario CARD BACKDROP — guarantee title readability === */
/* Stronger bottom-fade gradient on the photo so title/desc/price keep
   their dark backdrop even on bright photos (cream dishes, eggs, etc.).
   Replaces the existing 0→0.65 fade with 0→0.85, kicking in at 50% so
   the photo's top half stays bright + the bottom half guarantees text
   contrast on any dish color. */
body.page-scenario .sc-card-photo::after {
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) 50%,
        rgba(0, 0, 0, 0.32) 72%,
        rgba(0, 0, 0, 0.78) 92%,
        rgba(0, 0, 0, 0.88) 100%
    );
}

/* Title gets an even stronger text-shadow rim — survives whipped-cream
   level brightness without changing typography. */
body.page-scenario .sc-card-title {
    text-shadow:
        0 2px 14px rgba(0, 0, 0, 0.92),
        0 0 24px rgba(0, 0, 0, 0.55),
        0 1px 3px rgba(0, 0, 0, 0.85);
}
body.page-scenario .sc-card-desc,
body.page-scenario .sc-card-price {
    text-shadow:
        0 1px 8px rgba(0, 0, 0, 0.85),
        0 0 16px rgba(0, 0, 0, 0.5);
}

/* === 2. /scenario DUPLICATE FOOTER DEDUP === */
/* Hero already surfaces time-range (.sc-hero-eyebrow) and price-range
   (.sc-hero-price). The .sc-info strip below the cards repeats both
   verbatim — pure visual noise. Hide CSS-only (DOM preserved for any
   crawler/screen-reader). */
body.page-scenario .sc-info { display: none; }

/* === 3. CTA HIERARCHY UNIFICATION ===
   Single visual language for primary CTAs across all public pages:
   gold gradient + soft gold halo + tactile press. */
body.page-home .qr-btn,
body.page-home .wine-action--primary,
body.page-scenario .sc-btn-primary {
    background: linear-gradient(180deg, #e7c374 0%, #e6a23a 100%);
    color: #1a1306;
    border: 1px solid rgba(230, 162, 58, 0.55);
    box-shadow: 0 6px 18px -8px rgba(230, 162, 58, 0.55);
    transition: box-shadow 180ms ease, transform 90ms ease, border-color 180ms ease;
}
body.page-home .qr-btn:hover,
body.page-home .wine-action--primary:hover,
body.page-scenario .sc-btn-primary:hover {
    box-shadow: 0 8px 24px -8px rgba(230, 162, 58, 0.72);
    border-color: rgba(255, 203, 107, 0.75);
}
body.page-home .qr-btn:active,
body.page-home .wine-action--primary:active,
body.page-scenario .sc-btn-primary:active {
    transform: translateY(1px);
    box-shadow: 0 4px 12px -8px rgba(230, 162, 58, 0.50);
}

/* Secondary CTAs — outline + ghost across /home and /scenario */
body.page-home .wine-action:not(.wine-action--primary),
body.page-scenario .sc-btn-secondary {
    background: transparent;
    border: 1px solid rgba(255, 203, 107, 0.35);
    color: rgba(255, 203, 107, 0.92);
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}
body.page-home .wine-action:not(.wine-action--primary):hover,
body.page-scenario .sc-btn-secondary:hover {
    background: rgba(230, 162, 58, 0.10);
    border-color: rgba(255, 203, 107, 0.65);
    color: #ffffff;
}

/* === 4. HOVER RHYTHM — consistent subtle lift across cards === */
body.page-home .reco-card,
body.page-home .wine-card,
body.page-home .promo,
body.page-home .cat-card {
    transition: transform 180ms cubic-bezier(0.22, 0.9, 0.3, 1),
                box-shadow 220ms ease,
                border-color 180ms ease;
}
body.page-home .reco-card:hover,
body.page-home .wine-card:hover,
body.page-home .cat-card:hover {
    transform: translateY(-2px);
}
body.page-home .promo:hover {
    transform: translateY(-1px);
}
body.page-home .reco-card:active,
body.page-home .wine-card:active,
body.page-home .cat-card:active,
body.page-home .promo:active {
    transform: translateY(0);
}

/* === 5. /home VINSKA KARTA TEASER — cleaner separator rhythm === */
body.page-home .wine-showcase {
    margin-top: clamp(20px, 2vw, 32px);
}
body.page-home .wine-showcase-header {
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 14px;
    align-items: center;
}
body.page-home .wine-showcase-title {
    letter-spacing: 0.005em;
    line-height: 1.15;
}
body.page-home .wine-actions {
    margin-top: 12px;
    gap: 10px;
}
body.page-home .wine-action {
    min-height: 40px;
    padding: 9px 18px;
    font-size: 13px;
    letter-spacing: 0.06em;
    border-radius: 10px;
}

/* === 6. LANG-SWITCH TABLET 1024 RANGE — tighter gap === */
@media (min-width: 901px) and (max-width: 1199px) {
    body.page-home .lang-switch {
        gap: 4px;
    }
    body.page-home .lang-switch button {
        padding: 9px 9px;
        min-height: 38px;
    }
}

/* === 7. PROMO CARD CONSISTENCY (combo / featured on /home) === */
body.page-home .promo {
    transition: transform 180ms ease, box-shadow 220ms ease, border-color 180ms ease;
}
body.page-home .promo .promo-footer {
    align-items: center;
    margin-top: auto;
    padding-top: 8px;
}
body.page-home .promo .promo-cta {
    transition: opacity 180ms ease;
    opacity: 0.85;
}
body.page-home .promo:hover .promo-cta { opacity: 1; }

/* === 8. SUBTLE SHADOW RHYTHM — premium quiet === */
body.page-home .reco-card,
body.page-home .wine-card {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.02) inset,
        0 4px 14px -10px rgba(0, 0, 0, 0.40);
}
body.page-home .reco-card:hover,
body.page-home .wine-card:hover {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.03) inset,
        0 12px 28px -14px rgba(0, 0, 0, 0.55);
}

/* === 9. SECTION HEADING RHYTHM (reaffirm — same gold rule pattern) === */
body.page-home .recos-title,
body.page-home .wine-showcase-title {
    line-height: 1.18;
}

/* === 10. REDUCED MOTION HONOURED === */
@media (prefers-reduced-motion: reduce) {
    body.page-home .reco-card:hover,
    body.page-home .wine-card:hover,
    body.page-home .cat-card:hover,
    body.page-home .promo:hover,
    body.page-home .qr-btn:active,
    body.page-home .wine-action--primary:active,
    body.page-scenario .sc-btn-primary:active { transform: none; }
}

/* ============================================================
   END STAGE D7 — FINAL PREMIUM RHYTHM + CTA HIERARCHY
   ============================================================ */

/* ============================================================
   STAGE 2B.1 — small grill-fire accents (PIVO & KOBAJE).
   Renders existing eyebrow/tag elements as subtle pills tinted
   with --accent-grill (#c0392b). Used sparingly on the phase
   ribbon and the combos/recos rails so "live now / featured /
   special" reads with match-day energy without neon. Touches
   only existing class names — no HTML changes required.
   ============================================================ */
.phase-ribbon-eyebrow,
.phase-ribbon-tag,
.combos-eyebrow,
.recos-eyebrow {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(192, 57, 43, 0.14);
    border: 1px solid rgba(192, 57, 43, 0.45);
    color: #ff8a6a;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    line-height: 1.2;
    vertical-align: middle;
}

/* ============================================================
   STAGE QSR — primary / secondary hierarchy on the home grid.
   Primary cards (PIVO / KOBASICE / BURGERI / GRILL) span 2 of
   the 4 columns and run taller; secondary (PALACINKE / KAFA /
   KOKTELI / PICA) sit in a single row of 4. No new CSS files,
   no rebuild — just a modifier on the existing .cat-card.
   ============================================================ */
body.page-home .categories--smart .cat-card--primary {
    grid-column: span 2;
    min-height: 280px;
}
body.page-home .categories--smart .cat-card--primary .cat-title {
    font-size: clamp(34px, 3.4vw, 50px);
    letter-spacing: 0.02em;
}
body.page-home .categories--smart .cat-card--primary .cat-sub {
    font-size: clamp(14px, 1.05vw, 17px);
}
body.page-home .categories--smart .cat-card--secondary {
    min-height: 160px;
}
body.page-home .categories--smart .cat-card--secondary .cat-title {
    font-size: clamp(20px, 2vw, 28px);
}
body.page-home .categories--smart .cat-card--secondary .cat-sub {
    font-size: clamp(11px, 0.9vw, 13px);
}
@media (max-width: 768px) {
    body.page-home .categories--smart .cat-card--primary {
        grid-column: span 1;
        min-height: 200px;
    }
}

/* ============================================================
   STAGE 4A — GERMAN BEERHOUSE FACADE (HOME ONLY)
   Cinematic full-width hero, premium card depth, brass typography.
   All rules scoped to body.page-home so /menu and other pages stay
   untouched. The legacy .hero-row / .hero / .qr-block tree remains
   in the markup for backward compat but is replaced visually by the
   new .home-hero block. .lang-switch is repositioned to top-right.
   ============================================================ */

/* --- HOME background: deeper coal, subtle vignette ----------------- */
body.page-home {
    background:
        radial-gradient(1200px 700px at 50% -10%, rgba(198, 146, 58, 0.08), transparent 70%),
        radial-gradient(900px 600px at 80% 110%, rgba(198, 146, 58, 0.05), transparent 70%),
        var(--bg-0);
}
body.page-home .container { max-width: none; padding: 0; }
body.page-home .kiosk { padding: 0 0 clamp(24px, 3vw, 56px) 0; gap: clamp(20px, 2vw, 36px); }

/* --- HERO ROW (legacy) — hide; new hero replaces it ---------------- */
body.page-home .hero-row { display: none !important; }

/* --- NEW CINEMATIC HERO -------------------------------------------- */
.home-hero {
    position: relative;
    width: 100%;
    min-height: clamp(360px, 46vh, 560px);
    display: grid;
    grid-template-columns: 1.4fr clamp(220px, 22vw, 320px);
    gap: clamp(24px, 3vw, 56px);
    align-items: center;
    padding: clamp(36px, 5vw, 88px) clamp(24px, 4vw, 80px);
    overflow: hidden;
    isolation: isolate;
    border-bottom: 1px solid var(--line-strong);
    box-shadow: 0 1px 0 rgba(198, 146, 58, 0.10) inset;
}
.home-hero::before {
    /* atmospheric photo background — dark beer / brass / pub */
    content: "";
    position: absolute;
    inset: 0;
    background:
        url('/static/images/beer/toceno_pivo_3.webp') center/cover no-repeat,
        url('/static/images/beer/toceno_pivo_3.jpg') center/cover no-repeat,
        var(--bg-1);
    background-size: cover;
    filter: saturate(0.85) contrast(1.05);
    z-index: -2;
}
.home-hero::after {
    /* layered gradient overlay — dark left for legibility, warm amber bloom on right */
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(95deg,
            rgba(11, 10, 9, 0.94) 0%,
            rgba(11, 10, 9, 0.82) 38%,
            rgba(11, 10, 9, 0.46) 70%,
            rgba(11, 10, 9, 0.62) 100%),
        radial-gradient(800px 500px at 78% 20%, rgba(198, 146, 58, 0.22), transparent 60%),
        radial-gradient(700px 500px at 82% 95%, rgba(198, 146, 58, 0.12), transparent 60%);
    z-index: -1;
}

.home-hero-content {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 1.6vw, 26px);
    max-width: 720px;
    min-width: 0;
}
.home-hero-eyebrow {
    font-size: clamp(11px, 0.85vw, 13px);
    letter-spacing: 0.32em;
    font-weight: 600;
    color: var(--accent-2);
    text-transform: uppercase;
    line-height: 1.4;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}
.home-hero-title {
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
    font-size: clamp(46px, 7vw, 110px);
    font-weight: 900;
    letter-spacing: 0.01em;
    line-height: 0.95;
    color: var(--text);
    text-transform: uppercase;
    text-shadow:
        0 2px 0 rgba(0, 0, 0, 0.4),
        0 30px 80px rgba(0, 0, 0, 0.7);
    background: linear-gradient(180deg, #fff7e2 0%, #efe7d2 55%, #c6923a 130%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
}
.home-hero-tagline {
    font-size: clamp(15px, 1.3vw, 21px);
    line-height: 1.45;
    color: var(--text);
    font-weight: 400;
    max-width: 56ch;
    opacity: 0.94;
    margin: 0;
}
.home-hero-tagline em {
    font-style: normal;
    color: var(--accent-2);
    font-weight: 600;
}
.home-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(10px, 1vw, 18px);
    margin-top: clamp(8px, 1vw, 18px);
}
.home-hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: clamp(14px, 1.4vw, 20px) clamp(22px, 2.4vw, 36px);
    font-size: clamp(13px, 1vw, 16px);
    font-weight: 700;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 4px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
    line-height: 1;
    white-space: nowrap;
}
.home-hero-btn--primary {
    background: linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 100%);
    color: #1b1206;
    box-shadow:
        0 14px 36px rgba(198, 146, 58, 0.35),
        0 1px 0 rgba(255, 230, 170, 0.6) inset;
}
.home-hero-btn--primary:hover {
    transform: translateY(-1px);
    box-shadow:
        0 18px 44px rgba(198, 146, 58, 0.45),
        0 1px 0 rgba(255, 230, 170, 0.7) inset;
}
.home-hero-btn--ghost {
    background: rgba(11, 10, 9, 0.55);
    color: var(--text);
    border-color: rgba(239, 231, 210, 0.30);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.home-hero-btn--ghost:hover {
    background: rgba(23, 19, 17, 0.75);
    border-color: var(--accent-2);
    color: var(--accent-2);
}
.home-hero-btn:active { transform: translateY(0); }

/* QR + lang strip on the right side of the hero */
.home-hero-aside {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 1.4vw, 22px);
    align-items: stretch;
    justify-self: end;
    width: 100%;
    max-width: 320px;
}
.home-hero-qr {
    background: rgba(11, 10, 9, 0.55);
    border: 1px solid rgba(239, 231, 210, 0.18);
    border-radius: 14px;
    padding: clamp(14px, 1.2vw, 22px);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    text-align: center;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.4);
}
.home-hero-qr img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    background: #fff;
    padding: 8px;
}
.home-hero-qr-label {
    margin-top: clamp(8px, 0.8vw, 12px);
    font-size: clamp(10px, 0.7vw, 12px);
    letter-spacing: 0.22em;
    color: var(--text-dim);
    text-transform: uppercase;
    line-height: 1.3;
}

.home-hero-lang {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
    background: rgba(11, 10, 9, 0.55);
    border: 1px solid rgba(239, 231, 210, 0.14);
    border-radius: 10px;
    padding: 6px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.home-hero-lang button {
    appearance: none;
    border: none;
    background: transparent;
    color: rgba(239, 231, 210, 0.6);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 6px 9px;
    min-width: 30px;
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}
.home-hero-lang button:hover { color: var(--text); background: rgba(239, 231, 210, 0.08); }
.home-hero-lang button.active {
    color: #1b1206;
    background: linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 100%);
}

/* --- SECTION HEADER between hero and category grid ---------------- */
.home-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    padding: clamp(8px, 1vw, 18px) clamp(24px, 4vw, 80px) 0 clamp(24px, 4vw, 80px);
    flex-wrap: wrap;
}
.home-section-eyebrow {
    font-size: clamp(10px, 0.78vw, 12px);
    letter-spacing: 0.32em;
    color: var(--accent-2);
    font-weight: 700;
    text-transform: uppercase;
}
.home-section-title {
    font-size: clamp(20px, 1.8vw, 28px);
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--text);
    text-transform: uppercase;
    line-height: 1.2;
    margin: 4px 0 0 0;
}
.home-section-rule {
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, var(--line-strong), transparent 80%);
    align-self: center;
    min-width: 80px;
}

/* --- CATEGORIES BAND padding so it doesn't touch screen edge ------- */
body.page-home .categories-row {
    padding: 0 clamp(24px, 4vw, 80px);
}

/* --- PRIMARY CARDS: bigger, more cinematic ------------------------- */
body.page-home .categories--smart .cat-card--primary {
    min-height: clamp(280px, 30vh, 400px);
    padding: clamp(28px, 2.4vw, 44px);
    border-radius: 18px;
    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.55),
        0 1px 0 rgba(239, 231, 210, 0.06) inset;
}
body.page-home .categories--smart .cat-card--primary::after {
    /* deeper bottom-up vignette for cinematic title legibility */
    background:
        linear-gradient(180deg,
            rgba(11, 10, 9, 0.10) 0%,
            rgba(11, 10, 9, 0.55) 45%,
            rgba(11, 10, 9, 0.96) 100%),
        radial-gradient(140% 90% at 50% 110%, rgba(198, 146, 58, 0.22), transparent 60%);
}
body.page-home .categories--smart .cat-card--primary .cat-title {
    font-size: clamp(26px, 2.6vw, 38px);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.05;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}
body.page-home .categories--smart .cat-card--primary .cat-sub {
    font-size: clamp(12px, 0.95vw, 15px);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-2);
    margin-top: clamp(6px, 0.6vw, 10px);
    font-weight: 600;
    opacity: 0.95;
}
body.page-home .categories--smart .cat-card--primary:hover {
    border-color: var(--accent);
    box-shadow:
        0 36px 100px rgba(198, 146, 58, 0.18),
        0 28px 80px rgba(0, 0, 0, 0.55),
        0 1px 0 rgba(239, 231, 210, 0.10) inset;
}

/* --- SECONDARY CARDS: cleaner, tighter, more structured ------------ */
body.page-home .categories--smart .cat-card--secondary {
    min-height: clamp(140px, 14vw, 180px);
    padding: clamp(18px, 1.6vw, 26px);
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
body.page-home .categories--smart .cat-card--secondary::after {
    background:
        linear-gradient(180deg,
            rgba(11, 10, 9, 0.18) 0%,
            rgba(11, 10, 9, 0.62) 50%,
            rgba(11, 10, 9, 0.94) 100%);
}
body.page-home .categories--smart .cat-card--secondary .cat-title {
    font-size: clamp(15px, 1.25vw, 19px);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.1;
}
body.page-home .categories--smart .cat-card--secondary .cat-sub {
    font-size: clamp(10px, 0.78vw, 12px);
    letter-spacing: 0.10em;
    color: rgba(239, 231, 210, 0.72);
    text-transform: none;
    margin-top: 4px;
    font-weight: 500;
}
body.page-home .categories--smart .cat-card--secondary:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 22px 54px rgba(198, 146, 58, 0.16), 0 18px 44px rgba(0, 0, 0, 0.45);
}

/* --- arrow chip (minimal, brass) ----------------------------------- */
body.page-home .categories--smart .cat-card .cat-arrow {
    width: 36px;
    height: 36px;
    background: rgba(11, 10, 9, 0.62);
    border: 1px solid rgba(239, 231, 210, 0.20);
    border-radius: 50%;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s ease, border-color 0.18s ease;
}
body.page-home .categories--smart .cat-card:hover .cat-arrow {
    background: var(--accent);
    border-color: var(--accent-2);
}
body.page-home .categories--smart .cat-card:hover .cat-arrow svg { stroke: #1b1206; }

/* --- responsive HERO ---------------------------------------------- */
@media (max-width: 900px) {
    .home-hero {
        grid-template-columns: 1fr;
        min-height: clamp(380px, 60vh, 540px);
        padding: clamp(28px, 6vw, 48px) clamp(20px, 5vw, 36px);
        gap: clamp(20px, 4vw, 32px);
    }
    .home-hero-aside {
        max-width: none;
        flex-direction: row;
        align-items: center;
        justify-self: stretch;
        gap: 16px;
    }
    .home-hero-qr {
        flex: 0 0 100px;
        padding: 8px;
    }
    .home-hero-qr-label { display: none; }
    .home-hero-lang {
        flex: 1 1 auto;
        justify-content: flex-start;
    }
    body.page-home .categories-row {
        padding: 0 clamp(20px, 5vw, 36px);
    }
    body.page-home .categories--smart .cat-card--primary {
        min-height: clamp(220px, 30vh, 280px);
    }
}
@media (max-width: 540px) {
    .home-hero {
        min-height: clamp(420px, 70vh, 560px);
    }
    .home-hero-cta { flex-direction: column; }
    .home-hero-btn { width: 100%; }
    .home-hero-aside { flex-direction: column; }
    .home-hero-qr { flex: 0 0 auto; max-width: 140px; align-self: center; }
}
/* ============================================================
   END STAGE 4A
   ============================================================ */

/* ============================================================
   STAGE 4B — REAL GERMAN BEERHOUSE FACADE
   Comes AFTER Stage 4A so it wins by source order.
   New web fonts (Bebas Neue + Cormorant SC) + much heavier
   atmosphere (multi-gradient + brass framing + SVG noise).
   Above-the-fold dramatically cleaned: recos, combos, phase
   ribbon, demo spotlight all hidden on home — those were the
   wine-contamination surfaces. Categories grid kept and
   redesigned with brass dividers + Cormorant eyebrows.
   ============================================================ */

@font-face {
    font-family: "Bebas Neue";
    src: url("/static/fonts/stage4b/BebasNeue-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Cormorant SC";
    src: url("/static/fonts/stage4b/CormorantSC-Regular.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Cormorant SC";
    src: url("/static/fonts/stage4b/CormorantSC-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Inter Display";
    src: url("/static/fonts/stage4b/Inter-Bold.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* ───── ABOVE-THE-FOLD CLEANUP (HOME) ───── */
/* Hide everything that's not the hero or the categories grid on /. */
body.page-home .recos,
body.page-home .recos--spotlight,
body.page-home .combos,
body.page-home .combos--demo,
body.page-home .combos--lunch,
body.page-home .combos--dinner,
body.page-home .combos--breakfast,
body.page-home .combos--late,
body.page-home .phase-ribbon,
body.page-home .features,
body.page-home .wine-showcase,
body.page-home .top-row,
body.page-home .top-nav,
body.page-home .categories.smart-cards-row {
    display: none !important;
}

/* ───── HOME PAGE BACKGROUND — coal + film grain ───── */
body.page-home {
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch' seed='5'/><feColorMatrix values='0 0 0 0 0.78 0 0 0 0 0.58 0 0 0 0 0.18 0 0 0 0.10 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
        radial-gradient(1400px 900px at 50% -10%, rgba(198, 146, 58, 0.10), transparent 70%),
        radial-gradient(1200px 800px at 100% 110%, rgba(198, 146, 58, 0.06), transparent 70%),
        var(--bg-0);
    background-attachment: fixed, fixed, fixed, fixed;
    background-blend-mode: overlay, normal, normal, normal;
}

/* ───── HERO — full-bleed cinematic with multi-layered atmosphere ───── */
body.page-home .home-hero {
    position: relative;
    min-height: clamp(560px, 85vh, 880px);
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    align-items: center;
    justify-items: center;
    padding: clamp(48px, 8vw, 120px) clamp(24px, 5vw, 96px);
    overflow: hidden;
    isolation: isolate;
    border-bottom: none;
    box-shadow: inset 0 -1px 0 rgba(198, 146, 58, 0.20);
}
body.page-home .home-hero::before {
    /* deep atmospheric backdrop — heavy gradient stack, no isolated photo */
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 120% 80% at 50% 0%, rgba(198, 146, 58, 0.32), transparent 55%),
        radial-gradient(ellipse 80% 60% at 50% 110%, rgba(198, 146, 58, 0.10), transparent 60%),
        radial-gradient(ellipse 60% 80% at 0% 50%, rgba(40, 28, 18, 0.96), transparent 70%),
        radial-gradient(ellipse 60% 80% at 100% 50%, rgba(40, 28, 18, 0.96), transparent 70%),
        linear-gradient(180deg, #0e0a07 0%, #1a120a 35%, #2a1d11 65%, #120c08 100%);
    z-index: -3;
}
body.page-home .home-hero::after {
    /* warm key light + film grain composited on top of the gradient */
    content: "";
    position: absolute;
    inset: 0;
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch' seed='9'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 0.85 0 0 0 0 0.55 0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
        radial-gradient(circle 600px at 70% 30%, rgba(240, 210, 139, 0.18), transparent 70%);
    background-blend-mode: overlay, screen;
    pointer-events: none;
    z-index: -2;
    opacity: 0.85;
}

/* Brass top-band frame */
body.page-home .home-hero > .home-hero-content::before {
    content: "";
    position: absolute;
    top: clamp(20px, 3vw, 40px);
    left: clamp(24px, 5vw, 96px);
    right: clamp(24px, 5vw, 96px);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(240, 210, 139, 0.55) 20%, rgba(240, 210, 139, 0.85) 50%, rgba(240, 210, 139, 0.55) 80%, transparent);
    z-index: 0;
}
body.page-home .home-hero > .home-hero-content::after {
    content: "";
    position: absolute;
    bottom: clamp(20px, 3vw, 40px);
    left: clamp(24px, 5vw, 96px);
    right: clamp(24px, 5vw, 96px);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(240, 210, 139, 0.45) 20%, rgba(240, 210, 139, 0.70) 50%, rgba(240, 210, 139, 0.45) 80%, transparent);
    z-index: 0;
}

body.page-home .home-hero-content {
    position: relative;
    width: 100%;
    max-width: 1100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(18px, 2vw, 32px);
    padding: clamp(40px, 6vw, 80px) 0;
}

/* Cormorant SC eyebrow — premium small-caps serif */
body.page-home .home-hero-eyebrow {
    font-family: "Cormorant SC", "Cormorant", Georgia, serif;
    font-size: clamp(13px, 1.1vw, 17px);
    font-weight: 600;
    letter-spacing: 0.42em;
    color: var(--accent-2);
    text-transform: uppercase;
    line-height: 1.4;
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.7);
    padding: 4px 0;
}
body.page-home .home-hero-eyebrow::before,
body.page-home .home-hero-eyebrow::after {
    content: "·";
    color: var(--accent);
    margin: 0 0.6em;
    opacity: 0.7;
}

/* Bebas Neue title — German industrial display, massive scale */
body.page-home .home-hero-title {
    font-family: "Bebas Neue", "Oswald", "Bahnschrift", "Inter", sans-serif;
    font-size: clamp(72px, 11vw, 200px);
    font-weight: 400;     /* Bebas only ships at 400 */
    letter-spacing: 0.02em;
    line-height: 0.85;
    color: var(--text);
    text-transform: uppercase;
    background: linear-gradient(180deg,
        #fff8e6 0%,
        #f0d28b 35%,
        #c6923a 70%,
        #6b4517 105%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow:
        0 2px 0 rgba(0, 0, 0, 0.6),
        0 36px 100px rgba(0, 0, 0, 0.85);
    margin: 0;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.6));
}

body.page-home .home-hero-tagline {
    font-family: "Cormorant SC", Georgia, serif;
    font-size: clamp(15px, 1.4vw, 22px);
    font-weight: 500;
    line-height: 1.6;
    color: var(--text);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    max-width: 60ch;
    opacity: 0.92;
    margin: 4px 0 0 0;
}
body.page-home .home-hero-tagline em {
    font-style: normal;
    color: var(--accent-2);
    font-weight: 600;
    letter-spacing: 0.22em;
}

body.page-home .home-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(14px, 1.4vw, 22px);
    margin-top: clamp(16px, 2vw, 28px);
    justify-content: center;
}
body.page-home .home-hero-btn {
    font-family: "Inter Display", "Inter", system-ui, sans-serif;
    font-size: clamp(13px, 1.05vw, 16px);
    font-weight: 800;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    padding: clamp(16px, 1.6vw, 22px) clamp(28px, 3vw, 42px);
    border-radius: 2px;
    line-height: 1;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
body.page-home .home-hero-btn--primary {
    background: linear-gradient(180deg, #f4d98a 0%, #c6923a 60%, #8a5e1f 100%);
    color: #1b1206;
    border: 1px solid rgba(255, 230, 170, 0.7);
    box-shadow:
        0 18px 52px rgba(198, 146, 58, 0.45),
        0 1px 0 rgba(255, 245, 220, 0.7) inset,
        0 -1px 0 rgba(80, 50, 12, 0.7) inset;
}
body.page-home .home-hero-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow:
        0 24px 64px rgba(198, 146, 58, 0.55),
        0 1px 0 rgba(255, 245, 220, 0.8) inset,
        0 -1px 0 rgba(80, 50, 12, 0.7) inset;
}
body.page-home .home-hero-btn--ghost {
    background: rgba(11, 10, 9, 0.45);
    color: var(--text);
    border: 1px solid rgba(240, 210, 139, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
body.page-home .home-hero-btn--ghost:hover {
    background: rgba(40, 28, 18, 0.65);
    border-color: var(--accent-2);
    color: var(--accent-2);
}

/* QR + lang aside positioned absolute top-right */
body.page-home .home-hero-aside {
    position: absolute;
    top: clamp(20px, 3vw, 40px);
    right: clamp(20px, 4vw, 60px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-end;
    z-index: 2;
    max-width: 160px;
}
body.page-home .home-hero-qr {
    background: rgba(11, 10, 9, 0.65);
    border: 1px solid rgba(240, 210, 139, 0.3);
    border-radius: 6px;
    padding: 10px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6);
}
body.page-home .home-hero-qr img {
    aspect-ratio: 1 / 1;
    width: 110px;
    height: 110px;
    border-radius: 4px;
    background: #fff;
    padding: 6px;
}
body.page-home .home-hero-qr-label {
    font-family: "Cormorant SC", Georgia, serif;
    margin-top: 8px;
    font-size: 10px;
    letter-spacing: 0.32em;
    color: rgba(240, 210, 139, 0.85);
    text-transform: uppercase;
    text-align: center;
    line-height: 1.3;
}
body.page-home .home-hero-lang {
    background: rgba(11, 10, 9, 0.55);
    border: 1px solid rgba(240, 210, 139, 0.20);
    border-radius: 4px;
    padding: 4px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    backdrop-filter: blur(6px);
}
body.page-home .home-hero-lang button {
    font-family: "Inter Display", system-ui, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    padding: 5px 6px;
    min-width: 0;
    border-radius: 2px;
}
body.page-home .home-hero-lang button.active {
    background: linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 100%);
    color: #1b1206;
}

/* ───── SECTION HEADER ───── */
body.page-home .home-section-header {
    padding: clamp(32px, 4vw, 64px) clamp(24px, 5vw, 96px) 0;
    align-items: baseline;
    gap: clamp(16px, 2vw, 32px);
}
body.page-home .home-section-eyebrow {
    font-family: "Cormorant SC", Georgia, serif;
    font-size: clamp(11px, 0.95vw, 14px);
    letter-spacing: 0.42em;
    color: var(--accent-2);
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.2;
}
body.page-home .home-section-title {
    font-family: "Bebas Neue", "Oswald", "Inter", sans-serif;
    font-size: clamp(28px, 3vw, 44px);
    font-weight: 400;
    letter-spacing: 0.05em;
    color: var(--text);
    text-transform: uppercase;
    line-height: 1.1;
    margin: 6px 0 0 0;
}
body.page-home .home-section-rule {
    height: 1px;
    background: linear-gradient(90deg, var(--accent-2) 0%, rgba(198, 146, 58, 0.35) 30%, transparent 100%);
    flex: 1 1 auto;
    align-self: end;
    margin-bottom: 14px;
    min-width: 100px;
    opacity: 0.8;
}

/* ───── CARD GRID — premium beerhouse panels ───── */
body.page-home .categories-row {
    padding: clamp(20px, 3vw, 36px) clamp(24px, 5vw, 96px) clamp(40px, 5vw, 80px);
}
body.page-home .categories--smart {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(14px, 1.4vw, 22px);
}

/* PRIMARY: 4 large food banners — full row at top of grid */
body.page-home .categories--smart .cat-card--primary {
    grid-column: span 1;
    min-height: clamp(220px, 26vh, 320px);
    padding: clamp(22px, 1.8vw, 30px);
    border-radius: 8px;
    border: 1px solid rgba(240, 210, 139, 0.18);
    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.55),
        0 1px 0 rgba(240, 210, 139, 0.10) inset;
    position: relative;
}
body.page-home .categories--smart .cat-card--primary::after {
    background:
        linear-gradient(180deg, rgba(11, 10, 9, 0.20) 0%, rgba(11, 10, 9, 0.55) 50%, rgba(11, 10, 9, 0.97) 100%),
        radial-gradient(120% 80% at 50% 110%, rgba(198, 146, 58, 0.20), transparent 60%);
}
/* brass top-rule on every primary card */
body.page-home .categories--smart .cat-card--primary > .cat-content::before {
    content: "";
    position: absolute;
    top: 16px;
    left: 16px;
    right: 16px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(240, 210, 139, 0.55), transparent);
    z-index: 2;
}
body.page-home .categories--smart .cat-card--primary .cat-title {
    font-family: "Bebas Neue", "Oswald", "Inter", sans-serif;
    font-size: clamp(22px, 2.4vw, 36px);
    font-weight: 400;
    letter-spacing: 0.04em;
    line-height: 1.0;
    color: var(--text);
    text-transform: uppercase;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85);
    margin-bottom: 6px;
}
body.page-home .categories--smart .cat-card--primary .cat-sub {
    font-family: "Cormorant SC", Georgia, serif;
    font-size: clamp(10px, 0.8vw, 12px);
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--accent-2);
    opacity: 0.9;
    line-height: 1.4;
}
body.page-home .categories--smart .cat-card--primary:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
    box-shadow:
        0 38px 90px rgba(198, 146, 58, 0.18),
        0 30px 70px rgba(0, 0, 0, 0.55),
        0 1px 0 rgba(240, 210, 139, 0.18) inset;
}

/* SECONDARY: smaller, cleaner, tighter type */
body.page-home .categories--smart .cat-card--secondary {
    min-height: clamp(120px, 12vw, 150px);
    padding: clamp(16px, 1.4vw, 22px);
    border-radius: 6px;
    border: 1px solid rgba(240, 210, 139, 0.10);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
    position: relative;
}
body.page-home .categories--smart .cat-card--secondary::after {
    background:
        linear-gradient(180deg, rgba(11, 10, 9, 0.30) 0%, rgba(11, 10, 9, 0.70) 50%, rgba(11, 10, 9, 0.95) 100%);
}
body.page-home .categories--smart .cat-card--secondary .cat-title {
    font-family: "Bebas Neue", "Oswald", "Inter", sans-serif;
    font-size: clamp(14px, 1.3vw, 19px);
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.05;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85);
}
body.page-home .categories--smart .cat-card--secondary .cat-sub {
    font-family: "Inter", system-ui, sans-serif;
    font-size: clamp(9.5px, 0.72vw, 11px);
    letter-spacing: 0.10em;
    color: rgba(240, 210, 139, 0.65);
    text-transform: uppercase;
    margin-top: 4px;
    font-weight: 500;
}
body.page-home .categories--smart .cat-card--secondary:hover {
    border-color: rgba(240, 210, 139, 0.45);
    transform: translateY(-2px);
    box-shadow: 0 22px 48px rgba(198, 146, 58, 0.14), 0 16px 36px rgba(0, 0, 0, 0.45);
}

/* arrow chip — subtle brass corner mark */
body.page-home .categories--smart .cat-card .cat-arrow {
    width: 28px;
    height: 28px;
    background: rgba(11, 10, 9, 0.55);
    border: 1px solid rgba(240, 210, 139, 0.30);
    border-radius: 2px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background 0.2s ease, border-color 0.2s ease;
}
body.page-home .categories--smart .cat-card--primary .cat-arrow { width: 36px; height: 36px; }
body.page-home .categories--smart .cat-card:hover .cat-arrow {
    background: var(--accent);
    border-color: var(--accent-2);
}
body.page-home .categories--smart .cat-card:hover .cat-arrow svg { stroke: #1b1206; }

/* ───── popular tile (the "Popularno" item rendered separately) ───── */
body.page-home .categories .cat-popular {
    display: none !important;
}

/* ───── RESPONSIVE ───── */
@media (max-width: 1100px) {
    body.page-home .categories--smart {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    body.page-home .home-hero-aside { max-width: 130px; }
    body.page-home .home-hero-qr img { width: 90px; height: 90px; }
}
@media (max-width: 900px) {
    body.page-home .home-hero {
        min-height: clamp(520px, 80vh, 720px);
        padding: clamp(40px, 8vw, 80px) clamp(20px, 5vw, 40px);
    }
    body.page-home .categories--smart {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 540px) {
    body.page-home .home-hero {
        min-height: clamp(580px, 95vh, 760px);
        padding: clamp(80px, 18vw, 120px) clamp(20px, 5vw, 32px) clamp(40px, 8vw, 64px);
    }
    body.page-home .home-hero-aside {
        position: absolute;
        top: 16px;
        right: 16px;
        flex-direction: row;
        gap: 8px;
        max-width: none;
        align-items: flex-start;
    }
    body.page-home .home-hero-qr { padding: 6px; }
    body.page-home .home-hero-qr img { width: 72px; height: 72px; }
    body.page-home .home-hero-qr-label { display: none; }
    body.page-home .home-hero-lang {
        grid-template-columns: repeat(3, 1fr);
    }
    body.page-home .home-hero-cta { flex-direction: column; width: 100%; }
    body.page-home .home-hero-btn { width: 100%; }
    body.page-home .categories--smart {
        grid-template-columns: 1fr;
    }
    body.page-home .categories--smart .cat-card--primary {
        min-height: 200px;
    }
}
/* ============================================================
   END STAGE 4B
   ============================================================ */

/* ============================================================
   STAGE 4C — ATMOSPHERE REFINEMENT
   CSS-only. Comes after Stage 4B so it wins by source order.
   Targets: warmer cinematic hero lighting, anchored logo,
   softer QR, deeper card materiality, German-precision spacing.
   ============================================================ */

/* ───── HERO: tighter composition + warm spotlight ───── */
body.page-home .home-hero {
    /* shorter than 4B (was 85vh) so logo doesn't float in dead air */
    min-height: clamp(540px, 72vh, 760px);
    padding: clamp(40px, 5vw, 88px) clamp(24px, 5vw, 96px);
}

/* Replace 4B's flat coal gradient with a warm cinematic stack:
   horizon glow + warm spotlight + bar-counter reflection + dark vignette. */
body.page-home .home-hero::before {
    background:
        /* warm bar-light spotlight directly behind the logo */
        radial-gradient(ellipse 70% 50% at 50% 42%, rgba(240, 200, 130, 0.28), transparent 55%),
        /* secondary warmer halo */
        radial-gradient(ellipse 50% 35% at 50% 45%, rgba(255, 215, 140, 0.18), transparent 60%),
        /* horizon glow — implies a lit bar behind */
        radial-gradient(ellipse 130% 18% at 50% 78%, rgba(198, 146, 58, 0.22), transparent 70%),
        /* darken the corners — vignette */
        radial-gradient(ellipse 80% 70% at 0% 0%, rgba(0, 0, 0, 0.55), transparent 60%),
        radial-gradient(ellipse 80% 70% at 100% 0%, rgba(0, 0, 0, 0.55), transparent 60%),
        radial-gradient(ellipse 80% 60% at 50% 100%, rgba(0, 0, 0, 0.65), transparent 70%),
        /* base — warm coal, not cold black */
        linear-gradient(180deg, #0d0805 0%, #1c130b 38%, #2d1d11 70%, #160e08 100%);
    z-index: -3;
}

/* Subtle smoke / film-grain overlay — kept very faint */
body.page-home .home-hero::after {
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch' seed='13'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 0.86 0 0 0 0 0.55 0 0 0 0.10 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    opacity: 0.55;
    mix-blend-mode: overlay;
    pointer-events: none;
}

/* Tighter content stack — kill dead vertical air */
body.page-home .home-hero-content {
    gap: clamp(12px, 1.4vw, 22px);
    padding: clamp(20px, 3vw, 40px) 0;
    max-width: 980px;
}

/* Brass framing — slimmer, more confident */
body.page-home .home-hero > .home-hero-content::before,
body.page-home .home-hero > .home-hero-content::after {
    background: linear-gradient(90deg, transparent 5%, rgba(240, 210, 139, 0.40) 25%, rgba(240, 210, 139, 0.85) 50%, rgba(240, 210, 139, 0.40) 75%, transparent 95%);
}

/* Eyebrow — reduce dot spam, keep premium feel */
body.page-home .home-hero-eyebrow {
    color: var(--accent-2);
    opacity: 0.78;
    letter-spacing: 0.46em;
    font-size: clamp(11px, 0.9vw, 14px);
}
body.page-home .home-hero-eyebrow::before,
body.page-home .home-hero-eyebrow::after {
    content: "—";
    color: var(--accent);
    opacity: 0.6;
    margin: 0 0.9em;
    font-weight: 400;
    letter-spacing: 0;
}

/* Title — anchor with under-glow drop-shadow, lift mid-tones */
body.page-home .home-hero-title {
    font-size: clamp(64px, 9.5vw, 168px);
    line-height: 0.88;
    background: linear-gradient(180deg,
        #fff8e6 0%,
        #f4d98a 28%,
        #d3a04a 65%,
        #8a5e24 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter:
        drop-shadow(0 0 50px rgba(240, 200, 130, 0.35))
        drop-shadow(0 8px 24px rgba(0, 0, 0, 0.7))
        drop-shadow(0 2px 0 rgba(0, 0, 0, 0.5));
}

/* Tagline — softer, less SHOUTY */
body.page-home .home-hero-tagline {
    font-size: clamp(13px, 1.15vw, 18px);
    letter-spacing: 0.22em;
    opacity: 0.84;
    color: rgba(240, 210, 139, 0.92);
}
body.page-home .home-hero-tagline em {
    color: #f4d98a;
    font-weight: 600;
}

/* CTAs — smaller, denser, more European */
body.page-home .home-hero-cta { gap: 14px; margin-top: clamp(12px, 1.5vw, 20px); }
body.page-home .home-hero-btn {
    padding: 14px 30px;
    font-size: clamp(11.5px, 0.85vw, 13px);
    letter-spacing: 0.32em;
    border-radius: 1px;
}
body.page-home .home-hero-btn--primary {
    background: linear-gradient(180deg, #f0d28b 0%, #c6923a 55%, #7a5118 100%);
    border: 1px solid rgba(240, 210, 139, 0.55);
    box-shadow:
        0 14px 40px rgba(198, 146, 58, 0.38),
        0 1px 0 rgba(255, 245, 220, 0.5) inset,
        0 -1px 0 rgba(60, 38, 8, 0.5) inset;
}
body.page-home .home-hero-btn--ghost {
    background: rgba(13, 8, 5, 0.40);
    border-color: rgba(240, 210, 139, 0.35);
}

/* ───── QR ASIDE: integrate into design, no admin-widget feel ───── */
body.page-home .home-hero-aside {
    top: clamp(16px, 2.4vw, 32px);
    right: clamp(16px, 3vw, 48px);
    gap: 8px;
    max-width: 130px;
    opacity: 0.85;
    transition: opacity 0.3s ease;
}
body.page-home .home-hero-aside:hover { opacity: 1; }

body.page-home .home-hero-qr {
    background: linear-gradient(160deg, rgba(28, 19, 11, 0.78) 0%, rgba(13, 8, 5, 0.65) 100%);
    border: 1px solid rgba(240, 210, 139, 0.18);
    border-radius: 4px;
    padding: 8px;
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.5),
        0 1px 0 rgba(240, 210, 139, 0.15) inset;
    backdrop-filter: blur(14px) saturate(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
}
body.page-home .home-hero-qr img {
    /* warm cream bg instead of stark white */
    background: #f4ead2;
    padding: 5px;
    width: 92px;
    height: 92px;
    border-radius: 2px;
    filter: contrast(1.05);
}
body.page-home .home-hero-qr-label {
    font-size: 9px;
    letter-spacing: 0.38em;
    color: rgba(240, 210, 139, 0.55);
    margin-top: 6px;
}

body.page-home .home-hero-lang {
    background: rgba(13, 8, 5, 0.55);
    border-color: rgba(240, 210, 139, 0.14);
    padding: 3px;
}
body.page-home .home-hero-lang button {
    font-size: 9.5px;
    padding: 4px 5px;
}

/* ───── SECTION HEADER: less shouty, more engineered ───── */
body.page-home .home-section-header {
    padding-top: clamp(40px, 5vw, 72px);
}
body.page-home .home-section-eyebrow { opacity: 0.78; }
body.page-home .home-section-title {
    font-size: clamp(24px, 2.6vw, 38px);
    color: rgba(239, 231, 210, 0.95);
}

/* ───── CARDS: warmer overlays, brass accents, subtle materiality ───── */

/* All cards on home: warmer dark base, German-precision border radius */
body.page-home .categories--smart .cat-card {
    border-radius: 6px;
    background: linear-gradient(160deg, #1c1308 0%, #100a06 100%);
    /* slight inner glow to suggest brass framing */
    box-shadow:
        0 22px 48px rgba(0, 0, 0, 0.55),
        0 1px 0 rgba(240, 210, 139, 0.08) inset,
        0 -1px 0 rgba(0, 0, 0, 0.5) inset;
}

/* PRIMARY: feature feeling — lift photo, warmer overlay, depth */
body.page-home .categories--smart .cat-card--primary {
    min-height: clamp(240px, 28vh, 340px);
    padding: clamp(22px, 1.8vw, 32px);
    border: 1px solid rgba(240, 210, 139, 0.16);
    box-shadow:
        0 32px 70px rgba(0, 0, 0, 0.55),
        0 1px 0 rgba(240, 210, 139, 0.14) inset,
        0 -1px 0 rgba(0, 0, 0, 0.5) inset;
}
body.page-home .categories--smart .cat-card--primary::after {
    /* warmer overlay — less black, more warm brown bottom-up vignette */
    background:
        linear-gradient(180deg,
            rgba(28, 19, 11, 0.05) 0%,
            rgba(28, 19, 11, 0.45) 45%,
            rgba(13, 8, 5, 0.92) 100%),
        radial-gradient(140% 80% at 50% 110%, rgba(198, 146, 58, 0.22), transparent 60%);
}
/* slight image lift (the ::before holds the bg image) */
body.page-home .categories--smart .cat-card--primary::before {
    filter: saturate(1.10) contrast(1.05) brightness(1.06);
}

/* Brass top-rule — slightly stronger, more visible */
body.page-home .categories--smart .cat-card--primary > .cat-content::before {
    background: linear-gradient(90deg, transparent 8%, rgba(240, 210, 139, 0.65) 30%, rgba(240, 210, 139, 0.85) 50%, rgba(240, 210, 139, 0.65) 70%, transparent 92%);
    height: 1px;
}

body.page-home .categories--smart .cat-card--primary .cat-title {
    text-shadow:
        0 2px 14px rgba(0, 0, 0, 0.95),
        0 0 28px rgba(0, 0, 0, 0.55);
}
body.page-home .categories--smart .cat-card--primary .cat-sub {
    color: rgba(244, 217, 138, 0.92);
    opacity: 0.96;
}

body.page-home .categories--smart .cat-card--primary:hover {
    border-color: rgba(244, 217, 138, 0.45);
    box-shadow:
        0 36px 90px rgba(198, 146, 58, 0.18),
        0 28px 70px rgba(0, 0, 0, 0.55),
        0 1px 0 rgba(244, 217, 138, 0.30) inset;
}

/* SECONDARY: compact beerhouse-menu shortcuts — cleaner, smaller, less weight */
body.page-home .categories--smart .cat-card--secondary {
    min-height: clamp(110px, 10vw, 140px);
    padding: clamp(14px, 1.2vw, 20px);
    border: 1px solid rgba(240, 210, 139, 0.07);
    border-radius: 4px;
    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.45),
        0 1px 0 rgba(240, 210, 139, 0.05) inset;
}
body.page-home .categories--smart .cat-card--secondary::after {
    background:
        linear-gradient(180deg,
            rgba(28, 19, 11, 0.40) 0%,
            rgba(13, 8, 5, 0.78) 50%,
            rgba(7, 5, 3, 0.94) 100%);
}
body.page-home .categories--smart .cat-card--secondary::before {
    filter: saturate(1.05) contrast(1.02) brightness(0.95);
}

body.page-home .categories--smart .cat-card--secondary .cat-title {
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.95);
    letter-spacing: 0.08em;
}
body.page-home .categories--smart .cat-card--secondary .cat-sub {
    color: rgba(240, 210, 139, 0.55);
    font-size: clamp(9px, 0.65vw, 10.5px);
    letter-spacing: 0.14em;
}

body.page-home .categories--smart .cat-card--secondary:hover {
    border-color: rgba(240, 210, 139, 0.30);
    transform: translateY(-2px);
    box-shadow:
        0 18px 44px rgba(198, 146, 58, 0.15),
        0 14px 32px rgba(0, 0, 0, 0.45),
        0 1px 0 rgba(240, 210, 139, 0.18) inset;
}

/* Arrow chip — flat brass square, sharper edges */
body.page-home .categories--smart .cat-card .cat-arrow {
    width: 26px;
    height: 26px;
    border-radius: 1px;
    background: rgba(13, 8, 5, 0.50);
    border: 1px solid rgba(240, 210, 139, 0.22);
}
body.page-home .categories--smart .cat-card--primary .cat-arrow { width: 32px; height: 32px; }
body.page-home .categories--smart .cat-card:hover .cat-arrow {
    background: linear-gradient(180deg, #f0d28b, #c6923a);
    border-color: #f4d98a;
}

/* ───── CARD GRID: tighter rhythm, German precision ───── */
body.page-home .categories--smart {
    gap: clamp(10px, 1vw, 16px);
}
body.page-home .categories-row {
    padding: clamp(12px, 2vw, 28px) clamp(24px, 5vw, 96px) clamp(32px, 5vw, 72px);
}

/* ───── RESPONSIVE PRESERVATION ───── */
@media (max-width: 1100px) {
    body.page-home .home-hero { min-height: clamp(520px, 70vh, 700px); }
    body.page-home .home-hero-aside { max-width: 110px; }
    body.page-home .home-hero-qr img { width: 78px; height: 78px; padding: 4px; }
}
@media (max-width: 900px) {
    body.page-home .home-hero {
        min-height: clamp(500px, 75vh, 660px);
        padding: clamp(40px, 7vw, 72px) clamp(24px, 5vw, 40px);
    }
    body.page-home .home-hero-title { font-size: clamp(64px, 13vw, 110px); }
}
@media (max-width: 540px) {
    body.page-home .home-hero {
        min-height: clamp(540px, 92vh, 700px);
        padding: clamp(72px, 16vw, 100px) clamp(20px, 5vw, 32px) clamp(40px, 8vw, 64px);
    }
    body.page-home .home-hero-title { font-size: clamp(54px, 14vw, 84px); }
    body.page-home .home-hero-aside {
        top: 14px; right: 14px;
        flex-direction: row; gap: 6px;
        max-width: none;
    }
    body.page-home .home-hero-qr { padding: 5px; }
    body.page-home .home-hero-qr img { width: 60px; height: 60px; padding: 3px; }
    body.page-home .home-hero-qr-label { display: none; }
    body.page-home .home-hero-cta { flex-direction: column; width: 100%; gap: 10px; }
    body.page-home .home-hero-btn { width: 100%; }
}
/* ============================================================
   END STAGE 4C
   ============================================================ */

/* ============================================================
   STAGE 4D — PRODUCT FACADE (compact hero + functions + grid)
   Final-source-order overrides for Stage 4A/4B/4C hero size.
   Adds .product-functions row + .pf-card styling.
   Splits .cards-primary (4-col) and .cards-secondary (4-col)
   so visual rhythm is consistent inside each band.
   ============================================================ */

/* ───── HERO: SHRUNK to premium kiosk header ───── */
body.page-home .home-hero {
    min-height: clamp(300px, 38vh, 430px);   /* was 540-760 in 4C */
    padding: clamp(24px, 3vw, 48px) clamp(20px, 4vw, 72px);
}
body.page-home .home-hero-content {
    gap: clamp(8px, 0.9vw, 14px);
    padding: clamp(8px, 1.4vw, 18px) 0;
    max-width: 880px;
}
body.page-home .home-hero-eyebrow {
    font-size: clamp(10px, 0.78vw, 12px);
    letter-spacing: 0.42em;
}
body.page-home .home-hero-title {
    font-size: clamp(40px, 6.4vw, 96px);
    line-height: 0.92;
    filter:
        drop-shadow(0 0 32px rgba(240, 200, 130, 0.30))
        drop-shadow(0 6px 18px rgba(0, 0, 0, 0.7));
}
body.page-home .home-hero-tagline {
    font-size: clamp(11px, 0.92vw, 14px);
    letter-spacing: 0.20em;
    margin-top: 2px;
}
body.page-home .home-hero-cta { gap: 10px; margin-top: clamp(6px, 1vw, 14px); }
body.page-home .home-hero-btn {
    padding: 11px 22px;
    font-size: clamp(10.5px, 0.78vw, 12px);
    letter-spacing: 0.28em;
}

/* ───── TOP UTILITY CLUSTER (QR + langs unified, tiny + discrete) ───── */
body.page-home .home-hero-aside {
    position: absolute;
    top: clamp(12px, 1.4vw, 18px);
    right: clamp(12px, 1.8vw, 24px);
    left: auto;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    width: auto;
    max-width: 230px;             /* shrunk so it never reaches title area */
    opacity: 0.92;
    z-index: 4;
}
body.page-home .home-hero-qr {
    padding: 3px;
    border-radius: 3px;
    background: rgba(13, 8, 5, 0.78);
    border: 1px solid rgba(240, 210, 139, 0.15);
    backdrop-filter: blur(10px) saturate(1.1);
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
    display: flex;
    align-items: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
    flex: 0 0 auto;
}
body.page-home .home-hero-qr a.qr-image {
    display: block;
    line-height: 0;
    width: auto !important;     /* override legacy `body.page-home .qr-image { width: 120px }` */
    height: auto !important;
    padding: 0 !important;
}
body.page-home .home-hero-qr img {
    width: 32px;                  /* tiny — discrete utility, not a billboard */
    height: 32px;
    padding: 1px;
    border-radius: 1px;
    background: #c8b894;          /* darker brass cream, less stark */
    filter: contrast(1.20) brightness(0.85);
    opacity: 0.85;
}
body.page-home .home-hero-qr-label { display: none; }   /* killed — fits into language strip aesthetic */
body.page-home .home-hero-lang {
    background: rgba(13, 8, 5, 0.62);
    border: 1px solid rgba(240, 210, 139, 0.18);
    border-radius: 3px;
    padding: 4px;
    display: flex !important;       /* override legacy `display: grid` from .lang-switch */
    flex-wrap: wrap;
    gap: 2px;
    grid-template-columns: none;
    justify-content: flex-end !important;  /* override legacy `justify-content: stretch` */
    align-content: center;
    align-self: auto !important;    /* override legacy `align-self: stretch` */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    align-items: center;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
    max-width: 240px;
    width: auto;
    flex: 0 0 auto;
}
body.page-home .home-hero-lang button {
    font-family: "Inter Display", system-ui, sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 4px 6px;
    min-width: 22px;
    border-radius: 2px;
    color: rgba(240, 210, 139, 0.55);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
body.page-home .home-hero-lang button:hover { color: var(--accent-2); background: rgba(240, 210, 139, 0.08); }
body.page-home .home-hero-lang button.active {
    color: #1b1206;
    background: linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 100%);
}

/* ───── PRODUCT FUNCTIONS STRIP (the new one) ───── */
.product-functions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(10px, 1vw, 16px);
    padding: 0 clamp(24px, 5vw, 96px);
    margin-bottom: clamp(20px, 2vw, 32px);
}
.pf-card {
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.4vw, 18px);
    padding: clamp(16px, 1.5vw, 22px) clamp(18px, 1.8vw, 26px);
    background:
        linear-gradient(135deg, rgba(45, 30, 17, 0.92) 0%, rgba(20, 14, 8, 0.92) 100%);
    border: 1px solid rgba(240, 210, 139, 0.22);
    border-left: 3px solid var(--accent);
    border-radius: 4px;
    text-decoration: none;
    color: var(--text);
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    box-shadow:
        0 14px 36px rgba(0, 0, 0, 0.5),
        0 1px 0 rgba(240, 210, 139, 0.10) inset;
    min-height: 84px;
    position: relative;
    overflow: hidden;
}
.pf-card::before {
    /* subtle warm glow from the brass left edge */
    content: "";
    position: absolute;
    inset: 0 0 0 -2px;
    background: radial-gradient(ellipse 40% 100% at 0% 50%, rgba(198, 146, 58, 0.18), transparent 65%);
    pointer-events: none;
}
.pf-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent-2);
    border-left-color: var(--accent-2);
    background: linear-gradient(135deg, rgba(58, 38, 22, 0.95) 0%, rgba(28, 19, 11, 0.95) 100%);
    box-shadow:
        0 22px 52px rgba(198, 146, 58, 0.20),
        0 14px 36px rgba(0, 0, 0, 0.5),
        0 1px 0 rgba(240, 210, 139, 0.20) inset;
}
.pf-icon {
    font-size: clamp(20px, 1.8vw, 28px);
    line-height: 1;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}
.pf-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1 1 auto;
    min-width: 0;
}
.pf-title {
    font-family: "Bebas Neue", "Oswald", "Inter", sans-serif;
    font-size: clamp(15px, 1.25vw, 19px);
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text);
    line-height: 1.05;
}
.pf-sub {
    font-family: "Inter", system-ui, sans-serif;
    font-size: clamp(9.5px, 0.72vw, 11.5px);
    font-weight: 500;
    letter-spacing: 0.06em;
    color: rgba(240, 210, 139, 0.75);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
.pf-arrow {
    font-family: "Inter Display", "Inter", sans-serif;
    font-size: clamp(16px, 1.4vw, 20px);
    font-weight: 700;
    color: var(--accent);
    flex-shrink: 0;
    transition: color 0.18s ease, transform 0.18s ease;
}
.pf-card:hover .pf-arrow {
    color: var(--accent-2);
    transform: translateX(3px);
}

/* ───── PRIMARY band: 4 cards, equal aspect-ratio for visual rhythm
        (uses !important to override legacy `body.page-home .categories-row
        .categories { grid-template-columns: repeat(3, ...) !important }`) ───── */
body.page-home .categories-row .cards-primary.categories {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: clamp(10px, 1vw, 16px) !important;
    padding: 0 clamp(24px, 5vw, 96px);
    margin-bottom: clamp(16px, 1.6vw, 24px);
}
body.page-home .cards-primary .cat-card--primary {
    aspect-ratio: 4 / 3;
    min-height: 0;
    grid-column: auto;
    padding: clamp(18px, 1.5vw, 26px);
}

/* ───── SECONDARY band: 4-col grid, identical proportions ───── */
body.page-home .categories-row .cards-secondary.categories {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: clamp(10px, 1vw, 16px) !important;
    padding: 0 clamp(24px, 5vw, 96px) clamp(28px, 4vw, 60px);
}
body.page-home .cards-secondary .cat-card--secondary {
    aspect-ratio: 16 / 9;
    min-height: 0;
    padding: clamp(14px, 1.2vw, 18px);
}

/* re-disable the legacy single .categories--smart grid since we now use
   .cards-primary + .cards-secondary explicitly */
body.page-home .categories.categories--smart { display: none !important; }

/* ───── SECTION HEADER tighten ───── */
body.page-home .home-section-header {
    padding-top: clamp(20px, 2.4vw, 36px);
    padding-bottom: 0;
}

/* ───── RESPONSIVE — preserve grid rhythm on every viewport
        (uses !important to win over the legacy categories-row rule) ───── */
@media (max-width: 1100px) {
    body.page-home .home-hero { min-height: clamp(280px, 36vh, 380px); }
    .product-functions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.page-home .categories-row .cards-primary.categories {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    body.page-home .categories-row .cards-secondary.categories {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 900px) {
    body.page-home .home-hero {
        min-height: clamp(280px, 38vh, 360px);
        padding: clamp(20px, 4vw, 32px) clamp(20px, 5vw, 32px);
    }
    body.page-home .home-hero-title { font-size: clamp(40px, 8vw, 72px); }
    body.page-home .categories-row .cards-secondary.categories {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 540px) {
    body.page-home .home-hero {
        min-height: clamp(280px, 40vh, 340px);
        padding: clamp(60px, 14vw, 80px) clamp(18px, 5vw, 28px) clamp(20px, 6vw, 32px);
    }
    body.page-home .home-hero-title { font-size: clamp(38px, 11vw, 64px); }
    body.page-home .home-hero-aside {
        top: 10px;
        right: 10px;
        left: auto;
        gap: 4px;
        max-width: calc(100% - 20px);
    }
    body.page-home .home-hero-qr img { width: 36px; height: 36px; padding: 2px; }
    body.page-home .home-hero-lang { padding: 3px; max-width: 180px; }
    body.page-home .home-hero-lang button { font-size: 9px; padding: 4px 5px; min-width: 20px; }
    body.page-home .home-hero-cta { flex-direction: column; width: 100%; gap: 8px; }
    body.page-home .home-hero-btn { width: 100%; }
    .product-functions { grid-template-columns: 1fr; }
    body.page-home .categories-row .cards-primary.categories {
        grid-template-columns: 1fr !important;
    }
    body.page-home .categories-row .cards-secondary.categories {
        grid-template-columns: 1fr !important;
    }
    body.page-home .cards-primary .cat-card--primary { aspect-ratio: 16 / 10; }
    body.page-home .cards-secondary .cat-card--secondary { aspect-ratio: 21 / 9; }
    .pf-card { min-height: 72px; padding: 14px 16px; }
}
/* ============================================================
   END STAGE 4D
   ============================================================ */

/* ============================================================
   STAGE 4E — LARGE-SCREEN SELLING FACADE (21.5"/27" kiosk)
   Source-order final overrides for Stage 4D.
   - PRIMARY now 6 cards (3-col × 2-row on desktop+)
   - Adds .beer-showcase (4 beer cards)
   - Adds .promo-large (3 large photo selling cards)
   - Removes .product-functions strip (replaced by promo-large)
   - Hero: tighter brass framing, integrated language pill bar
   ============================================================ */

/* HIDE the old small product-functions strip (kept hidden for safety
   if any cached HTML still has it) */
.product-functions { display: none !important; }

/* ───── HERO: brass rules pulled tight against content for German signage ───── */
body.page-home .home-hero {
    min-height: clamp(320px, 36vh, 480px);
    padding: clamp(28px, 3vw, 56px) clamp(24px, 4vw, 80px);
}
body.page-home .home-hero-content {
    gap: clamp(8px, 0.8vw, 14px);
    padding: clamp(12px, 1.6vw, 22px) 0;
    max-width: 920px;
}
/* Brass top + bottom rules — reduce the "floating between random lines" feel */
body.page-home .home-hero > .home-hero-content::before,
body.page-home .home-hero > .home-hero-content::after {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: clamp(280px, 50%, 720px);
    background: linear-gradient(90deg, transparent 0%, rgba(240, 210, 139, 0.85) 50%, transparent 100%);
}
body.page-home .home-hero > .home-hero-content::before {
    top: clamp(8px, 1vw, 14px);
}
body.page-home .home-hero > .home-hero-content::after {
    bottom: clamp(8px, 1vw, 14px);
}

/* Title: large but not absurd */
body.page-home .home-hero-title {
    font-size: clamp(48px, 6vw, 128px);
    line-height: 0.92;
}
body.page-home .home-hero-tagline {
    font-size: clamp(12px, 0.95vw, 16px);
    letter-spacing: 0.22em;
}

/* ───── PRIMARY band: 6 cards, 3-col × 2-row on desktop ───── */
body.page-home .categories-row .cards-primary.categories {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(12px, 1vw, 18px) !important;
}
body.page-home .cards-primary .cat-card--primary {
    aspect-ratio: 3 / 2;          /* slightly wider than 4:3 for a banner feel */
    min-height: 0;
    padding: clamp(20px, 1.5vw, 30px);
}

/* On 21.5/27" displays show all 6 in a single row — scales down to 3×2
   below 1700px viewport */
@media (min-width: 1700px) {
    body.page-home .categories-row .cards-primary.categories {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }
    body.page-home .cards-primary .cat-card--primary { aspect-ratio: 4 / 3; }
}

/* ───── BEER SHOWCASE ───── */
.beer-showcase-header,
.promo-header {
    display: flex;
    align-items: baseline;
    gap: clamp(16px, 2vw, 32px);
    padding: clamp(24px, 2.6vw, 44px) clamp(24px, 5vw, 96px) clamp(8px, 1vw, 16px);
    flex-wrap: wrap;
}
.beer-showcase-header .home-section-eyebrow,
.promo-header .home-section-eyebrow {
    font-family: "Cormorant SC", Georgia, serif;
    font-size: clamp(11px, 0.9vw, 14px);
    letter-spacing: 0.42em;
    color: var(--accent-2);
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.2;
}
.beer-showcase-header .home-section-title,
.promo-header .home-section-title {
    font-family: "Bebas Neue", "Oswald", "Inter", sans-serif;
    font-size: clamp(22px, 2.2vw, 36px);
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--text);
    text-transform: uppercase;
    line-height: 1.1;
    margin: 4px 0 0 0;
}
.beer-showcase-header .home-section-rule,
.promo-header .home-section-rule {
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, var(--accent-2) 0%, rgba(198, 146, 58, 0.30) 30%, transparent 100%);
    align-self: end;
    margin-bottom: 14px;
    min-width: 120px;
    opacity: 0.85;
}

.beer-showcase {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(12px, 1vw, 18px);
    padding: 0 clamp(24px, 5vw, 96px) clamp(20px, 2vw, 32px);
}
.beer-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    aspect-ratio: 3 / 4;          /* tall portrait — beer-glass shape */
    padding: clamp(16px, 1.4vw, 24px);
    border-radius: 6px;
    overflow: hidden;
    isolation: isolate;
    text-decoration: none;
    color: var(--text);
    border: 1px solid rgba(240, 210, 139, 0.18);
    box-shadow:
        0 22px 48px rgba(0, 0, 0, 0.55),
        0 1px 0 rgba(240, 210, 139, 0.10) inset;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    background: linear-gradient(160deg, #1c1308 0%, #100a06 100%);
}
.beer-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--bs-bg) center/cover no-repeat;
    z-index: -2;
    filter: saturate(1.10) contrast(1.05);
}
.beer-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(11, 10, 9, 0.10) 0%, rgba(11, 10, 9, 0.55) 50%, rgba(11, 10, 9, 0.96) 100%),
        radial-gradient(120% 80% at 50% 110%, rgba(198, 146, 58, 0.20), transparent 60%);
    z-index: -1;
}
.beer-card-eyebrow {
    font-family: "Cormorant SC", Georgia, serif;
    font-size: clamp(10px, 0.78vw, 12px);
    font-weight: 500;
    letter-spacing: 0.30em;
    color: var(--accent-2);
    text-transform: uppercase;
    margin-bottom: 6px;
    opacity: 0.95;
}
.beer-card-title {
    font-family: "Bebas Neue", "Oswald", sans-serif;
    font-size: clamp(20px, 1.8vw, 30px);
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.0;
    color: var(--text);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
    margin-bottom: 6px;
}
.beer-card-meta {
    font-family: "Inter", system-ui, sans-serif;
    font-size: clamp(10px, 0.78vw, 12px);
    font-weight: 500;
    letter-spacing: 0.10em;
    color: rgba(240, 210, 139, 0.85);
    text-transform: uppercase;
    line-height: 1.4;
}
.beer-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent-2);
    box-shadow:
        0 32px 70px rgba(198, 146, 58, 0.20),
        0 22px 48px rgba(0, 0, 0, 0.55),
        0 1px 0 rgba(240, 210, 139, 0.20) inset;
}

/* ───── LARGE PROMO BLOCKS — 3 photo-based selling cards ───── */
.promo-large {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 1.2vw, 22px);
    padding: 0 clamp(24px, 5vw, 96px) clamp(28px, 3vw, 48px);
}
.promo-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    aspect-ratio: 16 / 10;
    padding: clamp(24px, 2.2vw, 40px);
    border-radius: 8px;
    overflow: hidden;
    isolation: isolate;
    text-decoration: none;
    color: var(--text);
    border: 1px solid rgba(240, 210, 139, 0.20);
    box-shadow:
        0 32px 70px rgba(0, 0, 0, 0.55),
        0 1px 0 rgba(240, 210, 139, 0.12) inset;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
    background: linear-gradient(160deg, #2a1d11 0%, #110a05 100%);
}
.promo-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--pl-bg) center/cover no-repeat;
    z-index: -2;
    filter: saturate(1.15) contrast(1.08) brightness(1.05);
}
.promo-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(11, 10, 9, 0.18) 0%, rgba(11, 10, 9, 0.55) 45%, rgba(11, 10, 9, 0.96) 100%),
        radial-gradient(100% 80% at 50% 110%, rgba(198, 146, 58, 0.22), transparent 60%);
    z-index: -1;
}
/* brass top-rule on every promo card */
.promo-card > .promo-card-eyebrow::before {
    content: "";
    position: absolute;
    top: 18px;
    left: 18px;
    right: 18px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(240, 210, 139, 0.65), transparent);
    z-index: 2;
}

.promo-card-eyebrow {
    font-family: "Cormorant SC", Georgia, serif;
    font-size: clamp(11px, 0.9vw, 14px);
    font-weight: 600;
    letter-spacing: 0.36em;
    color: var(--accent-2);
    text-transform: uppercase;
    margin-bottom: clamp(8px, 1vw, 14px);
    line-height: 1.4;
    position: relative;
}
.promo-card-title {
    font-family: "Bebas Neue", "Oswald", sans-serif;
    font-size: clamp(28px, 3vw, 56px);
    font-weight: 400;
    letter-spacing: 0.04em;
    line-height: 0.92;
    text-transform: uppercase;
    color: var(--text);
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.85);
    margin-bottom: clamp(8px, 1vw, 14px);
    background: linear-gradient(180deg, #fff8e6 0%, #f4d98a 50%, #c6923a 110%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.65));
}
.promo-card-meta {
    font-family: "Inter", system-ui, sans-serif;
    font-size: clamp(12px, 0.9vw, 14px);
    font-weight: 500;
    line-height: 1.4;
    color: rgba(239, 231, 210, 0.92);
    margin-bottom: clamp(12px, 1.2vw, 18px);
    max-width: 95%;
}
.promo-card-cta {
    font-family: "Inter Display", "Inter", sans-serif;
    font-size: clamp(11px, 0.85vw, 13px);
    font-weight: 800;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent-2);
    padding: clamp(10px, 1vw, 14px) clamp(16px, 1.4vw, 22px);
    border: 1px solid rgba(240, 210, 139, 0.45);
    border-radius: 2px;
    background: rgba(11, 10, 9, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    align-self: flex-start;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    width: max-content;
}
.promo-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent-2);
    box-shadow:
        0 38px 90px rgba(198, 146, 58, 0.22),
        0 32px 70px rgba(0, 0, 0, 0.55),
        0 1px 0 rgba(240, 210, 139, 0.22) inset;
}
.promo-card:hover .promo-card-cta {
    background: var(--accent);
    border-color: var(--accent-2);
    color: #1b1206;
}

/* ───── SECONDARY band tightening for large displays ───── */
body.page-home .categories-row .cards-secondary.categories {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: clamp(10px, 0.8vw, 14px) !important;
}
body.page-home .cards-secondary .cat-card--secondary {
    aspect-ratio: 1 / 1;
    padding: clamp(14px, 1.1vw, 18px);
}

/* ───── RESPONSIVE — preserve rhythm at every viewport ───── */
@media (max-width: 1500px) {
    body.page-home .categories-row .cards-secondary.categories {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
    body.page-home .cards-secondary .cat-card--secondary { aspect-ratio: 16 / 10; }
}
@media (max-width: 1200px) {
    body.page-home .categories-row .cards-primary.categories {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    .beer-showcase { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .promo-large { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    body.page-home .categories-row .cards-secondary.categories {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 900px) {
    body.page-home .categories-row .cards-primary.categories {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .beer-showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .promo-large { grid-template-columns: 1fr; }
    .promo-card { aspect-ratio: 16 / 9; }
    body.page-home .categories-row .cards-secondary.categories {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 540px) {
    body.page-home .categories-row .cards-primary.categories {
        grid-template-columns: 1fr !important;
    }
    body.page-home .cards-primary .cat-card--primary { aspect-ratio: 16 / 10; }
    .beer-showcase { grid-template-columns: 1fr; }
    .beer-card { aspect-ratio: 16 / 9; }
    .promo-card { aspect-ratio: 4 / 3; padding: 20px; }
    .promo-card-title { font-size: 36px; }
    body.page-home .categories-row .cards-secondary.categories {
        grid-template-columns: 1fr !important;
    }
    body.page-home .cards-secondary .cat-card--secondary { aspect-ratio: 21 / 9; }
}
/* ============================================================
   END STAGE 4E
   ============================================================ */

/* ============================================================
   STAGE 4E.1 — UTILITY CLUSTER REBUILD
   QR + language as ONE unified premium panel.
   Removes the two-box "debug widget" feel; wraps both into a
   single dark-glass + brass-hairline container with a subtle
   vertical divider. Final source-order overrides 4D/4E.
   ============================================================ */

body.page-home .home-hero-aside {
    /* one cluster, not two boxes */
    position: absolute;
    top: clamp(14px, 1.6vw, 22px);
    right: clamp(14px, 2vw, 28px);
    left: auto;
    flex-direction: row;
    align-items: stretch;            /* QR + lang same height */
    gap: 0;                          /* no gap; visual divider is internal */
    width: auto;
    max-width: 320px;
    opacity: 1;
    z-index: 4;

    /* unified glass panel */
    background: linear-gradient(160deg, rgba(28, 19, 11, 0.78) 0%, rgba(13, 8, 5, 0.72) 100%);
    border: 1px solid rgba(240, 210, 139, 0.22);
    border-radius: 10px;
    padding: 7px;
    backdrop-filter: blur(14px) saturate(1.15);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    box-shadow:
        0 14px 36px rgba(0, 0, 0, 0.55),
        0 1px 0 rgba(240, 210, 139, 0.10) inset,
        0 -1px 0 rgba(0, 0, 0, 0.4) inset;
}

/* ───── QR — strip its own box, becomes a tile inside the cluster ───── */
body.page-home .home-hero-qr {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    /* subtle vertical divider between QR and langs */
    padding-right: 9px !important;
    border-right: 1px solid rgba(240, 210, 139, 0.18) !important;
}
body.page-home .home-hero-qr a.qr-image {
    display: block;
    line-height: 0;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}
body.page-home .home-hero-qr img {
    width: 38px;
    height: 38px;
    padding: 2px;
    border-radius: 3px;
    background: #d8c89a;            /* warm brass-cream — softer than white */
    filter: contrast(1.10) brightness(0.92);
    opacity: 0.88;
    display: block;
}

/* ───── LANGUAGE — strip its own box, premium pill row ───── */
body.page-home .home-hero-lang {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 0 0 9px !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: 1px;
    grid-template-columns: none;
    justify-content: flex-start !important;
    align-items: center;
    align-content: center;
    align-self: stretch !important;
    width: auto;
    max-width: 220px;
    flex: 1 1 auto;
}
body.page-home .home-hero-lang button {
    font-family: "Inter Display", "Inter", system-ui, sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.16em;
    padding: 4px 7px;
    min-width: 0;
    border-radius: 2px;
    color: rgba(220, 198, 158, 0.55);
    background: transparent !important;
    border: none !important;
    cursor: pointer;
    line-height: 1.1;
    transition: color 0.15s ease, background 0.15s ease;
    box-shadow: none !important;
}
body.page-home .home-hero-lang button:hover {
    color: var(--accent-2);
    background: rgba(240, 210, 139, 0.06) !important;
}
body.page-home .home-hero-lang button.active {
    /* subtle brass — no aggressive gold block */
    color: #f4e3b0 !important;
    background: rgba(198, 146, 58, 0.20) !important;
    text-shadow: 0 0 8px rgba(240, 210, 139, 0.45);
}

/* ───── RESPONSIVE — keep cluster compact on every viewport ───── */
@media (max-width: 1100px) {
    body.page-home .home-hero-aside { max-width: 280px; }
    body.page-home .home-hero-lang { max-width: 200px; flex-wrap: wrap; }
}
@media (max-width: 540px) {
    body.page-home .home-hero-aside {
        top: 8px;
        right: 8px;
        left: auto;
        max-width: 230px;
        padding: 4px;
        border-radius: 6px;
        flex-wrap: nowrap;
    }
    body.page-home .home-hero-qr { padding-right: 6px !important; }
    body.page-home .home-hero-qr img { width: 28px; height: 28px; padding: 2px; }
    body.page-home .home-hero-lang {
        padding-left: 6px !important;
        max-width: 170px;
        gap: 0;
        flex-wrap: nowrap;
        overflow: hidden;
    }
    body.page-home .home-hero-lang button {
        font-size: 8px;
        padding: 2px 4px;
        letter-spacing: 0.10em;
        min-width: 14px;
    }
    /* show only the first 5 langs on phone — rest are reachable via /menu?lang= */
    body.page-home .home-hero-lang button:nth-child(n+6) { display: none; }
    /* push hero content below the cluster so title isn't covered */
    body.page-home .home-hero { padding-top: clamp(56px, 14vw, 80px); }
}
/* ============================================================
   END STAGE 4E.1
   ============================================================ */

/* ============================================================
   STAGE 4F — REAL PRODUCT-SELLING FACADE
   - PRIMARY: 3-col × 2-row even on large screens (cinematic, not tiny)
   - PIVSKA KARTA: left title block + right scrollable beer cards row
   - PROMO BANNERS: 2 dominant 50/50 hero promo + 1 wide combo strip
   - Kill old .product-functions, .promo-large, .beer-showcase styling
   ============================================================ */

/* Kill prior containers in case any cached HTML still has them */
.product-functions, .beer-showcase, .promo-large { display: none !important; }
.beer-showcase-header, .promo-header { display: none !important; }

/* ───── PRIMARY: 3 columns × 2 rows, equal cinematic banners ───── */
body.page-home .categories-row .cards-primary.categories {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(14px, 1.2vw, 22px) !important;
}
body.page-home .cards-primary .cat-card--primary {
    aspect-ratio: 16 / 10;     /* wider banner feel */
    min-height: 0;
    padding: clamp(22px, 1.8vw, 36px);
}
/* even on 21.5/27" screens keep 3-col so each card is BIG */
@media (min-width: 1700px) {
    body.page-home .categories-row .cards-primary.categories {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    body.page-home .cards-primary .cat-card--primary { aspect-ratio: 16 / 10; }
}

/* ───── PIVSKA KARTA SHOWCASE ─────────────────────────────────── */
.pivska-showcase {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) 3fr;
    gap: clamp(16px, 1.6vw, 28px);
    padding: clamp(36px, 4vw, 72px) clamp(24px, 5vw, 96px) clamp(20px, 2.4vw, 36px);
    align-items: stretch;
}

.pivska-title-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(8px, 1vw, 16px);
    padding: clamp(24px, 2.2vw, 40px);
    border-radius: 8px;
    background: linear-gradient(160deg, rgba(45, 30, 17, 0.85) 0%, rgba(20, 14, 8, 0.85) 100%);
    border: 1px solid rgba(240, 210, 139, 0.20);
    border-left: 3px solid var(--accent);
    position: relative;
    overflow: hidden;
}
.pivska-title-block::before {
    content: "";
    position: absolute;
    inset: 0 0 0 -2px;
    background: radial-gradient(ellipse 60% 100% at 0% 50%, rgba(198, 146, 58, 0.18), transparent 65%);
    pointer-events: none;
}
.pivska-eyebrow {
    font-family: "Cormorant SC", Georgia, serif;
    font-size: clamp(11px, 0.9vw, 14px);
    letter-spacing: 0.42em;
    color: var(--accent-2);
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.2;
}
.pivska-headline {
    font-family: "Bebas Neue", "Oswald", sans-serif;
    font-size: clamp(40px, 4.4vw, 80px);
    font-weight: 400;
    letter-spacing: 0.04em;
    line-height: 0.92;
    color: var(--text);
    text-transform: uppercase;
    margin: 4px 0;
    background: linear-gradient(180deg, #fff8e6 0%, #f4d98a 50%, #c6923a 105%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.6));
}
.pivska-sub {
    font-family: "Inter", system-ui, sans-serif;
    font-size: clamp(12px, 0.95vw, 14px);
    font-weight: 500;
    line-height: 1.45;
    color: rgba(239, 231, 210, 0.78);
    margin: 0 0 clamp(8px, 1vw, 14px) 0;
    max-width: 38ch;
}
.pivska-cta {
    font-family: "Inter Display", "Inter", sans-serif;
    font-size: clamp(10.5px, 0.78vw, 12px);
    font-weight: 800;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent-2);
    text-decoration: none;
    padding: clamp(10px, 1vw, 14px) clamp(18px, 1.5vw, 24px);
    border: 1px solid rgba(240, 210, 139, 0.45);
    border-radius: 2px;
    background: rgba(11, 10, 9, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    align-self: flex-start;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.pivska-cta:hover {
    background: var(--accent);
    border-color: var(--accent-2);
    color: #1b1206;
}

.pivska-cards-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(10px, 0.9vw, 16px);
}
.pivska-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    aspect-ratio: 3 / 4;
    padding: clamp(14px, 1.2vw, 20px);
    border-radius: 6px;
    overflow: hidden;
    isolation: isolate;
    text-decoration: none;
    color: var(--text);
    border: 1px solid rgba(240, 210, 139, 0.16);
    box-shadow:
        0 22px 48px rgba(0, 0, 0, 0.55),
        0 1px 0 rgba(240, 210, 139, 0.10) inset;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    background: linear-gradient(160deg, #1c1308 0%, #100a06 100%);
}
.pivska-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--bs-bg) center/cover no-repeat;
    z-index: -2;
    filter: saturate(1.10) contrast(1.05);
}
.pivska-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(11, 10, 9, 0.10) 0%, rgba(11, 10, 9, 0.55) 50%, rgba(11, 10, 9, 0.96) 100%),
        radial-gradient(120% 80% at 50% 110%, rgba(198, 146, 58, 0.18), transparent 60%);
    z-index: -1;
}
.pivska-card-eyebrow {
    font-family: "Cormorant SC", Georgia, serif;
    font-size: clamp(9.5px, 0.72vw, 11px);
    font-weight: 500;
    letter-spacing: 0.30em;
    color: var(--accent-2);
    text-transform: uppercase;
    margin-bottom: 4px;
    opacity: 0.95;
}
.pivska-card-title {
    font-family: "Bebas Neue", "Oswald", sans-serif;
    font-size: clamp(16px, 1.4vw, 24px);
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.0;
    color: var(--text);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
    margin-bottom: 4px;
}
.pivska-card-meta {
    font-family: "Inter", system-ui, sans-serif;
    font-size: clamp(9.5px, 0.72vw, 11px);
    font-weight: 500;
    letter-spacing: 0.10em;
    color: rgba(240, 210, 139, 0.85);
    text-transform: uppercase;
    line-height: 1.4;
}
.pivska-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent-2);
    box-shadow:
        0 30px 64px rgba(198, 146, 58, 0.20),
        0 22px 48px rgba(0, 0, 0, 0.55),
        0 1px 0 rgba(240, 210, 139, 0.20) inset;
}

/* ───── 2 LARGE PROMO BANNERS (50/50 hero) ─────────────────── */
.promo-banners {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 1.4vw, 26px);
    padding: clamp(20px, 2.4vw, 36px) clamp(24px, 5vw, 96px) clamp(16px, 1.6vw, 28px);
}
.promo-banner {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    aspect-ratio: 16 / 9;
    padding: 0;
    border-radius: 10px;
    overflow: hidden;
    isolation: isolate;
    text-decoration: none;
    color: var(--text);
    border: 1px solid rgba(240, 210, 139, 0.22);
    box-shadow:
        0 36px 80px rgba(0, 0, 0, 0.6),
        0 1px 0 rgba(240, 210, 139, 0.14) inset;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
    background: linear-gradient(160deg, #2a1d11 0%, #110a05 100%);
}
.promo-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--pl-bg) center/cover no-repeat;
    z-index: -2;
    filter: saturate(1.18) contrast(1.10) brightness(1.06);
}
.promo-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(95deg, rgba(11, 10, 9, 0.85) 0%, rgba(11, 10, 9, 0.55) 45%, rgba(11, 10, 9, 0.20) 100%),
        linear-gradient(180deg, transparent 50%, rgba(11, 10, 9, 0.92) 100%),
        radial-gradient(60% 60% at 100% 100%, rgba(198, 146, 58, 0.20), transparent 65%);
    z-index: -1;
}
.promo-banner-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(8px, 0.9vw, 14px);
    padding: clamp(28px, 2.6vw, 50px);
    max-width: 65%;
}
.promo-banner-eyebrow {
    font-family: "Cormorant SC", Georgia, serif;
    font-size: clamp(11px, 0.9vw, 14px);
    font-weight: 600;
    letter-spacing: 0.36em;
    color: var(--accent-2);
    text-transform: uppercase;
    line-height: 1.3;
}
.promo-banner-title {
    font-family: "Bebas Neue", "Oswald", sans-serif;
    font-size: clamp(36px, 3.6vw, 72px);
    font-weight: 400;
    letter-spacing: 0.04em;
    line-height: 0.90;
    text-transform: uppercase;
    color: var(--text);
    background: linear-gradient(180deg, #fff8e6 0%, #f4d98a 50%, #c6923a 110%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.7));
    margin: 0;
}
.promo-banner-meta {
    font-family: "Inter", system-ui, sans-serif;
    font-size: clamp(13px, 1vw, 16px);
    font-weight: 500;
    line-height: 1.45;
    color: rgba(239, 231, 210, 0.92);
    max-width: 95%;
    margin-bottom: 4px;
}
.promo-banner-price {
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(28px, 2.4vw, 44px);
    color: var(--accent-2);
    letter-spacing: 0.04em;
    line-height: 1;
    margin-bottom: 4px;
}
.promo-banner-cta {
    font-family: "Inter Display", "Inter", sans-serif;
    font-size: clamp(11px, 0.85vw, 13px);
    font-weight: 800;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent-2);
    padding: clamp(11px, 1vw, 14px) clamp(20px, 1.6vw, 26px);
    border: 1px solid rgba(240, 210, 139, 0.45);
    border-radius: 2px;
    background: rgba(11, 10, 9, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.promo-banner:hover {
    transform: translateY(-3px);
    border-color: var(--accent-2);
    box-shadow:
        0 44px 100px rgba(198, 146, 58, 0.22),
        0 36px 80px rgba(0, 0, 0, 0.6),
        0 1px 0 rgba(240, 210, 139, 0.24) inset;
}
.promo-banner:hover .promo-banner-cta {
    background: var(--accent);
    border-color: var(--accent-2);
    color: #1b1206;
}

/* ───── WIDE COMBO STRIP (full-width sales banner) ──────────── */
.combo-strip {
    position: relative;
    display: flex;
    aspect-ratio: 32 / 9;
    margin: 0 clamp(24px, 5vw, 96px) clamp(28px, 3vw, 48px);
    padding: 0;
    border-radius: 10px;
    overflow: hidden;
    isolation: isolate;
    text-decoration: none;
    color: var(--text);
    border: 1px solid rgba(240, 210, 139, 0.22);
    border-left: 4px solid var(--accent);
    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.55),
        0 1px 0 rgba(240, 210, 139, 0.14) inset;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
    background: linear-gradient(160deg, #2a1d11 0%, #110a05 100%);
    min-height: 140px;
}
.combo-strip::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--cs-bg) center/cover no-repeat;
    z-index: -2;
    filter: saturate(1.15) contrast(1.08);
}
.combo-strip::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(95deg, rgba(11, 10, 9, 0.90) 0%, rgba(11, 10, 9, 0.65) 50%, rgba(11, 10, 9, 0.85) 100%),
        radial-gradient(50% 80% at 100% 50%, rgba(198, 146, 58, 0.18), transparent 60%);
    z-index: -1;
}
.combo-strip-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(20px, 2.4vw, 40px);
    width: 100%;
    padding: clamp(20px, 2vw, 36px) clamp(28px, 3vw, 56px);
}
.combo-strip-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
}
.combo-strip-eyebrow {
    font-family: "Cormorant SC", Georgia, serif;
    font-size: clamp(11px, 0.85vw, 13px);
    letter-spacing: 0.40em;
    color: var(--accent-2);
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.3;
}
.combo-strip-title {
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(24px, 2.4vw, 44px);
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 1.0;
    text-transform: uppercase;
    color: var(--text);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
}
.combo-strip-meta {
    font-family: "Inter", system-ui, sans-serif;
    font-size: clamp(12px, 0.85vw, 14px);
    font-weight: 500;
    color: rgba(239, 231, 210, 0.85);
    line-height: 1.4;
    margin-top: 4px;
    max-width: 80%;
}
.combo-strip-cta-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    flex: 0 0 auto;
}
.combo-strip-price {
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(32px, 2.6vw, 48px);
    color: var(--accent-2);
    letter-spacing: 0.04em;
    line-height: 1;
}
.combo-strip-cta {
    font-family: "Inter Display", sans-serif;
    font-size: clamp(11px, 0.85vw, 13px);
    font-weight: 800;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent-2);
    padding: clamp(11px, 1vw, 14px) clamp(20px, 1.6vw, 28px);
    border: 1px solid rgba(240, 210, 139, 0.50);
    border-radius: 2px;
    background: rgba(11, 10, 9, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    white-space: nowrap;
}
.combo-strip:hover {
    transform: translateY(-2px);
    border-color: var(--accent-2);
    border-left-color: var(--accent-2);
    box-shadow:
        0 36px 90px rgba(198, 146, 58, 0.22),
        0 28px 70px rgba(0, 0, 0, 0.55),
        0 1px 0 rgba(240, 210, 139, 0.22) inset;
}
.combo-strip:hover .combo-strip-cta {
    background: var(--accent);
    border-color: var(--accent-2);
    color: #1b1206;
}

/* ───── RESPONSIVE for new sections ─────────────────────────── */
@media (max-width: 1500px) {
    .pivska-cards-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .pivska-card:nth-child(5) { display: none; }
}
@media (max-width: 1200px) {
    .pivska-showcase { grid-template-columns: 1fr; }
    .pivska-title-block { padding: 24px; }
    .pivska-headline { font-size: clamp(36px, 6vw, 60px); }
    .pivska-cards-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    body.page-home .categories-row .cards-primary.categories {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .pivska-cards-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pivska-card:nth-child(4) { display: none; }
    .promo-banners { grid-template-columns: 1fr; }
    .promo-banner { aspect-ratio: 16 / 9; }
    .combo-strip { aspect-ratio: auto; min-height: 200px; }
    .combo-strip-content { flex-direction: column; align-items: flex-start; gap: 14px; }
    .combo-strip-cta-block { align-items: flex-start; flex-direction: row; gap: 16px; }
}
@media (max-width: 540px) {
    body.page-home .categories-row .cards-primary.categories {
        grid-template-columns: 1fr !important;
    }
    body.page-home .cards-primary .cat-card--primary { aspect-ratio: 16 / 10; }
    .pivska-cards-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pivska-card:nth-child(n+3) { display: none; }
    .promo-banner { aspect-ratio: 4 / 3; }
    .promo-banner-content { padding: 22px; max-width: 100%; }
    .promo-banner-title { font-size: 38px; }
    .combo-strip { margin-left: clamp(20px, 5vw, 32px); margin-right: clamp(20px, 5vw, 32px); }
}
/* ============================================================
   END STAGE 4F
   ============================================================ */

/* ============================================================
   STAGE 4G — REAL PRODUCT ATMOSPHERE
   CSS-only emotional layer. No structural changes.
   - Beer cards: spotlight + foam highlight + brass tap edge
   - Promo banners: cinematic key-light + warmer photo treatment
   - Page bg: faint wood-grain + warm key light from upper-center
   - PRIMARY cards: premium menu-poster overlay
   - Typography: tighter showroom rhythm
   ============================================================ */

/* ───── PAGE: subtle warm key-light + barely-there wood grain ───── */
body.page-home {
    background:
        /* faint wood-grain SVG pattern (data-uri, no asset bloat) */
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='w'><feTurbulence type='fractalNoise' baseFrequency='0.018 0.65' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.18 0 0 0 0 0.10 0 0 0 0 0.04 0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23w)'/></svg>"),
        /* warm key-light from upper-center: simulates pendant beer-house lamp */
        radial-gradient(1200px 700px at 50% -8%, rgba(240, 200, 130, 0.14), transparent 70%),
        radial-gradient(1500px 1000px at 100% 110%, rgba(198, 146, 58, 0.06), transparent 70%),
        radial-gradient(900px 700px at 0% 60%, rgba(120, 80, 30, 0.05), transparent 70%),
        var(--bg-0);
    background-attachment: fixed, fixed, fixed, fixed, fixed;
    background-blend-mode: overlay, normal, normal, normal, normal;
}

/* ───── BEER SHOWCASE — premium beer-poster atmosphere ───── */

/* Title block: brass tap-handle vibe via deeper inner brass glow */
.pivska-title-block {
    background:
        /* warm spotlight from upper-right: simulates beer-tap brass shine */
        radial-gradient(ellipse 80% 60% at 80% 0%, rgba(240, 210, 139, 0.18), transparent 65%),
        /* deeper warm base */
        linear-gradient(160deg, rgba(50, 34, 18, 0.92) 0%, rgba(20, 14, 8, 0.92) 100%);
    box-shadow:
        0 22px 52px rgba(0, 0, 0, 0.55),
        0 1px 0 rgba(240, 210, 139, 0.18) inset,
        0 -1px 0 rgba(0, 0, 0, 0.6) inset;
}
.pivska-title-block::before {
    background:
        radial-gradient(ellipse 70% 100% at 0% 50%, rgba(198, 146, 58, 0.24), transparent 65%);
}

/* Beer cards: spotlight from top + brass top-edge + foam-color highlight */
.pivska-card {
    background:
        radial-gradient(ellipse 130% 50% at 50% -20%, rgba(245, 220, 160, 0.10), transparent 70%),
        linear-gradient(160deg, #1c1308 0%, #100a06 100%);
    border: 1px solid rgba(240, 210, 139, 0.22);
    box-shadow:
        0 22px 48px rgba(0, 0, 0, 0.58),
        0 1px 0 rgba(245, 220, 160, 0.18) inset,
        0 -1px 0 rgba(0, 0, 0, 0.5) inset;
}
.pivska-card::before {
    /* photo: warmer + more contrast for premium beer-glass shine */
    filter: saturate(1.20) contrast(1.12) brightness(1.06);
}
.pivska-card::after {
    /* layered overlay: very light at top (let beer foam shine through),
       deep at bottom for text legibility, subtle warm bloom */
    background:
        linear-gradient(180deg,
            rgba(11, 10, 9, 0.0) 0%,
            rgba(11, 10, 9, 0.05) 30%,
            rgba(11, 10, 9, 0.55) 65%,
            rgba(11, 10, 9, 0.97) 100%),
        radial-gradient(120% 60% at 50% 105%, rgba(240, 200, 130, 0.20), transparent 60%),
        /* foam top highlight */
        linear-gradient(180deg, rgba(255, 240, 200, 0.06) 0%, transparent 18%);
}
/* brass top-rule on each beer card */
.pivska-card::before {
    box-shadow: 0 1px 0 rgba(240, 210, 139, 0.55) inset;
}
.pivska-card-title {
    text-shadow:
        0 2px 14px rgba(0, 0, 0, 0.95),
        0 0 24px rgba(0, 0, 0, 0.55);
}
.pivska-card:hover {
    transform: translateY(-4px);
    border-color: rgba(244, 217, 138, 0.5);
    box-shadow:
        0 36px 80px rgba(198, 146, 58, 0.24),
        0 22px 48px rgba(0, 0, 0, 0.58),
        0 1px 0 rgba(244, 217, 138, 0.32) inset;
}

/* ───── PROMO BANNERS — cinematic restaurant poster ───── */
.promo-banner {
    border: 1px solid rgba(240, 210, 139, 0.26);
    box-shadow:
        0 40px 90px rgba(0, 0, 0, 0.62),
        0 1px 0 rgba(240, 210, 139, 0.18) inset,
        0 -1px 0 rgba(0, 0, 0, 0.55) inset;
}
.promo-banner::before {
    /* cinematic photo treatment: warmer, more dramatic */
    filter: saturate(1.25) contrast(1.16) brightness(1.10);
}
.promo-banner::after {
    /* angled key-light overlay — simulates window/lamp light streaming
       from upper-right; left side dark for text legibility */
    background:
        linear-gradient(95deg,
            rgba(11, 10, 9, 0.92) 0%,
            rgba(11, 10, 9, 0.65) 38%,
            rgba(11, 10, 9, 0.18) 70%,
            rgba(11, 10, 9, 0.05) 100%),
        linear-gradient(180deg, transparent 55%, rgba(11, 10, 9, 0.92) 100%),
        /* warm key-light from upper-right (pub lamp) */
        radial-gradient(60% 60% at 100% 0%, rgba(240, 210, 139, 0.22), transparent 65%),
        /* warm bloom from bottom-right */
        radial-gradient(50% 50% at 100% 100%, rgba(198, 146, 58, 0.18), transparent 65%);
}
/* brass top-edge highlight on every promo banner */
.promo-banner > .promo-banner-content::before {
    content: "";
    position: absolute;
    top: 18px;
    left: 18px;
    right: 18px;
    height: 1px;
    background: linear-gradient(90deg, transparent 5%, rgba(240, 210, 139, 0.55) 25%, rgba(240, 210, 139, 0.85) 50%, rgba(240, 210, 139, 0.55) 75%, transparent 95%);
    z-index: 5;
    pointer-events: none;
}
.promo-banner-content { position: relative; }
.promo-banner-eyebrow {
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.65);
}
.promo-banner-title {
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.85);
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.7));
}
.promo-banner-meta { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.85); }
.promo-banner-price {
    text-shadow:
        0 2px 16px rgba(0, 0, 0, 0.85),
        0 0 28px rgba(240, 200, 130, 0.30);
}

/* ───── COMBO STRIP — beer-poster atmosphere ───── */
.combo-strip {
    border: 1px solid rgba(240, 210, 139, 0.28);
    border-left: 4px solid var(--accent);
    box-shadow:
        0 32px 76px rgba(0, 0, 0, 0.6),
        0 1px 0 rgba(240, 210, 139, 0.18) inset;
}
.combo-strip::before {
    filter: saturate(1.20) contrast(1.10) brightness(1.05);
}
.combo-strip::after {
    background:
        linear-gradient(95deg,
            rgba(11, 10, 9, 0.92) 0%,
            rgba(11, 10, 9, 0.55) 50%,
            rgba(11, 10, 9, 0.78) 100%),
        radial-gradient(40% 80% at 100% 50%, rgba(240, 200, 130, 0.20), transparent 60%);
}
.combo-strip-title {
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.85);
}
.combo-strip-price {
    text-shadow:
        0 2px 14px rgba(0, 0, 0, 0.85),
        0 0 24px rgba(240, 200, 130, 0.30);
}

/* ───── PRIMARY CARDS — premium menu-poster overlay ───── */
body.page-home .cards-primary .cat-card--primary {
    border: 1px solid rgba(240, 210, 139, 0.22);
    box-shadow:
        0 36px 78px rgba(0, 0, 0, 0.58),
        0 1px 0 rgba(245, 220, 160, 0.16) inset,
        0 -1px 0 rgba(0, 0, 0, 0.5) inset;
}
body.page-home .cards-primary .cat-card--primary::before {
    filter: saturate(1.18) contrast(1.10) brightness(1.08);
}
body.page-home .cards-primary .cat-card--primary::after {
    /* cinematic vignette + warm corner bloom */
    background:
        linear-gradient(180deg, rgba(11, 10, 9, 0.10) 0%, rgba(11, 10, 9, 0.50) 50%, rgba(11, 10, 9, 0.96) 100%),
        radial-gradient(80% 60% at 50% 110%, rgba(240, 200, 130, 0.22), transparent 60%),
        radial-gradient(50% 50% at 100% 0%, rgba(245, 220, 160, 0.10), transparent 65%);
}
/* brass top-rule on every PRIMARY card */
body.page-home .cards-primary .cat-card--primary > .cat-content::before {
    background: linear-gradient(90deg, transparent 5%, rgba(245, 220, 160, 0.65) 25%, rgba(245, 220, 160, 0.95) 50%, rgba(245, 220, 160, 0.65) 75%, transparent 95%);
}
body.page-home .cards-primary .cat-card--primary .cat-title {
    text-shadow:
        0 2px 16px rgba(0, 0, 0, 0.92),
        0 0 32px rgba(0, 0, 0, 0.55);
}
body.page-home .cards-primary .cat-card--primary:hover {
    border-color: rgba(244, 217, 138, 0.5);
    box-shadow:
        0 44px 104px rgba(198, 146, 58, 0.22),
        0 36px 78px rgba(0, 0, 0, 0.58),
        0 1px 0 rgba(244, 217, 138, 0.32) inset;
}

/* ───── SECTION HEADERS — Audi/BMW showroom rhythm ───── */
body.page-home .home-section-header,
.beer-showcase-header,
.promo-header {
    padding-top: clamp(28px, 3vw, 56px);
    padding-bottom: clamp(8px, 1vw, 16px);
}
body.page-home .home-section-eyebrow,
.beer-showcase-header .home-section-eyebrow,
.promo-header .home-section-eyebrow {
    letter-spacing: 0.50em;
    opacity: 0.82;
}
body.page-home .home-section-title,
.beer-showcase-header .home-section-title,
.promo-header .home-section-title {
    letter-spacing: 0.05em;
    line-height: 1.05;
}

/* ───── HERO refinement — sharper key light ───── */
body.page-home .home-hero::after {
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch' seed='13'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 0.86 0 0 0 0 0.55 0 0 0 0.10 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
        /* sharper warm key-light directly behind logo */
        radial-gradient(ellipse 50% 40% at 50% 45%, rgba(255, 220, 150, 0.22), transparent 55%);
    opacity: 0.85;
    mix-blend-mode: overlay;
    pointer-events: none;
}

/* ───── SECONDARY card refinement ───── */
body.page-home .cards-secondary .cat-card--secondary {
    border: 1px solid rgba(240, 210, 139, 0.10);
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.50),
        0 1px 0 rgba(240, 210, 139, 0.06) inset;
}
body.page-home .cards-secondary .cat-card--secondary::before {
    filter: saturate(1.10) contrast(1.05) brightness(0.98);
}
body.page-home .cards-secondary .cat-card--secondary::after {
    background:
        linear-gradient(180deg, rgba(11, 10, 9, 0.30) 0%, rgba(11, 10, 9, 0.72) 50%, rgba(11, 10, 9, 0.96) 100%),
        radial-gradient(80% 50% at 50% 110%, rgba(240, 200, 130, 0.10), transparent 60%);
}

/* ============================================================
   END STAGE 4G
   ============================================================ */

/* ============================================================
   STAGE 4H — LARGE KIOSK VIEWPORT FIT (21.5/27" 1920+/2560+)
   Compress hero + section header + primary grid so above-the-fold
   on 1920×1080 shows hero + all 6 primary cards, and on 2560×1440
   shows hero + primary + start of Pivska karta showcase.
   CSS-only override layer (final source order).
   ============================================================ */

/* ───── 1080p kiosk panels (Full HD landscape) ───── */
@media (min-width: 1700px) and (min-height: 1000px) {
    /* HERO: shrink from 406px → ~250px */
    body.page-home .home-hero {
        min-height: clamp(220px, 22vh, 280px) !important;
        padding: clamp(20px, 1.8vh, 32px) clamp(28px, 3vw, 64px) !important;
    }
    body.page-home .home-hero-content {
        gap: clamp(6px, 0.6vh, 10px) !important;
        padding: clamp(8px, 1vh, 14px) 0 !important;
    }
    body.page-home .home-hero-title {
        font-size: clamp(48px, 4.6vw, 96px) !important;
        line-height: 0.92 !important;
    }
    body.page-home .home-hero-tagline {
        font-size: clamp(11px, 0.85vw, 14px) !important;
        margin-top: 2px !important;
    }
    body.page-home .home-hero-cta {
        margin-top: clamp(6px, 0.6vh, 12px) !important;
        gap: 10px !important;
    }
    body.page-home .home-hero-btn {
        padding: 11px 24px !important;
        font-size: clamp(11px, 0.78vw, 13px) !important;
    }

    /* SECTION HEADER: shrink from 135px → ~50px */
    body.page-home .home-section-header {
        padding-top: clamp(12px, 1.2vh, 20px) !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
    body.page-home .home-section-eyebrow {
        font-size: 11px !important;
        letter-spacing: 0.40em !important;
    }
    body.page-home .home-section-title {
        font-size: clamp(20px, 1.6vw, 26px) !important;
        margin-top: 2px !important;
    }

    /* CATEGORIES ROW PADDING: tighter */
    body.page-home .categories-row {
        padding: clamp(8px, 0.8vh, 14px) clamp(28px, 3vw, 64px) clamp(20px, 1.6vh, 32px) !important;
    }

    /* PRIMARY 3×2 grid: cap card height so the full grid fits */
    body.page-home .categories-row .cards-primary.categories {
        gap: clamp(10px, 0.8vw, 16px) !important;
    }
    body.page-home .cards-primary .cat-card--primary {
        aspect-ratio: auto !important;
        height: clamp(220px, 26vh, 300px) !important;
        min-height: 0 !important;
        padding: clamp(18px, 1.4vw, 26px) !important;
    }
    body.page-home .cards-primary .cat-card--primary .cat-title {
        font-size: clamp(20px, 1.7vw, 28px) !important;
    }
    body.page-home .cards-primary .cat-card--primary .cat-sub {
        font-size: clamp(10px, 0.72vw, 12px) !important;
    }
}

/* ───── 1440p kiosk panels (QHD landscape) ───── */
@media (min-width: 2200px) and (min-height: 1300px) {
    /* On 27" QHD we have more vertical space — slightly larger hero */
    body.page-home .home-hero {
        min-height: clamp(260px, 22vh, 320px) !important;
    }
    body.page-home .home-hero-title {
        font-size: clamp(64px, 4.2vw, 110px) !important;
    }
    body.page-home .cards-primary .cat-card--primary {
        height: clamp(240px, 22vh, 320px) !important;
    }
    /* Pivska section header padding tightened so its top peeks above fold */
    .pivska-showcase {
        padding-top: clamp(20px, 1.8vh, 36px) !important;
    }
}

/* ───── PIVSKA + PROMO sections — slim title block padding too ───── */
@media (min-width: 1700px) and (min-height: 1000px) {
    body.page-home .pivska-showcase {
        padding: clamp(14px, 1.4vh, 24px) clamp(28px, 3vw, 64px) clamp(14px, 1.4vh, 24px) !important;
    }
    body.page-home .promo-banners {
        padding: clamp(14px, 1.4vh, 24px) clamp(28px, 3vw, 64px) clamp(12px, 1.2vh, 20px) !important;
    }
    body.page-home .combo-strip {
        margin: 0 clamp(28px, 3vw, 64px) clamp(20px, 1.8vh, 32px) !important;
    }
    body.page-home .cards-secondary.categories {
        padding: 0 clamp(28px, 3vw, 64px) clamp(20px, 1.8vh, 32px) !important;
    }
}
/* ============================================================
   END STAGE 4H
   ============================================================ */

/* ============================================================
   STAGE 4I-C — 720P COMPACT KIOSK MODE
   Dedicated HOME-only above-the-fold compaction for 1280×720 and
   other low-height landscape kiosk displays.
   Strictly scoped to body.page-home. CSS-only override layer
   (final source order).
   Does NOT touch Stage 4H (1920+/2560+) or mobile/tablet behavior.
   Goal: above the 720 fold show compact hero + HRANA & PIĆA header
   + all 6 primary cards in a 3×2 grid.
   ============================================================ */
@media (min-width: 1100px) and (max-width: 1699px) and (max-height: 800px) {
    /* HERO: compact band ~190–220px with reduced inner padding,
       tightened title + tagline + CTA spacing. Cinematic background,
       brass accents, and warm pub atmosphere are preserved via the
       existing ::before / ::after layered overlays. */
    body.page-home .home-hero {
        min-height: clamp(190px, 28vh, 220px) !important;
        padding: clamp(14px, 2vh, 22px) clamp(24px, 3vw, 56px) !important;
        gap: clamp(18px, 2.4vw, 36px) !important;
    }
    body.page-home .home-hero-content {
        gap: clamp(4px, 0.6vh, 8px) !important;
        padding: clamp(4px, 0.6vh, 10px) 0 !important;
    }
    body.page-home .home-hero-eyebrow {
        font-size: clamp(9px, 0.78vw, 11px) !important;
        letter-spacing: 0.30em !important;
        line-height: 1.3 !important;
    }
    body.page-home .home-hero-title {
        font-size: clamp(38px, 4.4vw, 64px) !important;
        line-height: 0.92 !important;
        letter-spacing: 0.005em !important;
    }
    body.page-home .home-hero-tagline {
        font-size: clamp(11px, 0.95vw, 13px) !important;
        line-height: 1.35 !important;
        margin-top: 2px !important;
    }
    body.page-home .home-hero-cta {
        margin-top: clamp(4px, 0.6vh, 10px) !important;
        gap: 8px !important;
    }
    body.page-home .home-hero-btn {
        padding: 9px 20px !important;
        font-size: clamp(10px, 0.74vw, 12px) !important;
        letter-spacing: 0.18em !important;
    }
    body.page-home .home-hero-aside {
        gap: 8px !important;
    }
    body.page-home .home-hero-qr {
        max-width: 110px !important;
    }
    body.page-home .home-hero-qr img {
        width: 92px !important;
        height: 92px !important;
    }
    body.page-home .home-hero-qr-label {
        font-size: 9px !important;
        letter-spacing: 0.20em !important;
    }
    body.page-home .home-hero-lang button {
        padding: 4px 10px !important;
        font-size: 10px !important;
    }

    /* SECTION HEADER: compress visual height to ~38–50px */
    body.page-home .home-section-header {
        padding: clamp(8px, 1vh, 14px) clamp(24px, 3vw, 56px) 0 clamp(24px, 3vw, 56px) !important;
        margin-bottom: 0 !important;
        gap: 16px !important;
    }
    body.page-home .home-section-eyebrow {
        font-size: 10px !important;
        letter-spacing: 0.36em !important;
    }
    body.page-home .home-section-title {
        font-size: clamp(16px, 1.4vw, 20px) !important;
        margin-top: 1px !important;
        line-height: 1.1 !important;
    }

    /* CATEGORIES ROW: tighter vertical rhythm */
    body.page-home .categories-row {
        padding: clamp(4px, 0.6vh, 10px) clamp(24px, 3vw, 56px) clamp(12px, 1.4vh, 20px) !important;
    }

    /* PRIMARY: force 3×2 grid (overrides the default 4-col Stage 4E grid)
       and cap card height so all 6 cards fit above the 720 fold. */
    body.page-home .categories-row .cards-primary.categories {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: clamp(8px, 0.9vh, 12px) !important;
        padding: 0 clamp(24px, 3vw, 56px) !important;
        margin-bottom: clamp(8px, 1vh, 14px) !important;
    }
    body.page-home .cards-primary .cat-card--primary {
        aspect-ratio: auto !important;
        height: clamp(175px, 28vh, 215px) !important;
        min-height: 0 !important;
        padding: clamp(14px, 1.2vw, 20px) !important;
        border-radius: 14px !important;
    }
    body.page-home .cards-primary .cat-card--primary .cat-title {
        font-size: clamp(16px, 1.4vw, 22px) !important;
        line-height: 1.05 !important;
    }
    body.page-home .cards-primary .cat-card--primary .cat-sub {
        font-size: clamp(9px, 0.7vw, 11px) !important;
        margin-top: 4px !important;
        letter-spacing: 0.14em !important;
    }
    body.page-home .cards-primary .cat-card--primary .cat-arrow {
        width: 36px !important;
        height: 36px !important;
        bottom: 12px !important;
        right: 12px !important;
    }
    body.page-home .cards-primary .cat-card--primary .cat-arrow svg {
        width: 14px !important;
        height: 14px !important;
    }
}
/* ============================================================
   END STAGE 4I-C
   ============================================================ */

/* ============================================================
   STAGE 4K — AMBER BEERHOUSE LIGHT POLISH
   Atmospheric tone polish only. Shifts the facade from neutral-cool
   to warm German pub: amber tavern glow, brass-warm shadows, subtle
   bottom-vignette warmth on photo cards, warmer hover light on
   buttons, beer-shelf backwash on the Pivska section.

   STRICT NON-GOALS (do NOT touch in this stage):
     * Layout / spacing / sizing. All padding, gap, height, width,
       grid-template-columns and font-size values from earlier stages
       remain authoritative — this layer only paints surfaces.
     * Stage 4H (1920+/2560+) viewport rules.
     * Stage 4I-C (1280×720) compact mode.
     * Mobile/tablet stack.

   Restraint rules:
     * Alpha on new amber overlays stays ≤ 0.22 — no neon, no casino.
     * No hue-rotate, no aggressive saturate.
     * Stays inside the existing brass family
       (--accent #c6923a / --accent-2 #f0d28b). No new orange hex.
   ============================================================ */

/* ───── 1. BODY: warm coal undertone + slightly stronger amber bloom.
         Replaces the neutral #0b0b0d → #101014 base with a brown-coal
         gradient and lifts the two corner blooms from 0.10/0.06 to
         0.16/0.10 so the page feels lit by a candlelit pub corner. */
body {
    background:
        radial-gradient(1280px 640px at 12% -8%, rgba(232, 168, 70, 0.16), transparent 62%),
        radial-gradient(960px 540px at 112% 112%, rgba(232, 168, 70, 0.10), transparent 62%),
        linear-gradient(180deg, #0c0a08 0%, #14100c 55%, #0e0b08 100%) !important;
}

/* ───── 2. HOME HERO: deeper amber bloom on right, warmer left
         vignette, soft warm halo behind the title. Re-paints the
         existing ::after layer (which already carries the gradient)
         and adds a new warm drop-shadow on the title for "candle
         behind glass" feel. Image (::before) gets a tiny saturate
         lift so the brass tones in the photo come through. */
body.page-home .home-hero::before {
    filter: saturate(0.94) contrast(1.08) brightness(0.96) !important;
}
body.page-home .home-hero::after {
    background:
        linear-gradient(95deg,
            rgba(11, 8, 6, 0.95) 0%,
            rgba(11, 8, 6, 0.84) 38%,
            rgba(20, 12, 6, 0.46) 70%,
            rgba(28, 16, 6, 0.66) 100%),
        radial-gradient(820px 520px at 78% 22%, rgba(232, 168, 70, 0.30), transparent 62%),
        radial-gradient(720px 520px at 82% 95%, rgba(232, 168, 70, 0.18), transparent 62%) !important;
}
body.page-home .home-hero-title {
    /* Soft warm halo behind the brass-gradient title. The existing
       text-shadow stack already has black drop shadows — we add an
       outer amber glow on top of that, very low alpha. */
    text-shadow:
        0 2px 0 rgba(0, 0, 0, 0.4),
        0 30px 80px rgba(0, 0, 0, 0.7),
        0 0 80px rgba(232, 168, 70, 0.18) !important;
}
body.page-home .home-hero-tagline {
    color: rgba(245, 232, 200, 0.96) !important;
}

/* ───── 3. SECTION HEADER: warmer eyebrow & title tone.
         The eyebrow already uses --accent-2 (#f0d28b) — no change.
         The section title gets a hint of warm sub-pixel shadow so it
         pops off the dark coal. */
body.page-home .home-section-title {
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5), 0 0 28px rgba(232, 168, 70, 0.10) !important;
}

/* ───── 4. PRIMARY CARDS: warm bottom vignette with brass bloom.
         Re-paints the ::after overlay so each food banner reads as
         "lit from below by a brass lamp". Keeps full title legibility
         (the dark band at the bottom is still strong) but adds a
         warm amber bloom rising from the floor of the card. Adds a
         1px inner brass stroke for "framed pub poster" feel. */
body.page-home .cards-primary .cat-card--primary::after {
    background:
        linear-gradient(180deg,
            rgba(11, 8, 6, 0.18) 0%,
            rgba(11, 8, 6, 0.58) 48%,
            rgba(11, 8, 6, 0.95) 100%),
        radial-gradient(150% 90% at 50% 112%, rgba(232, 168, 70, 0.28), transparent 62%) !important;
}
body.page-home .cards-primary .cat-card--primary {
    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.55),
        0 1px 0 rgba(240, 210, 139, 0.16) inset,
        0 0 0 1px rgba(198, 146, 58, 0.18) inset !important;
}
/* Light photo warmth: slight saturate + warmth, never enough to
   shift the image toward orange. */
body.page-home .cards-primary .cat-card--primary {
    --cat-img-filter: saturate(1.06) contrast(1.04) brightness(0.98);
}

/* ───── 5. SECONDARY CARDS: same warm-bottom vignette, lighter touch
         since these cards are smaller. */
body.page-home .cards-secondary .cat-card--secondary::after {
    background:
        linear-gradient(180deg,
            rgba(11, 8, 6, 0.28) 0%,
            rgba(11, 8, 6, 0.72) 50%,
            rgba(11, 8, 6, 0.96) 100%),
        radial-gradient(90% 60% at 50% 110%, rgba(232, 168, 70, 0.18), transparent 60%) !important;
}
body.page-home .cards-secondary .cat-card--secondary {
    box-shadow:
        0 18px 56px rgba(0, 0, 0, 0.50),
        0 1px 0 rgba(240, 210, 139, 0.12) inset,
        0 0 0 1px rgba(198, 146, 58, 0.14) inset !important;
}

/* ───── 6. CTA BUTTONS: warmer hover bloom + subtle resting glow.
         The primary button already has a brass gradient — we add a
         soft amber outer glow on hover ("hot brass"). The ghost
         button gets a warm wash on hover instead of cool white. */
body.page-home .home-hero-btn--primary {
    box-shadow:
        0 14px 36px rgba(198, 146, 58, 0.40),
        0 1px 0 rgba(255, 230, 170, 0.65) inset,
        0 0 0 1px rgba(232, 168, 70, 0.30) !important;
}
body.page-home .home-hero-btn--primary:hover {
    box-shadow:
        0 20px 56px rgba(232, 168, 70, 0.55),
        0 1px 0 rgba(255, 230, 170, 0.75) inset,
        0 0 36px rgba(232, 168, 70, 0.35),
        0 0 0 1px rgba(232, 168, 70, 0.45) !important;
}
body.page-home .home-hero-btn--ghost:hover {
    background: rgba(232, 168, 70, 0.10) !important;
    border-color: rgba(232, 168, 70, 0.55) !important;
}

/* ───── 7. PIVSKA KARTA / BEER SHOWCASE: warm shelf backwash.
         The title block already has a subtle radial bloom — we
         strengthen it slightly so the section reads as "illuminated
         beer shelf at the back of a pub". The card row gets a
         warmer floor glow under the bottle photos. */
.pivska-title-block {
    background:
        linear-gradient(160deg, rgba(50, 32, 18, 0.92) 0%, rgba(20, 14, 8, 0.92) 100%) !important;
    border-color: rgba(232, 168, 70, 0.28) !important;
}
.pivska-title-block::before {
    background: radial-gradient(ellipse 70% 110% at 0% 50%, rgba(232, 168, 70, 0.26), transparent 64%) !important;
}
.pivska-card {
    box-shadow:
        0 18px 48px rgba(0, 0, 0, 0.55),
        0 1px 0 rgba(240, 210, 139, 0.12) inset,
        0 0 0 1px rgba(198, 146, 58, 0.16) inset !important;
}
/* Bottle-card vignette: warmer bottom-up wash so the bottle glass
   looks lit from a low brass lamp. */
.pivska-card::after {
    background:
        linear-gradient(180deg,
            rgba(11, 8, 6, 0.10) 0%,
            rgba(11, 8, 6, 0.55) 50%,
            rgba(11, 8, 6, 0.96) 100%),
        radial-gradient(140% 80% at 50% 112%, rgba(232, 168, 70, 0.24), transparent 60%) !important;
}

/* ───── 8. PROMO BANNERS (Today's Recommendation / Chef's Pick) +
         COMBO STRIP: same warm pub-lamp bottom bloom. These are the
         loudest sales surfaces on /home so the warm wash matters most
         here — but kept restrained so the photography stays the hero. */
.promo-banner::after {
    background:
        linear-gradient(180deg,
            rgba(11, 8, 6, 0.12) 0%,
            rgba(11, 8, 6, 0.58) 50%,
            rgba(11, 8, 6, 0.96) 100%),
        radial-gradient(150% 90% at 50% 112%, rgba(232, 168, 70, 0.26), transparent 62%) !important;
}
.combo-strip::after {
    background:
        linear-gradient(95deg,
            rgba(11, 8, 6, 0.92) 0%,
            rgba(11, 8, 6, 0.78) 35%,
            rgba(11, 8, 6, 0.42) 70%,
            rgba(11, 8, 6, 0.72) 100%),
        radial-gradient(700px 360px at 80% 105%, rgba(232, 168, 70, 0.28), transparent 62%) !important;
}

/* ───── 9. PHASE RIBBON / RECOS / SPOTLIGHT cards: warm one-pixel
         brass edge so any list rail of recommendations reads as a
         framed pub list, not a flat tile grid. */
body.page-home .reco-card {
    box-shadow:
        0 14px 36px rgba(0, 0, 0, 0.45),
        0 1px 0 rgba(240, 210, 139, 0.10) inset,
        0 0 0 1px rgba(198, 146, 58, 0.14) inset !important;
}

/* ───── 10. KIOSK TOPBAR (menu / reservation / scenario pages):
         brass underline reflection. The topbar already has a thin
         line under it — replace its cool tone with a warm brass
         gradient so the navigation surface matches the hero. */
.topbar {
    box-shadow:
        0 1px 0 rgba(232, 168, 70, 0.18),
        0 12px 32px rgba(0, 0, 0, 0.45) !important;
}

/* ============================================================
   END STAGE 4K
   ============================================================ */

/* ============================================================
   STAGE 5B-SAFE-A — SOFT IMAGE ANTI-COPY
   Scope: public kiosk image surfaces only.
   Goal: block casual drag, mobile long-press save, and accidental
   selection on photo elements. Right-click is handled by JS
   (kiosk_protect.js) so it can be scoped without breaking forms.
   This is NOT DRM. Screenshots and DevTools cannot be blocked.
   Do NOT widen these selectors to clickable card containers
   (.cat-card, .feature-photo, .bs-card, .pl-card, .cs-card,
   .combo-strip) — they receive taps. pointer-events:none is
   restricted to the raw <img> nested inside <picture>, where the
   parent <article>/<a> is the actual tap target.
   ============================================================ */
img,
picture,
.reco-photo,
.reco-photo-img,
.item-view-photo,
.item-view-img,
.promo-photo,
.promo-photo-img,
.combo-photo,
.combo-photo-img,
.cat-photo,
.cat-photo-img {
    -webkit-user-drag: none;
    user-drag: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.reco-photo-img,
.item-view-img,
.promo-photo-img,
.combo-photo-img,
.cat-photo-img {
    pointer-events: none;
}
/* ============================================================
   END STAGE 5B-SAFE-A
   ============================================================ */

/* ============================================================
   STAGE 5C-A — PROMO CARD TEXT OVERFLOW + READABILITY FIX
   Text-level only. Keeps Bebas Neue / Playfair display fonts on
   the large headings; restores readable Inter body typography on
   metadata, descriptions and long item text; adds safe wrapping
   and clamping so Stage 5B images don't push descriptions off
   the card. No size, padding, grid, image, or color changes.
   STRICT NON-GOALS:
     * Do not change card heights, padding, gap, grid columns.
     * Do not change Stage 4H (1920+) sizes or Stage 4I-C (720p)
       compaction or Stage 4K amber polish.
     * Do not edit menu.json / hub_cards.json.
   ============================================================ */

/* ---- 1. Display headings: keep beerhouse poster font, but allow
         long titles to wrap instead of overflowing horizontally. ---- */
.promo-banner-title,
.combo-strip-title,
body.page-home .feature-card .feature-title,
body.page-home .reco-title,
body.page-menu--hubs .reco-title,
body.page-menu--hubs .reco-card--featured .reco-title,
body.page-menu .item-view-title,
.cat-title,
.promo-title,
.feature-title {
    overflow-wrap: anywhere;
    word-break: normal;
    white-space: normal;
    hyphens: none;
}

/* ---- 2. Eyebrow / micro labels: keep their wide tracking but
         prevent a long translation from blowing the row out. ---- */
.promo-banner-eyebrow,
.combo-strip-eyebrow,
.promo-tag,
.feature-label,
.reco-eyebrow,
.cat-badge,
.item-view-row-label {
    overflow-wrap: anywhere;
    word-break: normal;
    white-space: normal;
}

/* ---- 3. Body / meta / description text: readable Inter, normalised
         line-height, soft wrapping, and a safe line-clamp so the card
         keeps a predictable height regardless of language. ---- */
.promo-banner-meta,
.combo-strip-meta,
.promo-desc,
body.page-home .promo-desc,
body.page-menu .promo-desc,
body.page-wine .promo-desc,
body.page-home .reco-desc,
body.page-menu--hubs .reco-desc,
body.page-menu--hubs .reco-card--featured .reco-desc,
body.page-menu--hubs .recos-grid--hero .reco-card:not(.reco-card--featured) .reco-desc,
body.page-menu .item-view-desc,
body.page-menu .item-view-row-value,
body.page-menu .item-view-notes,
.cat-sub {
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    letter-spacing: 0.005em;
    line-height: 1.32;
    overflow-wrap: anywhere;
    word-break: normal;
    white-space: normal;
}

/* ---- 4. Metas on the two large home banners: clamp to 2 lines and
         keep them inside the dark text panel. The clamp prevents
         long RU/EN translations from spilling under the price/CTA. ---- */
.promo-banner-meta,
.combo-strip-meta {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 100%;
}

/* ---- 5. List/menu promo description: 3-line clamp keeps each card
         the same height so the list grid stays even after Stage 5B
         photos populate. Inherits readable typography from rule 3. ---- */
body.page-menu .promo-desc,
body.page-wine .promo-desc {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- 6. Item detail long-name safety: title still uses Playfair,
         but any single very long ingredient string can break. ---- */
body.page-menu .item-view-title {
    overflow-wrap: anywhere;
    word-break: normal;
    line-height: 1.18;
}
body.page-menu .item-view-desc {
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* ---- 7. Mobile (≤414) safety: tighten line-height a touch and
         enforce wrapping on the two big banner titles so they
         never trigger horizontal scroll on the 414×896 viewport. ---- */
@media (max-width: 480px) {
    .promo-banner-title,
    .combo-strip-title {
        line-height: 1.0;
        overflow-wrap: anywhere;
    }
    .promo-banner-meta,
    .combo-strip-meta {
        -webkit-line-clamp: 3;
        line-clamp: 3;
        line-height: 1.32;
    }
}
/* ============================================================
   END STAGE 5C-A
   ============================================================ */

/* ============================================================
   STAGE 5C-B — GLOBAL TYPOGRAPHY DISCIPLINE
   Card-level rebalance: smaller, calmer, premium. Image stays
   the hero on photo cards; text supports it. Display fonts
   (Bebas Neue, Playfair) and body font (Inter) are preserved —
   only sizes, tracking and language balancing change.

   STRICT NON-GOALS:
     * Do not change layout (padding, gap, grid, card heights).
     * Do not touch the hero title (.home-hero-title) — it is
       the *only* place a true display block belongs.
     * Do not break Stage 4H / 4I-C / 4K / 5B / 5B-SAFE-A / 5C-A.
     * Do not touch admin / reservation typography.

   Principles:
     - Promo / combo / featured card titles: cap at ~28–38 px on
       1920+, ~22–28 px on 1280, ~16–20 px on 414. They are
       *card* headlines, not billboard text.
     - Eyebrow / micro-labels: tighten letter-spacing from ~0.36–
       0.40em down to ~0.20–0.24em; modern poster, not all-caps
       road sign.
     - Body / meta: leave Stage 5C-A clamps alone.
     - RU language balance: Cyrillic glyphs are visually heavier
       than Latin at the same em size, so :lang(ru) trims the
       largest display headlines a further ~10–12 % so the
       perceived weight matches ME / EN.
   ============================================================ */

/* ── 1. Big home banners — DANAŠNJA PREPORUKA / IZBOR KUĆE ── */
.promo-banner-title {
    font-size: clamp(22px, 2.0vw, 38px) !important;
    letter-spacing: 0.02em !important;
    line-height: 1.02 !important;
}
.promo-banner-meta {
    font-size: clamp(12px, 0.78vw, 14px) !important;
    line-height: 1.32;
}
.promo-banner-eyebrow {
    font-size: clamp(10px, 0.72vw, 12px) !important;
    letter-spacing: 0.22em !important;
}
.promo-banner-price {
    font-size: clamp(20px, 1.5vw, 28px) !important;
    letter-spacing: 0.02em !important;
}
.promo-banner-cta {
    font-size: clamp(10px, 0.72vw, 12px) !important;
    letter-spacing: 0.20em !important;
    padding: clamp(9px, 0.8vw, 12px) clamp(16px, 1.4vw, 22px) !important;
}

/* ── 2. Wide combo strip — KOBASICE + TOČENO PIVO ── */
.combo-strip-title {
    font-size: clamp(18px, 1.55vw, 28px) !important;
    letter-spacing: 0.025em !important;
    line-height: 1.05 !important;
}
.combo-strip-meta {
    font-size: clamp(11px, 0.78vw, 13px) !important;
    line-height: 1.34;
}
.combo-strip-eyebrow {
    font-size: clamp(10px, 0.72vw, 12px) !important;
    letter-spacing: 0.22em !important;
}
.combo-strip-price {
    font-size: clamp(20px, 1.6vw, 30px) !important;
    letter-spacing: 0.02em !important;
}
.combo-strip-cta {
    font-size: clamp(10px, 0.72vw, 12px) !important;
    letter-spacing: 0.20em !important;
}

/* ── 3. Chef / Day feature cards (.feature-card) ── */
body.page-home .feature-card .feature-title {
    font-size: clamp(18px, 1.55vw, 24px) !important;
    line-height: 1.14 !important;
    letter-spacing: 0.005em;
}
body.page-home .feature-card .feature-label {
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
}
body.page-home .feature-card .feature-price {
    font-size: clamp(15px, 1.1vw, 18px) !important;
}

/* ── 4. Primary / secondary category cards on home ── */
.cat-card .cat-title {
    font-size: clamp(17px, 1.4vw, 22px);
    letter-spacing: 0.005em;
    line-height: 1.12;
}
.cat-card .cat-sub {
    font-size: clamp(11px, 0.78vw, 12px);
    letter-spacing: 0.01em;
    line-height: 1.34;
}

/* ── 5. Pivska / beer-showcase header card (NAŠE PIVO etc.) ── */
.pivska-card-title {
    font-size: clamp(15px, 1.2vw, 20px);
    letter-spacing: 0.04em;
    line-height: 1.06;
}
.pivska-card-meta {
    font-size: clamp(10px, 0.7vw, 11px);
    letter-spacing: 0.06em;
    line-height: 1.3;
}

/* ── 6. Section eyebrows + section titles on home ── */
body.page-home .home-section-title,
.beer-showcase-header .home-section-title,
.promo-header .home-section-title {
    font-size: clamp(18px, 1.6vw, 26px) !important;
    letter-spacing: 0.06em !important;
}

/* ── 7. Menu hub — featured & small reco cards ── */
body.page-menu--hubs .reco-card--featured .reco-title {
    font-size: clamp(20px, 1.8vw, 28px);
    line-height: 1.12;
    letter-spacing: 0.005em;
}
body.page-menu--hubs .reco-card--featured .reco-desc {
    font-size: clamp(12px, 0.85vw, 14px);
}
body.page-menu--hubs .reco-card--featured .reco-price {
    font-size: clamp(20px, 1.7vw, 28px);
}
body.page-menu--hubs .recos-grid--hero .reco-card:not(.reco-card--featured) .reco-title {
    font-size: clamp(13px, 1.0vw, 15px);
}
body.page-menu--hubs .reco-title {
    font-size: clamp(13px, 1.0vw, 16px);
    letter-spacing: 0.005em;
}
body.page-menu--hubs .reco-desc {
    font-size: clamp(11px, 0.78vw, 12px);
}
body.page-menu--hubs .reco-price {
    font-size: clamp(15px, 1.2vw, 19px);
}

/* ── 8. Home reco list (under hero) ── */
body.page-home .reco-title {
    font-size: clamp(14px, 1.1vw, 17px);
    letter-spacing: 0.005em;
    line-height: 1.14;
}
body.page-home .reco-desc {
    font-size: clamp(10px, 0.78vw, 12px);
    line-height: 1.34;
}
body.page-home .reco-price {
    font-size: clamp(16px, 1.3vw, 20px);
}

/* ── 9. Item detail page ── */
body.page-menu .item-view-title {
    font-size: clamp(20px, 1.85vw, 30px);
    line-height: 1.14;
    letter-spacing: 0.005em;
}
body.page-menu .item-view-desc {
    font-size: clamp(13px, 1.0vw, 15px);
    line-height: 1.5;
}
body.page-menu .item-view-row-label {
    font-size: 10px;
    letter-spacing: 0.18em;
}
body.page-menu .item-view-row-value {
    font-size: clamp(12px, 0.9vw, 14px);
}
body.page-menu .item-view-notes {
    font-size: clamp(11px, 0.85vw, 13px);
}

/* ── 10. Section / list promo cards (page-menu .promo) ── */
body.page-menu .promo-title,
body.page-wine .promo-title {
    font-size: clamp(15px, 1.2vw, 19px);
    line-height: 1.18;
}
body.page-menu .promo-desc,
body.page-wine .promo-desc {
    font-size: clamp(12px, 0.85vw, 13px);
}
body.page-menu .promo-price,
body.page-wine .promo-price {
    font-size: clamp(17px, 1.3vw, 22px);
}

/* ── 11. Topbar polish (already small, just trim spacing) ── */
body.page-menu .topbar-brand,
body.page-wine .topbar-brand {
    font-size: clamp(20px, 1.5vw, 26px);
    letter-spacing: 0.06em;
}
body.page-menu .topbar-sub,
body.page-wine .topbar-sub {
    font-size: clamp(9px, 0.65vw, 11px);
    letter-spacing: 0.20em;
}

/* ── 12. Hero tagline (the hero title itself stays untouched) ── */
.home-hero-tagline {
    font-size: clamp(11px, 0.85vw, 14px) !important;
    letter-spacing: 0.18em !important;
    line-height: 1.4;
}

/* ── 13. Mobile (≤480) — final shrinkage pass for the two big banners.
        Keeps the typography premium even on a 414-wide phone. ── */
@media (max-width: 480px) {
    .promo-banner-title { font-size: clamp(18px, 5.4vw, 26px) !important; }
    .combo-strip-title  { font-size: clamp(16px, 4.6vw, 22px) !important; }
    .promo-banner-price { font-size: clamp(16px, 4.4vw, 22px) !important; }
    .combo-strip-price  { font-size: clamp(16px, 4.4vw, 22px) !important; }
    body.page-home .feature-card .feature-title {
        font-size: clamp(16px, 4.4vw, 22px) !important;
    }
}

/* ── 14. RU LANGUAGE BALANCING ──
       Cyrillic glyphs in Bebas Neue / Playfair render visually
       heavier than Latin at the same em size, and Russian
       translations are typically 1.1–1.4 × longer. We trim the
       largest *display* headlines by ~10–12 % so RU lands at the
       same perceived weight as ME / EN. Body text stays as-is. */
:lang(ru) .promo-banner-title,
[lang="ru"] .promo-banner-title,
[lang="RU"] .promo-banner-title {
    font-size: clamp(20px, 1.75vw, 32px) !important;
    letter-spacing: 0.015em !important;
}
:lang(ru) .combo-strip-title,
[lang="ru"] .combo-strip-title,
[lang="RU"] .combo-strip-title {
    font-size: clamp(16px, 1.35vw, 24px) !important;
    letter-spacing: 0.02em !important;
}
:lang(ru) .promo-banner-price,
:lang(ru) .combo-strip-price,
[lang="ru"] .promo-banner-price,
[lang="ru"] .combo-strip-price {
    font-size: clamp(18px, 1.4vw, 26px) !important;
}
:lang(ru) body.page-home .feature-card .feature-title,
[lang="ru"] body.page-home .feature-card .feature-title {
    font-size: clamp(16px, 1.35vw, 22px) !important;
}
:lang(ru) body.page-menu--hubs .reco-card--featured .reco-title,
[lang="ru"] body.page-menu--hubs .reco-card--featured .reco-title {
    font-size: clamp(18px, 1.55vw, 24px);
}
:lang(ru) body.page-menu .item-view-title,
[lang="ru"] body.page-menu .item-view-title {
    font-size: clamp(18px, 1.65vw, 26px);
}
:lang(ru) body.page-home .home-section-title,
[lang="ru"] body.page-home .home-section-title {
    font-size: clamp(16px, 1.4vw, 22px) !important;
    letter-spacing: 0.04em !important;
}
:lang(ru) .promo-banner-eyebrow,
:lang(ru) .combo-strip-eyebrow,
[lang="ru"] .promo-banner-eyebrow,
[lang="ru"] .combo-strip-eyebrow {
    letter-spacing: 0.18em !important;
}
@media (max-width: 480px) {
    :lang(ru) .promo-banner-title,
    [lang="ru"] .promo-banner-title { font-size: clamp(16px, 4.6vw, 22px) !important; }
    :lang(ru) .combo-strip-title,
    [lang="ru"] .combo-strip-title  { font-size: clamp(14px, 4.0vw, 19px) !important; }
}
/* ============================================================
   END STAGE 5C-B
   ============================================================ */


/* ============================================================
   STAGE 6 — GUEST CARD chip + page (scoped)
   ============================================================ */

/* Floating "My card" chip — appears on /, /menu, /reservation only.
   Hidden on .page-guest-card by JS (we just don't append it there). */
.guest-card-chip {
    position: fixed;
    bottom: 18px;
    right: 18px;
    z-index: 200;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    border-radius: 999px;
    background: linear-gradient(180deg, #2a2118 0%, #1a1206 100%);
    color: #e6c787;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
    border: 1px solid rgba(202, 164, 90, 0.45);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.guest-card-chip::before {
    content: "🎟";
    font-size: 14px;
    line-height: 1;
}
.guest-card-chip:hover {
    color: #f4d99f;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45);
}

@media (max-width: 600px) {
    .guest-card-chip {
        bottom: 14px;
        right: 14px;
        padding: 10px 14px;
        font-size: 12px;
    }
}

/* /guest-card page — minimal panel; reuses kiosk.css colour tokens. */
.guest-card-page {
    max-width: 720px;
    margin: 32px auto 64px;
    padding: 0 16px;
    color: #e8dccb;
}
.guest-card-panel {
    background: linear-gradient(180deg, #1d1d24 0%, #14141a 100%);
    border: 1px solid rgba(202, 164, 90, 0.35);
    border-radius: 16px;
    padding: 28px 26px 22px;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35);
}
.guest-card-restaurant {
    font-family: 'Playfair Display', serif;
    font-size: 14px;
    letter-spacing: 0.18em;
    color: #caa45a;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.guest-card-headline {
    margin: 0 0 22px;
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    font-weight: 600;
    color: #f1e3c8;
}
.guest-card-details {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 18px;
    row-gap: 8px;
    margin: 0 0 26px;
    padding: 16px 18px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(202, 164, 90, 0.18);
    border-radius: 12px;
}
.guest-card-details dt {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(202, 164, 90, 0.75);
    align-self: center;
}
.guest-card-details dd {
    margin: 0;
    font-size: 15px;
    color: #f1e3c8;
    align-self: center;
}
.guest-card-id {
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: #f4d99f;
}
.guest-card-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 14px;
}
.guest-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(202, 164, 90, 0.35);
    color: #f1e3c8;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.guest-card-btn:hover {
    background: rgba(202, 164, 90, 0.12);
    color: #f4d99f;
    transform: translateY(-1px);
}
.guest-card-btn--primary {
    background: linear-gradient(180deg, #caa45a 0%, #a47d3a 100%);
    border-color: #caa45a;
    color: #1a1306;
}
.guest-card-btn--primary:hover {
    background: linear-gradient(180deg, #d8b478 0%, #b18b48 100%);
    color: #1a1306;
}

.guest-card-reservations {
    margin-top: 22px;
    padding: 22px 26px;
    background: linear-gradient(180deg, #1d1d24 0%, #14141a 100%);
    border: 1px solid rgba(202, 164, 90, 0.18);
    border-radius: 16px;
}
.guest-card-subhead {
    margin: 0 0 14px;
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    font-weight: 600;
    color: #f1e3c8;
}
.guest-card-res-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.guest-card-res-empty {
    padding: 14px;
    border: 1px dashed rgba(202, 164, 90, 0.3);
    border-radius: 10px;
    color: rgba(241, 227, 200, 0.65);
    text-align: center;
    font-size: 14px;
}
.guest-card-res-row {
    padding: 10px 14px;
    border: 1px solid rgba(202, 164, 90, 0.2);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.22);
    color: #f1e3c8;
    font-size: 14px;
    font-family: 'JetBrains Mono', monospace;
}

@media (max-width: 480px) {
    .guest-card-headline { font-size: 24px; }
    .guest-card-details { grid-template-columns: 1fr; row-gap: 4px; padding: 14px; }
    .guest-card-details dt { font-size: 11px; }
    .guest-card-actions { grid-template-columns: 1fr; }
}

/* ============================================================
   END STAGE 6
   ============================================================ */


/* ============================================================
   STAGE 9 — GUEST CARD install button + instructions modal
   ============================================================ */
.guest-card-btn--install {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 14px;
    padding: 13px 16px;
    border-radius: 10px;
    background: linear-gradient(180deg, #2a2118 0%, #1a1206 100%);
    border: 1px solid rgba(202, 164, 90, 0.45);
    color: #f4d99f;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.guest-card-btn--install::before { content: "📥"; font-size: 15px; line-height: 1; }
.guest-card-btn--install:hover {
    background: linear-gradient(180deg, #3a2e20 0%, #1f1808 100%);
    transform: translateY(-1px);
}
.guest-card-btn--install:disabled {
    opacity: 0.6;
    cursor: progress;
    transform: none;
}

.gc-install-modal[hidden] { display: none !important; }
.gc-install-modal {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.gc-install-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.gc-install-modal-panel {
    position: relative;
    z-index: 1;
    max-width: 480px;
    width: 100%;
    padding: 24px 22px 18px;
    background: linear-gradient(180deg, #1d1d24 0%, #14141a 100%);
    border: 1px solid rgba(202, 164, 90, 0.4);
    border-radius: 14px;
    color: #e8dccb;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.55);
}
.gc-install-modal-title {
    margin: 0 0 14px;
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    font-weight: 600;
    color: #f1e3c8;
}
.gc-install-modal-line {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.45;
    color: rgba(241, 227, 200, 0.92);
}
.gc-install-modal-line[hidden] { display: none; }
.gc-install-modal-close {
    width: 100%;
    margin-top: 8px;
}

@media (max-width: 480px) {
    .gc-install-modal-panel { padding: 20px 18px 16px; }
    .gc-install-modal-title { font-size: 18px; }
    .gc-install-modal-line { font-size: 13px; }
}

/* ============================================================
   END STAGE 9
   ============================================================ */

/* ============================================================
   STAGE 10 — PREMIUM QR + CONTACT CARD ON HOME FACADE
   Replaces the old 110-130px QR-only widget with a full vertical
   contact card: QR for the menu + click-to-call + WhatsApp +
   Google Maps + iPhone Safari install hint. Dark / gold / glass
   surface, German Beerhouse aesthetic, kiosk-friendly tap targets.
   These rules override the earlier body.page-home .home-hero-aside
   shrink-to-130px overrides (kiosk.css §STAGE 7B-ish), which were
   sized for the QR-only chip. We need real width here.
   ============================================================ */
body.page-home .home-hero-aside {
    /* Re-flow the right column into a real card stack instead of a
       postcard-stamp. Kept absolutely positioned (matches existing
       hero layout) but widened to fit phone/WA/maps rows. */
    max-width: clamp(280px, 26vw, 380px);
    gap: clamp(10px, 1vw, 14px);
    align-items: stretch;
    opacity: 1;
}

.contact-card {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.2vw, 18px);
    padding: clamp(16px, 1.4vw, 22px);
    background:
        linear-gradient(165deg, rgba(28, 19, 11, 0.92) 0%, rgba(13, 8, 5, 0.86) 100%);
    border: 1px solid rgba(240, 210, 139, 0.28);
    border-radius: 14px;
    box-shadow:
        0 24px 56px rgba(0, 0, 0, 0.55),
        0 1px 0 rgba(240, 210, 139, 0.22) inset;
    backdrop-filter: blur(16px) saturate(1.1);
    -webkit-backdrop-filter: blur(16px) saturate(1.1);
    color: #efe7d2;
}

.contact-card-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(240, 210, 139, 0.18);
}
.contact-card-eyebrow {
    font-size: clamp(9px, 0.65vw, 11px);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(240, 210, 139, 0.7);
    line-height: 1.4;
}
.contact-card-brand {
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(18px, 1.5vw, 24px);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #f0d28b;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}

/* The QR sub-block reuses the legacy .home-hero-qr selectors so any
   existing CSS or JS that queries those still works. We just give
   it an inner-card look. */
body.page-home .home-hero-qr.contact-card-qr {
    background: rgba(244, 234, 210, 0.96);
    border: 1px solid rgba(240, 210, 139, 0.45);
    border-radius: 10px;
    padding: clamp(10px, 0.9vw, 14px);
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(0, 0, 0, 0.06) inset;
    text-align: center;
}
body.page-home .home-hero-qr.contact-card-qr img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 220px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    background: #f4ead2;
    padding: 6px;
    border-radius: 4px;
    filter: contrast(1.05);
}
body.page-home .home-hero-qr-label.contact-card-qr-label {
    font-family: "Cormorant SC", "Playfair Display", Georgia, serif;
    margin-top: 8px;
    font-size: clamp(10px, 0.7vw, 12px);
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: #6b4a1d;
}

.contact-card-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.contact-card-section-title {
    display: block;
    font-size: clamp(10px, 0.65vw, 11px);
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: rgba(240, 210, 139, 0.65);
    margin-bottom: 2px;
    text-align: center;
}

.contact-action {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(11, 10, 9, 0.55);
    border: 1px solid rgba(240, 210, 139, 0.22);
    border-radius: 10px;
    color: #efe7d2;
    text-decoration: none;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
    -webkit-tap-highlight-color: transparent;
    min-height: 52px;
}
.contact-action:hover,
.contact-action:focus-visible {
    border-color: rgba(240, 210, 139, 0.55);
    background: rgba(40, 28, 18, 0.7);
    transform: translateY(-1px);
    outline: none;
}
.contact-action:active { transform: translateY(0); }

.contact-action-icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, rgba(240, 210, 139, 0.28), rgba(240, 210, 139, 0.06) 70%);
    border: 1px solid rgba(240, 210, 139, 0.4);
    color: #f0d28b;
}
.contact-action-icon svg { width: 18px; height: 18px; }
.contact-action--wa .contact-action-icon {
    background:
        radial-gradient(circle at 30% 30%, rgba(37, 211, 102, 0.45), rgba(37, 211, 102, 0.08) 70%);
    border-color: rgba(37, 211, 102, 0.55);
    color: #b6f4ce;
}
.contact-action--map .contact-action-icon {
    background:
        radial-gradient(circle at 30% 30%, rgba(180, 140, 90, 0.4), rgba(180, 140, 90, 0.08) 70%);
    border-color: rgba(240, 210, 139, 0.5);
}

.contact-action-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}
.contact-action-label {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(240, 210, 139, 0.85);
    line-height: 1.2;
}
.contact-action-value {
    margin-top: 2px;
    font-size: clamp(13px, 0.95vw, 15px);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #efe7d2;
    line-height: 1.25;
    /* Long addresses must not break the card */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}

.contact-card-ios-hint {
    margin: 0;
    padding: 8px 10px;
    font-size: clamp(10px, 0.7vw, 12px);
    letter-spacing: 0.06em;
    color: rgba(239, 231, 210, 0.7);
    background: rgba(11, 10, 9, 0.4);
    border: 1px dashed rgba(240, 210, 139, 0.25);
    border-radius: 8px;
    text-align: center;
    line-height: 1.45;
}

/* Make the language switcher visually consistent with the new card. */
body.page-home .home-hero-aside .home-hero-lang {
    background: rgba(11, 10, 9, 0.55);
    border: 1px solid rgba(240, 210, 139, 0.22);
    border-radius: 10px;
    padding: 6px;
}

/* --------------- Responsive scale-down --------------- */

/* Large laptop / smaller kiosk: shrink card a touch but keep buttons
   tappable. Override the legacy "max-width: 130px" rule. */
@media (max-width: 1280px) {
    body.page-home .home-hero-aside {
        max-width: clamp(260px, 30vw, 320px) !important;
    }
    body.page-home .home-hero-qr.contact-card-qr img { max-width: 180px; }
}

/* Tablet: collapse to a single column under the hero copy. The hero
   layout already collapses to 1 column at this breakpoint (kiosk.css
   §STAGE 4A) so simply un-pin the aside. */
@media (max-width: 980px) {
    body.page-home .home-hero-aside {
        position: static !important;
        max-width: 480px !important;
        margin: clamp(16px, 3vw, 28px) auto 0 !important;
        align-self: center;
    }
    body.page-home .home-hero-qr.contact-card-qr img { max-width: 200px; }
}

/* Phone: tighten paddings and force the QR/contact rows to be
   thumb-friendly. The label below the QR is hidden — the card
   header already says "Scan for menu". */
@media (max-width: 720px) {
    .contact-card { padding: 14px; gap: 12px; }
    .contact-card-brand { font-size: 18px; }
    body.page-home .home-hero-qr.contact-card-qr img { max-width: 160px; }
    .contact-action { padding: 9px 10px; min-height: 48px; }
    .contact-action-icon { flex-basis: 32px; width: 32px; height: 32px; }
    .contact-action-icon svg { width: 16px; height: 16px; }
    .contact-action-value { font-size: 13px; }
}

@media (max-width: 480px) {
    body.page-home .home-hero-aside {
        max-width: calc(100vw - 32px) !important;
    }
    body.page-home .home-hero-qr-label.contact-card-qr-label { display: block; }
}

/* ============================================================================
   CARD IMAGE FIT FIX (2026-05-06)
   Унифицированный full-cover поверх любых ранее заданных правил.
   Цель: фото полностью заполняет рамку карточки, аккуратно обрезается,
   не вылезает за границы. Применяется к hub-card / category-card / item-card
   / reco-card / item-view-photo на /menu, /menu?section=… и /.
   Затрагиваются ТОЛЬКО фото-обёртки и <img> — текст/цены/категории
   не меняются. Не зависит от menu.json, hub_cards.json, server.py.
   ============================================================================ */

/* 1. КОНТЕЙНЕР КАРТОЧКИ: гарантируем clipping, чтобы фото
      не вылезало за скруглённые углы. */
body.page-menu .cat-card,
body.page-menu .promo,
body.page-menu .reco-card,
body.page-menu--item .item-view-photo,
body.page-home .cat-card,
body.page-home .reco-card {
    overflow: hidden;
}

/* 2. ФОТО-ОБЁРТКИ: занимают всю ширину карточки, без внутреннего padding,
      <img> сидит абсолютно внутри (см. п.3) и поэтому не оставляет полей. */
body.page-menu .promo-photo,
body.page-wine .promo-photo,
body.page-menu .categories--rich .cat-photo,
body.page-menu--hubs .reco-photo,
body.page-menu .item-view-photo {
    position: relative;
    width: 100%;
    padding: 0 !important;
    overflow: hidden;
    display: block;
}

/* 3. <img> ВНУТРИ КАРТОЧКИ: full-cover. position:absolute + inset:0
      перекрывает любой padding/border, а object-fit:cover масштабирует
      фото так, что оно ПОЛНОСТЬЮ заполняет рамку, обрезаясь по центру. */
body.page-menu .promo-photo-img,
body.page-wine .promo-photo-img,
body.page-menu .categories--rich .cat-photo-img,
body.page-menu--hubs .reco-photo-img,
body.page-menu .item-view-img,
body.page-menu--item .item-view-img,
body.page-home .reco-photo-img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    filter: none;
}

/* <picture> — это инлайн-контейнер вокруг <img>, тоже распиливаем
   на весь фрейм, чтобы абсолютный <img> привязывался к контейнеру фото. */
body.page-menu .promo-photo > picture,
body.page-wine .promo-photo > picture,
body.page-menu .categories--rich .cat-photo > picture,
body.page-menu--hubs .reco-photo > picture,
body.page-menu .item-view-photo > picture,
body.page-home .reco-photo > picture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* 4. PROMO (item-cards в /menu?section=…) — стабильный aspect-ratio */
body.page-menu .promo.promo--compact .promo-photo {
    aspect-ratio: 4 / 3;
    height: auto;
    min-height: 0;
    margin: 0;
    border-radius: 18px;
}

/* 5. HUB CARDS (cat-photo на /menu) — соблюдаем существующую высоту 156px,
      но теперь <img> точно покрывает её всю (не contain). */
body.page-menu .categories--rich .cat-photo {
    /* высота уже задана в .categories--rich .cat-photo выше — повторяем для
       устойчивости при наследовании от родителя при свёрнутом контейнере */
    border-radius: 16px 16px 8px 8px;
    margin: 0;
}

/* 6. CONTENT-блок item-card должен лежать ниже фото и не наезжать. */
body.page-menu .promo.promo--compact .promo-content {
    position: relative;
    z-index: 1;
}

/* 7. RECO (рекомендации/spotlight на /menu) — фото уже cover, нормализуем
      обёртку, чтобы шёл стабильный full-cover на любой высоте карточки. */
body.page-menu--hubs .reco-card {
    overflow: hidden;
}

/* 8. ITEM-VIEW (детальная страница /menu?section=&item=) — фото уже cover
      по основной странице, фиксируем для page-menu (без --item) тоже. */
body.page-menu .item-view-photo {
    border-radius: 22px;
}

/* 9. ::after vignette у `.promo-photo` остаётся поверх <img> благодаря
      z-index. Убедимся, что он не уезжает выше img. */
body.page-menu .promo-photo::after,
body.page-wine .promo-photo::after {
    z-index: 2;
}

/* ---- Tablet (≤1024px): item-cards 4/3 / hub-cards чуть ниже ---- */
@media (max-width: 1024px) {
    body.page-menu .promo.promo--compact .promo-photo { aspect-ratio: 4 / 3; }
    body.page-menu .categories--rich .cat-photo {
        height: 140px;
        min-height: 140px;
        max-height: 140px;
    }
}

/* ---- Mobile (≤640px): item-cards 1/1 (квадрат), hub-cards адаптивно ---- */
@media (max-width: 640px) {
    body.page-menu .promo.promo--compact .promo-photo { aspect-ratio: 1 / 1; }
    body.page-menu .categories--rich .cat-photo {
        height: 120px;
        min-height: 120px;
        max-height: 120px;
    }
    body.page-menu--item .item-view-photo {
        height: 240px;
        max-height: 240px;
    }
}

/* ---- Small mobile (≤414px) — узкий iPhone, одна колонка списка ---- */
@media (max-width: 414px) {
    body.page-menu--items .promos.promos--compact,
    body.page-menu .promos.promos--compact {
        grid-template-columns: 1fr !important;
    }
    body.page-menu .promo.promo--compact .promo-photo { aspect-ratio: 4 / 3; }
}
/* ============================================================================
   END CARD IMAGE FIT FIX
   ============================================================================ */

/* ============================================================================
   FACADE STABILIZATION PASS — 2026-05-06 (rev: facade ≠ guest-card)
   Final-source-order overrides applied AFTER the emergency media purge.
   The desktop facade is a public kiosk surface and contains ONLY logo,
   slogan, compact QR, 13-language switcher, and the open-menu / reserve
   CTAs. Phone/WhatsApp/location/iOS-install actions live in /guest-card
   and the mobile-only floating chip — never on this surface.
   ============================================================================ */

/* --- 1. Hide floating "Moja kartica" / guest-card chip on desktop kiosk --- */
@media (min-width: 901px) {
    .guest-card-chip { display: none !important; }
}

/* --- 2. Slim facade aside on desktop: compact QR + 13-lang switcher only.
   Cancels Stage 4C's max-width:130px and Stage 4E.1's absolute-corner
   cluster so the aside flows in the grid column. Mobile (≤900px) keeps
   the corner cluster from earlier stages. */
@media (min-width: 901px) {
    body.page-home .home-hero-aside {
        position: static !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: clamp(10px, 1vw, 16px) !important;
        width: 100% !important;
        max-width: 220px !important;
        opacity: 1 !important;
        z-index: 4;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        justify-self: end;
    }
    /* Compact QR card — small / elegant / cream-paper */
    body.page-home .home-hero-aside .home-hero-qr {
        background: rgba(244, 234, 210, 0.96) !important;
        border: 1px solid rgba(240, 210, 139, 0.45) !important;
        box-shadow:
            0 10px 24px rgba(0, 0, 0, 0.45),
            0 0 0 1px rgba(0, 0, 0, 0.06) inset !important;
        border-radius: 10px !important;
        padding: 10px !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        display: block !important;
        flex: 0 0 auto !important;
        text-align: center !important;
        border-right: none !important;
    }
    body.page-home .home-hero-aside .home-hero-qr a.qr-image {
        display: block !important;
        line-height: 0 !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        width: auto !important;
        height: auto !important;
    }
    body.page-home .home-hero-aside .home-hero-qr img {
        width: 100% !important;
        height: auto !important;
        max-width: 160px !important;
        aspect-ratio: 1 / 1 !important;
        margin: 0 auto !important;
        background: #f4ead2 !important;
        padding: 5px !important;
        border-radius: 4px !important;
        filter: contrast(1.05) !important;
        opacity: 1 !important;
        display: block !important;
    }
    body.page-home .home-hero-aside .home-hero-qr-label {
        display: block !important;
        margin-top: 8px !important;
        font-family: "Cormorant SC", "Playfair Display", Georgia, serif !important;
        font-size: 10px !important;
        letter-spacing: 0.34em !important;
        text-transform: uppercase !important;
        color: #6b4a1d !important;
        line-height: 1.3 !important;
    }
}

/* --- 3. Language switcher: visible & readable on desktop kiosk ---------- */
@media (min-width: 901px) {
    body.page-home .home-hero-aside .home-hero-lang.lang-switch {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        justify-content: center !important;
        background: rgba(11, 10, 9, 0.55) !important;
        border: 1px solid rgba(240, 210, 139, 0.22) !important;
        border-radius: 10px !important;
        padding: 6px !important;
        max-width: none !important;
        width: 100% !important;
        align-self: stretch !important;
        backdrop-filter: blur(6px) !important;
        -webkit-backdrop-filter: blur(6px) !important;
    }
    body.page-home .home-hero-aside .home-hero-lang.lang-switch button {
        font-family: "Inter", system-ui, sans-serif !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: 0.10em !important;
        padding: 6px 9px !important;
        min-width: 0 !important;
        border-radius: 4px !important;
        color: rgba(220, 198, 158, 0.7) !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        line-height: 1.1 !important;
    }
    body.page-home .home-hero-aside .home-hero-lang.lang-switch button:hover {
        color: var(--accent-2) !important;
        background: rgba(240, 210, 139, 0.10) !important;
    }
    body.page-home .home-hero-aside .home-hero-lang.lang-switch button.active {
        color: #1b1206 !important;
        background: linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 100%) !important;
        text-shadow: none !important;
    }
}

/* --- 4. Premium dark placeholder when --cat-bg-img is the no-image fallback
   The emergency media purge replaced every facade image-set(...) with
   image-set(url('/static/images/no-image.webp')...). We hide that watermark
   image and let the card body show its dark beerhouse background. */
.cat-card[style*="no-image.webp"]::before {
    background-image: none !important;
    background:
        radial-gradient(ellipse 65% 50% at 30% 25%, rgba(198, 146, 58, 0.22), transparent 65%),
        radial-gradient(ellipse 60% 45% at 80% 80%, rgba(120, 80, 35, 0.18), transparent 60%),
        linear-gradient(160deg, #1b130a 0%, #0d0805 60%, #14100b 100%) !important;
    opacity: 1 !important;
    filter: none !important;
}
.cat-card[style*="no-image.webp"]::after {
    /* Calm the over-darken since there is no photo to legibilize */
    background:
        linear-gradient(180deg, rgba(10, 8, 7, 0.10) 0%, rgba(10, 8, 7, 0.40) 70%, rgba(10, 8, 7, 0.78) 100%),
        radial-gradient(120% 80% at 50% 110%, rgba(184, 101, 30, 0.10), transparent 65%) !important;
}
/* Same treatment for inline image-set with no-image */
.cat-card[style*="no-image"][style*="image-set"]::before {
    background-image: none !important;
}

/* --- 5. /menu hub-card thumbnails: replace no-image watermark with brand tile - */
body.page-menu .categories--rich .cat-photo .cat-photo-img[src*="no-image"] {
    /* Hide the watermark image; the figure mark (P/L/B/…) handles identity */
    opacity: 0 !important;
}
body.page-menu .categories--rich .cat-photo:has(.cat-photo-img[src*="no-image"]) {
    background:
        radial-gradient(ellipse 60% 55% at 30% 20%, rgba(198, 146, 58, 0.22), transparent 60%),
        linear-gradient(160deg, #1b130a 0%, #0d0805 100%) !important;
    border: 1px solid rgba(240, 210, 139, 0.18) !important;
}
body.page-menu .categories--rich .cat-photo:has(.cat-photo-img[src*="no-image"]) .cat-photo-mark {
    color: rgba(240, 210, 139, 0.85) !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6), 0 0 18px rgba(198, 146, 58, 0.30) !important;
    font-weight: 800 !important;
}
/* Fallback for browsers without :has() — apply premium tone to all empty figures */
body.page-menu .categories--rich .cat-photo.cat-photo--empty {
    background:
        radial-gradient(ellipse 60% 55% at 30% 20%, rgba(198, 146, 58, 0.22), transparent 60%),
        linear-gradient(160deg, #1b130a 0%, #0d0805 100%) !important;
    border: 1px solid rgba(240, 210, 139, 0.18) !important;
}

/* --- 6. Reservation/booking floating overlays on desktop kiosk ---------- */
/* If any popover-style booking widget shows up over the kiosk facade, hide
   it on ≥901px so the desktop facade stays clean. Scoped to known classes
   only — admin/reservation pages (different page classes) untouched. */
@media (min-width: 901px) {
    body.page-home .booking-overlay,
    body.page-menu .booking-overlay,
    body.page-home .home-fab,
    body.page-menu .home-fab,
    body.page-home .floating-cta,
    body.page-menu .floating-cta { display: none !important; }
}
/* ============================================================================
   END FACADE STABILIZATION PASS
   ============================================================================ */

/* ============================================================================
   FACADE COMPACT HERO FIX — 2026-05-06
   Desktop facade hero (≥901px) was a wide empty strip with the QR/lang
   cluster pinned to the far edge. Rebuild as a balanced 2-col band:
     - hero capped at 1180px wide, centred
     - col 1: logo + tagline + CTA buttons
     - col 2: compact QR (≤150px card / ≤120px image) + 13-lang switcher (≤220px)
   No markup, JS, or backend changes. CSS-only, scoped to body.page-home.
   ============================================================================ */
@media (min-width: 901px) {
    /* HERO BOX: centered band, content centred independently of the
       service widget. We use single-column flex with the brand block
       centred; the QR/lang widget is absolutely positioned to the right
       so it does NOT participate in the centering calculation — the
       logo always lands at the visual center of the 1180-px band. */
    body.page-home .home-hero {
        max-width: 1180px !important;
        margin: 0 auto !important;
        min-height: clamp(240px, 30vh, 340px) !important;
        padding: clamp(20px, 2.4vw, 36px) clamp(24px, 3vw, 56px) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;          /* anchor for absolute aside */
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        gap: 0 !important;
    }
    body.page-home .home-hero-content {
        max-width: 720px !important;
        width: 100% !important;
        padding: clamp(8px, 1vw, 14px) 0 !important;
        gap: clamp(8px, 0.8vw, 14px) !important;
        align-items: center !important;
        text-align: center !important;
        margin: 0 auto !important;
    }
    body.page-home .home-hero-title {
        font-size: clamp(40px, 4.6vw, 84px) !important;
    }
    body.page-home .home-hero-cta {
        justify-content: center !important;
    }

    /* Decorative brass top/bottom rules — anchored to the centred
       content column, so they sit symmetrically above/below the title. */
    body.page-home .home-hero > .home-hero-content::before,
    body.page-home .home-hero > .home-hero-content::after {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: clamp(200px, 62%, 460px) !important;
        background: linear-gradient(90deg,
            transparent 0%,
            rgba(240, 210, 139, 0.40) 30%,
            rgba(240, 210, 139, 0.65) 50%,
            rgba(240, 210, 139, 0.40) 70%,
            transparent 100%) !important;
        opacity: 0.85 !important;
    }
    body.page-home .home-hero > .home-hero-content::before {
        top: clamp(6px, 0.8vw, 12px) !important;
    }
    body.page-home .home-hero > .home-hero-content::after {
        bottom: clamp(6px, 0.8vw, 12px) !important;
    }

    /* ── RIGHT SERVICE PANEL: floats absolutely so it cannot push the
       centered brand block off-axis. Vertically centered against the
       hero box (top:50% / translateY(-50%)). ── */
    body.page-home .home-hero-aside,
    body.page-home .home-hero-aside.home-hero-aside {
        position: absolute !important;
        right: clamp(20px, 2vw, 32px) !important;
        top: 50% !important;
        left: auto !important;
        transform: translateY(-50%) !important;
        width: 220px !important;
        max-width: 220px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 7px !important;
        padding: 8px !important;
        flex-wrap: nowrap !important;
        margin: 0 !important;
        z-index: 3 !important;
        /* Unified glass panel — lighter, doesn't dominate the band */
        background: linear-gradient(160deg, rgba(28, 19, 11, 0.62) 0%, rgba(13, 8, 5, 0.58) 100%) !important;
        border: 1px solid rgba(240, 210, 139, 0.20) !important;
        border-radius: 10px !important;
        box-shadow:
            0 10px 26px rgba(0, 0, 0, 0.45),
            0 1px 0 rgba(240, 210, 139, 0.10) inset !important;
        backdrop-filter: blur(10px) saturate(1.10) !important;
        -webkit-backdrop-filter: blur(10px) saturate(1.10) !important;
    }

    /* QR — inner cream tile, tighter and shorter */
    body.page-home .home-hero-aside .home-hero-qr {
        max-width: none !important;
        width: 100% !important;
        margin: 0 !important;
        align-self: stretch !important;
        padding: 5px !important;
        border-right: none !important;
        border-radius: 6px !important;
        flex: 0 0 auto !important;
        text-align: center !important;
        display: block !important;
        background: rgba(244, 234, 210, 0.96) !important;
        border: 1px solid rgba(240, 210, 139, 0.36) !important;
        box-shadow:
            0 4px 10px rgba(0, 0, 0, 0.30),
            0 0 0 1px rgba(0, 0, 0, 0.05) inset !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    body.page-home .home-hero-aside .home-hero-qr a.qr-image {
        display: block !important;
        line-height: 0 !important;
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
    }
    body.page-home .home-hero-aside .home-hero-qr img {
        width: 88px !important;
        height: 88px !important;
        max-width: 88px !important;
        aspect-ratio: 1 / 1 !important;
        margin: 0 auto !important;
        display: block !important;
        opacity: 1 !important;
        filter: contrast(1.05) !important;
        background: #f4ead2 !important;
        padding: 3px !important;
        border-radius: 2px !important;
    }
    body.page-home .home-hero-aside .home-hero-qr-label {
        margin-top: 3px !important;
        font-size: 8.5px !important;
        letter-spacing: 0.28em !important;
        line-height: 1.25 !important;
        color: #6b4a1d !important;
    }

    /* Language switcher — equal-pill 7+6 grid, no oversized active state */
    body.page-home .home-hero-aside .home-hero-lang,
    body.page-home .home-hero-aside .home-hero-lang.lang-switch {
        display: grid !important;
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        grid-auto-rows: 22px !important;            /* equal pill height */
        gap: 3px !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        align-self: stretch !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        flex-wrap: nowrap !important;
        justify-content: stretch !important;
    }
    body.page-home .home-hero-aside .home-hero-lang button,
    body.page-home .home-hero-aside .home-hero-lang.lang-switch button {
        font-size: 9.5px !important;
        font-weight: 700 !important;
        letter-spacing: 0.03em !important;
        padding: 0 !important;
        min-width: 0 !important;
        width: 100% !important;
        height: 22px !important;
        border-radius: 999px !important;
        line-height: 22px !important;
        text-align: center !important;
        background: transparent !important;
        border: none !important;
        color: rgba(220, 198, 158, 0.62) !important;
        text-shadow: none !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
        transition: color .18s ease, background .18s ease, box-shadow .18s ease !important;
    }
    body.page-home .home-hero-aside .home-hero-lang button:hover,
    body.page-home .home-hero-aside .home-hero-lang.lang-switch button:hover {
        color: var(--accent-2) !important;
        background: rgba(240, 210, 139, 0.06) !important;
        border: none !important;
    }
    /* Active: soft gold fill + subtle warm glow — same pill dimensions */
    body.page-home .home-hero-aside .home-hero-lang button.active,
    body.page-home .home-hero-aside .home-hero-lang.lang-switch button.active {
        color: #1d1206 !important;
        background: linear-gradient(180deg,
            rgba(244, 217, 138, 0.92) 0%,
            rgba(214, 168, 84, 0.92) 100%) !important;
        border: none !important;
        box-shadow:
            0 0 10px rgba(240, 210, 139, 0.32),
            0 1px 0 rgba(255, 240, 200, 0.55) inset !important;
        text-shadow: none !important;
        font-size: 9.5px !important;
        font-weight: 700 !important;
        height: 22px !important;
        line-height: 22px !important;
        padding: 0 !important;
        border-radius: 999px !important;
    }
}

/* On larger kiosk panels keep the same compact rhythm — Stage 4H rules
   set tighter heights at 1700+, but they don't constrain max-width or the
   2-col grid we just established, so re-assert them here for consistency. */
@media (min-width: 1700px) and (min-height: 1000px) {
    body.page-home .home-hero {
        max-width: 1180px !important;
        margin: 0 auto !important;
        grid-template-columns: minmax(0, 1fr) 240px !important;
        min-height: clamp(220px, 22vh, 280px) !important;
    }
}
/* ============================================================================
   END FACADE COMPACT HERO FIX
   ============================================================================ */

/* ============================================================================
   PLACEHOLDER POLISH — 2026-05-06
   While real product photography is still being imported, every card that
   currently points at /static/images/no-image.webp (or the empty-photo
   marker classes) must read as a premium empty dark tile, NOT a debug
   watermark with a stray price tag.

   Two outcomes:
     A) Watermark suppression — the visible "no image" mark is killed
        (img opacity 0) or reduced to a near-invisible brass tint.
     B) Price suppression — placeholder cards do not display any price
        element. menu.json values are NOT touched; this is a CSS-only
        visibility cloak keyed off the no-image marker classes.

   Selectors used to hide prices on placeholder/no-image cards:
     .promo-banner[style*="no-image"] .promo-banner-price
     .combo-strip[style*="no-image"]  .combo-strip-price
     .reco-card.reco-card--no-image   .reco-price,
                                      .reco-price-old
     body.page-menu .promo.promo--no-image .promo-price,
                                           .promo-price-old,
                                           .item-view-price,
                                           .item-view-price-old
     body.page-menu .categories--rich .cat-photo--empty ~ * .cat-price (defensive)

   Scope: page-home + page-menu. Admin / reservation / telegram untouched.
   ============================================================================ */

/* ── A. Watermark suppression on empty hub photos and placeholder cards ─── */

/* Hub-card mono-letter mark on empty figures: drop to near-invisible warm
   trace. Overrides §10341 which left it at 0.85 alpha. */
body.page-menu .categories--rich .cat-photo.cat-photo--empty .cat-photo-mark,
body.page-menu .categories--rich .cat-photo:has(.cat-photo-img[src*="no-image"]) .cat-photo-mark {
    color: rgba(240, 210, 139, 0.06) !important;
    text-shadow: none !important;
    font-weight: 500 !important;
    opacity: 0.85 !important;
}

/* Hard-kill any actual <img> still rendering /no-image*. */
img[src*="no-image"],
img[srcset*="no-image"] {
    opacity: 0 !important;
}

/* Promo / combo / beer banners on /home that still carry the no-image
   var: kill the placeholder-photo `::before` so the dark gradient body
   reads as a clean premium tile. */
body.page-home .promo-banner[style*="no-image"]::before,
body.page-home .combo-strip[style*="no-image"]::before,
body.page-home .beer-card[style*="no-image"]::before,
body.page-home .pivska-card[style*="no-image"]::before {
    background-image: none !important;
    background:
        radial-gradient(ellipse 60% 55% at 30% 20%, rgba(198, 146, 58, 0.18), transparent 62%),
        linear-gradient(160deg, #1b130a 0%, #0d0805 60%, #14100b 100%) !important;
    filter: none !important;
    opacity: 1 !important;
}

/* ── B. Price suppression on placeholder cards (CSS-only — no JSON edits) ── */

/* Home promo banners (DANAŠNJA PREPORUKA / IZBOR KUĆE) — the inline
   style="--pl-bg: ...no-image..." is the placeholder marker. */
body.page-home .promo-banner[style*="no-image"] .promo-banner-price,
body.page-home .promo-banner[style*="no-image"] .promo-banner-price-old {
    display: none !important;
}

/* Home wide combo strip. */
body.page-home .combo-strip[style*="no-image"] .combo-strip-price,
body.page-home .combo-strip[style*="no-image"] .combo-strip-price-old {
    display: none !important;
}

/* Home spotlight / recommendation cards (template emits .reco-card--no-image). */
body.page-home .reco-card.reco-card--no-image .reco-price,
body.page-home .reco-card.reco-card--no-image .reco-price-old,
body.page-home .reco-card.reco-card--no-image .reco-footer .reco-price {
    display: none !important;
}

/* Menu hub recommendation cards same story. */
body.page-menu .reco-card.reco-card--no-image .reco-price,
body.page-menu .reco-card.reco-card--no-image .reco-price-old {
    display: none !important;
}

/* Menu item / promo cards in placeholder state (template emits
   .promo--no-image when item.image is missing or points at no-image). */
body.page-menu .promo.promo--no-image .promo-price,
body.page-menu .promo.promo--no-image .promo-price-old,
body.page-menu .promo.promo--no-image .item-view-price,
body.page-menu .promo.promo--no-image .item-view-price-old {
    display: none !important;
}

/* Menu hub-card empty figure: defensive — if a hub card ever shows a
   price-like child while its photo is empty, hide it. */
body.page-menu .categories--rich .cat-card:has(.cat-photo--empty) .cat-price,
body.page-menu .categories--rich .cat-card:has(.cat-photo-img[src*="no-image"]) .cat-price {
    display: none !important;
}

/* Home feature cards (Jelo chefa / Jelo dana). Template adds
   .feature-card--has-photo only when card.image is present, so the negation
   marks the placeholder state. Hide hardcoded €-prices on those cards. */
body.page-home .feature-card:not(.feature-card--has-photo) .feature-price {
    display: none !important;
}

/* Home demo / fallback combo cards (orchestrator and legacy block both emit
   .combo-card--has-photo when the item has a real image). Hide €-prices on
   placeholder state. */
body.page-home .combo-card:not(.combo-card--has-photo) .combo-price,
body.page-home .combo-card:not(.combo-card--has-photo) .combo-price-old,
body.page-menu .combo-card:not(.combo-card--has-photo) .combo-price,
body.page-menu .combo-card:not(.combo-card--has-photo) .combo-price-old {
    display: none !important;
}

/* Pivska karta beer-showcase cards. Inline `--bs-bg: ...no-image...` is the
   placeholder marker. Prices are baked into the meta text line, so hide the
   whole meta line until photography lands. Title + eyebrow stay visible. */
body.page-home .pivska-card[style*="no-image"] .pivska-card-meta {
    visibility: hidden !important;
}

/* Menu detail view (item-view) when its photo figure is empty: hide the
   €-price block. CSS-only — menu.json values are untouched. */
body.page-menu .item-view:has(.item-view-photo--empty) .item-view-price,
body.page-menu .item-view:has(.item-view-photo--empty) .item-view-price-old {
    display: none !important;
}

/* ============================================================================
   END PLACEHOLDER POLISH
   ============================================================================ */


/* ============================================================================
   STAGE 17 — HUB + PRODUCT CARD PREMIUM POLISH (additive, scoped to /menu)
   Goal: unify shadows / radii / hover, premium feel on category hubs and
   product cards, fix one real responsive bug. Touches only:
     * body.page-menu .categories--rich .cat-card / .cat-photo / .cat-photo-img
     * body.page-menu .promo.promo--compact / .promo-photo-img / .promo-price
     * .promos--compact grid breakpoints (responsive-bug fix)
   Untouched: item-view, recos, smart-entry tiles, /, /reservation, admin.
   Reversible: delete this whole block to revert.
   ============================================================================ */

:root {
    /* Stage 17 design tokens — premium overlay on top of existing palette. */
    --s17-radius-card: 18px;
    --s17-radius-photo: 12px;
    --s17-shadow-rest:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 6px 14px rgba(0, 0, 0, 0.32);
    --s17-shadow-hover:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 18px 36px -8px rgba(0, 0, 0, 0.55),
        0 8px 16px rgba(0, 0, 0, 0.35);
    --s17-line: rgba(230, 162, 58, 0.20);
    --s17-line-hover: rgba(230, 162, 58, 0.45);
    --s17-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---- 1. Responsive grid bug fix ----
   Stage 4I-C left `.promos.promos--compact { 5 cols !important }` to hard-lock
   the Samsung Tab A9+ landscape kiosk. The `!important` masks every smaller
   breakpoint, so a phone showed five 75 px cards. Re-establish the full ladder
   above the 5-col rule's specificity by re-using !important. */
@media (max-width: 1280px) {
    body.page-menu .promos.promos--compact {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 980px) {
    body.page-menu .promos.promos--compact {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 640px) {
    body.page-menu .promos.promos--compact {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 380px) {
    body.page-menu .promos.promos--compact {
        grid-template-columns: 1fr !important;
    }
}

/* ---- 2. Hub card unified depth + radius ---- */
body.page-menu .categories--rich .cat-card {
    border-radius: var(--s17-radius-card);
    border-color: var(--s17-line);
    box-shadow: var(--s17-shadow-rest);
    transition:
        transform 220ms var(--s17-ease),
        border-color 220ms var(--s17-ease),
        box-shadow 220ms var(--s17-ease);
}

body.page-menu .categories--rich .cat-photo {
    border-radius: var(--s17-radius-card) var(--s17-radius-card) 4px 4px;
}

body.page-menu .categories--rich .cat-photo-img {
    transition: transform 480ms var(--s17-ease);
    will-change: transform;
}

body.page-menu .categories--rich .cat-photo--empty .cat-photo-mark {
    font-size: 64px;
    color: rgba(230, 162, 58, 0.22);
    letter-spacing: -0.03em;
}

/* ---- 3. Product card unified depth + radius ---- */
body.page-menu .promo.promo--compact {
    border-radius: var(--s17-radius-card);
    border-color: var(--s17-line);
    box-shadow: var(--s17-shadow-rest);
    transition:
        transform 220ms var(--s17-ease),
        border-color 220ms var(--s17-ease),
        box-shadow 220ms var(--s17-ease);
}

body.page-menu .promo.promo--compact .promo-photo-img {
    transition: transform 480ms var(--s17-ease);
    will-change: transform;
}

/* Premium price chip — pill background around the existing €-text. Keeps
   crossed-out old price visible inside the chip without its own background. */
body.page-menu .promo.promo--compact .promo-footer {
    align-items: center;
}
body.page-menu .promo.promo--compact .promo-price {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: linear-gradient(180deg,
        rgba(240, 210, 139, 0.12) 0%,
        rgba(198, 146, 58, 0.08) 100%);
    border: 1px solid rgba(230, 162, 58, 0.30);
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--accent-2);
}
body.page-menu .promo.promo--compact .promo-price-old {
    background: transparent;
    border: 0;
    padding: 0;
    margin-left: 2px;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--text-dim);
    text-decoration: line-through;
}

/* ---- 4. Hover affordances — pointer devices only (avoid sticky :hover on
        touch). Lift, gold-amber border, image zoom. ---- */
@media (hover: hover) {
    body.page-menu .categories--rich .cat-card:hover {
        transform: translateY(-2px);
        border-color: var(--s17-line-hover);
        box-shadow: var(--s17-shadow-hover);
    }
    body.page-menu .categories--rich .cat-card:hover .cat-photo-img {
        transform: scale(1.04);
    }

    body.page-menu .promo.promo--compact:hover {
        transform: translateY(-2px);
        border-color: var(--s17-line-hover);
        box-shadow: var(--s17-shadow-hover);
    }
    body.page-menu .promo.promo--compact:hover .promo-photo-img {
        transform: scale(1.05);
    }
}

/* ---- 5. Tap feedback on touch — replaces hover with a brief press scale. ---- */
@media (hover: none) {
    body.page-menu .categories--rich .cat-card:active,
    body.page-menu .promo.promo--compact:active {
        transform: scale(0.985);
    }
}

/* ---- 6. Focus ring — keyboard / a11y, premium gold. ---- */
body.page-menu .categories--rich .cat-card:focus-visible,
body.page-menu .promo.promo--compact:focus-visible {
    outline: 2px solid var(--accent-2);
    outline-offset: 2px;
}

/* ============================================================================
   END STAGE 17 POLISH
   ============================================================================ */


/* ============================================================================
   STAGE 17B — ITEM DETAIL / HERO PREMIUM POLISH (additive, scoped to /menu)
   Matches Stage 17A language: same --s17-ease, --s17-line tokens.
   Touches only:
     * body.page-menu .item-view-* (hero, photo, body, rows, footer, CTA)
     * body.page-menu--item .item-view-photo / image (mobile breakpoint only)
   Untouched: layout grid (1fr/1fr or 1fr stacked), photo aspect/height, CTA
   stack order on mobile, empty-photo hide-price logic, recos, smart-entry,
   wine list, /, /reservation, admin.
   Reversible: delete this whole block to revert.
   ============================================================================ */

:root {
    --s17b-cta-radius: 12px;
    --s17b-photo-radius: 22px;
    --s17b-shadow-hero:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 28px 60px -12px rgba(0, 0, 0, 0.55),
        0 12px 24px rgba(0, 0, 0, 0.30);
}

/* ---- 1. Hero shell — softer surface, more depth ---- */
body.page-menu .item-view-grid {
    border-color: var(--s17-line);
    box-shadow: var(--s17b-shadow-hero);
}

/* ---- 2. Photo — unified radius + cinematic image motion on hover ---- */
body.page-menu .item-view-photo,
body.page-menu--item .item-view-photo {
    border-radius: var(--s17b-photo-radius);
    transition:
        border-color 320ms var(--s17-ease),
        box-shadow 320ms var(--s17-ease);
}
body.page-menu .item-view-img,
body.page-menu--item .item-view-img {
    transition: transform 600ms var(--s17-ease);
    will-change: transform;
}
@media (hover: hover) {
    body.page-menu .item-view-photo:hover .item-view-img,
    body.page-menu--item .item-view-photo:hover .item-view-img {
        transform: scale(1.03);
    }
    body.page-menu .item-view-photo:hover,
    body.page-menu--item .item-view-photo:hover {
        border-color: var(--s17-line-hover);
    }
}

/* ---- 3. Crumbs — softer separator, premium tracking ---- */
body.page-menu .item-view-crumb-sep {
    color: rgba(230, 162, 58, 0.50);
    opacity: 1;
}

/* ---- 4. Title — language-safety for DE / TR / HU long compounds ---- */
body.page-menu .item-view-title {
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
}

/* ---- 5. Description + ingredient/allergen rows: unified solid separator,
        softer description contrast, language-safe wrapping ---- */
body.page-menu .item-view-desc {
    color: rgba(244, 239, 230, 0.92);
    overflow-wrap: anywhere;
    hyphens: auto;
}
body.page-menu .item-view-row {
    border-top-style: solid;
    border-top-color: rgba(230, 162, 58, 0.16);
    padding-top: 12px;
    margin-top: 2px;
}
body.page-menu .item-view-row-value {
    overflow-wrap: anywhere;
    hyphens: auto;
}

/* ---- 6. Premium price chip — match Stage 17A pill, scaled for hero ---- */
body.page-menu .item-view-footer {
    border-top-color: rgba(230, 162, 58, 0.22);
    align-items: center;
}
body.page-menu .item-view-price {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    padding: 8px 20px;
    border-radius: 999px;
    background: linear-gradient(180deg,
        rgba(240, 210, 139, 0.14) 0%,
        rgba(198, 146, 58, 0.08) 100%);
    border: 1px solid rgba(230, 162, 58, 0.38);
    text-shadow: none;
}
body.page-menu .item-view-price-old {
    background: transparent;
    border: 0;
    padding: 0;
    margin-left: 0;
    color: var(--text-dim);
    text-decoration: line-through;
}

/* ---- 7. CTA buttons — premium radius, 44px tap-height, smooth motion ---- */
body.page-menu .item-view-cta-btn {
    border-radius: var(--s17b-cta-radius);
    transition:
        background 220ms var(--s17-ease),
        color 220ms var(--s17-ease),
        border-color 220ms var(--s17-ease),
        transform 220ms var(--s17-ease),
        box-shadow 220ms var(--s17-ease);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
body.page-menu .item-view-cta-btn--ghost {
    padding: 14px 26px;
    min-height: 44px;
}
body.page-menu .item-view-cta-btn--primary {
    padding: 16px 36px;
    min-height: 48px;
}

@media (hover: hover) {
    body.page-menu .item-view-cta-btn--ghost:hover {
        transform: translateY(-1px);
    }
    body.page-menu .item-view-cta-btn--primary:hover {
        transform: translateY(-2px);
    }
}
@media (hover: none) {
    body.page-menu .item-view-cta-btn:active {
        transform: scale(0.98);
    }
}

body.page-menu .item-view-cta-btn:focus-visible {
    outline: 2px solid var(--accent-2);
    outline-offset: 3px;
}

/* ---- 8. Mobile / phone tightening (≤480px) — keep desktop big & roomy ---- */
@media (max-width: 480px) {
    body.page-menu .item-view-grid {
        padding: 16px;
    }
    body.page-menu--item .item-view-photo {
        height: 240px;
        max-height: 240px;
    }
    body.page-menu .item-view-price {
        padding: 6px 14px;
    }
}

/* ============================================================================
   END STAGE 17B POLISH
   ============================================================================ */


/* ============================================================================
   STAGE 17C — SMART ENTRY + RECOMMENDATION STRIPS POLISH
   Scope (additive): /menu top-level only (body.page-menu--hubs).
     * Smart-entry tiles (.cat-quick / .cat-chef / .cat-wine-dinner / .cat-popular)
     * Recommendation strips (.recos.recos--hero / .recos.recos--spotlight)
     * .reco-card (compact + featured + no-image + photo-bg variants)
     * .reco-price (premium chip matching Stage 17A)
   Reuses --s17-* tokens from Stage 17A. Doesn't touch image-zoom (4733-4755),
   layout grids, /popular /chef /quick /wine-dinner (those are page-scenario).
   Reversible: delete this block.
   ============================================================================ */

/* ---- 1. Smart-entry tiles — match Stage 17 system, premium rest+hover ---- */
body.page-menu--hubs .categories:not(.categories--rich) .cat-card {
    border-radius: var(--s17-radius-card);
    border-color: var(--s17-line);
    box-shadow: var(--s17-shadow-rest);
    transition:
        transform 220ms var(--s17-ease),
        border-color 220ms var(--s17-ease),
        box-shadow 220ms var(--s17-ease);
}
@media (hover: hover) {
    body.page-menu--hubs .categories:not(.categories--rich) .cat-card:hover {
        transform: translateY(-2px);
        border-color: var(--s17-line-hover);
        box-shadow: var(--s17-shadow-hover);
    }
}
@media (hover: none) {
    body.page-menu--hubs .categories:not(.categories--rich) .cat-card:active {
        transform: scale(0.985);
    }
}
body.page-menu--hubs .categories:not(.categories--rich) .cat-card:focus-visible {
    outline: 2px solid var(--accent-2);
    outline-offset: 2px;
}

/* ---- 2. Smart-entry arrow circle — gold-tinted, premium ---- */
body.page-menu--hubs .categories:not(.categories--rich) .cat-arrow {
    background: rgba(20, 20, 24, 0.60);
    border: 1px solid rgba(230, 162, 58, 0.35);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition:
        background 220ms var(--s17-ease),
        border-color 220ms var(--s17-ease);
}
@media (hover: hover) {
    body.page-menu--hubs .categories:not(.categories--rich) .cat-card:hover .cat-arrow {
        background: rgba(230, 162, 58, 0.18);
        border-color: rgba(230, 162, 58, 0.65);
    }
}

/* ---- 3. Recommendation strip shell (hero) — match Stage 17 line ---- */
body.page-menu--hubs .recos.recos--hero {
    border-color: var(--s17-line);
}

/* ---- 4. Reco-card unified depth/radius/motion (compact + photo-bg) ---- */
body.page-menu--hubs .reco-card {
    border-radius: var(--s17-radius-card);
    border-color: var(--s17-line);
    box-shadow: var(--s17-shadow-rest);
    transition:
        transform 220ms var(--s17-ease),
        border-color 220ms var(--s17-ease),
        box-shadow 220ms var(--s17-ease);
}
@media (hover: hover) {
    body.page-menu--hubs .reco-card:hover {
        transform: translateY(-2px);
        border-color: var(--s17-line-hover);
        box-shadow: var(--s17-shadow-hover);
    }
}
@media (hover: none) {
    body.page-menu--hubs .reco-card:active {
        transform: scale(0.985);
    }
}
body.page-menu--hubs .reco-card:focus-visible {
    outline: 2px solid var(--accent-2);
    outline-offset: 2px;
}

/* ---- 4a. Featured (hero) reco — keep its accent border, drop tile shadow ---- */
body.page-menu--hubs .reco-card--featured {
    border-color: rgba(230, 162, 58, 0.45);
}
@media (hover: hover) {
    body.page-menu--hubs .reco-card--featured:hover {
        border-color: rgba(255, 203, 107, 0.65);
    }
}

/* ---- 5. Reco price — premium chip (smaller variant of Stage 17B hero) ---- */
body.page-menu--hubs .reco-card .reco-price {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: linear-gradient(180deg,
        rgba(240, 210, 139, 0.16) 0%,
        rgba(198, 146, 58, 0.08) 100%);
    border: 1px solid rgba(230, 162, 58, 0.34);
    text-shadow: none;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
}
body.page-menu--hubs .reco-card .reco-price-old {
    background: transparent;
    border: 0;
    padding: 0;
    margin-left: 0;
    text-decoration: line-through;
    color: var(--text-dim);
    text-shadow: none;
    font-weight: 500;
}
/* Featured price: bigger pill */
body.page-menu--hubs .reco-card--featured .reco-price {
    padding: 6px 18px;
    gap: 10px;
}

/* ---- 6. Reco photo image transition — smoother ease for the existing zoom ---- */
body.page-menu--hubs .reco-photo-img {
    transition:
        transform 600ms var(--s17-ease),
        filter 320ms var(--s17-ease);
}

/* ============================================================================
   END STAGE 17C POLISH
   ============================================================================ */

/* ============================================================================
   STAGE 17E — HOME PAGE PREMIUM POLISH (additive, scoped to body.page-home)
   Layered on top of STAGE 4A / 4B / 4E / 4F so prior shapes are preserved.
   Goals: tighter rhythm, calmer gold, hover discipline on touch, premium
   no-photo placeholder, tablet/iPad refinement, lang-switcher overflow.
   ============================================================================ */

/* shared easing token for this stage */
:root { --s17e-ease: cubic-bezier(0.22, 0.9, 0.3, 1); }

/* 1 ─── HOME HERO: depth + CTA refinement ─────────────────────────────── */
body.page-home .home-hero {
    /* extra scrim + softer top vignette so brass title pops without crushing photo */
    background-color: var(--bg-0);
}
body.page-home .home-hero-eyebrow {
    /* tracking-aware: keep elegant 0.32em on desktop but allow smaller wrap on mobile */
    word-spacing: 0.05em;
}
body.page-home .home-hero-tagline {
    font-feature-settings: "kern" 1, "liga" 1;
}
body.page-home .home-hero-btn {
    transition:
        transform 0.20s var(--s17e-ease),
        box-shadow 0.22s var(--s17e-ease),
        background 0.22s var(--s17e-ease),
        border-color 0.22s var(--s17e-ease),
        color 0.22s var(--s17e-ease) !important;
}
body.page-home .home-hero-btn--primary {
    box-shadow:
        0 16px 38px rgba(198, 146, 58, 0.36),
        0 1px 0 rgba(255, 230, 170, 0.65) inset,
        0 0 0 1px rgba(255, 230, 170, 0.18) inset !important;
}
body.page-home .home-hero-btn:focus-visible {
    outline: 2px solid rgba(232, 194, 116, 0.85);
    outline-offset: 3px;
}

/* QR — crisper rendering, slightly tighter inner padding */
body.page-home .home-hero-qr img,
body.page-home .home-hero-qr .home-qr-img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* lang switch — keep premium but allow horizontal overflow when 13+ langs
   would otherwise wrap into a tall stack on narrow screens */
body.page-home .home-hero-lang {
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
body.page-home .home-hero-lang::-webkit-scrollbar { display: none; }
body.page-home .home-hero-lang button {
    flex: 0 0 auto;
}

/* 2 ─── SECTION HEADER: small gold tick before eyebrow ─────────────────── */
body.page-home .home-section-header {
    align-items: flex-end;
}
body.page-home .home-section-eyebrow {
    position: relative;
    padding-left: 22px;
}
body.page-home .home-section-eyebrow::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 1px;
    background: linear-gradient(90deg, var(--accent-2) 0%, transparent 100%);
}

/* 3 ─── PRIMARY CARDS: focus state + readable safe-area gradient on tiny photos */
body.page-home .cards-primary .cat-card--primary {
    transition:
        transform 0.22s var(--s17e-ease),
        border-color 0.22s var(--s17e-ease),
        box-shadow 0.22s var(--s17e-ease) !important;
}
body.page-home .cards-primary .cat-card--primary:focus-visible {
    outline: 2px solid rgba(232, 194, 116, 0.85);
    outline-offset: 4px;
}
/* pull title block away from card edge a touch on wide screens */
@media (min-width: 1400px) {
    body.page-home .cards-primary .cat-card--primary .cat-content {
        padding-bottom: 4px;
    }
}

/* 4 ─── PIVSKA SHOWCASE: tighter card meta + subtle hover only on hover devices */
body.page-home .pivska-card {
    will-change: transform;
}
body.page-home .pivska-card:focus-visible {
    outline: 2px solid rgba(232, 194, 116, 0.80);
    outline-offset: 3px;
}
body.page-home .pivska-card-meta {
    border-top: 1px solid rgba(240, 210, 139, 0.16);
    padding-top: 6px;
    margin-top: 2px;
}

/* 5 ─── PROMO BANNERS: rebalance content max-width + price/cta visual rhythm */
body.page-home .promo-banner-content {
    /* slightly tighter so meta text doesn't bleed under right-side amber bloom */
    gap: clamp(7px, 0.8vw, 12px);
}
body.page-home .promo-banner-price {
    /* drop-shadow keeps gold readable over photos */
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
}
body.page-home .promo-banner-cta {
    transition:
        background 0.22s var(--s17e-ease),
        border-color 0.22s var(--s17e-ease),
        color 0.22s var(--s17e-ease),
        transform 0.22s var(--s17e-ease) !important;
}
body.page-home .promo-banner:focus-visible,
body.page-home .combo-strip:focus-visible {
    outline: 2px solid rgba(232, 194, 116, 0.80);
    outline-offset: 4px;
}

/* 6 ─── COMBO STRIP: ensure CTA stays elegant, not compressed */
body.page-home .combo-strip-meta {
    max-width: 70ch;
}

/* 7 ─── SECONDARY CARDS: premium no-photo placeholder ──────────────────── */
/* Replaces cheap "no-image.webp" tile with a brass-on-coal pattern surface
   that reads as designed empty state, not as missing data. */
body.page-home .cat-card--secondary[data-no-photo="1"]::before {
    background:
        radial-gradient(70% 90% at 50% 110%, rgba(198, 146, 58, 0.22), transparent 65%),
        repeating-linear-gradient(135deg,
            rgba(198, 146, 58, 0.06) 0px,
            rgba(198, 146, 58, 0.06) 1px,
            transparent 1px,
            transparent 12px),
        linear-gradient(160deg, #1c1308 0%, #0e0805 100%) !important;
    filter: none !important;
}
body.page-home .cat-card--secondary[data-no-photo="1"]::after {
    background:
        linear-gradient(180deg,
            rgba(11, 10, 9, 0.10) 0%,
            rgba(11, 10, 9, 0.45) 55%,
            rgba(11, 10, 9, 0.92) 100%) !important;
}
body.page-home .cat-card--secondary[data-no-photo="1"] {
    border-color: rgba(240, 210, 139, 0.22);
}

/* 8 ─── FEATURE CARDS: empty-state premium placeholder when no image */
body.page-home .feature-card:not(.feature-card--has-photo) {
    background:
        radial-gradient(70% 70% at 100% 0%, rgba(198, 146, 58, 0.10), transparent 65%),
        repeating-linear-gradient(135deg,
            rgba(198, 146, 58, 0.04) 0px,
            rgba(198, 146, 58, 0.04) 1px,
            transparent 1px,
            transparent 14px),
        linear-gradient(160deg, #221810 0%, #0d0806 100%) !important;
}
body.page-home .feature-card:not(.feature-card--has-photo)::before {
    content: "";
    position: absolute;
    top: 14px;
    right: 14px;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(240, 210, 139, 0.28);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, rgba(240, 210, 139, 0.22), transparent 70%);
    pointer-events: none;
    z-index: 1;
}

/* 9 ─── HOVER DISCIPLINE: kill sticky hover lift on touch surfaces ─────── */
@media (hover: none), (pointer: coarse) {
    body.page-home .home-hero-btn:hover,
    body.page-home .cards-primary .cat-card--primary:hover,
    body.page-home .cards-secondary .cat-card--secondary:hover,
    body.page-home .pivska-card:hover,
    body.page-home .promo-banner:hover,
    body.page-home .combo-strip:hover,
    body.page-home .feature-card:hover,
    body.page-home .pivska-cta:hover,
    body.page-home .promo-banner-cta:hover,
    body.page-home .combo-strip-cta:hover {
        transform: none !important;
    }
    body.page-home .home-hero-btn--primary:hover {
        box-shadow:
            0 16px 38px rgba(198, 146, 58, 0.36),
            0 1px 0 rgba(255, 230, 170, 0.65) inset,
            0 0 0 1px rgba(255, 230, 170, 0.18) inset !important;
    }
    /* keep visual tap feedback short and crisp instead */
    body.page-home .cards-primary .cat-card--primary:active,
    body.page-home .cards-secondary .cat-card--secondary:active,
    body.page-home .pivska-card:active,
    body.page-home .promo-banner:active,
    body.page-home .combo-strip:active,
    body.page-home .feature-card:active {
        transform: scale(0.985) !important;
    }
}

/* 10 ─── TABLET / IPAD LANDSCAPE (1024–1366) refinement ────────────────── */
@media (min-width: 1024px) and (max-width: 1366px) {
    body.page-home .home-hero {
        padding: clamp(32px, 4.4vw, 64px) clamp(28px, 4vw, 64px);
    }
    body.page-home .home-hero-title {
        font-size: clamp(56px, 6.4vw, 92px);
    }
    body.page-home .pivska-headline {
        font-size: clamp(40px, 5vw, 64px);
    }
    body.page-home .pivska-cards-row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    body.page-home .pivska-card:nth-child(5) { display: none; }
    body.page-home .promo-banner-title {
        font-size: clamp(32px, 4vw, 56px);
    }
    body.page-home .combo-strip { aspect-ratio: 28 / 9; }
}

/* 11 ─── PHONE PORTRAIT (≤540) tightening ─────────────────────────────── */
@media (max-width: 540px) {
    body.page-home .home-hero-aside {
        gap: 12px;
    }
    body.page-home .home-hero-lang button {
        padding: 6px 8px;
        min-width: 28px;
        font-size: 10.5px;
    }
    body.page-home .home-section-header {
        padding-left: clamp(16px, 5vw, 24px);
        padding-right: clamp(16px, 5vw, 24px);
    }
    body.page-home .home-section-title {
        font-size: clamp(18px, 5.5vw, 22px);
    }
    body.page-home .pivska-cards-row {
        gap: 10px;
    }
    body.page-home .pivska-card {
        aspect-ratio: 4 / 5;
        padding: 12px;
    }
    body.page-home .pivska-card-title {
        font-size: clamp(15px, 4.5vw, 18px);
    }
    body.page-home .promo-banner-meta {
        font-size: 13px;
    }
    body.page-home .promo-banner-price {
        font-size: 26px;
    }
    body.page-home .combo-strip-content {
        padding: 18px 18px 20px;
        gap: 12px;
    }
    body.page-home .combo-strip-title {
        font-size: clamp(22px, 6.4vw, 30px);
    }
    body.page-home .combo-strip-cta-block {
        flex-direction: row;
        align-items: center;
        gap: 14px;
    }
    body.page-home .combo-strip-price {
        font-size: clamp(26px, 7vw, 32px);
    }
    body.page-home .features {
        gap: 12px;
    }
    body.page-home .feature-card {
        height: 240px !important;
        min-height: 240px !important;
    }
}

/* 12 ─── BIG-PANEL (≥1920) tightening — keep cards from drifting too tall */
@media (min-width: 1920px) {
    body.page-home .pivska-card { aspect-ratio: 4 / 5; }
    body.page-home .promo-banner { aspect-ratio: 21 / 9; }
}

/* 13 ─── REDUCED MOTION respect ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    body.page-home .home-hero-btn,
    body.page-home .cards-primary .cat-card--primary,
    body.page-home .cards-secondary .cat-card--secondary,
    body.page-home .pivska-card,
    body.page-home .promo-banner,
    body.page-home .combo-strip,
    body.page-home .feature-card {
        transition: none !important;
    }
    body.page-home .home-hero-btn:hover,
    body.page-home .cards-primary .cat-card--primary:hover,
    body.page-home .pivska-card:hover,
    body.page-home .promo-banner:hover,
    body.page-home .combo-strip:hover,
    body.page-home .feature-card:hover {
        transform: none !important;
    }
}
/* ============================================================================
   END STAGE 17E POLISH
   ============================================================================ */

/* APEX HOTFIX 2026-05-18 — footer link visual restore */
body.page-home .home-footer a,
body.page-home .home-footer-link,
body.page-home .home-footer-link:visited,
body.page-home .home-footer-link:hover,
body.page-home .home-footer-link:active {
    color: var(--accent-2) !important;
    text-decoration: none !important;
    border-bottom: none !important;
}

body.page-home .home-footer {
    color: var(--text-dim) !important;
}

body.page-home .home-footer-name {
    color: var(--text) !important;
}

body.page-home .home-footer-dot {
    color: rgba(230, 162, 58, 0.65) !important;
}

/* APEX HOTFIX 2026-05-18 — premium centered home footer */
body.page-home .home-footer {
    width: min(1180px, calc(100% - 64px)) !important;
    margin: -22px auto 36px auto !important;
    padding: 26px 28px 22px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    color: rgba(244, 231, 198, 0.72) !important;
    border-top: 1px solid rgba(218, 174, 91, 0.22) !important;
    background: linear-gradient(
        180deg,
        rgba(35, 24, 11, 0.18),
        rgba(10, 8, 5, 0.00)
    ) !important;
}

body.page-home .home-footer-brand,
body.page-home .home-footer-name {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    color: rgba(244, 231, 198, 0.86) !important;
    font-size: clamp(14px, 1.15vw, 18px) !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
}

body.page-home .home-footer-links {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px 14px !important;
    width: 100% !important;
    text-align: center !important;
}

body.page-home .home-footer a,
body.page-home .home-footer-link,
body.page-home .home-footer-link:visited,
body.page-home .home-footer-link:hover,
body.page-home .home-footer-link:active {
    color: rgba(232, 190, 104, 0.92) !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(232, 190, 104, 0.18) !important;
    font-size: clamp(13px, 1vw, 16px) !important;
    letter-spacing: 0.08em !important;
}

body.page-home .home-footer a:hover,
body.page-home .home-footer-link:hover {
    color: #f3d48a !important;
    border-bottom-color: rgba(243, 212, 138, 0.55) !important;
}

body.page-home .home-footer-dot {
    color: rgba(218, 174, 91, 0.45) !important;
}

body.page-home .home-footer-copy {
    width: 100% !important;
    text-align: center !important;
    color: rgba(244, 231, 198, 0.55) !important;
    font-size: 13px !important;
    letter-spacing: 0.08em !important;
}

@media (max-width: 768px) {
    body.page-home .home-footer {
        width: calc(100% - 28px) !important;
        margin-top: 72px !important;
        padding: 22px 14px 20px !important;
    }

    body.page-home .home-footer-links {
        gap: 8px 10px !important;
    }
}

/* APEX HOTFIX 2026-05-18 — center food/drinks section and reduce hero gap */
body.page-home .home-section-header {
    width: min(1180px, calc(100% - 64px)) !important;
    margin: 28px auto 34px auto !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    align-items: center !important;
    text-align: center !important;
    gap: 8px !important;
}

body.page-home .home-section-header > div {
    width: 100% !important;
    text-align: center !important;
}

body.page-home .home-section-eyebrow,
body.page-home .home-section-title {
    width: 100% !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.page-home .home-section-rule {
    width: min(760px, 62vw) !important;
    margin: 8px auto 0 auto !important;
}

/* APEX HOTFIX 2026-05-18 — hide rough food/drinks header and lift cards */
body.page-home .home-section-header {
    display: none !important;
}

body.page-home .categories-row {
    margin-top: 28px !important;
}

body.page-home .cards-primary {
    margin-top: 0 !important;
}

/* APEX HOTFIX 2026-05-18 — compact hero lower spacing and lift cards */
body.page-home .home-hero {
    padding-bottom: 18px !important;
    margin-bottom: 0 !important;
}

body.page-home .home-hero::after {
    bottom: 18px !important;
}

body.page-home .categories-row {
    margin-top: -28px !important;
}

/* APEX HOTFIX 2026-05-18 — lift footer area by 2.5cm */
body.page-home .home-footer,
body.page-home footer {
    transform: translateY(-95px) !important;
    margin-bottom: -95px !important;
}

/* APEX HOTFIX 2026-05-18 — compact secondary cards into one row */
body.page-home .secondary-grid,
body.page-home .home-secondary-grid,
body.page-home .category-secondary-grid {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 14px !important;
    max-width: 1680px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* smaller secondary cards */
body.page-home .secondary-grid .cat-card,
body.page-home .home-secondary-grid .cat-card,
body.page-home .category-secondary-grid .cat-card,
body.page-home .secondary-grid .category-card,
body.page-home .home-secondary-grid .category-card,
body.page-home .category-secondary-grid .category-card {
    min-height: 150px !important;
    height: 150px !important;
    border-radius: 18px !important;
}

/* push card text to the bottom */
body.page-home .secondary-grid .cat-card-content,
body.page-home .home-secondary-grid .cat-card-content,
body.page-home .category-secondary-grid .cat-card-content,
body.page-home .secondary-grid .category-card-content,
body.page-home .home-secondary-grid .category-card-content,
body.page-home .category-secondary-grid .category-card-content {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    padding: 0 20px 18px 20px !important;
}

/* reduce title size */
body.page-home .secondary-grid .cat-title,
body.page-home .home-secondary-grid .cat-title,
body.page-home .category-secondary-grid .cat-title,
body.page-home .secondary-grid .category-title,
body.page-home .home-secondary-grid .category-title,
body.page-home .category-secondary-grid .category-title {
    font-size: 20px !important;
    line-height: 1.05 !important;
    letter-spacing: 0.08em !important;
    margin: 0 0 6px 0 !important;
}

/* reduce subtitle size */
body.page-home .secondary-grid .cat-subtitle,
body.page-home .home-secondary-grid .cat-subtitle,
body.page-home .category-secondary-grid .cat-subtitle,
body.page-home .secondary-grid .category-subtitle,
body.page-home .home-secondary-grid .category-subtitle,
body.page-home .category-secondary-grid .category-subtitle {
    font-size: 12px !important;
    line-height: 1.25 !important;
    letter-spacing: 0.04em !important;
    margin: 0 !important;
    opacity: 0.9 !important;
}

/* smaller arrow button */
body.page-home .secondary-grid .cat-arrow,
body.page-home .home-secondary-grid .cat-arrow,
body.page-home .category-secondary-grid .cat-arrow,
body.page-home .secondary-grid .category-arrow,
body.page-home .home-secondary-grid .category-arrow,
body.page-home .category-secondary-grid .category-arrow {
    width: 42px !important;
    height: 42px !important;
    right: 14px !important;
    bottom: 14px !important;
}

/* responsive fallback: do not break tablets/mobile */
@media (max-width: 1400px) {
    body.page-home .secondary-grid,
    body.page-home .home-secondary-grid,
    body.page-home .category-secondary-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 900px) {
    body.page-home .secondary-grid,
    body.page-home .home-secondary-grid,
    body.page-home .category-secondary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 520px) {
    body.page-home .secondary-grid,
    body.page-home .home-secondary-grid,
    body.page-home .category-secondary-grid {
        grid-template-columns: 1fr !important;
    }
}

/* APEX HOTFIX 2026-05-18 — REAL secondary cards: 7 cards in one row */
body.page-home .categories-row .cards-secondary.categories {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: min(92vw, 1720px) !important;
    max-width: 1720px !important;
    margin: 28px auto 0 auto !important;
    padding: 0 !important;
}

/* real secondary card size */
body.page-home .cards-secondary .cat-card.cat-card--secondary {
    width: 100% !important;
    min-width: 0 !important;
    height: 138px !important;
    min-height: 138px !important;
    max-height: 138px !important;
    aspect-ratio: auto !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

/* text block to bottom */
body.page-home .cards-secondary .cat-card.cat-card--secondary .cat-content {
    position: absolute !important;
    left: 16px !important;
    right: 54px !important;
    top: auto !important;
    bottom: 14px !important;
    padding: 0 !important;
    transform: none !important;
    z-index: 3 !important;
}

/* smaller title */
body.page-home .cards-secondary .cat-card.cat-card--secondary .cat-title {
    font-size: 18px !important;
    line-height: 1.02 !important;
    letter-spacing: 0.06em !important;
    margin: 0 0 5px 0 !important;
    max-width: 100% !important;
}

/* smaller subtitle */
body.page-home .cards-secondary .cat-card.cat-card--secondary .cat-sub {
    font-size: 11px !important;
    line-height: 1.18 !important;
    letter-spacing: 0.025em !important;
    margin: 0 !important;
    max-width: 100% !important;
    opacity: 0.92 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* smaller arrow */
body.page-home .cards-secondary .cat-card.cat-card--secondary .cat-arrow {
    width: 38px !important;
    height: 38px !important;
    right: 12px !important;
    bottom: 12px !important;
}

/* keep image readable after compression */
body.page-home .cards-secondary .cat-card.cat-card--secondary::before {
    background-size: cover !important;
    background-position: center center !important;
}

/* desktop fallback */
@media (max-width: 1500px) {
    body.page-home .categories-row .cards-secondary.categories {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        width: min(92vw, 1180px) !important;
    }

    body.page-home .cards-secondary .cat-card.cat-card--secondary {
        height: 150px !important;
        min-height: 150px !important;
        max-height: 150px !important;
    }
}

/* tablet fallback */
@media (max-width: 900px) {
    body.page-home .categories-row .cards-secondary.categories {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* mobile fallback */
@media (max-width: 520px) {
    body.page-home .categories-row .cards-secondary.categories {
        grid-template-columns: 1fr !important;
    }
}

/* APEX HOTFIX 2026-05-18 — force secondary cards 7 in one row on desktop */
@media (min-width: 1100px) {
    body.page-home .categories-row .cards-secondary.categories {
        display: grid !important;
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: min(96vw, 1760px) !important;
        max-width: 1760px !important;
        margin: 18px auto 0 auto !important;
        padding: 0 !important;
    }

    body.page-home .cards-secondary .cat-card.cat-card--secondary {
        height: 112px !important;
        min-height: 112px !important;
        max-height: 112px !important;
        aspect-ratio: auto !important;
        border-radius: 14px !important;
    }

    body.page-home .cards-secondary .cat-card.cat-card--secondary .cat-content {
        left: 12px !important;
        right: 42px !important;
        bottom: 10px !important;
    }

    body.page-home .cards-secondary .cat-card.cat-card--secondary .cat-title {
        font-size: 14px !important;
        line-height: 1.05 !important;
        letter-spacing: 0.04em !important;
        margin-bottom: 3px !important;
    }

    body.page-home .cards-secondary .cat-card.cat-card--secondary .cat-sub {
        font-size: 9.5px !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.page-home .cards-secondary .cat-card.cat-card--secondary .cat-arrow {
        width: 32px !important;
        height: 32px !important;
        right: 9px !important;
        bottom: 9px !important;
    }
}

/* APEX HOTFIX 2026-05-18 — Samsung Tab secondary cards fit */
@media (min-width: 760px) and (max-width: 1099px) {
    body.page-home .categories-row .cards-secondary.categories {
        display: grid !important;
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        gap: 6px !important;
        width: min(98vw, 1060px) !important;
        max-width: 1060px !important;
        margin: 12px auto 0 auto !important;
        padding: 0 !important;
    }

    body.page-home .cards-secondary .cat-card.cat-card--secondary {
        height: 82px !important;
        min-height: 82px !important;
        max-height: 82px !important;
        aspect-ratio: auto !important;
        border-radius: 10px !important;
    }

    body.page-home .cards-secondary .cat-card.cat-card--secondary .cat-content {
        left: 8px !important;
        right: 28px !important;
        bottom: 7px !important;
        top: auto !important;
        padding: 0 !important;
    }

    body.page-home .cards-secondary .cat-card.cat-card--secondary .cat-title {
        font-size: 9.8px !important;
        line-height: 1.02 !important;
        letter-spacing: 0.025em !important;
        margin: 0 !important;
        max-height: 2.05em !important;
        overflow: hidden !important;
    }

    body.page-home .cards-secondary .cat-card.cat-card--secondary .cat-sub {
        display: none !important;
    }

    body.page-home .cards-secondary .cat-card.cat-card--secondary .cat-arrow {
        width: 24px !important;
        height: 24px !important;
        right: 5px !important;
        bottom: 5px !important;
    }

    body.page-home .cards-secondary .cat-card.cat-card--secondary .cat-arrow svg {
        width: 11px !important;
        height: 11px !important;
    }
}

/* APEX HOTFIX 2026-05-18 — make promo banners 3 equal cards in one row */
body.page-home .promo-banners {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: min(96vw, 1760px) !important;
    max-width: 1760px !important;
    margin: 24px auto 18px auto !important;
}

body.page-home .promo-banner,
body.page-home .combo-strip {
    width: 100% !important;
    max-width: none !important;
    height: 255px !important;
    min-height: 255px !important;
    max-height: 255px !important;
    margin: 0 !important;
    border-radius: 18px !important;
}

/* put the long combo card into the same promo row visually */
body.page-home .combo-strip {
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
}

/* if combo-strip is outside promo-banners, align it like third card by narrowing */
body.page-home .combo-strip:not(.promo-banners .combo-strip) {
    width: min(31.5vw, 565px) !important;
    margin: 0 auto 18px auto !important;
}

body.page-home .promo-banner-content,
body.page-home .combo-strip-content {
    padding: 24px 28px !important;
}

body.page-home .promo-banner-title,
body.page-home .combo-strip-title {
    font-size: clamp(20px, 1.65vw, 30px) !important;
    line-height: 1.05 !important;
}

body.page-home .promo-banner-meta,
body.page-home .combo-strip-desc,
body.page-home .combo-strip-meta {
    font-size: clamp(11px, 0.85vw, 14px) !important;
    line-height: 1.25 !important;
}

body.page-home .promo-banner-price,
body.page-home .combo-strip-price {
    font-size: clamp(17px, 1.3vw, 24px) !important;
}

body.page-home .promo-banner-cta,
body.page-home .combo-strip-cta {
    padding: 12px 26px !important;
    font-size: clamp(11px, 0.8vw, 14px) !important;
}

/* tablet: 3 cards still fit */
@media (max-width: 1099px) {
    body.page-home .promo-banners {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: min(98vw, 1060px) !important;
    }

    body.page-home .promo-banner,
    body.page-home .combo-strip {
        height: 170px !important;
        min-height: 170px !important;
        max-height: 170px !important;
    }

    body.page-home .promo-banner-content,
    body.page-home .combo-strip-content {
        padding: 16px 18px !important;
    }

    body.page-home .combo-strip:not(.promo-banners .combo-strip) {
        width: min(32vw, 340px) !important;
    }
}

/* APEX HOTFIX 2026-05-18 — promo cards shorter and wider 3-in-row */
body.page-home .promo-banners {
    width: min(98vw, 1840px) !important;
    max-width: 1840px !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

body.page-home .promo-banner,
body.page-home .combo-strip {
    height: 190px !important;
    min-height: 190px !important;
    max-height: 190px !important;
    border-radius: 16px !important;
}

body.page-home .combo-strip:not(.promo-banners .combo-strip) {
    width: min(31.8vw, 590px) !important;
    height: 190px !important;
    min-height: 190px !important;
    max-height: 190px !important;
}

body.page-home .promo-banner-content,
body.page-home .combo-strip-content {
    padding: 18px 24px !important;
}

body.page-home .promo-banner-title,
body.page-home .combo-strip-title {
    font-size: clamp(18px, 1.35vw, 25px) !important;
    line-height: 1.0 !important;
}

body.page-home .promo-banner-meta,
body.page-home .combo-strip-desc {
    font-size: 12px !important;
    line-height: 1.18 !important;
}

body.page-home .promo-banner-cta,
body.page-home .combo-strip-cta {
    padding: 10px 22px !important;
    font-size: 12px !important;
}

body.page-home .promo-banner-price,
body.page-home .combo-strip-price {
    font-size: 19px !important;
}

/* APEX HOTFIX 2026-05-18 — promo cards 1.5x shorter */
body.page-home .promo-banner,
body.page-home .combo-strip,
body.page-home .combo-strip:not(.promo-banners .combo-strip) {
    height: 125px !important;
    min-height: 125px !important;
    max-height: 125px !important;
}

body.page-home .promo-banner-content,
body.page-home .combo-strip-content {
    padding: 12px 20px !important;
}

body.page-home .promo-banner-title,
body.page-home .combo-strip-title {
    font-size: clamp(16px, 1.05vw, 21px) !important;
    line-height: 0.95 !important;
    margin-bottom: 6px !important;
}

body.page-home .promo-banner-meta,
body.page-home .combo-strip-desc {
    font-size: 10px !important;
    line-height: 1.05 !important;
    max-width: 62% !important;
}

body.page-home .promo-banner-price,
body.page-home .combo-strip-price {
    font-size: 15px !important;
    margin-top: 6px !important;
}

body.page-home .promo-banner-cta,
body.page-home .combo-strip-cta {
    padding: 7px 18px !important;
    font-size: 10px !important;
}

/* APEX HOTFIX 2026-05-18 — restore promo width, reduce only height */
body.page-home .promo-banners {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: calc(100vw - 120px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 18px !important;
}

/* restore width: every card takes full grid column */
body.page-home .promo-banner,
body.page-home .combo-strip,
body.page-home .combo-strip:not(.promo-banners .combo-strip) {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;

    /* reduce only vertical size */
    height: 155px !important;
    min-height: 155px !important;
    max-height: 155px !important;

    border-radius: 16px !important;
}

/* if combo card is still outside promo grid, force it to same row-width logic */
body.page-home .combo-strip:not(.promo-banners .combo-strip) {
    width: calc((100vw - 120px - 36px) / 3) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* compact text only vertically, not card width */
body.page-home .promo-banner-content,
body.page-home .combo-strip-content {
    padding: 14px 24px !important;
}

body.page-home .promo-banner-title,
body.page-home .combo-strip-title {
    font-size: clamp(18px, 1.25vw, 24px) !important;
    line-height: 1.0 !important;
    margin-bottom: 6px !important;
}

body.page-home .promo-banner-meta,
body.page-home .combo-strip-desc {
    font-size: 11px !important;
    line-height: 1.12 !important;
    max-width: 70% !important;
}

body.page-home .promo-banner-price,
body.page-home .combo-strip-price {
    font-size: 17px !important;
    margin-top: 6px !important;
}

body.page-home .promo-banner-cta,
body.page-home .combo-strip-cta {
    padding: 8px 22px !important;
    font-size: 11px !important;
}

/* Samsung Tab / tablet landscape */
@media (max-width: 1200px) {
    body.page-home .promo-banners {
        width: calc(100vw - 48px) !important;
        gap: 10px !important;
    }

    body.page-home .promo-banner,
    body.page-home .combo-strip,
    body.page-home .combo-strip:not(.promo-banners .combo-strip) {
        height: 135px !important;
        min-height: 135px !important;
        max-height: 135px !important;
    }

    body.page-home .combo-strip:not(.promo-banners .combo-strip) {
        width: calc((100vw - 48px - 20px) / 3) !important;
    }

    body.page-home .promo-banner-content,
    body.page-home .combo-strip-content {
        padding: 12px 16px !important;
    }

    body.page-home .promo-banner-title,
    body.page-home .combo-strip-title {
        font-size: clamp(15px, 1.7vw, 20px) !important;
    }

    body.page-home .promo-banner-meta,
    body.page-home .combo-strip-desc {
        font-size: 10px !important;
        max-width: 76% !important;
    }
}

/* APEX HOTFIX 2026-05-18 — promo cards narrower and taller */
body.page-home .promo-banners {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: min(92vw, 1560px) !important;
    max-width: 1560px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 14px !important;
}

body.page-home .promo-banner,
body.page-home .combo-strip,
body.page-home .combo-strip:not(.promo-banners .combo-strip) {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;

    height: 185px !important;
    min-height: 185px !important;
    max-height: 185px !important;

    border-radius: 16px !important;
}

body.page-home .combo-strip:not(.promo-banners .combo-strip) {
    width: calc((min(92vw, 1560px) - 28px) / 3) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.page-home .promo-banner-content,
body.page-home .combo-strip-content {
    padding: 18px 24px !important;
}

body.page-home .promo-banner-title,
body.page-home .combo-strip-title {
    font-size: clamp(18px, 1.3vw, 25px) !important;
    line-height: 1.02 !important;
    margin-bottom: 8px !important;
}

body.page-home .promo-banner-meta,
body.page-home .combo-strip-desc {
    font-size: 12px !important;
    line-height: 1.18 !important;
    max-width: 72% !important;
}

body.page-home .promo-banner-price,
body.page-home .combo-strip-price {
    font-size: 18px !important;
    margin-top: 8px !important;
}

body.page-home .promo-banner-cta,
body.page-home .combo-strip-cta {
    padding: 9px 22px !important;
    font-size: 11px !important;
}

/* Samsung Tab / tablet landscape */
@media (max-width: 1200px) {
    body.page-home .promo-banners {
        width: min(94vw, 1060px) !important;
        gap: 10px !important;
    }

    body.page-home .promo-banner,
    body.page-home .combo-strip,
    body.page-home .combo-strip:not(.promo-banners .combo-strip) {
        height: 165px !important;
        min-height: 165px !important;
        max-height: 165px !important;
    }

    body.page-home .combo-strip:not(.promo-banners .combo-strip) {
        width: calc((min(94vw, 1060px) - 20px) / 3) !important;
    }

    body.page-home .promo-banner-content,
    body.page-home .combo-strip-content {
        padding: 15px 18px !important;
    }

    body.page-home .promo-banner-title,
    body.page-home .combo-strip-title {
        font-size: clamp(16px, 1.9vw, 22px) !important;
    }

    body.page-home .promo-banner-meta,
    body.page-home .combo-strip-desc {
        font-size: 10.5px !important;
        max-width: 76% !important;
    }
}

/* APEX FINAL HOTFIX 2026-05-18 — HOME PROMO 3 CARDS IN ONE ROW
   Goal:
   - 3 promo cards in one horizontal row
   - cards slightly taller
   - cards shorter by length because all 3 share one row
   - combo-strip is now treated as third card, not wide banner
*/
body.page-home .promo-banners {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: min(86vw, 1480px) !important;
    max-width: 1480px !important;
    margin: 18px auto 28px auto !important;
    gap: 14px !important;
    align-items: stretch !important;
}

body.page-home .promo-banners .promo-banner,
body.page-home .promo-banners .combo-strip,
body.page-home .promo-banners .combo-strip--card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 185px !important;
    min-height: 185px !important;
    max-height: 185px !important;
    margin: 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

body.page-home .promo-banners .combo-strip-content,
body.page-home .promo-banners .promo-banner-content {
    height: 100% !important;
    padding: 18px 22px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
}

body.page-home .promo-banners .combo-strip-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

body.page-home .promo-banners .promo-banner-title,
body.page-home .promo-banners .combo-strip-title {
    font-size: clamp(18px, 1.25vw, 25px) !important;
    line-height: 1.02 !important;
    max-width: 82% !important;
    margin-bottom: 8px !important;
}

body.page-home .promo-banners .promo-banner-meta,
body.page-home .promo-banners .combo-strip-meta {
    font-size: 11px !important;
    line-height: 1.18 !important;
    max-width: 76% !important;
}

body.page-home .promo-banners .promo-banner-price,
body.page-home .promo-banners .combo-strip-price {
    font-size: 17px !important;
    margin-top: 8px !important;
}

body.page-home .promo-banners .promo-banner-cta,
body.page-home .promo-banners .combo-strip-cta {
    padding: 8px 20px !important;
    font-size: 11px !important;
}

body.page-home .promo-banners .combo-strip-cta-block {
    position: static !important;
    margin-top: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
}

/* Samsung Tab 11 / tablet landscape */
@media (max-width: 1200px) {
    body.page-home .promo-banners {
        width: calc(100vw - 32px) !important;
        max-width: none !important;
        gap: 8px !important;
        margin-top: 12px !important;
        margin-bottom: 20px !important;
    }

    body.page-home .promo-banners .promo-banner,
    body.page-home .promo-banners .combo-strip,
    body.page-home .promo-banners .combo-strip--card {
        height: 165px !important;
        min-height: 165px !important;
        max-height: 165px !important;
        border-radius: 13px !important;
    }

    body.page-home .promo-banners .combo-strip-content,
    body.page-home .promo-banners .promo-banner-content {
        padding: 14px 14px !important;
    }

    body.page-home .promo-banners .promo-banner-title,
    body.page-home .promo-banners .combo-strip-title {
        font-size: clamp(15px, 1.8vw, 20px) !important;
        max-width: 88% !important;
    }

    body.page-home .promo-banners .promo-banner-meta,
    body.page-home .promo-banners .combo-strip-meta {
        font-size: 10px !important;
        max-width: 86% !important;
    }

    body.page-home .promo-banners .promo-banner-cta,
    body.page-home .promo-banners .combo-strip-cta {
        padding: 7px 14px !important;
        font-size: 10px !important;
    }
}

/* Small tablet / narrow browser fallback */
@media (max-width: 860px) {
    body.page-home .promo-banners {
        grid-template-columns: 1fr !important;
        width: calc(100vw - 28px) !important;
    }

    body.page-home .promo-banners .promo-banner,
    body.page-home .promo-banners .combo-strip,
    body.page-home .promo-banners .combo-strip--card {
        height: 160px !important;
        min-height: 160px !important;
        max-height: 160px !important;
    }
}

/* APEX FINAL HOTFIX 2026-05-18 — rebuild promo area as 3 equal promo cards */
body.page-home .promo-banners {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: min(90vw, 1500px) !important;
    max-width: 1500px !important;
    margin: 18px auto 24px auto !important;
    gap: 14px !important;
    align-items: stretch !important;
}

/* only promo cards inside promo-banners */
body.page-home .promo-banners .promo-banner {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 185px !important;
    min-height: 185px !important;
    max-height: 185px !important;
    margin: 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

/* hide any leftover standalone combo-strip if old markup remains */
body.page-home > .combo-strip,
body.page-home main > .combo-strip {
    display: none !important;
}

body.page-home .promo-banners .promo-banner-content {
    height: 100% !important;
    padding: 18px 22px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
}

body.page-home .promo-banners .promo-banner-title {
    font-size: clamp(18px, 1.25vw, 25px) !important;
    line-height: 1.02 !important;
    max-width: 82% !important;
    margin-bottom: 8px !important;
}

body.page-home .promo-banners .promo-banner-meta {
    font-size: 11px !important;
    line-height: 1.18 !important;
    max-width: 78% !important;
}

body.page-home .promo-banners .promo-banner-price {
    font-size: 17px !important;
    margin-top: 8px !important;
}

body.page-home .promo-banners .promo-banner-cta {
    padding: 8px 20px !important;
    font-size: 11px !important;
}

/* Samsung Tab / tablet */
@media (max-width: 1200px) {
    body.page-home .promo-banners {
        width: calc(100vw - 32px) !important;
        max-width: none !important;
        gap: 8px !important;
        margin-top: 12px !important;
        margin-bottom: 20px !important;
    }

    body.page-home .promo-banners .promo-banner {
        height: 165px !important;
        min-height: 165px !important;
        max-height: 165px !important;
        border-radius: 13px !important;
    }

    body.page-home .promo-banners .promo-banner-content {
        padding: 14px 14px !important;
    }

    body.page-home .promo-banners .promo-banner-title {
        font-size: clamp(15px, 1.8vw, 20px) !important;
        max-width: 88% !important;
    }

    body.page-home .promo-banners .promo-banner-meta {
        font-size: 10px !important;
        max-width: 86% !important;
    }

    body.page-home .promo-banners .promo-banner-cta {
        padding: 7px 14px !important;
        font-size: 10px !important;
    }
}

/* APEX HOTFIX 2026-05-18 — promo cards lift 1cm and widen 1cm */
body.page-home .promo-banners {
    width: min(96vw, 1620px) !important;
    max-width: 1620px !important;
    margin-top: -20px !important;
    margin-bottom: 24px !important;
    gap: 14px !important;
}

body.page-home .promo-banners .promo-banner {
    height: 185px !important;
    min-height: 185px !important;
    max-height: 185px !important;
}

/* APEX FINAL FIX 2026-05-19 — PIVSKA AXIS ALIGNMENT
   Structure:
   .pivska-showcase = one aligned row
   .pivska-title-block = left title card
   .pivska-cards-row = right 5 beer cards
   Do not force .pivska-card size here.
*/
body.page-home .pivska-showcase {
    width: min(87vw, 1280px) !important;
    max-width: 1280px !important;
    margin: 32px auto 10px auto !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 360px minmax(0, 1fr) !important;
    gap: 20px !important;
    align-items: stretch !important;
}

body.page-home .pivska-title-block {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 205px !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 30px 34px 24px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    align-self: stretch !important;
}

body.page-home .pivska-cards-row {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 14px !important;
    align-items: stretch !important;
}

body.page-home .pivska-card {
    width: auto !important;
    min-width: 0 !important;
}

body.page-home .pivska-eyebrow {
    font-size: 11px !important;
    letter-spacing: .34em !important;
    margin-bottom: 18px !important;
}

body.page-home .pivska-headline {
    font-size: 42px !important;
    line-height: .94 !important;
    letter-spacing: .015em !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    overflow: visible !important;
    text-overflow: unset !important;
    margin: 0 0 24px !important;
}

body.page-home .pivska-sub {
    max-width: 280px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    margin-bottom: 28px !important;
}

body.page-home .pivska-cta {
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 22px !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Samsung Tab / tablet landscape */
@media (max-width: 1280px) and (orientation: landscape) {
    body.page-home .pivska-showcase {
        width: calc(100vw - 48px) !important;
        max-width: none !important;
        grid-template-columns: 330px minmax(0, 1fr) !important;
        gap: 16px !important;
        margin-top: 28px !important;
    }

    body.page-home .pivska-title-block {
        min-height: 190px !important;
        padding: 26px 28px 22px !important;
    }

    body.page-home .pivska-cards-row {
        gap: 12px !important;
    }

    body.page-home .pivska-headline {
        font-size: 38px !important;
        line-height: .94 !important;
    }

    body.page-home .pivska-sub {
        max-width: 250px !important;
        font-size: 12px !important;
        line-height: 1.32 !important;
        margin-bottom: 22px !important;
    }
}

/* APEX HOTFIX 2026-05-18 — HOME MENU CATEGORIES: 6 cards in one row + title lower */
body.page-home .home-categories,
body.page-home .category-grid,
body.page-home .categories-grid,
body.page-home .menu-hubs-grid,
body.page-home .hub-grid,
body.page-home .home-menu-grid {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: min(96vw, 1580px) !important;
    max-width: 1580px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-items: stretch !important;
}

body.page-home .home-categories .category-card,
body.page-home .category-grid .category-card,
body.page-home .categories-grid .category-card,
body.page-home .menu-hubs-grid .hub-card,
body.page-home .hub-grid .hub-card,
body.page-home .home-menu-grid .home-card,
body.page-home .cat-card,
body.page-home .section-card {
    height: 210px !important;
    min-height: 210px !important;
    max-height: 210px !important;
    aspect-ratio: auto !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    overflow: hidden !important;
}

body.page-home .home-categories .category-card .cat-content,
body.page-home .category-grid .category-card .cat-content,
body.page-home .categories-grid .category-card .cat-content,
body.page-home .menu-hubs-grid .hub-card .hub-content,
body.page-home .hub-grid .hub-card .hub-content,
body.page-home .home-menu-grid .home-card .home-card-content,
body.page-home .cat-card .cat-content,
body.page-home .section-card .section-card-content {
    width: 100% !important;
    padding: 0 22px 24px !important;
    margin: 0 !important;
    transform: none !important;
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
}

body.page-home .home-categories .category-card h2,
body.page-home .home-categories .category-card h3,
body.page-home .category-grid .category-card h2,
body.page-home .category-grid .category-card h3,
body.page-home .categories-grid .category-card h2,
body.page-home .categories-grid .category-card h3,
body.page-home .menu-hubs-grid .hub-card h2,
body.page-home .menu-hubs-grid .hub-card h3,
body.page-home .hub-grid .hub-card h2,
body.page-home .hub-grid .hub-card h3,
body.page-home .home-menu-grid .home-card h2,
body.page-home .home-menu-grid .home-card h3,
body.page-home .cat-card h2,
body.page-home .cat-card h3,
body.page-home .section-card h2,
body.page-home .section-card h3 {
    font-size: 24px !important;
    line-height: 1.05 !important;
    margin: 0 0 8px !important;
    max-width: 92% !important;
}

body.page-home .home-categories .category-card p,
body.page-home .category-grid .category-card p,
body.page-home .categories-grid .category-card p,
body.page-home .menu-hubs-grid .hub-card p,
body.page-home .hub-grid .hub-card p,
body.page-home .home-menu-grid .home-card p,
body.page-home .cat-card p,
body.page-home .section-card p {
    font-size: 13px !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    max-width: 92% !important;
}

/* Samsung Tab / tablet landscape */
@media (max-width: 1280px) and (orientation: landscape) {
    body.page-home .home-categories,
    body.page-home .category-grid,
    body.page-home .categories-grid,
    body.page-home .menu-hubs-grid,
    body.page-home .hub-grid,
    body.page-home .home-menu-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: calc(100vw - 32px) !important;
        max-width: calc(100vw - 32px) !important;
    }

    body.page-home .home-categories .category-card,
    body.page-home .category-grid .category-card,
    body.page-home .categories-grid .category-card,
    body.page-home .menu-hubs-grid .hub-card,
    body.page-home .hub-grid .hub-card,
    body.page-home .home-menu-grid .home-card,
    body.page-home .cat-card,
    body.page-home .section-card {
        height: 160px !important;
        min-height: 160px !important;
        max-height: 160px !important;
    }

    body.page-home .home-categories .category-card .cat-content,
    body.page-home .category-grid .category-card .cat-content,
    body.page-home .categories-grid .category-card .cat-content,
    body.page-home .menu-hubs-grid .hub-card .hub-content,
    body.page-home .hub-grid .hub-card .hub-content,
    body.page-home .home-menu-grid .home-card .home-card-content,
    body.page-home .cat-card .cat-content,
    body.page-home .section-card .section-card-content {
        padding: 0 14px 16px !important;
    }

    body.page-home .home-categories .category-card h2,
    body.page-home .home-categories .category-card h3,
    body.page-home .category-grid .category-card h2,
    body.page-home .category-grid .category-card h3,
    body.page-home .categories-grid .category-card h2,
    body.page-home .categories-grid .category-card h3,
    body.page-home .menu-hubs-grid .hub-card h2,
    body.page-home .menu-hubs-grid .hub-card h3,
    body.page-home .hub-grid .hub-card h2,
    body.page-home .hub-grid .hub-card h3,
    body.page-home .home-menu-grid .home-card h2,
    body.page-home .home-menu-grid .home-card h3,
    body.page-home .cat-card h2,
    body.page-home .cat-card h3,
    body.page-home .section-card h2,
    body.page-home .section-card h3 {
        font-size: 17px !important;
        line-height: 1.05 !important;
        margin-bottom: 5px !important;
    }

    body.page-home .home-categories .category-card p,
    body.page-home .category-grid .category-card p,
    body.page-home .categories-grid .category-card p,
    body.page-home .menu-hubs-grid .hub-card p,
    body.page-home .hub-grid .hub-card p,
    body.page-home .home-menu-grid .home-card p,
    body.page-home .cat-card p,
    body.page-home .section-card p {
        font-size: 11px !important;
        line-height: 1.2 !important;
    }
}

/* APEX HOTFIX 2026-05-18 — PRIMARY 6 CARDS ONE ROW + TEXT TO BOTTOM */
body.page-home .categories-row .cards-primary.categories {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: calc(100vw - 72px) !important;
    max-width: none !important;
    margin: 18px auto 24px auto !important;
    padding: 0 !important;
}

body.page-home .cards-primary .cat-card.cat-card--primary {
    height: 150px !important;
    min-height: 150px !important;
    max-height: 150px !important;
    aspect-ratio: auto !important;
    border-radius: 14px !important;
    overflow: hidden !important;
}

body.page-home .cards-primary .cat-card.cat-card--primary .cat-content {
    position: absolute !important;
    left: 14px !important;
    right: 42px !important;
    top: auto !important;
    bottom: 16px !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 5 !important;
}

body.page-home .cards-primary .cat-card.cat-card--primary .cat-title {
    font-size: 17px !important;
    line-height: 1.03 !important;
    letter-spacing: 0.045em !important;
    margin: 0 0 5px 0 !important;
    max-width: 100% !important;
}

body.page-home .cards-primary .cat-card.cat-card--primary .cat-sub {
    font-size: 10.5px !important;
    line-height: 1.15 !important;
    letter-spacing: 0.02em !important;
    margin: 0 !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.page-home .cards-primary .cat-card.cat-card--primary .cat-arrow {
    width: 34px !important;
    height: 34px !important;
    right: 10px !important;
    bottom: 10px !important;
}

/* Samsung Tab / tablet landscape */
@media (max-width: 1280px) and (orientation: landscape) {
    body.page-home .categories-row .cards-primary.categories {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        width: calc(100vw - 32px) !important;
        gap: 7px !important;
        margin-top: 12px !important;
    }

    body.page-home .cards-primary .cat-card.cat-card--primary {
        height: 118px !important;
        min-height: 118px !important;
        max-height: 118px !important;
        border-radius: 11px !important;
    }

    body.page-home .cards-primary .cat-card.cat-card--primary .cat-content {
        left: 9px !important;
        right: 30px !important;
        bottom: 10px !important;
    }

    body.page-home .cards-primary .cat-card.cat-card--primary .cat-title {
        font-size: 12px !important;
        line-height: 1.02 !important;
        margin-bottom: 3px !important;
    }

    body.page-home .cards-primary .cat-card.cat-card--primary .cat-sub {
        font-size: 8.5px !important;
        line-height: 1.1 !important;
    }

    body.page-home .cards-primary .cat-card.cat-card--primary .cat-arrow {
        width: 24px !important;
        height: 24px !important;
        right: 6px !important;
        bottom: 6px !important;
    }
}

/* APEX HOTFIX 2026-05-18 — PRIMARY 6 CARDS FINAL GRID ALIGNMENT
   Scope: only 6 main food/drink cards on home page.
   Goal: one row, equal width, equal height, equal gaps, text at bottom.
   NOTE: card photo is rendered via ::before pseudo (var(--cat-bg-img)),
   there is NO .cat-bg element — so no .cat-bg rules here.
*/

body.page-home .categories-row .cards-primary.categories,
body.page-home .cards-primary.categories {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    column-gap: 14px !important;
    row-gap: 14px !important;

    width: calc(100vw - 96px) !important;
    max-width: 1720px !important;

    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 22px !important;
    margin-bottom: 26px !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    align-items: stretch !important;
    justify-items: stretch !important;
}

body.page-home .cards-primary.categories > .cat-card,
body.page-home .cards-primary.categories > .cat-card.cat-card--primary,
body.page-home .categories-row .cards-primary.categories > .cat-card,
body.page-home .categories-row .cards-primary.categories > .cat-card.cat-card--primary {
    width: 100% !important;
    min-width: 0 !important;

    height: 154px !important;
    min-height: 154px !important;
    max-height: 154px !important;

    aspect-ratio: auto !important;
    margin: 0 !important;

    border-radius: 14px !important;
    overflow: hidden !important;
    position: relative !important;
}

body.page-home .cards-primary.categories > .cat-card .cat-content,
body.page-home .cards-primary.categories > .cat-card.cat-card--primary .cat-content {
    position: absolute !important;
    left: 14px !important;
    right: 42px !important;
    top: auto !important;
    bottom: 15px !important;

    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;

    display: block !important;
    z-index: 5 !important;
}

body.page-home .cards-primary.categories > .cat-card .cat-title,
body.page-home .cards-primary.categories > .cat-card.cat-card--primary .cat-title {
    font-size: 17px !important;
    line-height: 1.03 !important;
    letter-spacing: 0.045em !important;
    margin: 0 0 5px 0 !important;

    max-width: 100% !important;
    white-space: normal !important;
}

body.page-home .cards-primary.categories > .cat-card .cat-sub,
body.page-home .cards-primary.categories > .cat-card.cat-card--primary .cat-sub {
    font-size: 10.5px !important;
    line-height: 1.15 !important;
    letter-spacing: 0.02em !important;
    margin: 0 !important;

    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.page-home .cards-primary.categories > .cat-card .cat-arrow,
body.page-home .cards-primary.categories > .cat-card.cat-card--primary .cat-arrow {
    width: 34px !important;
    height: 34px !important;
    right: 10px !important;
    bottom: 10px !important;
}

/* Tablet / Samsung Tab landscape: keep 6 in one row with equal spacing */
@media (max-width: 1280px) and (orientation: landscape) {
    body.page-home .categories-row .cards-primary.categories,
    body.page-home .cards-primary.categories {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        column-gap: 8px !important;
        row-gap: 8px !important;

        width: calc(100vw - 36px) !important;
        max-width: none !important;

        margin-top: 14px !important;
        margin-bottom: 18px !important;
    }

    body.page-home .cards-primary.categories > .cat-card,
    body.page-home .cards-primary.categories > .cat-card.cat-card--primary,
    body.page-home .categories-row .cards-primary.categories > .cat-card,
    body.page-home .categories-row .cards-primary.categories > .cat-card.cat-card--primary {
        height: 120px !important;
        min-height: 120px !important;
        max-height: 120px !important;
        border-radius: 11px !important;
    }

    body.page-home .cards-primary.categories > .cat-card .cat-content,
    body.page-home .cards-primary.categories > .cat-card.cat-card--primary .cat-content {
        left: 9px !important;
        right: 30px !important;
        bottom: 10px !important;
    }

    body.page-home .cards-primary.categories > .cat-card .cat-title,
    body.page-home .cards-primary.categories > .cat-card.cat-card--primary .cat-title {
        font-size: 12px !important;
        line-height: 1.02 !important;
        margin-bottom: 3px !important;
    }

    body.page-home .cards-primary.categories > .cat-card .cat-sub,
    body.page-home .cards-primary.categories > .cat-card.cat-card--primary .cat-sub {
        font-size: 8.5px !important;
        line-height: 1.1 !important;
    }

    body.page-home .cards-primary.categories > .cat-card .cat-arrow,
    body.page-home .cards-primary.categories > .cat-card.cat-card--primary .cat-arrow {
        width: 24px !important;
        height: 24px !important;
        right: 6px !important;
        bottom: 6px !important;
    }
}

/* Narrow tablet / portrait: do NOT force ugly 6-row compression */
@media (max-width: 900px) and (orientation: portrait) {
    body.page-home .categories-row .cards-primary.categories,
    body.page-home .cards-primary.categories {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        column-gap: 10px !important;
        row-gap: 10px !important;
        width: calc(100vw - 28px) !important;
    }

    body.page-home .cards-primary.categories > .cat-card,
    body.page-home .cards-primary.categories > .cat-card.cat-card--primary {
        height: 138px !important;
        min-height: 138px !important;
        max-height: 138px !important;
    }
}

/* APEX HOTFIX 2026-05-18 — PRIMARY 6 CARDS FINAL GRID ALIGNMENT
   Scope: only 6 main food/drink cards on home page.
   Goal: one row, equal width, equal height, equal gaps, text at bottom.
*/

body.page-home .categories-row .cards-primary.categories,
body.page-home .cards-primary.categories {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    column-gap: 14px !important;
    row-gap: 14px !important;

    width: calc(100vw - 96px) !important;
    max-width: 1720px !important;

    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 22px !important;
    margin-bottom: 26px !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    align-items: stretch !important;
    justify-items: stretch !important;
}

body.page-home .cards-primary.categories > .cat-card,
body.page-home .cards-primary.categories > .cat-card.cat-card--primary,
body.page-home .categories-row .cards-primary.categories > .cat-card,
body.page-home .categories-row .cards-primary.categories > .cat-card.cat-card--primary {
    width: 100% !important;
    min-width: 0 !important;

    height: 154px !important;
    min-height: 154px !important;
    max-height: 154px !important;

    aspect-ratio: auto !important;
    margin: 0 !important;

    border-radius: 14px !important;
    overflow: hidden !important;
    position: relative !important;
}

body.page-home .cards-primary.categories > .cat-card .cat-bg,
body.page-home .cards-primary.categories > .cat-card.cat-card--primary .cat-bg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

body.page-home .cards-primary.categories > .cat-card .cat-content,
body.page-home .cards-primary.categories > .cat-card.cat-card--primary .cat-content {
    position: absolute !important;
    left: 14px !important;
    right: 42px !important;
    top: auto !important;
    bottom: 15px !important;

    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;

    display: block !important;
    z-index: 5 !important;
}

body.page-home .cards-primary.categories > .cat-card .cat-title,
body.page-home .cards-primary.categories > .cat-card.cat-card--primary .cat-title {
    font-size: 17px !important;
    line-height: 1.03 !important;
    letter-spacing: 0.045em !important;
    margin: 0 0 5px 0 !important;

    max-width: 100% !important;
    white-space: normal !important;
}

body.page-home .cards-primary.categories > .cat-card .cat-sub,
body.page-home .cards-primary.categories > .cat-card.cat-card--primary .cat-sub {
    font-size: 10.5px !important;
    line-height: 1.15 !important;
    letter-spacing: 0.02em !important;
    margin: 0 !important;

    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.page-home .cards-primary.categories > .cat-card .cat-arrow,
body.page-home .cards-primary.categories > .cat-card.cat-card--primary .cat-arrow {
    width: 34px !important;
    height: 34px !important;
    right: 10px !important;
    bottom: 10px !important;
}

/* Tablet / Samsung Tab landscape: keep 6 in one row with equal spacing */
@media (max-width: 1280px) and (orientation: landscape) {
    body.page-home .categories-row .cards-primary.categories,
    body.page-home .cards-primary.categories {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        column-gap: 8px !important;
        row-gap: 8px !important;

        width: calc(100vw - 36px) !important;
        max-width: none !important;

        margin-top: 14px !important;
        margin-bottom: 18px !important;
    }

    body.page-home .cards-primary.categories > .cat-card,
    body.page-home .cards-primary.categories > .cat-card.cat-card--primary,
    body.page-home .categories-row .cards-primary.categories > .cat-card,
    body.page-home .categories-row .cards-primary.categories > .cat-card.cat-card--primary {
        height: 120px !important;
        min-height: 120px !important;
        max-height: 120px !important;
        border-radius: 11px !important;
    }

    body.page-home .cards-primary.categories > .cat-card .cat-content,
    body.page-home .cards-primary.categories > .cat-card.cat-card--primary .cat-content {
        left: 9px !important;
        right: 30px !important;
        bottom: 10px !important;
    }

    body.page-home .cards-primary.categories > .cat-card .cat-title,
    body.page-home .cards-primary.categories > .cat-card.cat-card--primary .cat-title {
        font-size: 12px !important;
        line-height: 1.02 !important;
        margin-bottom: 3px !important;
    }

    body.page-home .cards-primary.categories > .cat-card .cat-sub,
    body.page-home .cards-primary.categories > .cat-card.cat-card--primary .cat-sub {
        font-size: 8.5px !important;
        line-height: 1.1 !important;
    }

    body.page-home .cards-primary.categories > .cat-card .cat-arrow,
    body.page-home .cards-primary.categories > .cat-card.cat-card--primary .cat-arrow {
        width: 24px !important;
        height: 24px !important;
        right: 6px !important;
        bottom: 6px !important;
    }
}

/* Narrow tablet / portrait: do NOT force ugly 6-row compression */
@media (max-width: 900px) and (orientation: portrait) {
    body.page-home .categories-row .cards-primary.categories,
    body.page-home .cards-primary.categories {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        column-gap: 10px !important;
        row-gap: 10px !important;
        width: calc(100vw - 28px) !important;
    }

    body.page-home .cards-primary.categories > .cat-card,
    body.page-home .cards-primary.categories > .cat-card.cat-card--primary {
        height: 138px !important;
        min-height: 138px !important;
        max-height: 138px !important;
    }
}

/* APEX HOTFIX 2026-05-18 — tune only "НАШЕ ПИВО" title block, do not touch beer cards */
body.page-home .pivska-title-block {
    width: 420px !important;
    min-width: 420px !important;
    max-width: 420px !important;
    padding-left: 38px !important;
    padding-right: 38px !important;
    box-sizing: border-box !important;
}

body.page-home .pivska-headline {
    font-size: 58px !important;
    line-height: .9 !important;
    letter-spacing: .015em !important;
    white-space: nowrap !important;
}

body.page-home .pivska-sub {
    max-width: 300px !important;
}

/* Samsung Tab landscape */
@media (max-width: 1280px) and (orientation: landscape) {
    body.page-home .pivska-title-block {
        width: 340px !important;
        min-width: 340px !important;
        max-width: 340px !important;
        padding-left: 28px !important;
        padding-right: 28px !important;
    }

    body.page-home .pivska-headline {
        font-size: 48px !important;
    }

    body.page-home .pivska-sub {
        max-width: 250px !important;
    }
}

/* APEX HOTFIX 2026-05-18 — fix PIVSKA title width without overlap */
body.page-home .pivska-showcase {
    grid-template-columns: 480px auto !important;
    gap: 28px !important;
    width: calc(100vw - 96px) !important;
    max-width: 1720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-items: start !important;
}

body.page-home .pivska-title-block {
    width: 480px !important;
    min-width: 480px !important;
    max-width: 480px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    padding-left: 42px !important;
    padding-right: 42px !important;
}

body.page-home .pivska-cards-row {
    width: auto !important;
    min-width: 0 !important;
}

body.page-home .pivska-headline {
    font-size: 54px !important;
    line-height: .92 !important;
    letter-spacing: 0.01em !important;
    white-space: normal !important;
    max-width: 100% !important;
    overflow: visible !important;
    text-overflow: unset !important;
}

body.page-home .pivska-sub {
    max-width: 330px !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
}

/* Samsung Tab landscape */
@media (max-width: 1280px) and (orientation: landscape) {
    body.page-home .pivska-showcase {
        grid-template-columns: 370px auto !important;
        gap: 16px !important;
        width: calc(100vw - 32px) !important;
        max-width: none !important;
    }

    body.page-home .pivska-title-block {
        width: 370px !important;
        min-width: 370px !important;
        max-width: 370px !important;
        padding-left: 30px !important;
        padding-right: 30px !important;
    }

    body.page-home .pivska-headline {
        font-size: 46px !important;
        line-height: .92 !important;
        white-space: normal !important;
    }

    body.page-home .pivska-sub {
        max-width: 280px !important;
        font-size: 13px !important;
    }
}

/* APEX FINAL FIX 2026-05-19 — PROMO POSITION ONLY
   Move promo row onto the same center axis.
   Do NOT resize promo cards, text, images or buttons.
*/
body.page-home .promo-banners {
    width: min(69vw, 1230px) !important;
    max-width: 1230px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: translateX(18px) !important;
}


/* APEX FINAL FIX 2026-05-19 — PIVSKA AS 6 EQUAL CARDS
   Make "НАШЕ ПИВО" the first card in the same 6-card grid.
   This fixes tablet scaling and prevents the 5th beer card from disappearing.
*/
body.page-home .pivska-showcase {
    width: min(94vw, 1700px) !important;
    max-width: 1700px !important;
    margin: 32px auto 26px auto !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 14px !important;
    align-items: stretch !important;
}

body.page-home .pivska-title-block {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 278px !important;
    min-height: 278px !important;
    max-height: 278px !important;
    margin: 0 !important;
    padding: 30px 28px 24px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    align-self: stretch !important;
}

body.page-home .pivska-cards-row {
    display: contents !important;
}

body.page-home .pivska-card,
body.page-home .pivska-card:nth-child(4),
body.page-home .pivska-card:nth-child(5),
body.page-home .pivska-card:nth-child(n+3) {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 278px !important;
    min-height: 278px !important;
    max-height: 278px !important;
    aspect-ratio: auto !important;
}

body.page-home .pivska-headline {
    font-size: 38px !important;
    line-height: .94 !important;
    white-space: normal !important;
    margin: 0 0 24px !important;
}

body.page-home .pivska-eyebrow {
    font-size: 10px !important;
    letter-spacing: .28em !important;
    margin-bottom: 16px !important;
}

body.page-home .pivska-sub {
    font-size: 12px !important;
    line-height: 1.35 !important;
    max-width: 100% !important;
    margin-bottom: 24px !important;
}

body.page-home .pivska-cta {
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 18px !important;
    font-size: 10px !important;
}

/* Samsung Tab landscape */
@media (max-width: 1280px) and (orientation: landscape) {
    body.page-home .pivska-showcase {
        width: calc(100vw - 32px) !important;
        max-width: none !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin-top: 24px !important;
    }

    body.page-home .pivska-title-block,
    body.page-home .pivska-card,
    body.page-home .pivska-card:nth-child(4),
    body.page-home .pivska-card:nth-child(5),
    body.page-home .pivska-card:nth-child(n+3) {
        display: flex !important;
        height: 230px !important;
        min-height: 230px !important;
        max-height: 230px !important;
    }

    body.page-home .pivska-title-block {
        padding: 22px 18px 18px !important;
    }

    body.page-home .pivska-headline {
        font-size: 30px !important;
    }

    body.page-home .pivska-sub {
        font-size: 10px !important;
    }
}


/* APEX FINAL FIX 2026-05-19 — PIVSKA TITLE CARD TEXT FIT ONLY
   Only fit text inside the first "НАШЕ ПИВО" card.
   Do not change grid, beer cards, images, backend or data.
*/
body.page-home .pivska-title-block {
    padding: 24px 22px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

body.page-home .pivska-eyebrow {
    font-size: 9px !important;
    line-height: 1.1 !important;
    letter-spacing: .22em !important;
    margin: 0 0 12px !important;
    white-space: nowrap !important;
}

body.page-home .pivska-headline {
    font-size: 34px !important;
    line-height: .92 !important;
    letter-spacing: .01em !important;
    margin: 0 0 14px !important;
    white-space: normal !important;
}

body.page-home .pivska-sub {
    font-size: 11px !important;
    line-height: 1.28 !important;
    max-width: 100% !important;
    margin: 0 0 14px !important;
}

body.page-home .pivska-cta {
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 12px !important;
    font-size: 9px !important;
    letter-spacing: .22em !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

@media (max-width: 1280px) and (orientation: landscape) {
    body.page-home .pivska-title-block {
        padding: 18px 16px 14px !important;
    }

    body.page-home .pivska-eyebrow {
        font-size: 8px !important;
        letter-spacing: .18em !important;
        margin-bottom: 9px !important;
    }

    body.page-home .pivska-headline {
        font-size: 28px !important;
        line-height: .92 !important;
        margin-bottom: 10px !important;
    }

    body.page-home .pivska-sub {
        font-size: 9px !important;
        line-height: 1.22 !important;
        margin-bottom: 10px !important;
    }

    body.page-home .pivska-cta {
        height: 34px !important;
        min-height: 34px !important;
        font-size: 8px !important;
        letter-spacing: .18em !important;
    }
}


/* APEX FINAL FIX 2026-05-19 — PROMO ALIGN TO PIVSKA WIDTH
   Align promo row to the same left/right axis as the 6-card PIVSKA row.
   Do not shrink typography or change backend/data.
*/
body.page-home .promo-banners {
    width: min(94vw, 1700px) !important;
    max-width: 1700px !important;
    margin: 18px auto 28px auto !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
    align-items: stretch !important;
    transform: none !important;
}

body.page-home .promo-banners .promo-banner,
body.page-home .promo-banners .combo-strip,
body.page-home .promo-banners .combo-strip--card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Samsung Tab landscape */
@media (max-width: 1280px) and (orientation: landscape) {
    body.page-home .promo-banners {
        width: calc(100vw - 32px) !important;
        max-width: none !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin-top: 16px !important;
        margin-bottom: 24px !important;
        transform: none !important;
    }
}


/* APEX FINAL FIX 2026-05-19 — HOME CARDS LIFT
   Lift main category cards closer to hero buttons.
   Do not change card sizes, grid, images, backend or data.
*/
body.page-home .home-categories,
body.page-home .categories-row,
body.page-home .cards-primary.categories {
    margin-top: 18px !important;
}

@media (max-width: 1280px) and (orientation: landscape) {
    body.page-home .home-categories,
    body.page-home .categories-row,
    body.page-home .cards-primary.categories {
        margin-top: 14px !important;
    }
}


/* APEX FINAL FIX 2026-05-19 — HOME CARDS PULL UP
   Pull the first category row closer to hero buttons.
   Do not change card sizes, grid, images, backend or data.
*/
body.page-home .home-categories,
body.page-home .categories-row,
body.page-home .cards-primary.categories {
    margin-top: -54px !important;
}

@media (max-width: 1280px) and (orientation: landscape) {
    body.page-home .home-categories,
    body.page-home .categories-row,
    body.page-home .cards-primary.categories {
        margin-top: -62px !important;
    }
}


/* APEX FINAL FIX 2026-05-19 — MENU TOP 5 SET CARDS
   /menu top hub: 5 compact beer-set cards in one row.
   Frontend only. No backend/menu.json/routes/admin/Telegram changes.
*/
body.page-menu--hubs .categories:not(.categories--rich) {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

body.page-menu--hubs .categories:not(.categories--rich) .cat-card {
    min-width: 0 !important;
    height: 96px !important;
    min-height: 96px !important;
    max-height: 96px !important;
    padding: 14px 16px !important;
    box-sizing: border-box !important;
}

body.page-menu--hubs .categories:not(.categories--rich) .cat-title {
    font-size: 15px !important;
    line-height: 1.05 !important;
    margin-bottom: 7px !important;
    white-space: normal !important;
}

body.page-menu--hubs .categories:not(.categories--rich) .cat-sub {
    font-size: 10px !important;
    line-height: 1.25 !important;
    max-width: 90% !important;
}

body.page-menu--hubs .categories:not(.categories--rich) .cat-arrow {
    width: 28px !important;
    height: 28px !important;
    right: 12px !important;
    bottom: 12px !important;
}

@media (max-width: 1280px) and (orientation: landscape) {
    body.page-menu--hubs .categories:not(.categories--rich) {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    body.page-menu--hubs .categories:not(.categories--rich) .cat-card {
        height: 88px !important;
        min-height: 88px !important;
        max-height: 88px !important;
        padding: 12px 14px !important;
    }

    body.page-menu--hubs .categories:not(.categories--rich) .cat-title {
        font-size: 13px !important;
    }

    body.page-menu--hubs .categories:not(.categories--rich) .cat-sub {
        font-size: 9px !important;
    }
}


/* APEX FINAL FIX 2026-05-19 — MENU TOP 5 SET CARDS REAL */
body.page-menu--hubs .menu-set-cards {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

body.page-menu--hubs .menu-set-cards .cat-card {
    height: 86px !important;
    min-height: 86px !important;
    max-height: 86px !important;
    padding: 13px 14px !important;
}

body.page-menu--hubs .menu-set-cards .cat-title {
    font-size: 14px !important;
    line-height: 1.05 !important;
}

body.page-menu--hubs .menu-set-cards .cat-sub {
    font-size: 9px !important;
    line-height: 1.2 !important;
}


/* APEX FINAL FIX 2026-05-19 — MENU TOP 5 SET CARDS FORCE */
body.page-menu--hubs .menu-set-cards {
    width: min(94vw, 1400px) !important;
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

body.page-menu--hubs .menu-set-cards .cat-card {
    min-width: 0 !important;
    height: 88px !important;
    min-height: 88px !important;
    max-height: 88px !important;
    padding: 13px 14px !important;
    box-sizing: border-box !important;
}

body.page-menu--hubs .menu-set-cards .cat-title {
    font-size: 14px !important;
    line-height: 1.05 !important;
    white-space: normal !important;
}

body.page-menu--hubs .menu-set-cards .cat-sub {
    font-size: 9px !important;
    line-height: 1.2 !important;
    max-width: 88% !important;
}

body.page-menu--hubs .menu-set-cards .cat-arrow {
    width: 28px !important;
    height: 28px !important;
    right: 12px !important;
    bottom: 12px !important;
}

@media (max-width: 1280px) and (orientation: landscape) {
    body.page-menu--hubs .menu-set-cards {
        width: calc(100vw - 32px) !important;
        max-width: none !important;
        gap: 8px !important;
    }

    body.page-menu--hubs .menu-set-cards .cat-card {
        height: 82px !important;
        min-height: 82px !important;
        max-height: 82px !important;
        padding: 11px 12px !important;
    }

    body.page-menu--hubs .menu-set-cards .cat-title {
        font-size: 12px !important;
    }

    body.page-menu--hubs .menu-set-cards .cat-sub {
        font-size: 8px !important;
    }
}


/* APEX FINAL FIX 2026-05-19 — MENU TOP 5 SET CARDS LINE REPLACE */
body.page-menu--hubs .menu-set-cards {
    width: min(94vw, 1400px) !important;
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

body.page-menu--hubs .menu-set-cards .cat-card {
    min-width: 0 !important;
    height: 88px !important;
    min-height: 88px !important;
    max-height: 88px !important;
    padding: 13px 14px !important;
    box-sizing: border-box !important;
}

body.page-menu--hubs .menu-set-cards .cat-title {
    font-size: 14px !important;
    line-height: 1.05 !important;
    white-space: normal !important;
}

body.page-menu--hubs .menu-set-cards .cat-sub {
    font-size: 9px !important;
    line-height: 1.2 !important;
    max-width: 88% !important;
}

body.page-menu--hubs .menu-set-cards .cat-arrow {
    width: 28px !important;
    height: 28px !important;
    right: 12px !important;
    bottom: 12px !important;
}

@media (max-width: 1280px) and (orientation: landscape) {
    body.page-menu--hubs .menu-set-cards {
        width: calc(100vw - 32px) !important;
        max-width: none !important;
        gap: 8px !important;
    }

    body.page-menu--hubs .menu-set-cards .cat-card {
        height: 82px !important;
        min-height: 82px !important;
        max-height: 82px !important;
        padding: 11px 12px !important;
    }

    body.page-menu--hubs .menu-set-cards .cat-title {
        font-size: 12px !important;
    }

    body.page-menu--hubs .menu-set-cards .cat-sub {
        font-size: 8px !important;
    }
}


/* APEX FINAL FIX 2026-05-19 — MENU 5 COLUMNS COMPACT
   Make /menu top set cards and main category cards more compact.
   Goal: 5 cards per row.
   Frontend CSS only.
*/

/* Top 5 set cards: a little lower/compact */
body.page-menu--hubs .menu-set-cards {
    width: min(94vw, 1540px) !important;
    max-width: 1540px !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

body.page-menu--hubs .menu-set-cards .cat-card {
    height: 78px !important;
    min-height: 78px !important;
    max-height: 78px !important;
    padding: 11px 14px !important;
}

body.page-menu--hubs .menu-set-cards .cat-title {
    font-size: 13px !important;
}

body.page-menu--hubs .menu-set-cards .cat-sub {
    font-size: 8.5px !important;
}

/* Main menu category grid: 5 cards per row */
body.page-menu--hubs .categories.categories--rich {
    width: min(94vw, 1540px) !important;
    max-width: 1540px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

body.page-menu--hubs .categories.categories--rich .cat-card {
    min-width: 0 !important;
    height: 210px !important;
    min-height: 210px !important;
    max-height: 210px !important;
}

body.page-menu--hubs .categories.categories--rich .cat-photo {
    height: 100% !important;
}

body.page-menu--hubs .categories.categories--rich .cat-title {
    font-size: 15px !important;
    line-height: 1.05 !important;
}

body.page-menu--hubs .categories.categories--rich .cat-sub,
body.page-menu--hubs .categories.categories--rich .cat-desc {
    font-size: 9px !important;
    line-height: 1.2 !important;
}

body.page-menu--hubs .categories.categories--rich .cat-arrow {
    width: 28px !important;
    height: 28px !important;
    right: 12px !important;
    bottom: 12px !important;
}

/* Samsung Tab landscape */
@media (max-width: 1280px) and (orientation: landscape) {
    body.page-menu--hubs .menu-set-cards,
    body.page-menu--hubs .categories.categories--rich {
        width: calc(100vw - 32px) !important;
        max-width: none !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    body.page-menu--hubs .menu-set-cards .cat-card {
        height: 72px !important;
        min-height: 72px !important;
        max-height: 72px !important;
    }

    body.page-menu--hubs .categories.categories--rich .cat-card {
        height: 178px !important;
        min-height: 178px !important;
        max-height: 178px !important;
    }

    body.page-menu--hubs .categories.categories--rich .cat-title {
        font-size: 13px !important;
    }
}


/* ============================================================
   SETS MVP — visual cleanup (/menu?sets=<group>)
   Fully scoped under .sets-view + set-card-* classes. No existing
   .categories / .cat-card rule is touched. Replaces the first-pass
   block. Updated 2026-05-19.
   ============================================================ */
.sets-view {
    width: min(900px, calc(100vw - 32px));
    margin: 10px auto 32px;
    color: var(--text, #efe7d2);
}

/* ---- group header ---- */
.sets-view .sets-view-head { margin: 2px 0 16px; }
.sets-view .sets-view-title {
    font-size: 27px;
    font-weight: 800;
    letter-spacing: 0.2px;
    color: var(--accent-2, #f0d28b);
}
.sets-view .sets-view-sub {
    margin-top: 5px;
    font-size: 14px;
    color: var(--text-dim, #a89272);
}

/* ---- group switcher ---- */
.sets-view .sets-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px;
}
.sets-view .sets-nav-chip {
    display: inline-block;
    padding: 8px 15px;
    border-radius: 999px;
    background: var(--bg-2, #1d1814);
    border: 1px solid var(--bg-3, #2a2218);
    color: var(--text-dim, #a89272);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.sets-view .sets-nav-chip--active {
    background: var(--accent-soft, rgba(198,146,58,0.20));
    border-color: var(--accent, #c6923a);
    color: var(--accent-2, #f0d28b);
}

/* ---- grid ---- */
.sets-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

/* ---- card ---- */
.set-card {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 18px 20px;
    background: var(--bg-1, #171311);
    border: 1px solid var(--bg-3, #2a2218);
    border-radius: var(--s17-radius-card, 18px);
}
/* ---- media (photo reused from an existing menu item; sets only) ---- */
.set-card--has-media { overflow: hidden; }
.set-card-media {
    /* Bleed to the card's inner edges: negative margins exactly cancel the
       .set-card padding (18px top, 20px sides). overflow:hidden on the card
       clips the photo's top corners to the same radius as the card. */
    margin: -18px -20px 0;
    aspect-ratio: 16 / 7;
    background: var(--bg-2, #1d1814);
    position: relative;
}
.set-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.set-card-media::after {
    /* Soft fade of the photo into the card body — scoped inside the media
       box only, so it never touches the text below. */
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 36%;
    background: linear-gradient(to bottom,
        rgba(23, 19, 17, 0) 0%, var(--bg-1, #171311) 100%);
    pointer-events: none;
}
.set-card-title {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--text, #efe7d2);
}
.set-card-desc {
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-dim, #a89272);
}

/* ---- price row ---- */
.set-card-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin-top: 2px;
}
.set-card-price .set-card-price-old {
    font-size: 14px;
    color: var(--text-dim, #a89272);
    opacity: 0.8;
}
.set-card-price .set-card-price-now {
    font-size: 26px;
    font-weight: 800;
    color: var(--accent-2, #f0d28b);
}
.set-card-discount {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--accent-soft, rgba(198,146,58,0.20));
    border: 1px solid var(--accent, #c6923a);
    color: var(--accent-2, #f0d28b);
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

/* ---- composition (collapsed by default) ---- */
.set-card-details { margin-top: 4px; }
.set-card-details > summary {
    display: inline-block;
    padding: 8px 15px;
    border-radius: 10px;
    background: var(--bg-2, #1d1814);
    border: 1px solid var(--bg-3, #2a2218);
    color: var(--text-dim, #a89272);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.set-card-details > summary::-webkit-details-marker { display: none; }
.set-card-details[open] > summary {
    background: var(--accent-soft, rgba(198,146,58,0.20));
    border-color: var(--accent, #c6923a);
    color: var(--accent-2, #f0d28b);
    margin-bottom: 8px;
}
.set-card-details ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.set-card-details li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 2px;
    border-bottom: 1px solid var(--bg-2, #1d1814);
    font-size: 12.5px;
    line-height: 1.35;
}
.set-card-details li:last-child { border-bottom: 0; }
.set-card-details .ci-name { color: var(--text, #efe7d2); }
.set-card-details .ci-val {
    flex: none;
    text-align: right;
    color: var(--text-dim, #a89272);
    white-space: nowrap;
}
.set-card-details li.is-missing .ci-val { color: #d9824a; }

/* ---- empty / back ---- */
.sets-view .sets-empty {
    padding: 30px;
    text-align: center;
    color: var(--text-dim, #a89272);
}
.sets-view .sets-back { margin-top: 24px; }
.sets-view .sets-back-btn {
    display: inline-block;
    padding: 10px 17px;
    border-radius: 10px;
    background: var(--bg-2, #1d1814);
    border: 1px solid var(--bg-3, #2a2218);
    color: var(--text-dim, #a89272);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

@media (max-width: 760px) {
    .sets-grid { grid-template-columns: 1fr; }
    .sets-view .sets-view-title { font-size: 23px; }
    /* 1-column cards are full-width — keep the banner shorter so the card
       does not become too tall. */
    .set-card-media { aspect-ratio: 16 / 6; }
}


/* ============================================================
   SET ENTRY CARDS — generated group photo (2026-05-19)
   Scoped STRICTLY to the 5 .menu-set-cards / .cat-set-* shortcut
   cards on the /menu hub, via the .cat-card--set-media modifier.
   Generic .cat-card, .categories--rich, the index page and the
   regular category cards are deliberately NOT matched here.
   Card height / 5-column grid are left exactly as-is — the photo
   is a background layer behind the existing title/sub/arrow.
   ============================================================ */
body.page-menu--hubs .menu-set-cards .cat-card--set-media {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate;
}
body.page-menu--hubs .menu-set-cards .cat-card--set-media .set-entry-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: var(--bg-2, #1d1814);
}
body.page-menu--hubs .menu-set-cards .cat-card--set-media .set-entry-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    opacity: 0.92;
}
body.page-menu--hubs .menu-set-cards .cat-card--set-media .set-entry-media::after {
    /* Removed 2026-05-19: this left-weighted scrim is superseded by the
       bottom-only gradient in the "SET ENTRY CARDS PHOTO VISIBLE" block.
       Disabling the pseudo-element entirely so the photo reads clean
       left-to-right. Kept as a no-op (not deleted) to preserve the
       surrounding scoped block intact. */
    content: none;
}
/* Keep the existing text and arrow above the photo without altering their
   own positioning (the arrow stays absolutely placed by its existing rule). */
body.page-menu--hubs .menu-set-cards .cat-card--set-media .cat-content {
    position: relative;
    z-index: 1;
}
body.page-menu--hubs .menu-set-cards .cat-card--set-media .cat-arrow {
    z-index: 1 !important;
}

/* APEX FINAL FIX 2026-05-19 — SET ENTRY CARDS PHOTO VISIBLE
   Make the 5 generated group images visible on /menu set entry cards.
   Scoped only to .menu-set-cards.
*/
body.page-menu--hubs .menu-set-cards .cat-card.cat-card--set-media {
    height: 118px !important;
    min-height: 118px !important;
    max-height: 118px !important;
    padding: 0 !important;
    overflow: hidden !important;
}

body.page-menu--hubs .menu-set-cards .cat-card--set-media .set-entry-media {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    opacity: 1 !important;
}

body.page-menu--hubs .menu-set-cards .cat-card--set-media .set-entry-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    opacity: 1 !important;
}

body.page-menu--hubs .menu-set-cards .cat-card--set-media::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background: linear-gradient(
        180deg,
        rgba(7, 5, 3, 0.10) 0%,
        rgba(7, 5, 3, 0.40) 48%,
        rgba(7, 5, 3, 0.78) 100%
    ) !important;
    pointer-events: none !important;
}

body.page-menu--hubs .menu-set-cards .cat-card--set-media .cat-content,
body.page-menu--hubs .menu-set-cards .cat-card--set-media .cat-arrow {
    position: relative !important;
    z-index: 2 !important;
}

body.page-menu--hubs .menu-set-cards .cat-card--set-media .cat-content {
    padding: 48px 14px 12px !important;
}

@media (max-width: 1280px) and (orientation: landscape) {
    body.page-menu--hubs .menu-set-cards .cat-card.cat-card--set-media {
        height: 104px !important;
        min-height: 104px !important;
        max-height: 104px !important;
    }

    body.page-menu--hubs .menu-set-cards .cat-card--set-media .cat-content {
        padding: 42px 12px 10px !important;
    }
}


/* ============================================================================
   APEX FINAL FIX — MENU CARD IMAGE BOX FIT          2026-05-19T21:26:04Z
   ----------------------------------------------------------------------------
   Symptom (live): on /menu and on /menu?section=… the product card photo
   was rendering BIGGER than its card frame after the Stage 2B rebind — bottles,
   glasses and plates were spilling past the card border, partly clipped by the
   page, and the hover-zoom (scale 1.04/1.05) was making it worse because the
   intermediate figure container had no overflow:hidden of its own and the wine
   article fell back to the default static-positioning context.
   Root cause in cascade: several later "premium" layers reset .promo-photo
   sizing to width:100%/height:auto+aspect-ratio:4/3 but did NOT set overflow
   on the figure itself; the hover transforms therefore escaped the figure.
   Fix (CSS-only, file-tail = highest cascade precedence, surgical !important):
     1. Force `position:relative; overflow:hidden; width:100%; padding:0;
        margin:0` on every menu-card photo CONTAINER (.cat-photo, .promo-photo,
        .item-view-photo, .reco-photo) — never on the set-media containers.
     2. Re-affirm `overflow:hidden` on the card WRAPPER (the <article>) for
        .promo--compact / .promo--wine / .cat-card, but NOT on
        .cat-card--set-media (generated_sets stay untouched).
     3. Make the <picture> wrapper also `position:absolute; inset:0` so it
        anchors the img to the figure bounds (some browsers shrink it).
     4. <img> = `position:absolute; inset:0; top/right/bottom/left:0;
        width:100%; height:100%; max-width:none; max-height:none; margin:0;
        padding:0; display:block; object-fit:cover; object-position:center
        center` — covers without letterboxing, never overflows.
     5. Hover-zoom is preserved (containers clip the scaled child).
     6. NO `img { … }` global rule. NO change to the SET cards
        (`.set-card-media`, `.set-entry-media`, `.cat-card--set-media`) — they
        were already rendering correctly and are explicitly excluded.
   Reversible: delete this block to revert.
   ========================================================================= */

/* (1) Photo container = strict, clipping, no internal air ------------------ */
body.page-menu .categories--rich .cat-photo,
body.page-menu--hubs .categories--rich .cat-photo,
body.page-menu--hubs .reco-photo,
body.page-menu .promo:not(.promo--no-image) .promo-photo,
body.page-wine .promo:not(.promo--no-image) .promo-photo,
body.page-menu .item-view-photo,
body.page-menu--item .item-view-photo {
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background-clip: padding-box !important;
}

/* (2) Card wrapper = also clipping so hover-zoom never paints outside the
       card. Generated_sets cards (`.cat-card--set-media`) are excluded. ----- */
body.page-menu .promo.promo--compact,
body.page-menu .promo.promo--wine:not(.promo--no-image),
body.page-wine .promo:not(.promo--no-image),
body.page-menu .categories--rich .cat-card:not(.cat-card--set-media),
body.page-menu--hubs .categories--rich .cat-card:not(.cat-card--set-media) {
    overflow: hidden !important;
    position: relative !important;
}

/* (3) <picture> wrapper sits on top of the figure with the same box. ------- */
body.page-menu .promo:not(.promo--no-image) .promo-photo > picture,
body.page-wine .promo:not(.promo--no-image) .promo-photo > picture,
body.page-menu .categories--rich .cat-photo > picture,
body.page-menu--hubs .categories--rich .cat-photo > picture,
body.page-menu--hubs .reco-photo > picture,
body.page-menu .item-view-photo > picture,
body.page-menu--item .item-view-photo > picture {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* (4) <img> = strictly inside the box, cover, centered. ------------------- */
body.page-menu .promo:not(.promo--no-image) .promo-photo .promo-photo-img,
body.page-wine .promo:not(.promo--no-image) .promo-photo .promo-photo-img,
body.page-menu .categories--rich .cat-photo .cat-photo-img,
body.page-menu--hubs .categories--rich .cat-photo .cat-photo-img,
body.page-menu--hubs .reco-photo .reco-photo-img,
body.page-menu .item-view-photo .item-view-img,
body.page-menu--item .item-view-photo .item-view-img {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center center !important;
    box-sizing: border-box;
}

/* (5) Verticals (bottles / glasses / cocktails / spirits / draft) — center
       the crop window so the bottle body sits in the visible frame, not the
       table or background. Scoped by image path, not global. -------------- */
body.page-menu .promo.promo--wine:not(.promo--no-image) .promo-photo .promo-photo-img,
body.page-wine .promo:not(.promo--no-image) .promo-photo .promo-photo-img,
body.page-menu .promo.promo--compact .promo-photo .promo-photo-img[src*="/wine/"],
body.page-menu .promo.promo--compact .promo-photo .promo-photo-img[src*="/draft_beer/"],
body.page-menu .promo.promo--compact .promo-photo .promo-photo-img[src*="/bottle_beer/"],
body.page-menu .promo.promo--compact .promo-photo .promo-photo-img[src*="/cocktails/"],
body.page-menu .promo.promo--compact .promo-photo .promo-photo-img[src*="/spirits/"] {
    object-position: center center !important;
}

/* (6) Belt-and-braces: explicitly DO NOT touch generated_sets media. The
       selectors below repeat their existing behavior so nothing here can
       silently override the sets pipeline. ---------------------------------- */
body.page-menu--hubs .menu-set-cards .cat-card.cat-card--set-media,
body.page-menu--hubs .menu-set-cards .cat-card.cat-card--set-media .set-entry-media,
body.page-menu--hubs .menu-set-cards .cat-card.cat-card--set-media .set-entry-media img,
.set-card.set-card--has-media,
.set-card-media,
.set-card-media img {
    /* no override here on purpose — sets keep their existing cascade */
}
/* === END APEX FINAL FIX — MENU CARD IMAGE BOX FIT ===================== */

/* APEX HOTFIX — MENU IMAGES STAY INSIDE CARD BOX */
body.page-menu img,
body.page-menu .cat-card img,
body.page-menu .item-card img,
body.page-menu .menu-card img,
body.page-menu .dish-card img,
body.page-menu .product-card img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  margin: 0 !important;
  transform: none !important;
}

body.page-menu .cat-card,
body.page-menu .item-card,
body.page-menu .menu-card,
body.page-menu .dish-card,
body.page-menu .product-card,
body.page-menu .card-media,
body.page-menu .item-photo,
body.page-menu .menu-item-photo,
body.page-menu .dish-photo,
body.page-menu .product-photo {
  overflow: hidden !important;
}

body.page-menu .card-media img,
body.page-menu .item-photo img,
body.page-menu .menu-item-photo img,
body.page-menu .dish-photo img,
body.page-menu .product-photo img {
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
}

/* APEX HOTFIX NARROW — restore non-card images on /menu --------------------
   The earlier `body.page-menu img { … cover … }` block also caught chrome
   imagery (logo, lang flags, PWA install icon, QR, install icon, share/close
   svgs inside <img>, etc.). Reset those to their natural sizing here.
   Card images stay fit because `.promo-photo .promo-photo-img`,
   `.cat-photo .cat-photo-img`, `.item-view-img`, `.reco-photo-img` and
   `.card-media img`/`.item-photo img`/`.dish-photo img`/`.product-photo img`
   selectors have higher (or equal-and-later) specificity than these resets
   when matched in their card context.
   --------------------------------------------------------------------- */

body.page-menu .brand img,
body.page-menu .brand-mark img,
body.page-menu .brand-logo img,
body.page-menu .logo img,
body.page-menu header img,
body.page-menu .topbar img,
body.page-menu .lang-switcher img,
body.page-menu .language img,
body.page-menu .lang img,
body.page-menu .flag img,
body.page-menu img.flag,
body.page-menu img.lang-flag,
body.page-menu .pwa-install img,
body.page-menu .pwa-install-icon img,
body.page-menu .pwa-install-close img,
body.page-menu .pwa img,
body.page-menu img[src*="pwa-icon"],
body.page-menu img[src*="apple-touch-icon"],
body.page-menu img[src*="qr-"],
body.page-menu img[src*="-qr"],
body.page-menu .home-qr-img,
body.page-menu .home-hero-qr img,
body.page-menu .qr img,
body.page-menu img.qr,
body.page-menu img[alt="qr"],
body.page-menu .reservation-cta img,
body.page-menu .guest-card img,
body.page-menu .menu-list-cta img,
body.page-menu .item-view-cta img,
body.page-menu .icon img,
body.page-menu img.icon,
body.page-menu button img,
body.page-menu a > img.icon {
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: initial !important;
  object-position: initial !important;
  position: static !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  margin: revert !important;
}

/* ============================================================================
   APEX FINAL CARD IMAGE FIT — NOW
   ----------------------------------------------------------------------------
   Scope: ONLY the regular menu/item/category card photo families on /menu:
     .promo-photo / .promo-photo-img       — item & wine item cards
     .cat-photo   / .cat-photo-img         — category hub cards
     .item-view-photo / .item-view-img     — item detail view
     .reco-photo  / .reco-photo-img        — recommendation cards
   NOT TOUCHED — set cards stay exactly as they are:
     .set-card, .set-card-media, .set-entry-media,
     .cat-card--set-media, .sets-view  (none of these appear in any selector
     below).
   No global img {} rule. File-tail position = highest precedence.
   ========================================================================= */

/* photo container: clip strictly inside the card, no internal air ---------- */
body.page-menu .promo:not(.promo--no-image) .promo-photo,
body.page-wine .promo:not(.promo--no-image) .promo-photo,
body.page-menu .categories--rich .cat-photo,
body.page-menu--hubs .categories--rich .cat-photo,
body.page-menu--hubs .reco-photo,
body.page-menu .item-view-photo,
body.page-menu--item .item-view-photo {
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* card wrapper also clips (so hover-zoom never paints past the border) ----- */
body.page-menu .promo.promo--compact,
body.page-menu .promo.promo--wine:not(.promo--no-image),
body.page-wine .promo:not(.promo--no-image),
body.page-menu .categories--rich .cat-card:not(.cat-card--set-media),
body.page-menu--hubs .categories--rich .cat-card:not(.cat-card--set-media) {
  overflow: hidden !important;
  position: relative !important;
}

/* <picture> wrapper anchored to the figure box ----------------------------- */
body.page-menu .promo:not(.promo--no-image) .promo-photo > picture,
body.page-wine .promo:not(.promo--no-image) .promo-photo > picture,
body.page-menu .categories--rich .cat-photo > picture,
body.page-menu--hubs .categories--rich .cat-photo > picture,
body.page-menu--hubs .reco-photo > picture,
body.page-menu .item-view-photo > picture,
body.page-menu--item .item-view-photo > picture {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* the <img> itself = absolute, fully inside the box, centered cover -------- */
body.page-menu .promo:not(.promo--no-image) .promo-photo .promo-photo-img,
body.page-wine .promo:not(.promo--no-image) .promo-photo .promo-photo-img,
body.page-menu .categories--rich .cat-photo .cat-photo-img,
body.page-menu--hubs .categories--rich .cat-photo .cat-photo-img,
body.page-menu--hubs .reco-photo .reco-photo-img,
body.page-menu .item-view-photo .item-view-img,
body.page-menu--item .item-view-photo .item-view-img {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center center !important;
}
/* === END APEX FINAL CARD IMAGE FIT — NOW =================================== */

/* =========================================================
   STAGE 4 — HOME CARDS DIRECT BACKGROUND IMAGE FIX
   Scope: home page only.
   The inline style on each card now carries the full
   `background-image: linear-gradient(...), linear-gradient(...), url(...)`
   stack directly on the element. This block kills the old ::before
   / ::after photo+overlay layers so nothing covers the real image.
   ========================================================= */

.page-home .cat-card,
.page-home .pivska-card,
.page-home .promo-banner {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.page-home .cat-card::before,
.page-home .pivska-card::before,
.page-home .promo-banner::before {
  background-image: none !important;
}

.page-home .cat-card::after,
.page-home .pivska-card::after,
.page-home .promo-banner::after {
  background: none !important;
}

.page-home .cat-card > *,
.page-home .pivska-card > *,
.page-home .promo-banner > * {
  position: relative;
  z-index: 2;
}

.page-home .cat-title,
.page-home .beer-card-title,
.page-home .promo-title,
.page-home .cat-subtitle,
.page-home .beer-card-meta,
.page-home .promo-copy {
  text-shadow: 0 2px 8px rgba(0,0,0,.9);
}

/* =========================================================
   STAGE 5 — HOME CARDS VISUAL POLISH
   warm amber · dark wood · brass · German beerhouse
   Scope: home page only. Does not touch inline background-image,
   paths, backend, menu.json, PM2 architecture.
   ========================================================= */

/* --- Universal home card chrome: brass border + soft shadow + lift --- */
body.page-home .cat-card,
body.page-home .pivska-card,
body.page-home .promo-banner {
  border: 1px solid rgba(232, 196, 122, .22) !important;
  box-shadow:
    0 1px 0 rgba(255, 230, 180, .06) inset,
    0 14px 36px rgba(0, 0, 0, .42) !important;
  transition: transform .35s cubic-bezier(.2,.6,.36,1),
              border-color .25s ease,
              box-shadow .35s ease,
              filter .35s ease;
  filter: saturate(1.08) contrast(1.02);
}
body.page-home .cat-card:hover,
body.page-home .pivska-card:hover,
body.page-home .promo-banner:hover {
  border-color: rgba(232, 196, 122, .55) !important;
  box-shadow:
    0 1px 0 rgba(255, 230, 180, .10) inset,
    0 22px 56px rgba(0, 0, 0, .55),
    0 0 0 1px rgba(232, 196, 122, .14) !important;
  transform: translateY(-2px);
  filter: saturate(1.14) contrast(1.05);
}
body.page-home .cat-card:active,
body.page-home .pivska-card:active,
body.page-home .promo-banner:active { transform: translateY(0); }

/* --- PRIMARY 6 cards: keep 3×2 grid on every desktop (cancel the
       1700px+ 1×6 row — single row looks stretched on the kiosk) --- */
@media (min-width: 1101px) {
  body.page-home .categories-row .cards-primary.categories {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(14px, 1vw, 22px) !important;
  }
  body.page-home .cards-primary .cat-card--primary {
    aspect-ratio: 16 / 9;
    padding: clamp(22px, 1.5vw, 30px);
  }
}
@media (min-width: 1700px) {
  body.page-home .categories-row .cards-primary.categories {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  body.page-home .cards-primary .cat-card--primary {
    aspect-ratio: 16 / 9;
  }
}
body.page-home .cards-primary .cat-title {
  letter-spacing: .02em;
  text-shadow: 0 2px 10px rgba(0,0,0,.88), 0 0 1px rgba(0,0,0,.4);
}
body.page-home .cards-primary .cat-sub {
  color: rgba(246, 231, 196, .86);
  letter-spacing: .01em;
}

/* --- PIVSKA SHOWCASE: leave grid layout to the APEX FINAL FIX 2026-05-19
       block (6 equal cards in one row: title acts as the first card).
       Stage 5 only adds the brass framing on the title-block below. --- */
body.page-home .pivska-title-block {
  border: 1px solid rgba(232, 196, 122, .22);
  border-radius: 6px;
  padding: clamp(22px, 1.6vw, 32px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(8px, .8vw, 14px);
  background:
    linear-gradient(160deg, rgba(78, 50, 22, .55), rgba(20, 12, 6, .85)),
    radial-gradient(120% 80% at 30% 20%, rgba(232, 196, 122, .14), transparent 60%);
}
body.page-home .pivska-cta {
  color: var(--accent-2);
  border: 1px solid rgba(232, 196, 122, .55);
}

/* --- PROMO BANNERS: 2 + wide combo (50/50 + full-width row) --- */
@media (min-width: 1101px) {
  body.page-home .promo-banners {
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas: "a b" "c c" !important;
    gap: clamp(16px, 1.2vw, 24px) !important;
  }
  body.page-home .promo-menu-dana  { grid-area: a; }
  body.page-home .promo-chef       { grid-area: b; }
  body.page-home .promo-combo-card { grid-area: c; aspect-ratio: 32 / 7; }
}
/* CTA on promo: brass pill, readable price+button */
body.page-home .promo-banner-cta {
  background: linear-gradient(180deg, rgba(232, 196, 122, .20), rgba(232, 196, 122, .06)) !important;
  border: 1px solid rgba(232, 196, 122, .55) !important;
  color: #f4d99a !important;
}
body.page-home .promo-banner:hover .promo-banner-cta {
  background: linear-gradient(180deg, #e8c47a 0%, #b88a44 100%) !important;
  color: #1a1108 !important;
  border-color: rgba(232, 196, 122, .85) !important;
}
body.page-home .promo-banner-price {
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
}

/* --- SECONDARY tighter typography --- */
body.page-home .cards-secondary .cat-card--secondary {
  border-radius: 6px;
}
body.page-home .cards-secondary .cat-title {
  letter-spacing: .02em;
}

/* --- DESKTOP FIT (1700px+): trim hero so primary + pivska reach
       above the fold on 1920×1080 without cropping --- */
@media (min-width: 1700px) {
  body.page-home .home-hero {
    min-height: clamp(280px, 28vh, 360px) !important;
    padding: clamp(24px, 2.2vw, 44px) clamp(24px, 4vw, 80px) !important;
  }
  body.page-home .home-section-header {
    padding-top: clamp(10px, 1.2vw, 20px);
    padding-bottom: 2px;
  }
}

/* --- MOBILE: tighten cards & shadows --- */
@media (max-width: 540px) {
  body.page-home .cat-card,
  body.page-home .pivska-card,
  body.page-home .promo-banner {
    box-shadow: 0 8px 22px rgba(0, 0, 0, .42) !important;
  }
}

/* =========================================================
   STAGE 6 — HOME FINAL COMPACT POLISH
   Tighten hero · slim pivska title · highlight combo CTA.
   Scope: home page only. No HTML/template/photo-path/backend changes.
   ========================================================= */

/* --- 1. HERO compaction on large kiosk (≥1700px) and HD (≥1101px) --- */
@media (min-width: 1101px) {
  body.page-home .home-hero {
    min-height: clamp(240px, 24vh, 320px) !important;
    padding: clamp(20px, 1.8vw, 36px) clamp(24px, 4vw, 80px) !important;
  }
  body.page-home .home-hero-content {
    gap: clamp(6px, .6vw, 12px) !important;
    padding: clamp(8px, 1.1vw, 16px) 0 !important;
  }
  body.page-home .home-hero-title {
    font-size: clamp(40px, 4.4vw, 78px) !important;
    line-height: .96;
  }
  body.page-home .home-hero-eyebrow {
    font-size: clamp(10px, .8vw, 13px);
    letter-spacing: .26em;
  }
  body.page-home .home-hero-tagline {
    font-size: clamp(13px, 1vw, 17px);
    margin-top: 0;
  }
  body.page-home .home-hero-cta {
    margin-top: clamp(8px, .8vw, 14px) !important;
  }
}
@media (min-width: 1700px) {
  body.page-home .home-hero {
    min-height: clamp(220px, 22vh, 300px) !important;
    padding: clamp(18px, 1.6vw, 32px) clamp(24px, 4vw, 80px) !important;
  }
  body.page-home .home-section-header {
    padding-top: clamp(8px, .9vw, 16px) !important;
    padding-bottom: 0 !important;
  }
}

/* --- 2. PIVSKA title-block tighter typography (the column width is
       managed by the APEX FINAL FIX 6-equal-cards layout, so we only
       adjust internal spacing and font sizes here). --- */
@media (min-width: 1101px) {
  body.page-home .pivska-title-block {
    padding: clamp(18px, 1.3vw, 26px) !important;
    gap: clamp(6px, .55vw, 10px) !important;
  }
  body.page-home .pivska-headline {
    font-size: clamp(22px, 1.8vw, 30px) !important;
    line-height: 1.04 !important;
    margin: 0 0 12px !important;
  }
  body.page-home .pivska-sub {
    font-size: clamp(11px, .82vw, 13px) !important;
    line-height: 1.42 !important;
    margin-bottom: 14px !important;
  }
  body.page-home .pivska-cta {
    padding: clamp(8px, .8vw, 12px) clamp(14px, 1.2vw, 20px) !important;
    font-size: clamp(11px, .85vw, 13px) !important;
    height: auto !important;
    min-height: auto !important;
  }
}

/* --- 3. COMBO strip CTA — bright brass pill, right-aligned within column --- */
body.page-home .promo-combo-card .promo-banner-content {
  max-width: 70%;
}
body.page-home .promo-combo-card .promo-banner-cta {
  align-self: flex-end !important;
  margin-top: clamp(10px, 1vw, 16px);
  margin-right: 0;
  padding: clamp(12px, 1.1vw, 16px) clamp(22px, 1.8vw, 30px) !important;
  font-size: clamp(12px, .95vw, 15px) !important;
  font-weight: 800 !important;
  letter-spacing: .22em !important;
  background: linear-gradient(180deg, #efc878 0%, #c69642 100%) !important;
  color: #1a1108 !important;
  border: 1px solid rgba(247, 220, 156, .85) !important;
  box-shadow:
    0 1px 0 rgba(255, 244, 210, .35) inset,
    0 6px 18px rgba(0, 0, 0, .42),
    0 0 0 1px rgba(247, 220, 156, .15);
  text-shadow: none;
}
body.page-home .promo-combo-card:hover .promo-banner-cta {
  background: linear-gradient(180deg, #f6da9a 0%, #d4a85f 100%) !important;
  box-shadow:
    0 1px 0 rgba(255, 244, 210, .45) inset,
    0 10px 26px rgba(232, 196, 122, .35),
    0 0 0 1px rgba(247, 220, 156, .35);
}

/* combo-card content: keep tight stack but allow CTA to occupy own row */
body.page-home .promo-combo-card .promo-banner-content {
  padding: clamp(20px, 2vw, 36px) clamp(24px, 2.4vw, 44px) !important;
  gap: clamp(6px, .7vw, 12px) !important;
}
body.page-home .promo-combo-card .promo-banner-title {
  font-size: clamp(28px, 2.8vw, 52px) !important;
}
body.page-home .promo-combo-card .promo-banner-meta {
  font-size: clamp(12px, .95vw, 15px) !important;
  max-width: 56ch;
}
body.page-home .promo-combo-card .promo-banner-price {
  font-size: clamp(22px, 2vw, 36px) !important;
}

/* --- 4. Trim spacing between section bands at desktop to fit
       hero + 6 primary + most of pivska above the 1080 fold --- */
@media (min-width: 1700px) {
  body.page-home .categories-row .cards-primary.categories {
    margin-bottom: clamp(8px, .8vw, 16px) !important;
  }
  body.page-home .pivska-showcase {
    margin-top: clamp(10px, 1vw, 20px) !important;
  }
}

/* ============================================================
   STAGE 11 — WINE CARD IMAGE FIT (2026-05-21)
   Wine source PNGs are tall portraits (~1100x1450, ~3:4).
   The shared item-card frame is fixed at aspect-ratio 4/3 with
   object-fit:cover !important applied globally for promo-photo-img
   (kiosk.css L10060+). For wines that cover-crop shows only the
   middle horizontal strip of the bottle — neck + base are cut,
   so the bottle "looks too zoomed in / overflowing".
   Fix: scope a contain-fit override to the wine section only
   (template renders <section data-section="wine">). Other
   categories keep the existing cover crop unchanged.
   ============================================================ */
body.page-menu .menu-section[data-section="wine"] .promo.promo--compact .promo-photo,
body.page-menu .menu-section[data-section="wine"] .promo.promo--compact .promo-photo > picture {
    overflow: hidden;
}
body.page-menu .menu-section[data-section="wine"] .promo.promo--compact .promo-photo-img {
    object-fit: contain !important;
    object-position: center !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55));
}
@media (max-width: 1024px) {
  body.page-menu .menu-section[data-section="wine"] .promo.promo--compact .promo-photo-img {
    padding: 6px !important;
  }
}
@media (max-width: 640px) {
  body.page-menu .menu-section[data-section="wine"] .promo.promo--compact .promo-photo-img {
    padding: 4px !important;
  }
}

/* ============================================================
   STAGE 12 — WINE CARD COMPACT HEIGHT (2026-05-21)
   Drop the shared 326px min-height + 4/3 frame for wine only,
   so the card hugs the contain-fit bottle silhouette.
   ============================================================ */
body.page-menu .menu-section[data-section="wine"] .promo.promo--compact {
  min-height: unset !important;
  height: auto !important;
}
body.page-menu .menu-section[data-section="wine"] .promo.promo--compact .promo-photo {
  aspect-ratio: 16 / 10 !important;
  min-height: 0 !important;
  height: auto !important;
}
body.page-menu .menu-section[data-section="wine"] .promo.promo--compact .promo-photo-img {
  padding: 4px !important;
  max-height: 100% !important;
}
@media (min-width: 1101px) {
  body.page-menu .menu-section[data-section="wine"] .promo.promo--compact .promo-photo {
    aspect-ratio: 16 / 9 !important;
  }
}


/* STAGE 14 — WINE RESTORE 4x3 PHOTO FRAME */
body.page-menu .menu-section[data-section="wine"] .promo.promo--compact .promo-photo {
  aspect-ratio: 4 / 3 !important;
  min-height: 0 !important;
  height: auto !important;
}

body.page-menu .menu-section[data-section="wine"] .promo.promo--compact .promo-photo-img {
  object-fit: contain !important;
  object-position: center !important;
  padding: 6px !important;
  max-height: 100% !important;
}

/* STAGE 15 — WINE 6 CARDS PER ROW */
@media (min-width: 1101px) {
  body.page-menu .menu-section[data-section="wine"] .promos.promos--compact {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  body.page-menu .menu-section[data-section="wine"] .promo.promo--compact {
    border-radius: 10px !important;
  }

  body.page-menu .menu-section[data-section="wine"] .promo.promo--compact .promo-photo {
    aspect-ratio: 4 / 3 !important;
  }

  body.page-menu .menu-section[data-section="wine"] .promo.promo--compact .promo-photo-img {
    object-fit: contain !important;
    padding: 4px !important;
    max-height: 100% !important;
  }

  body.page-menu .menu-section[data-section="wine"] .promo.promo--compact .promo-content {
    padding: 6px 8px 8px !important;
  }

  body.page-menu .menu-section[data-section="wine"] .promo.promo--compact .promo-title {
    font-size: 10px !important;
    line-height: 1.15 !important;
  }

  body.page-menu .menu-section[data-section="wine"] .promo.promo--compact .promo-price {
    right: 7px !important;
    bottom: 6px !important;
    font-size: 9px !important;
  }
}

/* STAGE 16 — WINE SQUARE CARDS WITH PRICE OVERLAY */
@media (min-width: 1101px) {
  body.page-menu .menu-section[data-section="wine"] .promos.promos--compact {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

body.page-menu .menu-section[data-section="wine"] .promo.promo--compact {
  position: relative !important;
  aspect-ratio: 1 / 1 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 10px !important;
}

body.page-menu .menu-section[data-section="wine"] .promo.promo--compact .promo-photo {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

body.page-menu .menu-section[data-section="wine"] .promo.promo--compact .promo-photo > picture {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

body.page-menu .menu-section[data-section="wine"] .promo.promo--compact .promo-photo-img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
  filter: none !important;
}

body.page-menu .menu-section[data-section="wine"] .promo.promo--compact .promo-content,
body.page-menu .menu-section[data-section="wine"] .promo.promo--compact .promo-footer {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 3 !important;
  padding: 28px 8px 8px !important;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.78) 48%, rgba(0,0,0,.94) 100%) !important;
  pointer-events: none !important;
}

body.page-menu .menu-section[data-section="wine"] .promo.promo--compact .promo-title {
  display: block !important;
  color: #fff7d2 !important;
  font-size: 10px !important;
  line-height: 1.12 !important;
  margin: 0 !important;
  padding-right: 42px !important;
  text-shadow: 0 2px 7px rgba(0,0,0,.95) !important;
}

body.page-menu .menu-section[data-section="wine"] .promo.promo--compact .promo-price {
  display: inline-flex !important;
  position: absolute !important;
  right: 7px !important;
  bottom: 7px !important;
  z-index: 4 !important;
  min-width: 34px !important;
  height: 18px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 7px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(226, 177, 82, .75) !important;
  background: rgba(30, 22, 10, .92) !important;
  color: #ffd86a !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-shadow: none !important;
}

@media (max-width: 1100px) {
  body.page-menu .menu-section[data-section="wine"] .promos.promos--compact {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  body.page-menu .menu-section[data-section="wine"] .promos.promos--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ============================================================
   STAGE 17 — HARD PORTRAIT PANEL FIT 52x94 (2026-05-28)
   Real panel: 52cm × 94cm (aspect 0.553) — portrait.
   Target viewport: 720×1280 primary; 768×1366, 800×1440, 1080×1920 secondary.
   Phone regression: 414×896 (also included, gets more compact — acceptable).
   Scope guard: (orientation: portrait) AND (max-aspect-ratio: 0.65).
   Wine square cards (data-section="wine") are EXPLICITLY EXCLUDED — Stage 16
   overlay block stays the source of truth for wine layout.
   ============================================================ */
@media (orientation: portrait) and (max-aspect-ratio: 0.65) {

  :root {
    --gap: clamp(8px, 1.4vw, 14px) !important;
    --pad-x: clamp(10px, 1.6vw, 18px) !important;
    --pad-y: clamp(10px, 1.6vw, 18px) !important;
  }

  body.page-home,
  body.page-menu,
  .kiosk,
  .container { overflow-x: hidden !important; }

  .container { padding: 10px !important; max-width: 100% !important; }
  .kiosk { gap: 12px !important; padding-top: 54px !important; }

  /* ---------- TOP NAV / TOPBAR ---------- */
  .top-nav { top: 8px !important; left: 8px !important; padding: 3px !important; gap: 3px !important; }
  .top-nav-link { padding: 6px 9px !important; font-size: 11px !important; }

  .page-topbar { padding: 8px 10px !important; }
  .topbar-nav { gap: 6px !important; }
  .topbar-btn { padding: 6px 10px !important; font-size: 11px !important; }
  .topbar-center { gap: 0 !important; }
  .topbar-brand { font-size: 16px !important; line-height: 1.1 !important; }
  .topbar-sub { font-size: 9px !important; letter-spacing: .12em !important; }
  .topbar-page { font-size: 10px !important; }

  /* ---------- LANGUAGE SWITCHER (13 langs, no clipping) ---------- */
  .lang-switch,
  .topbar-lang,
  .home-hero-lang,
  .res-topright .lang-switch {
    position: static !important;
    gap: 4px !important;
    padding: 4px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    max-width: 100% !important;
    overflow: visible !important;
  }
  .lang-switch button,
  .topbar-lang button,
  .home-hero-lang button,
  .lang-switch .lang-btn,
  .topbar-lang .lang-btn,
  .home-hero-lang .lang-btn {
    min-width: 30px !important;
    padding: 4px 7px !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
    border-radius: 7px !important;
    letter-spacing: .04em !important;
  }

  /* ---------- HOME ---------- */
  body.page-home .home-hero {
    min-height: 0 !important;
    margin: 0 0 12px !important;
    padding: 14px 12px !important;
    gap: 10px !important;
  }
  body.page-home .home-hero-content { gap: 6px !important; max-width: 100% !important; }
  body.page-home .home-hero-eyebrow { font-size: 10px !important; letter-spacing: .14em !important; }
  body.page-home .home-hero-title {
    font-size: clamp(20px, 5vw, 32px) !important;
    line-height: 1.05 !important;
    margin: 2px 0 !important;
    letter-spacing: .01em !important;
  }
  body.page-home .home-hero-tagline { font-size: 11px !important; line-height: 1.25 !important; }
  body.page-home .home-hero-cta { gap: 8px !important; margin-top: 6px !important; flex-wrap: wrap !important; }
  body.page-home .home-hero-btn {
    padding: 9px 14px !important;
    font-size: 11px !important;
    border-radius: 10px !important;
    min-height: 0 !important;
  }
  body.page-home .home-hero-aside { gap: 8px !important; }
  body.page-home .home-hero-qr { padding: 6px !important; gap: 6px !important; }
  body.page-home .home-hero-qr-label { font-size: 10px !important; }
  body.page-home .home-hero-qr img,
  body.page-home .home-qr-img,
  body.page-home .qr-image { max-width: 96px !important; width: 96px !important; height: auto !important; }

  body.page-home .categories-row { margin: 4px 0 !important; gap: 6px !important; }

  body.page-home .cards-primary,
  body.page-home .cards-secondary,
  body.page-home .categories {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    gap: 10px !important;
    margin: 6px 0 !important;
  }
  body.page-home .cat-card,
  body.page-home .cat-card--primary,
  body.page-home .cat-card--secondary {
    min-height: 0 !important;
    padding: 0 !important;
    aspect-ratio: 4 / 3 !important;
    max-height: 170px !important;
  }
  body.page-home .cat-content {
    position: absolute !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    z-index: 3 !important;
    padding: 18px 8px 8px !important;
    max-height: 32% !important;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.78) 48%, rgba(0,0,0,.94) 100%) !important;
    justify-content: flex-end !important;
  }
  body.page-home .cat-title {
    font-size: clamp(13px, 2.6vw, 18px) !important;
    line-height: 1.08 !important;
    letter-spacing: .04em !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    max-width: 100% !important;
  }
  body.page-home .cat-sub {
    font-size: clamp(9px, 1.6vw, 11px) !important;
    line-height: 1.18 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    max-width: 100% !important;
  }

  /* Home promo banners */
  body.page-home .promo-banners { gap: 8px !important; margin: 6px 0 !important; }
  body.page-home .promo-banner { padding: 10px 12px !important; min-height: 0 !important; border-radius: 12px !important; }
  body.page-home .promo-banner-eyebrow { font-size: 9px !important; letter-spacing: .14em !important; }
  body.page-home .promo-banner-title { font-size: 14px !important; letter-spacing: .04em !important; line-height: 1.1 !important; }
  body.page-home .promo-banner-meta { font-size: 10px !important; line-height: 1.25 !important; }
  body.page-home .promo-banner-price { font-size: 14px !important; }
  body.page-home .promo-banner-cta { font-size: 10px !important; }

  /* ---------- MENU HUB ---------- */
  body.page-menu .categories,
  body.page-menu .categories--rich,
  body.page-menu .menu-set-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    gap: 10px !important;
    margin: 8px 0 !important;
  }
  body.page-menu .cat-card {
    min-height: 0 !important;
    padding: 0 !important;
    aspect-ratio: 4 / 3 !important;
    max-height: 160px !important;
  }
  body.page-menu .cat-photo {
    min-height: 0 !important;
    aspect-ratio: auto !important;
  }
  body.page-menu .cat-body,
  body.page-menu .cat-content {
    padding: 16px 8px 7px !important;
    max-height: 32% !important;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.78) 48%, rgba(0,0,0,.94) 100%) !important;
  }
  body.page-menu .cat-card .cat-title,
  body.page-menu .cat-title {
    font-family: "Playfair Display", "Georgia", serif !important;
    font-size: clamp(12px, 2.2vw, 16px) !important;
    line-height: 1.08 !important;
    letter-spacing: .03em !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  body.page-menu .cat-card .cat-sub,
  body.page-menu .cat-sub {
    font-size: clamp(9px, 1.6vw, 11px) !important;
    line-height: 1.18 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* Section nav tabs */
  body.page-menu .topbar-tabs,
  body.page-menu .menu-tabs,
  body.page-menu .section-tabs,
  body.page-menu .section-nav {
    gap: 4px !important;
    padding: 4px !important;
  }

  /* ---------- MENU SECTIONS (item tiles) — wine EXCLUDED ---------- */
  body.page-menu .menu-section { margin: 8px 0 !important; }
  body.page-menu .menu-section > .cat-title {
    font-size: clamp(16px, 3vw, 22px) !important;
    line-height: 1.1 !important;
    margin: 4px 0 8px !important;
  }
  body.page-menu .promos,
  body.page-menu .promos--compact {
    gap: 10px !important;
  }
  body.page-menu .menu-section:not([data-section="wine"]) .promos--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.page-menu .menu-section:not([data-section="wine"]) .promo.promo--compact {
    min-height: 0 !important;
    border-radius: 10px !important;
  }
  body.page-menu .menu-section:not([data-section="wine"]) .promo.promo--compact .promo-photo {
    aspect-ratio: 4 / 3 !important;
    min-height: 0 !important;
    height: auto !important;
  }
  body.page-menu .menu-section:not([data-section="wine"]) .promo.promo--compact .promo-content {
    padding: 7px 8px 8px !important;
    gap: 4px !important;
  }
  body.page-menu .menu-section:not([data-section="wine"]) .promo.promo--compact .promo-title {
    font-size: clamp(12px, 2.1vw, 15px) !important;
    line-height: 1.1 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  body.page-menu .menu-section:not([data-section="wine"]) .promo.promo--compact .promo-price {
    font-size: 11px !important;
    padding: 2px 7px !important;
    min-width: 0 !important;
    height: auto !important;
    line-height: 1.2 !important;
  }

  /* ---------- ITEM DETAIL VIEW ---------- */
  body.page-menu .item-view { padding: 8px !important; }
  body.page-menu .item-view-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  body.page-menu .item-view-photo {
    aspect-ratio: 4 / 3 !important;
    min-height: 0 !important;
    max-height: 320px !important;
  }
  body.page-menu .item-view-crumb,
  body.page-menu .item-view-crumb-sep { font-size: 10px !important; }
  body.page-menu .item-view-title {
    font-size: clamp(18px, 3.4vw, 26px) !important;
    line-height: 1.1 !important;
  }
  body.page-menu .item-view-desc { font-size: 12px !important; line-height: 1.3 !important; }
  body.page-menu .item-view-row-label { font-size: 10px !important; }
  body.page-menu .item-view-row-value { font-size: 11px !important; line-height: 1.25 !important; }
  body.page-menu .item-view-cta-btn { padding: 9px 14px !important; font-size: 11px !important; }
  body.page-menu .item-view-price { font-size: clamp(16px, 3vw, 22px) !important; }
}

/* Taller portraits (1080×1920, 800×1440): allow a little extra card height
   so the layout doesn't compress into ribbons on big panels. */
@media (orientation: portrait) and (max-aspect-ratio: 0.65) and (min-height: 1400px) {
  body.page-home .cat-card,
  body.page-home .cat-card--primary { max-height: 230px !important; }
  body.page-menu .cat-card { max-height: 220px !important; }
  body.page-home .home-hero-title { font-size: clamp(24px, 4.4vw, 38px) !important; }
  body.page-home .home-hero-tagline { font-size: 13px !important; }
  body.page-home .cat-title { font-size: clamp(15px, 2.2vw, 20px) !important; }
  body.page-menu .cat-title { font-size: clamp(14px, 2vw, 19px) !important; }
  body.page-menu .menu-section:not([data-section="wine"]) .promo.promo--compact .promo-title {
    font-size: clamp(13px, 1.8vw, 17px) !important;
  }
}

/* STAGE 17B — specificity uplift: override existing `body.page-menu--hubs
   .categories.categories--rich { repeat(5,...) !important; height:210px ... }`
   block (~line 14011) and twin rule for `.categories:not(.categories--rich)`
   (~line 13772). Scoped to portrait only. */
@media (orientation: portrait) and (max-aspect-ratio: 0.65) {
  body.page-menu--hubs .categories.categories--rich,
  body.page-menu--hubs .categories:not(.categories--rich) {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    gap: 10px !important;
  }
  body.page-menu--hubs .categories.categories--rich .cat-card,
  body.page-menu--hubs .categories:not(.categories--rich) .cat-card {
    height: auto !important;
    min-height: 0 !important;
    max-height: 170px !important;
    padding: 0 !important;
    aspect-ratio: 4 / 3 !important;
  }
  body.page-menu--hubs .categories.categories--rich .cat-title,
  body.page-menu--hubs .categories:not(.categories--rich) .cat-title {
    font-size: clamp(12px, 2.2vw, 16px) !important;
    line-height: 1.08 !important;
  }
  body.page-menu--hubs .categories.categories--rich .cat-sub,
  body.page-menu--hubs .categories.categories--rich .cat-desc,
  body.page-menu--hubs .categories:not(.categories--rich) .cat-sub {
    font-size: clamp(9px, 1.6vw, 11px) !important;
    line-height: 1.18 !important;
  }
  body.page-menu--hubs .categories.categories--rich .cat-arrow,
  body.page-menu--hubs .categories:not(.categories--rich) .cat-arrow {
    width: 22px !important;
    height: 22px !important;
    right: 8px !important;
    bottom: 8px !important;
  }
  /* Also override the home Stage-4E primary/secondary grids in portrait. */
  body.page-home .categories-row .cards-primary.categories,
  body.page-home .categories-row .cards-secondary.categories {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 0 !important;
  }
}

/* Tall-panel branch: more breathing room on 1080×1920 / 1400+ tall portraits. */
@media (orientation: portrait) and (max-aspect-ratio: 0.65) and (min-height: 1400px) {
  body.page-menu--hubs .categories.categories--rich .cat-card,
  body.page-menu--hubs .categories:not(.categories--rich) .cat-card {
    max-height: 230px !important;
  }
}

/* ============================================================
   STAGE 17C — REAL PORTRAIT PANEL HARD COMPACT FIT (2026-05-28)
   User feedback: Stage 17 visually insufficient on the 52×94 cm
   panel. Force pixel-locked heights, hide subs, beat every legacy
   !important grid override via higher specificity + later source.
   Cache-busted via PM2 restart after this block lands.
   ============================================================ */

/* ───── Primary portrait scope (covers 720×1280, 768×1366, 800×1440,
        1080×1920, 414×896). max-aspect-ratio 0.70 = safety margin. ───── */
@media (orientation: portrait) and (max-aspect-ratio: 0.70) {

  :root {
    --gap: 8px !important;
    --pad-x: 8px !important;
    --pad-y: 8px !important;
  }

  body.page-home,
  body.page-menu,
  .kiosk,
  .container { overflow-x: hidden !important; }
  .container { padding: 8px !important; max-width: 100% !important; }
  .kiosk { gap: 8px !important; padding-top: 50px !important; }

  /* ────── TOPBAR / TOP NAV ────── */
  .top-nav { top: 6px !important; left: 6px !important; padding: 3px !important; gap: 3px !important; }
  .top-nav-link { padding: 5px 8px !important; font-size: 10px !important; }

  .page-topbar { padding: 6px 8px !important; }
  .topbar-nav { gap: 4px !important; }
  .topbar-btn { padding: 5px 9px !important; font-size: 10px !important; }
  .topbar-center { gap: 0 !important; }
  .topbar-brand { font-size: 14px !important; line-height: 1.05 !important; }
  .topbar-sub { font-size: 9px !important; letter-spacing: .10em !important; }
  .topbar-page { font-size: 9px !important; }

  /* ────── LANGUAGE SWITCH (13 langs) ────── */
  html body .lang-switch,
  html body .topbar-lang,
  html body .home-hero-lang,
  html body .res-topright .lang-switch {
    position: static !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 4px 6px !important;
    max-width: 100% !important;
    overflow: visible !important;
  }
  html body .lang-switch button,
  html body .topbar-lang button,
  html body .home-hero-lang button,
  html body .lang-switch .lang-btn,
  html body .topbar-lang .lang-btn,
  html body .home-hero-lang .lang-btn {
    min-width: 26px !important;
    height: 22px !important;
    padding: 0 6px !important;
    font-size: 10px !important;
    line-height: 20px !important;
    border-radius: 6px !important;
    letter-spacing: .03em !important;
  }

  /* ────── HOME HERO — kill 560px min-height ────── */
  body.page-home .home-hero {
    min-height: 0 !important;
    height: auto !important;
    margin: 0 0 8px !important;
    padding: 12px 10px !important;
    gap: 8px !important;
  }
  body.page-home .home-hero-content { gap: 5px !important; max-width: 100% !important; padding: 0 !important; }
  body.page-home .home-hero-eyebrow { font-size: 9px !important; letter-spacing: .12em !important; }
  body.page-home .home-hero-title {
    font-size: 24px !important;
    line-height: 1.02 !important;
    margin: 2px 0 !important;
    letter-spacing: .01em !important;
  }
  body.page-home .home-hero-tagline { font-size: 11px !important; line-height: 1.2 !important; }
  body.page-home .home-hero-cta { gap: 6px !important; margin-top: 4px !important; flex-wrap: wrap !important; }
  body.page-home .home-hero-btn {
    padding: 7px 12px !important;
    font-size: 10px !important;
    border-radius: 9px !important;
    min-height: 0 !important;
    height: auto !important;
  }
  body.page-home .home-hero-aside { gap: 6px !important; }
  body.page-home .home-hero-qr { padding: 5px !important; gap: 4px !important; }
  body.page-home .home-hero-qr-label { font-size: 9px !important; }
  body.page-home .home-hero-qr img,
  body.page-home .home-qr-img,
  body.page-home .qr-image { max-width: 80px !important; width: 80px !important; height: auto !important; }

  /* ────── HOME CATEGORY CARDS — HARD 135px ────── */
  body.page-home .categories-row { margin: 4px 0 !important; gap: 6px !important; padding: 0 !important; }

  /* Beat Stage-4E `body.page-home .categories-row .cards-primary.categories` */
  html body.page-home .cards-primary,
  html body.page-home .cards-secondary,
  html body.page-home .categories,
  html body.page-home .categories-row .cards-primary.categories,
  html body.page-home .categories-row .cards-secondary.categories {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    gap: 8px !important;
    margin: 4px 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html body.page-home .cat-card,
  html body.page-home .cat-card--primary,
  html body.page-home .cat-card--secondary {
    position: relative !important;
    height: 135px !important;
    min-height: 0 !important;
    max-height: 135px !important;
    padding: 0 !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    border-radius: 10px !important;
  }

  /* Photo background fills full card */
  html body.page-home .cat-card::before,
  html body.page-home .cat-card .cat-photo {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    transform: none !important;
    z-index: 1 !important;
  }

  /* Text strip — bottom-anchored, max 36px tall */
  html body.page-home .cat-card .cat-content {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    height: auto !important;
    max-height: 36px !important;
    min-height: 0 !important;
    padding: 18px 8px 6px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    gap: 0 !important;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.80) 50%, rgba(0,0,0,.94) 100%) !important;
    z-index: 5 !important;
  }
  html body.page-home .cat-card .cat-title {
    font-family: "Playfair Display", "Georgia", serif !important;
    font-size: 13px !important;
    line-height: 1.05 !important;
    letter-spacing: .03em !important;
    margin: 0 !important;
    max-height: 28px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    color: #fff7d2 !important;
    text-shadow: 0 2px 6px rgba(0,0,0,.9) !important;
  }
  html body.page-home .cat-card .cat-sub { display: none !important; }
  html body.page-home .cat-card .cat-arrow { width: 20px !important; height: 20px !important; right: 6px !important; bottom: 6px !important; }

  /* ────── HOME PROMO BANNERS — defeat the 12k-line page-home overrides ────── */
  html body.page-home .promo-banners {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 6px 0 !important;
    padding: 0 !important;
  }
  html body.page-home .promo-banner,
  html body.page-home .promo-banners .promo-banner,
  html body.page-home .combo-strip,
  html body.page-home .promo-banners .combo-strip,
  html body.page-home .promo-banners .combo-strip--card {
    height: 88px !important;
    min-height: 88px !important;
    max-height: 88px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 10px !important;
    width: 100% !important;
  }
  html body.page-home .promo-banner-content,
  html body.page-home .combo-strip-content {
    padding: 8px 10px !important;
    height: 100% !important;
  }
  html body.page-home .promo-banner-eyebrow { font-size: 8px !important; letter-spacing: .10em !important; }
  html body.page-home .promo-banner-title,
  html body.page-home .combo-strip-title { font-size: 12px !important; line-height: 1.02 !important; margin-bottom: 2px !important; }
  html body.page-home .promo-banner-meta,
  html body.page-home .combo-strip-desc { font-size: 9px !important; line-height: 1.12 !important; max-width: 100% !important; }
  html body.page-home .promo-banner-price,
  html body.page-home .combo-strip-price { font-size: 12px !important; margin-top: 2px !important; }
  html body.page-home .promo-banner-cta,
  html body.page-home .combo-strip-cta { font-size: 9px !important; padding: 4px 9px !important; }

  /* ────── MENU HUB — HARD 122px (beats 210px legacy 5-col rule) ────── */
  html body.page-menu--hubs .categories.menu-set-cards,
  html body.page-menu--hubs .categories:not(.categories--rich):not(.menu-set-cards),
  html body.page-menu--hubs .categories.categories--rich,
  html body.page-menu .categories,
  html body.page-menu .categories--rich {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 6px 0 !important;
    padding: 0 !important;
  }

  html body.page-menu .cat-card,
  html body.page-menu--hubs .categories.categories--rich .cat-card,
  html body.page-menu--hubs .categories:not(.categories--rich) .cat-card,
  html body.page-menu--hubs .menu-set-cards .cat-card {
    position: relative !important;
    height: 122px !important;
    min-height: 0 !important;
    max-height: 122px !important;
    padding: 0 !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    border-radius: 10px !important;
  }

  /* Photo fills full card */
  html body.page-menu .cat-card .cat-photo,
  html body.page-menu--hubs .categories.categories--rich .cat-card .cat-photo,
  html body.page-menu--hubs .categories:not(.categories--rich) .cat-card .cat-photo {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    z-index: 1 !important;
    border-radius: 10px !important;
  }
  html body.page-menu .cat-card .cat-photo > picture,
  html body.page-menu .cat-card .cat-photo > img,
  html body.page-menu .cat-card .cat-photo-img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  /* Text strip bottom-only */
  html body.page-menu .cat-card .cat-body,
  html body.page-menu .cat-card .cat-content,
  html body.page-menu--hubs .categories.categories--rich .cat-card .cat-body,
  html body.page-menu--hubs .categories.categories--rich .cat-card .cat-content,
  html body.page-menu--hubs .categories:not(.categories--rich) .cat-card .cat-body,
  html body.page-menu--hubs .categories:not(.categories--rich) .cat-card .cat-content {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    height: auto !important;
    max-height: 32px !important;
    min-height: 0 !important;
    padding: 16px 8px 5px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    gap: 0 !important;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.80) 50%, rgba(0,0,0,.94) 100%) !important;
    z-index: 5 !important;
  }
  html body.page-menu .cat-card .cat-title,
  html body.page-menu--hubs .categories.categories--rich .cat-card .cat-title,
  html body.page-menu--hubs .categories:not(.categories--rich) .cat-card .cat-title {
    font-family: "Playfair Display", "Georgia", serif !important;
    font-size: 13px !important;
    line-height: 1.05 !important;
    letter-spacing: .02em !important;
    margin: 0 !important;
    max-height: 28px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    color: #fff7d2 !important;
    text-shadow: 0 2px 6px rgba(0,0,0,.9) !important;
  }
  html body.page-menu .cat-card .cat-sub,
  html body.page-menu .cat-card .cat-desc,
  html body.page-menu--hubs .categories.categories--rich .cat-card .cat-sub,
  html body.page-menu--hubs .categories.categories--rich .cat-card .cat-desc,
  html body.page-menu--hubs .categories:not(.categories--rich) .cat-card .cat-sub { display: none !important; }
  html body.page-menu .cat-card .cat-arrow,
  html body.page-menu--hubs .categories.categories--rich .cat-card .cat-arrow,
  html body.page-menu--hubs .categories:not(.categories--rich) .cat-card .cat-arrow {
    width: 18px !important;
    height: 18px !important;
    right: 5px !important;
    bottom: 5px !important;
  }

  /* ────── SECTION VIEW item tiles (NOT wine) ────── */
  body.page-menu .menu-section { margin: 6px 0 !important; }
  body.page-menu .menu-section > .cat-title,
  body.page-menu .menu-section .item-view-crumbs + .cat-title {
    font-size: 18px !important;
    line-height: 1.08 !important;
    margin: 4px 0 6px !important;
    color: var(--accent-2, #f0d28b) !important;
  }
  body.page-menu .promos,
  body.page-menu .promos--compact { gap: 8px !important; }
  html body.page-menu .menu-section:not([data-section="wine"]) .promos--compact {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  html body.page-menu .menu-section:not([data-section="wine"]) .promo.promo--compact {
    position: relative !important;
    height: 135px !important;
    min-height: 0 !important;
    max-height: 135px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }
  html body.page-menu .menu-section:not([data-section="wine"]) .promo.promo--compact .promo-photo {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html body.page-menu .menu-section:not([data-section="wine"]) .promo.promo--compact .promo-photo > picture,
  html body.page-menu .menu-section:not([data-section="wine"]) .promo.promo--compact .promo-photo-img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    padding: 0 !important;
  }
  html body.page-menu .menu-section:not([data-section="wine"]) .promo.promo--compact .promo-content,
  html body.page-menu .menu-section:not([data-section="wine"]) .promo.promo--compact .promo-footer {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    z-index: 4 !important;
    padding: 18px 8px 6px !important;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.82) 50%, rgba(0,0,0,.96) 100%) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    gap: 2px !important;
  }
  html body.page-menu .menu-section:not([data-section="wine"]) .promo.promo--compact .promo-title {
    font-size: 12px !important;
    line-height: 1.05 !important;
    margin: 0 !important;
    padding-right: 42px !important;
    color: #fff7d2 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-shadow: 0 2px 6px rgba(0,0,0,.9) !important;
  }
  html body.page-menu .menu-section:not([data-section="wine"]) .promo.promo--compact .promo-sub { display: none !important; }
  html body.page-menu .menu-section:not([data-section="wine"]) .promo.promo--compact .promo-price {
    display: inline-flex !important;
    position: absolute !important;
    right: 6px !important;
    bottom: 6px !important;
    z-index: 5 !important;
    min-width: 30px !important;
    height: 18px !important;
    padding: 0 7px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    border: 1px solid rgba(226, 177, 82, .75) !important;
    background: rgba(30, 22, 10, .92) !important;
    color: #ffd86a !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    margin: 0 !important;
  }

  /* ────── ITEM DETAIL VIEW ────── */
  body.page-menu .item-view { padding: 6px !important; }
  body.page-menu .item-view-grid { grid-template-columns: 1fr !important; gap: 8px !important; }
  body.page-menu .item-view-photo { aspect-ratio: 4 / 3 !important; min-height: 0 !important; max-height: 280px !important; }
  body.page-menu .item-view-title { font-size: 20px !important; line-height: 1.08 !important; }
  body.page-menu .item-view-desc { font-size: 11px !important; line-height: 1.25 !important; }
  body.page-menu .item-view-row-label { font-size: 10px !important; }
  body.page-menu .item-view-row-value { font-size: 11px !important; line-height: 1.2 !important; }
  body.page-menu .item-view-cta-btn { padding: 8px 12px !important; font-size: 11px !important; }
  body.page-menu .item-view-price { font-size: 18px !important; }
}

/* ───── Wider portrait panel (>=900px wide): allow 3 cols and slightly
        taller cards (140-150px) so density is right on 1080×1920. ───── */
@media (orientation: portrait) and (max-aspect-ratio: 0.70) and (min-width: 900px) {
  html body.page-home .cards-primary,
  html body.page-home .cards-secondary,
  html body.page-home .categories,
  html body.page-home .categories-row .cards-primary.categories,
  html body.page-home .categories-row .cards-secondary.categories,
  html body.page-menu .categories,
  html body.page-menu .categories--rich,
  html body.page-menu--hubs .categories.menu-set-cards,
  html body.page-menu--hubs .categories:not(.categories--rich):not(.menu-set-cards),
  html body.page-menu--hubs .categories.categories--rich,
  html body.page-menu .menu-section:not([data-section="wine"]) .promos--compact {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  html body.page-home .cat-card,
  html body.page-home .cat-card--primary,
  html body.page-home .cat-card--secondary {
    height: 150px !important;
    max-height: 150px !important;
  }
  html body.page-menu .cat-card,
  html body.page-menu--hubs .categories.categories--rich .cat-card,
  html body.page-menu--hubs .categories:not(.categories--rich) .cat-card {
    height: 140px !important;
    max-height: 140px !important;
  }
  html body.page-menu .menu-section:not([data-section="wine"]) .promo.promo--compact {
    height: 150px !important;
    max-height: 150px !important;
  }
  html body.page-home .promo-banner,
  html body.page-home .promo-banners .promo-banner,
  html body.page-home .combo-strip,
  html body.page-home .promo-banners .combo-strip,
  html body.page-home .promo-banners .combo-strip--card {
    height: 110px !important;
    min-height: 110px !important;
    max-height: 110px !important;
  }
}

/* ───── Mid-sized portrait panels (700..1200 wide) ───── */
@media (min-width: 700px) and (max-width: 1200px) and (orientation: portrait) {
  html body.page-menu .cat-card,
  html body.page-menu--hubs .categories.categories--rich .cat-card { max-height: 145px !important; }
}

/* ============================================================
   STAGE 17D — FORCE 3-4 CARDS PER ROW PORTRAIT (2026-05-28)
   User feedback: Stage 17C 2-col still too sparse.
   Target density:
     720 / 768 / 800 portrait  → 3 cols
     1080+ portrait            → 4 cols
   Beats Stage 17C via later source + html-prefix specificity uplift.
   Wine (data-section="wine") still EXCLUDED — Stage 16 owns it.
   ============================================================ */

/* ===== 700..899 px PORTRAIT — 3 COLUMNS, 96..105px CARDS ===== */
@media (orientation: portrait) and (max-aspect-ratio: 0.70) and (min-width: 700px) and (max-width: 899px) {

  html body.page-home .cards-primary,
  html body.page-home .cards-secondary,
  html body.page-home .categories,
  html body.page-home .categories-row .cards-primary.categories,
  html body.page-home .categories-row .cards-secondary.categories,
  html body.page-menu .categories,
  html body.page-menu .categories--rich,
  html body.page-menu .categories.categories--rich,
  html body.page-menu--hubs .categories.menu-set-cards,
  html body.page-menu--hubs .categories:not(.categories--rich):not(.menu-set-cards),
  html body.page-menu--hubs .categories.categories--rich,
  html body.page-menu .menu-section:not([data-section="wine"]) .promos--compact,
  html body.page-menu .menu-section:not([data-section="wine"]) .promos,
  html body.page-menu .promo-grid,
  html body.page-menu .items-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 4px 0 !important;
    padding: 0 !important;
  }

  html body.page-home .promo-banners {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 4px 0 !important;
    padding: 0 !important;
  }

  /* Card heights (locked) */
  html body.page-home .cat-card,
  html body.page-home .cat-card--primary,
  html body.page-home .cat-card--secondary {
    position: relative !important;
    height: 105px !important;
    min-height: 0 !important;
    max-height: 105px !important;
    padding: 0 !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    border-radius: 8px !important;
  }
  html body.page-menu .cat-card,
  html body.page-menu--hubs .categories.categories--rich .cat-card,
  html body.page-menu--hubs .categories:not(.categories--rich) .cat-card,
  html body.page-menu--hubs .menu-set-cards .cat-card {
    position: relative !important;
    height: 96px !important;
    min-height: 0 !important;
    max-height: 96px !important;
    padding: 0 !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    border-radius: 8px !important;
  }
  html body.page-menu .menu-section:not([data-section="wine"]) .promo,
  html body.page-menu .menu-section:not([data-section="wine"]) .promo.promo--compact {
    position: relative !important;
    height: 100px !important;
    min-height: 0 !important;
    max-height: 100px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 8px !important;
  }

  html body.page-home .promo-banner,
  html body.page-home .promo-banners .promo-banner,
  html body.page-home .combo-strip,
  html body.page-home .promo-banners .combo-strip,
  html body.page-home .promo-banners .combo-strip--card {
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
    padding: 0 !important;
    border-radius: 8px !important;
  }

  /* Text strip — tiny bottom band */
  html body.page-home .cat-card .cat-content,
  html body.page-menu .cat-card .cat-content,
  html body.page-menu .cat-card .cat-body,
  html body.page-menu--hubs .categories.categories--rich .cat-card .cat-body,
  html body.page-menu--hubs .categories.categories--rich .cat-card .cat-content,
  html body.page-menu--hubs .categories:not(.categories--rich) .cat-card .cat-body,
  html body.page-menu--hubs .categories:not(.categories--rich) .cat-card .cat-content,
  html body.page-menu .menu-section:not([data-section="wine"]) .promo .promo-content,
  html body.page-menu .menu-section:not([data-section="wine"]) .promo .promo-footer {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    height: auto !important;
    max-height: 28px !important;
    min-height: 0 !important;
    padding: 14px 5px 4px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    gap: 0 !important;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.82) 50%, rgba(0,0,0,.96) 100%) !important;
    z-index: 5 !important;
  }

  /* Titles */
  html body.page-home .cat-card .cat-title,
  html body.page-menu .cat-card .cat-title,
  html body.page-menu--hubs .categories.categories--rich .cat-card .cat-title,
  html body.page-menu--hubs .categories:not(.categories--rich) .cat-card .cat-title,
  html body.page-menu .menu-section:not([data-section="wine"]) .promo .promo-title {
    font-family: "Playfair Display", "Georgia", serif !important;
    font-size: 11px !important;
    line-height: 1.05 !important;
    letter-spacing: -0.01em !important;
    font-weight: 700 !important;
    margin: 0 !important;
    padding-right: 30px !important;
    max-height: 24px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    color: #fff7d2 !important;
    text-shadow: 0 2px 6px rgba(0,0,0,.9) !important;
  }

  /* Subtitles HIDDEN in dense mode */
  html body.page-home .cat-card .cat-sub,
  html body.page-menu .cat-card .cat-sub,
  html body.page-menu .cat-card .cat-desc,
  html body.page-menu--hubs .categories.categories--rich .cat-card .cat-sub,
  html body.page-menu--hubs .categories.categories--rich .cat-card .cat-desc,
  html body.page-menu--hubs .categories:not(.categories--rich) .cat-card .cat-sub,
  html body.page-menu .menu-section:not([data-section="wine"]) .promo .promo-sub { display: none !important; }

  /* Price compact */
  html body.page-menu .menu-section:not([data-section="wine"]) .promo .promo-price {
    font-size: 9px !important;
    line-height: 1 !important;
    right: 4px !important;
    bottom: 4px !important;
    min-width: 28px !important;
    height: 16px !important;
    padding: 0 6px !important;
  }

  /* Photo fills */
  html body.page-home .cat-card::before,
  html body.page-home .cat-card .cat-photo,
  html body.page-menu .cat-card .cat-photo,
  html body.page-menu .menu-section:not([data-section="wine"]) .promo .promo-photo {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 1 !important;
    background-size: cover !important;
    background-position: center !important;
  }
  html body.page-menu .cat-card .cat-photo > picture,
  html body.page-menu .cat-card .cat-photo > picture > img,
  html body.page-menu .cat-card .cat-photo-img,
  html body.page-menu .menu-section:not([data-section="wine"]) .promo .promo-photo > picture,
  html body.page-menu .menu-section:not([data-section="wine"]) .promo .promo-photo > picture > img,
  html body.page-menu .menu-section:not([data-section="wine"]) .promo .promo-photo-img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  html body.page-home .cat-card .cat-arrow,
  html body.page-menu .cat-card .cat-arrow,
  html body.page-menu--hubs .categories.categories--rich .cat-card .cat-arrow,
  html body.page-menu--hubs .categories:not(.categories--rich) .cat-card .cat-arrow {
    width: 14px !important;
    height: 14px !important;
    right: 3px !important;
    bottom: 3px !important;
  }

  /* Page / hero / topbar waste */
  body.page-home .home-hero {
    padding: 8px !important;
    gap: 4px !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 0 4px !important;
  }
  body.page-home .home-hero-content { gap: 3px !important; padding: 0 !important; }
  body.page-home .home-hero-eyebrow { font-size: 8px !important; }
  body.page-home .home-hero-title,
  body.page-home .brand-title,
  body.page-home .hero-title,
  body.page-home h1 {
    font-size: 22px !important;
    line-height: 1 !important;
    margin: 1px 0 !important;
  }
  body.page-home .home-hero-tagline { font-size: 10px !important; line-height: 1.1 !important; }
  body.page-home .home-hero-cta { gap: 5px !important; margin-top: 3px !important; }
  body.page-home .home-hero-btn {
    padding: 5px 9px !important;
    font-size: 9px !important;
    border-radius: 7px !important;
    min-height: 0 !important;
  }
  body.page-home .home-hero-qr { padding: 4px !important; gap: 3px !important; }
  body.page-home .home-hero-qr img,
  body.page-home .home-qr-img,
  body.page-home .qr-image { max-width: 62px !important; width: 62px !important; }

  .container { padding: 6px !important; }
  .kiosk { gap: 6px !important; padding-top: 44px !important; }
  .page-topbar { padding: 4px 6px !important; }
  .topbar-btn { padding: 3px 7px !important; font-size: 9px !important; }
  .topbar-brand { font-size: 12px !important; }
  .topbar-sub { font-size: 8px !important; }
  .topbar-page { font-size: 8px !important; }

  /* Lang switch — very small */
  html body .lang-switch,
  html body .topbar-lang,
  html body .home-hero-lang {
    gap: 3px !important;
    padding: 2px !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
    justify-content: center !important;
  }
  html body .lang-switch button,
  html body .topbar-lang button,
  html body .home-hero-lang button,
  html body .lang-switch .lang-btn,
  html body .topbar-lang .lang-btn,
  html body .home-hero-lang .lang-btn {
    min-width: 22px !important;
    height: 20px !important;
    padding: 0 5px !important;
    font-size: 9px !important;
    line-height: 1 !important;
    border-radius: 5px !important;
  }
}

/* ===== 900+ px PORTRAIT — 4 COLUMNS, 108..118px CARDS ===== */
@media (orientation: portrait) and (max-aspect-ratio: 0.70) and (min-width: 900px) {

  html body.page-home .cards-primary,
  html body.page-home .cards-secondary,
  html body.page-home .categories,
  html body.page-home .categories-row .cards-primary.categories,
  html body.page-home .categories-row .cards-secondary.categories,
  html body.page-menu .categories,
  html body.page-menu .categories--rich,
  html body.page-menu .categories.categories--rich,
  html body.page-menu--hubs .categories.menu-set-cards,
  html body.page-menu--hubs .categories:not(.categories--rich):not(.menu-set-cards),
  html body.page-menu--hubs .categories.categories--rich,
  html body.page-menu .menu-section:not([data-section="wine"]) .promos--compact,
  html body.page-menu .menu-section:not([data-section="wine"]) .promos,
  html body.page-menu .promo-grid,
  html body.page-menu .items-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    gap: 7px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 4px 0 !important;
    padding: 0 !important;
  }

  html body.page-home .promo-banners {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 7px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 4px 0 !important;
    padding: 0 !important;
  }

  html body.page-home .cat-card,
  html body.page-home .cat-card--primary,
  html body.page-home .cat-card--secondary {
    position: relative !important;
    height: 118px !important;
    min-height: 0 !important;
    max-height: 118px !important;
    padding: 0 !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    border-radius: 9px !important;
  }
  html body.page-menu .cat-card,
  html body.page-menu--hubs .categories.categories--rich .cat-card,
  html body.page-menu--hubs .categories:not(.categories--rich) .cat-card,
  html body.page-menu--hubs .menu-set-cards .cat-card {
    position: relative !important;
    height: 108px !important;
    min-height: 0 !important;
    max-height: 108px !important;
    padding: 0 !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    border-radius: 9px !important;
  }
  html body.page-menu .menu-section:not([data-section="wine"]) .promo,
  html body.page-menu .menu-section:not([data-section="wine"]) .promo.promo--compact {
    position: relative !important;
    height: 112px !important;
    min-height: 0 !important;
    max-height: 112px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 9px !important;
  }
  html body.page-home .promo-banner,
  html body.page-home .promo-banners .promo-banner,
  html body.page-home .combo-strip,
  html body.page-home .promo-banners .combo-strip,
  html body.page-home .promo-banners .combo-strip--card {
    height: 84px !important;
    min-height: 84px !important;
    max-height: 84px !important;
    padding: 0 !important;
    border-radius: 9px !important;
  }

  /* text strip */
  html body.page-home .cat-card .cat-content,
  html body.page-menu .cat-card .cat-content,
  html body.page-menu .cat-card .cat-body,
  html body.page-menu--hubs .categories.categories--rich .cat-card .cat-body,
  html body.page-menu--hubs .categories.categories--rich .cat-card .cat-content,
  html body.page-menu--hubs .categories:not(.categories--rich) .cat-card .cat-body,
  html body.page-menu--hubs .categories:not(.categories--rich) .cat-card .cat-content,
  html body.page-menu .menu-section:not([data-section="wine"]) .promo .promo-content,
  html body.page-menu .menu-section:not([data-section="wine"]) .promo .promo-footer {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    height: auto !important;
    max-height: 30px !important;
    min-height: 0 !important;
    padding: 16px 6px 5px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    gap: 0 !important;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.82) 50%, rgba(0,0,0,.96) 100%) !important;
    z-index: 5 !important;
  }

  html body.page-home .cat-card .cat-title,
  html body.page-menu .cat-card .cat-title,
  html body.page-menu--hubs .categories.categories--rich .cat-card .cat-title,
  html body.page-menu--hubs .categories:not(.categories--rich) .cat-card .cat-title,
  html body.page-menu .menu-section:not([data-section="wine"]) .promo .promo-title {
    font-family: "Playfair Display", "Georgia", serif !important;
    font-size: 12px !important;
    line-height: 1.05 !important;
    letter-spacing: -0.01em !important;
    font-weight: 700 !important;
    margin: 0 !important;
    padding-right: 32px !important;
    max-height: 26px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    color: #fff7d2 !important;
    text-shadow: 0 2px 6px rgba(0,0,0,.9) !important;
  }

  html body.page-home .cat-card .cat-sub,
  html body.page-menu .cat-card .cat-sub,
  html body.page-menu .cat-card .cat-desc,
  html body.page-menu--hubs .categories.categories--rich .cat-card .cat-sub,
  html body.page-menu--hubs .categories.categories--rich .cat-card .cat-desc,
  html body.page-menu--hubs .categories:not(.categories--rich) .cat-card .cat-sub,
  html body.page-menu .menu-section:not([data-section="wine"]) .promo .promo-sub { display: none !important; }

  html body.page-menu .menu-section:not([data-section="wine"]) .promo .promo-price {
    font-size: 10px !important;
    line-height: 1 !important;
    right: 5px !important;
    bottom: 5px !important;
    min-width: 30px !important;
    height: 17px !important;
    padding: 0 7px !important;
  }

  html body.page-home .cat-card::before,
  html body.page-home .cat-card .cat-photo,
  html body.page-menu .cat-card .cat-photo,
  html body.page-menu .menu-section:not([data-section="wine"]) .promo .promo-photo {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 1 !important;
    background-size: cover !important;
    background-position: center !important;
  }
  html body.page-menu .cat-card .cat-photo > picture,
  html body.page-menu .cat-card .cat-photo > picture > img,
  html body.page-menu .cat-card .cat-photo-img,
  html body.page-menu .menu-section:not([data-section="wine"]) .promo .promo-photo > picture,
  html body.page-menu .menu-section:not([data-section="wine"]) .promo .promo-photo > picture > img,
  html body.page-menu .menu-section:not([data-section="wine"]) .promo .promo-photo-img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  html body.page-home .cat-card .cat-arrow,
  html body.page-menu .cat-card .cat-arrow,
  html body.page-menu--hubs .categories.categories--rich .cat-card .cat-arrow,
  html body.page-menu--hubs .categories:not(.categories--rich) .cat-card .cat-arrow {
    width: 16px !important;
    height: 16px !important;
    right: 4px !important;
    bottom: 4px !important;
  }

  /* hero / topbar / lang on wider portrait */
  body.page-home .home-hero {
    padding: 10px !important;
    gap: 6px !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 0 6px !important;
  }
  body.page-home .home-hero-title,
  body.page-home .brand-title,
  body.page-home .hero-title,
  body.page-home h1 {
    font-size: 26px !important;
    line-height: 1 !important;
    margin: 1px 0 !important;
  }
  body.page-home .home-hero-tagline { font-size: 11px !important; line-height: 1.12 !important; }
  body.page-home .home-hero-btn {
    padding: 6px 10px !important;
    font-size: 10px !important;
  }
  body.page-home .home-hero-qr img,
  body.page-home .home-qr-img,
  body.page-home .qr-image { max-width: 72px !important; width: 72px !important; }

  .container { padding: 7px !important; }
  .kiosk { gap: 7px !important; padding-top: 48px !important; }
  .page-topbar { padding: 6px 8px !important; }
  .topbar-btn { padding: 4px 8px !important; font-size: 10px !important; }
  .topbar-brand { font-size: 14px !important; }

  html body .lang-switch,
  html body .topbar-lang,
  html body .home-hero-lang {
    gap: 3px !important;
    padding: 3px !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
  }
  html body .lang-switch button,
  html body .topbar-lang button,
  html body .home-hero-lang button,
  html body .lang-switch .lang-btn,
  html body .topbar-lang .lang-btn,
  html body .home-hero-lang .lang-btn {
    min-width: 24px !important;
    height: 22px !important;
    padding: 0 6px !important;
    font-size: 9px !important;
    line-height: 1 !important;
    border-radius: 6px !important;
  }
}

/* ============================================================
   STAGE 17E — FORCE 6 CARDS PER ROW PORTRAIT PANEL (2026-05-28)
   User decision: 3/4 cols still too sparse. Force 6 cards per row
   on any portrait panel >= 700px wide. Card heights 66-74px, title
   8px line-clamp 2, photos fill full card, subtitles hidden,
   "Naše pivo" / promo / beer / product grids also collapse to 6.
   Wine (data-section="wine") still EXCLUDED — Stage 16 owns it.
   ============================================================ */

@media (orientation: portrait) and (max-aspect-ratio: 0.75) and (min-width: 700px) {

  /* ───── 6-COLUMN GRID (ALL non-wine card grids) ───── */
  html body.page-home .cards-primary,
  html body.page-home .cards-secondary,
  html body.page-home .categories,
  html body.page-home .home-categories,
  html body.page-home .hub-grid,
  html body.page-home .categories-row .cards-primary.categories,
  html body.page-home .categories-row .cards-secondary.categories,
  html body.page-home .promo-banners,
  html body.page-home .beer-showcase,
  html body.page-home .product-functions,
  html body.page-home .promo-large,
  html body.page-home .pivska-cards-row,
  html body.page-home .secondary-grid,
  html body.page-home .home-secondary-grid,
  html body.page-home .category-secondary-grid,
  html body.page-home .recos-grid,
  html body.page-home .promos,
  html body.page-home .promos--compact,
  html body.page-menu .categories,
  html body.page-menu .categories--rich,
  html body.page-menu .categories.categories--rich,
  html body.page-menu .menu-sets,
  html body.page-menu .menu-set-grid,
  html body.page-menu--hubs .categories.menu-set-cards,
  html body.page-menu--hubs .categories:not(.categories--rich):not(.menu-set-cards),
  html body.page-menu--hubs .categories.categories--rich,
  html body.page-menu .menu-section:not([data-section="wine"]) .promos--compact,
  html body.page-menu .menu-section:not([data-section="wine"]) .promos,
  html body.page-menu .promo-grid,
  html body.page-menu .items-grid,
  html body.page-menu .recos-grid {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    gap: 4px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 3px 0 !important;
    padding: 0 !important;
  }

  /* ───── HARD CARD HEIGHTS ───── */
  html body.page-home .cat-card,
  html body.page-home .cat-card--primary,
  html body.page-home .cat-card--secondary {
    position: relative !important;
    height: 74px !important;
    min-height: 0 !important;
    max-height: 74px !important;
    padding: 0 !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    border-radius: 6px !important;
  }
  html body.page-menu .cat-card,
  html body.page-menu--hubs .categories.categories--rich .cat-card,
  html body.page-menu--hubs .categories:not(.categories--rich) .cat-card,
  html body.page-menu--hubs .menu-set-cards .cat-card {
    position: relative !important;
    height: 68px !important;
    min-height: 0 !important;
    max-height: 68px !important;
    padding: 0 !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    border-radius: 6px !important;
  }
  html body.page-home .promo,
  html body.page-home .promo-card,
  html body.page-home .beer-card,
  html body.page-home .product-card,
  html body.page-home .reco-card,
  html body.page-home .smart-card,
  html body.page-home .pf-card {
    position: relative !important;
    height: 66px !important;
    min-height: 0 !important;
    max-height: 66px !important;
    padding: 0 !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    border-radius: 6px !important;
  }
  html body.page-home .promo-banner,
  html body.page-home .promo-banners .promo-banner,
  html body.page-home .combo-strip,
  html body.page-home .promo-banners .combo-strip,
  html body.page-home .promo-banners .combo-strip--card {
    height: 66px !important;
    min-height: 66px !important;
    max-height: 66px !important;
    padding: 0 !important;
    border-radius: 6px !important;
  }
  html body.page-menu .menu-section:not([data-section="wine"]) .promo,
  html body.page-menu .menu-section:not([data-section="wine"]) .promo.promo--compact,
  html body.page-menu .promo--compact,
  html body.page-menu .reco-card,
  html body.page-menu .smart-card {
    position: relative !important;
    height: 72px !important;
    min-height: 0 !important;
    max-height: 72px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 6px !important;
  }

  /* ───── TEXT STRIP — MICRO BAND ───── */
  html body.page-home .cat-card .cat-content,
  html body.page-home .promo .promo-content,
  html body.page-home .promo .cat-content,
  html body.page-home .beer-card .cat-content,
  html body.page-home .product-card .cat-content,
  html body.page-home .reco-card .cat-content,
  html body.page-home .pf-card .cat-content,
  html body.page-menu .cat-card .cat-content,
  html body.page-menu .cat-card .cat-body,
  html body.page-menu--hubs .categories.categories--rich .cat-card .cat-body,
  html body.page-menu--hubs .categories.categories--rich .cat-card .cat-content,
  html body.page-menu--hubs .categories:not(.categories--rich) .cat-card .cat-body,
  html body.page-menu--hubs .categories:not(.categories--rich) .cat-card .cat-content,
  html body.page-menu .menu-section:not([data-section="wine"]) .promo .promo-content,
  html body.page-menu .menu-section:not([data-section="wine"]) .promo .promo-footer {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    height: auto !important;
    max-height: 20px !important;
    min-height: 0 !important;
    padding: 2px 3px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.85) 40%, rgba(0,0,0,.97) 100%) !important;
    z-index: 5 !important;
  }

  /* ───── TITLE — TINY ───── */
  html body.page-home .cat-card .cat-title,
  html body.page-home .promo .promo-title,
  html body.page-home .promo .cat-title,
  html body.page-home .beer-card .cat-title,
  html body.page-home .product-card .cat-title,
  html body.page-home .reco-card .cat-title,
  html body.page-home .pf-card .cat-title,
  html body.page-home .promo-banner-title,
  html body.page-home .combo-strip-title,
  html body.page-menu .cat-card .cat-title,
  html body.page-menu--hubs .categories.categories--rich .cat-card .cat-title,
  html body.page-menu--hubs .categories:not(.categories--rich) .cat-card .cat-title,
  html body.page-menu .menu-section:not([data-section="wine"]) .promo .promo-title {
    font-family: "Playfair Display", "Georgia", serif !important;
    font-size: 8px !important;
    line-height: 1 !important;
    letter-spacing: -0.03em !important;
    font-weight: 700 !important;
    margin: 0 !important;
    padding: 0 !important;
    max-height: 18px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    text-align: center !important;
    color: #fff7d2 !important;
    text-shadow: 0 1px 4px rgba(0,0,0,.95) !important;
  }

  /* ───── SUBTITLES + descriptions HIDDEN ───── */
  html body.page-home .cat-card .cat-sub,
  html body.page-home .cat-card .cat-desc,
  html body.page-home .promo .promo-sub,
  html body.page-home .promo .cat-sub,
  html body.page-home .beer-card .cat-sub,
  html body.page-home .product-card .cat-sub,
  html body.page-home .reco-card .cat-sub,
  html body.page-home .promo-banner-eyebrow,
  html body.page-home .promo-banner-meta,
  html body.page-home .promo-banner-cta,
  html body.page-home .combo-strip-desc,
  html body.page-home .combo-strip-cta,
  html body.page-menu .cat-card .cat-sub,
  html body.page-menu .cat-card .cat-desc,
  html body.page-menu--hubs .categories.categories--rich .cat-card .cat-sub,
  html body.page-menu--hubs .categories.categories--rich .cat-card .cat-desc,
  html body.page-menu--hubs .categories:not(.categories--rich) .cat-card .cat-sub,
  html body.page-menu .menu-section:not([data-section="wine"]) .promo .promo-sub { display: none !important; }

  /* ───── PRICE — TINY ───── */
  html body.page-menu .menu-section:not([data-section="wine"]) .promo .promo-price,
  html body.page-home .promo-banner-price,
  html body.page-home .combo-strip-price {
    font-size: 8px !important;
    line-height: 1 !important;
    height: 12px !important;
    min-width: 22px !important;
    padding: 0 3px !important;
    right: 2px !important;
    bottom: 2px !important;
    border-radius: 999px !important;
  }

  /* ───── PHOTOS FILL FULL CARD ───── */
  html body.page-home .cat-card::before,
  html body.page-home .cat-card .cat-photo,
  html body.page-home .promo .promo-photo,
  html body.page-home .beer-card .cat-photo,
  html body.page-home .product-card .cat-photo,
  html body.page-menu .cat-card .cat-photo,
  html body.page-menu .menu-section:not([data-section="wine"]) .promo .promo-photo {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 1 !important;
    background-size: cover !important;
    background-position: center !important;
  }
  html body.page-home .cat-card .cat-photo > picture,
  html body.page-home .cat-card .cat-photo > picture > img,
  html body.page-home .cat-card .cat-photo-img,
  html body.page-home .promo .promo-photo > picture,
  html body.page-home .promo .promo-photo > picture > img,
  html body.page-home .promo .promo-photo-img,
  html body.page-menu .cat-card .cat-photo > picture,
  html body.page-menu .cat-card .cat-photo > picture > img,
  html body.page-menu .cat-card .cat-photo-img,
  html body.page-menu .menu-section:not([data-section="wine"]) .promo .promo-photo > picture,
  html body.page-menu .menu-section:not([data-section="wine"]) .promo .promo-photo > picture > img,
  html body.page-menu .menu-section:not([data-section="wine"]) .promo .promo-photo-img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  html body.page-home .cat-card .cat-arrow,
  html body.page-menu .cat-card .cat-arrow,
  html body.page-menu--hubs .categories.categories--rich .cat-card .cat-arrow,
  html body.page-menu--hubs .categories:not(.categories--rich) .cat-card .cat-arrow { display: none !important; }

  /* ───── HERO / FACADE / SECTIONS — minimum waste ───── */
  html body.page-home .home-hero,
  html body.page-home .hero,
  html body.page-home .hero-panel {
    min-height: 0 !important;
    height: auto !important;
    padding: 4px !important;
    gap: 4px !important;
    margin: 0 0 4px !important;
  }
  html body.page-home .home-hero-content { gap: 2px !important; padding: 0 !important; }
  html body.page-home .home-hero-eyebrow { font-size: 7px !important; letter-spacing: .08em !important; }
  html body.page-home .home-hero-title,
  html body.page-home .brand-title,
  html body.page-home .hero-title,
  html body.page-home h1 {
    font-size: 18px !important;
    line-height: 1 !important;
    margin: 0 !important;
  }
  html body.page-home .home-hero-tagline { font-size: 9px !important; line-height: 1.05 !important; }
  html body.page-home .home-hero-cta { gap: 4px !important; margin-top: 2px !important; }
  html body.page-home .home-hero-btn {
    padding: 4px 7px !important;
    font-size: 8px !important;
    border-radius: 5px !important;
    min-height: 0 !important;
  }
  html body.page-home .home-hero-aside { gap: 3px !important; }
  html body.page-home .home-hero-qr { padding: 3px !important; gap: 2px !important; }
  html body.page-home .home-hero-qr-label { font-size: 7px !important; }
  html body.page-home .home-hero-qr img,
  html body.page-home .home-qr-img,
  html body.page-home .qr-image { max-width: 50px !important; width: 50px !important; }

  html body.page-home .section-title,
  html body.page-home .pivska-headline,
  html body.page-home .block-title,
  html body.page-home .beer-showcase-header,
  html body.page-home .promo-header,
  html body.page-menu .section-title,
  html body.page-menu .menu-section > .cat-title {
    font-size: 13px !important;
    line-height: 1 !important;
    margin: 3px 0 !important;
    padding: 0 !important;
  }
  html body.page-home > * > section,
  html body.page-home .kiosk > section,
  html body.page-menu > * > section,
  html body.page-menu .kiosk > section {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }

  /* ───── TOPBAR / CONTAINER ───── */
  .container { padding: 4px !important; max-width: 100% !important; }
  .kiosk { gap: 4px !important; padding-top: 40px !important; }
  .page-topbar { padding: 3px 6px !important; }
  .topbar-btn { padding: 3px 6px !important; font-size: 8px !important; }
  .topbar-brand { font-size: 11px !important; }
  .topbar-sub { font-size: 7px !important; }
  .topbar-page { font-size: 7px !important; }

  /* ───── LANGUAGE — TINY ───── */
  html body .lang-switch,
  html body .topbar-lang,
  html body .home-hero-lang,
  html body .res-topright .lang-switch {
    gap: 2px !important;
    padding: 1px !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
    margin: 0 !important;
    justify-content: center !important;
  }
  html body .lang-switch button,
  html body .topbar-lang button,
  html body .home-hero-lang button,
  html body .lang-switch .lang-btn,
  html body .topbar-lang .lang-btn,
  html body .home-hero-lang .lang-btn {
    min-width: 18px !important;
    height: 16px !important;
    padding: 0 3px !important;
    font-size: 8px !important;
    line-height: 1 !important;
    border-radius: 4px !important;
    letter-spacing: 0 !important;
  }

  /* Promo banner internal content: also align bottom-strip style */
  html body.page-home .promo-banner-content,
  html body.page-home .combo-strip-content {
    position: absolute !important;
    inset: auto 0 0 0 !important;
    height: auto !important;
    max-height: 20px !important;
    padding: 2px 4px !important;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.85) 40%, rgba(0,0,0,.97) 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 5 !important;
  }
  html body.page-home .promo-banner-title,
  html body.page-home .combo-strip-title {
    font-size: 8px !important;
    line-height: 1 !important;
    margin: 0 !important;
    text-align: center !important;
    color: #fff7d2 !important;
    text-shadow: 0 1px 4px rgba(0,0,0,.95) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* Guard: no horizontal overflow */
  html body.page-home, html body.page-menu, .kiosk, .container { overflow-x: hidden !important; }
}

/* ===========================================================
   STAGE 19 — mobile-first light restyle, guest-card only.
   guest_card.html already loads kiosk.css and is not in the
   Stage 19 template-edit allowlist, so its phone override
   lives here instead of in mobile_light.css (which it never
   includes). Phones only — does not touch desktop/panel.
   =========================================================== */
@media (max-width: 699px) {
  body.page-guest-card {
    background: #f4f8ff !important;
    background-image: none !important;
    color: #111827 !important;
  }
  body.page-guest-card .gc-card,
  body.page-guest-card .card,
  body.page-guest-card [class*="card"] {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 1px 6px rgba(15, 23, 42, 0.06) !important;
    color: #111827 !important;
  }
  body.page-guest-card .gc-card *,
  body.page-guest-card .card * {
    text-shadow: none !important;
  }
  body.page-guest-card a.btn,
  body.page-guest-card button.btn,
  body.page-guest-card .btn-primary,
  body.page-guest-card .guest-card-btn--primary {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
    box-shadow: none !important;
  }
  body.page-guest-card .btn-secondary,
  body.page-guest-card .guest-card-btn {
    background: #ffffff !important;
    border: 1px solid #2563eb !important;
    color: #2563eb !important;
  }

  /* Topbar (res-topbar/res-btn/res-topbrand) comes from reservation.css,
     which is outside the Stage 19 allowlist — overridden here via kiosk.css
     (already loaded by guest_card.html) since neither the template nor
     reservation.css can be edited in this stage. */
  body.page-guest-card .res-topbar {
    background: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  body.page-guest-card .res-topbrand {
    background: none !important;
    -webkit-text-fill-color: #111827 !important;
    color: #111827 !important;
  }
  body.page-guest-card .res-topsub,
  body.page-guest-card .res-toppage {
    color: #64748b !important;
  }
  body.page-guest-card .res-btn {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    color: #111827 !important;
    box-shadow: none !important;
  }
  body.page-guest-card .res-btn-home {
    background: #2563eb !important;
    color: #ffffff !important;
    box-shadow: none !important;
  }
  body.page-guest-card .lang-switch a,
  body.page-guest-card .lang-switch button {
    background: #ffffff !important;
    color: #111827 !important;
    border: 1px solid #e5e7eb !important;
  }

  html body.page-guest-card { overflow-x: hidden !important; }
}

/* ===========================================================
   STAGE 19C — guest-card details (.guest-card-details dt/dd) low-contrast
   fix. dd defaults to #f1e3c8 (cream) on a rgba(0,0,0,.25) dark panel —
   readable on dark, but the panel itself is whitened above by the
   `.gc-card`/`.card`/[class*="card"] catch-all, leaving cream-on-white
   (low contrast). Flagged but out of scope in Stage 19B; fixed here. */
@media (max-width: 699px) {
  html body.page-guest-card .guest-card-details {
    background: #f4f8ff !important;
    border: 1px solid #e5e7eb !important;
  }
  html body.page-guest-card .guest-card-details dt {
    color: #64748b !important;
  }
  html body.page-guest-card .guest-card-details dd {
    color: #111827 !important;
  }
}

/* ===========================================================
   STAGE 19B — mobile light cleanup, guest-card lang pills.
   .res-topright (reservation.css) is the actual wrapper element
   (combined with .lang-switch on the same node) and carries its
   own dark blurred pill background; its `.active`/[aria-pressed]
   rule also carries !important at higher specificity (2 classes)
   than the Stage 19 override above (1 class), so it wins on
   specificity regardless of source order. Both are bumped here. */
@media (max-width: 699px) {
  body.page-guest-card .lang-switch,
  body.page-guest-card .res-topright {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
  }
  body.page-guest-card .lang-switch button,
  body.page-guest-card .res-topright button {
    background: #ffffff !important;
    color: #111827 !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: none !important;
  }
  body.page-guest-card .lang-switch button.active,
  body.page-guest-card .lang-switch button[aria-pressed="true"],
  body.page-guest-card .res-topright button.active,
  body.page-guest-card .res-topright button[aria-pressed="true"] {
    background: #2563eb !important;
    color: #ffffff !important;
    box-shadow: none !important;
  }
}

/* ===========================================================
   STAGE 23 — guest-card azure theme, phone landscape included.
   The Stage 19/19B/19C blocks above are all `max-width: 699px`,
   a WIDTH query — on phone landscape the viewport width often
   exceeds 699px (e.g. 844px on a 390x844 phone), so they stop
   matching and the page falls back to the dark/gold desktop
   kiosk skin. `(hover: none) and (pointer: coarse)` matches the
   touch capability instead of the width, so it stays active in
   both orientations on real phones while never touching desktop/
   mouse kiosk panels. guest_card.html does not load mobile_light.css,
   so this lives here for specificity per Stage 23 scope. */
@media (hover: none) and (pointer: coarse) {
  html body.page-guest-card {
    background:
      radial-gradient(circle at 15% 0%, rgba(125, 211, 252, 0.38), transparent 34%),
      radial-gradient(circle at 85% 12%, rgba(59, 130, 246, 0.18), transparent 32%),
      linear-gradient(180deg, #eef8ff 0%, #f7fbff 42%, #eaf5ff 100%) !important;
    background-image:
      radial-gradient(circle at 15% 0%, rgba(125, 211, 252, 0.38), transparent 34%),
      radial-gradient(circle at 85% 12%, rgba(59, 130, 246, 0.18), transparent 32%),
      linear-gradient(180deg, #eef8ff 0%, #f7fbff 42%, #eaf5ff 100%) !important;
    color: #0f172a !important;
    overflow-x: hidden !important;
  }
  html body.page-guest-card .gc-card,
  html body.page-guest-card .card,
  html body.page-guest-card [class*="card"] {
    background: rgba(255,255,255,0.90) !important;
    border: 1px solid rgba(14,165,233,0.20) !important;
    box-shadow: 0 8px 20px rgba(15,23,42,0.08) !important;
    color: #0f172a !important;
  }
  html body.page-guest-card .gc-card *,
  html body.page-guest-card .card * {
    text-shadow: none !important;
  }
  html body.page-guest-card a.btn,
  html body.page-guest-card button.btn,
  html body.page-guest-card .btn-primary,
  html body.page-guest-card .guest-card-btn--primary {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
    box-shadow: none !important;
  }
  html body.page-guest-card .lang-switch,
  html body.page-guest-card .res-topright {
    background: #ffffff !important;
    border: 1px solid rgba(14,165,233,0.20) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
  }
  html body.page-guest-card .lang-switch button,
  html body.page-guest-card .res-topright button {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid rgba(14,165,233,0.20) !important;
    box-shadow: none !important;
  }
  html body.page-guest-card .lang-switch button.active,
  html body.page-guest-card .lang-switch button[aria-pressed="true"],
  html body.page-guest-card .res-topright button.active,
  html body.page-guest-card .res-topright button[aria-pressed="true"] {
    background: #2563eb !important;
    color: #ffffff !important;
    box-shadow: none !important;
  }
}