:root {
    --lava-red: #E34226;
    --golden-fry: #FDB813;
    --deep-orange: #F28C28;
    --milkshake-cream: #FFF9E1;
    --chocolate-brown: #632E11;
    --white: #ffffff;
    --text-dark: #333333;
    --text-muted: #666666;
    --line: #e0e0e0;
    --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 20px 25px rgba(0, 0, 0, 0.15);
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --field-bg: #ffffff;
    --field-bg-muted: #f2f4f8;
    --field-border: #cfd6e2;
    --field-border-strong: #b8c2d3;
    --field-focus: #f28c28;
    --field-placeholder: #7d8799;
}

/* Native app final parity pass: Home top block, Menu list, Basket checkout */
@media (max-width: 1024px) {
    .public-page.native-app.page-index .section-home-menu-overview {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    .public-page.native-app.page-index .section-home-menu-overview > .container {
        padding: 0 14px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .public-page.native-app.page-index .app-delivery-mode-card {
        margin: 0 0 14px !important;
        gap: 14px !important;
        padding: 0 !important;
        text-decoration: none;
    }

    .public-page.native-app.page-index .app-delivery-mode-icon {
        width: 72px !important;
        height: 72px !important;
    }

    .public-page.native-app.page-index .app-delivery-mode-icon svg {
        width: 31px !important;
        height: 31px !important;
    }

    .public-page.native-app.page-index .app-delivery-mode-text strong {
        font-size: 1.05rem !important;
        letter-spacing: 0.03em !important;
    }

    .public-page.native-app.page-index .app-delivery-mode-text small {
        font-size: 0.86rem !important;
        line-height: 1.22 !important;
    }

    .public-page.native-app.page-index .app-home-payment-strip {
        margin: 0 0 14px !important;
    }

    .public-page.native-app.page-index .app-home-payment-strip > img {
        border-radius: 8px !important;
    }

    .public-page.native-app.page-index .app-home-explore-head {
        margin: 0 0 8px !important;
    }

    .public-page.native-app.page-index .app-home-explore-head h2 {
        font-size: 2.02rem !important;
        line-height: 1.02 !important;
        letter-spacing: -0.02em !important;
    }

    .public-page.native-app.page-index .app-home-explore-head a {
        font-size: 0.82rem !important;
        letter-spacing: 0.03em !important;
        text-transform: uppercase !important;
    }

    .public-page.native-app.page-index .app-home-explore-copy {
        margin: 0 0 14px !important;
        font-size: 0.88rem !important;
        line-height: 1.45 !important;
        max-width: none !important;
    }

    .public-page.native-app.page-index .app-home-categories-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .public-page.native-app.page-index .app-home-categories-grid .category-card {
        min-height: 170px !important;
        padding: 10px 8px 12px !important;
        border-radius: 12px !important;
        box-shadow: 0 3px 8px rgba(17, 24, 39, 0.07) !important;
    }

    .public-page.native-app.page-index .app-home-categories-grid .category-card-media {
        height: 104px !important;
        border-radius: 10px !important;
        margin-bottom: 9px !important;
    }

    .public-page.native-app.page-index .app-home-categories-grid .category-card img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        padding: 8px !important;
    }

    .public-page.native-app.page-index .app-home-categories-grid .category-card h4 {
        font-size: 0.84rem !important;
        line-height: 1.2 !important;
    }

    .public-page.native-app.page-index .app-home-all-items-banner {
        margin-top: 14px !important;
        border-radius: 16px !important;
    }

    .public-page.native-app.page-menu .page-hero {
        display: none !important;
    }

    .public-page.native-app.page-menu .section .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .public-page.native-app.page-menu .menu-filters-shell {
        margin: 0 0 8px !important;
        top: calc(74px + env(safe-area-inset-top)) !important;
        background: #f3f3f5 !important;
        z-index: 1400 !important;
    }

    .public-page.native-app.page-menu .menu-filters-shell .filters-bar {
        gap: 22px !important;
        padding: 0 0 2px !important;
        overflow-x: auto !important;
        scrollbar-width: none;
    }

    .public-page.native-app.page-menu .menu-filters-shell .filters-bar::-webkit-scrollbar {
        display: none;
    }

    .public-page.native-app.page-menu .menu-filters-shell .filter-btn {
        min-height: auto !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 0 10px !important;
        color: #161c35 !important;
        font-size: 1rem !important;
        font-weight: 700 !important;
        line-height: 1.15 !important;
        transform: none !important;
    }

    .public-page.native-app.page-menu .menu-filters-shell .filter-btn::before,
    .public-page.native-app.page-menu .menu-filters-shell .filter-btn::after {
        content: none !important;
        display: none !important;
    }

    .public-page.native-app.page-menu .menu-filters-shell .filter-btn .filter-btn-icon {
        display: none !important;
    }

    .public-page.native-app.page-menu .menu-filters-shell .filter-btn.active {
        color: #f15a24 !important;
    }

    .public-page.native-app.page-menu .menu-filters-shell .menu-filter-indicator {
        height: 4px !important;
        border-radius: 999px !important;
        bottom: 0 !important;
        top: auto !important;
        background: #f15a24 !important;
        box-shadow: none !important;
    }

    .public-page.native-app.page-menu .cards-grid.app-menu-list {
        display: block !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        border: 1px solid #e7e9ef !important;
        border-radius: 14px !important;
        background: #fff !important;
        overflow: hidden !important;
    }

    .public-page.native-app.page-menu .app-menu-group-title {
        display: block !important;
        margin: 0 !important;
        padding: 12px !important;
        border-top: 1px solid #eceef4 !important;
        border-bottom: 1px solid #eceef4 !important;
        background: #f4f5f8 !important;
        color: #f15a24 !important;
        font-size: 1.04rem !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        letter-spacing: 0.01em !important;
    }

    .public-page.native-app.page-menu .app-menu-group-title:first-child {
        border-top: 0 !important;
    }

    .public-page.native-app.page-menu .menu-card {
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        min-height: 116px !important;
        padding: 12px !important;
        border: 0 !important;
        border-radius: 0 !important;
        border-bottom: 1px solid #edf0f6 !important;
        box-shadow: none !important;
        animation: none !important;
    }

    .public-page.native-app.page-menu .menu-card:last-child {
        border-bottom: 0 !important;
    }

    .public-page.native-app.page-menu .menu-card-image {
        width: 104px !important;
        height: 84px !important;
        flex: 0 0 104px !important;
        border-radius: 12px !important;
        object-fit: contain !important;
        background: #fafbfd !important;
    }

    .public-page.native-app.page-menu .menu-card .category-tag {
        display: none !important;
    }

    .public-page.native-app.page-menu .menu-card-body {
        padding: 0 !important;
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        gap: 4px 10px !important;
        align-items: center !important;
    }

    .public-page.native-app.page-menu .menu-card h3 {
        margin: 0 !important;
        font-size: 1.08rem !important;
        line-height: 1.22 !important;
        color: #12162f !important;
    }

    .public-page.native-app.page-menu .menu-card-description-wrap {
        grid-column: 1 / -1 !important;
        margin: 0 !important;
        gap: 4px !important;
    }

    .public-page.native-app.page-menu .menu-card .menu-card-description {
        margin: 0 !important;
        font-size: 0.88rem !important;
        line-height: 1.32 !important;
        color: #7b8190 !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        overflow: hidden !important;
    }

    .public-page.native-app.page-menu .menu-card .menu-card-read-more {
        font-size: 0.75rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        color: #f15a24 !important;
        text-decoration: underline !important;
        text-underline-offset: 2px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    .public-page.native-app.page-menu .menu-card-footer {
        display: contents !important;
    }

    .public-page.native-app.page-menu .menu-card-footer .price {
        grid-column: 1 / 2 !important;
        font-size: 1.1rem !important;
        font-weight: 800 !important;
        color: #f15a24 !important;
        align-self: end !important;
    }

    .public-page.native-app.page-menu .menu-card-footer .btn {
        grid-column: 2 / 3 !important;
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        min-height: 50px !important;
        border-radius: 999px !important;
        border: 1px solid #dfe3ea !important;
        background: #fff !important;
        color: transparent !important;
        font-size: 0 !important;
        line-height: 0 !important;
        text-indent: -9999px !important;
        overflow: hidden !important;
        padding: 0 !important;
        box-shadow: 0 5px 10px rgba(17, 24, 39, 0.08) !important;
        position: relative !important;
    }

    .public-page.native-app.page-menu .menu-card-footer .btn::before {
        content: "+" !important;
        position: absolute !important;
        inset: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #11162f !important;
        font-size: 1.9rem !important;
        line-height: 1 !important;
        text-indent: 0 !important;
    }

    .public-page.native-app.page-cart .checkout-layout {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .public-page.native-app.page-cart .checkout-aside {
        display: none !important;
    }

    .public-page.native-app.page-cart .card-form.checkout-form {
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        gap: 12px !important;
    }

    .public-page.native-app.page-cart .checkout-customer-fields {
        border: 1px solid #e7e9ef !important;
        border-radius: 14px !important;
        background: #fff !important;
        padding: 12px !important;
    }

    .public-page.native-app.page-cart .items-fieldset {
        border: 1px solid #e7e9ef !important;
        border-radius: 14px !important;
        background: #fff !important;
        padding: 12px !important;
    }

    .public-page.native-app.page-cart .items-fieldset > legend {
        margin-bottom: 8px !important;
        color: #121730 !important;
        font-size: 1.16rem !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }

    .public-page.native-app.page-cart .items-fieldset.payment-fieldset {
        border: 1px solid #ecd930 !important;
        border-radius: 14px !important;
        background: linear-gradient(180deg, #f5e93f 0%, #f3db10 100%) !important;
        padding: 12px !important;
    }

    .public-page.native-app.page-cart .payment-options {
        gap: 9px !important;
    }

    .public-page.native-app.page-cart .payment-option {
        min-height: 60px !important;
        border: 1px solid #dfdfe4 !important;
        border-radius: 10px !important;
        background: #fff !important;
        padding: 10px 12px !important;
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        gap: 10px !important;
        align-items: center !important;
    }

    .public-page.native-app.page-cart .payment-option input {
        appearance: none !important;
        -webkit-appearance: none !important;
        width: 28px !important;
        height: 28px !important;
        border: 2px solid #171c33 !important;
        border-radius: 999px !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .public-page.native-app.page-cart .payment-option input::after {
        content: "" !important;
        width: 14px !important;
        height: 14px !important;
        border-radius: 999px !important;
        background: #f4a319 !important;
        opacity: 0 !important;
        transform: scale(0.5) !important;
        transition: opacity 0.2s ease, transform 0.2s ease !important;
    }

    .public-page.native-app.page-cart .payment-option input:checked::after {
        opacity: 1 !important;
        transform: scale(1) !important;
    }

    .public-page.native-app.page-cart .payment-option-content strong {
        font-size: 1.03rem !important;
        color: #121730 !important;
        font-weight: 600 !important;
    }

    .public-page.native-app.page-cart .payment-option-content small {
        display: none !important;
    }

    .public-page.native-app.page-cart .payment-option-amount {
        font-size: 1.02rem !important;
        color: #121730 !important;
        font-weight: 700 !important;
    }

    .public-page.native-app.page-cart .payment-selected-account {
        margin-top: 10px !important;
        border-top: 0 !important;
        padding-top: 0 !important;
    }

    .public-page.native-app.page-cart .payment-account-card {
        border-radius: 10px !important;
        border-color: #e2e5ec !important;
        background: #fffdf3 !important;
    }

    .public-page.native-app.page-cart .checkout-voucher-link {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin: 0 !important;
        border: 1px solid #e7e9ef !important;
        border-radius: 14px !important;
        background: #fff !important;
        box-shadow: 0 4px 12px rgba(20, 28, 54, 0.08) !important;
        padding: 14px !important;
    }

    .public-page.native-app.page-cart .checkout-voucher-link strong {
        font-size: 1.12rem !important;
        color: #11162f !important;
        margin-bottom: 0 !important;
    }

    .public-page.native-app.page-cart .checkout-voucher-link small {
        display: none !important;
    }

    .public-page.native-app.page-cart .cart-preview-box h4 {
        font-size: 1.12rem !important;
        color: #11162f !important;
    }

    .public-page.native-app.page-cart .cart-preview-box .total-row {
        font-size: 0.95rem !important;
    }

    .public-page.native-app.page-cart .cart-preview-box .total-row.total-row--grand {
        font-size: 1.14rem !important;
    }

    .public-page.native-app.page-cart .btn.btn-primary[type="submit"] {
        position: sticky !important;
        bottom: calc(88px + env(safe-area-inset-bottom)) !important;
        z-index: 22 !important;
        margin-top: 2px !important;
        min-height: 58px !important;
        border-radius: 14px !important;
        background: linear-gradient(180deg, #f9ea49 0%, #f1d915 100%) !important;
        border-color: #f1da25 !important;
        color: #131730 !important;
        font-size: 1.15rem !important;
        font-weight: 800 !important;
        letter-spacing: 0.01em !important;
        text-transform: uppercase !important;
    }

    .public-page.native-app .app-order-preview-modal {
        z-index: 4700 !important;
    }

    .public-page.native-app .app-order-preview-backdrop {
        background: rgba(17, 23, 43, 0.5) !important;
    }

    .public-page.native-app .app-order-preview-dialog {
        width: min(92vw, 396px) !important;
        border-radius: 18px !important;
        padding: 20px 16px !important;
    }

    .public-page.native-app .app-order-preview-icon {
        width: 64px !important;
        height: 64px !important;
        border-radius: 999px !important;
        color: #f15a24 !important;
        background: rgba(241, 90, 36, 0.13) !important;
    }

    .public-page.native-app .app-order-preview-dialog h3 {
        font-size: 2rem !important;
        letter-spacing: -0.02em !important;
    }

    .public-page.native-app .app-order-preview-dialog p {
        font-size: 0.92rem !important;
        color: #737a8b !important;
    }

    .public-page.native-app .app-order-preview-progress {
        height: 11px !important;
        border-radius: 999px !important;
        background: #dadce2 !important;
    }

    .public-page.native-app .app-order-preview-progress > span {
        border-radius: inherit !important;
        background: linear-gradient(90deg, #31ce5b 0%, #37db62 100%) !important;
    }

    .public-page.native-app .app-order-preview-seconds {
        font-size: 0.95rem !important;
        color: #8a90a2 !important;
    }

    .public-page.native-app .app-order-preview-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .public-page.native-app .app-order-preview-actions .btn,
    .public-page.native-app .app-order-preview-actions .btn-outline {
        min-height: 56px !important;
        border-radius: 12px !important;
        font-size: 0.98rem !important;
        letter-spacing: 0.01em !important;
        text-transform: uppercase !important;
        background: linear-gradient(180deg, #f9ea49 0%, #f1d915 100%) !important;
        border-color: #f1da25 !important;
        color: #131730 !important;
    }
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    color: var(--chocolate-brown);
    background-color: var(--milkshake-cream);
    line-height: 1.6;
    overflow-x: hidden;
}

[hidden] {
    display: none !important;
}

h1, h2, h3, h4, .brand-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

a {
    color: var(--lava-red);
    text-decoration: none;
    transition: var(--transition);
}

a:hover {
    color: var(--deep-orange);
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

.container {
    width: min(1200px, 92%);
    margin: 0 auto;
}

/* Header & Navigation */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1100;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.nav-row {
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.brand {
    display: inline-flex;
    align-items: var(--brand-align, center);
    gap: var(--brand-gap, 12px);
}

.brand-logo {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: contain;
    background: var(--white);
    margin: var(--brand-logo-margin, 0);
    padding: var(--brand-logo-padding, 2px);
    box-shadow: var(--shadow-sm);
}

.brand-text {
    font-size: 1.5rem;
    color: var(--lava-red);
    letter-spacing: -0.5px;
    margin: var(--brand-wordmark-margin, 0);
    padding: var(--brand-wordmark-padding, 0);
}

.brand-wordmark {
    display: block;
    width: auto;
    height: 48px;
    max-width: min(320px, 52vw);
    object-fit: contain;
    margin: var(--brand-wordmark-margin, 0);
    padding: var(--brand-wordmark-padding, 0);
    transform: translate(var(--brand-wordmark-offset-x, 0), var(--brand-wordmark-offset-y, 0));
}

.header-right {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
}

.main-navigation ul {
    list-style: none;
    display: flex;
    gap: 24px;
    align-items: center;
}

.main-navigation ul > li {
    display: flex;
    align-items: center;
}

.main-navigation a {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    color: var(--chocolate-brown);
    font-size: 0.95rem;
    line-height: 1.2;
    padding: 8px 0;
    position: relative;
}

.main-navigation .nav-logout-form {
    margin: 0;
    display: inline-flex;
    align-items: center;
}

.main-navigation .nav-logout-form button {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    font-weight: 600;
    color: var(--chocolate-brown);
    font-size: 0.95rem;
    line-height: 1.2;
    padding: 8px 0;
    position: relative;
    font-family: inherit;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.main-navigation a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--lava-red);
    transition: var(--transition);
}

.main-navigation .nav-logout-form button::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--lava-red);
    transition: var(--transition);
}

.main-navigation a:hover::after,
.main-navigation a.active::after {
    width: 100%;
}

.main-navigation .nav-logout-form button:hover::after,
.main-navigation .nav-logout-form button.active::after {
    width: 100%;
}

.main-navigation a.active {
    color: var(--lava-red);
}

.main-navigation .nav-logout-form button.active,
.main-navigation .nav-logout-form button:hover {
    color: var(--lava-red);
}

.main-navigation a.download-app-link {
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid var(--deep-orange);
    background: #fff6ea;
    color: var(--deep-orange);
    line-height: 1.1;
    font-size: 0.86rem;
}

.main-navigation a.download-app-link::after {
    display: none;
}

.main-navigation a.download-app-link:hover {
    background: var(--deep-orange);
    color: var(--white);
}

.main-navigation a.with-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.admin-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--lava-red);
    color: var(--white);
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1;
}

.header-customer-profile {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 64px;
    flex-shrink: 0;
    color: inherit;
}

.header-customer-profile-image {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--line);
    background: var(--milkshake-cream);
}

.header-customer-profile-name {
    display: block;
    max-width: 84px;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-cart-link {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 2px solid #efc07a;
    background: #fff4e2;
    color: var(--chocolate-brown);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 0;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.header-cart-link:hover,
.header-cart-link.active {
    border-color: #efb3a5;
    background: #fff1ee;
    color: var(--lava-red);
}

.header-cart-link.has-items {
    border-color: var(--lava-red);
    background: #fff1ee;
}

.header-cart-link.is-bump {
    animation: headerCartBump 0.34s ease;
}

.header-cart-link.is-bump .header-cart-badge {
    animation: headerCartBadgePop 0.34s ease;
}

@keyframes headerCartBump {
    0% { transform: scale(1); }
    40% { transform: scale(1.14); }
    100% { transform: scale(1); }
}

@keyframes headerCartBadgePop {
    0% { transform: scale(1); }
    40% { transform: scale(1.22); }
    100% { transform: scale(1); }
}

.cart-fly-chip {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2500;
    transform: translate(0, 0) scale(1);
    opacity: 1;
    pointer-events: none;
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    border-radius: 999px;
    border: 2px solid var(--lava-red);
    background: #fff1ee;
    color: var(--lava-red);
    font-size: 0.76rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    transition: transform 0.64s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.64s ease;
}

.header-cart-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.header-cart-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(0 1px 1px rgba(99, 46, 17, 0.2));
    transition: filter 0.2s ease, transform 0.2s ease;
}

.header-cart-link:hover .header-cart-icon svg,
.header-cart-link.active .header-cart-icon svg {
    filter: drop-shadow(0 1px 2px rgba(227, 66, 38, 0.35));
    transform: scale(1.04);
}

.header-cart-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--lava-red);
    color: var(--white);
    font-size: 0.63rem;
    font-weight: 700;
    line-height: 1;
    border: 1px solid var(--white);
}

.main-navigation a.admin-bell-link::after {
    display: none;
}

.admin-bell-link {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid #f2ce94;
    background: #fff4e2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 0;
}

.admin-bell-portal {
    position: relative;
    flex-shrink: 0;
}

.admin-bell-link:hover {
    border-color: #efb3a5;
    background: #fff1ee;
}

.admin-bell-link.alerts-enabled {
    border-color: #efb3a5;
    box-shadow: 0 0 0 3px rgba(227, 66, 38, 0.14);
}

.admin-bell-link.has-new {
    border-color: #efb3a5;
    background: #fff1ee;
}

.admin-bell-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.admin-bell-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.admin-bell-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--lava-red);
    color: var(--white);
    font-size: 0.63rem;
    font-weight: 700;
    line-height: 1;
    border: 1px solid var(--white);
}

.admin-bell-menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: min(320px, calc(100vw - 20px));
    width: min(360px, calc(100vw - 20px));
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    padding: 8px;
    display: none;
    z-index: 1300;
}

.admin-bell-dropdown.open .admin-bell-menu,
.admin-bell-dropdown:hover .admin-bell-menu,
.admin-bell-dropdown:focus-within .admin-bell-menu {
    display: block;
}

.admin-bell-menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 8px;
    padding: 9px 10px;
    color: var(--chocolate-brown);
    font-size: 0.88rem;
    font-weight: 600;
}

.admin-bell-menu-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: min(60vh, 420px);
    overflow: auto;
    padding-right: 2px;
}

.admin-bell-section {
    display: grid;
    gap: 6px;
}

.admin-bell-section + .admin-bell-section {
    padding-top: 8px;
    border-top: 1px solid rgba(84, 62, 40, 0.08);
}

.admin-bell-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 4px;
}

.admin-bell-section-title {
    margin: 0;
    padding: 0 4px;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.admin-bell-section-count {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(242, 140, 40, 0.12);
    color: var(--lava-red);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}

.admin-bell-order-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 8px;
    padding: 9px 10px;
    color: var(--chocolate-brown);
    font-size: 0.88rem;
    font-weight: 600;
    gap: 10px;
}

.admin-bell-alert-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 8px;
    padding: 9px 10px;
    font-size: 0.84rem;
    font-weight: 600;
    gap: 10px;
}

.admin-bell-alert-row.is-out {
    background: #fff1f1;
}

.admin-bell-alert-row.is-low {
    background: #fff8eb;
}

.admin-bell-alert-row.is-security {
    background: #fff3ef;
}

.admin-bell-alert-name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-bell-alert-meta {
    flex-shrink: 0;
    color: var(--lava-red);
    font-size: 0.76rem;
    font-weight: 700;
}

.admin-bell-order-name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-bell-order-price {
    flex-shrink: 0;
    color: var(--lava-red);
    font-weight: 700;
}

.admin-bell-empty {
    margin: 0;
    padding: 8px 10px;
    color: var(--text-muted);
    font-size: 0.83rem;
}

.admin-bell-more {
    appearance: none;
    border: 1px solid rgba(242, 140, 40, 0.24);
    background: #fffaf2;
    color: var(--lava-red);
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.admin-bell-more:hover,
.admin-bell-more:focus-visible {
    background: #fff4e2;
    border-color: rgba(242, 140, 40, 0.42);
    transform: translateY(-1px);
}

.captcha-wrap {
    margin: 0.75rem 0 1rem;
    display: flex;
    justify-content: flex-start;
}

.security-alerts-grid,
.security-alerts-timeline {
    display: grid;
    gap: 14px;
}

.security-alerts-timeline {
    position: relative;
    padding-left: 26px;
}

.security-alerts-timeline::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 10px;
    width: 2px;
    background: linear-gradient(180deg, rgba(242, 140, 40, 0.42) 0%, rgba(227, 66, 38, 0.18) 100%);
}

.security-alert-timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.security-alert-timeline-dot {
    width: 14px;
    height: 14px;
    margin-top: 16px;
    border-radius: 50%;
    border: 2px solid rgba(242, 140, 40, 0.55);
    background: #fffdf8;
    box-shadow: 0 0 0 4px rgba(255, 249, 239, 0.95);
}

.security-alert-timeline-item.is-error .security-alert-timeline-dot {
    border-color: rgba(227, 66, 38, 0.8);
    background: #fff3ef;
}

