/* =============================================================
   De Frottende Freule – Custom CSS
   ============================================================= */

html { font-size: 18px; }

/* ── Cart table images (desktop) ────────────────────────────── */
.woocommerce table.shop_table img,
.woocommerce-page table.shop_table img {
    width: 80px; border-radius: 0.25rem;
    margin-right: 1rem; margin-bottom: 1rem;
}

/* ── Alert banners ───────────────────────────────────────────── */
.woocommerce-message, .woocommerce-error, .woocommerce-info {
    padding: 1em 2em !important; border: none !important;
    color: #d16363; font-size: 1em;
    background-color: rgba(247,242,199,0.39) !important;
}
.woocommerce-message::before { content: none !important; }

/* ── Checkout form labels ────────────────────────────────────── */
.woocommerce-checkout .woocommerce .form-row label {
    font-size: 14px; font-weight: normal; text-transform: none !important;
}

/* ── Thank-you order overview ────────────────────────────────── */
.woocommerce-checkout .elementor-jet-thankyou-order ul.woocommerce-order-overview {
    list-style: none; display: flex; flex-wrap: nowrap !important; margin: 0; padding: 0;
}

/* ── Cart totals background ──────────────────────────────────── */
.cart-subtotal { background-color: #F1F2F2; }
.order-total   { background-color: #F1F2F2; }

/* ── Coupon button line-break ────────────────────────────────── */
.woocommerce .elementor-jet-cart-table .woocommerce-cart-form
table.shop_table td.actions .coupon .button br { display: none !important; }

/* ── Checkout button alignment ───────────────────────────────── */
.wc-proceed-to-checkout .button.checkout-button { float: right; }
.wc-proceed-to-checkout .button.checkout-button br { display: none !important; }
.elementor-40976 .elementor-element.elementor-element-9eec105 .wc-proceed-to-checkout {
    display: flex; justify-content: flex-end;
}

/* ── Single product thumbnail strip ─────────────────────────── */
.elementor-5105 .elementor-element.elementor-element-b18521f
.jet-woo-builder .jet-single-images__wrap .flex-control-thumbs li {
    width: 100% !important; padding: 0 !important; margin-right: 10px !important;
}

/* ── JetBlocks mini-cart scrollable ─────────────────────────── */
.jet-blocks-cart { max-height: 90vh; display: flex; flex-direction: column; }
.jet-blocks-cart__heading { background: transparent; flex-shrink: 0; position: sticky; top: 0; z-index: 10; }
.jet-blocks-cart__list { display: flex; flex-direction: column; max-height: 80vh; overflow: hidden; background: white; }
.jet-blocks-cart__close-button, .jet-blocks-cart__list-title { flex-shrink: 0; }
.widget_shopping_cart_content { flex: 1; overflow-y: auto; overflow-x: hidden; max-height: calc(80vh - 120px); }
.woocommerce-mini-cart { padding-right: 10px; }
.widget_shopping_cart_content::-webkit-scrollbar { width: 6px; }
.widget_shopping_cart_content::-webkit-scrollbar-track { background: rgba(0,0,0,.1); border-radius: 3px; }
.widget_shopping_cart_content::-webkit-scrollbar-thumb { background: rgba(0,0,0,.3); border-radius: 3px; }
.widget_shopping_cart_content::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.5); }
.woocommerce-mini-cart__total, .woocommerce-mini-cart__buttons {
    flex-shrink: 0; position: sticky; bottom: 0;
    background: white; padding-top: 10px; border-top: 1px solid rgba(0,0,0,.1);
}
@media (max-width: 768px) {
    .jet-blocks-cart { max-height: 95vh; }
    .jet-blocks-cart__list { max-height: 85vh; }
    .widget_shopping_cart_content { max-height: calc(85vh - 100px); }
}
@media (max-width: 480px) {
    .jet-blocks-cart { max-height: 100vh; }
    .jet-blocks-cart__list { max-height: 90vh; }
    .widget_shopping_cart_content { max-height: calc(90vh - 80px); }
}

/* =============================================================
   MOBILE CART – FLEXBOX LAYOUT  (max-width: 767px)

   Layout per product card:
   ┌──────────────────────────────────────┐
   │  [76px img]  Product naam        [×] │
   │              SKU                     │
   ├──────────────────────────────────────┤
   │  [− aantal +]               €totaal  │
   └──────────────────────────────────────┘
   ============================================================= */
