/*
 * Beelivery 2026 design: the order page (/now-delivery/...). VISUAL ONLY.
 *
 * Re-styles the ported legacy markup to the design (Beelivery Shop v5) without changing any ID, class or
 * structure that beelivery.order.js, simpleCart or the Blazor components rely on. Loaded LAST
 * (OrderLegacyStyles), every rule scoped under .bee-order-page so nothing outside the shop changes.
 *
 * Deliberately NOT changed: the fixed navbar's height (the order scripts measure it to position the sticky
 * category bar) and the add-button's position in the card (the design's round "+" over the photo would need
 * the photo height guessed per breakpoint). The button keeps its place and takes the design's look.
 */
.bee-order-page {
    --bz-orange: #FF6507;
    --bz-ink: #1F1A17;
    --bz-ink-2: #5E5550;
    --bz-line: #EFE7E0;
    --bz-cream: #FBF7F3;
    --bz-peach: #FFE6D2;
    --bz-font: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.bee-order-page .main-content-products,
.bee-order-page #divCategories { background: var(--bz-cream); }

/* ---------- Top bar ---------- */
.bee-order-page .navbar .top-prod-seach-box-container { border-radius: 999px; overflow: hidden; }
.bee-order-page .navbar .textboxItemSearch { border: 0; font-family: var(--bz-font); font-size: 15px; }
.bee-order-page .navbar .basketIcon {
    width: max-content !important;
    margin-left: auto;
    background: var(--bz-ink);
    color: #fff;
    border-radius: 999px;
    padding: 8px 16px 8px 12px;
    display: flex !important;
    align-items: center;
    gap: 8px;
}
.bee-order-page .navbar .basketIcon #cartBadge { color: #fff; font-weight: 800; font-family: var(--bz-font); }

/* ---------- Category tabs ---------- */
.bee-order-page #category-bar { background: #fff; border-bottom: 1px solid var(--bz-line); }
/* The tab boxes keep their legacy size (the order scripts measure this bar); the design's pill is drawn
   behind the text with ::before, so only the look changes. */
.bee-order-page #sliderCategory a.navCat,
.bee-order-page #sliderSubcategory a.navSubcat {
    position: relative;
    z-index: 0;
    font-family: var(--bz-font);
    font-weight: 700;
    color: var(--bz-ink);
    border-bottom: 0 !important;
    box-shadow: none !important;
    background: none !important;
    transition: color .15s;
}
.bee-order-page #sliderCategory a.navCat::before,
.bee-order-page #sliderSubcategory a.navSubcat::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 2px;
    right: 2px;
    top: 50%;
    height: 38px;
    transform: translateY(-50%);
    border-radius: 999px;
    background: transparent;
    transition: background-color .15s;
}
.bee-order-page #sliderCategory a.navCat { font-size: 15px; }
.bee-order-page #sliderCategory a.navCat:hover { color: var(--bz-ink); text-decoration: none; }
.bee-order-page #sliderCategory a.navCat:hover::before { background: var(--bz-peach); }
.bee-order-page #sliderCategory a.navCat.active { color: #fff; }
.bee-order-page #sliderCategory a.navCat.active::before { background: var(--bz-ink); }
/* The sliding underlines the order scripts position (left/width) under the current tab. Category: the
   current tab already carries .active (dark pill above), so its underline is just not painted.
   Sub-category: the underline is the ONLY marker of the current tab, so it becomes the peach pill — same
   element, same script-driven position and width, re-shaped and moved behind the text. */
.bee-order-page #category-bar li.categoryHighlight { background: transparent !important; }
.bee-order-page #category-bar li.subcategoryHighlight {
    background: var(--bz-peach) !important;
    top: 50% !important;
    bottom: auto !important;
    height: 34px !important;
    transform: translateY(-50%);
    border-radius: 999px;
    z-index: 0;
    pointer-events: none;
}
.bee-order-page #sliderSubcategory a.navSubcat { z-index: 1; }
.bee-order-page #sliderCategory a.navCat.active::after,
.bee-order-page #sliderSubcategory a.navSubcat::after { display: none !important; }

/* ---------- Sub-category pills ---------- */
.bee-order-page #sliderSubcategory a.navSubcat { font-size: 14px; text-transform: none; }
.bee-order-page #sliderSubcategory a.navSubcat::before { height: 34px; }
.bee-order-page #sliderSubcategory a.navSubcat:hover { color: var(--bz-ink); text-decoration: none; }
.bee-order-page #sliderSubcategory a.navSubcat:hover::before { background: #F3EEEA; }
.bee-order-page #sliderSubcategory a.navSubcat.active,
.bee-order-page #sliderSubcategory a.navSubcat.selected { color: #C24E00; }
.bee-order-page #sliderSubcategory a.navSubcat.active::before,
.bee-order-page #sliderSubcategory a.navSubcat.selected::before { background: var(--bz-peach); }

