/* ============================================================
   VensterStyling - Winkelwagen + Checkout mobiel v3
   Galaxy S8 = 360px
   Tabel: td.image | td.product | td.total
============================================================ */

/* ---- PAGINATITELS KLEINER ---- */
.woocommerce-cart h1.entry-title,
.woocommerce-checkout h1.entry-title {
    font-size: 26px !important;
    line-height: 1.2 !important;
    margin-bottom: 20px !important;
}

@media (max-width: 480px) {
    .woocommerce-cart h1.entry-title,
    .woocommerce-checkout h1.entry-title {
        font-size: 22px !important;
        margin-bottom: 14px !important;
    }
}

/* ---- VOORKOM HORIZONTALE OVERFLOW ---- */
html body.woocommerce-cart,
html body.woocommerce-checkout {
    overflow-x: hidden !important;
}

.woocommerce-cart .site-content,
.woocommerce-cart .entry-content,
.woocommerce-checkout .site-content,
.woocommerce-checkout .entry-content {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-filled-cart-block {
    overflow-x: hidden !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ---- TABEL OMZETTEN NAAR MOBIEL LAYOUT ---- */
@media (max-width: 768px) {

    /* De tabel zelf: block zodat hij niet horizontaal scrollt */
    table.wc-block-cart-items {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        border-collapse: collapse !important;
        outline: none !important;
        border: none !important;
    }

    table.wc-block-cart-items thead {
        display: none !important;
    }

    table.wc-block-cart-items tbody {
        display: block !important;
        width: 100% !important;
    }

    /* Elke rij: block, volle breedte */
    table.wc-block-cart-items tr.wc-block-cart-items__row {
        display: grid !important;
        grid-template-columns: 64px 1fr !important;
        grid-template-rows: auto auto !important;
        grid-template-areas:
            "image product"
            "image total" !important;
        gap: 0 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 14px !important;
        border-bottom: 1px solid #E0E0E0 !important;
        background: #FFFFFF !important;
    }

    /* Afbeelding: linker kolom, beide rijen */
    td.wc-block-cart-item__image {
        grid-area: image !important;
        display: block !important;
        width: 64px !important;
        padding: 0 !important;
        vertical-align: top !important;
    }

    td.wc-block-cart-item__image a,
    td.wc-block-cart-item__image img {
        display: block !important;
        width: 64px !important;
        height: 64px !important;
        object-fit: cover !important;
    }

    /* Productnaam + metadata: rechter kolom, eerste rij */
    td.wc-block-cart-item__product {
        grid-area: product !important;
        display: block !important;
        padding: 0 !important;
        min-width: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Totaalprijs: rechter kolom, tweede rij */
    td.wc-block-cart-item__total {
        grid-area: total !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 8px 0 0 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Productnaam */
    .wc-block-components-product-name,
    .wc-block-components-product-name a {
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.4 !important;
        word-break: break-word !important;
        white-space: normal !important;
        display: block !important;
    }

    /* Verberg dubbele prijs en plugin metadata */
    .wc-block-cart-item__prices {
        display: none !important;
    }

    /* Verberg Measurement unit / length / Total Price */
    .wc-block-components-product-details__measurement-unit,
    .wc-block-components-product-details__length,
    .wc-block-components-product-details__total-price {
        display: none !important;
    }

    /* Kleur WEL tonen */
    .wc-block-components-product-details__kleur {
        display: inline !important;
    }

    .wc-block-components-product-details {
        font-size: 11px !important;
        color: #888 !important;
        margin-top: 3px !important;
    }

    .wc-block-components-product-details__name {
        font-weight: 500 !important;
    }

    /* Aantal + verwijder in de total rij */
    .wc-block-cart-item__quantity {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .wc-block-components-quantity-selector {
        display: flex !important;
        align-items: center !important;
        gap: 0 !important;
    }

    .wc-block-components-quantity-selector__input {
        width: 36px !important;
        min-width: 0 !important;
        text-align: center !important;
        font-size: 13px !important;
        padding: 4px 2px !important;
        -moz-appearance: textfield !important;
    }

    .wc-block-components-quantity-selector__button {
        width: 30px !important;
        height: 30px !important;
        min-width: 0 !important;
        font-size: 16px !important;
        padding: 0 !important;
    }

    /* Verwijder icoon */
    .wc-block-cart-item__remove-link {
        display: flex !important;
        align-items: center !important;
        opacity: 0.5 !important;
    }

    .wc-block-cart-item__remove-link svg {
        width: 18px !important;
        height: 18px !important;
    }

    /* Totaalprijs rechts */
    .wc-block-cart-item__total-price-and-sale-badge-wrapper {
        margin-left: auto !important;
    }

    .wc-block-cart-item__total .wc-block-components-product-price {
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #1A1A1A !important;
    }

    /* ---- TOTALEN BLOK ---- */
    .wp-block-woocommerce-cart-totals-block,
    .wp-block-woocommerce-cart-order-summary-block {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .wc-block-components-totals-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        border-radius: 0 !important;
        outline: 1px solid #E0E0E0 !important;
    }

    .wc-block-components-totals-item {
        padding: 12px 16px !important;
        font-size: 14px !important;
        box-sizing: border-box !important;
    }

    .wc-block-components-totals-footer-item {
        width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 14px 16px !important;
    }

    .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
        font-size: 12px !important;
    }

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

    /* ---- DOORGAAN KNOP ---- */
    .wp-block-woocommerce-proceed-to-checkout-block {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 12px 0 24px !important;
        display: block !important;
    }

    .wc-block-cart__submit-button {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        text-align: center !important;
        padding: 15px 16px !important;
        font-size: 12px !important;
    }

    /* ---- SAMENVATTING KOPJE ---- */
    .wp-block-woocommerce-cart-order-summary-heading-block h2 {
        font-size: 12px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 1.5px !important;
        padding: 14px 16px !important;
        margin: 0 !important;
        border-bottom: 1px solid #E0E0E0 !important;
        color: #888 !important;
    }

    /* ---- CROSS SELLS ---- */
    .wc-block-grid__products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* ---- LEGE WINKELWAGEN ---- */
    .wp-block-woocommerce-empty-cart-block {
        padding: 32px 16px !important;
        text-align: center !important;
    }
}

/* Extra klein (Galaxy S8 = 360px) */
@media (max-width: 390px) {

    table.wc-block-cart-items tr.wc-block-cart-items__row {
        grid-template-columns: 56px 1fr !important;
        padding: 12px !important;
    }

    td.wc-block-cart-item__image,
    td.wc-block-cart-item__image img {
        width: 56px !important;
        height: 56px !important;
    }

    .wc-block-components-product-name {
        font-size: 12px !important;
    }

    .wc-block-components-quantity-selector__input {
        width: 28px !important;
    }

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

    .wc-block-grid__products {
        grid-template-columns: 1fr !important;
    }
}


/* ============================================================
   CART MOBIEL - OVERFLOW FIX v4
   Fixt afsnijding totaalbalk en knop op telefoon
============================================================ */

/* Voorkom overflow op de hele cart pagina */
.woocommerce-cart body,
body.woocommerce-cart {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* De Elementor e-con-boxed container veroorzaakt overflow */
.woocommerce-cart .e-con-boxed,
.woocommerce-cart .e-con.e-con-boxed {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Entry content en page wrappers */
.woocommerce-cart .entry-content,
.woocommerce-cart .site-main,
.woocommerce-cart article {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

@media (max-width: 768px) {

    /* Elementor container padding verwijderen op mobiel */
    .woocommerce-cart .e-con-boxed,
    .woocommerce-cart .e-con {
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Alle WC cart wrappers: 100% breedte, geen overflow */
    .wp-block-woocommerce-cart,
    .wp-block-woocommerce-filled-cart-block,
    .wp-block-woocommerce-cart-items-block,
    .wp-block-woocommerce-cart-totals-block,
    .wp-block-woocommerce-cart-order-summary-block,
    .wp-block-woocommerce-proceed-to-checkout-block {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Producttabel: volle breedte */
    table.wc-block-cart-items {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    /* Totalen blok */
    .wc-block-components-totals-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* Totaalrij en footer item */
    .wc-block-components-totals-item,
    .wc-block-components-totals-footer-item {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    /* Doorgaan knop: volle breedte */
    .wp-block-woocommerce-proceed-to-checkout-block {
        padding: 12px 0 24px !important;
    }

    .wc-block-cart__submit-button,
    .wp-block-woocommerce-proceed-to-checkout-block a,
    .wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit-button {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    /* Coupon veld */
    .wc-block-components-totals-coupon__button {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* Verwijder eventuele negatieve marges van WC blocks */
    .wc-block-cart__main,
    .wc-block-cart__sidebar {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}