.security-alert-card {
    background: #fffdf8;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.security-alert-timeline-item.is-warning .security-alert-card,
.security-alert-card.is-warning {
    border-color: #f2c6aa;
    background: #fff8f2;
}

.security-alert-timeline-item.is-error .security-alert-card,
.security-alert-card.is-error {
    border-color: #efb3a5;
    background: #fff2ef;
}

.security-alert-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.security-alert-card-head strong {
    color: var(--chocolate-brown);
    font-size: 0.95rem;
}

.security-alert-card-head span,
.security-alert-card small {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.security-alert-card p {
    margin: 0;
    color: var(--text-dark);
    line-height: 1.55;
}

.security-alert-card small {
    overflow-wrap: anywhere;
}

.admin-bell-menu a:hover,
.admin-bell-menu a.active {
    background: #fff4e2;
    color: var(--lava-red);
}

.customer-bell-link {
    cursor: pointer;
    color: var(--chocolate-brown);
}

.customer-bell-menu {
    min-width: min(340px, calc(100vw - 20px));
    width: min(340px, calc(100vw - 20px));
}

.public-page.native-app .customer-bell-dropdown:hover .customer-bell-menu,
.public-page.native-app .customer-bell-dropdown:focus-within .customer-bell-menu {
    display: none;
}

.public-page.native-app .customer-bell-dropdown.open .customer-bell-menu {
    display: block !important;
}

.customer-bell-dropdown.open .customer-bell-menu {
    display: block;
}

.customer-bell-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
    border-radius: 10px;
    padding: 10px;
    color: var(--chocolate-brown);
}

.customer-bell-row.is-unread {
    background: #fff4e2;
}

.customer-bell-row.is-dismissing {
    opacity: 0;
    transform: translateX(10px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.customer-bell-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.customer-bell-copy strong {
    display: block;
    font-size: 0.86rem;
    line-height: 1.3;
    color: var(--chocolate-brown);
}

.customer-bell-copy small {
    font-size: 0.76rem;
    line-height: 1.45;
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.customer-bell-meta {
    font-size: 0.68rem;
    line-height: 1.35;
    color: var(--text-muted);
    white-space: nowrap;
}

.customer-bell-more {
    width: 100%;
}

.customer-live-alert {
    position: fixed;
    top: 88px;
    right: max(16px, env(safe-area-inset-right));
    width: min(380px, calc(100vw - 24px));
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid rgba(227, 66, 38, 0.18);
    border-radius: 18px;
    background: rgba(255, 253, 248, 0.98);
    box-shadow: 0 20px 36px rgba(99, 46, 17, 0.16);
    z-index: 1450;
    backdrop-filter: blur(10px);
}

.customer-live-alert.is-hidden {
    display: none;
}

.customer-live-alert-copy {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 4px;
}

.customer-live-alert-copy strong {
    color: var(--chocolate-brown);
    line-height: 1.25;
}

.customer-live-alert-copy p {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.customer-live-alert-link.btn {
    width: auto;
    flex-shrink: 0;
    margin-top: 0;
}

.customer-live-alert-close {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.2rem;
    line-height: 1;
    padding: 2px 0 0;
    cursor: pointer;
}

.customer-live-alert-close:hover {
    color: var(--lava-red);
}

.admin-settings-dropdown {
    position: relative;
}

.admin-settings-portal {
    flex-shrink: 0;
}

.admin-settings-toggle {
    border: 1px solid #f2ce94;
    background: #fff4e2;
    color: var(--chocolate-brown);
    border-radius: 999px;
    height: 38px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}

.admin-settings-toggle-glyph {
    font-size: 1rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-settings-toggle-label {
    display: inline;
}

.admin-settings-toggle:hover,
.admin-settings-dropdown.open .admin-settings-toggle,
.admin-settings-toggle.active {
    border-color: #efb3a5;
    background: #fff1ee;
    color: var(--lava-red);
}

.admin-settings-toggle-icon {
    font-size: 0.62rem;
    line-height: 1;
}

.admin-settings-menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 230px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    padding: 8px;
    display: none;
    z-index: 1300;
}

.admin-settings-dropdown.open .admin-settings-menu {
    display: block;
}

.admin-settings-dropdown:hover .admin-settings-menu,
.admin-settings-dropdown:focus-within .admin-settings-menu {
    display: block;
}

.admin-settings-menu a {
    display: flex;
    align-items: center;
    width: 100%;
    border-radius: 8px;
    padding: 9px 10px;
    color: var(--chocolate-brown);
    font-size: 0.9rem;
    font-weight: 600;
}

.admin-settings-menu .admin-settings-logout-form {
    margin: 0;
}

.admin-settings-menu .admin-settings-logout-form button {
    display: flex;
    align-items: center;
    width: 100%;
    border-radius: 8px;
    padding: 9px 10px;
    color: var(--chocolate-brown);
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
}

.admin-settings-menu a::after {
    display: none;
}

.admin-settings-menu .admin-settings-logout-form button::after {
    display: none;
}

.admin-settings-menu a:hover,
.admin-settings-menu a.active {
    background: #fff4e2;
    color: var(--lava-red);
}

.admin-settings-menu .admin-settings-logout-form button:hover,
.admin-settings-menu .admin-settings-logout-form button.active {
    background: #fff4e2;
    color: var(--lava-red);
}

.admin-settings-menu a.is-logout {
    margin-top: 6px;
    padding-top: 11px;
    border-top: 1px dashed var(--line);
    color: var(--lava-red);
}

.admin-settings-menu .admin-settings-logout-form button.is-logout {
    margin-top: 6px;
    padding-top: 11px;
    border-top: 1px dashed var(--line);
    color: var(--lava-red);
}

.cart-count-badge {
    background: var(--lava-red);
    color: var(--white);
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 999px;
    position: relative;
    top: -8px;
    right: -2px;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    border-radius: var(--radius-md);
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    border: none;
    font-family: 'Montserrat', sans-serif;
    gap: 8px;
}

.btn-primary {
    background-color: var(--deep-orange);
    color: var(--white);
    box-shadow: 0 4px 15px rgba(242, 140, 40, 0.3);
}

.btn-primary:hover {
    background-color: var(--lava-red);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(227, 66, 38, 0.4);
    color: var(--white);
}

.btn-outline {
    background-color: transparent;
    border: 2px solid var(--deep-orange);
    color: var(--deep-orange);
}

.btn-outline:hover {
    background-color: var(--deep-orange);
    color: var(--white);
}

/* Hero Section */
.hero {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--milkshake-cream) 0%, #fff 100%);
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: -10%;
    right: -5%;
    width: 40%;
    height: 60%;
    background: radial-gradient(circle, rgba(253, 184, 19, 0.1) 0%, transparent 70%);
    z-index: 0;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 48px;
    position: relative;
    z-index: 1;
}

.hero h1 {
    font-size: clamp(2.5rem, 8vw, 4rem);
    line-height: 1.1;
    margin-bottom: 20px;
    color: var(--chocolate-brown);
}

.hero-copy {
    font-size: 1.1rem;
    margin-bottom: 32px;
    color: var(--text-muted);
    max-width: 500px;
}

.hero-image-wrapper {
    position: relative;
}

.hero-content > * + * {
    margin-top: 10px;
}

.hero-image-wrapper img {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    transition: var(--transition);
}

.hero-image-wrapper:hover img {
    transform: scale(1.02) rotate(1deg);
}

/* Menu Cards */
.section-title {
    text-align: center;
    margin-bottom: 48px;
}

.section-title h2 {
    font-size: 2.5rem;
    margin-bottom: 12px;
}

.section-title p {
    color: var(--text-muted);
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 32px;
}

.menu-card {
    background: var(--white);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    position: relative;
    display: flex;
    flex-direction: column;
}

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

.menu-card-image {
    width: 100%;
    height: 220px;
    object-fit: cover;
    transition: var(--transition);
}

.menu-card:hover .menu-card-image {
    transform: scale(1.05);
}

.menu-card-body {
    padding: 24px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.category-tag {
    background: var(--golden-fry);
    color: var(--chocolate-brown);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
    display: inline-block;
    margin-bottom: 12px;
}

.menu-card h3 {
    font-size: 1.25rem;
    margin-bottom: 8px;
}

.menu-card-description-wrap {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex-grow: 1;
}

.menu-card .menu-card-description {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.menu-card-read-more {
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    font: inherit;
    font-size: 0.82rem;
    line-height: 1.2;
    font-weight: 700;
    color: var(--lava-red);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.menu-card-read-more:hover {
    color: var(--deep-orange);
}

.menu-card-read-more[hidden] {
    display: none !important;
}

.menu-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.price {
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--lava-red);
}

/* Categories Section */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.category-card {
    background: var(--white);
    padding: 32px 24px;
    text-align: center;
    border-radius: var(--radius-md);
    transition: var(--transition);
    border: 1px solid var(--line);
}

.category-card-media {
    width: 82px;
    height: 82px;
    margin: 0 auto 16px;
    border-radius: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(255, 198, 56, 0.24) 0%, rgba(255, 255, 255, 0.96) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.category-card:hover {
    background: var(--golden-fry);
    border-color: var(--golden-fry);
    transform: translateY(-5px);
}

.category-card img {
    width: 64px;
    height: 64px;
    margin: 0 auto;
    object-fit: contain;
}

.category-card h4 {
    font-size: 1.1rem;
}

/* Why Choose Us */
.why-choose-section {
    position: relative;
}

.why-choose-title {
    text-align: center;
}

.why-choose-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    padding: 8px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(253, 184, 19, 0.2), rgba(242, 140, 40, 0.14));
    border: 1px solid rgba(242, 140, 40, 0.22);
    color: var(--lava-red);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

.feature-item {
    position: relative;
    min-height: 100%;
    padding: 30px 24px 26px;
    border: 1px solid rgba(227, 66, 38, 0.08);
    border-radius: 30px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 250, 242, 0.96) 100%);
    box-shadow: 0 20px 40px rgba(99, 46, 17, 0.08);
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
    overflow: hidden;
}

.feature-item::before {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    top: 0;
    height: 4px;
    border-radius: 0 0 999px 999px;
    background: var(--feature-accent, linear-gradient(90deg, #FDB813, #F28C28));
}

.feature-item--delivery {
    --feature-accent: linear-gradient(90deg, #fdb813, #f28c28);
}

.feature-item--quality {
    --feature-accent: linear-gradient(90deg, #ffd76a, #fdb813);
}

.feature-item--shakes {
    --feature-accent: linear-gradient(90deg, #f28c28, #e34226);
}

.feature-icon {
    width: 96px;
    height: 96px;
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.99) 0%, rgba(255, 247, 232, 0.96) 52%, rgba(255, 239, 210, 0.92) 100%);
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    color: var(--chocolate-brown);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    box-shadow:
        0 20px 34px rgba(99, 46, 17, 0.1),
        0 6px 12px rgba(253, 184, 19, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.feature-icon::before,
.feature-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}

.feature-icon::before {
    inset: 10px;
    background: var(--feature-accent, linear-gradient(90deg, #FDB813, #F28C28));
    opacity: 0.12;
    filter: blur(10px);
    transform: scale(0.92);
}

.feature-icon::after {
    inset: 1px;
    border: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow: inset 0 -1px 0 rgba(242, 140, 40, 0.08);
}

.feature-icon-svg {
    width: 56px;
    height: 56px;
    display: block;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 10px 16px rgba(99, 46, 17, 0.14));
    transition: transform 0.35s ease, filter 0.35s ease;
}

.feature-item:hover .feature-icon-svg {
    transform: scale(1.08);
    filter: drop-shadow(0 14px 18px rgba(99, 46, 17, 0.2));
}

.feature-item--delivery .feature-icon {
    animation: featureDeliveryFloat 3.8s ease-in-out infinite;
}

.feature-item--quality .feature-icon::before {
    animation: featureQualityGlow 2.8s ease-in-out infinite;
}

.feature-item--shakes .feature-icon {
    animation: featureShakesTilt 4.2s ease-in-out infinite;
    transform-origin: 50% 58%;
}

.feature-item--shakes .feature-icon-svg {
    animation: featureSparkle 3s ease-in-out infinite;
}

.feature-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(253, 184, 19, 0.12);
    color: var(--lava-red);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.feature-item h4 {
    margin: 0;
    font-size: 1.4rem;
    line-height: 1.1;
}

.feature-item p {
    margin: 0;
    max-width: 28ch;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.65;
}

.features-grid::-webkit-scrollbar {
    height: 8px;
}

.features-grid::-webkit-scrollbar-thumb {
    background: rgba(242, 140, 40, 0.22);
    border-radius: 999px;
}

@keyframes featureDeliveryFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes featureQualityGlow {
    0%, 100% {
        opacity: 0.08;
        transform: scale(0.92);
    }
    50% {
        opacity: 0.18;
        transform: scale(1.02);
    }
}

@keyframes featureShakesTilt {
    0%, 100% { transform: rotate(0deg) translateY(0); }
    25% { transform: rotate(-2.5deg) translateY(-2px); }
    75% { transform: rotate(2.5deg) translateY(-1px); }
}

@keyframes featureSparkle {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.06); opacity: 0.92; }
}

@media (prefers-reduced-motion: reduce) {
    .feature-item--delivery .feature-icon,
    .feature-item--quality .feature-icon::before,
    .feature-item--shakes .feature-icon,
    .feature-item--shakes .feature-icon-svg {
        animation: none !important;
    }
}

.contact-info > * + * {
    margin-top: 8px;
}

/* Footer */
.site-footer {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at top left, rgba(255, 196, 87, 0.16), transparent 30%),
        radial-gradient(circle at bottom right, rgba(227, 66, 38, 0.14), transparent 28%),
        linear-gradient(180deg, #52220d 0%, #341306 100%);
    color: var(--white);
    padding: 72px 0 22px;
    margin-top: 80px;
}

.site-footer::before,
.site-footer::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    opacity: 0.4;
}

.site-footer::before {
    width: 320px;
    height: 320px;
    top: -160px;
    right: -110px;
    background: radial-gradient(circle, rgba(253, 184, 19, 0.26) 0%, rgba(253, 184, 19, 0) 72%);
}

.site-footer::after {
    width: 260px;
    height: 260px;
    bottom: -120px;
    left: -70px;
    background: radial-gradient(circle, rgba(242, 140, 40, 0.2) 0%, rgba(242, 140, 40, 0) 72%);
}

.footer-shell {
    position: relative;
    z-index: 1;
}

.footer-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 18px;
    margin-bottom: 24px;
}

.footer-brand-panel,
.footer-cta-panel,
.footer-column,
.footer-social-card {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
    box-shadow: 0 22px 48px rgba(18, 5, 0, 0.22);
    backdrop-filter: blur(14px);
}

.footer-brand-panel,
.footer-cta-panel {
    padding: 22px;
    border-radius: 26px;
}

.footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.footer-logo-mark {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(255, 252, 245, 0.98) 0%, rgba(255, 243, 217, 0.94) 100%);
    box-shadow:
        0 16px 30px rgba(17, 4, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.footer-logo-mark .brand-logo {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    object-fit: cover;
}

.footer-logo .brand-text {
    color: var(--golden-fry);
    font-size: 1.26rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.footer-copy {
    max-width: 34ch;
    margin: 0 0 16px;
    color: rgba(255, 247, 232, 0.78);
    font-size: 0.95rem;
    line-height: 1.65;
}

.footer-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.footer-badge {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 248, 238, 0.9);
    font-size: 0.76rem;
    font-weight: 700;
}

.footer-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(253, 184, 19, 0.15);
    border: 1px solid rgba(253, 184, 19, 0.2);
    color: var(--golden-fry);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.footer-cta-panel h3 {
    margin: 12px 0 8px;
    font-size: 1.55rem;
    line-height: 1.08;
}

.footer-cta-panel p {
    margin: 0;
    color: rgba(255, 247, 232, 0.76);
    line-height: 1.6;
    font-size: 0.95rem;
}

.footer-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.footer-action-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 10px 14px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.08);
    color: var(--white);
    font-weight: 700;
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.footer-action-pill:hover {
    transform: translateY(-2px);
    border-color: rgba(253, 184, 19, 0.3);
    background: rgba(255, 255, 255, 0.12);
}

.footer-action-pill--highlight {
    background: linear-gradient(135deg, rgba(253, 184, 19, 0.2) 0%, rgba(242, 140, 40, 0.16) 100%);
    border-color: rgba(253, 184, 19, 0.28);
}

.footer-action-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.footer-action-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.footer-column {
    padding: 18px 18px 16px;
    border-radius: 22px;
}

.footer-grid h4 {
    margin-bottom: 14px;
    font-size: 1rem;
    color: var(--golden-fry);
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 8px;
}

.footer-links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 247, 232, 0.78);
    transition: transform 0.2s ease, color 0.2s ease;
}

.footer-links a:hover {
    color: var(--white);
    transform: translateX(4px);
}

.footer-info-list {
    display: grid;
    gap: 10px;
}

.footer-info-item {
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-info-label {
    display: inline-block;
    margin-bottom: 4px;
    color: rgba(253, 184, 19, 0.92);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.footer-info-item p {
    margin: 0;
    color: rgba(255, 247, 232, 0.82);
    line-height: 1.55;
    font-size: 0.94rem;
}

.footer-info-item a {
    color: inherit;
}

.footer-social-grid {
    display: grid;
    gap: 10px;
}

.footer-social-card {
    display: block;
    padding: 13px 14px;
    border-radius: 16px;
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.footer-social-card:hover {
    transform: translateY(-3px);
    border-color: rgba(253, 184, 19, 0.22);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
}

.footer-social-name {
    display: block;
    margin-bottom: 2px;
    font-weight: 800;
    color: var(--white);
    font-size: 0.96rem;
}

.footer-social-meta {
    display: block;
    color: rgba(255, 247, 232, 0.7);
    font-size: 0.84rem;
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.86rem;
    color: rgba(255, 247, 232, 0.6);
}

.footer-bottom p {
    margin: 0;
}

.footer-bottom-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.footer-bottom-links a {
    color: rgba(255, 247, 232, 0.72);
}

.footer-bottom-links a:hover {
    color: var(--white);
}

@media (max-width: 640px) {
    .site-footer {
        padding: 60px 0 104px;
    }

    .footer-brand-panel,
    .footer-cta-panel,
    .footer-column {
        padding: 18px 16px;
        border-radius: 20px;
    }

    .footer-logo {
        gap: 10px;
    }

    .footer-logo-mark {
        width: 52px;
        height: 52px;
        border-radius: 16px;
    }

    .footer-logo-mark .brand-logo {
        width: 36px;
        height: 36px;
        border-radius: 12px;
    }

    .footer-cta-panel h3 {
        font-size: 1.36rem;
    }

    .footer-cta-actions,
    .footer-bottom-links {
        width: 100%;
    }

    .footer-action-pill {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* Order System Improvements */
.cart-floating-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 64px;
    height: 64px;
    background: var(--lava-red);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    cursor: pointer;
    transition: var(--transition);
}

.cart-floating-icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
}

.cart-floating-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(0 1px 1px rgba(99, 46, 17, 0.24));
}

.cart-floating-btn:hover {
    transform: scale(1.1);
    background: var(--deep-orange);
}

.cart-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--golden-fry);
    color: var(--chocolate-brown);
    font-size: 0.8rem;
    font-weight: 800;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--lava-red);
}

/* Mobile Responsive */
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 6px;
    background: transparent;
    border: none;
    cursor: pointer;
}

.nav-toggle span {
    display: block;
    width: 28px;
    height: 3px;
    background: var(--chocolate-brown);
    border-radius: 3px;
    transition: var(--transition);
}

@media (max-width: 992px) {
    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero h1 {
        font-size: 3rem;
    }

    .hero-copy {
        margin: 0 auto 32px;
    }

    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .features-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .nav-toggle {
        display: flex;
    }

    .main-navigation {
        display: none;
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        background: var(--white);
        padding: 20px;
        box-shadow: var(--shadow-lg);
    }

    .main-navigation.is-open {
        display: block;
    }

    .main-navigation ul {
        flex-direction: column;
        gap: 16px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-hero {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .hero {
        padding: 40px 0;
    }
}

/* Glassmorphism Classes */
.glass {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeIn 0.8s ease forwards;
}

/* Mini Cart */
.mini-cart {
    position: fixed;
    top: 90px;
    right: max(10px, env(safe-area-inset-right));
    width: min(350px, calc(100vw - 20px));
    background: var(--white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 24px;
    z-index: 1050;
    display: none;
}

.mini-cart.show {
    display: block;
    animation: fadeIn 0.3s ease forwards;
}

.mini-cart-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

.mini-cart-footer {
    margin-top: 20px;
    text-align: center;
}

@media (max-width: 576px) {
    .mini-cart {
        top: 78px;
        padding: 16px;
    }
}

.total-row {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 20px;
}

/* Filters */
.filters-bar {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 24px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--white);
    cursor: pointer;
    font-weight: 600;
    transition: var(--transition);
}

.filter-btn-icon {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(227, 66, 38, 0.08);
    flex-shrink: 0;
}

.filter-btn-icon img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.filter-btn:hover, .filter-btn.active {
    background: var(--lava-red);
    color: var(--white);
    border-color: var(--lava-red);
}

.filter-btn:hover .filter-btn-icon,
.filter-btn.active .filter-btn-icon {
    background: rgba(255, 255, 255, 0.18);
}

.public-page .filters-bar .filter-btn {
    position: relative;
    border: none;
    background: transparent;
    box-shadow: none;
    color: #6c7285;
    overflow: hidden;
    isolation: isolate;
    transition: color 0.24s ease, transform 0.24s ease, filter 0.24s ease;
}

.public-page .filters-bar .filter-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255, 214, 92, 0.34) 0%, rgba(247, 177, 61, 0.24) 58%, rgba(255, 255, 255, 0.14) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 8px 14px rgba(242, 140, 40, 0.2);
    opacity: 0;
    transform: translateY(2px) scale(0.97);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
    z-index: -1;
}

.public-page .filters-bar .filter-btn::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 10%;
    width: 80%;
    height: 44%;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
    z-index: -1;
}

.public-page .filters-bar .filter-btn:hover,
.public-page .filters-bar .filter-btn.active {
    border: none;
    background: transparent;
    color: #4a220f;
    transform: translateY(-1px);
    filter: drop-shadow(0 4px 10px rgba(242, 140, 40, 0.2));
}

.public-page .filters-bar .filter-btn:hover::before,
.public-page .filters-bar .filter-btn.active::before {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.public-page .filters-bar .filter-btn:hover::after,
.public-page .filters-bar .filter-btn.active::after {
    opacity: 1;
}

.public-page .filters-bar .filter-btn-icon {
    width: 34px;
    height: 34px;
    background: transparent;
}

.public-page .filters-bar .filter-btn-icon img {
    width: 30px;
    height: 30px;
}

.public-page .filters-bar .filter-btn:hover .filter-btn-icon,
.public-page .filters-bar .filter-btn.active .filter-btn-icon {
    background: transparent;
}

/* Shared Layout and Components */
.site-main {
    min-height: calc(100vh - 160px);
}

.section {
    padding: clamp(52px, 7vw, 88px) 0;
}

.section-alt {
    background-color: var(--white);
}

.section-highlight {
    background-color: var(--golden-fry);
    color: var(--chocolate-brown);
}

.page-hero {
    padding: clamp(56px, 8vw, 96px) 0 clamp(34px, 6vw, 62px);
    background: linear-gradient(135deg, #fff8ea 0%, #ffffff 100%);
}

.page-hero h1 {
    font-size: clamp(2rem, 6vw, 3rem);
    line-height: 1.15;
    margin-top: 10px;
    margin-bottom: 10px;
}

.page-hero p {
    max-width: 700px;
    color: var(--text-muted);
}

.eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--deep-orange);
}

.narrow {
    width: min(760px, 100%);
    margin: 0 auto;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.contact-stack > * + * {
    margin-top: 12px;
}

.stack-sm {
    margin-top: 16px;
}

.stack-md {
    margin-top: 28px;
}

.section-cta {
    margin-top: 40px;
    text-align: center;
}

.review-card {
    padding: 24px;
}

.review-quote {
    font-style: italic;
    color: var(--text-muted);
}

.review-author {
    margin-top: 18px;
    font-weight: 700;
}

.reviews-premium-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}

.reviews-premium-slider {
    --reviews-gap: 18px;
    --reviews-per-view: 1;
    display: grid;
    gap: 16px;
}

.reviews-premium-slider-toolbar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.reviews-premium-slider-copy {
    display: grid;
    gap: 6px;
}

.reviews-premium-slider-copy p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.88rem;
}

.reviews-premium-slider-controls {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.reviews-premium-arrow {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(242, 140, 40, 0.24);
    border-radius: 50%;
    background: #fffaf2;
    color: var(--lava-red);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.reviews-premium-arrow:hover,
.reviews-premium-arrow:focus-visible {
    transform: translateY(-1px);
    background: #fff1da;
    border-color: rgba(242, 140, 40, 0.4);
    box-shadow: 0 12px 24px rgba(99, 46, 17, 0.1);
}

.reviews-premium-arrow:disabled {
    opacity: 0.45;
    cursor: default;
    transform: none;
    box-shadow: none;
}

.reviews-premium-viewport {
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.reviews-premium-viewport::-webkit-scrollbar {
    display: none;
}

.reviews-premium-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--reviews-gap) * (var(--reviews-per-view) - 1))) / var(--reviews-per-view));
    gap: var(--reviews-gap);
    align-items: stretch;
    padding-bottom: 4px;
}

.reviews-premium-slide {
    scroll-snap-align: start;
    height: 100%;
}

.reviews-premium-slider.is-single .reviews-premium-viewport {
    display: flex;
    justify-content: center;
}

.reviews-premium-slider.is-single .reviews-premium-track {
    grid-auto-columns: minmax(280px, 340px);
    justify-content: center;
}

.reviews-premium-slider.is-static .reviews-premium-arrow,
.reviews-premium-slider.is-static .reviews-premium-dots {
    display: none;
}

.reviews-premium-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.reviews-premium-dot {
    width: 10px;
    height: 10px;
    border: none;
    border-radius: 50%;
    background: rgba(198, 119, 15, 0.22);
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
}

.reviews-premium-dot.is-active {
    background: #c6770f;
    transform: scale(1.18);
}

.review-premium-card,
.review-premium-empty {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid rgba(242, 140, 40, 0.18);
    background: linear-gradient(180deg, #ffffff 0%, #fff8ef 100%);
    box-shadow: 0 18px 42px rgba(99, 46, 17, 0.1);
}

.review-premium-card {
    padding: 24px;
    display: grid;
    gap: 16px;
    grid-template-rows: auto auto 1fr;
    min-height: 280px;
    height: 100%;
}

.review-premium-card::after,
.review-premium-empty::after {
    content: '';
    position: absolute;
    inset: auto -30px -30px auto;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(253, 184, 19, 0.22) 0%, rgba(253, 184, 19, 0) 72%);
    pointer-events: none;
}

.review-premium-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.review-premium-author {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.review-premium-meta {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.review-premium-meta strong {
    font-size: 1rem;
    color: var(--chocolate-brown);
}

.review-premium-meta span {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.review-premium-meta,
.review-premium-title,
.review-premium-body {
    overflow-wrap: anywhere;
}

.review-avatar {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    border-radius: 50%;
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.review-avatar--photo {
    background: var(--white);
    border: 2px solid rgba(242, 140, 40, 0.22);
    box-shadow: 0 10px 22px rgba(99, 46, 17, 0.12);
}

.review-avatar--placeholder {
    position: relative;
    background: linear-gradient(180deg, #fff5e2 0%, #ffe0bf 100%);
    border: 2px solid rgba(227, 66, 38, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 10px 22px rgba(99, 46, 17, 0.08);
}

.review-avatar--placeholder::before,
.review-avatar--placeholder::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(99, 46, 17, 0.18);
}

.review-avatar--placeholder::before {
    top: 13px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
}

.review-avatar--placeholder::after {
    bottom: 11px;
    width: 34px;
    height: 18px;
    border-radius: 999px 999px 12px 12px;
}

.review-stars {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #fff1da;
    color: #c6770f;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.review-stars-icons {
    display: inline-flex;
    align-items: center;
    gap: 1px;
}

.review-stars-icons .is-filled {
    color: #c6770f;
}

.review-stars-icons .is-empty {
    color: #e9c88d;
}

.review-stars-value {
    letter-spacing: 0;
    font-size: 0.8rem;
}

.review-stars-muted {
    color: #e9c88d;
    letter-spacing: 0.08em;
}

.review-premium-title {
    margin: 0;
    color: var(--chocolate-brown);
    font-size: 1.08rem;
    line-height: 1.35;
}

.review-premium-body {
    margin: 0;
    color: var(--text-dark);
    font-size: 0.95rem;
    line-height: 1.72;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    overflow: hidden;
}

.review-premium-empty {
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 18px;
}

.review-premium-empty h3 {
    margin-bottom: 8px;
}

.review-premium-empty p {
    margin-bottom: 14px;
    color: var(--text-muted);
}

.map-wrap {
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--white);
    box-shadow: var(--shadow-sm);
}

.map-embed {
    display: block;
    width: 100%;
    height: 350px;
    border: 0;
}

.feature-icon-soft {
    background: var(--milkshake-cream);
    color: var(--deep-orange);
}

.feature-list-left {
    text-align: left;
    margin-top: 12px;
}

.clean-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.clean-list li + li {
    margin-top: 8px;
}

.footer-copy {
    margin-top: 15px;
}

.main-navigation .btn::after {
    display: none;
}

.btn-sm {
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
}

.btn-danger {
    background-color: #c53030;
    color: var(--white);
}

.btn-danger:hover {
    background-color: #a62626;
    color: var(--white);
}

.btn-danger-soft {
    background: #fff1f1;
    border: 1px solid rgba(195, 54, 36, 0.18);
    color: #b33624;
}

.btn-danger-soft:hover {
    background: #ffe3df;
    color: #8f2a1d;
}

.btn-link {
    border: none;
    background: transparent;
    color: var(--lava-red);
    font-weight: 700;
    cursor: pointer;
    padding: 0;
}

.btn-link:hover {
    color: var(--deep-orange);
}

.alert {
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin-bottom: 20px;
    border: 1px solid transparent;
}

.alert ul {
    padding-left: 18px;
}

.alert.success {
    background: #edf9ef;
    border-color: #8ed39b;
    color: #1f7a32;
}

.alert.error {
    background: #fff1f1;
    border-color: #f1a6a6;
    color: #9b2c2c;
}

.inventory-alert-box p {
    margin: 4px 0 8px;
    font-size: 0.86rem;
}

.inventory-alert-box ul {
    margin-top: 6px;
}

.card-form {
    background: var(--white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: clamp(20px, 4vw, 32px);
    display: grid;
    gap: 12px;
}

.card-form label {
    margin-top: 6px;
    font-weight: 600;
}

:where(
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="url"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="time"],
    input[type="week"],
    input[type="file"],
    select,
    textarea
):not(.quantity-input):not(.g-recaptcha-response) {
    width: 100%;
    border: 1px solid var(--field-border);
    border-radius: 10px;
    padding: 11px 12px;
    font: inherit;
    line-height: 1.3;
    color: var(--text-dark);
    background: var(--field-bg);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

:where(select):not(.quantity-input) {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23632E11' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
    padding-right: 36px;
}

:where(textarea):not(.g-recaptcha-response) {
    min-height: 86px;
    resize: vertical;
}

:where(input[type="file"])::file-selector-button {
    border: 1px solid var(--field-border-strong);
    background: var(--field-bg-muted);
    color: var(--chocolate-brown);
    border-radius: 8px;
    padding: 8px 12px;
    margin-right: 10px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

:where(
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="url"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="time"],
    input[type="week"],
    input[type="file"],
    select,
    textarea
):not(.quantity-input):not(.g-recaptcha-response):focus {
    border-color: var(--field-focus);
    outline: none;
    box-shadow: 0 0 0 3px rgba(242, 140, 40, 0.2);
    background: #fff;
}

:where(
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="url"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="time"],
    input[type="week"],
    input[type="file"],
    textarea
):not(.quantity-input):not(.g-recaptcha-response)::placeholder {
    color: var(--field-placeholder);
}

:where(
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="url"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="time"],
    input[type="week"],
    input[type="file"],
    select,
    textarea
):not(.quantity-input):not(.g-recaptcha-response):disabled {
    background: #f3f5f9;
    color: #8b94a5;
    cursor: not-allowed;
}

/* Keep choice controls compact inside form rows */
.card-form input[type="radio"],
.card-form input[type="checkbox"] {
    width: auto;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    flex: 0 0 auto;
}

.card-form .btn {
    margin-top: 8px;
}

.auth-actions {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.auth-actions .btn {
    width: auto;
    margin-top: 0;
    padding: 10px 18px;
    min-width: 220px;
    justify-content: center;
    white-space: nowrap;
}

.inline-social-form {
    margin: 0;
    display: inline-flex;
}

.inline-social-form .btn {
    margin-top: 0;
}

.auth-social-hidden-form {
    display: none;
}

.auth-actions .btn-google-icon {
    min-width: 44px;
}

.auth-continue-text {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    line-height: 1;
}

.checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.9fr);
    gap: 24px;
    align-items: start;
}

.checkout-form {
    gap: 16px;
}

.form-section {
    display: grid;
    gap: 10px;
}

.form-section h3 {
    margin-bottom: 2px;
}

.checkout-pin-location {
    border: 1px dashed #f0c78f;
    border-radius: var(--radius-sm);
    background: #fff9ef;
    padding: 10px 12px;
    display: grid;
    gap: 6px;
}

.checkout-pin-location-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.checkout-pin-location-status {
    margin: 0;
}

.checkout-pin-location-status.is-success {
    color: #1f7a31;
}

.checkout-pin-location-status.is-error {
    color: #b33b26;
}

.checkout-pin-location-status.is-loading {
    color: #8a5a00;
}

.checkout-pin-location-map-shell {
    position: relative;
}

.checkout-pin-location-map-shell--inline {
    cursor: pointer;
}

.checkout-pin-location-map {
    width: 100%;
    height: min(58vh, 420px);
    border: 1px solid #f2dfbe;
    border-radius: 12px;
    overflow: hidden;
    background: #fffdf8;
    box-shadow: inset 0 0 0 1px rgba(99, 46, 17, 0.03);
}

.checkout-pin-location-map--popup {
    margin-top: 4px;
}

.checkout-pin-location-map--inline {
    height: 190px;
    margin-top: 2px;
    cursor: pointer;
}

.checkout-pin-map-center-pin {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 26px;
    height: 26px;
    transform: translate(-50%, -100%) rotate(-45deg);
    border-radius: 50% 50% 50% 0;
    background: var(--lava-red);
    border: 2px solid #f7b286;
    box-shadow: 0 6px 14px rgba(99, 46, 17, 0.22);
    pointer-events: none;
    z-index: 430;
}

.checkout-pin-map-center-pin::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    left: 7px;
    top: 7px;
    border-radius: 50%;
    background: var(--white);
}

.checkout-pin-location-map .leaflet-container {
    width: 100%;
    height: 100%;
    font-family: inherit;
}

.checkout-pin-location-map-help {
    margin: 0;
}

.checkout-pin-map-popup {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1450;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: var(--transition);
}

.checkout-pin-map-popup.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.checkout-pin-map-popup-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16, 9, 5, 0.55);
}

.checkout-pin-map-popup-dialog {
    position: relative;
    z-index: 1;
    width: min(760px, calc(100vw - 20px));
    max-height: min(92vh, 760px);
    background: var(--white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 14px;
    display: grid;
    gap: 10px;
    overflow: hidden;
}

.checkout-pin-map-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.checkout-pin-map-popup-header h4 {
    margin: 0;
    font-size: 1.05rem;
}

.checkout-pin-map-popup-close {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--white);
    color: var(--chocolate-brown);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}

.checkout-pin-map-popup-close:hover {
    background: #fff4dc;
}

.checkout-pin-map-popup-help {
    margin: 0;
}

.checkout-pin-map-popup-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.checkout-pin-location-link {
    font-size: 0.86rem;
    font-weight: 600;
}

.checkout-aside {
    display: grid;
    gap: 16px;
    position: sticky;
    top: 95px;
}