/* ---------- Category banner ---------- */
.bee-order-page #headerImageBanner { border-radius: 24px; overflow: hidden; }

/* ---------- Section headings and Filter ---------- */
.bee-order-page .categoryTitle {
    font-family: var(--bz-font);
    color: var(--bz-ink) !important;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.bee-order-page .showTags {
    border: 1px solid var(--bz-line);
    background: #fff;
    border-radius: 999px;
    font-family: var(--bz-font);
    font-weight: 700;
    color: var(--bz-ink);
}

/* ---------- Product cards: the design's card (Shop v5), exact values ----------
   Layout only: the card markup, its escaping and every hook the order scripts use are unchanged.
   The card is a size container, so the on-photo buttons are positioned from the card's own width
   (the photo box is square: its bottom edge is at 100cqw). */
.bee-order-page .product_container:not(:has(> .bz-tob-card)) {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr));
    gap: 24px 16px;
}
.bee-order-page .product_box_Small_container:not(.bz-tob-card) {
    container-type: inline-size;
    position: relative;
    float: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font-family: var(--bz-font);
    color: var(--bz-ink);
}
.bee-order-page .product_box_Small_container:not(.bz-tob-card) .product_box_Small {
    display: flex !important;
    flex-direction: column;
    gap: 2px;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    text-align: left !important;
}
/* Photo box: square, 16px corners, white, 1px border; photo at 76%. */
.bee-order-page .product_box_Small_container:not(.bz-tob-card) .product_image_div {
    order: 0;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    margin: 0 0 8px !important;
    padding: 0 !important;
    border-radius: 16px;
    background: #fff !important;
    border: 1px solid var(--bz-line);
    overflow: hidden;
    transition: border-color .25s, box-shadow .25s;
}
.bee-order-page .product_box_Small_container:not(.bz-tob-card):hover .product_image_div {
    border-color: #FFC9A6;
    box-shadow: 0 12px 28px rgba(31, 26, 23, 0.08);
}
.bee-order-page .product_box_Small_container.product_image_div_lit:not(.bz-tob-card) .product_image_div { border-color: #FFC9A6; }
.bee-order-page .product_box_Small_container:not(.bz-tob-card) .product_image_div > a {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}
.bee-order-page .product_box_Small_container:not(.bz-tob-card) .product_image_div img {
    width: 76% !important;
    height: 76% !important;
    max-width: none !important;
    object-fit: contain;
    transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}
.bee-order-page .product_box_Small_container:not(.bz-tob-card):hover .product_image_div img { transform: scale(1.06); }

/* Tags, top-left over the photo. */
.bee-order-page .product_box_Small_container:not(.bz-tob-card) .product_badges {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    right: 52px;
    z-index: 2;
    display: flex !important;
    flex-wrap: wrap;
    gap: 4px;
    pointer-events: none;
}
.bee-order-page .product_badges br { display: none; }
.bee-order-page .product_badges img { height: 24px; width: auto; }
.bee-order-page .bz-tag {
    height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    font-family: var(--bz-font);
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    white-space: nowrap;
}
.bee-order-page .bz-tag-multibuy { background: #FF6507; color: #1F1A17; }

/* Favourites heart, top-right: 32px white circle in a 44px tap target. */
.bee-order-page .product_box_Small_container:not(.bz-tob-card) .openProductListsButtonContainer {
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    left: auto !important;
    width: 44px;
    height: 44px;
    z-index: 3;
    display: grid;
    place-items: center;
}
.bee-order-page .product_box_Small_container:not(.bz-tob-card) .openProductListsButton {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.92) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F1A17' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M12 20.5s-7.5-4.6-9.3-9.2C1.5 8 3.6 4.5 7.2 4.5c2 0 3.6 1.1 4.8 2.8 1.2-1.7 2.8-2.8 4.8-2.8 3.6 0 5.7 3.5 4.5 6.8-1.8 4.6-9.3 9.2-9.3 9.2z'/%3E%3C/svg%3E") !important;
    background-size: 17px 17px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* Price (17px, 800) then name (15px, 700, max 2 lines). The #divP "N x" text stays for the
   order scripts but is not shown: the quantity lives in the on-photo stepper. */
.bee-order-page .product_box_Small_container:not(.bz-tob-card) .prod150Price {
    order: 1;
    position: static !important;
    margin: 0 !important;
    padding: 0 2px !important;
    height: auto !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    color: var(--bz-ink) !important;
    text-align: left !important;
    line-height: 1.3;
}
.bee-order-page .product_box_Small_container:not(.bz-tob-card) .prod150Price > span[id^="divP"] { display: none !important; }
.bee-order-page .product_box_Small_container:not(.bz-tob-card) .prod150Text {
    order: 2;
    height: auto !important;
    margin: 0 !important;
    padding: 0 2px !important;
    text-align: left !important;
    overflow: visible !important;
}
.bee-order-page .product_box_Small_container:not(.bz-tob-card) .product_name_small {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 0 !important;
    text-align: left !important;
}
.bee-order-page .product_box_Small_container:not(.bz-tob-card) .product_name_small a {
    font-size: 15px;
    line-height: 1.35;
    font-weight: 700;
    color: var(--bz-ink);
    text-decoration: none;
}

/* + button: 44px dark circle, 10px from the photo's bottom-right corner. */
.bee-order-page .product_box_Small_container:not(.bz-tob-card) .product-button-container {
    position: absolute !important;
    top: calc(100cqw - 54px) !important;
    right: 10px !important;
    left: auto !important;
    bottom: auto !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 3;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    background: none !important;
    border-radius: 999px !important;
    overflow: visible !important;
}
.bee-order-page .product_box_Small_container:not(.bz-tob-card) .minbutton,
.bee-order-page .product_box_Small_container:not(.bz-tob-card) .bz-qty { display: none !important; }
.bee-order-page .product_box_Small_container:not(.bz-tob-card) .plusbutton {
    flex: none;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    cursor: pointer;
    background: #1F1A17 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 20px 20px no-repeat !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    transition: background-color .15s;
}
.bee-order-page .product_box_Small_container:not(.bz-tob-card) .plusbutton::after { content: none !important; display: none !important; }
.bee-order-page .product_box_Small_container:not(.bz-tob-card) .plusbutton:hover { background-color: #FF6507 !important; }

/* In the basket: a full-width orange 44px pill on the photo, − qty +. */
.bee-order-page .product_box_Small_container.product_image_div_lit:not(.bz-tob-card) .product-button-container {
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    padding: 0 4px !important;
    background: #FF6507 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
.bee-order-page .product_box_Small_container.product_image_div_lit:not(.bz-tob-card) .minbutton,
.bee-order-page .product_box_Small_container.product_image_div_lit:not(.bz-tob-card) .plusbutton {
    display: block !important;
    flex: none;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    box-shadow: none;
    cursor: pointer;
}
.bee-order-page .product_box_Small_container.product_image_div_lit:not(.bz-tob-card) .minbutton {
    background: rgba(0, 0, 0, 0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") center / 16px 16px no-repeat !important;
}
.bee-order-page .product_box_Small_container.product_image_div_lit:not(.bz-tob-card) .plusbutton {
    background: rgba(0, 0, 0, 0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 16px 16px no-repeat !important;
}
.bee-order-page .product_box_Small_container.product_image_div_lit:not(.bz-tob-card) .minbutton:hover,
.bee-order-page .product_box_Small_container.product_image_div_lit:not(.bz-tob-card) .plusbutton:hover { background-color: rgba(0, 0, 0, 0.22) !important; }
.bee-order-page .product_box_Small_container.product_image_div_lit:not(.bz-tob-card) .bz-qty {
    display: block !important;
    color: #fff;
    font-family: var(--bz-font);
    font-weight: 800;
    font-size: 16px;
}

/* ---------- Basket: the design's basket card (Shop v5), exact values ----------
   Order on screen: header -> delivery box (ASAP/Schedule + time) -> items -> assistant -> totals -> Checkout.
   Achieved with flex `order` and `display: contents` on the trolley-bar wrappers, so no element the order
   scripts use is moved in the DOM; the slot picker, fees modal and checkout hand-off are untouched. */
.bee-order-page #sidebar { background: transparent !important; border-left: 0 !important; }
.bee-order-page #sidebar .basket-inner {
    position: relative !important;
    display: flex !important;
    flex-direction: column;
    background: #fff;
    border: 1px solid #F0E8E1;
    border-radius: 24px;
    box-shadow: 0 12px 40px rgba(31, 26, 23, 0.06);
    overflow: hidden;
    font-family: var(--bz-font);
    color: var(--bz-ink);
}
.bee-order-page #sidebar .trolleyBar,
.bee-order-page #sidebar .trolleyBar > div:first-child { display: contents !important; }

/* Header: "Your basket  N items" + Clear */
.bee-order-page #sidebar .bz-basket-head {
    order: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px 12px;
}
.bee-order-page #sidebar .bz-basket-title { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; color: var(--bz-ink); font-family: var(--bz-font); }
.bee-order-page #sidebar .bz-basket-count { font-size: 15px; font-weight: 600; color: #6E655F; letter-spacing: 0; }
.bee-order-page #sidebar .bz-basket-clear {
    height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid #E8DED6;
    background: #fff;
    color: var(--bz-ink);
    font: 700 13px var(--bz-font);
    cursor: pointer;
}
.bee-order-page #sidebar .bz-basket-clear:hover { border-color: var(--bz-ink); }
.bee-order-page #sidebar .bz-basket-clear[hidden] { display: none; }

/* Delivery box: peach panel with the ASAP / Schedule toggle and the current window. */
.bee-order-page #sidebar .deliveryOptions {
    order: 1;
    margin: 0 20px 14px !important;
    padding: 12px;
    border-radius: 16px;
    background: #FFF1E7;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* NOT a positioning container: the legacy slot panel (.deliveryTimesContainer, absolute,
       translateY(100%)) must anchor to .basket-inner, so it hides below the card and slides up
       over the whole basket when Schedule / the current window opens it. */
    position: static !important;
}
.bee-order-page #sidebar .bz-slot-modes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    background: #fff;
}
.bee-order-page #sidebar .bz-slot-mode {
    height: 38px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--bz-ink);
    font: 800 14px var(--bz-font);
    cursor: pointer;
    transition: background .2s, color .2s;
}
.bee-order-page #sidebar .bz-slot-mode[aria-checked="true"] { background: var(--bz-ink); color: #fff; }
.bee-order-page #sidebar #deliveryTimes { margin: 0 !important; }
.bee-order-page #sidebar .currentWindow {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 0 2px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    height: auto !important;
    min-height: 36px;
    font-size: 14px;
    line-height: 1.35;
    cursor: pointer;
}
.bee-order-page #sidebar .currentWindow::before {
    content: "";
    flex: none;
    width: 20px;
    height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C24E00' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.bee-order-page #sidebar .currentWindow span { flex: 1; font-weight: 800; color: var(--bz-ink); font-family: var(--bz-font); }
