:root {
    --orange: #F45D01;
    --orange-dark: #D94E00;
    --orange-light: #FFF0E6;
    --orange-glow: rgba(244, 93, 1, 0.12);
    --white: #FFFFFF;
    --gray-50: #FAFAFA;
    --gray-100: #F5F3F0;
    --gray-200: #EBE9E6;
    --gray-300: #D1CDC7;
    --gray-600: #6B6863;
    --gray-800: #3B3834;
    --dark: #1E1B18;
    --success: #22C55E;
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.02);
    --shadow-md: 0 8px 24px rgba(0,0,0,0.06);
    --shadow-lg: 0 20px 32px -12px rgba(0,0,0,0.1);
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 28px;
}

html, body {
    overscroll-behavior-x: none;
    touch-action: pan-y;
}

/* ===== APP LAYOUT ===== */
/* This is the element that scrolls — body is overflow:hidden — so its height is
   the height of the app.

   100dvh after 100vh, not instead of it. On a phone, 100vh is the viewport with
   the browser's address bar HIDDEN, which is not the height on screen while the
   bar is showing: the last 60-90px of the app sits underneath it, which is where
   the checkout button lives. dvh is that measurement done honestly, and the
   plain 100vh above it is what a browser too old to know the unit falls back to. */
.app-wrapper {
    display: flex;
    height: 100vh;
    height: 100dvh;
    position: relative;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}


.sidebar {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: #ffffff;
    color: #333333;
    position: fixed;
    left: 0;
    top: 0;
    width: 280px;
    z-index: 1000;
    transition: transform 0.3s ease;
    box-shadow: 2px 0 10px rgba(0,0,0,0.08);
    border-right: 1px solid #f0f0f0;
}

.sidebar-header {
    padding: 24px 20px 20px;
    border-bottom: 1px solid #f5f0eb;
    flex-shrink: 0;
    background: linear-gradient(135deg, #fffaf5 0%, #ffffff 100%);
}

    .sidebar-header h2 {
        font-size: 20px;
        margin: 0 0 6px 0;
        color: #2d2d2d;
        font-weight: 600;
    }

        .sidebar-header h2 i {
            color: #F45D01;
            margin-right: 10px;
        }

    .sidebar-header p {
        margin: 0;
        font-size: 13px;
        color: #888888;
        font-weight: 400;
    }

.nav-items {
    flex: 1;
    padding: 16px 0;
    overflow-y: auto;
    background: #ffffff;
}

.nav-item {
    padding: 14px 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
    color: #555555;
    font-weight: 500;
    font-size: 15px;
    margin: 2px 12px;
    border-radius: 10px;
}

    .nav-item:hover {
        background: #fff5ed;
        color: #F45D01;
    }

    .nav-item.active {
        background: #fff0e6;
        border-left-color: #F45D01;
        color: #F45D01;
        font-weight: 600;
    }

    .nav-item i {
        width: 22px;
        color: #F45D01;
        font-size: 18px;
    }

.session-timer {
    padding: 8px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #555555;
    transition: all 0.3s ease;
}

    .session-timer i {
        color: #F45D01;
        font-size: 16px;
    }

    .session-timer span {
        color: #444444;
    }

    .session-timer.session-warning {
        background: #fff5ed;
        border: 1px solid #F45D01;
        animation: pulse-warning 1.5s ease-in-out infinite;
    }

.session-warning-text {
    color: #F45D01;
    font-weight: 600;
    font-size: 11px;
    margin-left: auto;
    white-space: nowrap;
    background: #fff0e6;
    padding: 2px 10px;
    border-radius: 12px;
}

@keyframes pulse-warning {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.01);
    }
}

@media (max-width: 500px) {

    .session-timer {
        font-size: 10px;
        padding: 8px;
    }

        .session-timer i {
            font-size: 8px;
        }
}

/* Mobile responsive */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        width: 290px;
        box-shadow: 2px 0 20px rgba(0,0,0,0.1);
    }

        .sidebar.open {
            transform: translateX(0);
        }

    .sidebar-header h2 {
        font-size: 18px;
    }

    .session-timer {
        font-size: 12px;
        padding: 10px;
    }

        .session-timer i {
            font-size: 10px;
        }

    .nav-item {
        padding: 12px 20px;
        font-size: 14px;
        margin: 2px 8px;
    }
}

.menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 999;
    display: none;
}

    .menu-overlay.open {
        display: block;
    }

/* min-height, not height.

   The header below is sticky, and a sticky element only stays pinned while its
   CONTAINING BLOCK is still on screen. Fixed at 100vh, this box ended one
   screenful down and the header would have unpinned there and scrolled away.
   Growing with its content is what lets it stay up for the whole page, and it
   behaves identically when the content is short. */
.main-content {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;

    /* The pull-to-refresh badge is positioned against this box. */
    position: relative;
}

/* ===== PULL TO REFRESH =====
   Parked at the top of the content and translated down by site.js as the finger
   moves. z-index below the header's 300, so it is HIDDEN BEHIND the header at
   rest and emerges from under it — which is what tells the customer the gesture
   has been recognised before they have finished making it. */
.pull-refresh {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 299;
    display: flex;
    justify-content: center;
    opacity: 0;

    /* Feedback, never a target: a tap must reach the header behind it. */
    pointer-events: none;
}

.pull-refresh-badge {
    width: 44px;
    height: 44px;
    margin-top: 6px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--orange);
    font-size: 17px;
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
    transition: background .15s ease, color .15s ease;
}

/* Past the trigger — released now and it reloads. The colour flip is the whole
   message: there is no room for words at this size and no time to read them. */
.pull-refresh.ready .pull-refresh-badge {
    background: var(--orange);
    color: #fff;
}

.pull-refresh.spinning .pull-refresh-badge i {
    animation: pullSpin .8s linear infinite;
}

@keyframes pullSpin {
    to {
        transform: rotate(360deg);
    }
}

/* STICKY, NOT FIXED — and that one word is the whole responsive fix.

   Fixed took the header out of the layout, so every screen behind it started at
   the top of the viewport, underneath it. The content was pushed clear by a
   hand-tuned `margin-top: 8vh` on the section below, and a percentage of the
   VIEWPORT HEIGHT cannot express the height of a header: 8vh is 67px on this
   390x844 phone against a header of about 78, so the title sat slightly under
   it; it is 30px on a phone held sideways, where the overlap is total; and 86px
   on a desktop, where it is just a gap.

   Sticky keeps its place in the flow, so the space is reserved exactly — at any
   height, in any orientation, whatever the store's name wraps to — and it still
   pins while scrolling, which is what fixed was there for. */
.mobile-header {
    background: var(--white);
    padding: 16px;

    /* Notched phones. The status bar overlays the top of the viewport, and the
       search panel already allowed for it; the header did not, so the store's
       name sat under the clock. max(), so a device without a notch is unchanged. */
    padding-top: max(env(safe-area-inset-top, 16px), 16px);

    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    gap: 10px;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 300;
    flex-shrink: 0;
}