@media (max-width: 767px) {

    /* ── Outer wrappers ── */
    .woocommerce .elementor-jet-cart-table.jet-woo-builder {
        width: 100%; background: transparent !important;
    }
    .woocommerce .elementor-jet-cart-table.jet-woo-builder .woocommerce-cart-form {
        margin: 0; background: transparent !important;
    }
    .woocommerce .elementor-jet-cart-table.jet-woo-builder table.shop_table_responsive,
    .woocommerce .elementor-jet-cart-table.jet-woo-builder table.shop_table_responsive tbody {
        display: block !important; width: 100% !important; background: transparent !important;
    }
    .woocommerce .elementor-jet-cart-table.jet-woo-builder
    table.shop_table_responsive thead { display: none !important; }

    /* Non-cart rows (actions etc.) */
    .woocommerce .elementor-jet-cart-table.jet-woo-builder
    table.shop_table_responsive tr:not(.cart_item) { display: block !important; width: 100% !important; }

    /* ── PRODUCT CARD: flexbox, wrap ────────────────────────── */
    .woocommerce .elementor-jet-cart-table.jet-woo-builder
    table.shop_table_responsive tr.cart_item {
        display:        flex !important;
        flex-wrap:      wrap !important;
        align-items:    flex-start !important;
        align-content:  flex-start !important;
        position:       relative !important;
        background:     #f8f8f8 !important;
        border:         1px solid #e5ddd6 !important;
        border-radius:  16px !important;
        padding:        14px !important;
        margin:         0 0 12px !important;
        box-shadow:     0 2px 8px rgba(0,0,0,.05) !important;
        overflow:       visible !important;
        box-sizing:     border-box !important;
        gap:            0 !important;
    }

    /* ── Reset ALL tds inside the card ── */
    .woocommerce .elementor-jet-cart-table.jet-woo-builder
    table.shop_table_responsive tr.cart_item td {
        display:    block !important;
        border:     0 !important;
        padding:    0 !important;
        margin:     0 !important;
        background: transparent !important;
        box-shadow: none !important;
        text-align: left !important;
        box-sizing: border-box !important;
    }
    .woocommerce .elementor-jet-cart-table.jet-woo-builder
    table.shop_table_responsive tr.cart_item td::before {
        display: none !important;
        content: none !important;
    }

    /* ── × REMOVE — absolute, outside flex flow ── */
    .woocommerce .elementor-jet-cart-table.jet-woo-builder
    table.shop_table_responsive tr.cart_item td.product-remove {
        position: absolute !important;
        top:      12px !important;
        right:    12px !important;
        width:    28px !important;
        height:   28px !important;
        z-index:  2 !important;
        flex:     none !important;
    }
    .woocommerce .elementor-jet-cart-table.jet-woo-builder
    table.shop_table_responsive tr.cart_item td.product-remove a.remove {
        width:           28px !important;
        height:          28px !important;
        display:         flex !important;
        align-items:     center !important;
        justify-content: center !important;
        border-radius:   50% !important;
        background:      rgba(149,34,3,.12) !important;
        color:           #952203 !important;
        font-size:       16px !important;
        text-decoration: none !important;
        line-height:     1 !important;
    }

    /* ── THUMBNAIL — row 1, left, fixed 76 px ── */
    .woocommerce .elementor-jet-cart-table.jet-woo-builder
    table.shop_table_responsive tr.cart_item td.product-thumbnail {
        flex:         0 0 76px !important;
        width:        76px !important;
        margin-right: 12px !important;
    }
    .woocommerce .elementor-jet-cart-table.jet-woo-builder
    table.shop_table_responsive tr.cart_item td.product-thumbnail img {
        width:        76px !important;
        height:       76px !important;
        object-fit:   cover !important;
        border-radius: 10px !important;
        display:      block !important;
    }

    /* ── NAME — row 1, right, fills remaining width ── */
    .woocommerce .elementor-jet-cart-table.jet-woo-builder
    table.shop_table_responsive tr.cart_item td.product-name {
        /* 88px = 76px thumbnail + 12px margin-right — fills rest of row 1 exactly */
        /* forcing qty + subtotal to wrap to row 2 */
        flex:      0 0 calc(100% - 88px) !important;
        max-width: calc(100% - 88px) !important;
        min-width: 0 !important;
        overflow:  hidden !important;
        padding-right: 42px !important;
    }
    .woocommerce .elementor-jet-cart-table.jet-woo-builder
    table.shop_table_responsive tr.cart_item td.product-name a {
        display:     block;
        font-size:   14px;
        font-weight: 600;
        line-height: 1.35;
        color:       #1a1a1a;
        text-decoration: none;
        margin-bottom: 3px;
        overflow-wrap: break-word;
        word-break:  break-word;
    }
    .woocommerce .elementor-jet-cart-table.jet-woo-builder
    table.shop_table_responsive tr.cart_item td.product-name small {
        display:     block;
        font-size:   11px;
        color:       #888;
        line-height: 1.3;
    }

    /* ── STUKSPRIJS — verborgen ── */
    .woocommerce .elementor-jet-cart-table.jet-woo-builder
    table.shop_table_responsive tr.cart_item td.product-price {
        display: none !important;
    }

    /* ── QUANTITY — row 2 left, grows ── */
    .woocommerce .elementor-jet-cart-table.jet-woo-builder
    table.shop_table_responsive tr.cart_item td.product-quantity {
        flex:            1 1 auto !important;
        display:         flex !important;
        align-items:     center !important;
        justify-content: flex-start !important;
        gap:             6px !important;
        padding-top:     12px !important;
        margin-top:      10px !important;
        border-top:      1px solid #e8e0d8 !important;
        width:           auto !important;
        min-width:       0 !important;
    }

    /* qty number input */
    .woocommerce .elementor-jet-cart-table.jet-woo-builder
    table.shop_table_responsive tr.cart_item td.product-quantity input[type="number"],
    .woocommerce .elementor-jet-cart-table.jet-woo-builder
    table.shop_table_responsive tr.cart_item td.product-quantity input.qty {
        width:        44px !important;
        height:       36px !important;
        border-radius: 8px !important;
        text-align:   center !important;
        font-size:    15px !important;
        font-weight:  600 !important;
        padding:      0 4px !important;
        border:       1px solid #ddd !important;
        background:   #fff !important;
        -moz-appearance: textfield;
    }
    .woocommerce .elementor-jet-cart-table.jet-woo-builder
    table.shop_table_responsive tr.cart_item td.product-quantity
    input[type="number"]::-webkit-inner-spin-button,
    .woocommerce .elementor-jet-cart-table.jet-woo-builder
    table.shop_table_responsive tr.cart_item td.product-quantity
    input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }

    /* +/- buttons */
    .woocommerce .elementor-jet-cart-table.jet-woo-builder
    table.shop_table_responsive tr.cart_item td.product-quantity .cqs-minus,
    .woocommerce .elementor-jet-cart-table.jet-woo-builder
    table.shop_table_responsive tr.cart_item td.product-quantity .cqs-plus,
    .woocommerce .elementor-jet-cart-table.jet-woo-builder
    table.shop_table_responsive tr.cart_item td.product-quantity .btn,
    .woocommerce .elementor-jet-cart-table.jet-woo-builder
    table.shop_table_responsive tr.cart_item td.product-quantity button:not([type="submit"]) {
        width:           36px !important;
        height:          36px !important;
        min-width:       36px !important;
        border-radius:   8px !important;
        font-size:       18px !important;
        display:         flex !important;
        align-items:     center !important;
        justify-content: center !important;
        padding:         0 !important;
        cursor:          pointer;
        flex-shrink:     0 !important;
    }

    /* ── SUBTOTAAL — row 2 right, natural width ── */
    .woocommerce .elementor-jet-cart-table.jet-woo-builder
    table.shop_table_responsive tr.cart_item td.product-subtotal {
        flex:            0 0 auto !important;
        align-self:      stretch !important;  /* fill height of qty row → price centers exactly */
        display:         flex !important;
        align-items:     center !important;   /* vertically center price within that height */
        justify-content: flex-end !important;
        padding-top:     0 !important;        /* height comes from align-self:stretch */
        padding-left:    14px !important;
        margin-top:      0 !important;
        border-top:      none !important;     /* separator from qty border-top covers full width */
        width:           auto !important;
    }
    .woocommerce .elementor-jet-cart-table.jet-woo-builder
    table.shop_table_responsive tr.cart_item td.product-subtotal .woocommerce-Price-amount,
    .woocommerce .elementor-jet-cart-table.jet-woo-builder
    table.shop_table_responsive tr.cart_item td.product-subtotal bdi {
        font-size:   16px !important;
        font-weight: 700 !important;
        color:       #1a1a1a !important;
        white-space: nowrap !important;
    }

    /* ── ACTIONS ROW (kortingscode + update) ── */
    .woocommerce .elementor-jet-cart-table.jet-woo-builder
    table.shop_table_responsive tr:not(.cart_item) td {
        display: block !important; width: 100% !important;
        padding: 0 !important; border: 0 !important;
    }
    .woocommerce .elementor-jet-cart-table.jet-woo-builder
    table.shop_table_responsive tr:last-child td.actions {
        background:    #f8f8f8 !important;
        border-radius: 16px;
        padding:       14px !important;
        box-sizing:    border-box;
    }
    .woocommerce .elementor-jet-cart-table.jet-woo-builder
    td.actions .coupon { display: flex !important; gap: 10px; align-items: center; }
    .woocommerce .elementor-jet-cart-table.jet-woo-builder
    td.actions .coupon input.input-text { flex: 1; height: 46px; border-radius: 10px; }
    .woocommerce .elementor-jet-cart-table.jet-woo-builder
    td.actions .coupon .button { min-width: 120px; height: 46px; border-radius: 10px; white-space: nowrap; }

} /* end @media 767px */