/**
 * The Meat Master — Cart page (Section 7: G2–G6).
 * Added by Claude; brand variables ONLY; Alissa adjusts.
 * Enqueued by Modules\Storefront\Module::frontendStyles() on is_cart().
 */

/* G4 — desktop: items on the left, Order Summary + Checkout on the right. */
@media (min-width: 769px) {
    .mm-cart-layout {
        display: flex;
        align-items: flex-start;
        gap: 2rem;
    }
    .mm-cart-layout .woocommerce-cart-form { flex: 1 1 auto; min-width: 0; }
    .mm-cart-layout .cart-collaterals {
        flex: 0 0 340px;
        width: 340px;
        max-width: 340px;
    }
    .mm-cart-layout .cart-collaterals .cart_totals { width: 100%; float: none; }
}

/* Order Summary panel. */
.cart_totals {
    background: var(--base-2);
    border: 1px solid var(--mm-border);
    border-radius: 12px;
    padding: 16px;
}

/* G2 — bigger cart thumbnails on desktop. */
.woocommerce-cart .woocommerce-cart-form .product-thumbnail img {
    width: 84px;
    height: 84px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--mm-border);
}

/* G5/G6 — coupon inside the Order Summary (after totals, above Checkout). */
.mm-cart-coupon {
    display: flex;
    gap: 8px;
    margin: 12px 0;
}
.mm-cart-coupon .input-text { flex: 1 1 auto; min-width: 0; background-color: #ffffff; }
.mm-cart-coupon .button {
    flex: 0 0 auto;
    background: var(--accent);
    border-color: var(--accent);
    color: var(--base);
}

/* G3 — thumbnails on mobile: keep them visible and tidy. */
@media (max-width: 768px) {
    .woocommerce .woocommerce-cart-form table.cart .product-thumbnail, .woocommerce-page #content .woocommerce-cart-form table.cart .product-thumbnail, .woocommerce-page .woocommerce-cart-form table.cart .product-thumbnail {
        display: block;
        text-align: left!important;
    }
    .woocommerce-cart .woocommerce-cart-form .product-thumbnail img { width: 64px; height: 64px; }
    .mm-cart-coupon { flex-wrap: wrap; }
    .woocommerce .woocommerce-cart-form table.shop_table_responsive tr td::before, .woocommerce-page .woocommerce-cart-form table.shop_table_responsive tr td::before {
        display:none;
    }
}

/* G3 — mobile cart: turn the WooCommerce <table> into clean item cards.
   Default responsive behaviour stacks each cell into a tall, unlabelled column
   that reads badly. Rebuild each row as a card: thumbnail left; name / price /
   qty / subtotal stacked on the right; remove (x) top-right. */
