/* ==========================================================================
   TPG Addons for WooCommerce — Basket Page Styles
   Version: 3.10.0
   
   ARCHITECTURE NOTES:
   - WC Blocks hydration merges SSR + React classes onto a SINGLE element:
       .wc-block-components-sidebar-layout.wc-block-cart.wp-block-woocommerce-filled-cart-block.is-large
   - WC Blocks uses `.wc-block-components-sidebar-layout` for its own layout
     system, potentially injecting styles via JS during hydration
   - To guarantee specificity, layout selectors chain multiple classes on the
     hydrated element: body.tpg-checkout-step-cart .wc-block-components-sidebar-layout.wc-block-cart
     This gives specificity 0,0,3,1 — beating any WC Blocks selector
   - WC Blocks injects an empty ghost <div> as the first child of the cart
     container (no classes, no content) — we hide it to prevent grid gap issues
   - !important is used on grid/layout properties as a belt-and-suspenders
     approach alongside high specificity
   ========================================================================== */

.wp-block-woocommerce-cart {
    width: 100% !important;
    margin: 0 !important;
    max-width: 100% !important;
}

.tpg-checkout-step-cart .wp-block-woocommerce-cart-items-block {
    background: #ffffff;
}

table.wc-block-cart-items th {
    font-family: var(--tpg-font-body);
    font-size: 14px;
    font-weight: 600 !important;
    line-height: 2.29;
    color: var(--tpg-dark-gray);
}

.tpg-cart-header {
    display: none;
}

.wc-block-components-main {
    padding: 30px 25px !important;
}

.wc-block-cart-items__row {
    position: relative;
}

th.wc-block-cart-items__header-image {
    width: 130px !important;
}

th.wc-block-cart-items__header-total {
    width: 150px !important;
    text-align: left !important;
}

.wc-block-cart-items__row td {
    padding: 15px 0 !important;
}

.wc-block-cart-items .wc-block-components-product-metadata {
    display: none;
}

.wc-block-cart-items .wc-block-components-quantity-selector {
    display: none;
}

.tpg-checkout-step-cart .wc-block-cart-item__remove-link {
    position: absolute !important;
    top: 20px !important; 
    right: 0 !important;
    width: 20px !important;
    height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--tpg-body-text, #4A4B4C) !important;
    opacity: 0.6 !important;
    text-decoration: none !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    z-index: 1 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
}

.tpg-checkout-step-cart .wc-block-cart-item__remove-link::after {
    content: '×' !important;
    font-size: 25px !important;
    line-height: 1 !important;
    color: inherit !important;
    display: block !important;
}

.tpg-checkout-step-cart .wc-block-cart-item__remove-link:hover {
    opacity: 1 !important;
    color: var(--tpg-error-dark, #B71C1C) !important;
}

.wc-block-cart-items .wc-block-components-product-badge {
    display: none;
}

td.wc-block-cart-item__product {
    padding-left: 16px !important;
    padding-right: 80px !important;
}

.wc-block-components-product-name {
    font-family: var(--tpg-font-heading);
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-align: left;
    color: var(--tpg-black) !important;
    margin-bottom: 5px !important;
}


.wc-block-cart-item__product .wc-block-cart-item__prices .wc-block-components-product-price {
    font-family: var(--tpg-font-body);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.75;
    text-align: left;
    color: var(--tpg-color-accent);
   
}

.wc-block-cart-item__product .wc-block-cart-item__prices {
     margin-bottom: 0 !important;
}

.wc-block-cart-item__total .wc-block-formatted-money-amount {
    font-family: var(--tpg-font-body);
    font-size: 22px;
    font-weight: 400;
    line-height: 1.27;
    color: var(--tpg-black);
}

td.wc-block-cart-item__total {
    padding-right: 30px !important;
}

td.wc-block-cart-item__total .wc-block-cart-item__total-price-and-sale-badge-wrapper {
    align-items: baseline;
}

/* Recomnedation grid */
.tpg-recommendations-section  .tpg-recommendations-section__heading {
    font-family: var(--tpg-font-body);
    font-size: 16px;
    font-weight: 600;
    line-height: 2;
    text-align: left;
    color: var(--tpg-body-text);
    text-transform: uppercase;
}

.tpg-recommendations-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px;
}

/* Basket Totals */
.wc-block-components-sidebar {
    padding-left: 30px;
    padding-right: 30px;
}

h2.tpg-basket-totals-heading {
    display: none;
}

.wp-block-woocommerce-cart-order-summary-heading-block.wc-block-cart__totals-title {
    display: block !important;
}

.wc-block-cart__totals-title {
    font-family: var(--tpg-font-heading) !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1.29 !important;
    text-align: left !important;
    color: var(--tpg-black) !important;
    padding-top: 33px !important;
}

h2.tpg-basket-totals-heading {
    display: none;
}


