/*
    Multi-buy quantity-discount UI (T-3681). AUTHORED, not ported — the legacy storefront
    has no shelf-edge surface for the new discount engine at all (rollout doc "Known gaps
    in v1"), so there is no legacy CSS to carry. Markup comes from
    MerchandiseGridRenderer.AppendLadder (card ladder, pill), OrderPage.razor (banner) and
    js/order/order-ladder.js (basket meter, savings strip).

    Palette matches the ported order chrome: #f60 / #ff7d3e are the site's button orange
    (order-nav.css .button_orange), #178a4c is this feature's one semantic green — savings.
    Fonts follow the order page's Verdana stack (order.css .product_name_small et al).

    Selector discipline: everything here is namespaced bee-multibuy*; nothing reaches into
    ported legacy classes, so order.min.css cannot be affected by loading this file on a
    page with no ladders.
*/

/* ── Grid card: tier ladder ─────────────────────────────────────────────────────────── */
/* (The MULTI-BUY corner pill was dropped 2026-08-03 along with the qty-1 shelf rung —
   three tier boxes now fill the strip, each wider and set larger below.) */
/* Emitted BELOW .product-button-container (owner direction 2026-08-03). On hover-capable
   devices it ships collapsed and slides open under the ADD/−+ bar when ANY part of the
   card is hovered — an OVERLAY against .product_box_Small_container (position:relative in
   order.min.css), so the grid never reflows mid-slide. Devices without hover keep it
   always-visible in flow: mobile discovery must not depend on a hover that cannot happen. */
.bee-multibuy {
    display: flex;
    clear: both;
    border-top: 1px solid #eee;
    background: #fafafa;
    font-family: Verdana, Geneva, sans-serif;
    text-align: center;
}

@media (hover: hover) {
    .bee-multibuy {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        z-index: 40;
        max-height: 0;
        overflow: hidden;
        box-shadow: 0 8px 12px rgba(0, 0, 0, .22);
        transition: max-height .28s ease;
    }

    .product_box_Small_container:hover .bee-multibuy {
        max-height: 48px;
    }

    /* The open strip must paint over the NEXT row's cards, not under them. */
    .product_box_Small_container:hover {
        z-index: 50;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bee-multibuy {
        transition: none;
    }
}

.bee-multibuy__rung {
    flex: 1;
    padding: 3px 0 4px;
    border-right: 1px solid #eee;
    transition: background .2s;
}

.bee-multibuy__rung:last-child {
    border-right: 0;
}

/* The sliding window: order-ladder.js moves this class as the cart quantity grows; the
   server emits the initial (quantity 0) window so cold paint needs no JS pass. */
.bee-multibuy__rung--hidden {
    display: none;
}

.bee-multibuy__rung--active {
    background: #fff1e8;
    outline: 2px solid #f60;
    outline-offset: -2px;
}

/* Postcode-gated ladders (alcohol/tobacco under an opted-in rule): server-rendered hidden
   for EVERY visitor so cached bytes are postcode-invariant; order-ladder.js removes this
   class when the Postcode cookie is known-unrestricted. */
.bee-multibuy--gated {
    display: none;
}

.bee-multibuy__qty {
    display: block;
    font-size: 9px;
    color: #777;
}

.bee-multibuy__price {
    display: block;
    font-size: 11px;
    color: #000;
}

.bee-multibuy__pct {
    display: block;
    font-size: 9px;
    color: #178a4c;
    min-height: 10px;
}

/* ── Page banner (OrderPage.razor, shown only when the shop group has ladders) ──────── */
.bee-multibuy-banner {
    background: linear-gradient(90deg, #f60, #ff7d3e);
    color: #fff;
    border-radius: 10px;
    padding: 9px 14px;
    font: 600 12px Verdana, Geneva, sans-serif;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 10px 8px;
}

.bee-multibuy-banner__pct {
    background: #fff;
    color: #f60;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 9.5px;
    flex: none;
}

/* ── Basket line meter (built by order-ladder.js inside .name-quantity-container) ───── */
.bee-multibuy-meter {
    margin-top: 6px;
    font-family: Verdana, Geneva, sans-serif;
}

.bee-multibuy-meter__track {
    display: flex;
    gap: 3px;
}

.bee-multibuy-meter__seg {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: #eee;
    transition: background .3s;
}

.bee-multibuy-meter__seg--filled {
    background: #f60;
}

.bee-multibuy-meter__msg {
    font-size: 9.5px;
    margin-top: 4px;
    color: #555;
}

.bee-multibuy-meter__msg b {
    color: #000;
}

.bee-multibuy-meter__saving {
    color: #178a4c;
    font-weight: bold;
}

/* ── Basket savings strip (order-ladder.js, after .simpleCart_items) ────────────────── */
.bee-multibuy-savings {
    margin: 10px 5px 10px 0;
    background: #e7f5ec;
    color: #0e6b39;
    font: bold 11px Verdana, Geneva, sans-serif;
    border-radius: 8px;
    padding: 7px 10px;
    text-align: center;
}