@media (max-width: 768px) {
    .woocommerce-cart-form table.cart,
    .woocommerce-cart-form table.cart tbody,
    .woocommerce-cart-form table.cart tr {
        display: block;
        width: 100%;
    }
    .woocommerce-cart-form table.cart thead { display: none; }

    .woocommerce-cart-form table.cart tr.cart_item {
        display: grid;
        grid-template-columns: 76px 1fr;
        grid-template-areas:
            "thumb name"
            "thumb price"
            "thumb qty"
            "thumb subtotal";
        column-gap: 14px;
        row-gap: 4px;
        align-items: center;
        position: relative;
        padding: 16px 0;
        border-bottom: 1px solid var(--mm-border);
    }
    .woocommerce-cart-form table.cart tr.cart_item td {
        display: block;
        width: auto;
        margin: 0;
        padding: 0;
        border: 0;
        text-align: left;
    }
    /* Drop any theme data-title labels; we add our own where needed. */
    .woocommerce-cart-form table.cart tr.cart_item td::before { content: none; }

    .woocommerce-cart-form table.cart td.product-thumbnail { grid-area: thumb; }
    .woocommerce-cart-form table.cart td.product-thumbnail img {
        width: 76px;
        height: 76px;
        margin: 0;
    }
    .woocommerce-cart-form table.cart td.product-name {
        grid-area: name;
        font-weight: 600;
        line-height: 1.3;
    }
    .woocommerce-cart-form table.cart td.product-price {
        grid-area: price;
        color: var(--mm-muted);
        font-size: .9em;
    }
    .woocommerce-cart-form table.cart td.product-price::before {
        content: "Price: ";
        color: var(--mm-muted);
    }
    .woocommerce-cart-form table.cart td.product-quantity { grid-area: qty; }
    .woocommerce-cart-form table.cart td.product-quantity .quantity { margin: 0; }
    .woocommerce-cart-form table.cart td.product-subtotal {
        grid-area: subtotal;
        font-weight: 700;
        color: var(--contrast);
    }
    .woocommerce-cart-form table.cart td.product-subtotal::before {
        content: "Subtotal: ";
        color: var(--mm-muted);
        font-weight: 400;
        font-size: .85em;
    }
    /* Remove (x) tucked into the card's top-right. */
    .woocommerce-cart-form table.cart td.product-remove {
        position: absolute;
        top: 6px;
    }
    /* Actions row (Update cart) spans full width. */
    .woocommerce-cart-form table.cart tr:not(.cart_item) td.actions {
        display: block;
        width: 100%;
        padding: 12px 0;
        text-align: left;
    }

    .mm-cart-coupon { flex-wrap: wrap; }
}

/* ══════════════════════════════════════════════════════════════════════
   Round 3 uniformity — Cart page.
   Same treatment as checkout step cards + order-received card:
   white background, --mm-border, soft shadow, brand-green accents,
   dark-green (--contrast-2) prominent Total. No --mm-accent-tint.
   All rules prefixed with .woocommerce-cart so nothing above is disturbed
   on other pages.
   ══════════════════════════════════════════════════════════════════════ */

body.woocommerce-cart {
    color: var(--contrast);
}

/* ── Cart items table (left column) ────────────────────────────────── */
.woocommerce-cart .woocommerce-cart-form table.shop_table {
    background: var(--base) !important;
    border: 1px solid var(--mm-border) !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 3px rgba(36, 43, 56, .06) !important;
    border-collapse: separate !important;
    overflow: hidden;
}
.woocommerce-cart .woocommerce-cart-form table.shop_table thead th {
    background: transparent !important;
    color: var(--mm-muted) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: .06em;
    border: 0 !important;
    border-bottom: 1px solid var(--mm-border) !important;
    padding: 14px 16px !important;
}
.woocommerce-cart .woocommerce-cart-form table.shop_table tbody td {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(36, 43, 56, .06) !important;
    padding: 16px !important;
    vertical-align: middle;
    color: var(--contrast);
}
.woocommerce-cart .woocommerce-cart-form table.shop_table tbody tr:last-child td {
    border-bottom: 0 !important;
}
.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-name a {
    color: var(--contrast) !important;
    font-weight: 500;
    text-decoration: none;
}
.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-name a:hover {
    color: var(--accent) !important;
}
.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-price,
.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-subtotal {
    font-weight: 600;
    color: var(--contrast);
}
.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-remove a {
    color: var(--mm-muted);
    transition: color .12s ease;
}
.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-remove a:hover {
    color: var(--accent-red);
}

/* Update cart button — quiet outlined pill */
.woocommerce-cart .woocommerce-cart-form .actions button[name="update_cart"] {
    background: transparent !important;
    color: var(--contrast) !important;
    border: 1px solid var(--mm-border-strong) !important;
    padding: 10px 22px !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    transition: border-color .12s ease, color .12s ease;
}
.woocommerce-cart .woocommerce-cart-form .actions button[name="update_cart"]:hover {
    border-color: var(--accent) !important;
    color: var(--accent) !important;
}