.bee-order-page #sidebar .currentWindow .expandDeliveryTimes { width: 14px; height: 14px; opacity: .6; }

/* Items */
.bee-order-page #sidebar .basket-inner > .notepad:not(#assistant-chat-history) {
    order: 3;
    flex: 1 1 auto;
    padding: 0 20px 8px;
    border-top: 1px solid #F0E8E1;
    overflow-y: auto;
    height: auto !important;
    max-height: none !important;
    background: none !important;
}
.bee-order-page #sidebar .cart-item-container {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 12px 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid #F6F2EE !important;
    flex-wrap: wrap;
}
.bee-order-page #sidebar .cart-item-container .item-img {
    flex: none;
    width: 52px !important;
    height: 52px !important;
    border-radius: 12px;
    border: 1px solid #F0E8E1;
    object-fit: contain;
    padding: 5px;
    background: #fff;
    margin: 0 !important;
}
.bee-order-page #sidebar .name-quantity-container {
    flex: 1 1 0;
    min-width: 0;
    display: flex !important;
    flex-direction: column;
    gap: 2px;
    width: auto !important;
    margin: 0 !important;
}
.bee-order-page #sidebar .item-name {
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.3;
    color: var(--bz-ink) !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 !important;
}
.bee-order-page #sidebar .name-quantity-container .price-quantity-inner,
.bee-order-page #sidebar .name-quantity-container .price-quantity-inner div {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: var(--bz-ink) !important;
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    text-align: left !important;
}
/* - qty + : outlined 40px pill on the right */
.bee-order-page #sidebar .cart-item-container > .item-price-quantity {
    flex: none;
    display: flex !important;
    align-items: center;
    gap: 2px;
    height: 40px;
    padding: 0 2px;
    margin: 0 !important;
    border-radius: 999px;
    border: 1px solid #E8DED6;
    outline: 0 !important; /* legacy draws the old orange pill with an outline */
    background: #fff !important;
    width: auto !important;
    max-width: none !important;
}
.bee-order-page #sidebar .item-price-quantity .item-button {
    min-width: 0 !important;
    line-height: 34px !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    border: 0 !important;
    background: transparent center / 16px no-repeat !important;
    color: transparent !important;
    font-size: 0 !important;
    cursor: pointer;
    padding: 0 !important;
    margin: 0 !important;
}
.bee-order-page #sidebar .item-price-quantity .item-button:first-child {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F1A17' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") !important;
}
.bee-order-page #sidebar .item-price-quantity .item-button:last-child {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F1A17' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") !important;
}
.bee-order-page #sidebar .item-price-quantity .item-button:hover { background-color: #F6F2EE !important; }
.bee-order-page #sidebar .item-price-quantity .bz-qty { min-width: 18px; text-align: center; font-size: 14px; font-weight: 800; color: var(--bz-ink); }

