/* === Afitt Bistro — Restaurant Menu (Étlap) ordering surface ===
   Wolt-like interaction, site design language. All visual values reference
   tokens from tokens.css / home.css / product-card.css conventions. */

/* ---------- Sticky header stack on the menu page ---------- */
/* The ENTIRE status-bar + site-header stack sticks on the Étlap page so the
   bar stays above the header while scrolling (PROMPT 1). The inner .site-header
   stays position:relative (home.css). Sticky `top` reads --afitt-stack-top so
   the WP admin toolbar offset (status-bar.css) is respected. Selector uses the
   body class emitted by the theme body_class filter. */
body.afitt-menu-page .afitt-header-stack {
    position: sticky;
    top: var(--afitt-stack-top, 0px);
    z-index: calc(var(--z-sticky) + 1);
    box-shadow: 0 2px 12px rgba(33, 26, 22, 0.18);
    background: var(--color-brand-charcoal);
}

/* ---------- Menu page root ---------- */
.menu-page {
    --menu-sticky-top: 64px;
    background:
        radial-gradient(circle at 8% 12%, rgba(244, 122, 31, 0.08), transparent 26%),
        radial-gradient(circle at 94% 30%, rgba(22, 138, 114, 0.07), transparent 30%),
        var(--color-bg-cream);
}

/* Lock background scroll while a sheet/drawer is open. Applied to html AND
   body so the window scroll container is actually blocked; browsers keep the
   scroll offset, and the controller restores it explicitly on close. */
html.menu-scroll-locked,
body.menu-scroll-locked {
    overflow: hidden;
}

/* The site-wide .site-main adds 32px top padding; the hero already has its
   own generous top padding, so drop the double gap under the header. */
.menu-page {
    padding-top: 0;
}

/* header.php wraps every template in <main id="main" class="site-main"> and
   page-shop.php nests another .site-main.menu-page inside it. The outer
   main's site-wide 32px padding is the "unexplained top gap" on mobile. */
body.afitt-menu-page #main.site-main {
    padding-top: 0;
}

.menu-page [hidden] {
    display: none !important;
}

.menu-sheet-overlay[hidden],
.menu-drawer-overlay[hidden],
.menu-cart-cta[hidden],
.menu-toast[hidden],
.menu-search__clear[hidden],
.menu-empty[hidden],
.menu-item__stepper[hidden],
.menu-item__add[hidden] {
    display: none !important;
}

.menu-page.is-locked {
    overflow: hidden;
}

/* ---------- Hero ---------- */
/* ---------- Compact page header (desktop redesign 2026-10-03) ----------
   No standalone Étlap hero: a compact title + a prominent search sit right
   above the category bar, so the orderable menu starts near the top. */
.menu-head__inner {
    /* Same content box as the site header: max-width 1440 + header padding,
       so the menu's left/right edges line up with the header edges. */
    max-width: 1440px;
    margin: 0 auto;
    padding: var(--space-lg) clamp(var(--space-md), 4vw, var(--space-2xl)) var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.menu-head__titles {
    min-width: 0;
}

.menu-head__eyebrow {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: var(--text-micro);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-brand-orange);
    margin-bottom: 2px;
    line-height: 1.3;
}

.menu-head__title {
    font-family: var(--font-display);
    font-weight: 400;
    text-transform: none;
    font-size: var(--text-display-sm);
    line-height: var(--leading-heading);
    letter-spacing: -0.015em;
    color: var(--color-text-primary);
    font-synthesis: none;
}

.menu-search {
    position: relative;
    max-width: 560px;
    margin: 0 auto;
}

.menu-search__icon {
    position: absolute;
    left: var(--space-md);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    pointer-events: none;
}

.menu-search__input {
    width: 100%;
    min-height: 52px;
    padding: var(--space-sm) var(--space-2xl) var(--space-sm) calc(var(--space-lg) + 8px);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--text-input);
    color: var(--color-text-primary);
    background: var(--color-bg-white);
    border: 2px solid var(--color-border-light);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-card);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    -webkit-appearance: none;
    appearance: none;
    line-height:1.4;
}

.menu-search__input::placeholder {
    color: var(--color-text-muted);
}

.menu-search__input:focus {
    outline: var(--focus-ring-width) solid var(--color-brand-orange);
    outline-offset: var(--focus-ring-offset);
    border-color: var(--color-brand-orange);
}

.menu-search__clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--color-text-secondary);
    background: var(--color-bg-cream);
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.menu-search__clear:hover {
    color: var(--color-brand-orange);
}

/* ---------- Layout ---------- */
/* Full-width shell: the menu grid fills the viewport on normal desktop
   (no 1200/1440/1720px island). 3 columns: category nav | fluid menu | cart.
   The clamp() padding is the ONLY side inset on normal desktop, so the grid
   keeps >=90vw and leaves <=~4-5vw of air per side. Ultrawide 21:9 / 32:9
   override `width` below (see the aspect-ratio media queries). */
@media (min-width: 900px) {
    .menu-head__inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-xl);
    }

    .menu-search {
        flex: 0 1 460px;
        margin: 0;
    }
}

.menu-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
    width: 100%;
    /* Shared site content width (header edges). */
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 clamp(var(--space-md), 4vw, var(--space-2xl)) var(--space-2xl);
}