.mobile-search-icon-btn {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--gray-800);
    cursor: pointer;
    padding: 8px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, transform 0.15s;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

    .mobile-search-icon-btn:hover {
        background: var(--gray-100);
    }

    .mobile-search-icon-btn:active {
        background: var(--gray-200);
        transform: scale(0.92);
    }

.hamburger-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--orange);
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

    .hamburger-btn:hover {
        background: var(--gray-100);
    }

.mobile-logo {
    font-weight: 800;
    font-size: 18px;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cart-mobile-badge {
    background: var(--orange);
    color: white;
    border-radius: 30px;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 700;
    border: none;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

    .cart-mobile-badge:hover {
        background: var(--orange-dark);
        transform: scale(1.05);
    }

.cart-icon-active {
    display: inline-block !important;
    transform-origin: 50% 100%;
    animation: cartWiggle 1.8s ease-in-out infinite;
}

.cart-count-pulse {
    display: inline-block !important;
    animation: cartCountPulse 1.8s ease-in-out infinite, cartBadgeGlow 1.8s ease-in-out infinite;
    border-radius: 50%;
}

@keyframes cartWiggle {
    0%, 100% {
        transform: rotate(0deg) scale(1);
    }

    15% {
        transform: rotate(-18deg) scale(1.15);
    }

    30% {
        transform: rotate(15deg) scale(1.15);
    }

    45% {
        transform: rotate(-12deg) scale(1.1);
    }

    60% {
        transform: rotate(10deg) scale(1.1);
    }

    75% {
        transform: rotate(-6deg) scale(1.05);
    }
}

@keyframes cartCountPulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }
}

@keyframes cartBadgeGlow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 87, 34, 0.6);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(255, 87, 34, 0);
    }
}

.content-container {
    padding: 24px 20px 100px 20px;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.tab-pane {
    display: none;
}

    .tab-pane.active {
        display: block;
    }

/* Promo Banner Carousel */
.promo-carousel-wrap {
    position: relative;
    width: calc(100% - 2px);
    margin-top: 30px;
    margin: 80px auto 20px;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(0,0,0,.12);
    background: #fff;
}

.promo-carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x;
}

    .promo-carousel::-webkit-scrollbar {
        display: none;
    }

.promo-slide {
    position: relative;
    flex: 0 0 100%;
    scroll-snap-align: start;
    overflow: hidden;
    height: 180px;
    background: var(--orange-light);
}

.promo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.promo-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
}

.promo-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: rgba(244, 93, 1, 0.3);
    transition: width 0.3s, border-radius 0.3s, background 0.3s;
    cursor: pointer;
}

    .promo-dot.active {
        width: 20px;
        border-radius: 4px;
        background: var(--orange);
    }

@media (min-width: 768px) and (max-width: 1024px) {
    .promo-slide {
        height: 280px;
    }
}

.menu-scroll {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding: 12px 10px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
}

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

/* Space above and below that scales with the SCREEN'S WIDTH rather than its
   height — which is the axis that actually says how big the device is. clamp
   gives a 20px gap on a small phone, grows smoothly through tablets, and stops
   at 40px so a wide desktop does not push the menu below the fold. */
.section-header {
    margin-top: clamp(20px, 5vw, 40px);
    margin-bottom: clamp(20px, 4vw, 32px);
    position: relative;
}

.section-title-wrapper {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
}

.section-title {
    font-size: 28px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--orange) 0%, var(--orange-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

.section-subtitle {
    font-size: 14px;
    color: var(--gray-600);
    margin: 4px 0 0 0;
}

.section-decoration {
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--orange), var(--orange-light));
    border-radius: 3px;
}

.menuDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 10px;
    padding: 10px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

    .menuDiv.active {
        border-bottom: 2px solid var(--orange);
        color: var(--orange);
    }

    .menuDiv:hover .main-menu-img {
        transform: scale(1.1);
    }

.main-menu-img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #ddd;
    transition: border 0.3s ease-in-out;
}

.group-header {
    margin: 48px 0 32px 0;
    text-align: center;
    position: relative;
}

.group-title-wrapper {
    position: relative;
}

.group-title {
    font-size: 26px;
    font-weight: 800;
    color: var(--gray-800);
    margin: 0 0 8px 0;
}

.group-subtitle {
    font-size: 14px;
    color: var(--gray-600);
    margin: 0;
}

.group-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 18px;
}

.group-card {
    position: relative;
    width: 220px;
    height: 220px;
    overflow: hidden;
    border-radius: 16px;
    cursor: pointer;
    transition: all .25s ease;
}

    .group-card:hover {
        box-shadow: 0 8px 20px rgba(0,0,0,.15);
    }

.group-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.group-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 18px 12px;
    background: linear-gradient( to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.45) 40%, transparent 100% );
}

    .group-overlay span {
        position: relative;
        color: #fff;
        font-weight: bold;
        font-size: 18px;
        text-align: center;
        padding: 5px 10px;
        background: rgba(0, 0, 0, 0.7);
        border-radius: 8px;
        letter-spacing: 0.5px;
    }

/* ===== CART PANEL ===== */

.order-panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1099;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
    backdrop-filter: blur(2px);
}

    .order-panel-overlay.open {
        opacity: 1;
        pointer-events: auto;
    }

.order-panel {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    max-width: 400px;
    background: #FAFAF8;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0, 0.15, 1);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--gray-200);
    box-shadow: -12px 0 40px rgba(0,0,0,0.10);
}

    .order-panel.open {
        transform: translateX(0);
    }

.order-panel-header {
    padding: 20px 20px 16px;
    background: var(--white);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--gray-200);
    position: relative;
}

    .order-panel-header::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, var(--orange) 0%, transparent 60%);
    }

.cart-title-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .cart-title-wrapper h2 {
        font-size: 18px;
        font-weight: 800;
        color: var(--gray-800);
        margin: 0;
        letter-spacing: -0.3px;
    }

.cart-count-badge {
    background: var(--orange);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 99px;
    letter-spacing: 0.2px;
}

.close-order-panel {
    background: var(--gray-100);
    border: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--gray-600);
    transition: background 0.2s, color 0.2s, transform 0.2s;
    flex-shrink: 0;
}

    .close-order-panel:hover {
        background: #fde8e8;
        color: #c0392b;
        transform: rotate(90deg);
    }

.order-items-list {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    scroll-behavior: smooth;
}

    .order-items-list::-webkit-scrollbar {
        width: 4px;
    }

    .order-items-list::-webkit-scrollbar-track {
        background: transparent;
    }

    .order-items-list::-webkit-scrollbar-thumb {
        background: var(--gray-200);
        border-radius: 4px;
    }

