/* 
 * Tanuki Buy Journey - Mobile-First & BEM Refinement
 * [Block] .woocommerce-cart
 * [Strategy] Mobile-First (min-width queries)
 */

:root {
    /* BEM-style Design Tokens */
    --cart-color--primary: #111827;
    --cart-color--secondary: #4B5563;
    --cart-color--border: #E5E7EB;
    --cart-color--bg-muted: #F9FAFB;
    --cart-color--accent: #000000;
    
    --cart-spacing--sm: 0.75rem;
    --cart-spacing--md: 1rem;
    --cart-spacing--lg: 1.5rem;
    
    --cart-font--main: 'Montserrat', sans-serif;
}

/* -------------------------------------------------------------------------- */
/* [1] GLOBAL OVERRIDES (Mobile Default)                                       */
/* -------------------------------------------------------------------------- */

body.woocommerce-cart {
    font-family: var(--cart-font--main) !important;
    font-size: 0.9rem !important;
    background-color: #FFF !important;
}

body.woocommerce-cart .woocommerce-message,
body.woocommerce-cart .woocommerce-info {
    font-family: var(--cart-font--main) !important;
    font-size: 0.85rem !important;
    padding: var(--cart-spacing--md) !important;
    background: #FFF !important;
    border: 1px solid var(--cart-color--border) !important;
    border-left: 4px solid var(--cart-color--primary) !important;
    
    /* Flex alignment to prevent icon overlap */
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

body.woocommerce-cart .woocommerce-message::before,
body.woocommerce-cart .woocommerce-info::before {
    position: static !important; /* Remove absolute positioning from theme */
    margin: 0 !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

/* -------------------------------------------------------------------------- */
/* [2] CART TABLE (Mobile Default: Card View)                                 */
/* -------------------------------------------------------------------------- */

body.woocommerce-cart .shop_table.cart {
    display: block !important;
    border: none !important;
    width: 100% !important;
}

body.woocommerce-cart .shop_table.cart thead {
    display: none !important; /* Hide column headers on mobile */
}

body.woocommerce-cart .shop_table.cart tr.cart_item {
    display: grid !important;
    grid-template-columns: 80px 1fr !important;
    grid-template-rows: auto auto auto !important;
    gap: 0.5rem var(--cart-spacing--md) !important;
    padding: var(--cart-spacing--md) !important;
    margin-bottom: var(--cart-spacing--md) !important;
    background: #FFF !important;
    border: 1px solid var(--cart-color--border) !important;
    border-radius: 12px !important;
    position: relative !important;
}

/* Micro-screen optimization (iPhone SE / 320px) */
@media (max-width: 350px) {
    body.woocommerce-cart .shop_table.cart tr.cart_item {
        padding: var(--cart-spacing--sm) !important;
        gap: 0.5rem var(--cart-spacing--sm) !important;
    }
}

body.woocommerce-cart .shop_table.cart td {
    display: block !important;
    padding: 0 !important;
    border: none !important;
    text-align: left !important;
}

/* Thumbnail block */
body.woocommerce-cart .shop_table.cart td.product-thumbnail {
    grid-row: span 3 !important;
    width: 80px !important;
}

body.woocommerce-cart .shop_table.cart td.product-thumbnail img {
    width: 80px !important;
    height: auto !important;
    border-radius: 8px !important;
}

/* Product Info block */
body.woocommerce-cart .shop_table.cart td.product-name {
    grid-column: 2 !important;
    font-weight: 700 !important;
    padding-right: 30px !important; /* Space for remove button */
}

body.woocommerce-cart .shop_table.cart td.product-name a {
    color: var(--cart-color--primary) !important;
    text-decoration: none !important;
    font-size: 0.95rem !important;
    word-break: break-word !important;
}

/* Price & Meta block */
body.woocommerce-cart .shop_table.cart td.product-price,
body.woocommerce-cart .shop_table.cart td.product-quantity,
body.woocommerce-cart .shop_table.cart td.product-subtotal {
    grid-column: 2 !important;
    font-size: 0.8rem !important;
    color: var(--cart-color--secondary) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

body.woocommerce-cart .shop_table.cart td::before {
    content: attr(data-title) ": " !important;
    font-weight: 600 !important;
    color: #9CA3AF !important;
    text-transform: uppercase !important;
    font-size: 0.65rem !important;
}

body.woocommerce-cart .shop_table.cart td.product-name::before,
body.woocommerce-cart .shop_table.cart td.product-thumbnail::before,
body.woocommerce-cart .shop_table.cart td.product-remove::before {
    display: none !important;
}

/* Remove button */
body.woocommerce-cart .shop_table.cart td.product-remove {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
}

body.woocommerce-cart .shop_table.cart td.product-remove a.remove {
    background: #F3F4F6 !important;
    color: #000 !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    text-align: center !important;
}

/* -------------------------------------------------------------------------- */
/* [3] CART TOTALS (Mobile Default)                                           */
/* -------------------------------------------------------------------------- */

body.woocommerce-cart .cart_totals {
    width: 100% !important;
    float: none !important;
    background: var(--cart-color--bg-muted) !important;
    padding: var(--cart-spacing--lg) !important;
    border-radius: 12px !important;
    margin-top: var(--cart-spacing--lg) !important;
}

body.woocommerce-cart .cart_totals h2 {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: var(--cart-color--secondary) !important;
    margin-bottom: var(--cart-spacing--lg) !important;
}

body.woocommerce-cart .cart_totals table {
    width: 100% !important;
}

body.woocommerce-cart .cart_totals table tr td,
body.woocommerce-cart .cart_totals table tr th {
    padding: var(--cart-spacing--sm) 0 !important;
    font-size: 0.85rem !important;
    border: none !important;
    background: transparent !important;
    font-weight: 400 !important; /* Lighter by default */
    color: var(--cart-color--secondary) !important;
}

body.woocommerce-cart .cart_totals table tr th {
    font-weight: 500 !important;
    color: var(--cart-color--primary) !important;
}

body.woocommerce-cart .cart_totals .woocommerce-shipping-destination,
body.woocommerce-cart .cart_totals .shipping-calculator-button {
    font-weight: 400 !important;
    font-size: 0.8rem !important;
    opacity: 0.8 !important;
}

body.woocommerce-cart .cart_totals .order-total th,
body.woocommerce-cart .cart_totals .order-total .amount {
    font-weight: 700 !important; /* Keep the final total clear but not oversized */
    color: var(--cart-color--primary) !important;
}

body.woocommerce-cart .cart_totals .order-total .amount {
    font-size: 1.1rem !important;
}

body.woocommerce-cart .woocommerce-Price-amount {
    color: #000000 !important; /* Total contrast for luxury impact */
}

body.woocommerce-cart .checkout-button {
    background: var(--cart-color--accent) !important;
    color: #FFF !important;
    padding: var(--cart-spacing--md) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border-radius: 8px !important;
    display: block !important;
    text-align: center !important;
    margin-top: var(--cart-spacing--md) !important;
}

/* -------------------------------------------------------------------------- */
/* BOTÓN DE PAGO FIJO EN MÓVIL                                                 */
/* En pedidos de varios libros que sí pasan por el carrito, evita que el botón */
/* "Finalizar compra" se pierda al hacer scroll. Carrito clásico de WooCommerce*/
/* (.wc-proceed-to-checkout / .checkout-button).                              */
/* -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    body.woocommerce-cart .wc-proceed-to-checkout {
        position: sticky;
        bottom: 0;
        background: #fff;
        padding: 12px 16px;
        z-index: 50;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
    }

    body.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
        width: 100%;
        font-size: 1.05rem;
        padding: 14px;
        margin-top: 0 !important;
    }
}

/* -------------------------------------------------------------------------- */
/* [3.5] CROSS-SELLS (Mobile Default: Vertical Stack)                         */
/* -------------------------------------------------------------------------- */

body.woocommerce-cart .cross-sells h2 {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: var(--cart-color--primary) !important;
    margin: var(--cart-spacing--lg) 0 !important;
    line-height: 1.2 !important;
}

body.woocommerce-cart .cross-sells .products.tanuki-horizontal-row {
    display: flex !important;
    flex-direction: column !important; /* Stack vertically on mobile */
    flex-wrap: wrap !important; /* Safety for some browser versions */
    gap: var(--cart-spacing--md) !important;
    overflow-x: visible !important; /* Disable horizontal scroll */
    padding: 0 !important;
}

body.woocommerce-cart .cross-sells .products.tanuki-horizontal-row .product {
    width: 100% !important;
    max-width: 100% !important; /* Ensure no overflow on 320px */
    margin: 0 0 var(--cart-spacing--lg) 0 !important;
    flex: 0 0 auto !important;
    display: block !important;
}

body.woocommerce-cart .cross-sells .products.tanuki-horizontal-row .product .card-img-box {
    max-height: 420px !important; /* Avoid excessive verticality on mobile */
    overflow: hidden !important;
}

/* -------------------------------------------------------------------------- */
/* [4] TABLET LAYER (min-width: 768px)                                       */
/* -------------------------------------------------------------------------- */

@media (min-width: 768px) {
    body.woocommerce-cart .shop_table.cart {
        display: table !important; /* Back to table layout */
        border-collapse: separate !important;
        border-spacing: 0 0.75rem !important;
    }

    body.woocommerce-cart .shop_table.cart thead {
        display: table-header-group !important;
    }

    body.woocommerce-cart .shop_table.cart tr.cart_item {
        display: table-row !important;
        background: transparent !important;
    }

    body.woocommerce-cart .shop_table.cart td {
        display: table-cell !important;
        padding: var(--cart-spacing--md) !important;
        background: #FFF !important;
        border-top: 1px solid var(--cart-color--border) !important;
        border-bottom: 1px solid var(--cart-color--border) !important;
        
        /* Reset Mobile Flex/Grid styles */
        width: auto !important;
        justify-content: initial !important;
        align-items: initial !important;
        margin-top: 0 !important;
    }

    body.woocommerce-cart .shop_table.cart td.product-name,
    body.woocommerce-cart .shop_table.cart td.product-price,
    body.woocommerce-cart .shop_table.cart td.product-quantity,
    body.woocommerce-cart .shop_table.cart td.product-subtotal {
        width: auto !important;
        grid-column: auto !important;
    }

    body.woocommerce-cart .shop_table.cart td:first-child {
        border-left: 1px solid var(--cart-color--border) !important;
        border-top-left-radius: 12px !important;
        border-bottom-left-radius: 12px !important;
    }

    body.woocommerce-cart .shop_table.cart td:last-child {
        border-right: 1px solid var(--cart-color--border) !important;
        border-top-right-radius: 12px !important;
        border-bottom-right-radius: 12px !important;
    }

    body.woocommerce-cart .shop_table.cart td::before {
        display: none !important; /* Hide mobile labels */
    }

    body.woocommerce-cart .shop_table.cart td.product-remove {
        position: relative !important;
        top: auto !important;
        right: auto !important;
    }
}

/* -------------------------------------------------------------------------- */
/* [5] DESKTOP LAYER (min-width: 1024px)                                     */
/* -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
    body.woocommerce-cart .woocommerce {
        display: flex !important;
        gap: var(--cart-spacing--lg) !important;
        align-items: flex-start !important;
    }

    body.woocommerce-cart form.woocommerce-cart-form {
        flex: 2 !important;
    }

    body.woocommerce-cart .cart-collaterals {
        flex: 1 !important;
    }

    body.woocommerce-cart .cart_totals {
        margin-top: 0 !important;
        position: sticky !important;
        top: 120px !important;
    }

    /* Restore horizontal layout for cross-sells on Desktop */
    body.woocommerce-cart .cross-sells .products.tanuki-horizontal-row {
        flex-direction: row !important;
        overflow-x: auto !important;
    }

    body.woocommerce-cart .cross-sells .products.tanuki-horizontal-row .product {
        width: 250px !important; /* Fixed width for carousel on larger screens */
        flex: 0 0 auto !important;
    }
}