/*
    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.) */
/* clear:both — .prod150Price above it floats left (order.min.css). */
.bee-multibuy {
    display: flex;
    clear: both;
    border-top: 1px solid #eee;
    background: #fafafa;
    font-family: Verdana, Geneva, sans-serif;
    text-align: center;
}

.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;
}