/* Mobile restaurant page. All desktop rules remain owned by the parent/child theme. */
 .menu-price-mobile { display: none; }
 .rf-checkout-mobile-order-summary { display: none; }
@media (max-width: 767.98px) {
    .rf-checkout #cart-header-order { display: block !important; }
    .rf-checkout #cart-header-order > .mt-2 { display: block !important; margin-top: 8px !important; }
    .rf-checkout #cart-header-order .rf-checkout-header-time-slot { display: block !important; width: 100% !important; margin-top: 8px !important; padding: 4px !important; border-radius: 12px !important; background: #fff !important; }
    .rf-checkout #cart-header-order .rf-checkout-header-time-slot .btn-timepicker { display: block !important; width: 100% !important; min-height: 38px !important; border: 0 !important; border-radius: 10px !important; background: #f5f3f0 !important; }
    .rf-checkout-mobile-order-summary { display: block !important; margin-bottom: 12px; }
    .rf-checkout .rf-checkout-mobile-order-summary > div.py-2.border-top { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 8px !important; padding: 0 !important; border-top: 0 !important; }
    .rf-checkout .rf-checkout-mobile-order-summary .rf-order-type-switch { width: 100% !important; flex: 0 0 auto !important; }
    .rf-checkout .rf-checkout-mobile-order-summary .rf-checkout-mobile-time-slot { width: 100% !important; flex: 0 0 auto !important; }
    .rf-checkout-mobile-order-summary .rf-order-time-summary { display: none !important; }
    .rf-checkout-mobile-time-slot { display: block !important; margin-top: 8px !important; padding: 4px !important; border-radius: 12px !important; background: #fff !important; }
    .rf-checkout-mobile-time-slot .btn-timepicker { display: block !important; width: 100% !important; min-height: 38px !important; border: 0 !important; border-radius: 10px !important; background: #f5f3f0 !important; }
    html, body { max-width: 100%; overflow-x: clip; }
    body > header.header { min-height: 60px !important; }
    body > main { padding-top: 0 !important; }

    #page-wrapper > .container { max-width: none; padding: 0 16px; }
    .lb-restaurant-layout { padding-top: 12px !important; padding-bottom: 24px !important; margin-inline: -12px; }
    .lb-restaurant-layout > .col-lg-6 { padding-inline: 12px; }

    .rf-hero { margin: 0 0 16px; overflow: visible !important; border-radius: 0 !important; box-shadow: none !important; background: transparent; }
    .rf-hero__media { height: auto !important; min-height: 0 !important; overflow: visible; background: transparent !important; }
    .rf-hero__bg { position: relative !important; inset: auto !important; width: 100%; height: clamp(178px, 49vw, 205px); overflow: hidden; border-radius: 16px; background: #f0ece8; }
    .rf-hero__bg-img { width: 100%; height: 100%; object-fit: cover; }

    #local-box > .local-search { display: none !important; }
    .rf-hero__card--desktop { display: none !important; }
    .rf-hero__mobile-info { display: grid !important; grid-template-columns: 50px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-top: 14px; }
    .rf-hero__mobile-logo { width: 50px; height: 50px; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 3px 12px rgba(15,23,42,.10); }
    .rf-hero__mobile-logo img, .rf-hero__mobile-logo span { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; object-fit: cover; color: #ff4d00; }
    .rf-hero__mobile-copy { min-width: 0; }
    .rf-hero__mobile-title { overflow: hidden; color: #171717; font-size: clamp(1.35rem, 6vw, 1.5rem); font-weight: 800; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
    .rf-hero__mobile-rating { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; padding: 0; border: 0; background: transparent; color: #6b7280; font-size: .82rem; }
    .rf-hero__mobile-rating span { color: #ff4d00; }
    .rf-hero__mobile-info-btn { display: inline-flex; min-height: 38px; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid #e5e7eb; border-radius: 999px; background: #fff; color: #3f3f46; font-size: .76rem; font-weight: 800; white-space: nowrap; }
    .rf-hero__logo-wrap { width: 52px !important; height: 52px !important; border-radius: 12px !important; box-shadow: 0 4px 14px rgba(15,23,42,.10) !important; }
    .rf-hero__logo-img, .rf-hero__logo-fallback { border-radius: 12px !important; }
    .rf-hero__text { min-width: 0; text-align: left !important; }
    .rf-hero__title { margin: 0 !important; font-size: clamp(1.35rem, 6vw, 1.58rem) !important; line-height: 1.1 !important; font-weight: 800 !important; color: #171717; }
    .rf-hero__rating { margin-top: 6px !important; gap: 2px; font-size: .82rem !important; }
    .rf-hero__rating .rf-star { font-size: .92rem !important; }
    .rating-note, .rf-hero__sub { display: none !important; }
    .rf-hero__actions { grid-column: auto !important; justify-self: end; margin-left: 0 !important; }
    .rf-hero__info-btn { min-height: 38px; padding: 7px 10px !important; border-color: #e5e7eb !important; background: #fff !important; font-size: .76rem !important; white-space: nowrap; box-shadow: none; }

    .rf-mobile-topbar { margin: 0 -4px; padding: 0 4px !important; border: 0 !important; }
    .rf-mobile-topbar > .py-2.border-top { display: flex !important; flex-direction: column; align-items: stretch !important; gap: 8px; padding: 0 !important; border: 0 !important; }
    .rf-order-type-switch { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; min-height: 58px; padding: 3px; gap: 3px; border-radius: 28px; background: #efedea; }
    .rf-order-type-switch__btn { min-width: 0; border: 0 !important; border-radius: 24px !important; padding: 6px 8px !important; background: transparent !important; color: #4b5563; }
    .rf-order-type-switch__btn.is-active { background: #fff !important; color: #171717; box-shadow: 0 1px 5px rgba(15,23,42,.12); }
    .rf-order-type-switch__top { display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 800; line-height: 1.1; }
    .rf-order-type-switch__top i { color: #ff4d00; }
    .rf-order-type-switch__sub { display: block; margin-top: 3px; font-size: .7rem; line-height: 1.05; }

    .lb-menu-panel { display: flex; flex-direction: column; }
    .lb-menu-panel > .rf-mobile-topbar { order: 1; }
    .lb-menu-panel > .menu-search { order: 2; margin-top: 16px; }
    .lb-menu-panel > .lb-mobile-categories-slot { order: 3; }
    .lb-menu-panel > .menu-list { order: 4; }
    .lb-menu-panel .rf-menu-search-wrap { padding: 0 !important; border: 0 !important; }
    .lb-menu-panel .rf-menu-search__input { min-height: 50px; box-shadow: none !important; }

    .rf-mobile-categories { position: sticky; top: 60px; z-index: 90; box-sizing: border-box; min-height: 62px; margin: 0 -16px; padding: 0 8px 0 16px; background: #fff; border-bottom: 1px solid #ece9e5; }
    .rf-mobile-categories__row { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; min-height: 62px; }
    .rf-mobile-categories__slider { grid-column: 1; grid-row: 1; min-width: 0; position: relative; overflow: hidden; }
    .rf-mobile-categories__scroll { width: 100% !important; max-width: none; min-width: 0; overflow-x: auto !important; overflow-y: hidden; scrollbar-width: none; scroll-behavior: smooth; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
    .rf-mobile-categories__scroll::-webkit-scrollbar { display: none; }
    .rf-mobile-categories__list { width: max-content; min-width: 100%; gap: 8px; padding: 12px 0 !important; }
    .rf-mobile-categories__list .nav-item { flex: 0 0 auto; }
    .rf-mobile-categories__list .nav-link { display: block; padding: 8px 14px !important; border: 0; border-radius: 999px; background: transparent; color: #242424; font-size: .84rem; font-weight: 700; line-height: 1.05; white-space: nowrap; }
    .rf-mobile-categories__list .nav-link.active { background: #2b2928; color: #fff; }
    .rf-mobile-categories__more { grid-column: 2; grid-row: 1; justify-self: center; align-self: center; position: relative !important; z-index: 3; display: inline-flex !important; align-items: center; justify-content: center; width: 34px; height: 34px; margin: 0; border: 0; border-radius: 50%; background: #f4f1ed; color: #2d2926; box-shadow: none; }
    .rf-mobile-categories__more:focus-visible { outline: 2px solid #ff4d00; outline-offset: 2px; }

    .rf-category-sheet[hidden] { display: none !important; }
    .rf-category-sheet { position: fixed; inset: 0; z-index: 1100; }
    .rf-category-sheet__backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.48); }
    .rf-category-sheet__panel { position: absolute; left: 16px; right: 16px; top: 8px; bottom: 8px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #e4e1dd; background: #fff; box-shadow: 0 18px 50px rgba(15,23,42,.22); }
    .rf-category-sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid #e8e5e1; }
    .rf-category-sheet__head h2 { margin: 0; color: #2d2926; font-size: 1.18rem; font-weight: 800; }
    .rf-category-sheet__close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; background: transparent; color: #2d2926; font-size: 1.2rem; }
    .rf-category-sheet__list { overflow-y: auto; overscroll-behavior: contain; }
    .rf-category-sheet__list a { display: block; padding: 18px 16px; border-bottom: 1px solid #eee; color: #2d2926; font-weight: 700; text-decoration: none; }
    .rf-category-sheet__list a.active { color: #fff; background: #2d2926; }
    .rf-category-sheet-open { overflow: hidden; }
    @media (min-width: 768px) { .rf-mobile-categories__more, .rf-category-sheet { display: none !important; } }

    .menu-list { margin-top: 8px; }
    .menu-group-item { padding-inline: 0 !important; }
    .menu-group-item .category-title { padding: 13px 0 !important; font-size: 1.05rem; font-weight: 800; }
    .menu-group-item .category-title .badge,
    .menu-group-item .category-title small { font-size: .75rem; font-weight: 600; }
    .menu-items { padding-inline: 0 !important; }
    .menu-item.menu-item-card { padding: 9px 10px !important; border-radius: 10px !important; box-shadow: 0 1px 5px rgba(15,23,42,.08) !important; margin-bottom: 9px !important; }
    .menu-item.menu-item-card:hover, .menu-item.menu-item-card:focus-within { transform: none !important; box-shadow: none !important; }
    .menu-item.menu-item-card .menu-card-row { gap: 10px !important; }
    .menu-item.menu-item-card .menu-name { margin-bottom: 2px !important; font-size: .86rem !important; line-height: 1.2; }
    .menu-item.menu-item-card .menu-desc { margin-top: 0; font-size: .73rem !important; line-height: 1.25; }
    .menu-item.menu-item-card .menu-detail { flex-direction: column; align-items: flex-end; justify-content: flex-start !important; gap: 5px !important; width: auto; }
    .menu-item.menu-item-card .menu-price { display: none; }
    .menu-item.menu-item-card .menu-price-mobile { display: block !important; margin-top: 3px; color: #f4511e; font-size: .8rem !important; line-height: 1.15; }
    .menu-item.menu-item-card .menu-price-mobile s { margin-right: 3px; color: #6b7280; }
    .menu-item.menu-item-card .menu-price { font-size: .8rem !important; }
    .menu-item.menu-item-card .menu-item-image { flex-basis: 74px !important; width: 74px !important; height: 64px !important; border-radius: 9px; }
    .menu-item.menu-item-card .menu-button .btn-cart { width: 38px !important; min-width: 38px !important; height: 38px !important; border: 0 !important; border-radius: 50% !important; background: #f4511e !important; color: #fff !important; box-shadow: none !important; }
    .menu-item.menu-item-card .menu-button .btn-cart i { font-size: 14px !important; color: #fff !important; }

    #cart-mobile-buttons { right: max(16px, env(safe-area-inset-right)) !important; bottom: max(16px, calc(env(safe-area-inset-bottom) + 12px)) !important; }

    /* Compatibility for the currently cached live Blade DOM. Remove after the
       V3 Blade markers are visible in the public HTML. */
    .content #local-box .rf-hero__media {
        display: grid;
        grid-template-rows: clamp(178px, 49vw, 205px) auto;
        gap: 14px;
        height: auto !important;
        min-height: 0 !important;
    }
    .content #local-box .rf-hero__media > .rf-hero__bg {
        position: relative !important;
        inset: auto !important;
        grid-row: 1;
        height: 100%;
        overflow: hidden;
        border-radius: 16px;
    }
    .content #local-box .rf-hero__media > .rf-hero__card:not(.rf-hero__card--desktop) {
        position: relative !important;
        inset: auto !important;
        grid-row: 2;
        display: grid !important;
        grid-template-columns: 50px minmax(0, 1fr) auto;
        align-items: center !important;
        gap: 10px !important;
        width: 100%;
        margin: 0;
        padding: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    .content #local-box .rf-hero__card:not(.rf-hero__card--desktop) .rf-hero__logo-wrap {
        width: 50px !important;
        height: 50px !important;
        border-radius: 12px !important;
    }
    .content #local-box .rf-hero__card:not(.rf-hero__card--desktop) .rf-hero__title {
        overflow: hidden;
        font-size: clamp(1.35rem, 6vw, 1.5rem) !important;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .content #local-box .rf-hero__card:not(.rf-hero__card--desktop) .rating-note,
    .content #local-box .rf-hero__card:not(.rf-hero__card--desktop) .rf-hero__sub { display: none !important; }
    .content #local-box .rf-hero__card:not(.rf-hero__card--desktop) .rf-hero__actions {
        grid-column: auto !important;
        justify-self: end;
    }

    .content > .panel:has(> .rf-mobile-topbar) { display: flex; flex-direction: column; }
    .content > .panel:has(> .rf-mobile-topbar) > .rf-mobile-topbar { display: contents !important; }
    .content > .panel:has(> .rf-mobile-topbar) > .rf-mobile-topbar > .py-2 { order: 1; }
    .content > .panel:has(> .rf-mobile-topbar) > .rf-mobile-topbar > .lb-menu-search { display: none !important; }
    .content > .panel:has(> .rf-mobile-topbar) > .menu-search { order: 2; margin-top: 16px; }
    .content > .panel:has(> .rf-mobile-topbar) > .rf-mobile-topbar > .rf-mobile-categories { order: 3; }
    .content > .panel:has(> .rf-mobile-topbar) > .menu-list { order: 4; }
}

/* Compact restaurant masthead, inspired by the mobile reference. This file is
   loaded by the local layout only; all new rules stop below tablet width. */
@media (max-width: 767.98px) {
    body > header.header:has(.lb-header--restaurant) {
        min-height: 84px !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .10);
    }
    body > header.header .lb-header--restaurant .lb-header__inner {
        height: 84px;
        min-height: 84px;
        padding-inline: 12px 20px;
        gap: 0;
    }
    .lb-header--restaurant .lb-restaurant-back { color: #f36805; flex-basis: 32px; width: 32px; }
    body > header.header .lb-header--restaurant .navbar-brand .rf-brand-copy { display: none !important; }
    body > header.header .lb-header--restaurant .navbar-brand img.img-logo { width: 36px !important; height: 36px !important; }

/* Ensure the brand copy (Lieferbaba.de + slogan) is visible on restaurant pages */
body > header.header .lb-header--restaurant .navbar-brand .rf-brand-copy {
    display: flex !important;
}

/* Remove any unintended vertical space between the header and the hero image */
.lb-hero, .content #local-box .rf-hero__media {
    margin-top: 12px !important;
}

/* Increase slogan font size (subtitle) on mobile */
.rf-brand-copy__subtitle {
    font-size: 2.8rem !important; /* doppelt so groß */
}

/* Override any hidden subtitle on restaurant pages */
.lb-header--restaurant .navbar-brand .rf-brand-copy__subtitle {
    display: block !important;
    font-size: 2.8rem !important;
}

    #page-wrapper > .container { padding-inline: 20px; }
    .lb-restaurant-layout { padding-top: 0 !important; }
    .rf-hero { position: relative; margin-bottom: 24px; }
    .content #local-box .rf-hero__media {
        display: block;
        height: auto !important;
        min-height: 0 !important;
    }
    .content #local-box .rf-hero__media > .rf-hero__bg {
        display: block;
        height: clamp(140px, 40vw, 220px);
        border-radius: 14px;
    }
    .rf-hero__mobile-info {
        position: relative;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 10px;
        margin-top: 16px;
    }
    .rf-hero__mobile-logo {
        position: absolute;
        left: 12px;
        bottom: calc(100% + 28px);
        width: 56px;
        height: 56px;
        border-radius: 8px;
        box-shadow: 0 1px 6px rgba(0, 0, 0, .12);
    }
    .rf-hero__mobile-logo img { object-fit: contain; }
    .rf-hero__mobile-title {
        color: #303438;
        font-size: 24px;
        line-height: 1.2;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .rf-hero__mobile-rating { margin-top: 6px; color: #303438; font-size: 13px; }
    button.rf-hero__mobile-rating,
    .rf-hero__mobile-rating { text-decoration: none !important; border-bottom: 0 !important; }
    .rf-hero__mobile-rating .rf-hero__mobile-rating-value {
        color: #303438 !important;
        font-size: .78rem !important;
        line-height: 1.1;
        text-decoration: underline !important;
        text-underline-offset: 2px;
    }
    .rf-hero__mobile-rating span { color: #f36805; font-size: 20px; line-height: 1; }
    .rf-hero__mobile-info-btn {
        min-height: 34px;
        padding: 7px 10px;
        border: 0;
        background: #f5f3f0;
        color: #303438;
        font-size: 13px;
        font-weight: 400;
    }
    .rf-hero__mobile-actions { display: flex; align-items: center; gap: 6px; }
    .rf-hero__mobile-favorite {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 34px;
        width: 34px;
        height: 34px;
        padding: 7px;
        border: 0;
        border-radius: 50%;
        background: #f5f3f0;
        color: #303438;
    }
    .rf-hero__mobile-favorite svg { fill: none; stroke: currentColor; stroke-width: 1.8; }
    .rf-hero__mobile-favorite.is-active { color: #f36805; }
    .rf-hero__mobile-favorite.is-active svg { fill: currentColor; }
    .rf-hero__mobile-favorite:focus-visible { outline: 2px solid #f36805; outline-offset: 2px; }
    .rf-order-type-switch { min-height: 48px; padding: 2px; gap: 0; background: #efede9; }
    .rf-order-type-switch__btn { padding: 5px 8px !important; }
    .rf-order-type-switch__top { font-size: 14px; font-weight: 500; }
    .rf-order-type-switch__top i { color: #303438; }
    .rf-order-type-switch__btn.is-active .rf-order-type-switch__top i { color: #f36805; }
    .rf-order-type-switch__sub { font-size: 11px; }
    .rf-order-time-summary {
        display: flex !important;
        width: 100%;
        min-height: 42px;
        align-items: center;
        gap: 8px;
        margin-top: 0;
        padding: 9px 14px;
        border: 1px solid #e6e1dc;
        border-radius: 12px;
        background: #fff;
        color: #242424;
        font-size: 14px;
        font-weight: 600;
        text-align: left;
        box-shadow: 0 1px 4px rgba(15, 23, 42, .06);
    }
    .rf-order-time-summary i:first-child { color: #f36805; }
    .rf-order-time-summary i:last-child { margin-left: auto; color: #6b625e; }
    .rf-order-time-summary:focus-visible { outline: 2px solid #f36805; outline-offset: 2px; }

    /* Restaurant-page order controls: mode first, live time summary directly below. */
    .content #local-box > .card {
        margin-top: 8px !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    .content #local-box > .card > .card-body {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 0 !important;
    }
    .content #local-box > .card .rf-mobile-order-type {
        order: 1;
        margin-bottom: 0 !important;
    }
    .content #local-box > .card .rf-mobile-order-time {
        order: 2;
        margin-bottom: 0 !important;
    }
    .content #local-box > .card .rf-mobile-order-time #orderTimePicker {
        width: 100%;
        min-height: 42px;
        padding: 8px 14px !important;
        border: 1px solid #e6e1dc !important;
        border-radius: 12px !important;
        background: #fff !important;
        color: #242424;
        text-align: left;
        box-shadow: 0 1px 4px rgba(15, 23, 42, .06);
    }
    .content #local-box > .card .rf-mobile-order-time #orderTimePicker b {
        font-weight: 600;
    }
    .lb-menu-panel > .menu-search,
    .content > .panel:has(> .rf-mobile-topbar) > .menu-search { margin-top: 30px; }
    .content .rf-menu-search-wrap { padding: 0 !important; border: 0 !important; }
    .content .rf-menu-search__input {
        height: 42px;
        min-height: 42px;
        border: 1px solid #96918c;
        border-radius: 999px;
        background: #fff;
        padding: 9px 42px 9px 54px;
        font-size: 16px;
        font-weight: 400;
        box-shadow: none !important;
    }
    .content .rf-menu-search__input::placeholder { color: #777; font-weight: 400; }
    .content .rf-menu-search__icon { left: 20px; color: #f36805; font-size: 20px; }
    .content .rf-menu-search__input:focus { border-color: #f36805; outline: 2px solid #ffe0ca; outline-offset: 2px; }
    .rf-hero__mobile-info-btn:focus-visible,
    .rf-hero__mobile-rating:focus-visible,
    .rf-order-type-switch__btn:focus-visible { outline: 2px solid #f36805; outline-offset: 2px; }
    /* Keep the category scroller inside the same column as search and dishes. */
    body,
    body > main,
    #page-wrapper,
    .lb-restaurant-layout .content,
    .lb-restaurant-layout .panel,
    .lb-restaurant-layout .menu-group-item,
    .lb-restaurant-layout .category-title { background-color: #fff; }
    .lb-restaurant-layout .content,
    .lb-menu-panel,
    .lb-mobile-categories-slot { min-width: 0; max-width: 100%; }
    .lb-mobile-categories-slot { background: #fff; }
    .lb-restaurant-layout .rf-mobile-categories {
        top: 84px;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0 8px 0 16px;
        background: #fff;
        box-shadow: none;
    }
    .rf-mobile-categories.rf-mobile-categories--pinned {
        top: 84px !important;
        margin-top: 0 !important;
    }
    .rf-mobile-categories__scroll { min-width: 0; max-width: 100%; }

    /* Older cached markup uses the same card for mobile and desktop. */
    .content #local-box .rf-hero__card:not(.rf-hero__card--desktop) {
        grid-template-columns: minmax(0, 1fr) auto !important;
        margin-top: 16px;
    }
    .content #local-box .rf-hero__card:not(.rf-hero__card--desktop) .rf-hero__logo-wrap {
        position: absolute;
        left: 12px;
        bottom: calc(100% + 28px);
        width: 56px !important;
        height: 56px !important;
        border-radius: 8px !important;
    }
    .content #local-box .rf-hero__card:not(.rf-hero__card--desktop) .rf-hero__title {
        font-size: 24px !important;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* Compact vertical rhythm between restaurant controls on mobile. */
    .content #local-box .rf-hero { margin-bottom: 8px !important; }
    .content #local-box .rf-hero__mobile-info { margin-top: 8px !important; }
    .content #local-box > .card { margin-top: 0 !important; }
    .content #local-box > .card > .card-body { gap: 4px; }
    .rf-mobile-topbar > .py-2.border-top { gap: 4px; }
    .lb-menu-panel > .menu-search,
    .content > .panel:has(> .rf-mobile-topbar) > .menu-search { margin-top: 8px !important; }
    .lb-restaurant-layout .rf-mobile-categories__row { min-height: 52px; }
    .lb-restaurant-layout .rf-mobile-categories__list { padding-top: 7px !important; padding-bottom: 7px !important; }

    /* Force the CartBox article dialog to the viewport bottom on mobile. */
    #cart-box-modal.modal.show {
        position: fixed !important;
        inset: 0 !important;
        display: flex !important;
        align-items: flex-end !important;
        background: rgba(35, 35, 35, .42) !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
    body:has(#cart-box-modal.modal.show) .modal-backdrop.show {
        opacity: 0 !important;
        background: transparent !important;
    }
    body.modal-open,
    body:has(#cart-box-modal.modal.show) {
        overflow: hidden !important;
        overscroll-behavior: none !important;
        touch-action: none !important;
    }
    #cart-box-modal.modal.show > .modal-dialog,
    #cart-box-modal.modal.show > .menu-item-modal {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-width: none !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        min-height: 0 !important;
        margin: 0 !important;
        display: block !important;
        transform: none !important;
    }
    #cart-box-modal.modal.show > .modal-dialog > .modal-content,
    #cart-box-modal.modal.show > .menu-item-modal > .modal-content {
        width: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
        border: 0 !important;
        border-radius: 24px 24px 0 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    #cart-box-modal.modal.show .modal-body {
        min-height: 0 !important;
        max-height: none !important;
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        touch-action: pan-y !important;
    }
    #cart-box-modal .modal-body .spinner {
        font-size: .8rem;
    }
    #cart-box-modal .modal-body .spinner i {
        font-size: 1.35rem !important;
    }
    #cart-box-modal .modal-content { position: relative; }
    #cart-box-modal .modal-top {
        order: 1;
        margin: 0 !important;
        border-radius: 24px 24px 0 0 !important;
        box-shadow: none !important;
    }
    #cart-box-modal .modal-top img {
        width: 100%;
        max-height: 260px;
        object-fit: cover;
    }
    #cart-box-modal .modal-header {
        order: 2;
        position: static !important;
        padding: 14px 54px 8px 18px !important;
        border-bottom: 0 !important;
    }
    #cart-box-modal .modal-header::before { display: none; }
    #cart-box-modal .modal-title {
        margin: 0;
        font-size: 1.15rem;
        font-weight: 800;
    }
    #cart-box-modal .modal-header .btn-close {
        position: absolute !important;
        top: 16px;
        right: 16px;
        z-index: 10;
        width: 56px;
        height: 56px;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 50%;
        background-color: #f4f4f4;
        background-size: 20px;
        opacity: 1;
        box-shadow: none;
    }
    #cart-box-modal .modal-header .btn-close:hover,
    #cart-box-modal .modal-header .btn-close:focus {
        opacity: 1;
        box-shadow: none;
    }
    #cart-box-modal .mobile-item-price {
        margin-top: 3px;
        color: #f4511e;
        font-size: .9rem;
        font-weight: 800;
    }
    #cart-box-modal .modal-body { order: 3; }
    #cart-box-modal .menu-options {
        padding: 12px 0;
        border-top: 1px solid #eee9e4;
    }
    #cart-box-modal .menu-option {
        border-bottom: 1px solid #eee9e4;
    }
    #cart-box-modal .modal-footer {
        order: 4;
        flex: 0 0 auto;
    }
}

@media (max-width: 374.98px) {
    .rf-hero__mobile-info { grid-template-columns: minmax(0, 1fr); }
    .rf-hero__mobile-actions { justify-content: flex-end; }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .lb-restaurant-layout { padding-top: 20px !important; }
    .rf-hero__media { height: 250px; }
}

/* Keep the mobile CartBox as one centered Lieferando-style dialog. The
   viewport outside the card is only the dimmed overlay, never an empty white
   part of the modal content. */
@media (max-width: 767.98px) {
    #cart-box-modal.modal.show {
        position: fixed !important;
        inset: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px !important;
        overflow: hidden !important;
        background: rgba(35, 35, 35, .42) !important;
        overscroll-behavior: none !important;
    }

    body:has(#cart-box-modal.modal.show) .modal-backdrop.show {
        opacity: 0 !important;
        background: transparent !important;
    }

    #cart-box-modal.modal.show > .modal-dialog,
    #cart-box-modal.modal.show > .menu-item-modal {
        position: relative !important;
        inset: auto !important;
        width: min(444px, 100%) !important;
        height: auto !important;
        max-height: calc(100dvh - 16px) !important;
        margin: 0 !important;
        display: block !important;
        transform: none !important;
    }

    #cart-box-modal.modal.show > .modal-dialog > .modal-content,
    #cart-box-modal.modal.show > .menu-item-modal > .modal-content {
        width: 100% !important;
        height: auto !important;
        max-height: calc(100dvh - 16px) !important;
        overflow: hidden !important;
        border-radius: 0 !important;
    }

    /* Article dialog layout: compact Lieferando-style card without a
       product/icon banner. Existing form controls and request handlers stay
       unchanged; these rules only change presentation on mobile. */
    #cart-box-modal.modal.show .modal-content {
        display: flex !important;
        flex-direction: column !important;
        border-radius: 24px !important;
        background: #fff !important;
        box-shadow: 0 18px 44px rgba(0, 0, 0, .24) !important;
    }

    #cart-box-modal.modal.show .modal-top {
        display: block !important;
        order: 1 !important;
        margin: 0 !important;
        border-radius: 24px 24px 0 0 !important;
        box-shadow: none !important;
        background: #f6f2ec !important;
    }

    #cart-box-modal.modal.show .modal-top img {
        display: block !important;
        width: 100% !important;
        max-height: 260px !important;
        object-fit: cover !important;
        border-radius: 24px 24px 0 0 !important;
    }

    #cart-box-modal.modal.show .modal-header {
        order: 1 !important;
        position: relative !important;
        padding: 38px 52px 8px 20px !important;
        background: #fff !important;
    }

    #cart-box-modal.modal.show:has(.modal-top) .modal-header {
        order: 2 !important;
        position: static !important;
        padding-top: 20px !important;
    }

    #cart-box-modal.modal.show .modal-header::before {
        display: block !important;
        content: '';
        position: absolute;
        top: 11px;
        left: 50%;
        width: 42px;
        height: 4px;
        border-radius: 999px;
        background: #d2d2d2;
        transform: translateX(-50%);
    }

    #cart-box-modal.modal.show .modal-title {
        color: #171717 !important;
        font-size: 1.28rem !important;
        font-weight: 800 !important;
        line-height: 1.15 !important;
    }

    #cart-box-modal.modal.show .mobile-item-price {
        margin-top: 5px !important;
        color: #ff4d00 !important;
        font-size: 1rem !important;
        font-weight: 800 !important;
    }

    #cart-box-modal.modal.show .modal-header .btn-close {
        top: 13px !important;
        right: 13px !important;
        width: 42px !important;
        height: 42px !important;
        border-radius: 50% !important;
        background-color: #f4f4f4 !important;
        background-size: 19px !important;
    }

    #cart-box-modal.modal.show .modal-body {
        order: 2 !important;
        padding: 0 20px 12px !important;
        max-height: min(58dvh, 520px) !important;
        overflow-y: auto !important;
    }

    #cart-box-modal.modal.show:has(.modal-top) .modal-body {
        order: 3 !important;
    }

    #cart-box-modal.modal.show .rf-modal-description {
        margin: 0 0 16px !important;
        padding: 0 !important;
        color: #5f636b !important;
        font-size: .95rem !important;
        line-height: 1.55 !important;
    }

    #cart-box-modal.modal.show .rf-modal-description p {
        margin-bottom: 0 !important;
    }

    #cart-box-modal.modal.show .menu-options {
        margin: 0 0 16px !important;
        padding: 16px 16px 10px !important;
        border: 1px solid #f0e2da !important;
        border-radius: 16px !important;
        background: #fffaf7 !important;
    }

    #cart-box-modal.modal.show .menu-option {
        margin: 0 0 14px !important;
        padding: 0 0 12px !important;
        border-bottom: 1px solid #eee7e2 !important;
    }

    #cart-box-modal.modal.show .menu-option:last-child {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        border-bottom: 0 !important;
    }

    #cart-box-modal.modal.show .menu-options .option-details {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        margin: 0 0 8px !important;
        padding: 0 !important;
        background: transparent !important;
    }

    #cart-box-modal.modal.show .menu-options .option-details h5 {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 !important;
        color: #171717 !important;
        font-size: .92rem !important;
        font-weight: 800 !important;
    }

    #cart-box-modal.modal.show .menu-options .option-details h5 .pull-right {
        float: none !important;
        margin-left: auto !important;
        white-space: nowrap !important;
        color: #ff4d00 !important;
        font-size: .78rem !important;
        font-weight: 700 !important;
    }

    #cart-box-modal.modal.show .menu-options .option-group {
        padding: 0 !important;
    }

    #cart-box-modal.modal.show .menu-comment {
        margin: 0 !important;
        padding: 14px !important;
        border: 1px solid #eee2db !important;
        border-radius: 14px !important;
        background: #fff !important;
    }

    #cart-box-modal.modal.show .menu-comment textarea {
        min-height: 68px !important;
        padding: 10px 12px !important;
        border: 0 !important;
        resize: vertical;
        box-shadow: none !important;
        /* iOS Safari zooms focused controls below 16px. */
        font-size: 16px !important;
        line-height: 1.35 !important;
    }

    #cart-box-modal.modal.show input,
    #cart-box-modal.modal.show select,
    #cart-box-modal.modal.show textarea {
        font-size: 16px !important;
    }

    #cart-box-modal.modal.show .modal-footer {
        order: 3 !important;
        padding: 14px 20px calc(14px + env(safe-area-inset-bottom)) !important;
        border-top: 1px solid #f2efed !important;
        background: #fff !important;
    }

    #cart-box-modal.modal.show:has(.modal-top) .modal-footer {
        order: 4 !important;
    }

    #cart-box-modal.modal.show .modal-footer .row {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 14px !important;
    }

    #cart-box-modal.modal.show .modal-footer .col-sm-5,
    #cart-box-modal.modal.show .modal-footer .col-sm-7 {
        width: 100% !important;
        max-width: none !important;
        flex: 0 0 auto !important;
        padding: 0 !important;
    }

    #cart-box-modal.modal.show .modal-footer .input-group {
        width: 164px !important;
        max-width: 100% !important;
        min-height: 46px !important;
        margin: 0 auto !important;
        border: 1px solid #f0e3dc !important;
        background: #fff !important;
    }

    #cart-box-modal.modal.show .modal-footer .input-group .form-control {
        min-width: 42px !important;
        padding: 0 !important;
        border: 0 !important;
        font-size: 1rem !important;
        font-weight: 800 !important;
    }

    #cart-box-modal.modal.show .modal-footer .input-group .btn {
        min-width: 42px !important;
        padding: 0 !important;
        color: #171717 !important;
        font-size: 1.1rem !important;
    }

    #cart-box-modal.modal.show .modal-footer .input-group .btn:last-child {
        color: #ff4d00 !important;
    }

    #cart-box-modal.modal.show .modal-footer .col-sm-7 {
        flex: 0 0 auto !important;
    }

    #cart-box-modal.modal.show .modal-footer .btn-primary > .d-flex {
        gap: 4px !important;
    }

    #cart-box-modal.modal.show .modal-footer .btn-primary > .d-flex .col {
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    #cart-box-modal.modal.show .modal-footer .btn-primary {
        width: 100% !important;
        min-height: 50px !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: #ff7017 !important;
        box-shadow: none !important;
        font-size: 1rem !important;
        font-weight: 800 !important;
    }

    .cart-items .cart-note-link {
        all: unset !important;
        box-sizing: border-box !important;
        color: #3f454b !important;
        cursor: pointer !important;
        display: block !important;
        font-size: 14px !important;
        line-height: 1.35 !important;
        margin: 4px 0 0 !important;
        padding: 0 !important;
        text-align: left !important;
        text-decoration: underline !important;
        width: max-content !important;
    }
}