.menu-layout > * {
    min-width: 0;
}

/* ---------- Sticky horizontal category pills (all viewports) ----------
   The single category navigation: a single-row pill bar pinned under the
   sticky header stack. Full category list stays reachable by horizontal
   scrolling (touch or the arrow buttons). */
.menu-cats {
    /* Full-width sticky bar whose inner content follows the shared site
       content width — exactly like the site header (background full-bleed,
       content aligned to the header edges). */
    position: sticky;
    top: var(--menu-sticky-top);
    z-index: var(--z-sticky);
    background: var(--color-bg-cream);
    border-bottom: 1px solid var(--color-border-light);
    box-shadow: 0 8px 18px rgba(33, 26, 16, 0.07);
    /* Follow the header hide/show transform (0.22s) when --menu-sticky-top
       switches between "under the header" and "at the viewport top". */
    transition: top 0.22s ease;
}

.menu-cats__inner {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    max-width: 1440px;
    margin: 0 auto;
    padding: var(--space-xs) clamp(var(--space-md), 4vw, var(--space-2xl)) calc(var(--space-xs) + 2px);
}

.menu-cats__arrow {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-white);
    color: var(--color-text-primary);
    border: 1.5px solid var(--color-border-medium);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-button);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.menu-cats__arrow:hover {
    color: var(--color-brand-orange);
    border-color: var(--color-brand-orange);
}

.menu-cats__arrow:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-brand-orange);
    outline-offset: var(--focus-ring-offset);
}

.menu-cats__arrow[hidden] {
    display: none;
}

.menu-cats__scroller {
    display: flex;
    gap: var(--space-xs);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: var(--space-2xs) 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.menu-cats__scroller::-webkit-scrollbar {
    display: none;
}

.menu-chip {
    --chip-color: var(--cat-snack);
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 var(--space-lg);
    display: inline-flex;
    align-items: center;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: var(--text-subtitle);
    text-transform: none;
    letter-spacing: normal;
    color: var(--color-text-primary);
    background: var(--color-bg-white);
    border: 1.5px solid var(--color-border-medium);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-button);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
    white-space: nowrap;
    line-height:var(--leading-ui);
}

.menu-chip:hover {
    border-color: var(--chip-color);
    color: var(--chip-color);
}

.menu-chip:focus-visible,
.menu-item__add:focus-visible,
.menu-item__step:focus-visible,
.menu-cart-cta:focus-visible,
.menu-cart-bar__btn:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-brand-orange);
    outline-offset: var(--focus-ring-offset);
}

.menu-chip.is-active {
    background: var(--chip-color);
    border-color: var(--chip-color);
    color: var(--color-text-inverse);
    box-shadow: var(--shadow-card-hover);
}

.menu-chip.is-active::before {
    content: '';
    width: 8px;
    height: 8px;
    margin-right: var(--space-xs);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
}

/* Photo pills (categories that have a banner photo): hover and active reuse
   the same category banner image, layered under a scrim so the label stays
   readable. Active gets an extra inner ring as a second marker. */
.menu-chip--photo:hover,
.menu-chip--photo.is-active {
    background-image:
        linear-gradient(rgba(33, 26, 16, 0.45), rgba(33, 26, 16, 0.45)),
        var(--chip-bg, none);
    background-size: cover;
    background-position: center;
    color: var(--color-text-inverse);
    border-color: transparent;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.menu-chip--photo:hover {
    box-shadow: var(--shadow-card-hover);
}

.menu-chip--photo.is-active {
    box-shadow: var(--shadow-card-hover), inset 0 0 0 2px rgba(255, 255, 255, 0.75);
}

/* ---------- Sections ---------- */
.menu-sections {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
}

.menu-section__head {
    --section-color: var(--cat-snack);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-md) 0 var(--space-sm);
    margin-bottom: var(--space-md);
}

.menu-section__motif {
    position: absolute;
    inset: 0;
    background: url('../../images/background.svg') no-repeat center / cover;
    opacity: 0.06;
    pointer-events: none;
    border-radius: var(--radius-lg);
}

/* WM1 redesign — the final 16-9 hero photo per category becomes the section
   header background at full opacity (the photo already carries the category
   colour, so there is NO scrim overlay). Heading contrast follows the category
   token luminance. Missing photo => default flat header. */
.menu-section__head--hero {
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 260px;
    padding: var(--space-xl) var(--space-md) var(--space-lg);
    margin-bottom: var(--space-lg);
}
.menu-section__head--hero .menu-section__motif {
    background: var(--section-bg-image) center / cover no-repeat;
    opacity: 1;
}
.menu-section__head--hero .menu-section__title {
    color: var(--section-text, var(--color-text-inverse));
    text-align: center;
    border-bottom-color: currentColor;
}
.menu-section__head--hero .menu-section__desc {
    color: var(--section-text, var(--color-text-inverse));
    opacity: 0.92;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.menu-section__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: var(--space-xs);
    background: var(--section-color);
    border-radius: var(--radius-md);
    color: var(--color-text-inverse);
    box-shadow: var(--shadow-button);
}

.menu-section__icon svg {
    width: 24px;
    height: 24px;
}

