/* ===== WIDE LAYOUT OVERRIDE: pull categories left, give items more room ===== */
@media (min-width: 981px){
    /* Desktop: cart panel is already visible, so hide ONLY the "Bill" cart FAB.
       All three FABs share .bill-jump-fab, so exclude the other two explicitly. */
    .bill-jump-fab:not(.past-orders-fab):not(.bill-place-order-fab){
        display:none !important;
    }
    /* Break out of the narrow centered .container so the page uses full width */
    .container.bill-shell{
        max-width:100% !important;
        width:100% !important;
        margin-left:0 !important;
        margin-right:0 !important;
        padding-left:20px !important;
        padding-right:20px !important;
    }

    /* Narrower category rail + fixed cart = much wider items column */
    .bill-layout{
        grid-template-columns:196px minmax(0,1fr) 360px !important;
        gap:16px !important;
    }

    .desktop-category-card{
        padding:14px !important;
        position:sticky !important;
        top:16px !important;
    }
    .desktop-category-card .section-head h3{font-size:16px !important;}
    .category-btn{
        padding:10px 12px !important;
        font-size:13px !important;
        border-radius:12px !important;
    }

    /* ===== Customer-page card style: 4 per row ===== */
    .item-list{
        display:grid !important;
        grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
        gap:18px !important;
        align-items:start !important;
    }

    /* Flat white card, no inner padding: the image panel bleeds to the edges */
    .item-card{
        padding:0 !important;
        border-radius:14px !important;
        border:1px solid #ececec !important;
        background:#fff !important;
        overflow:hidden !important;
        box-shadow:none !important;
        display:flex !important;
        flex-direction:column !important;
        transition:box-shadow .16s ease, transform .16s ease !important;
    }
    .item-card:hover{
        box-shadow:0 10px 30px rgba(15,23,42,.09) !important;
        transform:translateY(-2px) !important;
        border-color:#e2e2e2 !important;
    }

    .item-summary{
        flex-direction:column !important;
        align-items:stretch !important;
        justify-content:flex-start !important;
        gap:0 !important;
        padding:0 !important;
    }
    .item-summary-left{
        flex-direction:column !important;
        align-items:stretch !important;
        gap:0 !important;
        flex:1 1 auto !important;
    }

    /* Image sits on a soft panel with a hairline divider underneath */
    .item-summary-left > img.item-image,
    .item-card img.item-image{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        height:190px !important;
        border:0 !important;
        border-bottom:1px solid #f0f0f0 !important;
        border-radius:0 !important;
        object-fit:contain !important;
        object-position:center center !important;
        background:linear-gradient(180deg,#fbfbfb,#f6f6f6) !important;
        padding:14px !important;
    }
    .item-summary-left > .food-item-image-frame,
    .item-card .food-item-image-frame{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        height:190px !important;
        flex:0 0 auto !important;
        flex-basis:auto !important;
        border:0 !important;
        border-bottom:1px solid #f0f0f0 !important;
        border-radius:0 !important;
        background:linear-gradient(180deg,#fbfbfb,#f6f6f6) !important;
        padding:14px !important;
    }
    .food-item-image-frame > .food-item-image-inner{
        background:transparent !important;
    }

    /* Text block below the image */
    .item-card .item-info{
        padding:14px 14px 16px !important;
        display:flex !important;
        flex-direction:column !important;
        flex:1 1 auto !important;
    }
    .item-name{
        font-size:14px !important;
        font-weight:800 !important;
        line-height:1.35 !important;
        color:#111 !important;
        margin:0 0 6px !important;
    }
    .item-desc{
        font-size:12px !important;
        line-height:1.45 !important;
        margin:0 !important;
        display:-webkit-box !important;
        -webkit-line-clamp:2 !important;
        -webkit-box-orient:vertical !important;
        overflow:hidden !important;
    }

    /* Bottom row: price on the left, qty stepper on the right */
    .item-card .quick-price-line{
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        gap:8px !important;
        margin-top:auto !important;
        padding-top:14px !important;
        flex-wrap:nowrap !important;
    }
    .item-card .quick-price-pill{
        background:transparent !important;
        border:0 !important;
        padding:0 !important;
        color:#111 !important;
        font-size:14.5px !important;
        font-weight:900 !important;
        white-space:nowrap !important;
    }
    .item-card .quick-price-line .qty-pack{
        gap:5px !important;
        flex-shrink:0 !important;
    }
    .item-card .quick-price-line .qty-btn{
        width:28px !important;
        height:28px !important;
        min-width:28px !important;
        border-radius:50% !important;
        font-size:14px !important;
        line-height:1 !important;
        padding:0 !important;
    }
    .item-card .quick-price-line .qty-btn.plus{
        background:#111 !important;
        border-color:#111 !important;
        color:#fff !important;
    }
    .item-card .quick-price-line .qty-btn.minus{
        background:#fff !important;
        border:1px solid #e5e5e5 !important;
        color:#111 !important;
    }
    .item-card .quick-price-line .qty-input{
        width:30px !important;
        min-width:30px !important;
        border:0 !important;
        background:transparent !important;
        font-size:13px !important;
        font-weight:800 !important;
        text-align:center !important;
        padding:0 !important;
    }

    .item-card .price-badge{
        align-self:flex-start !important;
        margin-top:10px !important;
        font-size:12px !important;
        padding:6px 10px !important;
    }

    /* Caret pinned to the card corner so it doesn't break the vertical flow */
    .item-caret{
        position:absolute !important;
        top:10px !important;
        right:10px !important;
        width:26px !important;
        height:26px !important;
        min-width:26px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        border-radius:50% !important;
        background:rgba(255,255,255,.94) !important;
        border:1px solid #ececec !important;
        font-size:16px !important;
        z-index:2 !important;
    }
    .item-card{position:relative !important;}

    /* Expanded cards (variations / deals) span the full row */
    .item-card.open{
        grid-column:1 / -1 !important;
    }
    .item-card.open .item-summary-left > img.item-image,
    .item-card.open img.item-image,
    .item-card.open .food-item-image-frame{
        height:210px !important;
    }
    .item-card .item-body{
        padding:0 14px 14px !important;
    }
}

@media (min-width: 1500px){
    .bill-layout{
        grid-template-columns:200px minmax(0,1fr) 380px !important;
    }
    .item-summary-left > img.item-image,
    .item-card img.item-image,
    .item-summary-left > .food-item-image-frame,
    .item-card .food-item-image-frame{
        height:215px !important;
    }
    .item-name{font-size:15px !important;}
}

/* Between 981 and 1250px, 4 columns get cramped -> use 3 */
@media (min-width: 981px) and (max-width: 1250px){
    .item-list{
        grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    }
}

/* FOOD_STYLE_PRINT_PARITY_V1 */
.compact-order-type-wrap{display:none!important}