/**
 * WooCommerce - Cart Page Styles
 * RESPONSIVE VERSION - relative units (%, rem)
 *
 * @package i-sport-theme
 * @version 2.0.0
 *
 * Base: 1rem = 16px
 * 100px / 1920px = 5.2083%
 */

:root {
    --color-primary: #05061C;
    --color-secondary: #373849;
    --color-border: #B4B4BB;
    --color-border-light: #F5F5F5;
    --color-bg-dark: #121227;
    --color-bg-light: #FFFFFF;
    --color-active: #CDCDD2;
    --color-hover: #E5E5E8;
    --font-primary: Inter, sans-serif;
    --font-heading: 'Oswald', sans-serif;
    /* Spacing tokens (Figma). Verified from box math: 331 - 267 image = 64 => 32px each. */
    --gap-section-small: 2rem;     /* product box padding top/bottom */
    --padding-section-small: 2rem; /* product box padding left/right */
}

/* ==========================================================================
   Cart Page Layout
   ========================================================================== */

/* Page wrapper */
.cart-page {
    width: 100%;
    background: var(--color-bg-light);
}

/* Shortcode wrapper - plain pass-through */
.cart-page .woocommerce {
    width: 100%;
    background: var(--color-bg-light);
}

/* Container (width: 1920, height: 982, padding-bottom: 120px, gap: 100px)
   Horizontal row holding article (left) + aside (right), edge-to-edge (no side padding).
   Proportional flex-grow (1340 : 480) keeps the column ratio exact and responsive. */
.cart-page .woocommerce-cart-page {
    display: flex;
    gap: 6.25rem;
    padding-bottom: 7.5rem;
    width: 100%;
    background: var(--color-bg-light);
    box-sizing: border-box;
}

/* article - left column / cart items container (box: 1340, content: 1240, height: 862, gap: 32px)
   100px left padding creates the left screen margin; content width = 1240. */
.cart-page .woocommerce-cart-form {
    flex: 1340 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding-left: 6.25rem;
    background: var(--color-bg-light); /* #FFFFFF */
    box-sizing: border-box;
    margin: 0;
}

/* aside - right column / cart totals container (box: 480, content: 380, height: 862)
   100px right padding creates the right screen margin; content width = 380. */
.cart-page .cart-collaterals {
    flex: 480 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding-right: 6.25rem;
    background: var(--color-bg-light); /* #FFFFFF */
    box-sizing: border-box;
    margin: 0;
    width: auto;
}

/* h2 - cart heading "Dein Warenkorb"
   Oswald 700, 64px (h2), line-height 125%, letter-spacing -1.5%, uppercase, #000000 */
.cart-page .cart-title {
    width: 100%;
    min-height: 8.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 4rem; /* 64px */
    line-height: 125%;
    letter-spacing: -0.015em;
    text-transform: uppercase;
    color: #000000;
}

/* Heading group: "Dein Warenkorb" + reservation notice (gap 32) */
.cart-page .cart-heading-block {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
}

/* Reservation notice under the heading */
.cart-page .cart-notice {
    width: 100%;
    margin: 0;
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 1rem; /* 16px */
    line-height: 150%;
    letter-spacing: 0;
    color: #000000;
}

/* ==========================================================================
   Cart Table
   ========================================================================== */
.woocommerce-cart-form {
    /* Add styles based on Figma design */
}

.woocommerce-cart-form__contents {
    width: 100%;
    border-collapse: collapse;
}

/* Cart items list (Figma Frame 5: gap 10px between product boxes) */
.cart-page .cart-items {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    width: 100%;
}

/* Cart Item Row -> "product box" (Figma: 1240x331, flex, gap 32, 1px border) */
.woocommerce-cart-form__cart-item {
    display: flex;
    align-items: flex-start;
    gap: 2rem; /* 32px */
    width: 100%;
    padding: var(--gap-section-small) var(--padding-section-small);
    border: 0.0625rem solid var(--color-border); /* #B4B4BB */
    box-sizing: border-box;
}

/* Product Image cell (Figma Frame 72: 200x267, gap 10px) */
.woocommerce-cart-form .product-thumbnail {
    display: flex;
    flex-direction: column;
    gap: 0.625rem; /* 10px */
    flex-shrink: 0;
    width: 12.5rem; /* 200px */
}

.woocommerce-cart-form .product-thumbnail img {
    width: 100%;
    aspect-ratio: 200 / 267;
    height: auto;
    object-fit: contain;
}

/* Details column (right of the image) */
.woocommerce-cart-form .product-details {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* 16px (Figma Frame 76) */
    flex: 1 1 auto;
    min-width: 0;
}

