/* Scoped to the customer basket; catalog and merchant pages retain their layouts. */
@media screen {
    #viewOrder #dismiss.cart-close-button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 44px; padding: 0; border: 1px solid #deebe4; border-radius: 14px; background: #f2f8f5; color: #20533f; box-shadow: 0 3px 8px #163c2c08; transition: background .15s, box-shadow .15s; }
    #viewOrder #dismiss.cart-close-button:hover { background: #e4f2ea; box-shadow: 0 4px 12px #163c2c12; }
    #viewOrder #dismiss.cart-close-button:active { background: #d8ebdf; }
    #viewOrder .sidebar-header { border-bottom: 1px solid #edf1f3; padding: 16px 20px; }
    #viewOrder .navbar-heading h4 { font-size: 20px; font-weight: 800; color: #142f29; }
    #viewOrder .sidebar-wrapper { padding: 12px 14px 100px !important; }
    #viewOrder .your-order-items { display: grid; gap: 16px; padding: 0 !important; }
    #viewOrder .your-order-items .section-menu { margin: 0 !important; padding: 0 !important; min-width: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; }
    #viewOrder .your-order-items .menu-item.list { position: relative; display: grid !important; grid-template-columns: 84px minmax(0,1fr); gap: 16px 12px; align-items: start; margin: 0 !important; padding: 16px !important; border: 1px solid #e8f0ec !important; border-radius: 20px !important; box-shadow: 0 5px 18px #163c2c08 !important; background: #fff !important; }
    #viewOrder .your-order-items .order-item-image { grid-column: 1; grid-row: 1; width: 84px !important; height: 102px !important; margin: 0 !important; padding: 6px !important; border: 0; border-radius: 14px !important; background: #f0f6f3; box-shadow: none !important; transform: none !important; }
    #viewOrder .your-order-items .order-item-image:after { display: none !important; }
    #viewOrder .your-order-items .order-item-image img { width: 100% !important; height: 100% !important; object-fit: contain !important; border-radius: 8px !important; }
    #viewOrder .your-order-items .menu-content { grid-column: 2; grid-row: 1; min-width: 0; width: 100% !important; max-width: none !important; padding: 4px 0 0 !important; padding-inline-end: 0 !important; float: none !important; }
    #viewOrder .your-order-items .menu-item.list.cart-without-image { grid-template-columns: minmax(0,1fr); }
    #viewOrder .your-order-items .cart-without-image .menu-content { grid-column: 1; }
    #viewOrder .your-order-items .menu-detail { display: block !important; }
    #viewOrder .your-order-items .menu-title { display: block !important; min-width: 0; width: 100% !important; max-width: none !important; float: none !important; }
    #viewOrder .your-order-items .menu-title h4 { width: 100% !important; max-width: none !important; float: none !important; }
    #viewOrder .your-order-items .menu-title h4 { font: inherit; font-size: 15px !important; font-weight: 750; line-height: 1.65; margin: 0 0 10px !important; color: #11283b !important; overflow-wrap: anywhere; }
    #viewOrder .cart-variant { display: block; color: #687a75; font-size: 12px; }
    #viewOrder .your-order-items .menu-price { display: block !important; background: none !important; padding: 0 !important; border-radius: 0 !important; color: #213b46 !important; font-size: 15px !important; font-weight: 650; white-space: nowrap; }
    #viewOrder .your-order-items .order-item-unit-actions > .menu-price > .cart-price-label { display: block; margin-bottom: 3px; }
    #viewOrder .cart-price-label { font-size: 11px; font-weight: 500; color: #74857f; }
    #viewOrder .your-order-items .add-menu { grid-column: 1 / -1; display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; min-width: 0 !important; width: 100% !important; margin: 0 !important; padding-top: 14px; border-top: 1px solid #e8efeb; }
    #viewOrder .your-order-items .add-btn.add-item-btn { width: 128px !important; height: 44px !important; border-radius: 12px !important; border: 1px solid #dce8e2 !important; background: #f5faf7 !important; padding: 0 !important; box-shadow: none !important; }
    #viewOrder .your-order-items .add-item-btn .wrapper { display: flex; height: 100%; align-items: center; justify-content: space-between; }
    #viewOrder .your-order-items .addition { display: grid; place-items: center; flex: 0 0 34px; height: 36px; padding: 0; border: 0; background: transparent; color: #087f5b; cursor: pointer; }
    #viewOrder .your-order-items .count { flex: 1 1 48px !important; width: 48px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; text-align: center; }
    #viewOrder .your-order-items .addition { font-size: 20px; }
    #viewOrder .your-order-items .count .num { color: #183d30 !important; font-size: 14px; font-weight: 700; }
    #viewOrder .your-order-items input.menu-order-quantity { display: block; width: 100% !important; height: 42px; min-width: 0; padding: 0 !important; margin: 0; border: 0; border-inline: 1px solid #e2ebe5; border-radius: 0; background: #fff; text-align: center; direction: ltr; font-family: inherit; box-shadow: none; }
    #viewOrder .your-order-items input.menu-order-quantity:focus { outline: 2px solid #087f5b !important; background: white; }
    #viewOrder .your-order-items .add-menu > .menu_price { display: flex !important; flex-direction: column; align-items: flex-end; gap: 2px; width: auto !important; height: auto !important; min-width: 80px; padding: 0 !important; margin: 0 !important; border-radius: 0 !important; background: none !important; color: #087f5b !important; font-size: 17px !important; font-weight: 800; white-space: nowrap; line-height: 1.5; }
    #viewOrder .your-order-items .order-item-delete { background: #fff1f0 !important; color: #c34444 !important; border: 0 !important; border-radius: 8px !important; padding: 7px 10px !important; box-shadow: none !important; font-size: 12px; }
    #viewOrder .your-order-items .order-item-unit-actions > .order-item-delete { position: static !important; width: 36px; height: 36px; display: grid; place-items: center; margin: 0 !important; padding: 0 !important; cursor: pointer; }
    #viewOrder .your-order-items .order-item-delete > span { display: none; }
    #viewOrder .order-product-note { margin: 6px 0; color: #60716c; font-size: 12px; overflow-wrap: anywhere; }
    #viewOrder .your-order-items .menu-extra-wrapper:empty { display: none; }
    #viewOrder .your-order-content .section, #viewOrder .section3 { margin-bottom: 12px; padding: 14px !important; border-radius: 16px; border: 1px solid #e6eeeb; }
    #viewOrder .your-order-content .cart-items-section { border: 0 !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; }
    #viewOrder .section3 { border: 1px solid #e8f0ec; border-radius: 20px; padding: 18px !important; box-shadow: 0 5px 18px #163c2c06; }
    #viewOrder .cart-summary-heading { font-size: 19px; font-weight: 750; color: #11283b; margin: 0 0 14px; }
    #viewOrder .cart-subtotal-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid #edf2ef; color: #65766f; }
    #viewOrder .cart-subtotal-row .your-order-price { color: #203b47 !important; background: transparent !important; padding: 0; font-size: 16px; }
    #viewOrder .grand-total { background: #eff8f3; padding: 12px; border-radius: 12px; margin-top: 12px; }
    #viewOrder .grand-total { display: flex !important; justify-content: space-between; align-items: center; gap: 12px; font-size: 16px; font-weight: 750; }
    #viewOrder .your-order-price { display: inline-block; white-space: nowrap; color: #087f5b !important; background: #edf8f1 !important; border-radius: 10px; padding: 8px 12px; font-size: 20px; }
    #viewOrder .delivery-price-note { color: #74857f !important; font-size: 11px; margin-top: 10px; }
    #viewOrder .form-control { min-height: 48px; border-radius: 12px !important; font-size: 14px; }
    #viewOrder textarea.form-control { min-height: 72px; }
    #viewOrder .footer { padding-bottom: max(12px,env(safe-area-inset-bottom)); }
    #viewOrder .order-success-message { position: static !important; transform: none !important; padding: 28px 20px 80px; overflow-y: auto; max-height: calc(100dvh - 75px); }
    #viewOrder .order-success-message .qr-success-icon { display: block; position: static !important; width: 64px; height: 64px; line-height: 64px; font-size: 32px; margin: 12px auto 16px !important; }
    #viewOrder .customer-order-actions { display: grid; gap: 10px; margin-top: 20px; }
    #viewOrder .customer-order-actions > * { display: flex; justify-content: center; align-items: center; gap: 10px; min-height: 48px; border: 1px solid #dce8e2; border-radius: 12px; padding: 10px 14px; font: inherit; font-weight: 700; text-decoration: none; color: #087f5b; background: #f5faf7; cursor: pointer; }
    #viewOrder .customer-order-actions .customer-order-download { background: #087f5b; color: white; border-color: #087f5b; }
    #viewOrder .customer-receipt-hint, #viewOrder .customer-receipt-status { color: #687a75; font-size: 12px; line-height: 1.8; margin-top: 12px; }
    #viewOrder button:focus-visible { outline: 3px solid #72c7a5 !important; outline-offset: 3px; }
    #viewOrder #submit-order-button { background: #07855e !important; color: #fff !important; border: 0 !important; font-size: 16px; font-weight: 750; }
    #viewOrder #submit-order-button:disabled { opacity: .5; }
}