.menu-section__title {
    position: relative;
    font-family: var(--font-display);
    font-weight: 400;
    text-transform: none;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    line-height: var(--leading-heading);
    letter-spacing: -0.015em;
    color: var(--color-text-primary);
    padding-bottom: var(--space-xs);
    border-bottom: 4px solid var(--section-color);
    font-synthesis:none;
}

.menu-section__desc {
    position: relative;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--text-subtitle);
    color: var(--color-text-secondary);
    margin-top: var(--space-xs);
    max-width: 64ch;
}

/* ---------- Product row cards ---------- */
.menu-section__items {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.menu-item {
    --product-color: var(--cat-snack);
    position: relative;
    display: flex;
    align-items: stretch;
    gap: var(--space-md);
    background: var(--color-bg-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
    border-left: 4px solid var(--product-color);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.menu-item:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
}

.menu-item--unavailable {
    opacity: 0.72;
}

.menu-item--unavailable .menu-item__media img {
    filter: grayscale(0.7);
}

/* Full-card click-to-open layer. It sits above the text/media (z-index 1) so a
   tap anywhere opens the product sheet, but the add/stepper corner control is
   a sibling at z-index 2 and stays independently clickable. */
.menu-item__hit {
    position: absolute;
    inset: 0;
    z-index: 1;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    color: inherit;
    font: inherit;
}

.menu-item:hover .menu-item__media img,
.menu-item__hit:hover .menu-item__media img {
    transform: scale(1.05);
}

.menu-item__body {
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--space-md) 0 var(--space-md) var(--space-md);
}

.menu-item__title {
    font-family: var(--font-body);
    font-weight: 700;
    text-transform: none;
    font-size: clamp(1.125rem, 2.2vw, 1.25rem);
    line-height: 1.2;
    letter-spacing: normal;
    color: var(--color-text-primary);
    overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (min-width: 1024px) {
    .menu-item__title {
        font-size: 19px;
        line-height: 1.2;
    }
}

.menu-item__desc {
    font-family: var(--font-body);
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    font-size: 15px;
    line-height: var(--leading-compact);
    color: var(--color-text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.menu-item__price-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-xs);
    flex-wrap: wrap;
    min-width: 0;
}

.menu-item__price {
    font-family: var(--font-price);
    font-weight: 700;
    font-size: 16px;
    line-height: var(--leading-price);
    text-transform: none;
    letter-spacing: normal;
    color: var(--color-text-primary);
    white-space: nowrap;
    margin: var(--space-2xs) 0;
    font-variant-numeric:lining-nums tabular-nums;
}

.menu-item__old-price {
    font-family: var(--font-price);
    font-weight: 400;
    font-size: 13px;
    line-height: 1.3;
    text-transform: none;
    letter-spacing: normal;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.menu-item__cat {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: var(--text-micro);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--product-color);
    background: color-mix(in srgb, var(--product-color) 12%, transparent);
    padding: 2px var(--space-xs);
    border-radius: var(--radius-full);
    white-space: nowrap;
}

/* Right column: edge-to-edge square photo filling the full column height.
   The card's overflow:hidden rounds the top-right / bottom-right corners. */
.menu-item__media {
    position: relative;
    flex: 0 0 auto;
    width: 128px;
    min-height: 128px;
    align-self: stretch;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    overflow: hidden;
    background: var(--color-bg-cream);
    margin-right: 0;
}

.menu-item__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    transition: transform var(--transition-slow);
}

/* Corner control (add / stepper / sold-out) overlapping the photo's bottom-right. */
.menu-item__cta {
    position: absolute;
    right: var(--space-xs);
    bottom: var(--space-xs);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
}

.menu-item__add {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-white);
    color: var(--product-color);
    border: 1px solid color-mix(in srgb, var(--product-color) 28%, transparent);
    border-radius: var(--radius-full);
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--shadow-card);
    transition: transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.menu-item__add:hover {
    background: var(--product-color);
    color: var(--color-text-inverse);
    box-shadow: var(--shadow-card-hover);
}

.menu-item__add:active {
    transform: scale(var(--scale-round-active));
}

.menu-item__add.is-busy {
    pointer-events: none;
    opacity: 0.6;
}

.menu-item__soldout {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: var(--text-micro);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-muted);
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-light);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-card);
}

.menu-item__stepper {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-medium);
    border-radius: var(--radius-full);
    padding: 2px;
    box-shadow: var(--shadow-card);
}

.menu-item__step {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--product-color);
    border: none;
    border-radius: var(--radius-full);
    font-size: 20px;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.menu-item__step:hover {
    background: var(--product-color);
    color: var(--color-text-inverse);
}

.menu-item__qty {
    min-width: 26px;
    text-align: center;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: var(--text-subtitle);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-primary);
}

/* Total-units badge for configurable products (ambiguous steppers are not
   shown — different configurations live on separate cart lines). */
.menu-item__count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 12px;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--product-color);
    background: color-mix(in srgb, var(--product-color) 12%, white);
    border: 1px solid color-mix(in srgb, var(--product-color) 45%, transparent);
    border-radius: var(--radius-full);
    white-space: nowrap;
}

/* ---------- Search state ---------- */
.menu-page.is-searching .menu-section:not(.is-match) {
    display: none;
}