/* ── Order Summary card (right column) — matches checkout step card ── */
.woocommerce-cart .cart_totals {
    background: var(--base);
    border: 1px solid var(--mm-border);
    border-radius: 10px;
    padding: 24px 22px;
    box-shadow: 0 4px 12px rgba(36, 43, 56, .08);
}
.woocommerce-cart .cart_totals h2 {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--contrast) !important;
    margin: 0 0 16px !important;
    letter-spacing: -.005em;
}

/* Totals table inside the panel */
.woocommerce-cart .cart_totals table.shop_table_responsive {
    background: transparent !important;
    border: 0 !important;
    border-collapse: collapse !important;
    margin: 0 !important;
}
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
    background: transparent !important;
    border: 0 !important;
    padding: 10px 0 !important;
    font-size: 14px !important;
    color: var(--contrast) !important;
    line-height: 1.4;
}
.woocommerce-cart .cart_totals table th {
    font-weight: 500 !important;
    color: var(--mm-muted) !important;
    text-align: left !important;
    width: 40%;
}
.woocommerce-cart .cart_totals table td {
    text-align: right !important;
    font-weight: 600 !important;
}
/* Order Total — prominent dark green with top separator */
.woocommerce-cart .cart_totals table tr.order-total th,
.woocommerce-cart .cart_totals table tr.order-total td {
    padding-top: 16px !important;
    padding-bottom: 4px !important;
    border-top: 1px solid var(--mm-border) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}
.woocommerce-cart .cart_totals table tr.order-total td {
    color: var(--contrast-2) !important;
    font-size: 20px !important;
}
.woocommerce-cart .cart_totals table tr.order-total small,
.woocommerce-cart .cart_totals table small.includes_tax {
    display: inline-block;
    font-size: 12px;
    font-weight: 400;
    color: var(--mm-muted);
    margin-left: 6px;
}

/* Coupon input inside the panel — clean brand-consistent inputs */
.woocommerce-cart .mm-cart-coupon {
    display: flex;
    gap: 8px;
    margin: 16px 0 12px !important;
}
.woocommerce-cart .mm-cart-coupon .input-text {
    flex: 1 1 auto;
    min-width: 0;
    background: var(--base) !important;
    border: 1px solid var(--mm-border-strong) !important;
    border-radius: 6px !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    color: var(--contrast) !important;
    box-sizing: border-box;
}
.woocommerce-cart .mm-cart-coupon .input-text:focus {
    outline: none;
    border-color: var(--accent) !important;
}
.woocommerce-cart .mm-cart-coupon button.button {
    flex: 0 0 auto;
    background: var(--accent) !important;
    color: var(--base) !important;
    border: 0 !important;
    padding: 10px 18px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 6px rgba(0, 147, 99, .25);
}
.woocommerce-cart .mm-cart-coupon button.button:hover {
    background: var(--contrast-2) !important;
}

/* "Proceed to Checkout" — the big brand-green CTA */
.woocommerce-cart .wc-proceed-to-checkout {
    padding: 12px 0 0 !important;
    margin: 0 !important;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
    display: block !important;
    width: 100% !important;
    background: var(--accent) !important;
    color: var(--base) !important;
    border: 0 !important;
    padding: 14px 20px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-align: center;
    border-radius: 6px !important;
    box-shadow: 0 2px 6px rgba(0, 147, 99, .25);
    transition: background-color .12s ease, box-shadow .12s ease;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
    background: var(--contrast-2) !important;
    box-shadow: 0 4px 12px rgba(0, 147, 99, .3);
}

/* Mobile — tables collapse to blocks, cards get tighter padding */
@media (max-width: 700px) {
    .woocommerce-cart .cart_totals {
        padding: 20px 16px !important;
    }
    .woocommerce-cart .woocommerce-cart-form table.shop_table {
        box-shadow: none !important;
    }
}

.wc-block-mini-cart__badge {
    color: var(--base);
}