@media screen and (max-width: 768px) {
    #viewOrder.sidenav.bottom { inset: 0 !important; width: 100% !important; height: 100vh !important; height: 100dvh !important; max-height: 100vh !important; max-height: 100dvh !important; border-radius: 0 !important; transform: none !important; overflow: hidden !important; }
    #viewOrder.sidenav.bottom:not(.active) { display: none !important; }
    #viewOrder.sidenav.bottom.active { display: flex !important; flex-direction: column; padding: 0 !important; margin: 0 !important; box-sizing: border-box; gap: 0; }
    #viewOrder .sidebar-header { position: relative !important; top: auto !important; height: auto !important; min-height: 72px; flex: 0 0 auto; width: 100%; padding: max(12px,env(safe-area-inset-top)) 18px 12px !important; box-sizing: border-box; }
    #viewOrder .your-order-content { flex: 1 1 0; min-height: 0; height: auto !important; overflow: hidden; margin: 0 !important; padding: 0 !important; }
    #viewOrder .your-order-content > form { padding: 0 !important; margin: 0 !important; }
    #viewOrder #send-order-form { display: flex; flex-direction: column; height: 100% !important; min-height: 0; margin: 0; }
    #viewOrder #send-order-form .sidebar-wrapper { position: relative !important; inset: auto !important; flex: 1 1 auto; height: auto !important; min-height: 0; overflow-y: auto !important; padding: 16px 14px 20px !important; background: #fff !important; -webkit-overflow-scrolling: touch; }
    #viewOrder #send-order-form > .footer { position: relative !important; inset: auto !important; flex: 0 0 auto; height: auto !important; min-height: 0 !important; width: 100%; margin: 0; padding: 10px 14px max(12px,env(safe-area-inset-bottom)) !important; box-sizing: border-box; border-top: 1px solid #e4eee8; box-shadow: 0 -4px 18px #183b2905; }
    #viewOrder #send-order-form > .footer .section { border: 0 !important; padding: 0 !important; margin: 0 !important; }
    #viewOrder #submit-order-button { min-height: 50px; border-radius: 14px; }
    #viewOrder .order-success-message { flex: 1 1 auto; min-height: 0; max-height: none; padding-bottom: max(24px,env(safe-area-inset-bottom)); }
}

@media screen {
    #viewOrder, #viewOrder .your-order-content, #viewOrder #send-order-form, #viewOrder .sidebar-wrapper, #viewOrder .customer-order-success { background: #fff !important; background-image: none !important; }
}

#viewOrder .your-order-items .order-item-unit-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; }