.menu-page.is-searching .menu-section__head {
    display: none;
}

.menu-page.is-searching .menu-item:not(.is-match) {
    display: none;
}

.menu-empty {
    text-align: center;
    padding: var(--space-2xl) var(--space-md);
}

.menu-empty__label {
    font-family: var(--font-display);
    font-weight: 400;
    text-transform: none;
    font-size: var(--text-display-sm);
    letter-spacing: -0.015em;
    color: var(--color-text-primary);
    margin-bottom: var(--space-lg);
    font-synthesis:none;
    line-height:var(--leading-heading);
}

/* ---------- Cart (sidebar / drawer / floating CTA share) ---------- */
.menu-cart__panel {
    display: flex;
    flex-direction: column;
    background: var(--color-bg-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.menu-cart__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    background: var(--color-brand-charcoal);
    color: var(--color-text-inverse);
}

.menu-cart__title {
    font-family: var(--font-display);
    font-weight: 400;
    text-transform: none;
    font-size: var(--text-display-sm);
    letter-spacing: -0.015em;
    font-synthesis:none;
    line-height:var(--leading-heading);
}

.menu-cart__count {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: var(--text-subtitle);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-bg-cream);
}

.menu-cart__head-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.menu-cart__close {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-text-inverse);
    border: none;
    border-radius: var(--radius-full);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.menu-cart__close:hover {
    background: var(--color-brand-orange);
    color: var(--color-text-inverse);
}

.menu-cart__body {
    padding: var(--space-md) var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    overflow-y: auto;
}

.menu-cart__empty {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--text-subtitle);
    color: var(--color-text-muted);
    text-align: center;
    padding: var(--space-xl) var(--space-md);
}

.menu-cart__item {
    display: flex;
    gap: var(--space-sm);
    align-items: flex-start;
}

.menu-cart__item-thumb {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-bg-cream);
}

.menu-cart__item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.menu-cart__item-body {
    flex: 1 1 auto;
    min-width: 0;
}

.menu-cart__item-title {
    font-family: var(--font-body);
    font-weight: 700;
    text-transform: none;
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: normal;
    color: var(--color-text-primary);
}

.menu-cart__item-attr {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 13px;
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* Structured option summary under the cart line title:
   Köret: Csónakburgonya  (clearly readable, secondary hierarchy). */
.menu-cart__item-options {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 14px;
    margin-top: 2px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 13px;
    color: var(--color-text-secondary);
}

.menu-cart__item-options span strong {
    font-weight: 600;
    color: var(--color-text-primary);
}

.menu-cart__item-row {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.menu-cart__item-edit {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-brand-orange);
    background: transparent;
    border: none;
    padding: 6px 8px;
    margin: -6px -8px -6px 0;
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.menu-cart__item-edit:hover {
    text-decoration: underline;
}

.menu-cart__item-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
    margin-top: var(--space-xs);
}

.menu-cart__stepper {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: var(--color-bg-cream);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-full);
    padding: 2px;
}

.menu-cart__step {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-full);
    font-size: 18px;
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.menu-cart__step:hover {
    background: var(--color-brand-orange);
    color: var(--color-text-inverse);
}

.menu-cart__qty {
    min-width: 22px;
    text-align: center;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.menu-cart__item-total {
    font-family: var(--font-price);
    font-weight: 700;
    font-size: var(--text-price);
    text-transform: none;
    letter-spacing: normal;
    white-space: nowrap;
    font-variant-numeric:lining-nums tabular-nums;
    line-height:var(--leading-price);
}

.menu-cart__item-remove {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-full);
    color: var(--color-text-muted);
    font-size: 16px;
    cursor: pointer;
    transition: color var(--transition-fast), background var(--transition-fast);
}

.menu-cart__item-remove:hover {
    color: var(--color-brand-orange);
    background: var(--color-bg-cream);
}

.menu-cart__foot {
    border-top: 1px solid var(--color-border-light);
    padding: var(--space-md) var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    background: var(--color-bg-white);
}

.menu-cart__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-family: var(--font-ui);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.menu-cart__total-label {
    font-weight: 600;
    font-size: var(--text-subtitle);
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.menu-cart__total-value {
    font-weight: 700;
    font-size: var(--text-price-lg);
    color: var(--color-text-primary);
    font-variant-numeric:lining-nums tabular-nums;
    line-height:var(--leading-price);
}

.menu-cart__checkout {
    width: 100%;
    min-height: 52px;
    font-size: 18px;
    /* Brand red primary CTA (matches the header + product sheet). */
    background: var(--color-brand-red-bright);
}

.menu-cart__checkout:hover:not(:disabled) {
    background: var(--color-brand-red-bright-hover);
}

.menu-cart__checkout:focus-visible {
    outline-color: var(--color-brand-red-bright);
}

/* (The former "Kosár megnyitása" footlink was removed from the cart modal.) */

/* ---------- Bottom cart summary bar (desktop) ----------
   The single permanent cart entry point on desktop: replaces the former cart
   sidebar and the floating CTA (which stays for <1200px). Opens the existing
   cart drawer. Height is also reserved at the end of the menu content. */
:root {
    --menu-cart-bar-h: 72px;
}

.menu-cart-bar {
    display: none;
}

.menu-cart-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    min-height: var(--menu-cart-bar-h);
    /* Match the shared site content width (header edges). */
    max-width: 1440px;
    margin: 0 auto;
    padding: var(--space-xs) clamp(var(--space-md), 4vw, var(--space-2xl));
}