/* Top row: name + remove icon */
.woocommerce-cart-form .product-details-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

/* Product Name (Figma: Inter 700, 24px "paragraph large", #05061C) */
.woocommerce-cart-form .product-name {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 1.5rem; /* 24px */
    line-height: 150%;
    letter-spacing: 0;
    color: var(--color-primary); /* #05061C */
}

.woocommerce-cart-form .product-name a {
    color: inherit;
    text-decoration: none;
}

/* Variation meta (e.g. "Größe: S") - Inter 400, 16px, #05061C */
.woocommerce-cart-form .product-meta,
.woocommerce-cart-form .product-meta p {
    margin: 0;
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 1rem; /* 16px */
    line-height: 150%;
    letter-spacing: 0;
    color: var(--color-primary); /* #05061C */
}
.woocommerce-cart-form .product-meta dl {
    margin: 0;
    display: flex;
    gap: 0.25rem;
}
.woocommerce-cart-form .product-meta dt,
.woocommerce-cart-form .product-meta dd {
    margin: 0;
    font-weight: 400;
}

/* Product Price */
.woocommerce-cart-form .product-price {
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 1rem; /* 16px */
    line-height: 150%;
    color: #000000;
}

/* Quantity dropdown */
.woocommerce-cart-form .product-quantity .qty-select {
    appearance: none;
    -webkit-appearance: none;
    width: 4.5rem; /* 72px */
    padding: 0.5rem 1.75rem 0.5rem 0.75rem;
    border: 0.0625rem solid var(--color-border);
    background: #FFFFFF url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 0.625rem center;
    font-family: var(--font-primary);
    font-size: 1rem;
    line-height: 150%;
    color: #000000;
    cursor: pointer;
}

/* Remove (trash) icon */
.woocommerce-cart-form .product-remove-link {
    display: contents;
}

.woocommerce-cart-form .product-remove a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #000000;
    text-decoration: none;
    flex-shrink: 0;
}

.woocommerce-cart-form .product-remove a:hover {
    opacity: 0.6;
}

/* Hide coupon box (not in this design) */
.cart-page .coupon {
    display: none;
}

/* ==========================================================================
   Empty Cart (Figma article: 1340 wide, gap 32px)
   ========================================================================== */
.cart-page .cart-empty-article {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
    max-width: 83.75rem;   /* article box; content (1240) after the 100px left padding */
    padding-left: 6.25rem; /* matches the filled-cart left column margin */
    padding-bottom: 7.5rem; /* container bottom spacing before footer */
    box-sizing: border-box;
}

/* Frame 77: content block under the heading (1240 wide, gap 16) */
.cart-page .cart-empty-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

/* Empty message "Dein Warenkorb ist leer" (Inter 400, 16px, lh150%, #05061C) */
.cart-page .cart-empty-message {
    width: 100%;
    margin: 0;
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 1rem; /* 16px */
    line-height: 150%;
    letter-spacing: 0;
    color: var(--color-primary); /* #05061C */
}

/* Empty-cart button container (Figma: padding 32px 64px, gap 16px, content width) */
.cart-page .cart-empty-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    align-self: flex-start; /* don't stretch to full column width */
    padding: 2rem 4rem;
    background: #000000; /* match "Jetzt Kaufen" / "Zur Kasse" buttons */
    color: var(--color-bg-light, #FFFFFF);
    text-decoration: none;
    box-sizing: border-box;
    transition: background 0.3s ease;
}

