/*!
 * MicroBite POS — cloned product modal, layout restatement.
 *
 * [imp1-a] MOVED HERE VERBATIM from a `<style>` block echoed by
 * `MBPOS_Enqueue::inline_toast_css()`. Not one declaration changed in the move,
 * `!important` included: this slice is about WHERE the rules live, and mixing a
 * relocation with a behaviour change is how a refactor becomes a bug hunt.
 *
 * WHY THE RULES EXIST AT ALL. The lightbox clones the product markup into
 * `.mbpos-lightbox__content--live`. The clone does not carry the `brxe-*`
 * classes Bricks hangs its global-class styles on, so the footer, the qty
 * stepper and the cover sizing arrive unstyled. These rules restate what Bricks
 * would have supplied, using `--mbpos-*` tokens with Bricks-token fallbacks so
 * the same file serves the Bricks template and the shortcode layout.
 *
 * WHY THEY WERE MOVED OUT OF PHP. Three reasons, in order of how much they
 * have already cost:
 *
 *   1. NO FENCE COULD SEE THEM. Every cascade fence in this repo
 *      (css-cascade-test-fix4, css-pair-test-fix2, css-hover-test-hov1) reads
 *      `assets/css/*.css`. A rule inside a PHP heredoc was invisible to all of
 *      them — which is exactly how `par1-b` happened: `mbpos-pos-layout.css`
 *      declared the footer padding at 28px 14px, this block overrode it at
 *      24/12 with `!important`, and the Done bar was built against the dead
 *      number. A fence that scans stylesheets could not have caught it. Now it
 *      can.
 *   2. `gal2` was the same shape a year earlier: this block's `!important`
 *      beat the cropping fix in the asset sheet regardless of what that sheet
 *      said, and the `--fill` rule then needed its own `!important` to fight
 *      its neighbour.
 *   3. It is the prerequisite for removing the `!important`s at all. See
 *      OPEN-WORK P10 — the disease is that this file and
 *      `mbpos-pos-layout.css` are two writers for the same elements; the
 *      `!important` is the symptom, and dropping it before the duplication is
 *      resolved just hands the argument to whichever sheet enqueues last.
 *
 * LOADING. Enqueued on every POS page, Bricks or shortcode — the same gate the
 * echo had (`MBPOS_Pickup_Modal::is_pos_page()`), because the cloned modal
 * exists on both. `mbpos-pos-layout.css` is shortcode-gated and does NOT, which
 * is the asymmetry that makes the duplication hard to see from either file.
 *
 * WHEN THE `!important`s COME OFF (next slice, do not do it here): the
 * mechanism should be SPECIFICITY, not enqueue order. These selectors sit at
 * (0,2,0) and tie with `mbpos-pos-layout.css`'s `.mbpos-lightbox--product …`
 * rules; one more class scopes them above the tie and makes the winner
 * independent of which handle prints first. Order-dependence between two of our
 * own sheets is the fragility fix4/fix7 spent an arc removing.
 *
 * ── [imp1-b] THE `!important`s ARE GONE, AND WHAT REPLACED THEM ──────────
 *
 * Every rule below carried `!important` until 1.69.94. They now win the same
 * arguments on SPECIFICITY: each selector gained the `[data-mbpos]` island
 * scope, taking the file from (0,2,0) to (0,3,0) — above every rule in
 * `mbpos-pos-layout.css` and `mbpos-lightbox.css` that touches the same
 * elements, of which the tightest were (0,2,0) TIES:
 *
 *     .mbpos-lightbox--product .mbpos-products-detail__footer   padding, radius,
 *                                                               shadow, position…
 *     .mbpos-lightbox--product .mbpos-products-detail__qty      border-radius
 *     [data-modal-style="split"].mbpos-products-detail__wrapper padding-bottom
 *     [data-mbpos] .mbpos-products-detail__add                  display, gap…
 *
 * A tie is settled by enqueue order, which is why `!important` was reached for
 * in the first place. (0,3,0) settles it by rank, so which handle prints first
 * stops mattering — the fragility fix4/fix7 spent an arc removing.
 *
 * `[data-mbpos]` rather than a doubled class: it is the repo's existing
 * isolation scope (CSS-ISOLATION-STANDARD Rule 1, everything at (0,2,0)–(0,4,0)),
 * so this adds no assumption that hundreds of other rules do not already rest
 * on. A doubled class would have worked and read as a trick.
 *
 * ── WHAT THIS FILE IS NOT ────────────────────────────────────────────────
 *
 * NOT a duplicate of `mbpos-pos-layout.css`, and the imp1-a handover was wrong
 * to plan for deleting "the losing declarations" there. The audit killed that
 * step: those rules style the IN-PAGE SOURCE markup, this file styles the
 * `--live` CLONE of it. Two surfaces, similar rules, both needed. The overlap
 * looked like duplication only because `!important` made one side invisible.
 *
 * So the ownership line is: **`--live` belongs to this file, everything else
 * belongs to the layout sheet**, and (0,3,0) states that in the cascade rather
 * than in a comment.
 *
 * @since 1.69.93-epo.imp1-a · retiered 1.69.94-epo.imp1-b
 */