.checkout-panel {
    background: var(--white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid #f2dfbe;
    padding: 18px;
}

.checkout-panel h3 {
    margin-bottom: 12px;
}

.checkout-guest-card {
    display: grid;
    gap: 14px;
    margin-bottom: 16px;
    background: linear-gradient(180deg, #fffdf8 0%, #fff7ea 100%);
}

.checkout-guest-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.checkout-guest-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 12px;
    border: 1px solid #efc79b;
    background: #fff1e4;
    color: var(--lava-red);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.checkout-guest-title {
    margin-bottom: 4px;
}

.checkout-guest-copy {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.45;
}

.checkout-guest-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.checkout-guest-actions .btn {
    width: auto;
    margin-top: 0;
    min-width: 140px;
}

.checkout-guest-actions .inline-social-form {
    display: inline-flex;
}

.btn-google {
    border: 1px solid #d7d7d7;
    background: #ffffff;
    color: #2f2f2f;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.btn-google:hover {
    border-color: #c6c6c6;
    background: #f8f9fa;
    color: #222222;
    transform: translateY(-1px);
}

.btn-google-logo {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-google-logo svg {
    display: block;
}

.btn-google-icon {
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 999px;
}

.btn-google-icon .btn-google-logo {
    width: 20px;
    height: 20px;
}

.auth-actions .btn.btn-google-icon {
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.native-app .native-google-disabled {
    display: none !important;
}

body.native-app .native-google-note {
    margin: 4px 0 0;
    width: 100%;
    font-size: 0.82rem;
    font-weight: 600;
    color: #a54a2f;
    line-height: 1.35;
}

.items-fieldset {
    border: 1px solid #f2dbba;
    border-radius: var(--radius-sm);
    padding: 14px;
    margin: 4px 0;
}

.items-fieldset legend {
    font-weight: 700;
    padding: 0 8px;
}

.cart-helper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.cart-preview-box {
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: #fffdf8;
    padding: 14px;
}

.cart-preview-box h4 {
    margin-bottom: 10px;
}

.cart-preview-box .total-row {
    margin-bottom: 10px;
    font-size: 1rem;
}

.cart-preview-box .total-row--grand {
    margin-top: 10px;
    margin-bottom: 0;
    padding-top: 10px;
    border-top: 1px dashed var(--line);
    font-size: 1.08rem;
}

.cart-preview-charge-note {
    margin: 4px 0 8px;
}

.cart-preview-empty {
    color: var(--text-muted);
}

.cart-preview-list {
    display: grid;
    gap: 10px;
    margin-bottom: 12px;
}

.cart-preview-item {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 10px;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 10px;
}

.cart-item-thumb {
    width: 54px;
    height: 54px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: #fff6e0;
}

.cart-item-meta strong {
    display: block;
    line-height: 1.3;
}

.cart-item-meta small {
    color: var(--text-muted);
}

.cart-item-option-list {
    list-style: none;
    margin: 4px 0 2px;
    display: grid;
    gap: 3px;
}

.cart-item-option-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.76rem;
    color: var(--text-muted);
}

.cart-item-modifiers {
    display: block;
    margin-top: 2px;
    color: var(--chocolate-brown);
    font-size: 0.74rem;
}

.item-quantity-selector {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--milkshake-cream);
    padding: 2px 4px;
    width: fit-content;
}

.item-quantity-selector .quantity-minus,
.item-quantity-selector .quantity-plus {
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--white);
    color: var(--chocolate-brown);
    width: 27px;
    min-width: 27px;
    height: 27px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: var(--transition);
}

.item-quantity-selector .quantity-minus:hover,
.item-quantity-selector .quantity-plus:hover {
    background: var(--deep-orange);
    border-color: var(--deep-orange);
    color: var(--white);
}

.item-quantity-selector .quantity-input {
    width: 30px;
    min-width: 30px;
    border: none;
    text-align: center;
    font-weight: 700;
    background: transparent;
    color: var(--chocolate-brown);
    padding: 0;
    margin: 0;
    font-size: 0.88rem;
    line-height: 1;
    -moz-appearance: textfield;
}

.item-quantity-selector .quantity-input:focus {
    outline: none;
}

.quantity-input::-webkit-outer-spin-button,
.quantity-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.remove-item-btn {
    border: none;
    background: transparent;
    color: var(--lava-red);
    font-size: 1.35rem;
    cursor: pointer;
    padding: 2px 6px;
}

.remove-item-btn:hover {
    color: #b92b11;
}

.hint-text {
    margin-top: -2px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.auth-inline-link {
    margin-top: -4px;
}

.password-reset-link-box {
    margin-top: 14px;
    display: grid;
    gap: 10px;
}

.password-reset-link-box .btn {
    width: auto;
    justify-self: start;
}

.account-panel {
    margin-bottom: 16px;
}

.account-page-hero {
    padding-bottom: 10px;
}

.account-app-shell {
    display: grid;
    gap: 16px;
}

.account-app-hero-card {
    display: grid;
    gap: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #fff9f1 100%);
}

.account-app-hero-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.account-app-hero-copy {
    min-width: 0;
    display: grid;
    gap: 6px;
}

.account-app-kicker {
    margin: 0;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #a2773f;
}

.account-app-hero-copy h2 {
    margin: 0;
    font-size: clamp(1.4rem, 3vw, 2.4rem);
    line-height: 1.05;
    color: #1f2533;
}

.account-app-hero-copy p {
    margin: 0;
    color: #667085;
    font-size: 0.95rem;
}

.account-app-settings-link {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 14px;
    border: 1px solid #ecdcc2;
    background: #fffdf9;
    color: #2a3142;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 16px rgba(99, 46, 17, 0.06);
}

.account-app-settings-link svg {
    width: 21px;
    height: 21px;
    display: block;
}

.account-app-logout-form {
    margin: 0;
    flex: 0 0 auto;
}

.account-app-logout-btn {
    min-height: 44px;
    padding: 9px 14px;
    border: 1px solid #ecdcc2;
    border-radius: 14px;
    background: #fffdf9;
    color: #2a3142;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 8px 16px rgba(99, 46, 17, 0.06);
    transition: var(--transition);
}

.account-app-logout-btn:hover,
.account-app-logout-btn:focus-visible {
    border-color: #efb3a5;
    background: #fff1ee;
    color: var(--lava-red);
}

.account-app-logout-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.account-app-logout-icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

.account-app-quick-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.account-app-quick-card {
    min-width: 0;
    display: grid;
    justify-items: start;
    gap: 10px;
    padding: 16px 14px;
    border: 1px solid #ebe3d6;
    border-radius: 20px;
    background: #fff;
    color: #1f2533;
    box-shadow: 0 10px 20px rgba(17, 24, 39, 0.04);
}

.account-app-quick-card:hover {
    border-color: #f0c88b;
    color: var(--lava-red);
    transform: translateY(-1px);
}

.account-app-quick-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: #fff7ed;
    color: var(--lava-red);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.account-app-quick-icon svg {
    width: 22px;
    height: 22px;
    display: block;
}

.account-app-quick-card strong {
    font-size: 1rem;
    line-height: 1.2;
    color: #1f2533;
}

.account-app-quick-card small {
    color: #667085;
    font-size: 0.82rem;
    line-height: 1.35;
}

.account-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.account-summary-item {
    border: 1px solid #f0debe;
    border-radius: var(--radius-sm);
    background: #fffdf8;
    padding: 12px;
    display: grid;
    gap: 4px;
}

.account-summary-item small {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.account-summary-item strong {
    line-height: 1.35;
    color: var(--chocolate-brown);
}

.account-summary-subtext {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.account-section-stack {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.account-profile-form,
.account-password-form,
.account-address-form,
.account-address-book {
    display: grid;
    gap: 12px;
}

.account-profile-form .section-head,
.account-address-form .section-head,
.account-address-book .section-head {
    margin-bottom: 2px;
}

.account-address-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    gap: 16px;
    align-items: start;
}

.account-address-pin-box {
    margin-top: 4px;
}

.account-checkbox-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.92rem;
    color: var(--text-dark);
}

.account-checkbox-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
}

.account-empty-state {
    border: 1px dashed #ead6b4;
    border-radius: var(--radius-sm);
    background: #fffaf1;
    padding: 16px;
    display: grid;
    gap: 6px;
}

.account-empty-state p {
    margin: 0;
    color: var(--text-muted);
}

.account-address-grid {
    display: grid;
    gap: 12px;
}

.account-address-card {
    border: 1px solid #f0debe;
    border-radius: var(--radius-sm);
    background: linear-gradient(180deg, #fffdf9 0%, #fff8ef 100%);
    padding: 14px;
    display: grid;
    gap: 10px;
    box-shadow: 0 8px 18px rgba(99, 46, 17, 0.06);
    transition: var(--transition);
}

.account-address-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 26px rgba(99, 46, 17, 0.1);
}

.account-address-card.is-default {
    border-color: rgba(227, 66, 38, 0.28);
    box-shadow: 0 12px 24px rgba(227, 66, 38, 0.1);
}

.account-address-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.account-address-card-head h4 {
    margin: 0;
    font-size: 1rem;
    color: var(--chocolate-brown);
}

.account-address-card-head p {
    margin: 4px 0 0;
    font-size: 0.84rem;
    color: var(--text-muted);
}

.account-address-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(227, 66, 38, 0.1);
    color: var(--lava-red);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.account-address-text {
    margin: 0;
    color: var(--text-dark);
    line-height: 1.55;
    word-break: break-word;
}

.account-address-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.account-address-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px;
    border-radius: 999px;
    background: #fff3db;
    color: #8b5a13;
    font-size: 0.77rem;
    font-weight: 600;
}

.account-address-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
    align-items: stretch;
}

.account-address-actions form {
    margin: 0;
    display: flex;
}

.account-address-actions .btn,
.account-address-actions form .btn {
    width: 100%;
    min-height: 42px;
    padding: 10px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
}

.checkout-saved-addresses {
    display: grid;
    gap: 12px;
    margin-bottom: 12px;
    padding: 14px;
    border: 1px solid #f0debe;
    border-radius: var(--radius-sm);
    background: linear-gradient(180deg, #fffdf9 0%, #fff8ef 100%);
}

.checkout-saved-addresses .section-head {
    margin: 0;
}

.checkout-saved-addresses .section-head h4 {
    margin: 0;
    font-size: 1rem;
}

.saved-address-option-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.saved-address-option {
    width: 100%;
    border: 1px solid #f0debe;
    border-radius: 14px;
    background: #fffdf8;
    padding: 12px;
    display: grid;
    gap: 8px;
    text-align: left;
    cursor: pointer;
    transition: var(--transition);
    color: var(--chocolate-brown);
}

.saved-address-option:hover {
    border-color: rgba(227, 66, 38, 0.28);
    box-shadow: 0 10px 18px rgba(99, 46, 17, 0.08);
    transform: translateY(-1px);
}

.saved-address-option.is-active {
    border-color: rgba(227, 66, 38, 0.44);
    background: #fff4ed;
    box-shadow: 0 12px 22px rgba(227, 66, 38, 0.12);
}

.saved-address-option-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.saved-address-option-top strong {
    font-size: 0.95rem;
}

.saved-address-option-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(227, 66, 38, 0.1);
    color: var(--lava-red);
    font-size: 0.72rem;
    font-weight: 700;
}

.saved-address-option-text {
    font-size: 0.84rem;
    line-height: 1.45;
    color: var(--text-muted);
    word-break: break-word;
}

.admin-preview-image {
    margin-top: 10px;
    width: auto;
    height: auto;
    max-width: 260px;
    max-height: 260px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
}

.note-text {
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.stat-card {
    background: var(--white);
    border-radius: var(--radius-md);
    padding: 24px;
    box-shadow: var(--shadow-sm);
}

.stat-card p {
    color: var(--text-muted);
    font-weight: 600;
}

.stat-card h2 {
    font-size: 2rem;
    margin-top: 10px;
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.order-search-form {
    border: 1px solid #f2dfbe;
    border-radius: var(--radius-sm);
    background: var(--white);
    box-shadow: var(--shadow-sm);
    padding: 7px 9px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.order-search-form input[type="search"] {
    box-sizing: border-box;
    margin: 0;
    width: 100%;
    min-width: 0;
    flex: 1 1 260px;
    border-width: 1px;
    border-style: solid;
    border-color: var(--line);
    border-radius: var(--radius-sm);
    padding: 9px 10px;
    font: inherit;
    font-size: 0.9rem;
    color: inherit;
    background: #fffdf8;
    -webkit-appearance: none;
    appearance: none;
}

.order-search-form .btn {
    width: auto;
    margin-top: 0;
}

.order-search-form input[type="search"]::placeholder {
    color: var(--text-muted);
}

.orders-board {
    display: grid;
    gap: 16px;
}

.order-pagination {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.order-pagination .btn {
    width: auto;
    margin-top: 0;
    min-width: 36px;
    text-align: center;
}

.order-pagination .btn.is-disabled {
    opacity: 0.45;
    pointer-events: none;
}

.order-total-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid #f2ce94;
    background: #fff4e2;
    font-size: 0.78rem;
    font-weight: 700;
}

.order-head-chips {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.order-new-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid #f2d7ae;
    background: #fff8ee;
    font-size: 0.78rem;
    font-weight: 700;
    color: #8b4d2c;
    transition: var(--transition);
}

.order-new-chip.has-new {
    border-color: #efb3a5;
    background: #fff1ee;
    color: #b33624;
}

.order-bulk-toolbar {
    border: 1px solid #f2dfbe;
    border-radius: var(--radius-sm);
    background: var(--white);
    box-shadow: var(--shadow-sm);
    padding: 7px 9px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    flex-wrap: wrap;
}

.order-bulk-select-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
}

.order-bulk-select-all input {
    accent-color: var(--lava-red);
}

.order-bulk-controls {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.order-bulk-controls select {
    box-sizing: border-box;
    margin: 0;
    width: 190px;
    max-width: 190px;
    min-width: 0;
    flex: 0 0 190px;
    border-width: 1px;
    border-style: solid;
    border-color: var(--line);
    border-radius: var(--radius-sm);
    padding: 7px 30px 7px 10px;
    font: inherit;
    font-size: 0.84rem;
    line-height: 1.2;
    color: inherit;
    background-color: #fffdf8;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%23632E11' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    background-size: 14px;
    box-shadow: none;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.order-search-form input[type="search"]:focus,
.order-bulk-controls select:focus {
    border-color: var(--deep-orange);
    outline: 2px solid rgba(242, 140, 40, 0.2);
    outline-offset: 1px;
}

.order-bulk-reason input {
    min-width: 220px;
    font-size: 0.85rem;
    padding: 8px 10px;
}

.order-bulk-count {
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 600;
}

.admin-new-order-alert {
    border: 1px solid #efb3a5;
    background: #fff1ee;
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.admin-new-order-alert-copy strong {
    display: block;
    font-size: 0.92rem;
    line-height: 1.3;
    color: #b33624;
}

.admin-new-order-alert-copy p {
    margin-top: 2px;
    font-size: 0.8rem;
    color: #943324;
}

.admin-new-order-alert-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-new-order-alert-actions .btn {
    width: auto;
}

.order-card-admin {
    background: var(--white);
    border: 1px solid #ecdab9;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.order-card-collapsible {
    padding: 0;
}

.order-card-summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
}

.order-card-summary::-webkit-details-marker {
    display: none;
}

.order-card-summary::after {
    content: '+';
    color: var(--text-muted);
    font-weight: 700;
    margin-left: 4px;
}

.order-card-collapsible[open] .order-card-summary::after {
    content: '-';
}

.order-card-summary-main {
    min-width: 0;
}

.order-select-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
}

.order-select-checkbox {
    accent-color: var(--lava-red);
}

.order-card-summary-sub {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.order-id-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 999px;
    background: #fff2dd;
    color: var(--chocolate-brown);
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid #f2ce94;
    margin-bottom: 6px;
}

.order-card-admin h3 {
    font-size: 1.15rem;
}

.order-card-summary-meta {
    display: grid;
    justify-items: end;
    gap: 2px;
}

.order-card-summary-meta strong {
    color: var(--lava-red);
    font-size: 1.1rem;
}

.order-card-summary-meta small {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.order-card-admin-body {
    border-top: 1px solid #f0e1ca;
    padding: 14px 16px 16px;
    display: grid;
    gap: 12px;
}

.order-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.order-status-text {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.order-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 0.73rem;
    font-weight: 700;
    border: 1px solid transparent;
}

.order-status-badge.status-new {
    background: #fff4dc;
    color: #8a5a00;
    border-color: #f0cf96;
}

.order-status-badge.status-confirmed {
    background: #eef9ee;
    color: #26743a;
    border-color: #b9dfbe;
}

.order-status-badge.status-out_for_delivery {
    background: #fff3e4;
    color: #9a5f1c;
    border-color: #efcb9f;
}

.order-status-badge.status-delivered {
    background: #eaf2ff;
    color: #2453a2;
    border-color: #b8c9ec;
}

.order-status-badge.status-cancelled {
    background: #fff1ee;
    color: #b33624;
    border-color: #efb3a5;
}

.order-status-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.order-status-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.order-status-actions .btn.order-status-btn {
    width: auto;
    padding: 7px 12px;
    font-size: 0.78rem;
    border: 1px solid #ead8b8;
    border-radius: var(--radius-sm);
    background: #fffdf8;
    color: var(--chocolate-brown);
    box-shadow: none;
    transform: none;
}

.order-status-actions .btn.order-status-btn:hover:not(:disabled) {
    background: #fff4df;
    border-color: #e7c489;
    color: var(--chocolate-brown);
}

.order-status-actions .btn.order-status-btn.is-active,
.order-status-actions .btn.order-status-btn:disabled {
    opacity: 1;
    cursor: default;
}

.order-status-actions .btn.order-status-btn.is-active.status-new,
.order-status-actions .btn.order-status-btn:disabled.status-new {
    background: #fff4dc;
    border-color: #f0cf96;
}

.order-status-actions .btn.order-status-btn.is-active.status-confirmed,
.order-status-actions .btn.order-status-btn:disabled.status-confirmed {
    background: #eef9ee;
    border-color: #b9dfbe;
}

.order-status-actions .btn.order-status-btn.is-active.status-out_for_delivery,
.order-status-actions .btn.order-status-btn:disabled.status-out_for_delivery {
    background: #fff3e4;
    border-color: #efcb9f;
}

.order-status-actions .btn.order-status-btn.is-active.status-delivered,
.order-status-actions .btn.order-status-btn:disabled.status-delivered {
    background: #eaf2ff;
    border-color: #b8c9ec;
}

.order-status-actions .btn.order-status-btn.is-active.status-cancelled,
.order-status-actions .btn.order-status-btn:disabled.status-cancelled {
    background: #fff1ee;
    border-color: #efb3a5;
    color: #b33624;
}

.order-cancel-reason {
    border: 1px solid #efb3a5;
    background: #fff1ee;
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    color: #943324;
    font-size: 0.82rem;
}

.order-cancel-reason strong {
    color: #b33624;
}

.order-admin-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.order-admin-block {
    border: 1px solid #f0debe;
    border-radius: var(--radius-sm);
    background: #fffdf8;
    padding: 12px;
}

.order-admin-block h4 {
    font-size: 0.92rem;
    margin-bottom: 4px;
}

.order-admin-items {
    list-style: none;
    display: grid;
    gap: 8px;
}

.order-admin-item-row {
    border: 1px solid #efe2cb;
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    background: var(--white);
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 8px;
    align-items: start;
}

.order-admin-item-main strong {
    display: block;
    font-size: 0.9rem;
    line-height: 1.3;
}

.order-admin-item-main small {
    display: block;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.order-item-options {
    margin: 5px 0 3px;
    display: grid;
    gap: 3px;
}

.order-item-options li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.76rem;
    color: var(--text-muted);
}

.order-admin-item-qty,
.order-admin-item-total {
    font-size: 0.83rem;
    font-weight: 700;
    white-space: nowrap;
}

.order-admin-item-total {
    color: var(--chocolate-brown);
}

.order-admin-notes {
    display: grid;
    gap: 6px;
}

.order-admin-notes li {
    position: relative;
    padding-left: 14px;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.order-admin-notes li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f3c06a;
}

.order-admin-notes li.order-note-unavailable {
    color: #b33624;
    font-weight: 700;
}

.order-admin-notes li.order-note-unavailable::before {
    background: var(--lava-red);
}

.history-orders-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}

.history-order-card {
    border: 1px solid #ecdab9;
    border-radius: var(--radius-md);
    background: var(--white);
    box-shadow: var(--shadow-sm);
    padding: 14px;
    display: grid;
    gap: 10px;
    min-width: 0;
    width: 100%;
    overflow: hidden;
}

.history-order-card,
.history-order-anchor {
    scroll-margin-top: 130px;
}

.history-order-anchor {
    display: block;
    width: 100%;
    height: 0;
    pointer-events: none;
}

.history-order-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.history-order-app-summary {
    display: none;
    text-decoration: none;
    color: inherit;
}

.history-order-app-summary:focus-visible {
    outline: 2px solid rgba(242, 140, 40, 0.32);
    outline-offset: 4px;
}

.history-order-app-thumb {
    width: 92px;
    height: 92px;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(236, 215, 179, 0.9);
    background: #f7f1e7;
    box-shadow: 0 12px 26px rgba(73, 37, 12, 0.08);
}

.history-order-app-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.history-order-app-body {
    min-width: 0;
    display: grid;
    gap: 5px;
    align-content: start;
}

.history-order-app-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
}

.history-order-app-title-wrap {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.history-order-app-title {
    margin: 0;
    font-size: 1.04rem;
    line-height: 1.18;
    font-weight: 800;
    color: var(--chocolate-brown);
    font-family: 'Montserrat', sans-serif;
}

.history-order-app-code {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.history-order-app-total {
    font-size: 1rem;
    line-height: 1.2;
    color: var(--chocolate-brown);
    white-space: nowrap;
    font-family: 'Montserrat', sans-serif;
}

.history-order-app-meta,
.history-order-app-primary,
.history-order-app-secondary {
    margin: 0;
}

.history-order-app-meta {
    color: var(--text-muted);
    font-size: 0.84rem;
}

.history-order-app-primary {
    color: var(--chocolate-brown);
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.45;
}

.history-order-app-secondary {
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

.history-order-code {
    font-weight: 800;
    font-family: 'Montserrat', sans-serif;
    color: var(--chocolate-brown);
    margin-bottom: 2px;
}

.history-order-progress {
    display: grid;
    gap: 5px;
}

.history-order-progress-track {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: #f6e8d1;
    overflow: hidden;
}

.history-order-progress-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--golden-fry);
}

.history-order-progress-fill.status-confirmed {
    background: #3f9d53;
}

.history-order-progress-fill.status-out_for_delivery {
    background: #d47c1c;
}

.history-order-progress-fill.status-delivered {
    background: #2453a2;
}

.history-order-progress-fill.status-cancelled {
    background: var(--lava-red);
}

.history-order-progress p {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.history-order-items {
    display: grid;
    gap: 5px;
}

.history-order-items li {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.84rem;
}

.history-order-items li span,
.history-review-copy,
.history-review-note {
    overflow-wrap: anywhere;
}

.history-order-cancel-reason {
    font-size: 0.8rem;
    color: #b33624;
}

.history-review-panel {
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid #f3e4c8;
    display: grid;
    gap: 12px;
}

.history-review-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.history-review-copy {
    display: grid;
    gap: 4px;
}

.history-review-kicker {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lava-red);
}

.history-review-copy h3 {
    margin: 0;
    color: var(--chocolate-brown);
    font-size: 0.92rem;
}

.history-review-copy p {
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.history-review-avatar-wrap {
    flex: 0 0 auto;
}

.history-review-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid #f0dec2;
    background: #fff8ee;
}

.history-review-status small {
    color: var(--text-muted);
}

.history-review-form {
    display: grid;
    gap: 14px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid #f0debf;
    background: linear-gradient(180deg, #fffdfa 0%, #fff5e9 100%);
}

.history-review-form label,
.history-review-label {
    display: block;
    margin-bottom: 8px;
    color: var(--chocolate-brown);
    font-size: 0.88rem;
    font-weight: 700;
}

.history-review-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.history-review-rating {
    display: grid;
    gap: 8px;
}

.review-rating-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.review-rating-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.review-rating-chip {
    min-width: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 12px;
    border-radius: 999px;
    border: 1px solid #ecd8b7;
    background: var(--white);
    color: var(--chocolate-brown);
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}

.review-rating-input:checked + .review-rating-chip {
    border-color: var(--deep-orange);
    background: linear-gradient(135deg, var(--golden-fry) 0%, var(--deep-orange) 100%);
    color: var(--white);
    box-shadow: 0 10px 22px rgba(242, 140, 40, 0.22);
}

.review-rating-input:focus + .review-rating-chip {
    outline: 2px solid rgba(242, 140, 40, 0.24);
    outline-offset: 2px;
}

.history-review-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.history-review-note {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.55;
    max-width: 520px;
}

.history-review-panel--compact {
    gap: 10px;
    padding-top: 10px;
}

.history-review-inline {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid #f0dec2;
    border-radius: 16px;
    background: linear-gradient(180deg, #fffdfa 0%, #fff5e9 100%);
    min-height: 134px;
}

.history-review-inline-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding-top: 8px;
    border-top: 1px solid rgba(240, 222, 194, 0.85);
}

.history-review-inline-copy strong {
    color: var(--chocolate-brown);
    font-size: 0.88rem;
}

.history-review-inline-copy small {
    color: var(--text-muted);
    font-size: 0.74rem;
    line-height: 1.5;
}

.history-review-inline-rating {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: nowrap;
    width: 100%;
}

.history-review-star-picker {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
}

.history-review-star-btn,
.review-modal-star-btn {
    width: 30px;
    height: 30px;
    border: 1px solid #ecd7b3;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.96);
    color: rgba(255, 255, 255, 0.98);
    -webkit-text-stroke: 1px #d7b26b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.84rem;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.history-review-star-btn:hover,
.history-review-star-btn:focus-visible,
.review-modal-star-btn:hover,
.review-modal-star-btn:focus-visible {
    transform: translateY(-1px);
    border-color: var(--deep-orange);
    box-shadow: 0 10px 22px rgba(242, 140, 40, 0.18);
}

.history-review-star-btn.is-active,
.history-review-star-btn.is-preview,
.review-modal-star-btn.is-selected,
.review-modal-star-btn.is-preview {
    border-color: var(--deep-orange);
    background: linear-gradient(135deg, #ffe19b 0%, #ffd36f 100%);
    color: #b96d09;
    -webkit-text-stroke: 0;
}

.history-review-star-btn.is-unselected,
.review-modal-star-btn.is-unselected {
    background: rgba(255, 255, 255, 0.98);
    color: rgba(255, 255, 255, 0.98);
    border-color: #ecd7b3;
    box-shadow: none;
}

.history-review-score-card {
    min-width: 88px;
    border: 1px solid #ecd7b3;
    border-radius: 18px;
    background: linear-gradient(180deg, #fffdf9 0%, #fff3e0 100%);
    color: var(--chocolate-brown);
    padding: 12px 14px;
    display: grid;
    gap: 2px;
    text-align: center;
    box-shadow: 0 12px 28px rgba(99, 46, 17, 0.08);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.history-review-score-card:hover,
.history-review-score-card:focus-visible {
    transform: translateY(-1px);
    border-color: var(--deep-orange);
    box-shadow: 0 16px 30px rgba(99, 46, 17, 0.12);
}

.history-review-score-card strong {
    font-size: 1.2rem;
    line-height: 1;
}

.history-review-score-card span {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.history-review-inline-score {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    color: var(--chocolate-brown);
    white-space: nowrap;
    min-width: 76px;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(236, 215, 179, 0.9);
    font-variant-numeric: tabular-nums;
}

.history-review-inline-score strong {
    font-size: 0.95rem;
    line-height: 1;
    min-width: 2.4ch;
    text-align: center;
}

.history-review-inline-score span {
    color: var(--text-muted);
    font-size: 0.74rem;
}

.receipt-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1700;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}

.receipt-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.receipt-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(18, 14, 10, 0.62);
    backdrop-filter: blur(4px);
}

.receipt-modal-dialog {
    position: relative;
    width: min(960px, calc(100vw - 24px));
    height: min(860px, calc(100vh - 24px));
    background: #fffdf8;
    border: 1px solid rgba(236, 215, 179, 0.9);
    border-radius: 22px;
    box-shadow: 0 30px 80px rgba(58, 30, 9, 0.22);
    overflow: hidden;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    z-index: 1;
}

.receipt-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(236, 215, 179, 0.85);
    background: linear-gradient(180deg, #fffaf0 0%, #fff4e2 100%);
}

.receipt-modal-copy {
    display: grid;
    gap: 3px;
}

.receipt-modal-kicker {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--deep-orange);
}

.receipt-modal-copy h2 {
    margin: 0;
    font-size: 1.08rem;
    color: var(--chocolate-brown);
}

.receipt-modal-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.receipt-modal-close {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(236, 215, 179, 0.95);
    background: #fff;
    color: var(--chocolate-brown);
    font-size: 1.35rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.receipt-modal-close:hover,
.receipt-modal-close:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(242, 140, 40, 0.85);
    box-shadow: 0 10px 22px rgba(242, 140, 40, 0.18);
}

.receipt-modal-frame-wrap {
    min-height: 0;
    background: #fbf4ea;
}

.receipt-modal-frame {
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}

.order-details-mobile-view {
    display: grid;
    gap: 18px;
    max-width: 760px;
    margin: 0 auto;
    padding: 22px 0 28px;
}

.order-details-mobile-hero {
    display: grid;
    gap: 6px;
    padding: 18px 2px 2px;
    text-align: center;
}

.order-details-mobile-kicker {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.order-details-mobile-hero h1 {
    margin: 0;
    color: #1f2533;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.45rem, 3vw, 2.3rem);
    line-height: 1.14;
}

.order-details-mobile-hero p {
    margin: 0;
    color: #5a6272;
    font-size: 0.98rem;
}

.order-details-mobile-route-card,
.order-details-mobile-card {
    border: 1px solid #e7e4dc;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 14px 32px rgba(38, 31, 24, 0.07);
}

.order-details-mobile-route-card {
    padding: 18px;
    display: grid;
    gap: 14px;
}

.order-details-mobile-route-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.order-details-mobile-route-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid #ded9cf;
    color: #242937;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.order-details-mobile-route-icon svg {
    width: 20px;
    height: 20px;
    display: block;
}

.order-details-mobile-route-divider {
    width: 1px;
    height: 30px;
    margin-left: 18px;
    border-left: 2px dashed #d6d0c6;
}

.order-details-mobile-route-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.order-details-mobile-route-copy small {
    color: #6b7282;
    font-size: 0.82rem;
}

.order-details-mobile-route-copy strong,
.order-details-mobile-route-copy span {
    color: #242937;
    line-height: 1.35;
}

.order-details-mobile-route-copy strong {
    font-size: 0.98rem;
}

.order-details-mobile-route-copy span {
    font-size: 0.9rem;
}

.order-details-mobile-card {
    padding: 18px;
    display: grid;
    gap: 16px;
}

.order-details-mobile-card h2 {
    margin: 0;
    color: #242937;
    font-size: 1rem;
    font-family: 'Montserrat', sans-serif;
}

.order-details-mobile-store {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}

.order-details-mobile-store-thumb {
    width: 78px;
    height: 78px;
    border-radius: 20px;
    overflow: hidden;
    background: #f5efe4;
    border: 1px solid #ece2d2;
}

.order-details-mobile-store-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.order-details-mobile-store-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.order-details-mobile-store-copy strong {
    color: #242937;
    font-size: 1rem;
    line-height: 1.26;
}

.order-details-mobile-store-copy span {
    color: #6b7282;
    font-size: 0.84rem;
}

.order-details-mobile-items-list {
    display: grid;
    gap: 12px;
}

.order-details-mobile-item-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
}

.order-details-mobile-item-row--option {
    margin-top: -6px;
}

.order-details-mobile-item-qty,
.order-details-mobile-item-total {
    color: #242937;
    font-weight: 700;
}

.order-details-mobile-item-qty {
    font-size: 0.98rem;
}

.order-details-mobile-item-name {
    color: #2e3342;
    font-size: 0.98rem;
    line-height: 1.36;
}

.order-details-mobile-item-row--option .order-details-mobile-item-name,
.order-details-mobile-item-row--option .order-details-mobile-item-total,
.order-details-mobile-item-row--option .order-details-mobile-item-qty {
    color: #6b7282;
    font-size: 0.86rem;
    font-weight: 600;
}

.order-details-mobile-total-row,
.order-details-mobile-payment-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #5b6476;
    font-size: 0.98rem;
}

.order-details-mobile-total-row strong,
.order-details-mobile-payment-row strong {
    color: #242937;
}

.order-details-mobile-total-row--grand {
    padding-top: 10px;
    border-top: 1px solid #ece8df;
    font-size: 1.08rem;
    font-weight: 700;
}

.order-details-mobile-total-row--grand strong {
    font-size: 1.14rem;
    font-family: 'Montserrat', sans-serif;
}

.order-details-mobile-total-row .is-discount {
    color: #da4577;
}

.order-details-mobile-inline-action {
    border: 0;
    background: transparent;
    padding: 0;
    color: #242937;
    font-size: 0.96rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.order-details-mobile-inline-action:hover,
.order-details-mobile-inline-action:focus-visible {
    color: var(--deep-orange);
}

.order-details-mobile-notes {
    display: grid;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px solid #ece8df;
}

.order-details-mobile-notes p {
    margin: 0;
    color: #4f5767;
    font-size: 0.92rem;
    line-height: 1.6;
    white-space: pre-line;
}

.order-details-mobile-actionbar {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-top: 4px;
    padding: 10px 0 calc(12px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(247, 243, 235, 0) 0%, rgba(247, 243, 235, 0.88) 22%, #f7f3eb 100%);
}

.order-details-mobile-actionbar .btn {
    width: 100%;
    min-height: 56px;
    border-radius: 18px;
    font-size: 1rem;
    font-weight: 800;
}

.order-receipt-page .order-receipt-print-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.review-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1600;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}

.review-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.review-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16, 9, 5, 0.58);
}

.review-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(640px, calc(100vw - 24px));
    max-height: min(92vh, 860px);
    overflow-y: auto;
    border-radius: 22px;
    background: var(--white);
    box-shadow: 0 28px 70px rgba(23, 13, 7, 0.3);
}

.review-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--white);
    color: var(--chocolate-brown);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    cursor: pointer;
}

.review-modal-body {
    padding: 24px;
    display: grid;
    gap: 18px;
}

.review-modal-head {
    display: grid;
    gap: 6px;
    padding-right: 42px;
}

.review-modal-head h3 {
    margin: 0;
    color: var(--chocolate-brown);
}

.review-modal-copy {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.6;
}

.review-modal-form {
    padding: 18px;
}

.review-modal-rating-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.review-modal-stars {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.review-modal-rating-summary {
    min-width: 100px;
    display: grid;
    gap: 4px;
    text-align: right;
}

.review-modal-rating-summary strong {
    font-size: 1.1rem;
    line-height: 1;
    color: var(--chocolate-brown);
}

.review-modal-rating-summary span {
    font-size: 0.76rem;
    color: var(--text-muted);
}

.history-review-grid-column--full {
    grid-column: 1 / -1;
}

.review-modal-image-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px dashed #ecd7b3;
    background: #fff9ef;
}

.review-modal-image-row.is-hidden {
    display: none;
}

.review-modal-image-row small {
    color: var(--text-muted);
    line-height: 1.55;
}

.review-modal-image-fallback {
    flex-shrink: 0;
}

.order-success-modal-dialog {
    width: min(560px, calc(100vw - 24px));
}

.order-success-modal-body {
    gap: 16px;
}