.menu-cart-bar__info {
    display: flex;
    align-items: baseline;
    gap: var(--space-md);
    min-width: 0;
}

.menu-cart-bar__count {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: var(--text-subtitle);
    line-height: var(--leading-ui);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.menu-cart-bar__total {
    font-family: var(--font-price);
    font-weight: 700;
    font-size: var(--text-price-lg);
    line-height: var(--leading-price);
    letter-spacing: normal;
    color: var(--color-text-primary);
    font-variant-numeric: lining-nums tabular-nums;
    white-space: nowrap;
}

.menu-cart-bar.is-empty .menu-cart-bar__count,
.menu-cart-bar.is-empty .menu-cart-bar__total {
    color: var(--color-text-muted);
}

.menu-cart-bar__btn {
    flex: 0 0 auto;
    min-height: 48px;
    padding: 0 var(--space-xl);
    background: var(--color-brand-red-bright);
}

.menu-cart-bar__btn:hover:not(:disabled) {
    background: var(--color-brand-red-bright-hover);
}

.menu-cart-bar__btn:focus-visible {
    outline-color: var(--color-brand-red-bright);
}

@media (min-width: 1200px) {
    .menu-cart-bar {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: var(--z-sticky);
        background: var(--color-bg-white);
        border-top: 1px solid var(--color-border-light);
        box-shadow: 0 -10px 26px rgba(33, 26, 16, 0.12);
    }
}

/* ---------- Floating cart CTA (mobile/tablet) ---------- */
.menu-cart-cta {
    position: fixed;
    left: var(--space-md);
    right: var(--space-md);
    bottom: calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
    z-index: calc(var(--z-sticky) + 2);
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 0 var(--space-lg);
    background: var(--color-brand-red-bright);
    color: var(--color-text-inverse);
    border: none;
    border-radius: var(--radius-full);
    box-shadow: 0 6px 24px rgba(225, 27, 28, 0.4);
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 18px;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
    transition: transform var(--transition-fast), filter var(--transition-fast);
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    line-height:var(--leading-ui);
}

.menu-cart-cta:hover {
    filter: brightness(1.05);
    transform: translateY(-2px);
}

.menu-cart-cta__icon {
    width: 22px;
    height: 22px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1.6"/><circle cx="19" cy="21" r="1.6"/><path d="M2.5 3h2l2.6 12.4a2 2 0 0 0 2 1.6h8.7a2 2 0 0 0 2-1.6L21.5 7H6"/></svg>') no-repeat center / contain;
    flex: 0 0 auto;
}

/* ---------- Product sheet (bottom sheet / modal) ---------- */
.menu-sheet-overlay,
.menu-drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    background: var(--color-overlay-backdrop);
    display: flex;
    justify-content: center;
    align-items: flex-end;
    opacity: 0;
    transition: opacity var(--transition-base);
}

.menu-sheet-overlay.is-open,
.menu-drawer-overlay.is-open {
    opacity: 1;
}

.menu-sheet {
    position: relative;
    width: 100%;
    max-width: 520px;
    /* 92vh fallback; 92dvh tracks the visible viewport so the browser toolbar
       never pushes the top (and the close X) above the visible area on mobile. */
    max-height: 92vh;
    max-height: 92dvh;
    background: var(--color-bg-white);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: var(--shadow-modal);
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform var(--motion-modal-enter);
    overflow: hidden;
}

.menu-sheet-overlay.is-open .menu-sheet {
    transform: translateY(0);
}

/* Scroll region: the product image + info scroll together, so the image is NOT
   pinned and the info keeps the full remaining height (owner 2026-10-11). In the
   wide two-column modal this wrapper is flattened (display:contents). */
.menu-sheet__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Stacked-bar helpers: inert in the wide two-column modal (base = wide). */
.menu-sheet__foot-main {
    display: contents;
}

.menu-sheet__qty-info {
    display: none;
}

.menu-sheet__close {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    z-index: 3;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.92);
    color: var(--color-text-primary);
    border: none;
    border-radius: var(--radius-full);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--shadow-button);
    transition: transform var(--transition-fast), color var(--transition-fast);
}

.menu-sheet__close:hover {
    color: var(--color-brand-orange);
    transform: scale(1.05);
}

.menu-sheet__media {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background: var(--color-bg-cream);
}

.menu-sheet__media img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 68vh;
    max-height: 68dvh;
    object-fit: contain;
}

.menu-sheet__cat-badge {
    position: absolute;
    left: var(--space-md);
    bottom: var(--space-md);
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: var(--text-micro);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-inverse);
    background: var(--product-color, var(--color-brand-charcoal));
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-full);
}

.menu-sheet__body {
    padding: var(--space-lg) var(--space-lg) var(--space-xl);
}

.menu-sheet__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-synthesis: none;
    text-transform: none;
    font-size: clamp(28px, 5vw, 34px);
    line-height: var(--leading-heading);
    letter-spacing: -0.015em;
    color: var(--color-text-primary);
    margin-bottom: var(--space-sm);
}

