/* MFBC Catering Retrofit — Wave 1 · Sticky cart bottom sheet
 * Dark Smokehouse Editorial palette matches memphisfirebbq.com brand.
 * Mobile-first; visible at all viewport widths.
 */

.mf-sticky-cart {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9990; /* above Flatsome footer, below cookie banner */
    background: #0c120c; /* MFBC dark-smokehouse background */
    color: #f8a20e; /* MFBC amber accent for legibility */
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.4);
    font-family: "DM Sans", "Santa Ana", sans-serif;
    animation: mf-sticky-cart-slideup 0.24s ease-out;
}

@keyframes mf-sticky-cart-slideup {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

.mf-sticky-cart__content {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.mf-sticky-cart__count {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.mf-sticky-cart__total {
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
    flex: 1;
    text-align: center;
}

/* WooCommerce renders total inside .woocommerce-Price-amount — override its default color */
.mf-sticky-cart__total .woocommerce-Price-amount {
    color: #ffffff !important;
}

.mf-sticky-cart__cta {
    background: #f8a20e;
    color: #0c120c !important;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, transform 0.1s ease;
    font-size: 0.9rem;
}

.mf-sticky-cart__cta:hover,
.mf-sticky-cart__cta:focus {
    background: #ffb833;
    transform: translateY(-1px);
    color: #0c120c !important;
    text-decoration: none;
}

/* Specificity guard: on /cart/ + /checkout/ Flatsome's `body.woocommerce a`
 * rule tints links amber (matching MFBC brand primary) which was making
 * the CTA text invisible (amber-on-amber pill = blank badge). Over-qualify
 * with body class + tag + class to guarantee win over Flatsome cascade. */
body.woocommerce-cart .mf-sticky-cart .mf-sticky-cart__content a.mf-sticky-cart__cta,
body.woocommerce-checkout .mf-sticky-cart .mf-sticky-cart__content a.mf-sticky-cart__cta,
body.woocommerce-page .mf-sticky-cart .mf-sticky-cart__content a.mf-sticky-cart__cta,
.mf-sticky-cart .mf-sticky-cart__content a.mf-sticky-cart__cta {
    color: #0c120c !important;
    background: #f8a20e !important;
    text-decoration: none !important;
}
body.woocommerce-cart .mf-sticky-cart .mf-sticky-cart__content a.mf-sticky-cart__cta:hover,
body.woocommerce-checkout .mf-sticky-cart .mf-sticky-cart__content a.mf-sticky-cart__cta:hover,
.mf-sticky-cart .mf-sticky-cart__content a.mf-sticky-cart__cta:hover {
    color: #0c120c !important;
    background: #ffb833 !important;
}

/* Prevent page content from being obscured by the sticky bar */
body.mf-has-sticky-cart {
    padding-bottom: 4.5rem;
}

/* Toast — briefly-visible confirmation after successful add-to-cart */
.mf-toast {
    position: fixed;
    left: 50%;
    bottom: 5.5rem; /* above the sticky cart bar */
    transform: translateX(-50%) translateY(1rem);
    z-index: 9995;
    background: #0c120c;
    color: #ffffff;
    padding: 0.7rem 1.1rem;
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    font-family: "DM Sans", "Santa Ana", sans-serif;
    font-size: 0.9rem;
    max-width: calc(100vw - 2rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transition: opacity 0.24s ease, transform 0.24s ease;
    pointer-events: none;
}

.mf-toast--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.mf-toast strong {
    color: #f8a20e;
}

/* Button state — Added ✓ transient
 * Specificity note: flatsome-child/style.css ships
 * `.button.primary, ... { background-color: var(--mf-amber) !important; }`
 * (2 classes = specificity 0,2,0). A bare `.mf-btn--added` (0,1,0) loses that
 * !important tie regardless of stylesheet load order, so the confirmation
 * state silently rendered amber instead of emerald. Qualify with both real
 * button classes (`.add_to_cart_button.ajax_add_to_cart`, always present on
 * these elements) to reach 0,3,0 and win unambiguously. */
.add_to_cart_button.ajax_add_to_cart.mf-btn--added {
    display: inline-block !important; /* see visibility note below */
    background: #059669 !important; /* emerald for confirmation */
    color: #ffffff !important;
    pointer-events: none;
    transition: background 0.2s ease;
}

/* Quantity stepper — replaces Add to cart after transition. Same
 * specificity fix as .mf-btn--added above. */
.add_to_cart_button.ajax_add_to_cart.mf-btn--stepper {
    display: inline-block !important; /* see visibility note below */
    padding: 0.15rem !important;
    background: transparent !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    color: inherit !important;
}

/* Visibility note (both rules above): WooCommerce's core wc-add-to-cart.js
 * adds a plain `.added` class to the button in the SAME success handler
 * that fires `added_to_cart` — before our handler runs. flatsome-shop.css
 * ships `.add_to_cart_button.added { display: none; }`, so without the
 * `display: inline-block !important` above, both the "Added ✓" phase and
 * the stepper phase render correctly into the DOM but are never visible;
 * the button just disappears. Confirmed live via computed-style inspection
 * before this fix (getBoundingClientRect() returned 0×0 for the button).
 *
 * WC's core script also inserts a sibling "View cart" link
 * (`a.added_to_cart.wc-forward`) after the button on success. Hide it
 * while our own in-place state is showing — the whole point of this
 * feature is to keep the customer's attention on the product tile instead
 * of routing them toward the cart page. */
.add_to_cart_button.mf-btn--added ~ a.added_to_cart,
.add_to_cart_button.mf-btn--stepper ~ a.added_to_cart {
    display: none !important;
}

.mf-stepper {
    /* !important required: flatsome.css ships `.button span { display:
     * inline-block; }` (class+element = specificity 0,1,1), which otherwise
     * outranks this class-only selector (0,1,0) and forces inline-block,
     * stacking the −/qty/+ children into a vertical blob instead of the
     * intended horizontal pill. Confirmed live via computed-style dump
     * during the Task 1.5 walk. */
    display: inline-flex !important;
    align-items: center;
    gap: 0.25rem;
    background: #ffffff;
    border-radius: 999px;
    padding: 0.15rem;
}

.mf-stepper__btn {
    /* !important on box-model props: flatsome.css's `.button, button, ...`
     * element-selector rule ships `padding: 0 1.2em` (~19px/side) and
     * `box-sizing: border-box`. Our class selector (0,1,0) outranks the
     * bare `button` branch of that selector list (0,0,1) for properties we
     * DO set, but we weren't setting `padding`, so its ~38px total padding
     * survived and inflated the shrink-to-fit box well past our intended
     * 28px circle. Explicitly zeroing padding/margin here fixes it. */
    box-sizing: border-box !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 0 !important;
    min-height: 0 !important; /* flatsome's `min-height: 2.5em` (~40px) always
                                  wins over a smaller `height` per the CSS sizing
                                  algorithm (max(height, min-height)) regardless
                                  of !important/specificity — must zero it too. */
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50%;
    border: none;
    background: #f8a20e;
    color: #0c120c;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background 0.15s ease;
}

.mf-stepper__btn:hover,
.mf-stepper__btn:focus {
    background: #ffb833;
}

.mf-stepper__qty {
    min-width: 1.5rem;
    text-align: center;
    font-weight: 700;
    color: #0c120c;
}

/* Mobile cart page — stacked cards on Dark Smokehouse (Task 1.7 · polished 2026-09-04)
 * Palette matches sticky cart bar: bg #0c120c, amber #f8a20e, white text.
 * The cart form and collaterals block render as floating dark cards so they
 * stay coherent regardless of what surrounding container Flatsome wraps
 * `/cart/` in. Selectors qualified with `.mf-cart-form` wrapper per Ruling 9
 * — Flatsome's own WC cart-table CSS competes at bare selector; the wrapper
 * pushes us to unambiguous priority. */
.mf-cart-form {
    max-width: 720px;
    margin: 0 auto;
    padding: 1rem;
    background: #0c120c;
    color: #ffffff;
    border-radius: 12px;
}
/* Flatsome's .woocommerce-cart-form__contents (Flatsome default cream cart bg)
 * paints the <ul> cream — kill it so our dark form shows through. */
.mf-cart-form .mf-cart-list,
.mf-cart-form ul.woocommerce-cart-form__contents,
form.mf-cart-form .woocommerce-cart-form__contents {
    background: transparent !important;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mf-cart-item {
    display: grid;
    grid-template-columns: 80px 1fr 28px;
    grid-gap: 0.75rem;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    align-items: center;
}
.mf-cart-item:last-child { border-bottom: none; }

.mf-cart-item__media img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 10px;
}

.mf-cart-item__body { min-width: 0; padding-right: 0.25rem; }
.mf-cart-form .mf-cart-item__name {
    font-family: "DM Sans", "Santa Ana", sans-serif;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.3;
    margin-bottom: 0.25rem;
    color: #ffffff;
}
.mf-cart-form .mf-cart-item__name a { color: #ffffff !important; text-decoration: none; }
.mf-cart-form .mf-cart-item__name a:hover { color: #f8a20e !important; }
.mf-cart-form .mf-cart-item__variation {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.62);
    margin-bottom: 0.4rem;
}

.mf-cart-item__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

/* Qty input — dark on dark, amber focus ring */
.mf-cart-form .mf-cart-item__qty-wrap .quantity input.qty {
    width: 3.25rem;
    text-align: center;
    padding: 0.4rem;
    font-size: 1rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 6px;
    color: #ffffff !important;
}
.mf-cart-form .mf-cart-item__qty-wrap .quantity input.qty:focus {
    outline: none;
    border-color: #f8a20e !important;
    background: rgba(248, 162, 14, 0.08) !important;
}
/* Flatsome's built-in +/- stepper buttons — dark theme */
.mf-cart-form .mf-cart-item__qty-wrap .quantity .plus,
.mf-cart-form .mf-cart-item__qty-wrap .quantity .minus {
    background: transparent !important;
    color: #f8a20e !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    font-weight: 700;
}
.mf-cart-form .mf-cart-item__qty-wrap .quantity .plus:hover,
.mf-cart-form .mf-cart-item__qty-wrap .quantity .minus:hover {
    background: rgba(248, 162, 14, 0.10) !important;
    border-color: rgba(248, 162, 14, 0.4) !important;
}

.mf-cart-item__subtotal {
    font-weight: 700;
    font-size: 1.05rem;
    color: #f8a20e;
}
/* WooCommerce wraps the price in <span class="woocommerce-Price-amount"> with
 * its own inherited near-black color — the outer .mf-cart-item__subtotal amber
 * never reaches the inner span without an explicit override. Same pattern I
 * solved for .mf-sticky-cart__total in Task 1.2. */
.mf-cart-form .mf-cart-item__subtotal .woocommerce-Price-amount,
.mf-cart-form .mf-cart-item__subtotal .woocommerce-Price-currencySymbol,
.mf-cart-form .mf-cart-item__subtotal bdi {
    color: #f8a20e !important;
}

.mf-cart-form .mf-cart-item__remove {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    justify-self: end;
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 1.5rem;
    line-height: 1;
    text-decoration: none;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color 0.15s ease, background 0.15s ease;
}
.mf-cart-form .mf-cart-item__remove:hover {
    color: #f8a20e !important;
    background: rgba(248, 162, 14, 0.10);
}

/* Hide the vestigial Update Cart button (JS handles live updates) */
.mf-cart-update-hidden { display: none !important; }

/* Cart collaterals (subtotal/total + checkout button) — dark inset card */
.mf-cart-collaterals {
    max-width: 720px;
    margin: 1.25rem auto 0 auto;
    padding: 1.5rem 1.25rem;
    background: #0c120c;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
}
/* Flatsome/WC template ships a vestigial empty <thead>-only table above the
 * real shop_table containing "Cart totals" — the h2 below already says the
 * same thing. Hide the redundant placeholder. */
.mf-cart-collaterals .cart_totals > table:first-of-type:not(.shop_table) {
    display: none !important;
}
.mf-cart-collaterals .cart_totals h2 {
    color: #ffffff !important;
    font-family: "DM Sans", "Santa Ana", sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 1rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
/* WC's cart totals renders a <table>; restyle for dark bg + amber accents */
.mf-cart-collaterals .cart_totals table,
.mf-cart-collaterals .cart_totals tbody,
.mf-cart-collaterals .cart_totals tr,
.mf-cart-collaterals .cart_totals th,
.mf-cart-collaterals .cart_totals td {
    background: transparent !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}
.mf-cart-collaterals .cart_totals table { width: 100%; border: none !important; margin: 0 !important; }
.mf-cart-collaterals .cart_totals table.shop_table th,
.mf-cart-collaterals .cart_totals .shop_table th {
    color: rgba(255, 255, 255, 0.75) !important;
    font-weight: 500 !important;
    text-align: left;
    padding: 0.55rem 0 !important;
    font-size: 0.95rem;
    text-transform: none !important;
}
.mf-cart-collaterals .cart_totals table.shop_table td,
.mf-cart-collaterals .cart_totals .shop_table td {
    text-align: right;
    color: #ffffff !important;
    font-weight: 700 !important;
    padding: 0.55rem 0 !important;
    font-size: 0.95rem;
}
.mf-cart-collaterals .cart_totals table.shop_table .order-total th,
.mf-cart-collaterals .cart_totals table.shop_table .order-total td,
.mf-cart-collaterals .cart_totals .shop_table tr.order-total th,
.mf-cart-collaterals .cart_totals .shop_table tr.order-total td {
    color: #f8a20e !important;
    font-size: 1.15rem !important;
    padding-top: 0.85rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
}
.mf-cart-collaterals .cart_totals .woocommerce-Price-amount {
    color: inherit !important;
}
/* Proceed to Checkout — amber pill, matches sticky cart CTA + toast strong */
.mf-cart-collaterals .wc-proceed-to-checkout {
    padding-top: 1.25rem !important;
}
/* Checkout button — over-qualify to beat Flatsome's .button.alt + .checkout .button */
.mf-cart-collaterals .wc-proceed-to-checkout .checkout-button,
.mf-cart-collaterals .wc-proceed-to-checkout a.checkout-button,
.mf-cart-collaterals a.checkout-button.button,
.mf-cart-collaterals a.checkout-button.button.alt,
.mf-cart-collaterals .checkout-button.button.alt.wc-forward {
    background: #f8a20e !important;
    background-color: #f8a20e !important;
    color: #0c120c !important;
    font-weight: 700 !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 0.9rem 1.5rem !important;
    text-align: center;
    display: block !important;
    width: 100%;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.95rem !important;
    transition: background 0.15s ease, transform 0.1s ease;
    box-shadow: 0 4px 14px rgba(248, 162, 14, 0.25);
    text-shadow: none !important;
}
.mf-cart-collaterals .wc-proceed-to-checkout .checkout-button:hover,
.mf-cart-collaterals .wc-proceed-to-checkout a.checkout-button:hover,
.mf-cart-collaterals a.checkout-button.button:hover,
.mf-cart-collaterals a.checkout-button.button.alt:hover {
    background: #ffb833 !important;
    background-color: #ffb833 !important;
    color: #0c120c !important;
    transform: translateY(-1px);
    text-decoration: none;
}
/* Shipping calc, coupon rows inside collaterals — dark link color */
.mf-cart-collaterals a { color: #f8a20e !important; }

/* Kill wishlist on /cart/ page too — upsells/related bypass the surface
 * gate (cart page isn't a catering page or product-category). Uber Eats
 * has no wishlist in checkout flow — matches DoD. Merch surfaces (/shop/,
 * /apparel/, category archives) still show wishlist normally. */
body.woocommerce-cart .yith-wcwl-add-to-wishlist,
body.woocommerce-cart .yith-wcwl-add-button,
body.woocommerce-cart .yith-wcwl-wishlistaddedbrowse,
body.woocommerce-cart .wishlist-button {
    display: none !important;
}

/* ============================================================
 * FABRIC ELEVATION -- /cart/ depth pass (Chef 2026-09-04)
 * Ports arch's signed elevation scale (Fabric index.css) into
 * the Smokehouse palette. Shadow math is a palette-invariant
 * structural token; crown highlight re-tinted cool-blue to
 * warm amber (candlelight on wood, not moonlight on slate).
 *
 * Composition reads page -> form (+0.5 subheader) -> item rows
 * (+1 banner cards) -> collaterals (+2 active soloist) ->
 * checkout button (+3 floating). Each step bumps exactly one
 * signed tier -- eye reads sequence, not stack.
 * ============================================================ */

/* Cart form = +0.5 SUBHEADER: ghost-lift work-surface holding
 * the item rows. Reads as "the ordering plane," not a competing card. */
.woocommerce form.mf-cart-form {
    background: rgba(18, 12, 8, 0.55) !important;
    border: 1px solid rgba(248, 220, 170, 0.08) !important;
    border-radius: 14px !important;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.30),
        inset 0 0.5px 0 rgba(248, 220, 170, 0.14) !important;
    padding: 12px !important;
}

/* Each cart line = +1 BANNER: content-carrying lift. Item rows
 * are distinct nested cards, not divider-separated stripes. */
.woocommerce form.mf-cart-form .mf-cart-item {
    background: rgba(28, 20, 14, 0.65) !important;
    border: 1px solid rgba(248, 220, 170, 0.10) !important;
    border-bottom: 1px solid rgba(248, 220, 170, 0.10) !important;
    border-radius: 10px !important;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(248, 220, 170, 0.18) !important;
    padding: 12px !important;
    margin-bottom: 10px !important;
}
.woocommerce form.mf-cart-form .mf-cart-item:last-child {
    margin-bottom: 0 !important;
}

/* Thumbnail = micro-lift whisper: product feels tactile on
 * its row-card, not pasted on. Same crown tint = family. */
.woocommerce form.mf-cart-form .mf-cart-item__media img {
    border-radius: 10px !important;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(248, 220, 170, 0.22) !important;
}

/* Collaterals = +2 ACTIVE: the soloist. Strongest resting lift
 * on the page -- carries the money and the CTA. */
.woocommerce .mf-cart-collaterals,
.woocommerce-page .mf-cart-collaterals {
    background: rgba(24, 16, 10, 0.75) !important;
    border: 1px solid rgba(248, 220, 170, 0.14) !important;
    border-radius: 12px !important;
    box-shadow:
        0 7px 18px rgba(0, 0, 0, 0.34),
        inset 0 1.5px 0 rgba(248, 220, 170, 0.24) !important;
}

/* Checkout button = +3 FLOATING: the genuinely-lifted tier.
 * Two-layer outer cast (contact + diffuse) + bright warm crown
 * makes it read pressed-outward from the collaterals card. */
.woocommerce .mf-cart-collaterals .checkout-button,
.woocommerce-page .mf-cart-collaterals .checkout-button {
    box-shadow:
        0 6px 16px rgba(248, 162, 14, 0.30),
        0 16px 40px rgba(0, 0, 0, 0.38),
        inset 0 1.5px 0 rgba(255, 240, 210, 0.45) !important;
}