/* Name, then price, then the multi-buy nudge from order-ladder.js — shown as the design's plain
   green line (the progress track is hidden; the message text is order-ladder.js's own). */
.bee-order-page #sidebar .name-quantity-container > .item-name { order: 0; }
.bee-order-page #sidebar .name-quantity-container > .price-quantity-inner { order: 1; }
.bee-order-page #sidebar .name-quantity-container > .bee-multibuy-meter { order: 2; margin-top: 4px; }
.bee-order-page #sidebar .bee-multibuy-meter__track { display: none !important; }
.bee-order-page #sidebar .bee-multibuy-meter__msg,
.bee-order-page #sidebar .bee-multibuy-meter__msg b,
.bee-order-page #sidebar .bee-multibuy-meter__saving {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #1B5E20 !important;
    font-family: var(--bz-font);
}

/* Empty state (js/order/basket-2026.js) */
.bee-order-page #sidebar .bz-basket-empty {
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    padding: 24px 8px;
}
.bee-order-page #sidebar .bz-basket-empty-icon { width: 64px; height: 64px; border-radius: 50%; background: #FFF1E7; display: grid; place-items: center; }
.bee-order-page #sidebar .bz-basket-empty strong { font-size: 17px; font-weight: 800; color: var(--bz-ink); }
.bee-order-page #sidebar .bz-basket-empty span:last-child { font-size: 14px; color: #6E655F; max-width: 240px; }