.order-success-modal-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.order-success-modal-card {
    display: grid;
    gap: 6px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(236, 215, 179, 0.9);
    background: linear-gradient(180deg, #fffdf9 0%, #fff8ee 100%);
}

.order-success-modal-card span {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.order-success-modal-card strong {
    color: var(--chocolate-brown);
    font-size: 1rem;
}

.order-success-modal-note {
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid #f2d6a9;
    background: #fff5df;
    color: var(--chocolate-brown);
    font-weight: 600;
    line-height: 1.55;
}

.order-success-modal-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.history-order-card.is-just-placed {
    border-color: rgba(242, 140, 40, 0.55);
    box-shadow: 0 16px 30px rgba(242, 140, 40, 0.14);
}

.history-order-card.is-targeted {
    border-color: rgba(188, 66, 32, 0.48);
    box-shadow: 0 16px 34px rgba(188, 66, 32, 0.18);
}

.history-order-footer {
    display: grid;
    gap: 10px;
    border-top: 1px solid #f0debe;
    padding-top: 8px;
}

.history-order-footer > strong {
    white-space: nowrap;
    font-size: 1.06rem;
    line-height: 1.1;
}

.history-order-footer-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
}

.history-order-footer .btn {
    width: 100%;
    margin-top: 0;
}

.history-order-footer-actions > .btn:only-child {
    grid-column: 1 / -1;
}

.split-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.finance-filter-form,
.finance-expense-form {
    gap: 12px;
}

.finance-filter-form .settings-actions {
    grid-column: 1 / -1;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.finance-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.finance-balance-note,
.finance-form-note,
.finance-table-note,
.finance-row-subtext,
.finance-source-helper {
    color: var(--text-muted);
    font-size: 0.84rem;
    line-height: 1.55;
}

.finance-balance-note,
.finance-form-note,
.finance-table-note,
.finance-row-subtext,
.finance-source-helper {
    overflow-wrap: anywhere;
}

.finance-balance-note {
    margin: 0;
    max-width: 640px;
}

.finance-stats-grid {
    margin-bottom: 18px;
}

.finance-chart-grid,
.finance-breakdown-grid {
    margin-bottom: 12px;
}

.finance-credit-grid,
.finance-breakdown-grid {
    margin-top: 0;
}

.finance-breakdown-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.finance-stat {
    border: 1px solid #f1e1c6;
}

.finance-stat h2 {
    margin-bottom: 6px;
}

.finance-stat small {
    color: var(--text-muted);
}

.finance-stat--good {
    background: linear-gradient(180deg, #ffffff 0%, #f7fff7 100%);
}

.finance-stat--good h2 {
    color: #2f8b45;
}

.finance-stat--balance {
    background: linear-gradient(180deg, #ffffff 0%, #fff8eb 100%);
}

.finance-stat--balance h2 {
    color: var(--chocolate-brown);
}

.finance-stat--warning {
    background: linear-gradient(180deg, #ffffff 0%, #fff6ef 100%);
}

.finance-stat--warning h2 {
    color: #c66c17;
}

.finance-stat--danger {
    background: linear-gradient(180deg, #ffffff 0%, #fff2f1 100%);
}

.finance-stat--danger h2 {
    color: #b33624;
}

.finance-admin-grid,
.finance-ledger-grid {
    margin-top: 0;
}

.finance-expense-form {
    position: sticky;
    top: 92px;
}

.finance-existing-proof {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.finance-source-helper {
    margin: -2px 0 2px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px dashed #ead4b4;
    background: #fff9ef;
}

.finance-summary-panel {
    display: grid;
    gap: 18px;
}

.finance-summary-list {
    display: grid;
    gap: 10px;
}

.finance-mini-summary {
    display: grid;
    gap: 10px;
    padding-top: 8px;
    border-top: 1px solid #f1e2c8;
}

.finance-mini-summary div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.finance-mini-summary span {
    color: var(--text-muted);
    font-size: 0.86rem;
}

.finance-mini-summary strong {
    color: var(--chocolate-brown);
}

.finance-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.finance-card-grid--watchlist,
.finance-card-grid--ledger,
.finance-card-grid--orders {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.finance-empty-card,
.finance-data-card {
    position: relative;
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 16px;
    border: 1px solid #f1e1c6;
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 249, 239, 0.98) 100%);
    box-shadow: 0 14px 30px rgba(99, 46, 17, 0.08);
    overflow: hidden;
    animation: financeCardRise 0.45s ease both;
    transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.finance-empty-card {
    grid-column: 1 / -1;
    align-content: center;
    min-height: 160px;
}

.finance-empty-card::before,
.finance-data-card::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--lava-red), var(--golden-fry), var(--deep-orange));
    opacity: 0.9;
}

.finance-data-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(99, 46, 17, 0.11);
    border-color: #ebcd96;
}

.finance-empty-card h4,
.finance-data-card h4 {
    margin: 0;
    color: var(--chocolate-brown);
}

.finance-empty-card p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.6;
}

.finance-data-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.finance-data-card-head > div {
    min-width: 0;
}

.finance-data-card-kicker {
    margin: 0 0 6px;
    color: #9b7441;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.finance-data-card-amount {
    color: var(--chocolate-brown);
    font-family: 'Montserrat', sans-serif;
    font-size: 1.02rem;
    line-height: 1.25;
    text-align: right;
}

.finance-data-card-note {
    margin: 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: #fffaf1;
    border: 1px solid #f3e3c6;
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.65;
}

.finance-card-section {
    display: grid;
    gap: 10px;
}

.finance-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.finance-meta-grid--vendor {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.finance-meta-grid--tight {
    gap: 8px;
}

.finance-meta-item {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 10px 11px;
    border-radius: 12px;
    background: #fffdf8;
    border: 1px solid #f2e4cb;
}

.finance-meta-item span {
    color: var(--text-muted);
    font-size: 0.76rem;
}

.finance-meta-item strong {
    color: var(--chocolate-brown);
    font-size: 0.92rem;
    line-height: 1.45;
}

.finance-status-stack--inline {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}

.finance-card-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    padding-top: 2px;
}

.finance-card-proof {
    display: flex;
    align-items: center;
    min-height: 48px;
}

.finance-card-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.finance-card-actions form {
    margin: 0;
}

.finance-card-actions .btn,
.finance-card-actions form .btn {
    width: auto;
    min-width: 96px;
}

.finance-data-card--compact {
    align-content: start;
}

.finance-data-card--compact .finance-data-card-amount {
    text-align: left;
}

@keyframes financeCardRise {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.admin-users-stack {
    display: grid;
    gap: 16px;
}

.admin-user-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid #f0cf96;
    background: #fff4dc;
    color: #8a5a00;
    font-size: 0.68rem;
    font-weight: 700;
}

.admin-user-chip.is-super {
    border-color: #efb47a;
    background: linear-gradient(135deg, #fff2df 0%, #ffe2bb 100%);
    color: #933f00;
}

.admin-user-chip.is-admin {
    border-color: #edd7aa;
    background: #fff7e7;
    color: #7b5500;
}

.admin-user-chip.is-cashier {
    border-color: #d7def1;
    background: #f3f6ff;
    color: #35518c;
}

.admin-user-chip.is-mfa {
    border-color: #c8e8d1;
    background: #eefbf2;
    color: #1f7a37;
}

.admin-user-chip.is-mfa-off {
    border-color: #eadac2;
    background: #fff8ef;
    color: #8b6b2c;
}

.admin-role-summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 6px 10px;
    border: 1px solid #f0dfbf;
    border-radius: 999px;
    background: #fffaf2;
}

.admin-role-name {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--chocolate-brown);
}

.header-role-chip {
    margin-left: 0;
}

.admin-account-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.admin-account-card.full-width {
    grid-column: 1 / -1;
}

.mfa-card-grid {
    margin-top: 14px;
}

.mfa-card-grid--single {
    grid-template-columns: minmax(0, 1fr);
}

.mfa-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border: 1px solid #f0dfbf;
    border-radius: 16px;
    background: #fffaf2;
}

.mfa-status-row--compact {
    padding: 10px 12px;
    gap: 10px;
    border-radius: 14px;
}

.mfa-status-copy {
    display: grid;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.mfa-status-copy p {
    margin: 0;
    color: var(--text-muted);
}

.mfa-time-note {
    font-size: 0.75rem;
}

.mfa-secret-box {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid #f0d9b5;
    border-radius: 18px;
    background: #fffaf1;
    display: grid;
    gap: 10px;
}

.mfa-secret-layout {
    display: grid;
    grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.mfa-qr-panel {
    display: grid;
    gap: 10px;
    justify-items: center;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid #f0dfbf;
    background: #fffdf8;
    text-align: center;
}

.mfa-secret-actions {
    display: grid;
    gap: 8px;
    width: 100%;
}

.mfa-inline-form {
    display: grid;
    gap: 8px;
    width: 100%;
    margin: 0;
}

.mfa-secret-actions .btn {
    width: 100%;
}

.mfa-qr-canvas {
    width: 192px;
    min-height: 192px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 16px;
    border: 1px solid #efe3cf;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(242, 140, 40, 0.03);
}

.mfa-qr-canvas canvas {
    width: 100%;
    height: auto;
    display: block;
}

.mfa-qr-canvas.is-error {
    min-height: 96px;
    padding: 14px;
    color: #9b402f;
    border-color: #efb9ab;
    background: #fff3ef;
    font-size: 0.88rem;
    line-height: 1.5;
}

.mfa-secret-copy {
    display: grid;
    gap: 10px;
}

.mfa-secret-box code {
    display: block;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: #ffffff;
    color: var(--chocolate-brown);
    word-break: break-all;
}

.admin-users-table td small {
    display: block;
    margin-top: 4px;
    color: var(--text-muted);
}

.admin-users-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mfa-action-card {
    margin-top: 0;
    border: 1px solid #f1dfc0;
    border-radius: 16px;
    background: linear-gradient(180deg, #fffdfa 0%, #fff7ec 100%);
    box-shadow: 0 10px 20px rgba(99, 46, 17, 0.06);
}

.mfa-action-card--compact {
    padding: 14px;
    gap: 10px;
}

.mfa-action-card--compact h3 {
    margin-bottom: 2px;
}

.mfa-action-card--compact .form-help {
    margin-bottom: 0;
}

.mfa-inline-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px 12px;
}

.mfa-inline-fields label {
    margin-bottom: 6px;
}

.mfa-inline-fields input {
    margin-bottom: 0;
}

.admin-manage-selector-action {
    display: flex;
    align-items: end;
}

.recovery-codes-panel {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid #f0d9b5;
    border-radius: 18px;
    background: #fffaf1;
}

.recovery-codes-panel--priority {
    margin-bottom: 16px;
    border-color: #edc98f;
    box-shadow: 0 14px 28px rgba(99, 46, 17, 0.08);
}

.recovery-codes-panel--hero {
    position: relative;
    border-width: 2px;
    border-color: #f1b562;
    background:
        linear-gradient(135deg, rgba(242, 140, 40, 0.12) 0%, rgba(253, 184, 19, 0.08) 100%),
        #fffaf1;
    box-shadow: 0 18px 34px rgba(99, 46, 17, 0.12);
}

.recovery-codes-panel--hero::before {
    content: "Important";
    position: absolute;
    top: 14px;
    right: 16px;
    padding: 5px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #f28c28 0%, #e34226 100%);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.recovery-codes-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.recovery-codes-head p {
    margin: 6px 0 0;
    max-width: 56ch;
    color: var(--text-muted);
}

.recovery-codes-panel h3 {
    margin-bottom: 6px;
}

.recovery-codes-panel p {
    margin-bottom: 14px;
    color: var(--text-muted);
}

.recovery-codes-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.recovery-codes-callout {
    display: grid;
    gap: 4px;
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(227, 66, 38, 0.18);
    background: rgba(255, 255, 255, 0.8);
}

.recovery-codes-callout strong {
    color: var(--lava-red);
    font-size: 0.88rem;
}

.recovery-codes-callout span {
    color: var(--text-dark);
    font-size: 0.83rem;
    line-height: 1.5;
}

.recovery-codes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
}

.recovery-code {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid #f0bc70;
    background: linear-gradient(180deg, #ffffff 0%, #fff8ef 100%);
    color: var(--chocolate-brown);
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9);
}

.compact-inline-details {
    padding: 0;
    overflow: hidden;
}

.compact-inline-details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    list-style: none;
    font-weight: 700;
    color: var(--chocolate-brown);
}

.compact-inline-details summary::-webkit-details-marker {
    display: none;
}

.compact-inline-details summary::after {
    content: "+";
    font-size: 1rem;
    line-height: 1;
    color: #9b7441;
}

.compact-inline-details[open] summary {
    border-bottom: 1px solid #f1e2c8;
}

.compact-inline-details[open] summary::after {
    content: "-";
}

.compact-inline-details__form {
    display: grid;
    gap: 12px;
    padding: 0 16px 16px;
}

.admin-compact-section {
    margin-top: 18px;
    border: 1px solid #f1e1c6;
    border-radius: 20px;
    background: linear-gradient(180deg, #fffefa 0%, #fffaf1 100%);
    box-shadow: 0 12px 26px rgba(99, 46, 17, 0.07);
    overflow: hidden;
}

.admin-compact-summary {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 54px 16px 18px;
    cursor: pointer;
    list-style: none;
}

.admin-compact-summary::-webkit-details-marker {
    display: none;
}

.admin-compact-summary h3 {
    margin: 2px 0 4px;
}

.admin-compact-summary p {
    margin: 0;
    color: var(--text-muted);
    max-width: 58ch;
}

.admin-compact-summary::after {
    content: "+";
    position: absolute;
    top: 18px;
    right: 18px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid #efd7b0;
    background: #fff;
    color: var(--chocolate-brown);
    font-size: 1rem;
    line-height: 1;
}

.admin-compact-section[open] .admin-compact-summary {
    border-bottom: 1px solid #f1e2c8;
}

.admin-compact-section[open] .admin-compact-summary::after {
    content: "-";
}

.admin-compact-summary-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: #fff4dc;
    border: 1px solid #efd3a2;
    color: var(--chocolate-brown);
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
}

.admin-compact-body {
    padding: 18px;
}

.form-help {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.customer-status-chip.status-active {
    border-color: #bde3c2;
    background: #ecfaf0;
    color: #236f31;
}

.customer-status-chip.status-suspended {
    border-color: #f2d48e;
    background: #fff7e3;
    color: #8a5f00;
}

.customer-status-chip.status-blocked {
    border-color: #efb9ab;
    background: #fff1ec;
    color: #9b402f;
}

.customer-auth-chip {
    margin-left: 0;
    border-color: #edd7aa;
    background: #fff7e7;
    color: #7b5500;
}

.customer-address-cell {
    min-width: 220px;
    max-width: 320px;
    white-space: normal;
    color: var(--text-muted);
    line-height: 1.45;
}

.customer-action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.customer-action-buttons .inline-form {
    margin-left: 0;
}

.customer-action-buttons .btn {
    min-width: 74px;
}

.admin-editor .card-form {
    position: sticky;
    top: 95px;
}

.inline-form {
    display: inline-flex;
    margin-left: 6px;
}

.table-wrap {
    background: var(--white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow-x: auto;
}

.finance-proof-link {
    display: inline-flex;
}

.finance-proof-thumb {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    object-fit: cover;
    border: 1px solid #eadac0;
    box-shadow: 0 6px 14px rgba(99, 46, 17, 0.08);
}

.finance-status-chip,
.finance-impact-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
}

.finance-status-chip--settled {
    background: #fff3de;
    color: #a65d10;
}

.finance-status-chip--pending {
    background: #fff1f1;
    color: #b33624;
}

.finance-status-chip--warning {
    background: #fff6dc;
    color: #a86a10;
}

.finance-status-chip--done {
    background: #edf9ef;
    color: #2f8b45;
}

.finance-impact--good {
    background: #edf9ef;
    color: #2f8b45;
}

.finance-impact--muted {
    background: #f4f5f7;
    color: #5b6472;
}

.finance-action-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 132px;
}

.finance-action-stack .btn,
.finance-action-stack form {
    width: 100%;
}

.finance-action-stack form {
    margin: 0;
}

.finance-action-stack--compact {
    min-width: 96px;
}

.finance-status-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

[data-finance-credit-controls][hidden] {
    display: none !important;
}

[data-finance-credit-meta][hidden] {
    display: none !important;
}

.finance-print-section {
    padding-top: 18px;
}

.finance-print-sheet {
    display: grid;
    gap: 24px;
    padding: 28px;
    background: #ffffff;
    border: 1px solid #f1e1c6;
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(99, 46, 17, 0.08);
}

.finance-print-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.finance-print-head h1 {
    margin-bottom: 8px;
}

.finance-print-head p {
    margin: 0;
}

.finance-print-meta {
    display: grid;
    gap: 6px;
    align-content: start;
    min-width: 240px;
    padding: 16px 18px;
    border: 1px solid #f1e1c6;
    border-radius: 18px;
    background: #fffaf0;
    color: #6b5c53;
}

.finance-print-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.finance-print-block .table-wrap table,
.finance-print-grid .table-wrap table {
    min-width: 0;
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 680px;
}

thead th {
    background: #fff5df;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}

th,
td {
    text-align: left;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

tbody tr:hover {
    background: #fffdf8;
}

.cart-popup {
    position: fixed;
    right: 22px;
    bottom: 104px;
    width: min(340px, calc(100vw - 36px));
    background: var(--white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 16px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: var(--transition);
    z-index: 1100;
}

.cart-popup.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.cart-popup.is-flight-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.cart-popup-fly {
    position: fixed;
    z-index: 2501;
    pointer-events: none;
    overflow: visible;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    transform: translate(0, 0) scale(1);
    transform-origin: center center;
    opacity: 1;
    transition:
        transform 1.35s cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 1.35s ease,
        width 0.28s ease,
        min-height 0.28s ease,
        padding 0.28s ease,
        border-radius 0.28s ease;
}

.cart-popup-fly-message {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--chocolate-brown);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.cart-popup-fly-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.cart-popup-fly-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--lava-red);
    color: var(--white);
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1;
    height: 30px;
    padding: 0 12px;
    white-space: nowrap;
}

.cart-popup-fly-count {
    position: absolute;
    top: 10px;
    right: 12px;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 999px;
    background: #fff1ee;
    border: 1px solid var(--lava-red);
    color: var(--lava-red);
    font-size: 0.71rem;
    font-weight: 800;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    transition: all 0.28s ease;
}

.cart-popup-fly.is-condensed {
    width: fit-content !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    border-radius: 999px;
    border: 0;
    background: transparent;
    box-shadow: none;
    display: grid;
    place-items: center;
    gap: 0;
}

.cart-popup-fly.is-condensed .cart-popup-fly-message,
.cart-popup-fly.is-condensed .cart-popup-fly-actions {
    display: none;
}

.cart-popup-fly.is-condensed .cart-popup-fly-count {
    position: static;
    min-width: 32px;
    height: 32px;
    padding: 0 7px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0;
}

.cart-popup-fly.is-condensed.is-flying::before {
    content: "";
    position: absolute;
    left: -34px;
    top: 50%;
    width: 42px;
    height: 12px;
    border-radius: 999px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, rgba(227, 66, 38, 0.78) 0%, rgba(227, 66, 38, 0.06) 100%);
    animation: cartFlyTail 1.35s ease-out both;
}

.cart-popup-fly.is-condensed.is-flying::after {
    content: "";
    position: absolute;
    left: -20px;
    top: 50%;
    width: 22px;
    height: 7px;
    border-radius: 999px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, rgba(253, 184, 19, 0.72) 0%, rgba(253, 184, 19, 0) 100%);
    animation: cartFlyTail 1.35s ease-out both;
}

@keyframes cartFlyTail {
    0% {
        opacity: 1;
        transform: translateY(-50%) scaleX(1);
    }
    100% {
        opacity: 0.55;
        transform: translateY(-50%) scaleX(0.86);
    }
}

.cart-popup-fly.is-flying {
    box-shadow: var(--shadow-sm);
}

.cart-popup-message {
    font-weight: 600;
    margin-bottom: 12px;
}

.cart-popup-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cart-popup-close {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--white);
    color: var(--chocolate-brown);
    cursor: pointer;
    font-size: 1.3rem;
    line-height: 1;
}

.cart-popup-close:hover {
    background: #fff4dc;
}

body.modal-open {
    overflow: hidden;
}

.addtocart-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1350;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: var(--transition);
}

.addtocart-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.addtocart-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16, 9, 5, 0.55);
}

.addtocart-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(560px, calc(100vw - 22px));
    max-height: min(92vh, 780px);
    background: var(--white);
    border-radius: 18px;
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.addtocart-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--white);
    color: var(--chocolate-brown);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}

.addtocart-modal-close:hover {
    background: #fff4dc;
}

.addtocart-modal-scroll {
    overflow-y: auto;
}

.addtocart-modal-media {
    width: 100%;
    height: min(44vh, 280px);
    background: #fff7e6;
}

.addtocart-modal-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.addtocart-modal-body {
    padding: 18px 18px 14px;
}

.addtocart-modal-body h2 {
    font-size: clamp(1.2rem, 3.4vw, 1.5rem);
    line-height: 1.3;
    margin-bottom: 2px;
}

.addtocart-modal-price {
    color: var(--lava-red);
    font-weight: 800;
    font-size: 1.05rem;
    margin-bottom: 8px;
}

.addtocart-modal-description {
    color: var(--text-muted);
    font-size: 0.92rem;
}

.addtocart-section {
    padding: 14px 18px;
    border-top: 1px solid #f1e6d6;
    background: var(--white);
}

.addtocart-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.addtocart-section h3 {
    font-size: 1rem;
    line-height: 1.3;
}

.addtocart-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid #f4d59f;
    background: #fff7e7;
    color: var(--chocolate-brown);
    font-size: 0.74rem;
    font-weight: 700;
}

.addtocart-section-note {
    color: var(--text-muted);
    font-size: 0.82rem;
    margin-top: 4px;
}

.addtocart-options-list,
.addtocart-crosssell-list {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.addtocart-option-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid #f2e3cb;
    border-radius: var(--radius-sm);
    background: #fffdf8;
    padding: 9px 10px;
    cursor: pointer;
}

.addtocart-option-main {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
}

.addtocart-option-main input {
    margin: 0;
    accent-color: var(--lava-red);
}

.addtocart-option-price {
    font-weight: 700;
    color: var(--chocolate-brown);
    font-size: 0.82rem;
    white-space: nowrap;
}

.addtocart-crosssell-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid #f2e3cb;
    border-radius: var(--radius-sm);
    background: #fffdf8;
    padding: 8px 10px;
    cursor: pointer;
}

.addtocart-crosssell-row input {
    margin: 0;
    accent-color: var(--lava-red);
}

.addtocart-crosssell-main {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.addtocart-crosssell-main img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid #f2dfc1;
    background: #fff5df;
}

.addtocart-crosssell-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.addtocart-crosssell-copy strong {
    font-size: 0.88rem;
    line-height: 1.2;
}

