/* ============================================================
   BOUTIQUE GLASS CART REDESIGN
   ============================================================ */

/* 1. Page Background Alignment */
.page-template-default.wc-block-cart-page {
    background: linear-gradient(135deg, hsl(40 30% 97%) 0%, hsl(40 25% 95%) 50%, hsl(40 30% 97%) 100%);
}

/* 2. Transform Main Cart and Sidebar into Glass Cards */
.wc-block-cart__main,
.wc-block-cart__sidebar {
    background: linear-gradient(135deg, hsla(var(--glass-bg) / 0.8), hsla(var(--glass-bg) / 0.6)) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid hsla(var(--glass-border) / 0.8) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 8px 32px rgba(var(--shadow-dark), 0.08) !important;
    padding: 2.5rem !important;
}

/* 3. Cart Table Styling */
.wc-block-cart-items__header {
    border-bottom: 1px solid hsla(var(--border) / 0.5) !important;
    padding-bottom: 15px !important;
}

.wc-block-cart-items__header span {
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: hsl(var(--muted-foreground)) !important;
}

.wc-block-cart-items__row {
    border-bottom: 1px solid hsla(var(--border) / 0.3) !important;
}

/* 4. Product Name and Typography */
.wc-block-components-product-name {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 1.4rem !important;
    font-weight: 500 !important;
    color: hsl(var(--foreground)) !important;
    text-decoration: none !important;
}

.wc-block-cart__totals-title {
    font-family: 'Cormorant Garamond', 
}
/* ============================================================
   MOBILE OPTIMIZED CART (WITH IMAGES)
   ============================================================ */

@media (max-width: 600px) {
    /* 1. Reduce parent container padding to gain space */
    .wc-block-cart__main, 
    .wc-block-cart__sidebar {
        padding: 1.5rem 1rem !important;
        margin-bottom: 20px !important;
    }

    /* 2. Force the Table to behave like a List of Cards */
    .wc-block-cart-items, 
    .wc-block-cart-items__row {
        display: block !important;
        width: 100% !important;
    }

    .wc-block-cart-items__header {
        display: none !important; /* Hide table headers on mobile */
    }

    .wc-block-cart-items__row {
        display: flex !important;
        flex-wrap: wrap !important;
        position: relative !important;
        padding: 20px 0 !important;
        border-bottom: 1px solid hsla(var(--border) / 0.3) !important;
    }

    /* 3. Image Layout */
    .wc-block-cart-item__image {
        display: block !important;
        width: 90px !important;
        height: 90px !important;
        flex-shrink: 0 !important;
        padding: 0 !important;
    }

    .wc-block-cart-item__image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 12px !important;
        background: hsla(var(--glass-bg) / 0.5) !important;
    }

    /* 4. Details Area (Name, Unit Price, Badges) */
    .wc-block-cart-item__product {
        display: block !important;
        flex: 1 !important;
        padding-left: 15px !important;
        vertical-align: top !important;
    }

    .wc-block-components-product-name {
        font-size: 16px !important;
        margin-bottom: 5px !important;
        display: block !important;
        line-height: 1.2 !important;
    }

    .wc-block-cart-item__prices {
        font-size: 13px !important;
        margin-bottom: 8px !important;
    }

    /* 5. Total Price (Top Right Position) */
    .wc-block-cart-item__total {
        position: absolute !important;
        top: 20px !important;
        right: 0 !important;
        display: block !important;
        text-align: right !important;
        padding: 0 !important;
    }

    .wc-block-cart-item__total .wc-block-components-product-price__value {
        font-weight: 600 !important;
        font-size: 14px !important;
    }

    /* 6. Action Row (Quantity & Remove) */
    .wc-block-cart-item__quantity {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin-top: 15px !important;
        padding-top: 10px !important;
    }

    /* Make Quantity Selector more compact */
    .wc-block-components-quantity-selector {
        height: 36px !important;
        max-width: 90px !important;
    }

    .wc-block-components-quantity-selector__button {
        width: 30px !important;
    }

    /* 7. Remove Link */
    .wc-block-cart-item__remove-link {
        margin: 0 !important;
        font-size: 11px !important;
        text-decoration: underline !important;
    }

    /* 8. Coupon/Summary spacing */
    .wc-block-cart__totals-title {
        font-size: 1.5rem !important;
    }

    .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
        font-size: 1.4rem !important;
    }
}