.cart-page .cart-empty-button:hover {
    background: #171717;
    color: var(--color-bg-light, #FFFFFF);
}

/* Button label text (match "Zur Kasse": Inter 900, 24px) */
.cart-page .cart-empty-button-label {
    font-family: var(--font-primary);
    font-weight: 900;
    font-size: 1.5rem; /* 24px */
    line-height: 150%;
    letter-spacing: 0.075rem;
    text-transform: capitalize;
    white-space: nowrap;
}

.cart-page .cart-empty-button-arrow {
    display: inline-flex;
    align-items: center;
}

.cart-page .cart-empty-button-arrow svg {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
}

/* Frame 78: login prompt block (gap 16) */
.cart-page .cart-empty-login {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

/* Login prompt paragraph (Inter 400, 16px, #05061C) */
.cart-page .cart-empty-login-text {
    width: 100%;
    margin: 0;
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 1rem; /* 16px */
    line-height: 150%;
    letter-spacing: 0;
    color: var(--color-primary); /* #05061C */
}

/* ==========================================================================
   Cart Totals
   ========================================================================== */
/* Override WooCommerce default (.cart-collaterals .cart_totals { width:48%; float:right })
   so our summary uses the full 380px column width. */
.cart-page .cart-collaterals .cart_totals,
.cart-page .cart-collaterals .cross-sells {
    width: 100%;
    float: none;
}

/* Order summary container (Figma Frame 63: 380 wide, gap 32px) */
.cart_totals {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
}

/* "Bestellübersicht" heading (Figma: Oswald 700, h3=48px, lh125%, ls -1.5%, capitalize) */
.cart_totals h2,
.cart_totals .cart-totals-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 3rem; /* 48px */
    line-height: 125%;
    letter-spacing: -0.015em;
    text-transform: capitalize;
    color: #000000;
    margin: 0;
}

/* Summary block: "1 Produkt" + "Lieferung" rows (Figma Frame 66: gap 8px) */
.cart_totals .cart-totals-summary {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.cart_totals .summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
}

/* Let the label fill, pushing the price to the right edge */
.cart_totals .summary-label {
    flex: 1 1 auto;
}

/* Summary row text (Figma: Inter 400, 16px, lh 16px, ls -0.5%, capitalize, #05061C) */
.cart_totals .summary-label,
.cart_totals .summary-value {
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 1rem; /* 16px */
    line-height: 1; /* 16px */
    letter-spacing: -0.005em;
    text-transform: capitalize;
    color: var(--color-primary); /* #05061C */
}

.cart_totals .summary-value {
    text-align: right;
    white-space: nowrap;
}

/* Total row label: pure black #000000, regular */
.cart_totals .total-row .summary-label {
    color: #000000;
}

/* Total row value: Inter 700 Bold, #05061C */
.cart_totals .total-row .summary-value {
    font-weight: 700;
    color: var(--color-primary); /* #05061C */
}

/* Tax note "(Inklusive Steuern € X)" - Inter 400, 16px, #82838E */
.cart_totals .summary-tax-note {
    display: block;
    width: 100%;
    text-align: left;
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 1rem; /* 16px */
    line-height: 1; /* 16px */
    letter-spacing: -0.005em;
    text-transform: capitalize;
    color: #82838E; /* --main50 */
}

/* Payment methods block (Figma: 380 wide, gap 16px, 1px top border) */
.cart_totals .cart-payment-methods {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    padding-top: 1rem;
    border-top: 0.0625rem solid #DADADD;
}

/* "Akzeptierte Zahlungsarten" title (Inter 700, 16px, -0.05%, capitalize, #05061C) */
.cart_totals .payment-methods-title {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 1rem; /* 16px */
    line-height: 1; /* 16px */
    letter-spacing: -0.0005em;
    text-transform: capitalize;
    color: var(--color-primary); /* #05061C */
}

.cart_totals .payment-icons {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.cart_totals .payment-icon {
    display: block;
    width: auto;
    height: 2rem; /* Figma: 32x32 icons */
}

/* Total block (Figma Frame 67: padding-top 16px, gap 8px, 1px top border #DADADD) */
.cart_totals .cart-totals-total {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    padding-top: 1rem;
    border-top: 0.0625rem solid #DADADD;
}

.cart_totals table {
    width: 100%;
}

.cart_totals .cart-subtotal th,
.cart_totals .order-total th {
    font-family: Inter, sans-serif;
    font-weight: 500;
    font-size: 0.875rem; /* 14px */
    color: #6B7280;
    text-align: left;
}

.cart_totals .cart-subtotal td,
.cart_totals .order-total td {
    font-family: Inter, sans-serif;
    font-weight: 700;
    font-size: 1rem; /* 16px */
    color: #171717;
    text-align: right;
}

/* Checkout Button */
.cart-page .wc-proceed-to-checkout a.checkout-button,
.cart-page .wc-proceed-to-checkout a.checkout-button.button,
.cart-page .wc-proceed-to-checkout .checkout-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem; /* Figma: gap 8px between label and arrow */
    width: 100%;
    padding: 2rem 4rem; /* Figma container padding */
    background: #000000 !important; /* match "Jetzt Kaufen" header button */
    background-color: #000000 !important;
    color: var(--color-bg-light, #FFFFFF) !important;
    font-family: var(--font-primary);
    font-weight: 900; /* Black */
    font-size: 1.5rem; /* 24px */
    line-height: 150%;
    letter-spacing: 0.075rem;
    text-transform: capitalize;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: 0;
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.3s ease;
}

.cart-page .wc-proceed-to-checkout a.checkout-button:hover,
.cart-page .wc-proceed-to-checkout a.checkout-button.button:hover,
.cart-page .wc-proceed-to-checkout .checkout-button:hover {
    background: #171717 !important; /* match "Jetzt Kaufen" hover */
    background-color: #171717 !important;
    color: var(--color-bg-light, #FFFFFF) !important;
}

/* ==========================================================================
   Responsive Styles - Cart Page
   (breakpoints added as designs are provided: min1280, min600, mobile)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Min1280 (Figma Frame 43: container 1280, gap 50px)
   -------------------------------------------------------------------------- */
@media (max-width: 1919px) and (min-width: 1280px) {
    .cart-page .woocommerce-cart-page {
        gap: 3.125rem; /* reduced from 100px */
    }

    /* article (Frame 3): box 880, padding-left 50 => content 830 */
    .cart-page .woocommerce-cart-form {
        flex: 880 1 0;
        padding-left: 3.125rem;
    }

    /* aside (Frame 5): box 350, padding-right 50 => content 300 */
    .cart-page .cart-collaterals {
        flex: 350 1 0;
        padding-right: 3.125rem;
    }
}

/* --------------------------------------------------------------------------
   Min600 (Figma Frame 44: container 600, padding 0 32px, columns stacked)
   -------------------------------------------------------------------------- */
@media (max-width: 1279px) and (min-width: 600px) {
    /* Container: stack article over aside, 32px side padding */
    .cart-page .woocommerce-cart-page {
        flex-direction: column;
        gap: 2rem;
        padding-left: 2rem;
        padding-right: 2rem;
    }

    /* Both columns become full width and stack */
    .cart-page .woocommerce-cart-form,
    .cart-page .cart-collaterals {
        flex: 1 1 auto;
        width: 100%;
        gap: 0.625rem; /* Frame 3 / Frame 4 inner gap */
    }

    /* article (Frame 3): own 32px side padding => content 472 */
    .cart-page .woocommerce-cart-form {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    /* aside (Frame 4): no extra padding (full 536 content) */
    .cart-page .cart-collaterals {
        padding-left: 0;
        padding-right: 0;
    }

    /* Empty-cart article: match 32px side padding */
    .cart-page .cart-empty-article {
        max-width: 100%;
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* --------------------------------------------------------------------------
   Mobile (Figma Frame 45: container 390, padding 0 16px, columns stacked)
   -------------------------------------------------------------------------- */
@media (max-width: 599px) {
    /* Container: stack article over aside, 16px side padding */
    .cart-page .woocommerce-cart-page {
        flex-direction: column;
        gap: 2rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Both columns full width, no desktop side paddings */
    .cart-page .woocommerce-cart-form,
    .cart-page .cart-collaterals {
        flex: 1 1 auto;
        width: 100%;
        gap: 0.625rem;
        padding-left: 0;
        padding-right: 0;
    }

    /* Empty-cart article: 16px side padding, full width */
    .cart-page .cart-empty-article {
        max-width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Heading "Dein Warenkorb" at mobile: h2 = 24px (30px height / 1.25) */
    .cart-page .cart-title {
        font-size: 1.5rem; /* 24px */
        min-height: auto;
    }

    /* Product box stacks vertically at mobile (image over details), gap 24, padding 24 */
    .cart-page .woocommerce-cart-form__cart-item {
        flex-direction: column;
        gap: 1.5rem;
        padding: 1.5rem; /* tokens tighten to 24px at mobile */
    }

    /* Image cell full width (Frame 72: 310), image stays 200x267 centered (Frame 40) */
    .cart-page .woocommerce-cart-form .product-thumbnail {
        width: 100%;
        align-items: center;
    }

    .cart-page .woocommerce-cart-form .product-thumbnail img {
        width: 100%;
        max-width: 12.5rem; /* caps at 200px per Figma, scales down on narrow phones */
        height: auto;
        aspect-ratio: 200 / 267;
    }

    /* Details top row (name + trash) gap 10 at mobile (Frame 70) */
    .cart-page .woocommerce-cart-form .product-details-top {
        gap: 0.625rem;
    }

    /* Trash icon 32x32 with 3px padding at mobile */
    .cart-page .woocommerce-cart-form .product-remove a {
        padding: 0.1875rem;
    }

    .cart-page .woocommerce-cart-form .product-remove svg {
        width: 2rem;
        height: 2rem;
    }

    /* Product name at mobile: 18px (paragraph large -> 27px height / 1.5) */
    .cart-page .woocommerce-cart-form .product-name {
        font-size: 1.125rem; /* 18px */
    }
}