/* Empty state */
.cart-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 32px;
    text-align: center;
    animation: cartEmptyIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes cartEmptyIn {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.cart-empty-icon {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FFF0E6 0%, #FFE4CC 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    position: relative;
}

    .cart-empty-icon::before {
        content: '';
        position: absolute;
        inset: -6px;
        border-radius: 50%;
        border: 2px dashed rgba(244,93,1,0.18);
    }

    .cart-empty-icon i {
        font-size: 38px;
        color: var(--orange);
        opacity: 0.85;
    }

.cart-empty-state p {
    font-size: 16px;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0 0 8px;
    letter-spacing: -0.2px;
}

.cart-empty-state span {
    font-size: 13px;
    color: var(--gray-600);
    line-height: 1.5;
    max-width: 200px;
    display: block;
}

/* Cart item card */
.order-item {
    display: flex;
    gap: 12px;
    padding: 14px;
    align-items: flex-start;
    background: var(--white);
    border-radius: 16px;
    margin-bottom: 10px;
    border: 1px solid var(--gray-200);
    transition: border-color 0.2s, box-shadow 0.2s;
    animation: cartItemIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

    .order-item:hover {
        border-color: rgba(244,93,1,0.2);
        box-shadow: 0 4px 16px rgba(244,93,1,0.07);
    }

@keyframes cartItemIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.order-group-img {
    width: 58px;
    height: 58px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
}

.order-group-img--fallback {
    background: linear-gradient(135deg, #FFF0E6 0%, #FFE4CC 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--orange);
    font-size: 22px;
    flex-shrink: 0;
    border-radius: 12px;
}

.order-item-info {
    flex: 1;
    min-width: 0;
}

.cart-item-row1 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 2px;
}

.order-item-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--gray-800);
    line-height: 1.3;
    flex: 1;
    min-width: 0;
}

.cart-item-total {
    font-size: 14px;
    font-weight: 800;
    color: var(--orange);
    white-space: nowrap;
    flex-shrink: 0;
}

.cart-item-base-price {
    font-size: 11.5px;
    color: var(--gray-600);
    margin-bottom: 6px;
}

.cart-addons {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}

.cart-addon-row {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #FFF4EE;
    border: 1px solid rgba(244,93,1,0.15);
    color: #C94D00;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}



.cart-addon-price {
    font-size: 10.5px;
    color: #C94D00;
    font-weight: 500;
    opacity: 0.8;
}

.cart-item-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--gray-100);
}

.cart-action-btns {
    display: flex;
    gap: 5px;
    align-items: center;
}

.cart-edit-btn {
    background: var(--orange-light);
    color: var(--orange);
    border: 1px solid rgba(244,93,1,0.15);
    border-radius: 10px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
}

    .cart-edit-btn:hover {
        background: var(--orange);
        color: #fff;
        border-color: var(--orange);
        transform: scale(1.02);
    }

.cart-remove-btn {
    background: var(--gray-100);
    color: var(--gray-600);
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
}

    .cart-remove-btn:hover {
        background: #fde8e8;
        color: #c0392b;
        border-color: rgba(192,57,43,0.25);
        transform: scale(1.02);
    }

.cart-qty-stepper {
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--gray-100);
    border-radius: 10px;
    padding: 2px;
    height: 30px;
    flex-shrink: 0;
}

.cart-qty-val {
    font-size: 13px;
    font-weight: 700;
    color: var(--gray-800);
    min-width: 22px;
    text-align: center;
}

.qty-btn {
    background: transparent;
    border: none;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 700;
    font-size: 16px;
    color: var(--gray-800);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
    line-height: 1;
}

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

.order-footer {
    padding: 18px 20px 20px;
    background: var(--white);
    border-top: 1px solid var(--gray-200);
    position: relative;
    z-index: 2;
}

.total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 13.5px;
    color: var(--gray-600);
}

    .total-row span:last-child {
        font-weight: 600;
        color: var(--gray-800);
    }

.grand-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    font-weight: 800;
    color: var(--gray-800);
    border-top: 1px solid var(--gray-200);
    padding-top: 12px;
    margin-top: 8px;
    margin-bottom: 0;
}

    .grand-total span:last-child {
        color: var(--orange);
    }

.cart-actions-row {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

.add-more-btn {
    flex: 0 0 auto;
    background: transparent;
    border: 1.5px solid var(--orange);
    padding: 15px 16px;
    border-radius: 14px;
    color: var(--orange);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s, color 0.2s, transform 0.15s;
    white-space: nowrap;
}

    .add-more-btn:hover {
        background: var(--orange);
        color: white;
    }

    .add-more-btn:active {
        transform: scale(0.97);
    }

.checkout-action-btn {
    flex: 1;
    width: auto;
    background: var(--orange);
    border: none;
    padding: 15px;
    border-radius: 14px;
    color: white;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 4px 16px rgba(244,93,1,0.30);
    letter-spacing: 0.1px;
    position: relative;
    overflow: hidden;
}

    .checkout-action-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 60%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
        transform: skewX(-20deg);
        transition: left 0.5s ease;
    }

    .checkout-action-btn:hover:not(:disabled)::before {
        left: 160%;
    }

    .checkout-action-btn:hover:not(:disabled) {
        background: var(--orange-dark);
        transform: translateY(-1px);
        box-shadow: 0 8px 24px rgba(244,93,1,0.35);
    }

    .checkout-action-btn:active:not(:disabled) {
        transform: translateY(0) scale(0.98);
        box-shadow: 0 2px 8px rgba(244,93,1,0.25);
    }

    .checkout-action-btn:disabled {
        opacity: 0.7;
        cursor: not-allowed;
        box-shadow: none;
    }

    .checkout-action-btn.loading {
        background: var(--orange-dark);
    }

@keyframes fadeUp {
    from {
        opacity: 0;
        bottom: 60px;
    }

    to {
        opacity: 1;
        bottom: 100px;
    }
}

/* ITEMS */
.items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.item-card {
    background: var(--white);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    border: 1px solid var(--gray-200);
    cursor: pointer;
}

    .item-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0,0,0,0.1);
        border-color: var(--orange);
    }

.item-image-wrapper {
    position: relative;
    height: 160px;
    overflow: hidden;
    background: var(--gray-100);
}

.item-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.item-card:hover .item-img {
    transform: scale(1.05);
}

.item-info {
    padding: 12px;
}

.item-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0 0 6px;
    line-height: 1.3;
    min-height: 42px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.item-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: auto;
}

.item-price {
    font-size: 18px;
    font-weight: 800;
    color: var(--orange);
}