/* Bottom padding so the sticky footer does not cover content. Smaller than
   the old TC EPO value — the native footer is a single fixed-height row. */
[data-mbpos] .mbpos-lightbox__content--live .mbpos-products-detail__wrapper {
    padding-bottom: 140px;
}
/* Footer layout — mirrors the Bricks global class settings since the cloned
   modal footer does not have the brxe-* class Bricks targets */
[data-mbpos] .mbpos-lightbox__content--live .mbpos-products-detail__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--mbpos-space-m, var(--space-m, 1.6rem)) var(--mbpos-space-xs, var(--space-xs, 0.8rem));
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    background-color: var(--mbpos-color-surface, var(--light, #fff));
    border-bottom-left-radius: var(--mbpos-radius-s, var(--radius-s, 0.6rem));
    border-bottom-right-radius: var(--mbpos-radius-s, var(--radius-s, 0.6rem));
    box-shadow: 0 0.7rem 3rem 0 hsla(240, 5%, 41%, 0.2);
}
[data-mbpos] .mbpos-lightbox__content--live .mbpos-products-detail__add {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
}
[data-mbpos] .mbpos-lightbox__content--live .mbpos-products-detail__add--price {
    font-size: var(--mbpos-font-size-base, var(--text-m, 1.6rem));
}
/* Qty +/- control — Bricks applies flex via brxe-* class which the clone lacks */
[data-mbpos] .mbpos-lightbox__content--live .mbpos-products-detail__qty {
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow: hidden;
    border: .1rem solid var(--mbpos-qty-border-color, var(--dark-20));
    border-radius: var(--mbpos-radius-s, var(--mbpos-radius-s));
    background: var(--mbpos-color-surface, var(--light, #fff));
}
/* Cap product image height so large images do not push the footer off screen.
   gal2: this block used to force object-fit:cover on EVERY img inside
   cover-wrap, which is what was still cropping photos here even after the
   cropping fix in mbpos-pos-layout.css, because this inline block is
   echoed globally (any page showing the "live" cloned modal content, not
   just Bricks pages) and its !important always won regardless of what the
   asset stylesheet said. [imp1-b] The !important is gone; the (0,3,0) scope
   wins the same argument, and it still wins it — the split-modal rule this
   used to fight sits at (0,2,0). Now split: the blurred backdrop layer keeps
   object-fit:cover (intentional, a cropped and blurred fill), the sharp
   foreground photo gets object-fit:contain so nothing is cut off. */
[data-mbpos] .mbpos-lightbox__content--live .mbpos-products-detail__cover-wrap,
[data-mbpos] .mbpos-lightbox__content--live .mbpos-products-detail__cover {
    max-height: 280px;
    overflow: hidden;
    width: 100%;
}
[data-mbpos] .mbpos-lightbox__content--live .mbpos-products-detail__cover-bg {
    width: 100%;
    height: 100%;
    max-height: 280px;
    object-fit: cover;
}
[data-mbpos] .mbpos-lightbox__content--live .mbpos-products-detail__cover.css-filter {
    width: 100%;
    height: 100%;
    max-height: 280px;
    object-fit: contain;
}
[data-mbpos] .mbpos-lightbox__content--live .mbpos-products-detail__cover--fill.css-filter {
    /* gal5: mbposApplyFit adds this class when the server decided the photo is
       close enough to 16:9 to crop cleanly. It used to need its own !important
       to beat the generic `.cover.css-filter` rule above.
       [imp1-b] It no longer does, and nothing replaced it: both are (0,4,0)
       and this one is LATER IN THE SAME FILE, which is a stable, readable tie
       — source order within one stylesheet is authored order, not the
       cross-sheet enqueue lottery the !important existed to escape. Keep it
       below the generic rule. */
    object-fit: cover;
}