/**
 * Layout fixes (v1.11.1)
 *
 *   1. Mini cart — "Reserve & Collect" was wrapping to three lines in a
 *      half-width column
 *   2. Checkout summary — the "Collect from" block was overlapping the total
 *
 * Loaded last, after cart.css and checkout.css.
 */

/* =====================================================================
 * 1. MINI CART BUTTONS
 *
 * The two buttons shared an even 1fr 1fr split. "View bag" is eight
 * characters and "Reserve & Collect" is seventeen, so the longer label wrapped
 * to three lines while the shorter one sat in white space.
 *
 * The primary action gets the room it needs; the secondary takes what is left.
 * =================================================================== */

.widget_shopping_cart_content .buttons,
[class*="mini-cart"] .buttons,
[class*="cart-drawer"] .buttons {
    display: grid !important;
    grid-template-columns: minmax(88px, 0.8fr) minmax(150px, 1.2fr) !important;
    gap: 10px !important;
    align-items: stretch !important;
}

.widget_shopping_cart_content .buttons a.checkout,
[class*="mini-cart"] a.checkout,
[class*="cart-drawer"] a.checkout,
a.jw-minicart__reserve {
    padding: 13px 12px !important;
    font-size: 11px !important;
    letter-spacing: 0.04em !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    text-align: center !important;
}

.widget_shopping_cart_content .buttons a:not(.checkout),
[class*="mini-cart"] .buttons a:not(.checkout),
a.jw-minicart__view {
    padding: 13px 12px !important;
    font-size: 11px !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap !important;
}

/* Very narrow drawers: stack rather than squeeze */
@media (max-width: 420px) {
    .widget_shopping_cart_content .buttons,
    [class*="mini-cart"] .buttons,
    [class*="cart-drawer"] .buttons {
        grid-template-columns: 1fr !important;
    }
}

/*
 * "Customers also bought" sat between the items and the subtotal, pushing both
 * the total and the primary action below the fold. An upsell placed in front of
 * the checkout button costs more than it earns.
 */
.widget_shopping_cart_content .cross-sells,
[class*="mini-cart"] .cross-sells,
[class*="cart-drawer"] .cross-sells,
[class*="mini-cart"] .tf-mini-cart-tool,
[class*="cart-drawer"] .also-bought,
[class*="mini-cart"] [class*="also-bought"],
[class*="cart-drawer"] [class*="also-bought"] {
    display: none !important;
}

/* =====================================================================
 * 2. CHECKOUT SUMMARY — overlap
 *
 * "Collect from / Shree Kuber Gold" was printing on top of
 * "Payable at store / ₹107,818.94".
 *
 * Overlap means something in that column left normal flow — an absolute
 * position or a float inherited from the theme's own order-review styling,
 * which expects WooCommerce's table markup rather than our list markup.
 *
 * Every block in the summary is forced back into static flow. Verbose, but the
 * alternative is a customer reading two prices stacked on each other at the
 * exact moment they commit.
 * =================================================================== */

.jw-checkout__aside,
.jw-checkout-summary,
.jw-checkout-summary > *,
.jw-checkout__aside #order_review,
.jw-checkout__aside .woocommerce-checkout-review-order,
.jw-checkout__aside .jw-review,
.jw-checkout__aside .jw-review__items,
.jw-checkout__aside .jw-review__item,
.jw-checkout__aside .jw-review__totals,
.jw-checkout__aside .jw-review__row,
.jw-checkout-summary__store {
    position: static !important;
    float: none !important;
    clear: both !important;
    inset: auto !important;
    transform: none !important;
}

/* The aside itself stays sticky — only its children are forced static */
.jw-checkout__aside {
    position: sticky !important;
    top: 24px;
    align-self: start;
}

.jw-checkout-summary {
    display: block !important;
    overflow: visible !important;
}

.jw-checkout-summary__store {
    display: block !important;
    width: 100% !important;
    margin: 22px 0 0 !important;
    padding: 18px 0 0 !important;
    border-top: 1px solid var(--jw-charcoal-10, rgba(34,34,34,0.08)) !important;
}

.jw-checkout__aside .jw-review__totals {
    display: block !important;
    width: 100% !important;
    margin: 16px 0 0 !important;
    padding: 16px 0 0 !important;
}

.jw-checkout__aside .jw-review__row {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 16px;
    width: 100% !important;
    margin: 0 !important;
}

/*
 * If the summary is taller than the viewport, sticky pins the TOP and the
 * bottom is unreachable — the total and the collection address scroll out of
 * sight and never come back. Cap the height and let it scroll internally.
 */
@media (min-height: 600px) {
    .jw-checkout__aside {
        max-height: calc(100vh - 48px);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }
    .jw-checkout__aside::-webkit-scrollbar { width: 5px; }
    .jw-checkout__aside::-webkit-scrollbar-thumb {
        background: var(--jw-charcoal-20, rgba(34,34,34,0.16));
        border-radius: 4px;
    }
}

/* Short viewports: sticky adds nothing, so let it flow */
@media (max-height: 599px), (max-width: 900px) {
    .jw-checkout__aside {
        position: static !important;
        max-height: none !important;
        overflow: visible !important;
    }
}

/* Same treatment for the bag summary */
.jw-bag__aside,
.jw-bag-summary,
.jw-bag-summary > *,
.jw-bag-summary__rows,
.jw-bag-summary__row {
    position: static !important;
    float: none !important;
    transform: none !important;
}
.jw-bag__aside {
    position: sticky !important;
    top: 24px;
    align-self: start;
}
@media (max-width: 900px) {
    .jw-bag__aside { position: static !important; }
}