/* Assistant + its actions: kept (it is a feature), below the items. The old "Clear Basket" link is
   replaced by the header's Clear button, which forwards to it. */
.bee-order-page #sidebar .basket-assistant { order: 4; padding: 0 20px 10px; }
.bee-order-page #sidebar .basket-actions { order: 4; padding: 0 20px; }
.bee-order-page #sidebar .basket-actions .clear-basket { display: none !important; }
.bee-order-page #sidebar .assistant-chat-textbox { border-radius: 999px !important; border: 1px solid #E8DED6 !important; }

/* Totals + Checkout */
.bee-order-page #sidebar .trolleyBar > div:first-child > div:first-child {
    order: 7;
    float: none !important;
    padding: 0 20px;
    margin-top: 10px;
}
.bee-order-page #sidebar .fees_title { font-size: 13px; font-weight: 700; color: #6E655F !important; }
.bee-order-page #sidebar .bz-totals {
    order: 8;
    margin: 0;
    padding: 14px 20px 0;
    border-top: 1px solid #F0E8E1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
    font-family: var(--bz-font);
}
.bee-order-page #sidebar .bz-totals > div { display: flex; justify-content: space-between; }
.bee-order-page #sidebar .bz-totals dt { color: #5E5550; font-weight: 400; }
.bee-order-page #sidebar .bz-totals dd { margin: 0; font-weight: 700; color: var(--bz-ink); }
.bee-order-page #sidebar .bz-totals .bz-fees-note { font-weight: 600; color: #5E5550; }
.bee-order-page #sidebar .bottomCheckoutInfo {
    order: 9;
    position: static !important;
    width: auto !important;
    padding: 12px 20px 20px !important;
    margin: 0 !important;
    background: #fff !important;
    border: 0 !important;
}
.bee-order-page #sidebar .checkoutContainer { width: 100% !important; margin: 0 !important; }
.bee-order-page #sidebar .checkoutButton {
    width: 100% !important;
    height: 56px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: #FF6507 !important;
    color: #fff !important;
    font: 800 17px var(--bz-font) !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px !important;
    cursor: pointer;
}
.bee-order-page #sidebar .checkoutButton::after { content: attr(data-total); }
.bee-order-page #sidebar .checkoutButton:hover { filter: brightness(0.96); }
.bee-order-page #sidebar.bz-basket-is-empty .checkoutButton {
    background: #EFE7E1 !important;
    color: #8A817B !important;
    cursor: default;
}