a.wc-block-components-button.wp-element-button.wc-block-cart__submit-button.contained {
    width: 100% !important;
    font-family: var(--tpg-font-body) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.02px !important;
    text-align: center;
    color: #fff !important;
    border-radius: 0 !important;
}

.tpg-button--primary, .tpg-checkout-flow .wc-block-components-button:not(.wc-block-components-button--link), .tpg-checkout-flow .wc-block-cart__submit-button, .tpg-checkout-flow .wc-block-components-checkout-place-order-button {
    color: var(--tpg-white) !important;
    font-family: var(--tpg-font-body) !important;
    font-weight: var(--tpg-btn-font-weight) !important;
    font-size: var(--tpg-btn-font-size) !important;
    line-height: var(--tpg-btn-line-height) !important;
    text-transform: uppercase !important;
    letter-spacing: var(--tpg-btn-letter-spacing) !important;
    height: var(--tpg-btn-height) !important;
    min-height: var(--tpg-btn-height) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: var(--tpg-shadow-cta) !important;
    background: var(--tpg-cta-gradient) !important;
    border-width: initial !important;
    border-style: none !important;
    border-color: initial !important;
    border-image: initial !important;
    border-radius: var(--tpg-btn-radius) !important;
    padding: 0 var(--tpg-spacing-lg) !important;
    transition: all var(--tpg-transition-base) !important;
    gap: var(--tpg-spacing-sm) !important;
    text-decoration: none !important;
}
.tpg-button--primary:hover, .tpg-checkout-flow .wc-block-components-button:not(.wc-block-components-button--link):hover, .tpg-checkout-flow .wc-block-cart__submit-button:hover, .tpg-checkout-flow .wc-block-components-checkout-place-order-button:hover {
    transform: translateY(-1px) !important;
    box-shadow: var(--tpg-shadow-md) !important;
    background: linear-gradient(180deg, var(--tpg-cta-gradient-end) 0%, var(--tpg-cta-gradient-start) 100%) !important;
}

/* Responsive */

@media screen and (max-width: 1279px) {
    #content-wrap {
        width: 100% !important;
        max-width: 960px !important;
    }

    .wc-block-components-main {
        padding-top: 23px !important;
    }

    td.wc-block-cart-item__product {
        padding-right: 20px !important;
    }
    
    .wc-block-components-product-name {
        font-size: 20px !important;
    }

    .wc-block-cart__totals-title {
        font-size: 24px !important;
    }

  }

@media screen and (max-width: 839px){

    div#content-wrap {
        max-width: 600px !important;
    }

    .wc-block-components-sidebar-layout {
        flex-direction: column;
    }

    .wc-block-components-main.wc-block-cart__main.wp-block-woocommerce-cart-items-block {
        width: 100%;
    }

    .wc-block-components-sidebar {
        width: 100%;
    }

    .wp-block-woocommerce-cart-totals-block {
        background: #F9FBFC;
        padding: 25px !important;
    }

    .wc-block-components-product-name {
        font-size: 20px !important;
    }
    
    .wc-block-cart-item__product {
        padding-right: 50px !important;
    }
    
    tr.wc-block-cart-items__header {
        display: table-row !important;
    }
    
    th.wc-block-cart-items__header-image {
        width: 130px !important;
    }
    
    tr.wc-block-cart-items__row {
        display: table-row !important;
    }
    
    th.wc-block-cart-items__header-total {
        width: 130px !important;
    }
    
    table.wc-block-cart-items.wp-block-woocommerce-cart-line-items-block {
        margin-bottom: 0;
        border: none;
    }
    
}

@media screen and (max-width: 599px){

    div#content-wrap {
        max-width: 480px !important;
    }
    
    th.wc-block-cart-items__header-image {
        width: 100px !important;
    }
    
    th.wc-block-cart-items__header-total {
        width: 100px !important;
    }
    
    a.wc-block-components-product-name {
        font-size: 16px !important;
    }
    
    span.wc-block-formatted-money-amount.wc-block-components-formatted-money-amount.wc-block-components-product-price__value {
        font-size: 18px;
    }
}

@media screen and (max-width: 479px){
    div#content-wrap {
        max-width: 90% !important;
    }
    
    .wc-block-components-main.wc-block-cart__main.wp-block-woocommerce-cart-items-block {
        padding: 15px !important;
    }
    
    th.wc-block-cart-items__header-total {
        width: 85px !important;
    }
    
    span.wc-block-formatted-money-amount.wc-block-components-formatted-money-amount.wc-block-components-product-price__value {
        font-size: 14px;
    }
    
    td.wc-block-cart-item__total {
        padding-right: 15px !important;
    }
    
    a.wc-block-components-product-name {
        font-size: 18px !important;
    }
    
    .tpg-recommendations-grid {
        grid-template-columns: repeat(1, 1fr) !important;
    }
}