.add-to-cart-btn {
    background: var(--orange-light);
    border: 1px solid rgba(244,93,1,0.15);
    padding: 8px 16px;
    border-radius: 10px;
    color: var(--orange);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

    .add-to-cart-btn:hover {
        background: var(--orange);
        color: white;
        border-color: var(--orange);
        transform: scale(1.02);
    }

    .add-to-cart-btn i {
        font-size: 12px;
    }

.item-header-section {
    margin: 40px 0 24px 0;
    position: relative;
    scroll-margin-top: 110px;
}

.item-header-wrapper {
    position: relative;
    display: inline-block;
}

.item-header-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--gray-800);
    margin: 0;
    padding-bottom: 12px;
    position: relative;
    display: inline-block;
}

    .item-header-title::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 60px;
        height: 3px;
        background: linear-gradient(90deg, var(--orange), var(--orange-light));
        border-radius: 3px;
    }

    .item-header-title::before {
        content: '🍽️';
        margin-right: 10px;
        font-size: 22px;
    }

.floating-menu-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--dark);
    color: white;
    border: none;
    border-radius: 50px;
    padding: 12px 22px;
    font-weight: 700;
    font-size: 15px;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    z-index: 200;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
    animation: fadeUp 0.3s ease;
}

    .floating-menu-btn:hover {
        transform: scale(1.05);
        background: #2a2724;
    }

.menu-list-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1200;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.menu-list-drawer {
    background: var(--white);
    width: 100%;
    max-width: 500px;
    max-height: 70vh;
    border-radius: 20px 20px 0 0;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

.menu-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    border-bottom: 1px solid var(--gray-200);
}

    .menu-list-header h4 {
        margin: 0;
        font-size: 18px;
        font-weight: 800;
        color: var(--gray-800);
    }

.menu-list-close {
    background: var(--gray-100);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

    .menu-list-close:hover {
        background: var(--gray-200);
    }

.menu-list-items {
    overflow-y: auto;
    padding: 8px 0;
}

.menu-list-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    cursor: pointer;
    transition: background 0.2s;
    font-weight: 600;
    color: var(--gray-800);
}

    .menu-list-item:hover {
        background: var(--gray-50);
    }

    .menu-list-item.active {
        color: var(--orange);
        background: var(--orange-light);
    }

.menu-list-img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--gray-200);
}

.menu-list-check {
    margin-left: auto;
    color: var(--orange);
    font-size: 16px;
}

/* Variation Selector Modal */
.variation-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    animation: fadeIn 0.2s ease;
}

.variation-modal-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-height: 85vh;
}

.variation-mobile-close {
    display: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: none;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    font-size: 20px;
    color: var(--gray-600);
    cursor: pointer;
    margin-bottom: 10px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    z-index: 2001;
}

    .variation-mobile-close:hover {
        background: var(--gray-100);
    }

.variation-modal {
    background: #fff;
    border-radius: 20px;
    width: 90%;
    max-width: 480px;
    min-width: 480px;
    height: auto;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 48px rgba(0,0,0,0.2);
    overflow: hidden;
    animation: modalPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalPop {
    from {
        opacity: 0;
        transform: scale(0.94) translateY(20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.variation-header {
    background: var(--orange);
    color: white;
    padding: 0;
    flex-shrink: 0;
}

.variation-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 18px;
}

    .variation-header-content h3 {
        margin: 0;
        font-size: 18px;
        font-weight: 700;
    }

        .variation-header-content h3 i {
            margin-right: 8px;
        }

.variation-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    flex-shrink: 0;
}

    .variation-close:hover {
        background: rgba(255, 255, 255, 0.35);
    }

.variation-body {
    overflow-y: auto;
    max-height: 50vh;
    padding: 16px 20px 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.variation-card {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: box-shadow 0.2s, border-color 0.2s;
}

    .variation-card:hover {
        box-shadow: 0 4px 16px rgba(0,0,0,0.08);
        border-color: rgba(244,93,1,0.15);
    }

.variation-card-row--mods {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.variation-card-row--controls {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--gray-100);
}

.variation-card-mods {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.variation-mod-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-700);
    white-space: nowrap;
    line-height: 1.4;
}

    .variation-mod-pill .pill-price {
        color: var(--gray-500);
        font-size: 11px;
    }

.variation-card-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.variation-card-edit,
.variation-card-remove {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    padding: 6px 10px;
    border-radius: 8px;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-400);
}

    .variation-card-edit:hover {
        color: var(--orange);
        background: rgba(244,93,1,0.08);
    }

    .variation-card-remove:hover {
        color: #dc3545;
        background: rgba(220,53,69,0.08);
    }

.variation-card-qty {
    display: flex;
    align-items: center;
    gap: 2px;
    background: #fff;
    border: 1px solid var(--orange);
    border-radius: 10px;
    padding: 2px;
    height: 30px;
    flex-shrink: 0;
}

    .variation-card-qty span {
        min-width: 22px;
        text-align: center;
        font-size: 13px;
        font-weight: 700;
        color: var(--gray-800);
    }

.variation-card-total {
    font-size: 17px;
    font-weight: 800;
    color: var(--orange);
    margin-left: auto;
    flex-shrink: 0;
}

.variation-footer {
    padding: 14px 20px 18px;
    border-top: 1px solid var(--gray-200);
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    background: #fff;
    border-radius: 0 0 20px 20px;
}

.variation-add-new {
    width: 100%;
    background: #fff;
    border: 1.5px dashed var(--orange);
    color: var(--orange);
    padding: 13px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}

    .variation-add-new:hover {
        background: var(--orange-light);
        border-style: solid;
    }

@media (max-width: 767px) {
    .variation-overlay {
        align-items: flex-end;
    }

    .variation-modal-wrap {
        width: 100%;
        max-height: 85dvh;
    }

    .variation-mobile-close {
        display: flex;
    }

    .variation-close {
        display: none !important;
    }

    .variation-modal {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        border-radius: 20px 20px 0 0;
        max-height: 85dvh;
        animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    @keyframes slideUp {
        from {
            transform: translateY(100%);
        }

        to {
            transform: translateY(0);
        }
    }

    .variation-header {
        border-radius: 20px 20px 0 0;
    }

    .variation-header-content {
        padding: 16px 16px 16px;
    }

    .variation-body {
        padding: 12px 16px 6px;
        max-height: 65dvh;
    }

    .variation-footer {
        padding: 12px 16px 18px;
        border-radius: 0;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Search */
.search-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 300;
    margin: 0;
    padding: 12px 16px;
    padding-top: max(env(safe-area-inset-top, 12px), 12px);
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    box-shadow: 0 4px 24px rgba(0,0,0,0.10);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, visibility 0.35s;
}

    .search-container.panel-open {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        border-bottom: none;
    }

        .search-container.panel-open .search-header-row {
            display: flex;
            align-items: center;
            gap: 0;
        }

        .search-container.panel-open .search-box {
            flex: 1;
            display: flex;
            align-items: center;
            position: relative;
        }

        .search-container.panel-open .search-input {
            flex: 1;
            width: auto;
            height: 44px;
            font-size: 16px;
            padding: 0 48px 0 44px;
        }

        .search-container.panel-open .search-icon {
            left: 16px;
        }

        .search-container.panel-open .mobile-search-cancel {
            flex-shrink: 0;
            background: var(--gray-100);
            border: none;
            color: var(--gray-600);
            font-size: 14px;
            cursor: pointer;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 8px;
            transition: background 0.15s, transform 0.15s;
        }

            .search-container.panel-open .mobile-search-cancel:hover {
                background: var(--gray-200);
            }

            .search-container.panel-open .mobile-search-cancel:active {
                background: var(--gray-300);
                transform: scale(0.92);
            }

        .search-container.panel-open .search-dropdown {
            position: absolute;
            left: 0;
            right: 0;
            width: auto;
            top: 100%;
            max-width: none;
            max-height: 70vh;
            border-radius: 0 0 18px 18px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.08);
            border: none;
            border-top: 1px solid #f0f0f0;
        }

.search-box {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: 16px;
    color: #bbb;
    font-size: 16px;
    pointer-events: none;
    z-index: 1;
    transition: color 0.25s;
}

.search-input:focus ~ .search-icon {
    color: var(--orange);
}

.search-input {
    width: 100%;
    height: 50px;
    border-radius: 14px;
    border: 1.5px solid #e8e8e8;
    padding: 0 48px 0 46px;
    font-size: 15px;
    background: white;
    transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
    outline: none;
}

    .search-input::placeholder {
        color: #bbb;
        font-weight: 400;
    }

    .search-input:focus {
        border-color: var(--orange);
        background: #fffdfa;
        box-shadow: 0 0 0 3px var(--orange-glow);
    }

.search-spotlight-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 150;
    animation: overlayFadeIn 0.25s ease;
    cursor: pointer;
    touch-action: manipulation;
}

@keyframes overlayFadeIn {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
        -webkit-backdrop-filter: blur(0px);
    }

    to {
        opacity: 1;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }
}