.menu-sheet__desc {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 17px;
    line-height: var(--leading-body);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-md);
}

.menu-sheet__price {
    font-family: var(--font-price);
    font-weight: 700;
    font-size: var(--text-price-lg);
    text-transform: none;
    letter-spacing: normal;
    color: var(--color-text-primary);
    display: flex;
    align-items: baseline;
    gap: var(--space-xs);
    margin-bottom: var(--space-lg);
    font-variant-numeric:lining-nums tabular-nums;
    line-height:var(--leading-price);
}

.menu-sheet__old-price {
    font-family: var(--font-price);
    font-weight: 600;
    font-size: var(--text-subtitle);
    color: var(--color-text-muted);
}

.menu-sheet__group {
    margin-bottom: var(--space-lg);
}

.menu-sheet__group-label {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: var(--text-subtitle);
    text-transform: none;
    letter-spacing: normal;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-sm);
    display: flex;
    align-items: baseline;
    gap: var(--space-xs);
    line-height:var(--leading-ui);
}

.menu-sheet__group-required {
    font-family: var(--font-body);
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: var(--color-text-muted);
    font-size: 14px;
}

.menu-sheet__terms {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.menu-sheet__term {
    min-height: 44px;
    padding: 0 var(--space-md);
    display: inline-flex;
    align-items: center;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: var(--text-subtitle);
    text-transform: none;
    letter-spacing: normal;
    color: var(--color-text-primary);
    background: var(--color-bg-cream);
    border: 1.5px solid var(--color-border-medium);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.menu-sheet__term:hover {
    border-color: var(--product-color, var(--color-brand-orange));
}

.menu-sheet__term.is-selected {
    background: var(--product-color, var(--color-brand-orange));
    border-color: var(--product-color, var(--color-brand-orange));
    color: var(--color-text-inverse);
    box-shadow: var(--shadow-button);
}

.menu-sheet__term.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.menu-sheet__variations {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.menu-sheet__variation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    min-height: 52px;
    padding: var(--space-xs) var(--space-md);
    background: var(--color-bg-cream);
    border: 1.5px solid var(--color-border-light);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.menu-sheet__variation.is-selected {
    border-color: var(--product-color, var(--color-brand-orange));
    background: color-mix(in srgb, var(--product-color, var(--color-brand-orange)) 8%, white);
}

.menu-sheet__variation.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.menu-sheet__variation-name {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 17px;
    text-transform: none;
    letter-spacing: normal;
    color: var(--color-text-primary);
}

.menu-sheet__variation-price {
    font-family: var(--font-price);
    font-weight: 700;
    font-size: var(--text-price);
    text-transform: none;
    letter-spacing: normal;
    white-space: nowrap;
}

/* ---------- Structured option groups (KÖRET etc.) ---------- */
.menu-sheet__option-group {
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px dashed var(--color-border-light);
}

.menu-sheet__option-group:last-child {
    border-bottom: 0;
}

.menu-sheet__option-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-2xs);
}

.menu-sheet__option-label {
    font-family: var(--font-ui);
    font-weight: 700;
    text-transform: none;
    font-size: 19px;
    letter-spacing: normal;
    color: var(--color-text-primary);
    line-height:1.25;
}

.menu-sheet__option-hint {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 15px;
    color: var(--color-text-muted);
}

.menu-sheet__option-required {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: var(--text-micro);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--product-color, var(--color-brand-orange));
    background: color-mix(in srgb, var(--product-color, var(--color-brand-orange)) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--product-color, var(--color-brand-orange)) 40%, transparent);
    border-radius: var(--radius-full);
    padding: 2px 10px;
    white-space: nowrap;
}

.menu-sheet__option-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

/* Radio-style row. The entire row is the tap target (>=48px). Selected state
   never relies on color alone: the radio disc fills AND the row gets a ring. */
.menu-sheet__option {
    --option-color: var(--product-color, var(--color-brand-orange));
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-height: 48px;
    padding: var(--space-xs) var(--space-sm);
    text-align: left;
    font-family: var(--font-ui);
    font-size: 17px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    color: var(--color-text-primary);
    background: var(--color-bg-white);
    border: 1.5px solid var(--color-border-light);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
    line-height:1.25;
}

.menu-sheet__option:hover {
    border-color: var(--option-color);
}

.menu-sheet__option.is-selected {
    border-color: var(--option-color);
    background: color-mix(in srgb, var(--option-color) 7%, white);
    box-shadow: 0 0 0 1px var(--option-color) inset;
}

.menu-sheet__option:focus-visible {
    outline: var(--focus-ring-width) solid var(--option-color);
    outline-offset: var(--focus-ring-offset);
}

.menu-sheet__option.is-error {
    border-color: #8A1F14;
    box-shadow: 0 0 0 1px #8A1F14 inset;
}

.menu-sheet__option-radio {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-border-medium);
    border-radius: 50%;
    background: var(--color-bg-white);
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

/* Multiple-select groups (burger Extrák) use a checkbox-style indicator:
   a filled square instead of the radio disc. Selection state is never
   communicated by color alone (ring + indicator on the row). */
.menu-sheet__option.is-multiple .menu-sheet__option-radio {
    border-radius: 5px;
}