/* Extra safety for very small screens (like 320px) */
@media (max-width: 600px) {
    .wc-block-cart-item__image {
        width: 70px !important;
        height: 70px !important;
    }
    .wc-block-components-product-name {
        font-size: 14px !important;
    }
    .wc-block-cart-item__total {
        position: static !important;
        width: 100% !important;
        text-align: left !important;
        margin-top: 5px !important;
    }
}
/* ============================================================
   MOBILE CART FIX: FONT SIZE & SYMMETRICAL BUTTONS
   ============================================================ */

@media (max-width: 600px) {
    /* 1. Increase Product Name Size & Apply Brand Font */
    .wc-block-components-product-name {
        font-family: 'Cormorant Garamond', serif !important;
        font-size: 1.35rem !important; /* Larger, more elegant title */
        font-weight: 600 !important;
        line-height: 1.2 !important;
        margin-bottom: 8px !important;
        color: hsl(var(--foreground)) !important;
    }

    /* 2. Fix Uneven Quantity Selector */
    .wc-block-components-quantity-selector {
        display: flex !important;
        align-items: stretch !important;
        justify-content: center !important;
        height: 40px !important; /* Uniform height */
        width: 120px !important;  /* Wider for better proportions */
        border: 1px solid hsla(var(--glass-border) / 0.8) !important;
        background: hsla(var(--glass-bg) / 0.5) !important;
        padding: 0 !important;
    }

    /* Ensure buttons are perfect squares and icons are centered */
    .wc-block-components-quantity-selector__button {
        width: 38px !important;
        height: 100% !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 18px !important;
        background: transparent !important;
        border: none !important;
        color: hsl(var(--foreground)) !important;
        line-height: 1 !important;
    }

    /* Fix the number input between buttons */
    .wc-block-components-quantity-selector__input {
        flex: 1 !important;
        width: 44px !important;
        height: 100% !important;
        border-left: 1px solid hsla(var(--glass-border) / 0.5) !important;
        border-right: 1px solid hsla(var(--glass-border) / 0.5) !important;
        border-top: none !important;
        border-bottom: none !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        text-align: center !important;
        background: hsla(var(--glass-bg) / 0.3) !important;
    }

    /* 3. Re-align the card content */
    .wc-block-cart-items__row {
        padding: 25px 0 !important;
        display: flex !important;
        flex-direction: row !important; /* Keep image on left */
        flex-wrap: wrap !important;
    }

    /* Product Info Area */
    .wc-block-cart-item__product {
        padding-left: 20px !important;
        flex: 1 !important;
    }

    /* Price Styling */
    .wc-block-cart-item__prices {
        font-size: 15px !important;
        margin: 5px 0 10px 0 !important;
    }

    /* Save Badge Styling */
    .wc-block-components-sale-badge {
        display: inline-block !important;
        padding: 4px 10px !important;
        font-size: 10px !important;
        letter-spacing: 0.05em !important;
    }

    /* 4. Total Price Position (Bottom Right) */
    .wc-block-cart-item__total {
        width: 100% !important;
        text-align: right !important;
        margin-top: 15px !important;
        font-size: 1.1rem !important;
        font-weight: 600 !important;
        color: hsl(var(--foreground)) !important;
        border-top: 1px dashed hsla(var(--border) / 0.3) !important;
        padding-top: 10px !important;
    }

    /* 5. Center and Style Remove Link */
    .wc-block-cart-item__quantity {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: center !important;
        margin-top: 20px !important;
        width: auto !important;
    }

    .wc-block-cart-item__remove-link {
        font-size: 12px !important;
        opacity: 0.6 !important;
        transition: 0.3s;
    }
}