.search-dropdown {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 100%;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #f0f0f0;
    box-shadow: 0 8px 32px rgba(244, 93, 1, 0.10);
    max-height: 420px;
    overflow-y: auto;
    z-index: 500;
    overscroll-behavior: contain;
    animation: searchDropIn 0.2s ease;
}

@keyframes searchDropIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.search-suggestions-header {
    padding: 12px 16px 6px;
    font-size: 12px;
    color: #999;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.search-recent-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 16px 12px;
}

.search-chip {
    background: var(--orange-light);
    border: none;
    color: var(--orange);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
}

    .search-chip:hover {
        background: var(--orange);
        color: #fff;
        transform: scale(1.04);
    }

.search-empty-hint {
    text-align: center;
    padding: 28px 20px;
    color: #ccc;
}

    .search-empty-hint i {
        font-size: 28px;
        display: block;
        margin-bottom: 8px;
        color: #e0e0e0;
    }

    .search-empty-hint p {
        font-size: 14px;
        margin: 0;
        color: #bbb;
        line-height: 1.5;
    }

.search-results-header {
    padding: 10px 16px 6px;
    font-size: 12px;
    color: #888;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    border-bottom: 1px solid #f5f5f5;
}

.search-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid #f5f5f5;
    transition: background 0.12s;
    animation: searchItemIn 0.25s ease both;
}

@keyframes searchItemIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.search-item:last-child {
    border-bottom: none;
}

.search-item:hover {
    background: #fff8f4;
}

.search-item-img {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--orange-light);
}

.search-item-info {
    flex: 1;
    min-width: 0;
}

.search-item-name {
    font-size: 14px;
    font-weight: 600;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-item-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
    flex-wrap: wrap;
}