.addtocart-crosssell-copy small {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.addtocart-section--unavailable h3,
.addtocart-section--unavailable .addtocart-section-note {
    color: var(--lava-red);
}

.addtocart-section--unavailable .addtocart-select {
    border-color: #efb3a5;
    background: #fff3f1;
    color: #b33624;
    font-weight: 600;
}

.addtocart-section--unavailable .addtocart-select option {
    color: #b33624;
}

.addtocart-view-more {
    margin-top: 8px;
    font-size: 0.86rem;
}

.addtocart-textarea,
.addtocart-select {
    width: 100%;
    margin-top: 10px;
    border: 1px solid #ecd9ba;
    border-radius: var(--radius-sm);
    padding: 10px 11px;
    font: inherit;
    color: inherit;
    background: #fffdf8;
}

.addtocart-textarea {
    min-height: 86px;
    resize: vertical;
}

.addtocart-textarea:focus,
.addtocart-select:focus {
    border-color: var(--deep-orange);
    outline: 2px solid rgba(242, 140, 40, 0.2);
    outline-offset: 1px;
}

.addtocart-empty {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.addtocart-crosssell-row.is-hidden {
    display: none;
}

.addtocart-modal-footer {
    padding: 12px 14px 14px;
    border-top: 1px solid var(--line);
    background: var(--white);
    display: flex;
    align-items: center;
    gap: 10px;
}

.addtocart-modal-footer .btn {
    width: auto;
}

.addtocart-modal .addtocart-quantity-selector {
    background: var(--white);
    border-color: #e8ddd1;
    padding: 4px 6px;
    gap: 6px;
    flex-shrink: 0;
}

.addtocart-modal .addtocart-quantity-selector .quantity-minus,
.addtocart-modal .addtocart-quantity-selector .quantity-plus {
    width: 30px;
    min-width: 30px;
    height: 30px;
}

.addtocart-modal .addtocart-quantity-selector .quantity-input {
    width: 34px;
    min-width: 34px;
    font-size: 0.92rem;
}

.addtocart-confirm-btn {
    flex: 1 1 auto;
    min-height: 44px;
}

.payment-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
}

.payment-option {
    display: flex;
    align-items: flex-start;
    gap: 3px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 4px 6px;
    cursor: pointer;
    background: var(--white);
    transition: var(--transition);
}

.payment-option:hover {
    border-color: #f3be6f;
    background: #fff9ec;
}

.payment-option input {
    margin: 1px 0 0 0;
    padding: 0;
    accent-color: var(--lava-red);
    transform: scale(0.82);
    transform-origin: top left;
}

.payment-option-content {
    display: block;
}

.payment-option-content strong {
    display: block;
    font-size: 0.74rem;
    line-height: 1.12;
}

.payment-option input:checked + .payment-option-content strong {
    color: var(--lava-red);
}

.payment-option-content small {
    display: block;
    color: var(--text-muted);
    margin-top: 0;
    font-size: 0.58rem;
    line-height: 1.15;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    max-width: none;
}

.payment-ref-wrap {
    margin-top: 14px;
}

.payment-selected-account {
    margin-top: 12px;
    display: grid;
    gap: 8px;
}

.payment-selected-account .hint-text {
    margin: 0;
}

.is-hidden {
    display: none !important;
}

.payment-account-card {
    border: 1px solid #f0d9b2;
    border-radius: var(--radius-sm);
    background: #fffaf1;
    padding: 10px;
}

.payment-account-card + .payment-account-card {
    margin-top: 10px;
}

.payment-account-card h4 {
    margin-bottom: 8px;
}

.order-success-alert {
    display: grid;
    gap: 8px;
}

.order-success-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.order-success-title {
    font-size: 1.2rem;
    margin-bottom: 2px;
}

.checkout-steps {
    margin: 0;
    padding-left: 20px;
    display: grid;
    gap: 8px;
}

.settings-form {
    gap: 20px;
}

.settings-section {
    border: 1px solid #efd9b5;
    border-radius: var(--radius-sm);
    background: #fffdf8;
    padding: 16px;
    display: grid;
    gap: 12px;
}

.settings-section h3 {
    margin-bottom: 2px;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.settings-grid .full-width {
    grid-column: 1 / -1;
}

.settings-checkbox {
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-weight: 600;
}

.settings-checkbox input[type="checkbox"] {
    margin-top: 2px;
    accent-color: var(--lava-red);
}

.settings-preview-image {
    width: 100%;
    max-width: 180px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
}

.settings-preview-image-wordmark {
    max-width: 360px;
    object-fit: contain;
    background: #fff;
    padding: 4px;
}

.settings-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.settings-inline-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

@media (max-width: 1024px) {
    .main-navigation ul {
        gap: 16px;
    }

    .main-navigation a {
        font-size: 0.9rem;
    }

    .main-navigation .nav-logout-form button {
        font-size: 0.9rem;
    }

    .brand-text {
        font-size: 1.35rem;
    }

    .cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 22px;
    }

    .table-wrap table {
        min-width: 560px;
    }
}

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

    .finance-expense-form {
        position: static;
    }

    .finance-form-grid {
        grid-template-columns: 1fr;
    }

    .admin-editor .card-form {
        position: static;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .checkout-layout {
        grid-template-columns: 1fr;
    }

    .checkout-aside {
        position: static;
    }
}

@media (max-width: 768px) {
    .nav-row {
        min-height: 74px;
    }

    .brand-logo {
        width: 52px;
        height: 52px;
    }

    .section {
        padding: 46px 0;
    }

    .page-hero {
        padding: 52px 0 34px;
    }

    .hero-actions {
        justify-content: center;
    }

    .section-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .order-bulk-toolbar {
        align-items: flex-start;
    }

    .order-search-form {
        align-items: flex-start;
    }

    .order-search-form input[type="search"] {
        width: 100%;
        max-width: none;
        min-width: 0;
        flex: 1 1 100%;
    }

    .order-bulk-controls {
        width: 100%;
    }

    .order-bulk-controls select {
        flex: 1 1 180px;
    }

    .order-bulk-reason {
        width: 100%;
    }

    .order-bulk-reason input {
        width: 100%;
        min-width: 0;
    }

    .checkout-pin-location-map--inline {
        height: 170px;
    }

    .checkout-pin-location-map--popup {
        height: min(56vh, 340px);
    }

    .checkout-pin-map-popup-dialog {
        width: calc(100vw - 16px);
        padding: 12px;
    }

    .checkout-pin-map-popup-actions {
        justify-content: stretch;
    }

    .checkout-pin-map-popup-actions .btn {
        width: 100%;
    }

    .order-head-chips {
        width: 100%;
    }

    .admin-new-order-alert {
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-new-order-alert-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .order-admin-grid {
        grid-template-columns: 1fr;
    }

    .order-card-summary {
        padding: 12px 14px;
    }

    .order-card-summary-meta {
        justify-items: start;
    }

    .order-card-admin-body {
        padding: 12px 14px 14px;
    }

    .order-status-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .order-status-actions .btn.order-status-btn {
        width: auto;
    }

    .order-admin-item-row {
        grid-template-columns: 1fr auto;
    }

    .order-admin-item-total {
        grid-column: 1 / -1;
        justify-self: end;
    }

    .card-form {
        padding: 20px;
    }

    .cart-floating-btn {
        width: 58px;
        height: 58px;
        right: 18px;
        bottom: 18px;
    }

    .cart-popup {
        right: 14px;
        bottom: 86px;
        width: calc(100vw - 28px);
    }

    .cart-preview-item {
        grid-template-columns: 1fr;
    }

    .item-quantity-selector {
        justify-self: start;
    }

    .payment-option {
        padding: 5px;
    }

    .payment-options {
        grid-template-columns: 1fr;
    }

    .settings-grid {
        grid-template-columns: 1fr;
    }

    .settings-grid .full-width {
        grid-column: auto;
    }

    .addtocart-modal-dialog {
        width: min(560px, calc(100vw - 16px));
        border-radius: 14px;
    }

    .addtocart-modal-media {
        height: min(34vh, 220px);
    }
}

@media (max-width: 576px) {
    .container {
        width: min(1200px, 94%);
    }

    .hero h1 {
        font-size: 2.15rem;
    }

    .section-title h2 {
        font-size: 1.8rem;
    }

    .section-title {
        margin-bottom: 32px;
    }

    .categories-grid {
        grid-template-columns: 1fr;
    }

    .cards-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .reviews-premium-grid,
    .history-review-grid {
        grid-template-columns: 1fr;
    }

    .review-premium-card,
    .review-premium-empty {
        border-radius: 20px;
        padding: 18px;
    }

    .review-premium-top,
    .history-review-head,
    .history-review-status,
    .history-review-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .history-review-inline,
    .review-modal-rating-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .history-review-inline-copy,
    .review-modal-rating-summary {
        width: 100%;
        justify-items: start;
        text-align: left;
    }

    .history-review-star-picker,
    .review-modal-stars {
        width: 100%;
        flex-wrap: wrap;
    }

    .history-review-score-card {
        width: 100%;
    }

    .review-modal-dialog {
        width: min(640px, calc(100vw - 16px));
        border-radius: 18px;
    }

    .order-success-modal-grid {
        grid-template-columns: 1fr;
    }

    .receipt-modal-dialog {
        width: min(100vw - 16px, 720px);
        height: min(100vh - 16px, 88vh);
        border-radius: 18px;
    }

    .receipt-modal-header {
        padding: 14px;
        align-items: flex-start;
    }

    .review-modal-body {
        padding: 18px;
    }

    .review-modal-image-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .review-avatar {
        width: 56px;
        height: 56px;
        flex-basis: 56px;
    }

    .review-avatar--placeholder::before {
        top: 11px;
        width: 16px;
        height: 16px;
    }

    .review-avatar--placeholder::after {
        bottom: 9px;
        width: 30px;
        height: 16px;
    }

    .btn {
        width: 100%;
        padding: 11px 18px;
    }

    .hero-actions .btn {
        width: auto;
    }

    .btn-sm {
        width: auto;
    }

    .admin-new-order-alert-actions .btn {
        width: auto;
    }

    .form-section h3,
    .checkout-panel h3,
    .settings-section h3 {
        font-size: 1rem;
    }

    .checkout-guest-actions .btn {
        flex: 1 1 100%;
    }

    .account-summary-grid {
        grid-template-columns: 1fr;
    }

    .cart-preview-item {
        padding: 9px;
    }

    .footer-grid {
        gap: 28px;
    }

    .addtocart-modal-footer {
        padding: 10px;
    }
}

/* Responsive Hardening */
.main-navigation ul {
    flex-wrap: wrap;
}

.table-wrap,
.card-form,
.checkout-layout,
.split-grid,
.settings-grid,
.hero-grid,
.cards-grid {
    min-width: 0;
}

p,
li,
td,
th {
    overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
    .history-orders-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .nav-toggle {
        display: flex;
    }

    .header-right {
        gap: 10px;
    }

    .brand-text {
        font-size: 1.25rem;
    }

    .main-navigation {
        display: none;
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        left: auto;
        width: min(360px, calc(100vw - 24px));
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: var(--radius-sm);
        padding: 14px;
        box-shadow: var(--shadow-lg);
    }

    .main-navigation.is-open {
        display: block;
    }

    .main-navigation ul {
        flex-direction: column;
        gap: 10px;
        flex-wrap: nowrap;
        align-items: stretch;
    }

    .main-navigation ul > li {
        width: 100%;
    }

    .main-navigation a {
        display: inline-flex;
        align-items: center;
        padding: 6px 0;
        font-size: 0.92rem;
    }

    .main-navigation .nav-logout-form button {
        display: inline-flex;
        align-items: center;
        padding: 6px 0;
        font-size: 0.92rem;
    }

    .main-navigation .nav-logout-form {
        width: 100%;
    }

    .header-customer-profile {
        align-items: flex-end;
        min-width: 56px;
    }

    .header-customer-profile-name {
        max-width: 76px;
        text-align: right;
    }

    .main-navigation a.admin-bell-link {
        width: 36px;
        height: 36px;
        padding: 0;
        justify-content: center;
    }

    .header-cart-link {
        width: 36px;
        height: 36px;
    }

    .header-cart-icon {
        width: 17px;
        height: 17px;
    }

    .admin-settings-dropdown,
    .admin-settings-portal,
    .admin-bell-portal {
        width: auto;
    }

    .admin-bell-link,
    .admin-settings-toggle {
        width: 36px;
        height: 36px;
        border-radius: 999px;
        padding: 0;
        justify-content: center;
        gap: 0;
        flex-shrink: 0;
    }

    .admin-settings-toggle-label,
    .admin-settings-toggle-icon {
        display: none;
    }

    .admin-settings-toggle-glyph {
        font-size: 1.02rem;
    }

    .admin-bell-menu {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        margin-top: 0;
        min-width: min(300px, calc(100vw - 20px));
        width: min(300px, calc(100vw - 20px));
        box-shadow: var(--shadow-lg);
        max-height: min(68vh, 420px);
        overflow: auto;
    }

    .admin-bell-order-row,
    .admin-bell-empty {
        padding-left: 10px;
        padding-right: 10px;
    }

    .admin-settings-menu {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        margin-top: 0;
        min-width: min(260px, calc(100vw - 20px));
        width: min(260px, calc(100vw - 20px));
        box-shadow: var(--shadow-lg);
        max-height: min(68vh, 420px);
        overflow: auto;
    }

    .checkout-layout {
        grid-template-columns: 1fr;
    }

    .checkout-aside {
        position: static;
    }

    .split-grid {
        grid-template-columns: 1fr;
    }

    .admin-editor .card-form {
        position: static;
    }
}

@media (max-width: 900px) {
    .container {
        width: min(1200px, 93%);
    }

    .why-choose-section .features-grid {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(240px, 78vw);
        overflow-x: auto;
        padding-bottom: 6px;
        scroll-snap-type: x proximity;
    }

    .why-choose-section .feature-item {
        scroll-snap-align: start;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 18px;
    }

    .categories-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .menu-card-footer {
        gap: 10px;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    table {
        min-width: 560px;
    }
}

@media (max-width: 640px) {
    .container {
        width: min(1200px, 94%);
    }

    .nav-row {
        min-height: 72px;
    }

    .brand-logo {
        width: 50px;
        height: 50px;
    }

    .brand-text {
        font-size: 1.12rem;
    }

    .section {
        padding: 40px 0;
    }

    .page-hero {
        padding: 44px 0 28px;
    }

    .hero h1 {
        font-size: clamp(1.9rem, 8vw, 2.3rem);
    }

    .section-title h2 {
        font-size: 1.72rem;
    }

    .section-title {
        margin-bottom: 30px;
    }

    .menu-card-body,
    .category-card {
        padding: 18px;
    }

    .card-form {
        padding: 16px;
    }

    .map-embed {
        height: 260px;
    }

    .payment-options {
        grid-template-columns: 1fr;
    }

    .cart-preview-item {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .item-quantity-selector {
        justify-self: start;
    }

    table {
        min-width: 500px;
    }

    .btn {
        width: 100%;
        padding: 10px 16px;
    }

    .btn-sm {
        width: auto;
    }

    .hero-actions .btn {
        width: auto;
    }

    .addtocart-modal-body {
        padding: 14px 14px 10px;
    }

    .addtocart-modal-description {
        font-size: 0.88rem;
    }

    .addtocart-section {
        padding: 12px 14px;
    }

    .addtocart-option-row,
    .addtocart-crosssell-row {
        padding: 8px 9px;
    }
}

@media (max-width: 420px) {
    .container {
        width: min(1200px, 95%);
    }

    .nav-row {
        min-height: 68px;
    }

    .brand-logo {
        width: 44px;
        height: 44px;
    }

    .brand-text {
        font-size: 1rem;
        letter-spacing: 0;
    }

    .section {
        padding: 34px 0;
    }

    .map-embed {
        height: 230px;
    }

    .cart-popup {
        width: calc(100vw - 20px);
        right: 10px;
    }

    .addtocart-modal-dialog {
        width: calc(100vw - 12px);
        border-radius: 12px;
    }

    .addtocart-modal-footer {
        flex-wrap: wrap;
    }

    .addtocart-modal .addtocart-quantity-selector {
        justify-content: center;
        width: 100%;
    }

    .addtocart-confirm-btn {
        width: 100%;
    }

    .addtocart-crosssell-row {
        align-items: flex-start;
    }
}

/* POS + Inventory */
.pos-page-section {
    padding-top: 28px;
}

.pos-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.pos-toolbar-note {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.pos-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.pos-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.pos-panel-head h3 {
    margin: 0;
}

.pos-search-input {
    max-width: 240px;
}

.pos-category-filters {
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}

.pos-category-filters .filter-btn {
    margin: 0;
}

.pos-menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
    max-height: 75vh;
    overflow: auto;
    padding-right: 4px;
}

.pos-menu-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    background: var(--white);
    box-shadow: var(--shadow-sm);
}

.pos-menu-card > img {
    width: 100%;
    height: 128px;
    object-fit: cover;
    background: #fafafa;
}

.pos-menu-card-body {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pos-menu-category {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.pos-menu-card h4 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.3;
}

.pos-menu-price {
    margin: 0;
    font-weight: 700;
}

.pos-menu-inline-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pos-menu-quantity-selector.item-quantity-selector.addtocart-quantity-selector {
    width: fit-content;
    min-width: 118px;
    padding: 3px 6px;
    gap: 6px;
}

.pos-menu-quantity-selector.item-quantity-selector.addtocart-quantity-selector .quantity-minus,
.pos-menu-quantity-selector.item-quantity-selector.addtocart-quantity-selector .quantity-plus {
    width: 28px;
    min-width: 28px;
    height: 28px;
}

.pos-menu-quantity-selector.item-quantity-selector.addtocart-quantity-selector .quantity-input {
    width: 32px;
    min-width: 32px;
    font-size: 0.88rem;
}

.pos-inline-note {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    font: inherit;
    font-size: 0.84rem;
    background: #fffdf8;
}

.pos-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.pos-form-grid .full-width {
    grid-column: 1 / -1;
}

.pos-cart-block {
    margin-top: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px;
}

.pos-cart-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pos-empty-text {
    margin: 0;
    color: var(--text-muted);
}

.pos-cart-item {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pos-cart-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pos-cart-controls {
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    align-items: center;
    gap: 8px;
}

.pos-cart-controls > label {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.pos-cart-controls .item-quantity-selector.addtocart-quantity-selector {
    min-width: 120px;
    background: var(--white);
    border-color: #e8ddd1;
    padding: 4px 6px;
    gap: 6px;
}

.pos-cart-controls .item-quantity-selector.addtocart-quantity-selector .quantity-minus,
.pos-cart-controls .item-quantity-selector.addtocart-quantity-selector .quantity-plus {
    width: 30px;
    min-width: 30px;
    height: 30px;
}

.pos-cart-controls .item-quantity-selector.addtocart-quantity-selector .quantity-input {
    width: 34px;
    min-width: 34px;
    font-size: 0.92rem;
}

.pos-cart-controls input[type="number"] {
    max-width: 100px;
}

.pos-cart-item input[type="text"] {
    width: 100%;
}

.pos-discount-row {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.pos-summary {
    margin-top: 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pos-summary > div {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.pos-summary .total {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px dashed var(--line);
}

.pos-payments {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pos-payments h3 {
    margin: 0;
}

.pos-payment-row {
    display: grid;
    grid-template-columns: 1fr 120px 1fr;
    gap: 8px;
}

.pos-slip-section {
    margin-top: 22px;
    border-top: 1px solid var(--line);
    padding-top: 18px;
}

.pos-slip-actions {
    margin-bottom: 10px;
}

.pos-slip {
    width: min(100%, var(--pos-slip-width, 72mm));
    background: #fff;
    border: 1px dashed #999;
    border-radius: 8px;
    padding: 12px;
    font-family: 'Courier New', monospace;
}

.pos-slip header {
    text-align: center;
}

.pos-slip header h3,
.pos-slip header p {
    margin: 0;
}

.pos-slip-meta p,
.pos-slip-totals p,
.pos-slip-payments p {
    margin: 6px 0;
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.pos-slip-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 6px 0;
}

.receipt-option-line {
    margin: 2px 0 0 12px;
    color: #666;
    font-size: 0.72rem;
}

.order-receipt-page .pos-slip {
    margin: 0 auto;
}

.receipt-address-block p {
    display: block;
    margin: 4px 0;
}

.receipt-address-text {
    line-height: 1.35;
    word-break: break-word;
}

.pos-slip-totals .total {
    border-top: 1px dashed #999;
    padding-top: 6px;
}

.pos-report-filters {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.pos-report-filters .settings-actions {
    align-self: end;
}

.order-sales-report-filters .settings-actions {
    grid-column: 1 / -1;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
}

.order-report-chart-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 16px 0 20px;
}

.order-report-chart-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, #ffffff 0%, #fffaf2 100%);
    border: 1px solid rgba(227, 66, 38, 0.08);
    box-shadow: 0 14px 24px rgba(99, 46, 17, 0.08);
}

.order-report-chart-card::before {
    content: "";
    position: absolute;
    inset: -30% auto auto -18%;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(253, 184, 19, 0.18) 0%, rgba(253, 184, 19, 0) 68%);
    pointer-events: none;
}

.order-report-chart-card--wide {
    grid-column: 1 / -1;
}

.order-report-chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.order-report-chart-head h3 {
    margin: 0;
}

.order-report-chart-head span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: #fff3e8;
    border: 1px solid rgba(227, 66, 38, 0.18);
    color: var(--lava-red);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.order-report-chart-canvas {
    width: 100%;
    display: block;
}

.order-report-chart-canvas--donut {
    max-height: 320px;
}

.pos-report-grid {
    align-items: start;
}

.settings-checkbox-group {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.settings-charge-row {
    display: grid;
    grid-template-columns: 1.3fr minmax(120px, 180px) auto;
    gap: 10px;
    align-items: center;
}

.settings-checkbox.inline {
    margin: 0;
}

.inventory-input {
    max-width: 110px;
}

.inventory-bulk-actions {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 12px;
}

.inventory-bulk-actions:last-of-type {
    margin: 12px 0 0;
}

.inventory-status {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.78rem;
    font-weight: 600;
}

.inventory-status-neutral {
    color: #666;
    background: #f1f1f1;
}

.inventory-status-ok {
    color: #0d6b2f;
    background: #d9f4e1;
}

.inventory-status-warning {
    color: #8f4a00;
    background: #ffe8cc;
}

.inventory-status-danger {
    color: #b42318;
    background: #ffe0df;
}

.btn-link.danger {
    color: #b42318;
}

body.lang-ur .pos-page-section,
body.lang-ur .pos-page-section input,
body.lang-ur .pos-page-section textarea,
body.lang-ur .pos-page-section select,
body.lang-ur .pos-page-section button {
    direction: rtl;
    text-align: right;
}

@media print {
    body.pos-slip-print-mode * {
        visibility: hidden;
    }

    body.pos-slip-print-mode .pos-slip,
    body.pos-slip-print-mode .pos-slip * {
        visibility: visible;
    }

    body.pos-slip-print-mode .pos-slip {
        position: absolute;
        left: 0;
        top: 0;
        border: none;
        width: var(--pos-slip-width, 72mm);
    }
}

@media (max-width: 1100px) {
    .pos-layout {
        grid-template-columns: 1fr;
    }

    .pos-menu-grid {
        max-height: 60vh;
    }

    .pos-report-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .order-report-chart-grid {
        grid-template-columns: 1fr;
    }

    .order-report-chart-card--wide {
        grid-column: auto;
    }
}

@media (max-width: 720px) {
    .pos-form-grid,
    .pos-discount-row {
        grid-template-columns: 1fr;
    }

    .pos-payment-row {
        grid-template-columns: 1fr;
    }

    .pos-cart-controls {
        grid-template-columns: 1fr;
    }

    .pos-search-input {
        max-width: none;
    }

    .settings-charge-row {
        grid-template-columns: 1fr;
    }

    .pos-report-filters {
        grid-template-columns: 1fr;
    }

    .order-sales-report-filters .settings-actions {
        flex-wrap: wrap;
    }
}

/* Global responsive spacing baseline */
:root {
    --page-gutter: clamp(14px, 2.1vw, 26px);
    --section-space: clamp(36px, 6vw, 82px);
    --panel-space: clamp(12px, 2vw, 20px);
    --card-space: clamp(14px, 2.2vw, 24px);
}

.container {
    width: min(1200px, calc(100% - (var(--page-gutter) * 2)));
}

.site-main {
    padding-bottom: clamp(20px, 3vw, 38px);
}

.section {
    padding-block: var(--section-space);
}

.page-hero {
    padding: clamp(44px, 7vw, 90px) 0 clamp(26px, 4.8vw, 56px);
}

.section-title {
    margin-bottom: clamp(26px, 3.2vw, 46px);
}

.section-head {
    margin-bottom: clamp(12px, 2vw, 22px);
}

.hero-grid,
.cards-grid,
.categories-grid,
.features-grid,
.stats-grid,
.split-grid,
.checkout-layout,
.settings-grid,
.order-report-chart-grid,
.pos-layout,
.pos-form-grid,
.pos-discount-row,
.pos-payment-row,
.pos-cart-controls {
    gap: clamp(12px, 2vw, 24px);
}

.menu-card-body,
.category-card,
.stat-card,
.checkout-panel,
.settings-section,
.account-summary-item,
.order-card-summary,
.order-card-admin-body,
.addtocart-section {
    padding: var(--card-space);
}

.card-form,
.order-search-form,
.order-bulk-toolbar {
    padding: var(--panel-space);
}

.table-wrap {
    border-radius: var(--radius-md);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-wrap table {
    min-width: 640px;
}

.order-search-form input[type="search"],
.order-bulk-controls select,
:where(
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="url"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="time"],
    input[type="week"],
    select,
    textarea
):not(.quantity-input):not(.g-recaptcha-response) {
    min-height: 42px;
}

.order-bulk-controls select {
    width: auto;
    max-width: 100%;
    flex: 1 1 190px;
}

.order-bulk-reason {
    min-width: min(240px, 100%);
}

.order-bulk-reason input {
    min-width: 0;
    width: 100%;
}

@media (max-width: 1024px) {
    .hero-grid,
    .checkout-layout,
    .split-grid,
    .pos-layout {
        grid-template-columns: 1fr;
    }

    .checkout-aside,
    .admin-editor .card-form {
        position: static;
    }
}

@media (max-width: 768px) {
    :root {
        --page-gutter: 12px;
        --section-space: 34px;
        --panel-space: 12px;
        --card-space: 14px;
    }

    .section-head,
    .order-search-form,
    .order-bulk-toolbar,
    .order-bulk-controls,
    .settings-actions,
    .checkout-guest-actions,
    .cart-helper,
    .pos-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .order-search-form .btn,
    .order-bulk-controls .btn,
    .settings-actions .btn,
    .checkout-guest-actions .btn {
        width: 100%;
    }

    .cards-grid,
    .categories-grid,
    .stats-grid,
    .settings-grid,
    .order-report-chart-grid {
        grid-template-columns: 1fr;
    }

    .table-wrap table {
        min-width: 560px;
    }
}

@media (max-width: 480px) {
    :root {
        --page-gutter: 10px;
        --section-space: 30px;
        --panel-space: 10px;
        --card-space: 12px;
    }

    .brand-text {
        max-width: 140px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .brand-wordmark {
        height: 30px;
        max-width: min(170px, 48vw);
    }

    .table-wrap table {
        min-width: 520px;
    }
}

/* Mobile App-Like UX Layer */
.mobile-app-nav {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1400;
    height: calc(70px + env(safe-area-inset-bottom));
    padding: 7px 10px calc(8px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.99);
    border-top: 1px solid #eceef3;
    box-shadow: 0 -10px 26px rgba(17, 24, 39, 0.08);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
}

.mobile-app-nav-item {
    min-width: 0;
    color: #6c7285;
    border-radius: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.1;
    position: relative;
    transition: var(--transition);
}

.mobile-app-nav-item.active {
    color: var(--lava-red);
    background: transparent;
}

.mobile-app-nav-item-login {
    font-size: 0.74rem;
    letter-spacing: 0.01em;
}

.mobile-app-nav-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mobile-app-nav-icon svg {
    width: 18px;
    height: 18px;
    max-width: 18px;
    max-height: 18px;
    display: block;
    flex: 0 0 18px;
}

.mobile-app-nav-label {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
}

.mobile-app-nav-badge {
    position: absolute;
    top: 2px;
    right: 8px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--lava-red);
    color: var(--white);
    border: 1px solid var(--white);
    font-size: 0.55rem;
    font-weight: 700;
    line-height: 1;
}

.mobile-app-nav-badge[hidden],
.cart-badge[hidden] {
    display: none !important;
}

@media (max-width: 1024px) {
    .public-page {
        background: #f6f7fb;
    }

    .public-page.native-app .header-customer-profile {
        display: none !important;
    }

    .public-page.native-app .header-right {
        margin-left: auto;
        gap: 12px;
    }

    .public-page.native-app .header-right > :not(.header-cart-link):not(.customer-bell-dropdown):not(.nav-toggle):not(.main-navigation) {
        display: none !important;
    }

    .public-page.native-app .header-cart-link,
    .public-page.native-app .admin-bell-link {
        width: 46px;
        height: 46px;
    }

    .public-page.native-app .header-cart-icon,
    .public-page.native-app .admin-bell-icon {
        width: 22px;
        height: 22px;
    }

    .public-page.native-app .header-cart-badge,
    .public-page.native-app .admin-bell-badge {
        min-width: 19px;
        height: 19px;
        font-size: 0.66rem;
        top: -4px;
        right: -4px;
    }

    .public-page.native-app .customer-bell-menu {
        position: fixed;
        top: calc(78px + env(safe-area-inset-top, 0px));
        right: max(12px, env(safe-area-inset-right));
        left: auto;
        margin-top: 0;
        min-width: min(340px, calc(100vw - 24px));
        width: min(340px, calc(100vw - 24px));
        max-height: min(70vh, 460px);
        overflow: auto;
        transform-origin: top right;
        z-index: 2400;
    }

    .public-page .addtocart-modal {
        z-index: 2100;
    }

    .public-page .addtocart-modal-footer {
        padding-bottom: calc(14px + env(safe-area-inset-bottom));
    }

    .customer-live-alert {
        top: 78px;
        right: max(12px, env(safe-area-inset-right));
        width: min(360px, calc(100vw - 24px));
    }

    body.modal-open .mobile-app-nav {
        opacity: 0;
        pointer-events: none;
        transform: translateY(120%);
        transition: transform 0.25s ease, opacity 0.25s ease;
    }

    .public-page.native-app .site-header {
        background: rgba(255, 255, 255, 0.96);
        border-bottom: 1px solid #eceff5;
        box-shadow: 0 8px 18px rgba(24, 32, 56, 0.06);
        backdrop-filter: saturate(140%) blur(10px);
    }

    .public-page.native-app .nav-row {
        min-height: 72px;
    }

    .public-page.native-app .brand {
        gap: var(--brand-gap, 8px);
    }

    .public-page.native-app .brand-logo {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        padding: var(--brand-logo-padding, 2px);
    }

    .public-page.native-app .brand-text {
        font-size: 1rem;
        letter-spacing: 0;
    }

    .public-page.native-app .brand-wordmark {
        height: 36px;
        max-width: min(220px, 50vw);
    }

    .public-page.native-app .site-main {
        padding-bottom: calc(78px + env(safe-area-inset-bottom));
    }

    .public-page .section {
        padding-block: 22px;
    }

    .public-page .page-hero {
        padding: 20px 0 14px;
    }

    .public-page .page-hero .container,
    .public-page .hero .container {
        background: #ffffff;
        border: 1px solid #ebeef4;
        border-radius: 20px;
        padding: 16px;
        box-shadow: 0 10px 22px rgba(17, 24, 39, 0.06);
    }

    .public-page .page-hero h1,
    .public-page .hero h1 {
        font-size: clamp(1.45rem, 6vw, 1.95rem);
        line-height: 1.2;
        margin-bottom: 8px;
    }

    .public-page .section-title h2,
    .public-page h2 {
        font-size: clamp(1.18rem, 5vw, 1.55rem);
        line-height: 1.25;
    }

    .public-page .hero-grid,
    .public-page .checkout-layout,
    .public-page .split-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .public-page .hero-copy,
    .public-page .page-hero p {
        font-size: 0.92rem;
    }

    .public-page .hero-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .public-page .hero-actions .btn {
        width: 100%;
    }

    .public-page:not(.native-app) .filters-bar {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        margin-bottom: 14px;
        padding: 2px 2px 6px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .public-page:not(.native-app) .filters-bar::-webkit-scrollbar {
        display: none;
    }

    .public-page:not(.native-app) .filter-btn {
        white-space: nowrap;
        min-height: 36px;
        padding: 8px 12px;
        border-radius: 12px;
        font-size: 0.82rem;
        gap: 8px;
        flex: 0 0 auto;
        min-width: max-content;
    }

    .public-page .cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        align-items: stretch;
    }

    .public-page .menu-card {
        border-radius: 16px;
        border: 1px solid #eceff5;
        box-shadow: 0 8px 16px rgba(17, 24, 39, 0.05);
        min-width: 0;
        height: 100%;
    }

    .public-page .menu-card-image {
        height: 106px;
    }

    .public-page:not(.native-app).page-menu .menu-card[data-category*="deal" i] .menu-card-image {
        height: 116px;
        object-position: center top;
        padding-top: 10px;
        box-sizing: border-box;
        background: #cf1d2f;
    }

    .public-page .menu-card-body {
        padding: 10px;
    }

    .public-page .menu-card-footer {
        gap: 8px;
        align-items: stretch;
        flex-direction: column;
    }

    .public-page .menu-card-footer .btn {
        width: 100%;
        min-width: 0;
        min-height: 36px;
        padding: 9px 10px;
        font-size: 0.76rem;
        font-weight: 700;
    }

    .public-page .menu-card .category-tag {
        font-size: 0.58rem;
        padding: 3px 7px;
        margin-bottom: 6px;
    }

    .public-page .menu-card h3 {
        font-size: 0.95rem;
        line-height: 1.2;
        margin-bottom: 4px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .public-page .menu-card-description-wrap {
        margin-bottom: 10px;
        gap: 4px;
    }

    .public-page .menu-card .menu-card-description {
        font-size: 0.72rem;
        line-height: 1.35;
        margin: 0;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .public-page .menu-card .menu-card-read-more {
        font-size: 0.66rem;
        line-height: 1.1;
    }

    .public-page .price {
        font-size: 0.96rem;
        line-height: 1.1;
    }

    .public-page .categories-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .public-page .category-card {
        border-radius: 14px;
        padding: 16px 12px;
        min-height: 132px;
    }

    .public-page .category-card-media {
        width: 58px;
        height: 58px;
        border-radius: 18px;
        margin-bottom: 10px;
    }

    .public-page .category-card img {
        width: 34px;
        height: 34px;
    }

    .public-page .category-card h4 {
        font-size: 0.95rem;
        line-height: 1.3;
    }

    .public-page .filter-btn-icon {
        width: 30px;
        height: 30px;
    }

    .public-page .filter-btn-icon img {
        width: 26px;
        height: 26px;
    }

    .public-page .feature-item,
    .public-page .checkout-panel,
    .public-page .card-form,
    .public-page .history-order-card,
    .public-page .account-panel,
    .public-page .checkout-guest-card {
        border: 1px solid #eceff5;
        border-radius: 16px;
        background: #ffffff;
        box-shadow: 0 8px 18px rgba(17, 24, 39, 0.05);
    }

    .public-page .checkout-panel,
    .public-page .card-form,
    .public-page .history-order-card {
        padding: 14px;
    }

    .public-page .form-section,
    .public-page .items-fieldset {
        margin-bottom: 14px;
    }

    .public-page .payment-options {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .public-page .payment-option {
        border-radius: 12px;
        padding: 10px;
    }

    .public-page .payment-option strong {
        font-size: 0.92rem;
    }

    .public-page .payment-option small {
        font-size: 0.78rem;
    }

    .public-page .cart-preview-item {
        border-radius: 10px;
    }

    .public-page .map-embed,
    .public-page .checkout-pin-location-map {
        border-radius: 14px;
        overflow: hidden;
    }

    .public-page .addtocart-modal-dialog {
        width: min(560px, calc(100vw - 12px));
        max-height: calc(100dvh - 10px);
        border-radius: 16px;
    }

    .public-page .item-quantity-selector {
        min-height: 36px;
        padding: 2px 6px;
    }

    .public-page.native-app .site-footer {
        display: none;
    }

    .public-page.native-app .cart-floating-btn {
        display: none;
    }

    .public-page.native-app .mobile-app-nav {
        display: grid;
    }

    .mobile-app-nav .mobile-app-nav-icon svg {
        width: 18px !important;
        height: 18px !important;
        max-width: 18px !important;
        max-height: 18px !important;
    }

    .admin-page {
        background: #f5f7fb;
    }

    .admin-page .section {
        padding-block: 20px;
    }

    .admin-page .page-hero {
        padding: 20px 0 12px;
    }

    .admin-page .page-hero .container {
        background: #ffffff;
        border: 1px solid #e9edf5;
        border-radius: 16px;
        padding: 14px;
    }

    .admin-page .section-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .admin-page .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .admin-page .stat-card {
        border-radius: 14px;
        border: 1px solid #e9edf5;
        box-shadow: 0 8px 18px rgba(17, 24, 39, 0.05);
    }

    .admin-page .order-search-form {
        display: grid;
        grid-template-columns: 1fr auto auto;
        gap: 8px;
    }

    .admin-page .order-search-form .btn {
        width: auto;
    }

    .admin-page .order-bulk-toolbar,
    .admin-page .order-bulk-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .admin-page .order-bulk-controls select,
    .admin-page .order-bulk-controls .btn,
    .admin-page .order-bulk-reason {
        width: 100%;
        max-width: none;
    }

    .admin-page .orders-board {
        gap: 10px;
    }

    .admin-page .order-card-summary,
    .admin-page .order-card-admin-body {
        padding: 12px;
    }

    .admin-page .order-card-summary {
        gap: 12px;
    }

    .admin-page .order-status-row,
    .admin-page .order-status-tools,
    .admin-page .order-admin-grid,
    .admin-page .settings-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .admin-page .order-status-tools .btn,
    .admin-page .order-status-actions .btn {
        width: 100%;
    }

    .admin-page .pos-menu-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: none;
    }

    .admin-page .pos-form-grid,
    .admin-page .pos-discount-row,
    .admin-page .pos-payment-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

@media (max-width: 680px) {
    .why-choose-section .features-grid {
        grid-auto-columns: minmax(240px, 84vw);
    }

    .why-choose-section .feature-item {
        padding: 26px 20px 22px;
        border-radius: 26px;
    }

    .why-choose-section .feature-icon {
        width: 88px;
        height: 88px;
        border-radius: 26px;
    }

    .why-choose-section .feature-icon-svg {
        width: 50px;
        height: 50px;
    }

    .why-choose-section .feature-item h4 {
        font-size: 1.26rem;
    }

    .why-choose-section .feature-item p {
        font-size: 0.96rem;
    }

    .history-orders-grid {
        grid-template-columns: 1fr;
    }

    .order-history-hero {
        padding: 18px 0 10px;
    }

    .order-history-hero .category-tag {
        display: none;
    }

    .order-history-hero h1 {
        font-size: 1.7rem;
    }

    .order-history-hero p {
        font-size: 0.94rem;
    }

    .public-page .main-navigation {
        width: min(320px, calc(100vw - 16px));
        padding: 12px;
        border-radius: 14px;
    }

    .public-page .hero-actions {
        grid-template-columns: 1fr;
    }

    .public-page .checkout-guest-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .public-page .checkout-guest-actions .btn,
    .public-page .checkout-guest-actions .inline-social-form,
    .public-page .checkout-guest-actions .inline-social-form .btn {
        width: 100%;
    }

    .public-page .categories-grid {
        grid-template-columns: 1fr 1fr;
    }

    .public-page .footer-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .public-page .menu-card-image {
        height: 96px;
    }

    .public-page:not(.native-app).page-menu .menu-card[data-category*="deal" i] .menu-card-image {
        height: 108px;
        padding-top: 8px;
    }

    .public-page .btn-sm {
        width: auto;
    }

    .admin-page .stats-grid,
    .admin-page .pos-menu-grid {
        grid-template-columns: 1fr;
    }

    .admin-page .order-search-form {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .finance-chart-grid,
    .finance-breakdown-grid {
        grid-template-columns: 1fr;
    }

    .finance-chart-grid .order-report-chart-card--wide {
        grid-column: auto;
    }

    .finance-expense-form {
        position: static;
    }

    .finance-print-grid {
        grid-template-columns: 1fr;
    }

    .finance-meta-grid--vendor {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .history-order-card {
        gap: 12px;
        padding: 12px;
        border-radius: 26px;
    }

    .history-order-app-summary {
        display: grid;
        grid-template-columns: 92px minmax(0, 1fr);
        gap: 14px;
        align-items: start;
    }

    .history-order-head,
    .history-order-progress,
    .history-order-items,
    .history-review-panel {
        display: none;
    }

    .history-order-footer {
        display: grid;
        gap: 12px;
    }

    .history-order-card:not(.has-reorder):not(.has-review) .history-order-footer {
        display: none;
    }

    .history-order-footer > strong,
    .history-order-footer .btn-outline {
        display: none;
    }

    .history-order-footer-actions {
        width: 100%;
        grid-template-columns: 1fr;
    }

    .history-order-footer-actions .btn-primary {
        width: 100%;
        min-height: 54px;
        border-radius: 16px;
        font-size: 0.98rem;
        font-weight: 800;
    }

    .receipt-modal {
        align-items: flex-end;
    }

    .receipt-modal-dialog {
        width: 100vw;
        height: 100dvh;
        border-radius: 0;
        border: 0;
        box-shadow: none;
    }

    .receipt-modal-header {
        padding: 12px 14px;
        background: #ffffff;
        border-bottom: 1px solid #ece6dc;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .receipt-modal-kicker {
        display: none;
    }

    .receipt-modal-copy h2 {
        font-size: 1rem;
    }

    .receipt-modal-actions {
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
    }

    .receipt-modal-actions .btn {
        display: none;
    }

    .receipt-modal-close {
        width: 42px;
        height: 42px;
        border-radius: 14px;
        font-size: 0;
    }

    .receipt-modal-close::before {
        content: '\2190';
        font-size: 1.32rem;
    }

    .receipt-modal-frame-wrap {
        background: #f4f5f7;
    }

    .order-receipt-page {
        background: #f4f5f7;
    }

    .order-receipt-page .site-main,
    .order-receipt-page .section {
        padding: 0;
    }

    .order-receipt-page .container {
        width: min(100%, 760px);
        padding: 0 14px 22px;
    }

    .order-details-mobile-view {
        gap: 14px;
        padding: 18px 0 calc(84px + env(safe-area-inset-bottom, 0px));
    }

    .order-details-mobile-card,
    .order-details-mobile-route-card {
        border-radius: 24px;
    }

    .review-premium-top,
    .review-premium-author,
    .history-order-head,
    .history-order-footer,
    .history-review-head,
    .history-review-status,
    .history-review-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .history-review-inline,
    .review-modal-rating-row,
    .review-modal-image-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .review-premium-author,
    .history-review-copy,
    .history-review-avatar-wrap,
    .history-order-head > div {
        width: 100%;
    }

    .review-premium-top .review-stars,
    .history-review-status .review-stars {
        align-self: flex-start;
    }

    .history-review-inline-copy,
    .review-modal-rating-summary {
        width: 100%;
        justify-items: start;
        text-align: left;
    }

    .reviews-premium-slider-toolbar {
        align-items: stretch;
    }

    .reviews-premium-slider-controls {
        justify-content: flex-start;
    }

    .history-review-inline-rating {
        width: 100%;
        justify-content: space-between;
    }

    .history-order-items li {
        flex-wrap: wrap;
    }

    .history-order-footer .btn,
    .history-review-actions .btn {
        width: 100%;
    }

    .history-review-score-card {
        width: 100%;
    }

    .history-review-form {
        padding: 14px;
        border-radius: 16px;
    }

    .history-review-grid {
        grid-template-columns: 1fr;
    }

    .review-rating-chip {
        min-width: 54px;
        padding: 8px 10px;
    }

    .review-modal-dialog {
        width: calc(100vw - 12px);
        max-height: calc(100dvh - 12px);
        border-radius: 16px;
    }

    .order-success-modal-actions .btn {
        width: 100%;
    }

    .review-modal-body {
        padding: 16px;
    }

    .finance-filter-form .settings-actions {
        flex-direction: column;
        align-items: stretch;
        flex-wrap: wrap;
    }

    .admin-account-grid {
        grid-template-columns: 1fr;
    }

    .mfa-secret-layout {
        grid-template-columns: 1fr;
    }

    .recovery-codes-head,
    .admin-compact-summary {
        flex-direction: column;
        align-items: flex-start;
    }

    .recovery-codes-actions,
    .recovery-codes-actions .btn,
    .compact-inline-details__form .btn {
        width: 100%;
    }

    .admin-compact-summary {
        padding: 14px 48px 14px 14px;
    }

    .admin-compact-summary::after {
        top: 14px;
        right: 14px;
    }

    .finance-filter-form .settings-actions .btn,
    .finance-action-stack,
    .finance-action-stack .btn,
    .finance-action-stack form {
        width: 100%;
        min-width: 0;
    }

    .finance-mini-summary div {
        flex-direction: column;
        align-items: flex-start;
    }

    .finance-existing-proof {
        align-items: flex-start;
    }

    .finance-card-grid,
    .finance-card-grid--watchlist,
    .finance-card-grid--ledger,
    .finance-card-grid--orders,
    .finance-card-grid--compact {
        grid-template-columns: 1fr;
    }

    .finance-data-card-head,
    .finance-card-foot {
        flex-direction: column;
        align-items: flex-start;
    }

    .finance-data-card-amount {
        text-align: left;
    }

    .finance-meta-grid,
    .finance-meta-grid--vendor,
    .finance-meta-grid--tight {
        grid-template-columns: 1fr;
    }

    .finance-card-actions {
        width: 100%;
        justify-content: stretch;
    }

    .finance-card-actions .btn,
    .finance-card-actions form,
    .finance-card-actions form .btn {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 560px) {
    .history-orders-grid,
    .reviews-premium-grid {
        grid-template-columns: 1fr;
    }

    .review-premium-card,
    .review-premium-empty {
        padding: 16px;
        border-radius: 18px;
    }

    .reviews-premium-slider {
        gap: 14px;
    }

    .reviews-premium-slider-toolbar {
        gap: 10px;
    }

    .reviews-premium-arrow {
        width: 38px;
        height: 38px;
    }

    .review-avatar {
        width: 52px;
        height: 52px;
        flex-basis: 52px;
    }

    .review-avatar--placeholder::before {
        top: 10px;
        width: 15px;
        height: 15px;
    }

    .review-avatar--placeholder::after {
        bottom: 9px;
        width: 28px;
        height: 15px;
    }

    .review-stars {
        padding: 5px 9px;
        font-size: 0.8rem;
    }

    .review-premium-title {
        font-size: 1rem;
    }

    .review-premium-body {
        font-size: 0.9rem;
        line-height: 1.62;
    }

    .finance-proof-thumb {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }

    .finance-empty-card,
    .finance-data-card {
        padding: 15px;
        border-radius: 18px;
    }

    .finance-data-card-note,
    .finance-meta-item {
        padding: 10px 11px;
    }
}

@media print {
    .site-header,
    .site-footer,
    .mobile-app-nav,
    .cart-floating-btn,
    .cart-popup,
    .addtocart-modal {
        display: none !important;
    }

    body {
        background: #ffffff !important;
    }

    .section {
        padding: 0 !important;
    }

    .container {
        max-width: none !important;
        width: auto !important;
        padding: 0 !important;
    }

    .order-receipt-page .order-details-mobile-view {
        display: none !important;
    }

    .order-receipt-page .order-receipt-print-only {
        position: static !important;
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
        clip: auto !important;
        white-space: normal !important;
        border: 0 !important;
        display: block !important;
    }

    .finance-print-section {
        padding: 0 !important;
    }

    .finance-print-sheet {
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .finance-print-sheet .table-wrap {
        overflow: visible !important;
    }

    .finance-print-sheet table {
        min-width: 0 !important;
    }
}

/* Mobile App Shell - compact bottom nav and footer-free core screens */
@media (max-width: 1024px) {
    .public-page.native-app .site-footer {
        display: none !important;
    }

    .public-page.native-app .cart-floating-btn {
        display: none !important;
    }

    .public-page.native-app .site-main {
        padding-bottom: calc(82px + env(safe-area-inset-bottom)) !important;
    }

    .public-page.native-app .mobile-app-nav {
        display: grid !important;
        position: fixed !important;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1500;
        height: calc(76px + env(safe-area-inset-bottom));
        padding: 8px 12px calc(10px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, 0.98);
        border-top: 1px solid #e9ecf2;
        box-shadow: 0 -8px 18px rgba(17, 24, 39, 0.08);
    }

    .mobile-app-nav-item {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        min-height: 58px;
        padding: 4px 0;
    }

    .mobile-app-nav-icon {
        width: 24px !important;
        height: 24px !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-app-nav-icon svg,
    .mobile-app-nav .mobile-app-nav-icon svg {
        width: 24px !important;
        height: 24px !important;
        max-width: 24px !important;
        max-height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
        flex: 0 0 24px !important;
        display: block !important;
    }

    .mobile-app-nav-label {
        font-size: 0.78rem !important;
        line-height: 1.1;
    }

    .mobile-app-nav-item-login .mobile-app-nav-label {
        font-size: 0.8rem !important;
        font-weight: 700;
    }

    .mobile-app-nav-badge {
        min-width: 18px;
        height: 18px;
        font-size: 0.58rem;
        top: 3px;
        right: 10px;
    }
}

@media (max-width: 680px) {
    .public-page .checkout-guest-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .public-page .checkout-guest-actions .btn,
    .public-page .checkout-guest-actions .inline-social-form,
    .public-page .checkout-guest-actions .inline-social-form .btn {
        width: 100% !important;
    }
}

@media (max-width: 980px) {
    .account-section-stack,
    .account-address-layout,
    .saved-address-option-list {
        grid-template-columns: 1fr;
    }

    .account-app-quick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .account-page-hero {
        padding-top: 20px;
        padding-bottom: 2px;
    }

    .account-page-hero .container.narrow {
        width: min(100%, 100%);
    }

    .account-page-hero .eyebrow {
        margin-bottom: 8px;
    }

    .account-page-hero h1 {
        font-size: 1.9rem;
        line-height: 1.08;
    }

    .account-page-hero p:last-child {
        font-size: 0.94rem;
    }

    .account-app-hero-card {
        gap: 14px;
    }

    .account-app-hero-top {
        align-items: center;
    }

    .account-app-settings-link {
        width: 42px;
        height: 42px;
        border-radius: 13px;
    }

    .account-app-logout-btn {
        min-height: 42px;
        padding: 8px 12px;
        border-radius: 13px;
        font-size: 0.82rem;
    }

    .account-app-quick-card {
        padding: 14px 12px;
        border-radius: 18px;
    }

    .account-address-card-head,
    .saved-address-option-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .checkout-saved-addresses .section-head {
        flex-direction: column;
        align-items: stretch;
    }

    .account-address-actions {
        grid-template-columns: 1fr;
    }

    .account-address-actions .btn,
    .account-address-actions form,
    .account-address-actions form .btn,
    .checkout-saved-addresses .section-head .btn {
        width: 100%;
    }
}

@media (max-width: 560px) {
    .account-page-hero {
        display: none;
    }

    .account-app-shell {
        gap: 12px;
    }

    .account-app-hero-card {
        padding: 18px 16px;
        border-radius: 26px;
    }

    .account-app-hero-copy h2 {
        font-size: 1.9rem;
    }

    .account-app-hero-copy p {
        font-size: 0.88rem;
    }

    .account-app-quick-grid {
        gap: 10px;
    }

    .account-app-quick-card {
        padding: 13px 11px;
    }

    .account-app-quick-card strong {
        font-size: 0.94rem;
    }

    .account-app-quick-card small {
        font-size: 0.76rem;
    }

    .checkout-saved-addresses,
    .account-address-card,
    .account-empty-state {
        padding: 12px;
    }

    .account-checkbox-row {
        align-items: flex-start;
    }
}

@media (max-width: 900px) {
    .admin-account-grid {
        grid-template-columns: 1fr;
    }

    .mfa-secret-layout {
        grid-template-columns: 1fr;
    }

    .admin-manage-selector-action {
        align-items: stretch;
    }

    .admin-manage-selector-action .btn {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .admin-role-summary {
        padding: 6px 8px;
    }

    .admin-role-name {
        display: none;
    }

    .admin-users-actions {
        width: 100%;
    }

    .admin-users-actions .btn {
        width: 100%;
    }

    .mfa-status-row {
        align-items: flex-start;
    }

    .mfa-qr-canvas {
        width: min(100%, 192px);
        margin: 0 auto;
    }

    .recovery-codes-actions {
        justify-content: stretch;
    }

    .recovery-codes-actions .btn {
        width: 100%;
    }
}

.native-app-launch-loader,
.native-app-entry-screen {
    position: fixed;
    inset: 0;
    z-index: 6000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}

.native-app-launch-loader[hidden],
.native-app-entry-screen[hidden] {
    display: none !important;
}

.native-app-launch-loader.is-visible,
.native-app-entry-screen.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.native-app-launch-loader.is-hiding,
.native-app-entry-screen.is-hiding {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.native-app-launch-loader {
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: #1b2340;
}

.native-app-launch-spinner {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 4px solid #f0f2f9;
    border-top-color: #f15a24;
    animation: appLoaderSpin 0.9s linear infinite;
}

.native-app-launch-loader p {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.native-app-entry-screen {
    z-index: 6002;
    background: #f7f8fb;
    display: flex;
    flex-direction: column;
    padding: calc(20px + env(safe-area-inset-top)) 18px calc(28px + env(safe-area-inset-bottom));
}

.native-app-entry-support {
    margin-left: auto;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    border: 1px solid #ebedf4;
    background: #fff;
    color: #131b36;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px rgba(18, 24, 47, 0.08);
}

.native-app-entry-support svg {
    width: 24px;
    height: 24px;
}

.native-app-entry-card {
    flex: 1;
    max-width: 560px;
    width: 100%;
    margin: 10px auto 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.native-app-entry-logo {
    width: min(170px, 42vw);
    height: auto;
    margin: 0 auto 20px;
    object-fit: contain;
}

.native-app-entry-card h2 {
    margin: 0;
    font-size: clamp(2.1rem, 7vw, 2.8rem);
    line-height: 1.08;
    color: #111730;
    letter-spacing: -0.02em;
}

.native-app-entry-card p {
    margin: 12px auto 0;
    max-width: 28ch;
    color: #5e667c;
    font-size: clamp(0.98rem, 3.8vw, 1.2rem);
    line-height: 1.45;
}

.native-app-entry-actions {
    margin-top: 36px;
    display: grid;
    gap: 14px;
}

.native-app-entry-btn {
    width: 100%;
    min-height: 62px;
    border-radius: 16px;
    border: 2px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-weight: 800;
    font-size: clamp(1.15rem, 4.4vw, 1.5rem);
    text-decoration: none;
}

.native-app-entry-btn-phone {
    background: linear-gradient(180deg, #faeb4a 0%, #f1d915 100%);
    border-color: #f0dc3a;
    color: #12182f;
    box-shadow: 0 12px 22px rgba(235, 200, 35, 0.28);
}

.native-app-entry-btn-guest {
    background: #fff;
    border-color: #e95f2c;
    color: #e95f2c;
    cursor: pointer;
}

body.app-launch-active {
    overflow: hidden !important;
    touch-action: none;
}

@keyframes appLoaderSpin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 1024px) {
    .public-page.native-app .menu-filters-shell {
        position: sticky;
        top: calc(74px + env(safe-area-inset-top, 0px));
        z-index: 1120;
        margin: 0 calc(-1 * var(--page-gutter, 12px)) 10px;
        padding: 8px var(--page-gutter, 12px) 10px;
        background: linear-gradient(180deg, rgba(246, 247, 251, 0.98) 0%, rgba(246, 247, 251, 0.92) 65%, rgba(246, 247, 251, 0.6) 100%);
        backdrop-filter: blur(8px);
    }

    .public-page.native-app .menu-filters-shell .filters-bar {
        position: relative;
        gap: 10px;
        margin-bottom: 0;
        padding: 4px;
        border-radius: 999px;
        border: 1px solid #eceff5;
        background: #ffffff;
        box-shadow: 0 8px 16px rgba(17, 24, 39, 0.05);
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        scrollbar-width: none;
        scroll-behavior: smooth;
    }

    .public-page.native-app .menu-filters-shell .filters-bar::-webkit-scrollbar {
        display: none;
    }

    .public-page.native-app .menu-filters-shell .filter-btn {
        position: relative;
        z-index: 2;
        flex: 0 0 auto;
        min-height: 38px;
        padding: 8px 12px;
        border: none;
        background: transparent;
        color: #6c7285;
        transition: color 0.24s ease, transform 0.24s ease;
    }

    .public-page.native-app .menu-filters-shell .filter-btn.active {
        color: #4a220f;
        transform: translateY(-1px);
    }

    .public-page.native-app .menu-filters-shell .filter-btn .filter-btn-icon {
        background: transparent;
        transition: background 0.24s ease;
    }

    .public-page.native-app .menu-filters-shell .filter-btn.active .filter-btn-icon {
        background: transparent;
    }

    .public-page.native-app .menu-filters-shell .menu-filter-indicator {
        position: absolute;
        top: 4px;
        left: 0;
        height: calc(100% - 8px);
        width: 0;
        z-index: 1;
        border-radius: 999px;
        background: linear-gradient(135deg, #ffd55c 0%, #f7b13d 52%, #ef9444 100%);
        box-shadow: 0 8px 16px rgba(242, 140, 40, 0.22);
        transform: translate3d(0, 0, 0);
        transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), width 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
        opacity: 0;
        pointer-events: none;
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.native-app-page-meta {
    display: none;
}

.app-page-search-btn {
    display: none;
}

.app-page-hero-location,
.checkout-voucher-link {
    display: none;
}

@keyframes appRiseIn {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes appBarIn {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1024px) {
    .public-page.native-app {
        --app-bg: #f3f3f5;
        --app-panel: #ffffff;
        --app-muted: #8a8f9e;
        --app-ink: #15182f;
        --app-accent: #f15a24;
        --app-yellow: #f7e62a;
        background: var(--app-bg) !important;
        color: var(--app-ink);
    }

    .public-page.native-app .site-main {
        padding-bottom: calc(154px + env(safe-area-inset-bottom)) !important;
    }

    .public-page.native-app .site-header {
        border-bottom: 1px solid #e7e8ee;
        box-shadow: 0 4px 16px rgba(16, 20, 38, 0.05);
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: none;
    }

    .public-page.native-app .nav-row {
        min-height: 74px;
        gap: 10px;
        position: relative;
    }

    .public-page.native-app .brand {
        display: none;
    }

    .public-page.native-app .native-app-page-meta {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1;
        min-width: 0;
        gap: 2px;
        padding-left: 66px;
        padding-right: 8px;
    }

    .public-page.native-app .native-app-page-title {
        margin: 0;
        font-size: 1.92rem;
        line-height: 1.05;
        color: #12162f;
        letter-spacing: -0.02em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .public-page.native-app .native-app-page-location {
        margin: 0;
        font-size: 0.8rem;
        line-height: 1.25;
        color: #8a90a1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .public-page.native-app .header-right {
        gap: 10px;
        margin-left: auto;
        position: static;
    }

    .public-page.native-app .nav-toggle {
        width: 52px;
        height: 52px;
        border-radius: 999px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        background: var(--app-accent);
        box-shadow: 0 10px 20px rgba(241, 90, 36, 0.28);
        border: 0;
        order: 0;
        flex-shrink: 0;
        z-index: 1305;
        position: fixed;
        left: max(8px, env(safe-area-inset-left));
        top: calc(env(safe-area-inset-top, 0px) + 10px);
        transform: none;
        pointer-events: auto;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .public-page.native-app .nav-toggle span {
        width: 18px;
        height: 2.2px;
        border-radius: 99px;
        background: #fff;
    }

    .public-page.native-app .nav-toggle.is-back {
        width: 44px;
        height: 44px;
        background: transparent;
        border: 0;
        box-shadow: none;
        left: max(8px, env(safe-area-inset-left));
        top: calc(env(safe-area-inset-top, 0px) + 14px);
    }

    .public-page.native-app .nav-toggle.is-back span {
        display: none;
    }

    .public-page.native-app .nav-toggle.is-back::before {
        content: "\2190";
        color: #12162f;
        font-size: 2rem;
        font-weight: 700;
        line-height: 1;
    }

    .public-page.native-app .main-navigation {
        display: block !important;
        position: fixed;
        top: 0;
        left: calc(-1 * min(86vw, 320px));
        width: min(86vw, 320px);
        height: 100dvh;
        margin: 0;
        padding: 86px 18px 24px;
        background: #fff;
        border-right: 1px solid #eceef5;
        box-shadow: 0 22px 38px rgba(14, 18, 32, 0.14);
        z-index: 2200;
        transition: left 0.28s ease;
        pointer-events: auto;
    }

    .public-page.native-app .main-navigation.is-open {
        left: 0;
    }

    .public-page.native-app .main-navigation ul {
        display: grid;
        gap: 8px;
    }

    .public-page.native-app .main-navigation a,
    .public-page.native-app .main-navigation .nav-logout-form button {
        width: 100%;
        padding: 11px 12px;
        border-radius: 12px;
        font-size: 0.92rem;
        font-weight: 700;
    }

    .public-page.native-app .main-navigation a.active,
    .public-page.native-app .main-navigation .nav-logout-form button.active {
        background: #fff1eb;
        color: #a23512;
    }

    .public-page.native-app .header-customer-profile {
        display: none !important;
    }

    .public-page.native-app .header-cart-link,
    .public-page.native-app .admin-bell-link {
        width: 52px;
        height: 52px;
        border-radius: 999px;
        border: 1px solid #e8eaf1;
        box-shadow: 0 4px 12px rgba(17, 23, 45, 0.08);
        background: #fff;
    }

    .public-page.native-app .header-cart-icon,
    .public-page.native-app .admin-bell-icon {
        width: 23px;
        height: 23px;
    }

    .public-page.native-app .header-cart-badge,
    .public-page.native-app .admin-bell-badge {
        min-width: 20px;
        height: 20px;
        font-size: 0.64rem;
        top: -2px;
        right: -2px;
    }

    .public-page.native-app .section {
        padding-block: 12px;
    }

    .public-page.native-app .container {
        width: min(100%, 720px);
        padding-left: 14px;
        padding-right: 14px;
    }

    .public-page.native-app .page-hero {
        padding: 10px 0 8px;
    }

    .public-page.native-app .page-hero .container {
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    .public-page.native-app .page-hero .category-tag {
        display: none;
    }

    .public-page.native-app .page-hero h1 {
        margin: 0;
        font-size: 1.74rem;
        color: #131730;
    }

    .public-page.native-app .app-page-hero-location {
        display: block;
        margin: 4px 0 0;
        font-size: 0.92rem;
        color: #8a8f9d;
        font-weight: 500;
    }

    .public-page.native-app .app-page-hero-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .public-page.native-app .app-page-search-btn {
        width: 52px;
        height: 52px;
        border-radius: 999px;
        border: 1px solid #e8eaf0;
        background: #fff;
        color: #0f1430;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .public-page.native-app .app-page-search-btn svg {
        width: 24px;
        height: 24px;
    }

    .public-page.native-app.page-index .hero {
        display: none;
    }

    .public-page.native-app.page-index .section-title {
        text-align: left;
        margin-bottom: 14px;
    }

    .public-page.native-app.page-index .section-title h2 {
        font-size: 2rem;
        color: #11162f;
    }

    .public-page.native-app.page-index .section-title p {
        color: #7f8595;
        font-size: 0.9rem;
    }

    .public-page.native-app.page-index .category-card {
        min-height: 156px;
        border-radius: 15px;
        border: 1px solid #e8eaf1;
        background: #fff;
        box-shadow: 0 6px 16px rgba(18, 24, 47, 0.08);
        animation: appRiseIn 0.34s ease both;
    }

    .public-page.native-app.page-index .category-card-media {
        width: 90px;
        height: 90px;
        border-radius: 14px;
        margin-bottom: 14px;
    }

    .public-page.native-app.page-index .category-card img {
        width: 82px;
        height: 82px;
        object-fit: contain;
    }

    .public-page.native-app.page-index .section.section-alt,
    .public-page.native-app.page-index .why-choose-section {
        display: none;
    }

    .public-page.native-app.page-menu .menu-filters-shell {
        margin: 0 0 6px;
        padding: 0;
        position: sticky;
        top: calc(74px + env(safe-area-inset-top));
        z-index: 1110;
        background: var(--app-bg);
    }

    .public-page.native-app.page-menu .menu-filters-shell .filters-bar {
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        gap: 22px;
        overflow-x: auto;
    }

    .public-page.native-app.page-menu .menu-filters-shell .filter-btn {
        padding: 0 0 10px;
        min-height: auto;
        border-radius: 0;
        color: #11162f;
        font-size: 0.96rem;
        font-weight: 700;
        line-height: 1.2;
    }

    .public-page.native-app.page-menu .menu-filters-shell .filter-btn .filter-btn-icon {
        display: none;
    }

    .public-page.native-app.page-menu .menu-filters-shell .filter-btn.active {
        color: #f15a24;
        transform: none;
    }

    .public-page.native-app.page-menu .menu-filters-shell .menu-filter-indicator {
        top: auto;
        bottom: 0;
        height: 4px;
        border-radius: 999px;
        background: #f15a24;
        box-shadow: none;
    }

    .public-page.native-app.page-menu .cards-grid {
        grid-template-columns: 1fr !important;
        gap: 0;
        background: #fff;
        border-radius: 16px;
        overflow: hidden;
        border: 1px solid #e7e9ef;
    }

    .public-page.native-app.page-menu .menu-card {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        border-bottom: 1px solid #eff1f6;
        padding: 12px;
        min-height: 116px;
        animation: appRiseIn 0.32s ease both;
    }

    .public-page.native-app.page-menu .menu-card:last-child {
        border-bottom: 0;
    }

    .public-page.native-app.page-menu .menu-card-image {
        width: 102px;
        height: 84px;
        flex: 0 0 102px;
        object-fit: contain;
        border-radius: 12px;
        background: #fbfbfd;
    }

    .public-page.native-app.page-menu .menu-card-body {
        padding: 0;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 4px 10px;
        width: 100%;
    }

    .public-page.native-app.page-menu .menu-card .category-tag {
        grid-column: 1 / -1;
        margin: 0;
        padding: 0;
        background: transparent;
        color: #f15a24;
        font-size: 0.92rem;
        font-weight: 800;
    }

    .public-page.native-app.page-menu .menu-card h3 {
        margin: 0;
        font-size: 1.02rem;
        color: #12162f;
        line-height: 1.25;
        -webkit-line-clamp: 1;
    }

    .public-page.native-app.page-menu .menu-card-description-wrap {
        grid-column: 1 / -1;
        margin: 0;
        gap: 4px;
    }

    .public-page.native-app.page-menu .menu-card .menu-card-description {
        margin: 0;
        color: #7a8190;
        font-size: 0.88rem;
        line-height: 1.32;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .public-page.native-app.page-menu .menu-card .menu-card-read-more {
        border: 0;
        background: transparent;
        padding: 0;
        margin: 0;
        font-size: 0.76rem;
        line-height: 1.15;
        font-weight: 700;
        color: #f15a24;
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    .public-page.native-app.page-menu .menu-card-footer {
        display: contents;
    }

    .public-page.native-app.page-menu .menu-card-footer .price {
        grid-column: 1 / 2;
        font-size: 1.1rem;
        color: #f15a24;
        font-weight: 800;
        align-self: end;
    }

    .public-page.native-app.page-menu .menu-card-footer .btn {
        grid-column: 2 / 3;
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        border-radius: 999px;
        border: 1px solid #dfe3ea;
        background: #fff;
        color: transparent !important;
        padding: 0 !important;
        font-size: 0 !important;
        box-shadow: 0 5px 10px rgba(17, 24, 39, 0.08);
        position: relative;
        align-self: center;
    }

    .public-page.native-app.page-menu .menu-card-footer .btn::before {
        content: "+";
        font-size: 1.8rem;
        line-height: 1;
        color: #141a31;
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .public-page.native-app.page-cart .checkout-layout {
        grid-template-columns: 1fr;
    }

    .public-page.native-app.page-cart .checkout-aside {
        display: none;
    }

    .public-page.native-app .card-form.checkout-form,
    .public-page.native-app .checkout-panel,
    .public-page.native-app .checkout-voucher-link {
        border: 1px solid #e7e9ef;
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 6px 16px rgba(18, 24, 47, 0.08);
    }

    .public-page.native-app.page-cart .card-form.checkout-form {
        padding: 12px;
    }

    .public-page.native-app.page-cart .items-fieldset.payment-fieldset {
        border: 0;
        background: linear-gradient(180deg, #f4e844 0%, #f5d90d 100%);
        padding: 12px;
        border-radius: 14px;
    }

    .public-page.native-app.page-cart .payment-options {
        gap: 8px;
    }

    .public-page.native-app.page-cart .payment-option {
        border: 1px solid #dedfe6;
        background: #fff;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .public-page.native-app.page-cart .payment-option strong {
        color: #12162f;
    }

    .public-page.native-app .checkout-voucher-link {
        display: flex;
        margin: 10px 0 14px;
        padding: 14px;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        color: #10142c;
    }

    .public-page.native-app .checkout-voucher-link strong {
        display: block;
        font-size: 1.42rem;
        margin-bottom: 3px;
    }

    .public-page.native-app .checkout-voucher-link small {
        color: #878d9a;
        font-size: 0.78rem;
    }

    .public-page.native-app.page-cart .btn.btn-primary[type="submit"] {
        border-radius: 15px;
        min-height: 58px;
        background: linear-gradient(180deg, #f9ea49 0%, #f1d915 100%);
        color: #141a32;
        border-color: #f1da25;
        font-size: 1.18rem;
        letter-spacing: 0.01em;
    }

    .public-page.native-app .cart-preview-box {
        border: 1px solid #ebedf3;
        border-radius: 14px;
        background: #fff;
    }

    .public-page.native-app .cart-preview-item {
        border-radius: 12px;
        background: #fff;
        border: 1px solid #eceef4;
    }

    .public-page.native-app .checkout-pin-map-popup-dialog {
        width: calc(100vw - 16px);
        max-height: calc(100dvh - 16px);
        border-radius: 18px;
        border: 1px solid #e5e9f0;
        box-shadow: 0 20px 34px rgba(15, 20, 37, 0.26);
    }

    .public-page.native-app .checkout-pin-map-popup-header {
        border-bottom: 1px solid #eceff5;
    }

    .public-page.native-app .checkout-pin-map-popup-actions .btn {
        min-height: 50px;
        border-radius: 12px;
    }

    .public-page.native-app .checkout-pin-map-popup-actions .btn-primary {
        background: linear-gradient(180deg, #f9ea49 0%, #f1d915 100%);
        border-color: #f1da25;
        color: #141a32;
    }

    .public-page.native-app .mobile-app-nav {
        height: calc(80px + env(safe-area-inset-bottom));
        padding: 8px 8px calc(12px + env(safe-area-inset-bottom));
        border-top: 1px solid #e8eaf2;
        background: rgba(255, 255, 255, 0.99);
        box-shadow: 0 -8px 20px rgba(16, 22, 43, 0.08);
        grid-template-columns: repeat(4, minmax(0, 1fr));
        display: grid !important;
    }

    .public-page.native-app .mobile-app-nav-item {
        min-height: 56px;
        border-radius: 12px;
        color: #252a42;
        font-size: 0.74rem;
        gap: 5px;
    }

    .public-page.native-app .mobile-app-nav-item.active {
        color: var(--app-accent);
    }

    .public-page.native-app .mobile-app-nav-icon {
        width: 22px !important;
        height: 22px !important;
    }

    .public-page.native-app .mobile-app-nav-icon svg {
        width: 22px !important;
        height: 22px !important;
    }

    .app-cart-summary-bar {
        display: none;
    }

    .public-page.native-app .app-cart-summary-bar {
        display: flex;
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(88px + env(safe-area-inset-bottom));
        z-index: 1490;
        border-radius: 16px;
        padding: 12px 14px;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        background: linear-gradient(180deg, #f7e939 0%, #f1d915 100%);
        color: #0f1531;
        border: 1px solid #ebd83b;
        box-shadow: 0 16px 24px rgba(222, 189, 24, 0.3);
        animation: appBarIn 0.24s ease;
    }

    .public-page.native-app .app-cart-summary-left {
        min-width: 0;
        display: grid;
        gap: 1px;
    }

    .public-page.native-app .app-cart-summary-count {
        font-size: 0.76rem;
        font-weight: 700;
    }

    .public-page.native-app .app-cart-summary-total {
        font-size: 1.18rem;
        line-height: 1.15;
        letter-spacing: -0.01em;
    }

    .public-page.native-app .app-cart-summary-left small {
        font-size: 0.65rem;
        color: #48506d;
        font-weight: 600;
    }

    .public-page.native-app .app-cart-summary-cta {
        font-size: 1.22rem;
        font-weight: 800;
        white-space: nowrap;
    }

    .public-page.native-app.page-cart .app-cart-summary-bar {
        bottom: calc(92px + env(safe-area-inset-bottom));
    }

    .public-page.native-app .app-voucher-shell,
    .public-page.native-app .app-search-shell {
        display: grid;
        gap: 14px;
    }

    .public-page.native-app .app-voucher-entry,
    .public-page.native-app .app-search-input-wrap,
    .public-page.native-app .app-search-explore-link,
    .public-page.native-app .app-search-empty,
    .public-page.native-app .app-voucher-empty {
        border-radius: 16px;
        border: 1px solid #e7e9ef;
        background: #fff;
        box-shadow: 0 6px 16px rgba(18, 24, 47, 0.08);
        animation: appRiseIn 0.34s ease both;
    }

    .public-page.native-app .app-voucher-entry,
    .public-page.native-app .app-search-input-wrap {
        padding: 14px;
    }

    .public-page.native-app .app-voucher-form {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 8px;
        margin-top: 10px;
    }

    .public-page.native-app .app-voucher-form input,
    .public-page.native-app .app-search-input-wrap input {
        min-height: 48px;
        border-radius: 10px;
        border: 1px solid #dfe3eb;
        padding: 10px 12px;
    }

    .public-page.native-app .app-voucher-empty,
    .public-page.native-app .app-search-empty {
        text-align: center;
        padding: 24px 16px;
    }

    .public-page.native-app .app-voucher-empty img,
    .public-page.native-app .app-search-empty img {
        width: min(180px, 46vw);
        margin: 0 auto 10px;
    }

    .public-page.native-app .app-popular-searches h2 {
        font-size: 1.7rem;
        color: #131730;
        margin-bottom: 10px;
    }

    .public-page.native-app .app-popular-search-list {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .public-page.native-app .app-popular-search-list::-webkit-scrollbar {
        display: none;
    }

    .public-page.native-app .app-search-chip {
        flex: 0 0 auto;
        border: 1px solid #dfe3ea;
        border-radius: 10px;
        background: #fff;
        color: #212740;
        min-height: 42px;
        padding: 8px 14px;
        font-size: 0.92rem;
        font-weight: 700;
        cursor: pointer;
    }

    .public-page.native-app .app-search-explore-link {
        padding: 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #11162f;
    }

    .public-page.native-app .app-search-explore-link strong {
        display: block;
        font-size: 1.4rem;
        margin-bottom: 4px;
    }

    .public-page.native-app .app-search-explore-link small {
        color: #81889a;
        font-size: 0.8rem;
    }

    .public-page.native-app .app-search-results {
        display: grid;
        gap: 10px;
    }

    .public-page.native-app .app-search-result-item {
        display: grid;
        grid-template-columns: 88px 1fr auto;
        align-items: center;
        gap: 10px;
        border-radius: 14px;
        border: 1px solid #e7e9ef;
        background: #fff;
        padding: 10px;
    }

    .public-page.native-app .app-search-result-item img {
        width: 88px;
        height: 68px;
        object-fit: contain;
        border-radius: 10px;
        background: #f8f9fb;
    }

    .public-page.native-app .app-search-result-item h4 {
        font-size: 0.98rem;
        margin: 0 0 3px;
        color: #131730;
    }

    .public-page.native-app .app-search-result-item p {
        margin: 0;
        color: #7f8698;
        font-size: 0.79rem;
    }

    .public-page.native-app .app-search-result-item strong {
        display: block;
        margin-top: 4px;
        color: var(--app-accent);
        font-size: 1rem;
    }

    .public-page.native-app .app-search-result-item .btn {
        width: 42px;
        height: 42px;
        min-width: 42px;
        min-height: 42px;
        border-radius: 999px;
        border: 1px solid #dfe3ea;
        background: #fff;
        color: #151a32;
        font-size: 1.62rem;
        font-weight: 500;
        line-height: 1;
        padding: 0;
    }

    .public-page.native-app .app-order-preview-modal {
        position: fixed;
        inset: 0;
        z-index: 1800;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 14px;
    }

    .public-page.native-app .app-order-preview-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(20, 24, 46, 0.45);
    }

    .public-page.native-app .app-order-preview-dialog {
        position: relative;
        width: min(100%, 390px);
        border-radius: 16px;
        border: 1px solid #eaedf4;
        background: #fff;
        box-shadow: 0 22px 40px rgba(14, 19, 34, 0.25);
        padding: 22px 18px;
        text-align: center;
        animation: appRiseIn 0.22s ease both;
    }

    .public-page.native-app .app-order-preview-icon {
        width: 58px;
        height: 58px;
        border-radius: 999px;
        color: #f15a24;
        margin: 0 auto 12px;
    }

    .public-page.native-app .app-order-preview-icon svg {
        width: 100%;
        height: 100%;
    }

    .public-page.native-app .app-order-preview-dialog h3 {
        margin: 0 0 8px;
        font-size: 2rem;
        line-height: 1.05;
        color: #141a31;
    }

    .public-page.native-app .app-order-preview-dialog p {
        margin: 0;
        color: #6d7486;
    }

    .public-page.native-app .app-order-preview-progress {
        margin: 16px auto 8px;
        height: 10px;
        border-radius: 999px;
        background: #e8ecf3;
        overflow: hidden;
        width: min(100%, 280px);
    }

    .public-page.native-app .app-order-preview-progress > span {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, #5ecf5e 0%, #2cb34a 100%);
        transition: width 1s linear;
    }

    .public-page.native-app .app-order-preview-seconds {
        margin-top: 6px !important;
        font-weight: 700;
        color: #515a71 !important;
    }

    .public-page.native-app .app-order-preview-actions {
        margin-top: 16px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .public-page.native-app .app-order-preview-actions .btn {
        min-height: 50px;
        border-radius: 12px;
        font-size: 0.92rem;
    }
}

.native-drawer-layout,
.app-account-profile-screen,
.app-delivery-mode-card,
.app-home-payment-strip,
.app-home-explore-head,
.app-home-explore-copy,
.app-home-categories-grid,
.app-home-all-items-banner {
    display: none;
}

.native-drawer-logout-form {
    margin: 0;
}

.native-drawer-logout-form button {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    font: inherit;
    cursor: pointer;
    color: inherit;
}

@media (max-width: 1024px) {
    .public-page.native-app .main-navigation .main-navigation-list {
        display: none;
    }

    .public-page.native-app.page-index .native-app-page-meta {
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 6px;
        min-width: 0;
    }

    .public-page.native-app.page-index .native-home-deliver-label {
        margin: 0;
        color: #20263f;
        font-size: 0.9rem;
        font-weight: 500;
        white-space: nowrap;
    }

    .public-page.native-app.page-index .native-app-page-title {
        margin: 0;
        font-size: 1.03rem;
        line-height: 1.2;
        font-weight: 700;
        letter-spacing: 0;
        color: #131830;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .public-page.native-app.page-index .native-home-deliver-arrow {
        color: #131830;
        font-size: 0.76rem;
        line-height: 1;
        transform: translateY(1px);
    }

    .public-page.native-app.app-drawer-open {
        overflow: hidden;
    }

    .public-page.native-app.app-drawer-open::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(14, 20, 38, 0.46);
        z-index: 2100;
        pointer-events: auto;
    }

    .public-page.native-app.app-drawer-open .site-header {
        z-index: 2300;
    }

    .public-page.native-app .main-navigation {
        z-index: 2200;
        padding: 0;
        width: min(82vw, 356px);
        left: calc(-1 * min(82vw, 356px));
        background: #f8f9fc;
        border-right: 1px solid #eaedf5;
        pointer-events: auto;
    }

    .public-page.native-app .main-navigation.is-open {
        left: 0;
    }

    .public-page.native-app .native-drawer-layout {
        display: grid;
        grid-template-rows: auto 1fr auto auto;
        min-height: 100dvh;
        padding: calc(16px + env(safe-area-inset-top)) 0 calc(12px + env(safe-area-inset-bottom));
        background: #f8f9fc;
        pointer-events: auto;
    }

    .public-page.native-app .native-drawer-top {
        display: grid;
        gap: 12px;
        padding: 0 16px 14px;
        border-bottom: 1px solid #e8ebf3;
    }

    .public-page.native-app .native-drawer-logo-wrap {
        width: 58px;
        height: 58px;
        border-radius: 999px;
        background: linear-gradient(180deg, #f9ea49 0%, #f1d915 100%);
        border: 1px solid #e9d742;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 9px 18px rgba(231, 197, 34, 0.3);
    }

    .public-page.native-app .native-drawer-logo {
        width: 46px;
        height: 46px;
        object-fit: contain;
    }

    .public-page.native-app .native-drawer-customer {
        display: grid;
        gap: 4px;
        margin-top: 2px;
    }

    .public-page.native-app .native-drawer-customer-name,
    .public-page.native-app .native-drawer-customer-phone {
        margin: 0;
        color: #131a33;
        letter-spacing: 0;
    }

    .public-page.native-app .native-drawer-customer-name {
        font-size: 1.26rem;
        line-height: 1.16;
        font-weight: 700;
    }

    .public-page.native-app .native-drawer-customer-phone {
        font-size: 1.12rem;
        line-height: 1.2;
        font-weight: 500;
        color: #161f39;
    }

    .public-page.native-app .native-drawer-profile-btn {
        min-height: 58px;
        border-radius: 16px;
        border: 1px solid #ead83f;
        background: linear-gradient(180deg, #f9ea49 0%, #f1d915 100%);
        color: #11162f;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        font-size: 1.02rem;
        font-weight: 800;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .public-page.native-app .native-drawer-menu {
        list-style: none;
        display: grid;
        margin: 0;
        padding: 0;
        align-content: start;
    }

    .public-page.native-app .native-drawer-menu > li {
        border-bottom: 1px solid #e8ebf3;
    }

    .public-page.native-app .native-drawer-menu > li > a,
    .public-page.native-app .native-drawer-logout-form > button {
        width: 100%;
        min-height: 66px;
        padding: 0 16px;
        display: grid;
        grid-template-columns: 28px 1fr auto;
        gap: 12px;
        align-items: center;
        color: #141a33;
        font-size: 1.03rem;
        font-weight: 600;
        text-align: left;
    }

    .public-page.native-app .native-drawer-menu-icon {
        width: 24px;
        height: 24px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #161c36;
    }

    .public-page.native-app .native-drawer-menu-icon svg {
        width: 23px;
        height: 23px;
        display: block;
    }

    .public-page.native-app .native-drawer-menu-label {
        color: #141a33;
        font-size: 1.03rem;
        font-weight: 600;
    }

    .public-page.native-app .native-drawer-menu-arrow {
        font-size: 1.56rem;
        line-height: 1;
        color: #252b45;
        transform: translateY(-1px);
    }

    .public-page.native-app .native-drawer-contact-pill {
        margin: 16px 16px 10px;
        width: calc(100% - 32px);
        max-width: calc(100% - 32px);
        min-height: 66px;
        border-radius: 16px;
        background: linear-gradient(180deg, #f9ea49 0%, #f1d915 100%);
        border: 1px solid #e9d742;
        box-shadow: 0 10px 20px rgba(228, 193, 33, 0.28);
        padding: 10px 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        color: #11162f;
        box-sizing: border-box;
        overflow: hidden;
    }

    .public-page.native-app .native-drawer-menu > li > a,
    .public-page.native-app .native-drawer-logout-form > button,
    .public-page.native-app .native-drawer-contact-pill {
        position: relative;
        z-index: 2;
        pointer-events: auto;
    }

    .public-page.native-app.app-drawer-open .nav-toggle:not(.is-back) {
        opacity: 0;
        pointer-events: none;
    }

    .public-page.native-app .native-drawer-contact-brand {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
    }

    .public-page.native-app .native-drawer-contact-brand img {
        width: 34px;
        height: 34px;
        object-fit: contain;
        border-radius: 999px;
        background: #fff8c4;
    }

    .public-page.native-app .native-drawer-contact-brand strong {
        text-transform: uppercase;
        letter-spacing: 0.02em;
        font-size: 0.9rem;
        white-space: nowrap;
    }

    .public-page.native-app .native-drawer-contact-icon {
        width: 38px;
        height: 38px;
        border-radius: 999px;
        background: #f25a24;
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .public-page.native-app .native-drawer-contact-icon svg {
        width: 20px;
        height: 20px;
    }

    .public-page.native-app .native-drawer-meta-row {
        margin: 0 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        color: #6a7084;
        font-size: 0.84rem;
        line-height: 1.2;
        padding: 2px 2px 0;
    }

    .public-page.native-app .native-drawer-meta-row a {
        color: #f15a24;
        font-weight: 600;
    }

    .public-page.native-app.page-index .app-delivery-mode-card {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 12px;
    }

    .public-page.native-app.page-index .app-delivery-mode-icon {
        width: 72px;
        height: 72px;
        border-radius: 999px;
        background: linear-gradient(180deg, #f9ea49 0%, #f1d915 100%);
        border: 1px solid #e9d742;
        color: #f15a24;
        box-shadow: 0 12px 24px rgba(232, 196, 35, 0.35);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .public-page.native-app.page-index .app-delivery-mode-icon svg {
        width: 31px;
        height: 31px;
    }

    .public-page.native-app.page-index .app-delivery-mode-text {
        display: grid;
        gap: 3px;
    }

    .public-page.native-app.page-index .app-delivery-mode-text strong {
        text-transform: uppercase;
        letter-spacing: 0.035em;
        color: #131730;
        font-size: 1.1rem;
    }

    .public-page.native-app.page-index .app-delivery-mode-text small {
        color: #878e9f;
        font-size: 0.8rem;
        max-width: 255px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .public-page.native-app.page-index .section-title,
    .public-page.native-app.page-index .categories-grid--web {
        display: none;
    }

    .public-page.native-app.page-index .app-home-payment-strip {
        display: block;
        position: relative;
        margin-bottom: 14px;
        text-decoration: none;
        border: 0;
        background: transparent;
    }

    .public-page.native-app.page-index .app-home-payment-strip > img {
        width: 100%;
        height: auto;
        display: block;
        border: 0;
        border-radius: 10px;
        box-shadow: 0 6px 12px rgba(17, 24, 39, 0.14);
    }

    .public-page.native-app.page-index .app-home-payment-dots {
        position: absolute;
        left: 50%;
        bottom: 10px;
        transform: translateX(-50%);
        display: inline-flex;
        align-items: center;
        gap: 10px;
        pointer-events: none;
    }

    .public-page.native-app.page-index .app-home-payment-dots span {
        width: 30px;
        height: 10px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.5);
    }

    .public-page.native-app.page-index .app-home-payment-dots span.is-active {
        background: rgba(255, 233, 164, 0.95);
    }

    .public-page.native-app.page-index .app-home-explore-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 10px;
    }

    .public-page.native-app.page-index .app-home-explore-head h2 {
        margin: 0;
        font-size: 2rem;
        line-height: 1.07;
        letter-spacing: -0.02em;
        color: #11162f;
    }

    .public-page.native-app.page-index .app-home-explore-head a {
        text-transform: uppercase;
        letter-spacing: 0.02em;
        color: #f15a24;
        font-size: 0.84rem;
        font-weight: 700;
    }

    .public-page.native-app.page-index .app-home-explore-copy {
        display: block;
        margin: 0 0 12px;
        color: #8b90a0;
        font-size: 0.87rem;
        line-height: 1.5;
        max-width: 290px;
    }

    .public-page.native-app.page-index .app-home-categories-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    .public-page.native-app.page-index .app-home-categories-grid .category-card {
        min-height: 168px;
        padding: 10px 8px 12px;
        border-radius: 12px;
        border: 1px solid #e7e9ef;
        background: #fff;
        box-shadow: 0 3px 8px rgba(17, 24, 39, 0.07);
        display: grid;
        grid-template-rows: auto auto;
        align-content: start;
    }

    .public-page.native-app.page-index .app-home-categories-grid .category-card-media {
        width: 100%;
        height: 104px;
        border-radius: 10px;
        margin-bottom: 8px;
        background: #f7f8fb;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .public-page.native-app.page-index .app-home-categories-grid .category-card img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 8px;
    }

    .public-page.native-app.page-index .app-home-categories-grid .category-card h4 {
        margin: 0;
        color: #2a2e43;
        font-size: 0.8rem;
        line-height: 1.2;
        font-weight: 500;
        text-align: center;
    }

    .public-page.native-app.page-index .app-home-all-items-banner {
        display: block;
        margin-top: 14px;
        border-radius: 16px;
        overflow: hidden;
    }

    .public-page.native-app.page-index .app-home-all-items-banner img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: inherit;
        box-shadow: 0 8px 14px rgba(17, 24, 39, 0.14);
    }

    .app-account-profile-screen {
        display: none;
    }

    .public-page.native-app.page-account .account-page-hero,
    .public-page.native-app.page-account .account-app-shell {
        display: none;
    }

    .public-page.native-app.page-account .app-account-profile-screen {
        display: grid;
        gap: 14px;
        margin-bottom: 16px;
    }

    .public-page.native-app.page-account .app-account-profile-cover {
        position: relative;
        height: 268px;
        border-radius: 0 0 18px 18px;
        overflow: hidden;
        background:
            linear-gradient(180deg, rgba(8, 10, 20, 0.2) 0%, rgba(8, 10, 20, 0.7) 100%),
            radial-gradient(circle at 22% 20%, rgba(245, 191, 120, 0.24) 0%, rgba(245, 191, 120, 0) 36%),
            linear-gradient(120deg, #2f2c2a 0%, #3f362f 44%, #27211e 100%);
    }

    .public-page.native-app.page-account .app-account-profile-cover-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.42) 100%);
    }

    .public-page.native-app.page-account .app-account-profile-topbar {
        position: relative;
        z-index: 2;
        padding: calc(16px + env(safe-area-inset-top)) 16px 0;
    }

    .public-page.native-app.page-account .app-account-profile-back {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #fff;
        font-size: 1.22rem;
        font-weight: 700;
        letter-spacing: 0.01em;
    }

    .public-page.native-app.page-account .app-account-profile-back > span:first-child {
        font-size: 1.65rem;
        line-height: 1;
        transform: translateY(-1px);
    }

    .public-page.native-app.page-account .app-account-avatar-wrap {
        margin-top: -68px;
        display: flex;
        justify-content: center;
        position: relative;
        z-index: 3;
    }

    .public-page.native-app.page-account .app-account-avatar-circle {
        width: 148px;
        height: 148px;
        border-radius: 999px;
        background: #d4d6db;
        border: 4px solid #f3f3f5;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 14px 26px rgba(23, 26, 42, 0.16);
    }

    .public-page.native-app.page-account .app-account-avatar-circle img {
        width: 138px;
        height: 138px;
        object-fit: contain;
        opacity: 0.86;
    }

    .public-page.native-app.page-account .app-account-avatar-camera {
        position: absolute;
        right: calc(50% - 72px);
        bottom: 8px;
        width: 50px;
        height: 50px;
        border-radius: 999px;
        background: #f25a24;
        color: #fff;
        border: 3px solid #f3f3f5;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 10px 16px rgba(242, 90, 36, 0.34);
    }

    .public-page.native-app.page-account .app-account-avatar-camera svg {
        width: 24px;
        height: 24px;
    }

    .public-page.native-app.page-account .app-account-profile-cards {
        display: grid;
        gap: 12px;
    }

    .public-page.native-app.page-account .app-account-profile-card {
        border: 1px solid #e7e9ef;
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 7px 15px rgba(16, 21, 38, 0.08);
        padding: 14px 14px 12px;
        display: grid;
        gap: 8px;
        color: #141a33;
    }

    .public-page.native-app.page-account .app-account-profile-card-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .public-page.native-app.page-account .app-account-profile-card-head strong {
        font-size: 1.12rem;
        color: #171d34;
    }

    .public-page.native-app.page-account .app-account-profile-card-head span {
        text-transform: uppercase;
        color: #f15a24;
        letter-spacing: 0.02em;
        font-weight: 800;
        font-size: 0.9rem;
    }

    .public-page.native-app.page-account .app-account-profile-card > span:last-child {
        color: #2f354a;
        font-size: 1rem;
        line-height: 1.35;
    }

    .public-page.native-app.page-account .app-account-delete-btn {
        min-height: 62px;
        border: 2px solid #f15a24;
        border-radius: 16px;
        color: #f15a24;
        background: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        font-weight: 800;
        font-size: 1.02rem;
        box-shadow: 0 8px 14px rgba(17, 24, 39, 0.06);
        margin-top: 6px;
    }

    /* App parity layer: keep every app screen on one visual system. */
    .public-page.native-app:not(.page-menu):not(.page-index) .page-hero {
        display: none;
    }

    .public-page.native-app.page-menu .page-hero {
        padding: 4px 0 8px;
    }

    .public-page.native-app.page-menu .page-hero .app-page-hero-head {
        justify-content: flex-end;
    }

    .public-page.native-app.page-menu .page-hero .app-page-hero-head > div,
    .public-page.native-app.page-menu .page-hero > .container > p {
        display: none;
    }

    .public-page.native-app.page-menu .menu-filters-shell .filter-btn {
        font-size: 1.02rem;
    }

    .public-page.native-app.page-menu .menu-card h3 {
        font-size: 1.1rem;
    }

    .public-page.native-app.page-menu .menu-card .menu-card-description {
        font-size: 0.9rem;
    }

    .public-page.native-app.page-menu .menu-card-footer .price {
        font-size: 1.18rem;
    }

    .public-page.native-app.page-cart .section {
        padding-block: 10px;
    }

    .public-page.native-app.page-cart .checkout-form {
        display: grid;
        gap: 12px;
    }

    .public-page.native-app.page-cart .checkout-customer-fields.is-prefilled {
        display: none;
    }

    .public-page.native-app.page-cart .form-section h3,
    .public-page.native-app.page-cart .items-fieldset > legend {
        font-size: 1.55rem;
        line-height: 1.16;
        letter-spacing: -0.01em;
        color: #11162f;
        margin-bottom: 10px;
    }

    .public-page.native-app.page-cart .items-fieldset:not(.payment-fieldset) {
        border: 1px solid #e7e9ef;
        border-radius: 14px;
        padding: 12px;
        background: #fff;
    }

    .public-page.native-app.page-cart .payment-option {
        min-height: 58px;
        padding: 10px 12px;
    }

    .public-page.native-app.page-cart .payment-option-content small {
        display: none;
    }

    .public-page.native-app.page-cart .payment-option-content strong {
        font-size: 1.05rem;
        font-weight: 600;
        color: #10142f;
    }

    .public-page.native-app.page-cart .payment-option-amount {
        font-size: 1.08rem;
        font-weight: 700;
        color: #121730;
    }

    .public-page.native-app.page-cart .checkout-voucher-link {
        margin: 0;
    }

    .public-page.native-app.page-cart .checkout-voucher-link strong {
        font-size: 1.15rem;
        margin-bottom: 0;
    }

    .public-page.native-app.page-cart .checkout-voucher-link small {
        display: none;
    }

    .public-page.native-app.page-cart .cart-preview-box h4 {
        font-size: 1.18rem;
        margin: 0 0 8px;
    }

    .public-page.native-app.page-cart .total-row {
        font-size: 0.96rem;
    }

    .public-page.native-app.page-cart .total-row.total-row--grand {
        font-size: 1.15rem;
    }

    .public-page.native-app .app-order-preview-dialog {
        width: min(100%, 392px);
        border-radius: 18px;
        padding: 20px 16px;
    }

    .public-page.native-app .app-order-preview-dialog h3 {
        font-size: 2rem;
    }

    .public-page.native-app .app-order-preview-actions .btn {
        min-height: 56px;
        border-radius: 14px;
        text-transform: uppercase;
        letter-spacing: 0.01em;
        font-size: 0.95rem;
    }

    .public-page.native-app.page-voucher .app-voucher-shell,
    .public-page.native-app.page-find-items .app-search-shell {
        margin-top: 2px;
        gap: 12px;
    }

    .public-page.native-app.page-voucher .app-voucher-entry h2,
    .public-page.native-app.page-find-items .app-popular-searches h2 {
        font-size: 1.95rem;
        line-height: 1.08;
        letter-spacing: -0.02em;
        color: #13172f;
    }

    .public-page.native-app.page-voucher .app-voucher-entry h2 {
        margin: 0;
    }

    .public-page.native-app.page-voucher .app-voucher-form {
        margin-top: 12px;
    }

    .public-page.native-app.page-voucher .app-voucher-empty h3,
    .public-page.native-app.page-find-items .app-search-empty h3 {
        font-size: 1.9rem;
        margin-bottom: 4px;
    }

    .public-page.native-app.page-voucher .app-voucher-empty p,
    .public-page.native-app.page-find-items .app-search-empty p {
        font-size: 0.86rem;
        color: #7f8798;
    }

    .public-page.native-app.page-find-items .app-search-input-wrap input {
        font-size: 1.02rem;
    }

    .public-page.native-app.page-find-items .app-search-chip {
        font-size: 0.92rem;
        min-height: 44px;
    }

    .public-page.native-app.page-order-history .history-orders-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .public-page.native-app.page-order-history .history-order-card {
        border: 1px solid #e7e9ef;
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 7px 16px rgba(15, 21, 38, 0.08);
        padding: 12px;
    }

    .public-page.native-app.page-order-history .history-order-app-summary {
        display: grid;
        grid-template-columns: 94px minmax(0, 1fr);
        gap: 12px;
        align-items: start;
    }

    .public-page.native-app.page-order-history .history-order-head,
    .public-page.native-app.page-order-history .history-order-progress,
    .public-page.native-app.page-order-history .history-order-items,
    .public-page.native-app.page-order-history .history-review-panel {
        display: none;
    }

    .public-page.native-app.page-order-history .history-order-app-title {
        font-family: 'Poppins', sans-serif;
        font-size: 1.25rem;
        color: #4a220f;
    }

    .public-page.native-app.page-order-history .history-order-app-code {
        font-size: 0.75rem;
        color: #4f5670;
    }

    .public-page.native-app.page-order-history .history-order-app-total {
        font-size: 1.2rem;
        color: #4a220f;
    }

    .public-page.native-app.page-order-history .history-order-app-meta {
        font-size: 0.88rem;
        color: #6f7689;
    }

    .public-page.native-app.page-order-history .history-order-app-primary {
        font-size: 0.95rem;
        color: #4a220f;
    }

    .public-page.native-app.page-order-history .history-order-app-secondary {
        font-size: 0.88rem;
        color: #6f7689;
    }

    .public-page.native-app.page-contact .section {
        padding-block: 10px;
    }

    .public-page.native-app.page-contact .hero-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .public-page.native-app.page-contact .contact-info,
    .public-page.native-app.page-contact .map-wrap {
        border: 1px solid #e7e9ef;
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 7px 16px rgba(16, 23, 42, 0.08);
        padding: 14px;
    }

    .public-page.native-app.page-contact .contact-info h2 {
        margin: 0 0 8px;
        font-size: 1.2rem;
        color: #121730;
    }

    .public-page.native-app.page-contact .contact-info p {
        margin: 0;
        color: #5d6478;
        font-size: 0.95rem;
    }

    .public-page.native-app.page-contact .contact-info .btn {
        margin-top: 14px;
        min-height: 54px;
    }

    .public-page.native-app.page-contact .map-embed {
        height: 260px;
        border-radius: 12px;
    }
}

/* Native app drawer production interaction fixes */
@media (max-width: 1024px) {
    .public-page.native-app.app-drawer-open::before {
        z-index: 3090;
        background: rgba(11, 17, 35, 0.44);
    }

    .public-page.native-app .mobile-app-nav {
        z-index: 2500;
    }

    .public-page.native-app .site-header,
    .public-page.native-app.app-drawer-open .site-header {
        z-index: 3210;
    }

    .public-page.native-app .main-navigation {
        z-index: 3200 !important;
        pointer-events: auto;
    }

    .public-page.native-app .main-navigation,
    .public-page.native-app .native-drawer-layout,
    .public-page.native-app .native-drawer-menu,
    .public-page.native-app .native-drawer-menu > li,
    .public-page.native-app .native-drawer-menu > li > a,
    .public-page.native-app .native-drawer-logout-form > button,
    .public-page.native-app .native-drawer-contact-pill {
        pointer-events: auto;
    }

    .public-page.native-app.app-drawer-open .nav-toggle:not(.is-back) {
        display: none !important;
    }

    .public-page.native-app .native-drawer-top {
        gap: 14px;
        padding: 0 16px 16px;
    }

    .public-page.native-app .native-drawer-customer-name {
        font-size: 1.76rem;
        line-height: 1.1;
    }

    .public-page.native-app .native-drawer-customer-phone {
        font-size: 1.26rem;
        line-height: 1.15;
    }

    .public-page.native-app .native-drawer-contact-pill {
        width: auto;
        max-width: none;
        margin: 16px 16px 10px;
        padding: 10px 12px;
    }

    .public-page.native-app .native-drawer-contact-brand {
        flex: 1 1 auto;
        min-width: 0;
    }

    .public-page.native-app .native-drawer-contact-brand strong {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .public-page.native-app .native-drawer-contact-icon {
        flex-shrink: 0;
    }
}

/* Native app parity patch: drawer layer order + branches/location pages */
@media (max-width: 1024px) {
    .public-page.native-app .native-home-deliver-link {
        text-decoration: none;
        color: inherit;
    }

    .public-page.native-app.page-index .app-delivery-mode-card {
        text-decoration: none;
        color: inherit;
    }

    .public-page.native-app .site-header,
    .public-page.native-app.app-drawer-open .site-header {
        z-index: 4600 !important;
    }

    .public-page.native-app.app-drawer-open::before {
        z-index: 4500 !important;
        background: rgba(9, 14, 27, 0.46) !important;
    }

    .public-page.native-app .mobile-app-nav {
        z-index: 4100 !important;
    }

    .public-page.native-app .main-navigation {
        z-index: 4610 !important;
        pointer-events: none;
    }

    .public-page.native-app .main-navigation.is-open {
        pointer-events: auto;
    }

    .public-page.native-app .native-drawer-layout,
    .public-page.native-app .native-drawer-menu,
    .public-page.native-app .native-drawer-menu > li > a,
    .public-page.native-app .native-drawer-logout-form > button,
    .public-page.native-app .native-drawer-contact-pill {
        pointer-events: auto;
    }

    .public-page.native-app.app-drawer-open .nav-toggle:not(.is-back) {
        display: none !important;
    }

    .public-page.native-app .native-drawer-customer-name {
        font-size: 1.95rem !important;
        line-height: 1.08 !important;
    }

    .public-page.native-app .native-drawer-customer-phone {
        font-size: 1.2rem !important;
        line-height: 1.2 !important;
    }

    .public-page.native-app .native-drawer-contact-pill {
        width: calc(100% - 32px) !important;
        max-width: calc(100% - 32px) !important;
    }

    .public-page.native-app.page-branches .app-branches-section,
    .public-page.native-app.page-choose-location .app-location-section {
        padding-block: 10px 14px;
    }

    .public-page.native-app.page-branches .app-branches-shell,
    .public-page.native-app.page-choose-location .app-location-shell {
        display: grid;
        gap: 14px;
    }

    .public-page.native-app.page-branches .app-branches-delivery-card {
        display: grid;
        grid-template-columns: 58px 1fr auto;
        align-items: center;
        gap: 12px;
        border: 1px solid #e8ebf3;
        border-radius: 18px;
        background: #fff;
        padding: 12px;
        color: #121730;
        box-shadow: 0 8px 16px rgba(18, 23, 48, 0.08);
    }

    .public-page.native-app.page-branches .app-branches-delivery-icon {
        width: 58px;
        height: 58px;
        border-radius: 999px;
        background: linear-gradient(180deg, #f9ea49 0%, #f1d915 100%);
        color: #f15a24;
        border: 1px solid #e7d640;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .public-page.native-app.page-branches .app-branches-delivery-icon svg {
        width: 26px;
        height: 26px;
    }

    .public-page.native-app.page-branches .app-branches-delivery-copy {
        display: grid;
        gap: 2px;
        min-width: 0;
    }

    .public-page.native-app.page-branches .app-branches-delivery-copy strong {
        text-transform: uppercase;
        letter-spacing: 0.03em;
        font-size: 1.05rem;
    }

    .public-page.native-app.page-branches .app-branches-delivery-copy small {
        color: #8a90a1;
        font-size: 0.9rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .public-page.native-app.page-branches .app-branches-delivery-arrow {
        font-size: 1.8rem;
        line-height: 1;
        color: #1a2242;
        transform: translateY(-2px);
    }

    .public-page.native-app.page-branches .app-branches-card,
    .public-page.native-app.page-branches .app-branches-map-card {
        border: 1px solid #e8ebf3;
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 8px 16px rgba(18, 23, 48, 0.08);
        padding: 14px;
    }

    .public-page.native-app.page-branches .app-branches-card h2 {
        margin: 0 0 8px;
        font-size: 1.25rem;
        color: #121730;
    }

    .public-page.native-app.page-branches .app-branches-card p {
        margin: 0;
        color: #5f667b;
    }

    .public-page.native-app.page-branches .app-branches-card-actions {
        margin-top: 14px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .public-page.native-app.page-branches .app-branches-card-actions .btn {
        min-height: 52px;
    }

    .public-page.native-app.page-branches .app-branches-map {
        height: 250px;
        border-radius: 12px;
        border: 0;
    }

    .public-page.native-app.page-choose-location .app-location-map-wrap {
        position: relative;
        border-radius: 18px;
        overflow: hidden;
        border: 1px solid #e8ebf3;
        background: #e9edf4;
        min-height: 440px;
    }

    .public-page.native-app.page-choose-location .app-location-search {
        position: absolute;
        left: 12px;
        right: 12px;
        top: 12px;
        z-index: 2;
        min-height: 56px;
        border-radius: 12px;
        border: 1px solid #dfe3ec;
        background: rgba(255, 255, 255, 0.96);
        font-size: 1.03rem;
        color: #121730;
        padding: 0 16px;
        box-shadow: 0 4px 10px rgba(21, 26, 46, 0.08);
    }

    .public-page.native-app.page-choose-location .app-location-map {
        width: 100%;
        min-height: 440px;
        border: 0;
        filter: saturate(0.1) contrast(0.94) brightness(1.06);
    }

    .public-page.native-app.page-choose-location .app-location-pin {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 44px;
        height: 44px;
        margin-left: -22px;
        margin-top: -22px;
        border-radius: 999px;
        background: #f15a24;
        box-shadow: 0 10px 20px rgba(241, 90, 36, 0.34);
    }

    .public-page.native-app.page-choose-location .app-location-pin::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 18px;
        height: 18px;
        margin-left: -9px;
        margin-top: -9px;
        border-radius: 999px;
        background: #fff;
    }

    .public-page.native-app.page-choose-location .app-location-current-btn {
        position: absolute;
        right: 12px;
        bottom: 12px;
        z-index: 2;
        width: 54px;
        height: 54px;
        border: 1px solid #dfe3ec;
        border-radius: 999px;
        background: #fff;
        color: #121730;
        box-shadow: 0 10px 18px rgba(21, 26, 46, 0.12);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .public-page.native-app.page-choose-location .app-location-current-btn svg {
        width: 23px;
        height: 23px;
    }

    .public-page.native-app.page-choose-location .app-location-sheet {
        border: 1px solid #e8ebf3;
        border-radius: 20px;
        background: #fff;
        box-shadow: 0 10px 18px rgba(18, 23, 48, 0.1);
        padding: 16px 14px;
    }

    .public-page.native-app.page-choose-location .app-location-sheet h2 {
        margin: 0 0 6px;
        font-size: 1.44rem;
        color: #121730;
    }

    .public-page.native-app.page-choose-location .app-location-sheet p {
        margin: 0;
        color: #61697e;
        font-size: 1.08rem;
        line-height: 1.35;
    }

    .public-page.native-app.page-choose-location .app-location-sheet-actions {
        margin-top: 14px;
    }

    .public-page.native-app.page-choose-location .app-location-sheet-actions .btn {
        width: 100%;
        min-height: 54px;
        border-radius: 14px;
    }
}

/* Native app parity refresh: Home + Menu + Basket exact spacing and controls */
.app-menu-group-title {
    display: none;
}

@media (max-width: 1024px) {
    .public-page.native-app.page-index .section-home-menu-overview {
        padding-top: 10px;
    }

    .public-page.native-app.page-index .section-home-menu-overview > .container {
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 0 14px;
    }

    .public-page.native-app.page-index .app-delivery-mode-card {
        margin-bottom: 16px;
        gap: 16px;
    }

    .public-page.native-app.page-index .app-delivery-mode-icon {
        width: 80px;
        height: 80px;
    }

    .public-page.native-app.page-index .app-delivery-mode-icon svg {
        width: 34px;
        height: 34px;
    }

    .public-page.native-app.page-index .app-delivery-mode-text strong {
        font-size: 2rem;
        line-height: 1;
        letter-spacing: -0.01em;
    }

    .public-page.native-app.page-index .app-delivery-mode-text small {
        font-size: 0.95rem;
        max-width: 280px;
    }

    .public-page.native-app.page-index .app-home-payment-strip {
        margin-bottom: 16px;
    }

    .public-page.native-app.page-index .app-home-payment-strip > img {
        border-radius: 8px;
    }

    .public-page.native-app.page-index .app-home-explore-head {
        margin-bottom: 8px;
    }

    .public-page.native-app.page-index .app-home-explore-head h2 {
        font-size: 3.2rem;
        line-height: 0.98;
        letter-spacing: -0.03em;
    }

    .public-page.native-app.page-index .app-home-explore-head a {
        font-size: 0.82rem;
        letter-spacing: 0.03em;
    }

    .public-page.native-app.page-index .app-home-explore-copy {
        margin-bottom: 14px;
        max-width: 100%;
        font-size: 0.86rem;
    }

    .public-page.native-app.page-index .app-home-categories-grid {
        gap: 12px;
    }

    .public-page.native-app.page-index .app-home-categories-grid .category-card {
        min-height: 184px;
        border-radius: 13px;
        padding: 10px 8px 14px;
        box-shadow: 0 4px 12px rgba(16, 22, 40, 0.08);
    }

    .public-page.native-app.page-index .app-home-categories-grid .category-card-media {
        height: 114px;
        border-radius: 11px;
        margin-bottom: 10px;
    }

    .public-page.native-app.page-index .app-home-categories-grid .category-card h4 {
        font-size: 0.78rem;
        line-height: 1.22;
        color: #20253c;
    }

    .public-page.native-app.page-index .app-home-all-items-banner {
        margin-top: 16px;
        border-radius: 14px;
    }

    .public-page.native-app.page-menu .menu-filters-shell {
        top: calc(76px + env(safe-area-inset-top));
        margin-bottom: 8px;
    }

    .public-page.native-app.page-menu .menu-filters-shell .filters-bar {
        gap: 24px;
        padding-bottom: 2px;
    }

    .public-page.native-app.page-menu .menu-filters-shell .filter-btn {
        font-size: 1.05rem;
        padding-bottom: 11px;
    }

    .public-page.native-app.page-menu .menu-filters-shell .menu-filter-indicator {
        height: 5px;
    }

    .public-page.native-app.page-menu .cards-grid.app-menu-list {
        display: block !important;
        background: #fff;
        border: 1px solid #e7e9ef;
        border-radius: 14px;
        overflow: hidden;
    }

    .public-page.native-app.page-menu .app-menu-group-title {
        display: block;
        margin: 0;
        padding: 12px;
        border-top: 1px solid #eceef4;
        border-bottom: 1px solid #eceef4;
        background: #f4f5f8;
        color: #f15a24;
        font-family: 'Poppins', sans-serif;
        font-size: 1.05rem;
        font-weight: 700;
        letter-spacing: 0.01em;
        line-height: 1.2;
    }

    .public-page.native-app.page-menu .app-menu-group-title:first-child {
        border-top: 0;
    }

    .public-page.native-app.page-menu .menu-card {
        min-height: 124px;
        padding: 12px;
        gap: 12px;
    }

    .public-page.native-app.page-menu .menu-card-image {
        width: 112px;
        height: 90px;
        flex: 0 0 112px;
        border-radius: 10px;
    }

    .public-page.native-app.page-menu .menu-card .category-tag {
        display: none;
    }

    .public-page.native-app.page-menu .menu-card-body {
        grid-template-columns: 1fr auto;
        align-content: center;
        gap: 4px 10px;
    }

    .public-page.native-app.page-menu .menu-card h3 {
        font-size: 1.12rem;
        line-height: 1.2;
        letter-spacing: -0.01em;
    }

    .public-page.native-app.page-menu .menu-card .menu-card-description {
        -webkit-line-clamp: 2;
        line-height: 1.32;
    }

    .public-page.native-app.page-menu .menu-card-footer .price {
        font-size: 1.16rem;
    }

    .public-page.native-app.page-menu .menu-card-footer .btn {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
    }

    .public-page.native-app.page-menu .menu-card-footer .btn::before {
        font-size: 2rem;
        transform: translateY(-1px);
    }

    .public-page.native-app.page-cart .checkout-layout {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .public-page.native-app.page-cart .card-form.checkout-form {
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        gap: 12px;
    }

    .public-page.native-app.page-cart .checkout-customer-fields {
        border: 1px solid #e7e9ef;
        border-radius: 14px;
        background: #fff;
        padding: 12px;
    }

    .public-page.native-app.page-cart .items-fieldset {
        border-radius: 14px;
        padding: 12px;
        border: 1px solid #e7e9ef;
        background: #fff;
    }

    .public-page.native-app.page-cart .items-fieldset > legend {
        font-size: 1.28rem;
        line-height: 1.2;
        letter-spacing: -0.01em;
        color: #121730;
        margin-bottom: 8px;
    }

    .public-page.native-app.page-cart .items-fieldset.payment-fieldset {
        border: 1px solid #ecdb2e;
        background: linear-gradient(180deg, #f5e93f 0%, #f3db10 100%);
        padding: 12px;
    }

    .public-page.native-app.page-cart .payment-options {
        gap: 9px;
    }

    .public-page.native-app.page-cart .payment-option {
        min-height: 62px;
        border-radius: 10px;
        border: 1px solid #dfdfdf;
        background: #fff;
        padding: 10px 12px;
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 10px;
        align-items: center;
    }

    .public-page.native-app.page-cart .payment-option input {
        appearance: none;
        -webkit-appearance: none;
        width: 28px;
        height: 28px;
        border: 2px solid #1b1f35;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0;
    }

    .public-page.native-app.page-cart .payment-option input::after {
        content: "";
        width: 14px;
        height: 14px;
        border-radius: 999px;
        background: #f4a319;
        opacity: 0;
        transform: scale(0.5);
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .public-page.native-app.page-cart .payment-option input:checked::after {
        opacity: 1;
        transform: scale(1);
    }

    .public-page.native-app.page-cart .payment-option-content {
        min-width: 0;
    }

    .public-page.native-app.page-cart .payment-option-content strong {
        font-size: 1.04rem;
        font-weight: 600;
    }

    .public-page.native-app.page-cart .payment-option-content small {
        display: none !important;
    }

    .public-page.native-app.page-cart .payment-option-amount {
        font-size: 1.02rem;
        font-weight: 700;
        color: #121730;
    }

    .public-page.native-app.page-cart .payment-selected-account {
        margin-top: 10px;
        padding-top: 0;
        border-top: 0;
    }

    .public-page.native-app.page-cart .payment-account-card {
        border-radius: 10px;
        border-color: #e2e5ec;
        background: #fffdf3;
    }

    .public-page.native-app.page-cart .checkout-voucher-link {
        margin: 0;
        border-radius: 14px;
        padding: 14px 14px;
    }

    .public-page.native-app.page-cart .checkout-voucher-link strong {
        font-size: 1.1rem;
        margin-bottom: 0;
    }

    .public-page.native-app.page-cart .checkout-voucher-link small {
        display: none;
    }

    .public-page.native-app.page-cart .cart-preview-box h4 {
        font-size: 1.14rem;
    }

    .public-page.native-app.page-cart .cart-preview-box .total-row {
        font-size: 0.95rem;
    }

    .public-page.native-app.page-cart .cart-preview-box .total-row.total-row--grand {
        font-size: 1.15rem;
    }

    .public-page.native-app.page-cart .btn.btn-primary[type="submit"] {
        position: sticky;
        bottom: calc(88px + env(safe-area-inset-bottom));
        z-index: 20;
        margin-top: 2px;
        border-radius: 14px;
        min-height: 58px;
    }

    .public-page.native-app .app-order-preview-modal {
        z-index: 4700;
    }

    .public-page.native-app .app-order-preview-dialog {
        width: min(92vw, 396px);
        border-radius: 18px;
        padding: 20px 16px;
    }

    .public-page.native-app .app-order-preview-icon {
        width: 64px;
        height: 64px;
        border-radius: 999px;
        color: #f15a24;
        background: rgba(241, 90, 36, 0.12);
    }

    .public-page.native-app .app-order-preview-dialog h3 {
        font-size: 2.05rem;
        letter-spacing: -0.02em;
    }

    .public-page.native-app .app-order-preview-dialog p {
        font-size: 0.92rem;
        color: #737a8b;
    }

    .public-page.native-app .app-order-preview-progress {
        height: 12px;
        border-radius: 999px;
        background: #dadce2;
    }

    .public-page.native-app .app-order-preview-progress > span {
        background: linear-gradient(90deg, #31ce5b 0%, #37db62 100%);
        border-radius: inherit;
    }

    .public-page.native-app .app-order-preview-seconds {
        font-size: 0.95rem;
        color: #8a90a2;
    }

    .public-page.native-app .app-order-preview-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .public-page.native-app .app-order-preview-actions .btn {
        min-height: 56px;
        border-radius: 12px;
        font-size: 0.98rem;
        letter-spacing: 0.01em;
        text-transform: uppercase;
    }

    .public-page.native-app .app-order-preview-actions .btn,
    .public-page.native-app .app-order-preview-actions .btn-outline {
        background: linear-gradient(180deg, #f9ea49 0%, #f1d915 100%);
        border-color: #f1da25;
        color: #131730;
    }
}

/* Native app final parity pass v2 (keep this block last) */
@media (max-width: 1024px) {
    .public-page.native-app.page-index .section-home-menu-overview {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    .public-page.native-app.page-index .section-home-menu-overview > .container {
        padding: 0 14px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .public-page.native-app.page-index .app-delivery-mode-card {
        margin: 0 0 14px !important;
        gap: 14px !important;
    }

    .public-page.native-app.page-index .app-home-explore-head {
        margin: 0 0 8px !important;
    }

    .public-page.native-app.page-index .app-home-explore-head h2 {
        font-size: 2.02rem !important;
        line-height: 1.02 !important;
        letter-spacing: -0.02em !important;
    }

    .public-page.native-app.page-index .app-home-categories-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .public-page.native-app.page-index .app-home-categories-grid .category-card {
        min-height: 170px !important;
        padding: 10px 8px 12px !important;
        border-radius: 12px !important;
    }

    .public-page.native-app.page-index .app-home-categories-grid .category-card-media {
        height: 104px !important;
        border-radius: 10px !important;
        margin-bottom: 9px !important;
    }

    .public-page.native-app.page-index .app-home-all-items-banner {
        margin-top: 14px !important;
        border-radius: 16px !important;
    }

    .public-page.native-app.page-menu .page-hero {
        display: none !important;
    }

    .public-page.native-app.page-menu .menu-filters-shell {
        margin: 0 0 8px !important;
        top: calc(74px + env(safe-area-inset-top)) !important;
        background: #f3f3f5 !important;
        z-index: 1400 !important;
    }

    .public-page.native-app.page-menu .menu-filters-shell .filters-bar {
        gap: 22px !important;
        padding: 0 0 2px !important;
        scrollbar-width: none;
    }

    .public-page.native-app.page-menu .menu-filters-shell .filters-bar::-webkit-scrollbar {
        display: none;
    }

    .public-page.native-app.page-menu .menu-filters-shell .filter-btn,
    .public-page.native-app.page-menu .menu-filters-shell .filter-btn.active {
        min-height: auto !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 0 10px !important;
        font-size: 1rem !important;
        font-weight: 700 !important;
        line-height: 1.15 !important;
        transform: none !important;
    }

    .public-page.native-app.page-menu .menu-filters-shell .filter-btn {
        color: #161c35 !important;
    }

    .public-page.native-app.page-menu .menu-filters-shell .filter-btn.active {
        color: #f15a24 !important;
    }

    .public-page.native-app.page-menu .menu-filters-shell .filter-btn::before,
    .public-page.native-app.page-menu .menu-filters-shell .filter-btn::after,
    .public-page.native-app.page-menu .menu-filters-shell .filter-btn .filter-btn-icon {
        content: none !important;
        display: none !important;
    }

    .public-page.native-app.page-menu .menu-filters-shell .menu-filter-indicator {
        height: 4px !important;
        border-radius: 999px !important;
        bottom: 0 !important;
        top: auto !important;
        background: #f15a24 !important;
        box-shadow: none !important;
    }

    .public-page.native-app.page-menu .cards-grid.app-menu-list {
        display: block !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        border: 1px solid #e7e9ef !important;
        border-radius: 14px !important;
        background: #fff !important;
        overflow: hidden !important;
    }

    .public-page.native-app.page-menu .app-menu-group-title {
        display: block !important;
        margin: 0 !important;
        padding: 12px !important;
        border-top: 1px solid #eceef4 !important;
        border-bottom: 1px solid #eceef4 !important;
        background: #f4f5f8 !important;
        color: #f15a24 !important;
        font-size: 1.04rem !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }

    .public-page.native-app.page-menu .menu-card {
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        min-height: 116px !important;
        padding: 12px !important;
        border: 0 !important;
        border-radius: 0 !important;
        border-bottom: 1px solid #edf0f6 !important;
        box-shadow: none !important;
        animation: none !important;
    }

    .public-page.native-app.page-menu .menu-card-image {
        width: 104px !important;
        height: 84px !important;
        flex: 0 0 104px !important;
        border-radius: 12px !important;
        object-fit: contain !important;
        background: #fafbfd !important;
    }

    .public-page.native-app.page-menu .menu-card .category-tag {
        display: none !important;
    }

    .public-page.native-app.page-menu .menu-card-body {
        padding: 0 !important;
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        gap: 4px 10px !important;
    }

    .public-page.native-app.page-menu .menu-card h3 {
        margin: 0 !important;
        font-size: 1.08rem !important;
        line-height: 1.22 !important;
        color: #12162f !important;
    }

    .public-page.native-app.page-menu .menu-card .menu-card-description {
        margin: 0 !important;
        font-size: 0.88rem !important;
        line-height: 1.32 !important;
        color: #7b8190 !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        overflow: hidden !important;
    }

    .public-page.native-app.page-menu .menu-card-footer {
        display: contents !important;
    }

    .public-page.native-app.page-menu .menu-card-footer .price {
        grid-column: 1 / 2 !important;
        font-size: 1.1rem !important;
        font-weight: 800 !important;
        color: #f15a24 !important;
        align-self: end !important;
    }

    .public-page.native-app.page-menu .menu-card-footer .btn {
        grid-column: 2 / 3 !important;
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        min-height: 50px !important;
        border-radius: 999px !important;
        border: 1px solid #dfe3ea !important;
        background: #fff !important;
        color: transparent !important;
        font-size: 0 !important;
        line-height: 0 !important;
        text-indent: -9999px !important;
        overflow: hidden !important;
        padding: 0 !important;
        box-shadow: 0 5px 10px rgba(17, 24, 39, 0.08) !important;
        position: relative !important;
    }

    .public-page.native-app.page-menu .menu-card-footer .btn::before {
        content: "+" !important;
        position: absolute !important;
        inset: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #11162f !important;
        font-size: 1.9rem !important;
        line-height: 1 !important;
        text-indent: 0 !important;
    }

    .public-page.native-app.page-cart .checkout-layout {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .public-page.native-app.page-cart .checkout-aside {
        display: none !important;
    }

    .public-page.native-app.page-cart .card-form.checkout-form {
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        gap: 12px !important;
    }

    .public-page.native-app.page-cart .items-fieldset.payment-fieldset {
        border: 1px solid #ecd930 !important;
        border-radius: 14px !important;
        background: linear-gradient(180deg, #f5e93f 0%, #f3db10 100%) !important;
        padding: 12px !important;
    }

    .public-page.native-app.page-cart .payment-option {
        min-height: 60px !important;
        border: 1px solid #dfdfe4 !important;
        border-radius: 10px !important;
        background: #fff !important;
        padding: 10px 12px !important;
    }

    .public-page.native-app.page-cart .payment-option input {
        appearance: none !important;
        -webkit-appearance: none !important;
        width: 28px !important;
        height: 28px !important;
        border: 2px solid #171c33 !important;
        border-radius: 999px !important;
        margin: 0 !important;
    }

    .public-page.native-app.page-cart .payment-option input::after {
        content: "" !important;
        width: 14px !important;
        height: 14px !important;
        border-radius: 999px !important;
        background: #f4a319 !important;
        opacity: 0 !important;
        transform: scale(0.5) !important;
        transition: opacity 0.2s ease, transform 0.2s ease !important;
    }

    .public-page.native-app.page-cart .payment-option input:checked::after {
        opacity: 1 !important;
        transform: scale(1) !important;
    }

    .public-page.native-app.page-cart .payment-option-content small,
    .public-page.native-app.page-cart .checkout-voucher-link small {
        display: none !important;
    }

    .public-page.native-app.page-cart .checkout-voucher-link {
        margin: 0 !important;
        border: 1px solid #e7e9ef !important;
        border-radius: 14px !important;
        background: #fff !important;
        padding: 14px !important;
    }

    .public-page.native-app.page-cart .btn.btn-primary[type="submit"] {
        position: sticky !important;
        bottom: calc(88px + env(safe-area-inset-bottom)) !important;
        z-index: 22 !important;
        min-height: 58px !important;
        border-radius: 14px !important;
        background: linear-gradient(180deg, #f9ea49 0%, #f1d915 100%) !important;
        border-color: #f1da25 !important;
        color: #131730 !important;
        font-size: 1.15rem !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
    }

    .public-page.native-app .app-order-preview-backdrop {
        background: rgba(17, 23, 43, 0.5) !important;
    }

    .public-page.native-app .app-order-preview-dialog {
        width: min(92vw, 396px) !important;
        border-radius: 18px !important;
        padding: 20px 16px !important;
    }

    .public-page.native-app .app-order-preview-actions .btn,
    .public-page.native-app .app-order-preview-actions .btn-outline {
        min-height: 56px !important;
        border-radius: 12px !important;
        text-transform: uppercase !important;
        background: linear-gradient(180deg, #f9ea49 0%, #f1d915 100%) !important;
        border-color: #f1da25 !important;
        color: #131730 !important;
    }
}

/* Checkout OTP modal */
.checkout-otp-modal {
    position: fixed;
    inset: 0;
    z-index: 4800;
    display: grid;
    place-items: center;
    padding: 16px;
}

.checkout-otp-modal[hidden] {
    display: none !important;
}

.checkout-otp-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16, 22, 42, 0.46);
}

.checkout-otp-dialog {
    position: relative;
    width: min(94vw, 420px);
    border-radius: 18px;
    border: 1px solid #e5e8ef;
    background: #ffffff;
    box-shadow: 0 20px 34px rgba(14, 20, 38, 0.22);
    padding: 18px 16px 16px;
    display: grid;
    gap: 10px;
}

.checkout-otp-close {
    position: absolute;
    top: 10px;
    right: 10px;
    border: 0;
    background: transparent;
    color: #2a3048;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

.checkout-otp-brand {
    width: 62px;
    height: 62px;
    border-radius: 999px;
    background: linear-gradient(180deg, #f9ea49 0%, #f1d915 100%);
    border: 1px solid #ead84b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.checkout-otp-brand img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.checkout-otp-dialog h3 {
    margin: 2px 0 0;
    font-size: 1.5rem;
    line-height: 1.1;
    color: #131830;
}

.checkout-otp-dialog p {
    margin: 0;
    color: #70788b;
    font-size: 0.95rem;
}

.checkout-otp-dialog label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #2a3048;
}

.checkout-otp-dialog input {
    width: 100%;
    min-height: 52px;
    border: 1px solid #d8dde9;
    border-radius: 12px;
    padding: 0 14px;
    font-size: 1rem;
    color: #131830;
    background: #ffffff;
}

.checkout-otp-dialog input:focus {
    outline: none;
    border-color: #f3b63f;
    box-shadow: 0 0 0 3px rgba(243, 182, 63, 0.24);
}

.checkout-otp-code-wrap[hidden] {
    display: none !important;
}

.checkout-otp-status {
    min-height: 20px;
    font-size: 0.86rem;
    line-height: 1.35;
    color: #646d81;
}

.checkout-otp-status.is-success {
    color: #118848;
}

.checkout-otp-status.is-error {
    color: #c6402a;
}

.checkout-otp-status.is-info {
    color: #4a5675;
}

.checkout-otp-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.checkout-otp-actions .btn {
    min-height: 52px;
    border-radius: 12px;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.checkout-otp-actions .btn[hidden] {
    display: none !important;
}

.checkout-otp-actions .btn:disabled {
    opacity: 0.72;
    cursor: not-allowed;
}

@media (max-width: 1024px) {
    .public-page.native-app .checkout-otp-dialog {
        width: min(92vw, 394px);
        border-radius: 18px;
        padding: 18px 15px 14px;
    }

    .public-page.native-app .checkout-otp-actions {
        grid-template-columns: 1fr;
    }

    .public-page.native-app .checkout-otp-actions .btn {
        min-height: 56px;
        border-radius: 12px;
    }

    .public-page.native-app .checkout-otp-actions .btn.btn-primary {
        background: linear-gradient(180deg, #f9ea49 0%, #f1d915 100%);
        border-color: #f1da25;
        color: #131730;
    }
}

/* Phase 1 app rebuild overrides */
.menu-card-media {
    position: relative;
}

.menu-card-favorite-form {
    position: absolute;
    top: 12px;
    right: 12px;
    margin: 0;
    z-index: 3;
}

.menu-card-favorite-link {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    text-decoration: none;
}

.menu-card-favorite-btn {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.92);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: #ef7d1d;
    box-shadow: 0 8px 22px rgba(24, 31, 54, 0.16);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.menu-card-favorite-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(24, 31, 54, 0.18);
}

.menu-card-favorite-btn svg {
    width: 22px;
    height: 22px;
}

.menu-card-favorite-btn.is-favorite {
    background: linear-gradient(180deg, #ffecd7 0%, #ffd3bf 100%);
    border-color: #ffd3bf;
    color: #dd4e2c;
}

.app-empty-state-card,
.app-payment-status-card,
.app-support-card,
.app-support-location-card,
.app-feedback-card,
.app-voucher-card {
    display: grid;
    gap: 12px;
}

.app-empty-state-card {
    justify-items: center;
    text-align: center;
    padding: 36px 24px;
}

.app-empty-state-card img {
    width: 88px;
    height: 88px;
    object-fit: contain;
}

.app-voucher-list,
.app-feedback-list,
.app-branches-list {
    display: grid;
    gap: 18px;
}

.app-voucher-card-head,
.app-feedback-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.app-voucher-card-head strong,
.app-feedback-card-head strong {
    color: #151a30;
    font-size: 1.1rem;
}

.app-voucher-card-head p,
.app-feedback-card-head p,
.app-feedback-text,
.app-support-card p,
.app-support-location-card p {
    margin: 0;
    color: #697184;
}

.app-voucher-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: #fff3d6;
    color: #8b5115;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.app-voucher-card-foot,
.app-feedback-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.app-feedback-stars {
    display: inline-flex;
    gap: 2px;
    font-size: 1.05rem;
    color: #cdd3df;
}

.app-feedback-stars .is-active {
    color: #f5a524;
}

.app-support-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.app-support-shell {
    display: grid;
    gap: 18px;
}

.app-payment-status-card {
    justify-items: center;
    text-align: center;
    padding: 36px 24px;
}

.app-payment-status-icon {
    width: 72px;
    height: 72px;
    border-radius: 999px;
    background: linear-gradient(180deg, #f9ea49 0%, #f1d915 100%);
    color: #151a30;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 800;
}

.app-payment-status-card.status-failed .app-payment-status-icon,
.app-payment-status-card.status-cancelled .app-payment-status-icon {
    background: linear-gradient(180deg, #ffd4cc 0%, #ffb8aa 100%);
    color: #bb4a2a;
}

.app-payment-status-card.status-pending .app-payment-status-icon {
    background: linear-gradient(180deg, #fff0b6 0%, #ffe277 100%);
    color: #9a6611;
}

.app-payment-status-order {
    margin: 0;
    color: #1d2438;
    font-weight: 700;
}

.app-payment-status-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.welcome-screen {
    min-height: 100dvh;
    display: grid;
    align-items: center;
    background:
        radial-gradient(circle at top left, rgba(249, 234, 73, 0.22), transparent 38%),
        radial-gradient(circle at top right, rgba(239, 125, 29, 0.12), transparent 30%),
        #faf8f3;
}

.welcome-screen-shell {
    display: grid;
    gap: 24px;
    padding: 32px 0 40px;
}

.welcome-screen-support {
    display: flex;
    justify-content: flex-end;
}

.welcome-screen-support-btn {
    width: 58px;
    height: 58px;
    border: 1px solid #eceef3;
    border-radius: 999px;
    background: #fff;
    color: #151a30;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 28px rgba(17, 24, 39, 0.08);
}

.welcome-screen-support-btn svg {
    width: 26px;
    height: 26px;
}

.welcome-screen-brand {
    display: flex;
    justify-content: center;
}

.welcome-screen-brand img {
    width: min(220px, 54vw);
    height: auto;
    object-fit: contain;
}

.welcome-screen-copy {
    text-align: center;
    display: grid;
    gap: 10px;
}

.welcome-screen-copy h1 {
    margin: 0;
    color: #161b31;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2rem, 5vw, 3.2rem);
    line-height: 1.08;
}

.welcome-screen-copy p {
    margin: 0;
    color: #4f566d;
    font-size: 1.08rem;
}

.welcome-screen-actions {
    display: grid;
    gap: 14px;
}

.welcome-screen-primary,
.welcome-screen-secondary {
    min-height: 64px;
    border-radius: 18px;
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
}

.welcome-screen-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.welcome-screen-btn-icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.welcome-screen-btn-icon svg {
    width: 22px;
    height: 22px;
}

.welcome-screen-help {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    color: #70788b;
}

.welcome-screen-help a {
    color: #e75b25;
    font-weight: 700;
    text-decoration: none;
}

.app-location-branch-picker {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}

.app-location-branch-chip {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #e9e3d6;
    border-radius: 14px;
    background: #fff;
    text-align: left;
    display: grid;
    gap: 4px;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.app-location-branch-chip strong {
    color: #1c2336;
    font-size: 0.96rem;
}

.app-location-branch-chip span {
    color: #677084;
    font-size: 0.82rem;
}

.app-location-branch-chip.is-active {
    border-color: #f3b63f;
    box-shadow: 0 10px 24px rgba(243, 182, 63, 0.18);
    transform: translateY(-1px);
}

.checkout-voucher-link + .alert {
    margin-top: 14px;
}

.order-status-history {
    margin: 12px 0 0;
    padding: 14px 16px;
    border: 1px solid #edf0f5;
    border-radius: 14px;
    background: #fdfefe;
}

.order-status-history strong {
    display: block;
    margin-bottom: 10px;
    color: #1d2438;
}

.order-status-history-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.order-status-history-list li {
    display: grid;
    gap: 2px;
}

.order-status-history-list span {
    color: #1d2438;
    font-weight: 700;
}

.order-status-history-list small,
.order-status-history-list em {
    color: #70788b;
    font-style: normal;
}

.grid-two,
.admin-phase1-grid {
    display: grid;
    gap: 16px;
}

.favorites-grid .menu-card-description {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (min-width: 768px) {
    .grid-two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-phase1-grid {
        grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
        align-items: start;
    }
}

@media (max-width: 1024px) {
    .app-support-grid {
        grid-template-columns: 1fr;
    }

    .public-page.native-app .menu-card-favorite-form,
    .public-page.native-app .menu-card-favorite-link {
        top: 10px;
        right: 10px;
    }

    .public-page.native-app .menu-card-favorite-btn {
        width: 40px;
        height: 40px;
    }

    body.public-page.native-app.app-drawer-open::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(10, 16, 31, 0.42) !important;
        z-index: 6100 !important;
        pointer-events: auto !important;
    }

    body.public-page.native-app.app-drawer-open .site-header {
        z-index: 6200 !important;
    }

    body.public-page.native-app .site-header .main-navigation {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: min(86vw, 560px) !important;
        max-width: 560px !important;
        height: 100dvh !important;
        transform: translateX(-104%);
        transition: transform 0.24s ease;
        background: #fff !important;
        z-index: 6300 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        pointer-events: auto !important;
        box-shadow: none;
    }

    body.public-page.native-app .site-header .main-navigation.is-open {
        transform: translateX(0);
        box-shadow: 16px 0 40px rgba(12, 18, 34, 0.18);
    }

    body.public-page.native-app .site-header .main-navigation .main-navigation-list {
        display: none !important;
    }

    body.public-page.native-app .site-header .main-navigation .native-drawer-layout,
    body.public-page.native-app .site-header .main-navigation .native-drawer-menu,
    body.public-page.native-app .site-header .main-navigation .native-drawer-menu > li,
    body.public-page.native-app .site-header .main-navigation .native-drawer-menu > li > a,
    body.public-page.native-app .site-header .main-navigation .native-drawer-logout-form > button,
    body.public-page.native-app .site-header .main-navigation .native-drawer-contact-pill {
        pointer-events: auto !important;
    }

    body.public-page.native-app .site-header .main-navigation .native-drawer-contact-pill {
        width: calc(100% - 32px) !important;
        max-width: calc(100% - 32px) !important;
    }

    body.public-page.native-app.app-drawer-open .nav-toggle:not(.is-back) {
        opacity: 0 !important;
        pointer-events: none !important;
    }

    body.public-page.native-app .native-app-bottom-nav {
        z-index: 5000 !important;
    }
}