/* ============================================================
   Carlton Foundation — Cart Page Style Overrides (v3)
   Drop into Elementor > Site Settings > Custom CSS
   ============================================================ */

/* ---- 1. Fix header overlap / top cutoff ---------------------- */
.woocommerce-cart main#content,
.woocommerce-cart .page-content {
    padding-top: 140px;
    padding-bottom: 80px;
}
@media (max-width: 1024px) {
    .woocommerce-cart main#content,
    .woocommerce-cart .page-content {
        padding-top: 110px;
        padding-bottom: 60px;
    }
}
@media (max-width: 600px) {
    .woocommerce-cart main#content,
    .woocommerce-cart .page-content {
        padding-top: 90px;
        padding-bottom: 40px;
    }
}

/* ---- 2. Constrain width --------------------------------------- */
.woocommerce-cart .wp-block-woocommerce-cart {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ---- 3. Force two-column layout (fixes the wrapping) --------- */
.woocommerce-cart .wc-block-cart.wc-block-components-sidebar-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 48px;
    align-items: start;
}

.woocommerce-cart .wc-block-cart__main {
    grid-column: 1;
    max-width: none !important;
    width: 100% !important;
}

.woocommerce-cart .wc-block-cart__sidebar {
    grid-column: 2;
    max-width: none !important;
    width: 100% !important;
    position: sticky;
    top: 140px;
}

@media (max-width: 900px) {
    .woocommerce-cart .wc-block-cart.wc-block-components-sidebar-layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .woocommerce-cart .wc-block-cart__sidebar {
        grid-column: 1;
        position: static;
    }
}

/* ---- 4. FONT — Albert Sans on cart elements (button excluded; it uses Muggsy) */
.woocommerce-cart .wc-block-components-product-name,
.woocommerce-cart .wc-block-cart-item__product,
.woocommerce-cart .wc-block-cart-item__product *,
.woocommerce-cart .wc-block-components-totals-item,
.woocommerce-cart .wc-block-components-totals-item *,
.woocommerce-cart .wc-block-components-formatted-money-amount,
.woocommerce-cart .wc-block-components-quantity-selector input,
.woocommerce-cart .wc-block-cart-items__header,
.woocommerce-cart .wc-block-cart-items__header *,
.woocommerce-cart .wc-block-components-title,
.woocommerce-cart .wc-block-components-express-payment__title-container,
.woocommerce-cart .wp-block-woocommerce-empty-cart-block h2,
.woocommerce-cart .wc-block-cart-item__remove-link,
.woocommerce-cart .wc-block-components-panel__button,
.woocommerce-cart .wc-block-components-totals-coupon-link {
    font-family: var(--font-albert-sans), sans-serif !important;
}

/* ---- 5. Typography ------------------------------------------- */
.woocommerce-cart .wp-block-woocommerce-cart h1,
.woocommerce-cart .wp-block-woocommerce-cart h2,
.woocommerce-cart .wc-block-components-title,
.woocommerce-cart .wc-block-cart-items__header,
.woocommerce-cart .wc-block-components-totals-item__label {
    color: #0c2b3f;
    font-weight: 700;
}

.woocommerce-cart .wc-block-cart-items__header {
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.08em;
    padding-bottom: 16px;
    border-bottom: 2px solid #0c2b3f;
}

.woocommerce-cart .wc-block-cart-item__product a,
.woocommerce-cart .wc-block-components-product-name {
    color: #0c2b3f !important;
    text-decoration: none;
    font-weight: 600;
}

.woocommerce-cart .wc-block-cart-item__product a:hover,
.woocommerce-cart .wc-block-components-product-name:hover {
    color: #c8102e;
    text-decoration: underline;
}

/* ---- 6. Cart line items -------------------------------------- */
.woocommerce-cart .wc-block-cart-items .wc-block-cart-items__row {
    padding: 24px 0;
    border-bottom: 1px solid #e5e5e5;
}

.woocommerce-cart .wc-block-cart-item__image img {
    border-radius: 12px;
}

.woocommerce-cart .wc-block-components-quantity-selector {
    border: 1px solid #0c2b3f;
    border-radius: 10px;
    overflow: hidden;
}
.woocommerce-cart .wc-block-components-quantity-selector button {
    color: #0c2b3f;
    background: transparent;
    transition: background 0.15s ease;
}
.woocommerce-cart .wc-block-components-quantity-selector button:hover {
    background: #f5f1e8;
}

.woocommerce-cart .wc-block-cart-item__remove-link {
    color: #8a8a8a;
    font-size: 13px;
}
.woocommerce-cart .wc-block-cart-item__remove-link:hover {
    color: #c8102e;
}

/* ---- 7. Cart totals sidebar (softer radius) ------------------ */
.woocommerce-cart .wp-block-woocommerce-cart-totals-block {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 2px 8px rgba(12, 43, 63, 0.04);
}

.woocommerce-cart .wc-block-components-totals-item {
    padding: 10px 0;
}

.woocommerce-cart .wc-block-components-totals-footer-item,
.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-size: 18px;
    font-weight: 700;
    color: #0c2b3f;
    border-top: 2px solid #0c2b3f;
    padding-top: 16px;
    margin-top: 8px;
}

/* ---- 8. Proceed to Checkout button ---------------------------
   NOTE: The existing Elementor custom code snippet already applies
   font-family "Muggsy" to .wc-block-cart__submit-button.contained.
   These rules only layer on top — we do NOT set font-family here
   so the existing snippet keeps winning for Muggsy.
---------------------------------------------------------------- */
.woocommerce-cart .wc-block-cart__submit-button,
.woocommerce-cart .wp-block-woocommerce-proceed-to-checkout-block a,
.woocommerce-cart a.wc-block-cart__submit-button {
    background: #0c2b3f !important;
    color: #ffffff !important;
    border: 2px solid #0c2b3f !important;
    border-radius: 12px !important;
    padding: 16px 32px !important;
    width: 100% !important;
    text-align: center !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 4px rgba(12, 43, 63, 0.15) !important;
}

.woocommerce-cart .wc-block-cart__submit-button:hover,
.woocommerce-cart .wp-block-woocommerce-proceed-to-checkout-block a:hover,
.woocommerce-cart a.wc-block-cart__submit-button:hover {
    background: #ffffff !important;
    color: #0c2b3f !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(12, 43, 63, 0.2) !important;
}

/* Make sure the inner text span picks up the button's font */
.woocommerce-cart .wc-block-cart__submit-button .wc-block-components-button__text {
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    text-transform: inherit !important;
    letter-spacing: inherit !important;
    color: inherit !important;
}

/* ---- 9. Express checkout buttons ---------------------------- */
.woocommerce-cart .wp-block-woocommerce-cart-express-payment-block {
    margin: 20px 0;
}
.woocommerce-cart .wc-block-components-express-payment {
    border-top: 1px solid #e5e5e5;
    padding-top: 20px;
}
.woocommerce-cart .wc-block-components-express-payment__title-container {
    color: #0c2b3f;
    font-weight: 600;
}

/* Round off the express pay buttons too so they match */
.woocommerce-cart .wc-block-components-express-payment__event-buttons > li > button,
.woocommerce-cart .wc-block-components-express-payment__event-buttons button {
    border-radius: 12px !important;
}

/* ---- 10. Empty cart ----------------------------------------- */
.woocommerce-cart .wp-block-woocommerce-empty-cart-block h2 {
    color: #0c2b3f;
    font-weight: 700;
    margin: 40px 0 20px;
}

@media (max-width: 900px) {
    .woocommerce-cart .wp-block-woocommerce-cart-totals-block {
        padding: 20px;
    }
}