.search-item-category {
    font-size: 11px;
    color: #999;
    background: #f5f5f5;
    padding: 1px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

.search-item-price {
    font-size: 13px;
    color: var(--orange);
    font-weight: 700;
}

.search-item-sep {
    color: #ddd;
    font-size: 10px;
}

.search-sku-badge {
    font-size: 10px;
    color: #999;
    background: #f0f0f0;
    padding: 1px 7px;
    border-radius: 3px;
    white-space: nowrap;
    font-weight: 600;
}

.search-item-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.search-add-btn {
    flex-shrink: 0;
    background: #fff;
    border: 1.5px solid var(--orange);
    color: var(--orange);
    border-radius: 8px;
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, transform 0.12s;
}

    .search-add-btn:hover {
        background: var(--orange);
        color: #fff;
    }

    .search-add-btn:active {
        transform: scale(0.92);
    }

.search-in-cart-badge {
    flex-shrink: 0;
    background: #e8f5e9;
    color: #388e3c;
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 600;
    animation: badgePop 0.3s ease;
}

@keyframes badgePop {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

    50% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.search-empty {
    text-align: center;
    padding: 40px 16px;
    color: #bbb;
}

    .search-empty i {
        font-size: 40px;
        display: block;
        margin-bottom: 10px;
        color: #e8e0d8;
        animation: emptyBounce 0.6s ease;
    }

@keyframes emptyBounce {
    0% {
        transform: scale(0.6);
        opacity: 0;
    }

    60% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.search-empty p {
    font-size: 14px;
    margin: 0;
    color: #bbb;
}

.search-skeleton-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid #f5f5f5;
}

.search-skeleton-img {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    background: linear-gradient(90deg, #f7f0e8 25%, #f0e8de 50%, #f7f0e8 75%);
    background-size: 200% 100%;
    animation: shimmer 1.2s infinite;
    flex-shrink: 0;
}

.search-skeleton-lines {
    flex: 1;
}

.search-skeleton-line {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, #f7f0e8 25%, #f0e8de 50%, #f7f0e8 75%);
    background-size: 200% 100%;
    animation: shimmer 1.2s infinite;
    margin-bottom: 8px;
}

    .search-skeleton-line:last-child {
        width: 45%;
        margin-bottom: 0;
    }

.search-skeleton-action {
    width: 38px;
    height: 28px;
    border-radius: 8px;
    background: linear-gradient(90deg, #f7f0e8 25%, #f0e8de 50%, #f7f0e8 75%);
    background-size: 200% 100%;
    animation: shimmer 1.2s infinite;
    flex-shrink: 0;
}

@keyframes shimmer {
    from {
        background-position: 200% 0;
    }

    to {
        background-position: -200% 0;
    }
}

.search-error {
    text-align: center;
    padding: 28px 16px;
}

    .search-error i {
        font-size: 28px;
        display: block;
        margin-bottom: 8px;
        color: #e0a800;
    }

    .search-error p {
        font-size: 14px;
        color: #999;
        margin: 0 0 12px;
    }

.search-retry-btn {
    background: var(--orange-light);
    border: none;
    color: var(--orange);
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

    .search-retry-btn:hover {
        background: var(--orange);
        color: #fff;
    }

/* Out of Stock styling for item cards */
.item-card.out-of-stock {
    position: relative;
    opacity: 0.7;
    pointer-events: none; /* Prevents all click interactions */
    overflow: hidden;
}

    .item-card.out-of-stock .item-image-wrapper {
        cursor: default;
    }

/* Full card overlay for out of stock */
.out-of-stock-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    pointer-events: none; /* Prevents interaction with overlay */
}

.out-of-stock-badge {
    background: rgba(255, 0, 0, 0.9);
    color: white;
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border: 2px solid white;
    width: 90%;
}

.out-of-stock-btn {
    background: #cccccc !important;
    color: #666666 !important;
    cursor: not-allowed !important;
    opacity: 0.7;
}

    .out-of-stock-btn:hover {
        background: #cccccc !important;
        transform: none !important;
    }

/* Search results out of stock */
.search-item.out-of-stock {
    opacity: 1;
    background: #f5f5f5;
    cursor: not-allowed;
}

    .search-item.out-of-stock .search-item-name,
    .search-item.out-of-stock .search-item-price,
    .search-item.out-of-stock .search-item-category,
    .search-item.out-of-stock .search-item-meta {
        color: #aaa;
    }

    .search-item.out-of-stock .search-item-img {
        filter: grayscale(1);
        opacity: 0.6;
    }

    .search-item.out-of-stock:hover {
        background: #f5f5f5;
    }

.search-out-of-stock-tag {
    color: #dc3545;
    font-size: 11px;
    font-weight: 600;
    margin-left: 8px;
    text-transform: uppercase;
}

.search-out-of-stock-badge {
    background: #dc3545;
    color: white;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Ensure quantity buttons remain clickable when item is in stock */
.item-card:not(.out-of-stock) .qty-btn {
    pointer-events: auto;
}


/* ===== MOBILE (up to 767px) ===== */
@media (max-width: 767px) {



    .content-container {
        padding: 16px 16px 100px 16px;
        max-width: 100%;
    }

    .mobile-header {
        padding: 12px 16px;
    }

    .hamburger-btn {
        width: 36px;
        height: 36px;
        font-size: 20px;
    }

    .mobile-logo {
        font-size: 14px;
    }

    .cart-mobile-badge {
        padding: 5px 12px;
        font-size: 13px;
    }

    .section-header {
        margin-bottom: 20px;
    }

    .section-title-wrapper {
        gap: 10px;
    }

    .section-title {
        font-size: 20px;
    }

    .section-subtitle {
        font-size: 11px;
        margin-top: 4px;
    }

    .menu-scroll {
        padding: 8px 0 16px 0;
        gap: 12px;
    }

    .menuDiv {
        padding: 6px;
        font-size: 11px;
        min-width: 80px;
        gap: 6px;
    }

    .main-menu-img {
        width: 70px;
        height: 70px;
        border: 2px solid #ddd;
    }

    .group-header {
        margin: 28px 0 20px 0;
    }

    .group-title {
        font-size: 18px;
        margin-bottom: 4px;
    }

    .group-subtitle {
        font-size: 11px;
    }

    .group-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 10px;
    }

    .group-card {
        width: 100%;
        aspect-ratio: 1;
        height: 120px;
        border-radius: 20px;
    }

    .group-overlay {
        padding: 12px 8px;
    }

        .group-overlay span {
            font-size: 11px;
            padding: 4px;
        }

    /* Cart panel — mobile */
    .order-panel {
        max-width: 100%;
    }

    .order-panel-header {
        padding: 14px 16px 12px;
    }

    .cart-title-wrapper h2 {
        font-size: 16px;
    }

    .order-items-list {
        padding: 12px;
    }

    .order-item {
        padding: 12px;
        border-radius: 14px;
    }

    .order-group-img,
    .order-group-img--fallback {
        width: 48px;
        height: 48px;
    }

    .order-group-img--fallback {
        font-size: 18px;
    }

    .order-item-name {
        font-size: 13px;
    }

    .cart-item-total {
        font-size: 15px;
    }

    .cart-edit-btn, .cart-remove-btn {
        padding: 5px 10px;
        font-size: 11px;
        border-radius: 8px;
    }

    .cart-qty-stepper {
        height: 28px;
    }

        .cart-qty-stepper .qty-btn {
            width: 24px;
            height: 24px;
            font-size: 14px;
        }

    .cart-qty-val {
        font-size: 12px;
        min-width: 18px;
    }

    .order-qty-control {
        height: 28px;
    }

        .order-qty-control .qty-btn {
            width: 24px;
            height: 24px;
            font-size: 14px;
        }

        .order-qty-control span {
            font-size: 12px;
            min-width: 18px;
        }

    .order-footer {
        padding: 14px 16px 16px;
    }

    .grand-total {
        font-size: 16px;
    }

    .cart-actions-row {
        gap: 8px;
    }

    .add-more-btn {
        padding: 13px;
        font-size: 12px;
        border-radius: 12px;
    }

    .checkout-action-btn {
        padding: 13px;
        font-size: 14px;
        border-radius: 12px;
    }

    .cart-empty-state {
        padding: 40px 24px;
    }

    .cart-empty-icon {
        width: 80px;
        height: 80px;
        margin-bottom: 18px;
    }

        .cart-empty-icon i {
            font-size: 30px;
        }

    .sidebar-header {
        padding: 20px 16px;
    }

        .sidebar-header h2 {
            font-size: 18px;
        }

    .nav-item {
        padding: 12px 16px;
        font-size: 14px;
        margin: 2px 8px;
    }

        .nav-item i {
            font-size: 16px;
        }

    .items-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 12px;
    }

    .item-image-wrapper {
        height: 140px;
    }

    .item-name {
        font-size: 14px;
    }

    .item-price {
        font-size: 14px;
    }

    .add-to-cart-btn {
        padding: 6px 12px;
        font-size: 12px;
        border-radius: 8px;
    }

    .search-container {
        max-width: 640px;
        left: 0;
        right: 0;
        margin: 0 auto;
    }

    .search-item-img {
        width: 40px;
        height: 40px;
    }

    .search-item-name {
        font-size: 13px;
    }

    .search-item-meta {
        gap: 4px;
    }

    .search-item-category {
        font-size: 10px;
    }

    .search-item-price {
        font-size: 12px;
    }

    .search-add-btn {
        padding: 5px 11px;
        font-size: 12px;
    }

    .search-in-cart-badge {
        padding: 4px 8px;
        font-size: 11px;
    }

    .search-input {
        height: 44px;
        font-size: 15px;
    }

    .search-suggestions-header {
        font-size: 11px;
        padding: 8px 12px 4px;
    }

    .search-recent-chips {
        padding: 4px 12px 8px;
        gap: 6px;
    }

    .search-chip {
        padding: 5px 12px;
        font-size: 12px;
    }

    .search-empty-hint p {
        font-size: 13px;
    }

    .search-sku-badge {
        font-size: 9px;
        padding: 1px 6px;
    }
}

/* ===== TABLET (768px to 1023px) ===== */
@media (min-width: 768px) and (max-width: 1023px) {
    .content-container {
        padding: 24px 30px 100px 30px;
        max-width: 900px;
    }

    .hamburger-btn {
        width: 38px;
        height: 38px;
        font-size: 22px;
    }

    .mobile-logo {
        font-size: 17px;
    }

    .cart-mobile-badge {
        padding: 6px 13px;
        font-size: 14px;
    }
}

.order-qty-control {
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--gray-100);
    border-radius: 10px;
    padding: 2px;
    height: 30px;
    flex-shrink: 0;
}

    .order-qty-control .qty-btn {
        width: 26px;
        height: 26px;
        font-size: 16px;
    }

    .order-qty-control span {
        font-size: 13px;
        font-weight: 700;
        color: var(--gray-800);
        min-width: 22px;
        text-align: center;
    }

/* ===================================================================== */
/* AdvDeli.WebOrder overrides.                                              */
/* Everything above this marker is AdvEntOrder.Web's Home.css verbatim,  */
/* so it stays diffable against the original. Fixes belong below.        */
/* ===================================================================== */

/*
 * The cart button is the most important control on the page and must never be
 * pushed out of the header. Without flex-shrink:0 it collapses on a narrow
 * phone, because .mobile-logo is white-space:nowrap and so refuses to give up
 * width first - the badge loses the negotiation and disappears off the edge.
 */
.cart-mobile-badge {
    flex-shrink: 0;
    white-space: nowrap;
}

.mobile-search-icon-btn,
.hamburger-btn {
    flex-shrink: 0;
}

/* Let the store name and countdown clip instead of shoving the buttons away. */
.mobile-logo {
    min-width: 0;
    overflow: hidden;
}

    .mobile-logo .session-timer {
        min-width: 0;
        overflow: hidden;
        padding-left: 0;
    }

        .mobile-logo .session-timer span {
            overflow: hidden;
            text-overflow: ellipsis;
        }

/*
 * The section heading above the item grid injected a plate emoji through CSS
 * (.item-header-title::before { content: '<emoji>' }). Emoji are drawn by the operating
 * system, so it appeared as a flat monochrome box on some devices and a colour picture on
 * others. Draw it from the icon font instead, like every other glyph in the app.
 */
.item-header-title::before {
    content: "\f2e7";                       /* fa-utensils */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    -webkit-font-smoothing: antialiased;
    color: var(--orange, #F45D01);
    margin-right: 10px;
    font-size: 0.9em;
}

/* ---------------------------------------------------------------------------
   ADD-ON AMOUNTS  (donation, gratuity, surcharge)

   Sits directly above the totals, so the question and the figure it moves are
   in one glance. Card-shaped rather than another row of the footer: this is
   the one thing in that column the customer is being ASKED, and a question
   styled like a total reads as something already decided.
   --------------------------------------------------------------------------- */
.cart-addon-offer {
    margin: 0 20px 12px;
    padding: 12px 14px;
    background: var(--orange-light);
    border: 1px solid rgba(244, 93, 1, 0.18);
    border-radius: 12px;
}

.cart-addon-offer-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--gray-800);
    margin-bottom: 10px;
}

.cart-addon-picks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Every answer is the same size, including "No thanks". A decline drawn smaller
   or quieter than the amounts is a thumb on the scale, and on an unattended
   screen there is nobody to say the customer was not pushed. */
.cart-addon-pick {
    flex: 0 0 auto;
    min-width: 62px;
    min-height: 42px;
    padding: 0 14px;

    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--gray-800);

    background: var(--white);
    border: 1.5px solid var(--gray-300);
    border-radius: 999px;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.cart-addon-pick:hover { border-color: var(--orange); }
.cart-addon-pick:active { transform: translateY(1px); }

.cart-addon-pick.on {
    color: var(--white);
    background: var(--orange);
    border-color: var(--orange-dark);
}

/* Chosen-decline is grey, not orange. It is an answer and must look like one,
   but it is not a thing the shop is pleased about and colouring it in the
   brand would say otherwise. */
.cart-addon-pick.decline.on {
    color: var(--white);
    background: var(--gray-600);
    border-color: var(--gray-800);
}

@media (prefers-reduced-motion: reduce) {
    .cart-addon-pick { transition: none; }
    .cart-addon-pick:active { transform: none; }
}

/* ---------------------------------------------------------------------------
   MENU TILES WITH NO ARTWORK

   A menu now shows only its OWN picture; one without has no <img> at all rather
   than a borrowed category photo or a stock plate of food. These two rules keep
   the strip a single shape when that happens, so a menu without a picture does
   not sit half the height of the ones beside it.

   The name takes the space the circle would have filled and is allowed to grow
   into it. That is the point of the change: the name is the only thing about
   such a menu that was ever true, so it becomes the tile.
   --------------------------------------------------------------------------- */
.menuDiv.no-img {
    /* 100px circle + the 10px flex gap it no longer has to leave room for. */
    min-height: 110px;
    padding: 10px 14px;
    text-align: center;
    line-height: 1.3;
}

/* Left-aligned here, not centred: this is a list row, and the name has to line
   up with the names of the rows that DO carry a picture. */
.menu-list-item.no-img {
    /* 44px thumbnail + the 14px gap, so the label starts where every other
       label in the list starts and the column does not step in and out. */
    padding-left: calc(20px + 44px + 14px);
}

/* ---------------------------------------------------------------------------
   ADD-ON BANNER + DETAIL SHEET

   The kiosk's arrangement, sized for a phone held in one hand. The banner IS
   the ask; the sheet is what somebody opens when they want to know who they
   are giving to before they give.
   --------------------------------------------------------------------------- */

/* The banner carries the chain's own photograph, so nothing may be assumed
   about it: not its aspect, not its brightness, not whether it has a subject in
   the middle. Fixed height with `cover` keeps every cause the same shape, and
   the scrim below is what makes white type legible over a picture that might be
   a bright sky. */
.cart-addon-banner {
    position: relative;
    display: block;
    width: 100%;
    height: 116px;
    margin: 0 0 12px;
    padding: 0;

    border: 0;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;

    background-color: var(--gray-200);   /* while the photograph loads */
    background-size: cover;
    background-position: center;
}

/* Not tappable when there is nothing to open. Left at full opacity on purpose —
   the banner is still the ask and still the thing being read; it simply is not
   also a link, and fading it would say the offer was unavailable. */
.cart-addon-banner:disabled { cursor: default; }

.cart-addon-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .12) 62%, rgba(0, 0, 0, 0) 100%);
}