.menu-sheet__option.is-multiple .menu-sheet__option-radio::after {
    border-radius: 2px;
}

.menu-sheet__option-radio::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: transparent;
    transition: background var(--transition-fast);
}

.menu-sheet__option.is-selected .menu-sheet__option-radio {
    border-color: var(--option-color);
}

.menu-sheet__option.is-selected .menu-sheet__option-radio::after {
    background: var(--option-color);
}

.menu-sheet__option-name {
    flex: 1 1 auto;
    min-width: 0;
}

.menu-sheet__option-delta {
    flex: 0 0 auto;
    font-weight: 700;
    font-size: 15px;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.menu-sheet__option-error {
    display: none;
    margin-top: var(--space-2xs);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 15px;
    color: #8A1F14;
}

.menu-sheet__option-group.is-error .menu-sheet__option-error {
    display: block;
}

.menu-sheet__option-group.is-error .menu-sheet__option-head {
    color: #8A1F14;
}

/* Live configured-item summary shown between options and the CTA. */
.menu-sheet__summary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-cream);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-light);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 15px;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-md);
    line-height:var(--leading-compact);
}

.menu-sheet__summary-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.menu-sheet__summary-item strong {
    font-weight: 700;
    color: var(--color-text-primary);
}

.menu-sheet__summary-empty {
    color: var(--color-text-muted);
    font-style: italic;
}

.menu-sheet__soldout-note {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: var(--text-micro);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-muted);
}

/* Sticky CTA footer */
.menu-sheet__foot {
    position: sticky;
    bottom: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-lg) calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, var(--color-bg-white) 70%, rgba(255, 255, 255, 0));
    border-top: 1px solid var(--color-border-light);
}

/* The hero image is content-sized (width: 100%, height: auto, max 68vh), so
   the media box must stay uncapped — a container max-height would clip the
   image and let it overlap the sheet body. On short screens the body scrolls
   while the quantity/add CTA stays pinned in the footer. */

.menu-sheet__qty {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--color-bg-cream);
    border: 1px solid var(--color-border-medium);
    border-radius: var(--radius-full);
    padding: 2px;
}

.menu-sheet__qty-btn {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-full);
    font-size: 22px;
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.menu-sheet__qty-btn:hover {
    background: var(--product-color, var(--color-brand-orange));
    color: var(--color-text-inverse);
}

.menu-sheet__qty-value {
    min-width: 30px;
    text-align: center;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.menu-sheet__add {
    flex: 1 1 auto;
    min-height: 56px;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: 0 var(--space-xl);
    /* Primary purchase CTA = brand red, matching the header "Rendelés" button.
       menu.css is enqueued after buttons.css, so this wins over .btn-primary. */
    background: var(--color-brand-red-bright);
}

.menu-sheet__add:hover:not(:disabled) {
    background: var(--color-brand-red-bright-hover);
}

.menu-sheet__add:focus-visible {
    outline-color: var(--color-brand-red-bright);
}

.menu-sheet__add:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.menu-sheet__add.is-busy {
    pointer-events: none;
    opacity: 0.7;
}

/* ---------- Cart drawer ---------- */
.menu-drawer-overlay {
    justify-content: flex-end;
    align-items: stretch;
}

.menu-drawer {
    position: relative;
    width: 100%;
    max-width: 440px;
    height: 100%;
    background: var(--color-bg-white);
    box-shadow: var(--shadow-modal);
    transform: translateX(100%);
    transition: transform var(--motion-modal-enter);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.menu-drawer-overlay.is-open .menu-drawer {
    transform: translateX(0);
}

.menu-drawer .menu-cart__body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.menu-drawer .menu-cart__head {
    border-radius: 0;
}

/* ---------- Toast ---------- */
.menu-toast {
    position: fixed;
    left: 50%;
    bottom: calc(var(--space-2xl) + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%) translateY(8px);
    z-index: var(--z-notification);
    background: var(--color-brand-charcoal);
    color: var(--color-text-inverse);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--text-subtitle);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-modal);
    opacity: 0;
    transition: opacity var(--transition-base), transform var(--transition-base);
    max-width: calc(100vw - var(--space-2xl));
    text-align: center;
    line-height:var(--leading-compact);
}

.menu-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.menu-toast.is-error {
    background: #8A1F14;
}

/* ---------- Responsive: tablet & desktop ---------- */
@media (min-width: 700px) {
    .menu-item__media {
        width: 148px;
        min-height: 148px;
    }

    .menu-item__body {
        padding-left: var(--space-md);
    }
}

/* ---------- Desktop (>=1200px): full-width menu ----------
   The former 3-column layout (left category rail + center menu + right cart
   sidebar) is gone: the menu owns the content width, the sticky pill bar is
   the only category navigation, and the fixed bottom bar is the only cart
   entry point. */
@media (min-width: 1200px) {
    .menu-layout {
        /* keep the mobile single-column box; explicit for clarity */
        grid-template-columns: minmax(0, 1fr);
        /* reserve room for the fixed bottom cart bar */
        padding-bottom: calc(var(--menu-cart-bar-h) + var(--space-2xl));
    }

    /* Two comfortable product cards per row on standard desktop. */
    .menu-section__items {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-md) var(--space-md);
        align-items: start;
    }

    /* Bigger 1:1 product photo on desktop: the card grows in height with the
       image so the square ratio is preserved (owner decision 2026-10-03). */
    .menu-item__media {
        width: 200px;
        min-height: 200px;
    }

    /* More air between category blocks (banner + its cards stay a unit). */
    .menu-sections {
        gap: 72px;
    }

    /* The floating CTA is replaced by the bottom bar on desktop. */
    .menu-cart-cta {
        display: none;
    }
}

