:root {
    --bg-0: #0b0b0d;
    --bg-1: #141418;
    --bg-2: #1c1c22;
    --bg-3: #24242c;
    --line: rgba(255, 255, 255, 0.08);
    --line-strong: rgba(255, 255, 255, 0.18);
    --text: #f4efe6;
    --text-dim: #a8a195;
    --accent: #c99a4a;
    --accent-2: #e8b974;
    --accent-soft: rgba(201, 154, 74, 0.18);
    --shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    --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(201, 154, 74, 0.10), transparent 60%),
        radial-gradient(900px 500px at 110% 110%, rgba(201, 154, 74, 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(201, 154, 74, 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(201, 154, 74, 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(201, 154, 74, 0.18) 0%, rgba(201, 154, 74, 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(232, 185, 116, 0.20), transparent 70%),
        radial-gradient(500px 250px at 10% 120%, rgba(201, 154, 74, 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(28px, 3.2vw, 42px);
    letter-spacing: 0.08em;
    background: linear-gradient(180deg, #f7e2bd 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1;
}

.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(201, 154, 74, 0.12);
    color: #fff;
}
.qr-btn-install[hidden] { display: none; }

.qr-btn:active {
    transform: scale(0.97);
    box-shadow: 0 4px 14px rgba(201, 154, 74, 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(201, 154, 74, 0.75);
    background: rgba(10, 8, 6, 0.55);
    border: 1px solid rgba(201, 154, 74, 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, #c99a4a);
    border-color: rgba(201, 154, 74, 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);
    overflow: hidden;
    cursor: pointer;
    background: var(--bg-2);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 28px;
    min-height: 220px;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.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(0,0,0,0.1) 0%, rgba(0,0,0,0.3) 45%, rgba(0,0,0,0.85) 100%);
    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(201, 154, 74, 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(110, 150, 200, 0.3), transparent 60%),
        linear-gradient(135deg, #1a1e28 0%, #0c1018 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(201, 154, 74, 0.15);
    border: 1px solid rgba(201, 154, 74, 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(201, 154, 74, 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, #e8c274);
}

.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, #e8c274);
    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, #e8c274);
    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, #e8c274);
    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, #e8c274);
    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(232, 185, 116, 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(201, 154, 74, 0.35);
    background: rgba(201, 154, 74, 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(201, 154, 74, 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, #f7e2bd 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(201, 154, 74, 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(201, 154, 74, 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(232, 185, 116, 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(232, 185, 116, 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(201, 154, 74, 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(201, 154, 74, 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(201, 154, 74, 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(232, 185, 116, 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(201, 154, 74, 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(232, 185, 116, 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: #e8c274;          /* золотой акцент */
  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(201, 154, 74, 0.65);
}

body.page-menu .item-view-cta-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px -14px rgba(232, 185, 116, 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(201, 154, 74, 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(232, 185, 116, 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(201, 154, 74, 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(232, 185, 116, 0.22), transparent 60%),
        radial-gradient(600px 260px at 0% 100%, rgba(201, 154, 74, 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(232, 185, 116, 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(201, 154, 74, 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(201, 154, 74, 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(201, 154, 74, 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(201, 154, 74, 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(232, 185, 116, 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(201, 154, 74, 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(201, 154, 74, 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(201, 154, 74, 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(201, 154, 74, 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(201, 154, 74, 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(201, 154, 74, 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(201, 154, 74, 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(232, 185, 116, 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(201, 154, 74, 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(201, 154, 74, 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(201, 154, 74, 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(201, 154, 74, 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(201, 154, 74, 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(201, 154, 74, 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(201, 154, 74, 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(201, 154, 74, 0.45);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
body.page-menu--subhubs .cat-card:hover {
    border-color: rgba(201, 154, 74, 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(201, 154, 74, 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(201, 154, 74, 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(232, 185, 116, 0.5);
    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(232, 185, 116, 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(201, 154, 74, 0.22);
    background:
        radial-gradient(120% 100% at 30% 25%, rgba(232, 185, 116, 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(232, 185, 116, 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(232, 185, 116, 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(201, 154, 74, 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(232, 185, 116, 0.5);
    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(232, 185, 116, 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(232, 185, 116, 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(201, 154, 74, 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(201, 154, 74, 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(232, 185, 116, 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(232, 185, 116, 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(201, 154, 74, 0.20);
    background:
        radial-gradient(900px 380px at 0% 0%, rgba(232, 185, 116, 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(232, 185, 116, 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(232, 185, 116, 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(201, 154, 74, 0.16);
}
body.page-menu--item .item-view-row-label {
    font-size: 10.5px;
    letter-spacing: 0.26em;
    color: rgba(232, 185, 116, 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(201, 154, 74, 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(232, 185, 116, 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(201, 154, 74, 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(232, 185, 116, 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(201, 154, 74, 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(232, 185, 116, 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(232, 185, 116, 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(232, 185, 116, 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(201, 154, 74, 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(201, 154, 74, 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(201, 154, 74, 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(201, 154, 74, 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(232, 185, 116, 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(201, 154, 74, 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(232, 185, 116, 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(232, 185, 116, 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(232, 185, 116, 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(201, 154, 74, 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(232, 185, 116, 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(232, 185, 116, 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(232, 185, 116, 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(232, 185, 116, 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(201, 154, 74, 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(232, 185, 116, 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(201, 154, 74, 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(232, 185, 116, 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(201, 154, 74, 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(232, 185, 116, 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(232, 185, 116, 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(201, 154, 74, 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(201, 154, 74, 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, #e8c274);
    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(232, 185, 116, 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(232, 185, 116, 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, #e8c274);
    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, #e8c274);
    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, #e8c274);
    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(201, 154, 74, 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(201, 154, 74, 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(201, 154, 74, 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, #e8c274, #caa45a);
    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: #e8c274;
}
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: #e8c274;
}
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, #e8c274, 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(232, 185, 116, 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(201, 154, 74, 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(201, 154, 74, 0.14), transparent 60%),
        linear-gradient(180deg, #1d1d24 0%, #14141a 100%);
    border-color: rgba(201, 154, 74, 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%, #c99a4a 100%);
    color: #1a1306;
    border: 1px solid rgba(201, 154, 74, 0.55);
    box-shadow: 0 6px 18px -8px rgba(201, 154, 74, 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(201, 154, 74, 0.72);
    border-color: rgba(232, 185, 116, 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(201, 154, 74, 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(232, 185, 116, 0.35);
    color: rgba(232, 185, 116, 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(201, 154, 74, 0.10);
    border-color: rgba(232, 185, 116, 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
   ============================================================ */