.cart-addon-banner-title {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 10px;

    text-align: left;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

.cart-addon-more {
    position: absolute;
    top: 10px;
    right: 10px;

    padding: 4px 10px;
    border-radius: 999px;

    font-size: 11.5px;
    font-weight: 700;
    color: var(--dark);
    background: rgba(255, 255, 255, .92);
}

/* The no-artwork fallback: a heading and a plain link. */
.cart-addon-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.cart-addon-more-link {
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;

    font-size: 12px;
    font-weight: 700;
    color: var(--orange);
    text-decoration: underline;
}

/* Answered-yes. A quiet confirmation on the card itself, because once the panel
   scrolls the chosen amount is the only thing still saying it happened. */
.cart-addon-offer.given {
    border-color: rgba(244, 93, 1, 0.45);
    box-shadow: 0 0 0 1px rgba(244, 93, 1, 0.18);
}

/* ---- the sheet ---- */

.asheet-back {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    align-items: flex-end;          /* bottom sheet: it rises to the thumb */
    justify-content: center;
    background: rgba(20, 16, 13, .58);
}

.asheet {
    width: 100%;
    max-width: 520px;               /* a tablet does not get a full-width sheet */
    max-height: 82vh;
    display: flex;
    flex-direction: column;

    background: var(--white);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, .28);

    /* Clear of the home indicator on a modern handset. Falls back to 10px where
       the browser does not report an inset. */
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    animation: asheet-rise .2s ease-out;
}