/* ---------- Ultrawide (21:9 / 32:9) ----------
   The former 80vw / 50vw width caps are gone: the menu now uses the shared
   site content width (max-width 1440, exactly like the site header), so
   ultrawide panels get the same centered 1440px column as every other page. */

/* ---------- Product card grid: max two columns ----------
   Two comfortable columns per row on desktop (owner decision 2026-10-03):
   within the shared 1440px content width a third column would squeeze the
   image + long product names + descriptions too much. */

/* ---------- Stacked ordering bar (<1200px) — mockup 2026-10-11 ----------
   Caption ("Mennyiség" / "Azonos összeállításból") + segmented stepper on one
   row, full-width red CTA below. The wide two-column modal keeps its inline
   quantity + add footer. */
@media (max-width: 1199px) {
    .menu-sheet__foot {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-sm);
        background: var(--color-bg-white);
        box-shadow: 0 -10px 24px rgba(33, 26, 22, 0.08);
    }

    .menu-sheet__foot-main {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-md);
        width: 100%;
    }

    .menu-sheet__qty-info {
        display: flex;
        flex-direction: column;
        gap: 1px;
        min-width: 0;
    }

    .menu-sheet__qty-label {
        font-family: var(--font-ui);
        font-weight: 700;
        font-size: 15px;
        line-height: 1.3;
        color: var(--color-text-primary);
    }

    .menu-sheet__qty-sub {
        font-family: var(--font-body);
        font-size: 12.5px;
        line-height: 1.3;
        color: var(--color-text-muted);
    }

    /* Segmented stepper: bordered control, three cells with hairline dividers. */
    .menu-sheet__qty {
        padding: 0;
        align-self: auto;
        background: var(--color-bg-cream);
        border: 1.5px solid var(--color-border-medium);
        border-radius: var(--radius-md);
        overflow: hidden;
    }

    .menu-sheet__qty-btn {
        width: 56px;
        height: 52px;
        border-radius: 0;
    }

    .menu-sheet__qty-value {
        min-width: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-left: 1px solid var(--color-border-light);
        border-right: 1px solid var(--color-border-light);
    }

    .menu-sheet__add {
        width: 100%;
        justify-content: center;
    }
}

/* ---------- Sheet becomes a centered modal on wide screens ---------- */
@media (min-width: 700px) {
    .menu-sheet-overlay {
        align-items: center;
    }

    .menu-sheet {
        max-height: 90vh;
        max-height: 90dvh;
        border-radius: var(--radius-xl);
        transform: translateY(16px) scale(0.98);
    }

    .menu-sheet-overlay.is-open .menu-sheet {
        transform: translateY(0) scale(1);
    }
}

/* ---------- Product sheet: two-column desktop modal (>=1200px) ----------
   Left: the large full-resolution photo with its natural aspect ratio
   (object-fit: contain — never cropped or stretched). Right: the product
   details + configuration in a scrollable column, with the quantity and
   add/save footer pinned to the bottom. Below 1200px the sheet keeps the
   stacked bottom-sheet layout (mobile/tablet unchanged). */
@media (min-width: 1200px) {
    .menu-sheet {
        width: min(1040px, 92vw);
        max-width: min(1040px, 92vw);
        /* Fixed desktop height = the „Churros fahéjas cukros” modal height,
           measured 467px at 1440×900 (2026-10-15). Every product modal is this
           tall; content that overflows scrolls in the body column while the
           qty/CTA footer stays pinned. Clamped to the viewport on short screens. */
        --menu-sheet-h: 467px;
        height: min(var(--menu-sheet-h), 88dvh);
        max-height: min(88vh, 820px);
        max-height: min(88dvh, 820px);
        display: grid;
        grid-template-columns: minmax(0, 45%) minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) auto;
        grid-template-areas:
            "media body"
            "media foot";
    }

    /* Flatten the stacked scroll wrapper so media/body become grid items again. */
    .menu-sheet__scroll {
        display: contents;
    }

    .menu-sheet__media {
        grid-area: media;
        height: 100%;
        align-items: center;
        border-right: 1px solid var(--color-border-light);
        overflow: hidden;
    }

    .menu-sheet__media img {
        width: 100%;
        height: 100%;
        max-height: none;
        object-fit: cover;
    }

    .menu-sheet__body {
        grid-area: body;
        max-height: none;
        overflow-y: auto;
    }

    .menu-sheet__foot {
        grid-area: foot;
    }

    .menu-sheet__close {
        top: var(--space-md);
        right: var(--space-md);
    }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .menu-cats,
    .menu-sheet,
    .menu-drawer,
    .menu-sheet-overlay,
    .menu-drawer-overlay,
    .menu-toast {
        transition: none;
    }

    .menu-item__hit:hover .menu-item__media img,
    .menu-item:hover {
        transform: none;
    }
}