@keyframes asheet-rise { from { transform: translateY(14%); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) { .asheet { animation: none; } }

/* Decoration, not a control: this sheet is dismissed by the X or the backdrop.
   It is here because a panel that rises from the bottom edge without one does
   not read as dismissable at all. */
.asheet-grip {
    width: 40px;
    height: 4px;
    margin: 8px auto 2px;
    border-radius: 999px;
    background: var(--gray-300);
}

.asheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 16px 10px;
    border-bottom: 1px solid var(--gray-200);
}

.asheet-title { font-size: 15.5px; font-weight: 800; color: var(--dark); }

.asheet-x {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    color: var(--gray-600);
    background: var(--gray-100);
}

.asheet-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;                  /* lets the image shrink inside a flex column */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: var(--gray-50);
}

/* `contain`, never `cover`. This is a document — a cause explained, a page of
   terms — and cropping it to fill a box cuts off the words. */
.asheet-img {
    max-width: 100%;
    max-height: 56vh;
    object-fit: contain;
    border-radius: 8px;
}

.asheet-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;

    font-size: 24px;
    line-height: 1;
    color: var(--dark);
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

.asheet-nav.prev { left: 10px; }
.asheet-nav.next { right: 10px; }

.asheet-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px 4px;
}

.asheet-cap { font-size: 12.5px; font-weight: 600; color: var(--gray-600); }

.asheet-dots { display: flex; gap: 6px; }

/* The dot is 8px but the button around it is finger-sized, so the target is
   reachable without making the indicator loud. */
.asheet-dot {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    position: relative;
}

.asheet-dot::after {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background: var(--gray-300);
}

.asheet-dot.on::after { background: var(--orange); }

/* ---------------------------------------------------------------------------
   CUSTOM AMOUNT KEYPAD

   A modal with its own digits, not an inline field. Inline cost the cart panel
   three rows on a sheet that already carries a basket, a banner, four amounts
   and the totals; and a number input raises the phone's keyboard over the
   bottom half of the screen - including the Add button it is being used to
   reach.
   --------------------------------------------------------------------------- */
.pad-back {
    position: fixed;
    inset: 0;
    z-index: 1450;                  /* over the cart panel, under the alert host */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(20, 16, 13, .58);
}

.pad {
    width: 100%;
    max-width: 340px;
    padding: 14px 16px max(14px, env(safe-area-inset-bottom));

    background: var(--white);
    border-radius: 18px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .3);
    animation: pad-in .16s ease-out;
}

@keyframes pad-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) { .pad { animation: none; } }

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

.pad-title { font-size: 14px; font-weight: 800; color: var(--dark); }

.pad-x {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    font-size: 19px;
    line-height: 1;
    color: var(--gray-600);
    background: var(--gray-100);
}

/* The readout is the biggest thing on the card. A keypad whose display is
   smaller than its buttons is one people mis-key on without noticing. */
.pad-display {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;

    padding: 14px 12px;
    border-radius: 12px;
    background: var(--gray-50);
}

.pad-cur { font-size: 20px; font-weight: 800; color: var(--gray-600); }

.pad-amount {
    font-size: 36px;
    font-weight: 900;
    line-height: 1;
    color: var(--dark);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.pad-bounds {
    margin-top: 8px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-600);
}

/* The same line carries the limits and the refusal, so the explanation lands
   where the customer was already reading rather than somewhere new. */
.pad-bounds.bad { color: #c0392b; font-weight: 700; }

.pad-keys {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 12px;
}

/* 56px tall: comfortably past the ~44px a fingertip needs, on the one control
   in the site where a mis-key changes what somebody gives. */
.pad-key {
    height: 56px;
    border: 1.5px solid var(--gray-200);
    border-radius: 12px;
    cursor: pointer;

    font-family: inherit;
    font-size: 22px;
    font-weight: 700;
    color: var(--dark);
    background: var(--white);

    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.pad-key:active { background: var(--gray-100); transform: translateY(1px); }
.pad-key:disabled { opacity: .35; cursor: default; transform: none; }

.pad-key.back { font-size: 20px; color: var(--gray-600); }

.pad-add {
    width: 100%;
    height: 52px;
    margin-top: 12px;

    border: 0;
    border-radius: 999px;
    cursor: pointer;

    font-family: inherit;
    font-size: 16px;
    font-weight: 800;
    color: var(--white);
    background: var(--orange);
}

.pad-add:active { transform: translateY(1px); }

/* Disabled while the figure is unusable - nothing typed, or outside the
   configured bounds. Faded rather than removed, so the button does not appear
   from nowhere on the press that makes the amount legal. */
.pad-add:disabled { opacity: .45; cursor: default; transform: none; }

/* Remove the chosen amount. Round and icon-only so it reads as "undo that"
   rather than as a fifth thing to pick, and sized to the pills beside it so the
   row does not change height when it appears. */
.cart-addon-clear {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    padding: 0;

    border: 1.5px solid var(--gray-300);
    border-radius: 50%;
    cursor: pointer;

    font-family: inherit;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    color: var(--gray-600);
    background: var(--white);

    transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.cart-addon-clear:hover {
    color: #c0392b;
    border-color: #c0392b;
}

.cart-addon-clear:active { transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
    .cart-addon-clear { transition: none; }
    .cart-addon-clear:active { transform: none; }
}