/*
 * Payli WooCommerce Styles
 * Herstyle de WooCommerce shop, productpagina's, winkelmand en checkout
 * in de Payli huisstijl. Wordt geladen op alle WooCommerce pagina's.
 */

/* ===========================================================
   DESIGN TOKENS
   =========================================================== */
.woocommerce,
.woocommerce-page,
body.woocommerce,
body.woocommerce-page {
    --pl-brand: #2952C5;
    --pl-brand-dark: #1E40AF;
    --pl-brand-light: #6B8DEF;
    --pl-brand-soft: #E8EEFB;
    --pl-ink: #0B1530;
    --pl-ink-soft: #2C3654;
    --pl-muted: #6E7B96;
    --pl-line: #E2E6F0;
    --pl-bg: #FAFBFD;
    --pl-cream: #F4EBD9;
    --pl-radius: 16px;
    --pl-radius-lg: 24px;
    --pl-shadow-sm: 0 2px 8px rgba(11,21,48,.06);
    --pl-shadow-md: 0 8px 24px rgba(11,21,48,.10);
    --pl-shadow-lg: 0 24px 48px rgba(11,21,48,.14);
}

/* ===========================================================
   ALGEMEEN — achtergrond, typografie
   =========================================================== */
body.woocommerce,
body.woocommerce-page,
body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-account,
body.single-product,
body.post-type-archive-product,
body.tax-product_cat {
    background: var(--pl-bg) !important;
}

.woocommerce .payli-woo-wrap,
.payli-woo-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 24px 100px;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    color: var(--pl-ink);
}

/* Breadcrumb */
.woocommerce .woocommerce-breadcrumb {
    font-size: 13px !important;
    color: var(--pl-muted) !important;
    margin-bottom: 28px !important;
    font-weight: 500;
}
.woocommerce .woocommerce-breadcrumb a {
    color: var(--pl-muted) !important;
    text-decoration: none !important;
}
.woocommerce .woocommerce-breadcrumb a:hover {
    color: var(--pl-brand) !important;
}

/* ===========================================================
   SINGLE PRODUCT
   =========================================================== */
.woocommerce div.product {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
}

/* Product afbeeldingen */
.woocommerce div.product div.images {
    margin: 0 !important;
    width: 100% !important;
    float: none !important;
}
.woocommerce div.product div.images img {
    border-radius: var(--pl-radius-lg) !important;
    box-shadow: var(--pl-shadow-md) !important;
    background: white;
}
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
    border-radius: var(--pl-radius-lg);
    overflow: hidden;
}
.woocommerce div.product .woocommerce-product-gallery {
    position: relative;
}

/* Thumbnails */
.woocommerce div.product div.images .flex-control-thumbs {
    margin-top: 16px !important;
    display: flex;
    gap: 12px;
}
.woocommerce div.product div.images .flex-control-thumbs li {
    width: 80px !important;
    margin: 0 !important;
}
.woocommerce div.product div.images .flex-control-thumbs img {
    border-radius: 12px !important;
    border: 2px solid transparent;
    transition: border-color .2s ease;
}
.woocommerce div.product div.images .flex-control-thumbs img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs img:hover {
    border-color: var(--pl-brand) !important;
}

/* Product samenvatting (rechts) */
.woocommerce div.product div.summary {
    margin: 0 !important;
    width: 100% !important;
    float: none !important;
}

/* Product titel */
.woocommerce div.product .product_title {
    font-family: 'Bricolage Grotesque', sans-serif !important;
    font-size: 38px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: -.02em !important;
    color: var(--pl-ink) !important;
    margin: 0 0 16px !important;
}

/* Prijs */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: var(--pl-brand) !important;
    font-family: 'Bricolage Grotesque', sans-serif !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    margin: 0 0 20px !important;
}
.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
    color: var(--pl-muted) !important;
    font-size: 20px !important;
    opacity: .6;
}
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
    text-decoration: none !important;
}

/* Korte beschrijving */
.woocommerce div.product .woocommerce-product-details__short-description {
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: var(--pl-ink-soft) !important;
    margin-bottom: 28px !important;
}
.woocommerce div.product .woocommerce-product-details__short-description p {
    margin-bottom: 12px !important;
}

/* Rating sterren */
.woocommerce .star-rating span::before {
    color: var(--pl-brand) !important;
}

/* ===========================================================
   ADD TO CART — knoppen en hoeveelheid
   =========================================================== */
.woocommerce div.product form.cart {
    margin-bottom: 28px !important;
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

/* Quantity input */
.woocommerce .quantity .qty {
    height: 54px !important;
    width: 80px !important;
    border: 1.5px solid var(--pl-line) !important;
    border-radius: var(--pl-radius) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--pl-ink) !important;
    text-align: center !important;
    background: white !important;
}
.woocommerce .quantity .qty:focus {
    border-color: var(--pl-brand) !important;
    outline: none !important;
}

/* Alle WooCommerce knoppen */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce .woocommerce-message a.button {
    background: var(--pl-brand) !important;
    color: white !important;
    border: none !important;
    border-radius: 999px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 16px 32px !important;
    height: auto !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    box-shadow: 0 8px 20px rgba(41,82,197,.25) !important;
    transition: all .2s ease !important;
    cursor: pointer !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
    background: var(--pl-brand-dark) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 28px rgba(41,82,197,.32) !important;
}

/* Single add-to-cart knop full prominence */
.woocommerce div.product form.cart .button {
    height: 54px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Disabled / out of stock knop */
.woocommerce a.button.disabled,
.woocommerce button.button.disabled,
.woocommerce input.button.disabled {
    background: #F1F4F9 !important;
    color: var(--pl-muted) !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
}

/* Secundaire knop variant (bv. "Verder winkelen") */
.woocommerce a.button.wc-backward {
    background: white !important;
    color: var(--pl-ink) !important;
    border: 1.5px solid var(--pl-line) !important;
    box-shadow: none !important;
}
.woocommerce a.button.wc-backward:hover {
    border-color: var(--pl-brand) !important;
    background: white !important;
}

/* ===========================================================
   PRODUCT META — categorie, SKU, tags
   =========================================================== */
.woocommerce div.product .product_meta {
    font-size: 13px !important;
    color: var(--pl-muted) !important;
    border-top: 1px solid var(--pl-line) !important;
    padding-top: 20px !important;
    margin-top: 8px !important;
}
.woocommerce div.product .product_meta > span {
    display: block !important;
    margin-bottom: 8px !important;
}
.woocommerce div.product .product_meta a {
    color: var(--pl-brand) !important;
    text-decoration: none !important;
}

/* Stock status */
.woocommerce div.product p.stock {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #2E9E5B !important;
}
.woocommerce div.product .out-of-stock {
    color: #E53935 !important;
}

/* ===========================================================
   TABS — beschrijving / extra info / reviews
   =========================================================== */
.woocommerce div.product .woocommerce-tabs {
    grid-column: 1 / -1 !important;
    margin-top: 64px !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
    padding: 0 !important;
    margin: 0 0 32px !important;
    border-bottom: 1px solid var(--pl-line) !important;
    display: flex;
    gap: 8px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before {
    border-color: var(--pl-line) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--pl-muted) !important;
    padding: 14px 20px !important;
    border-bottom: 2px solid transparent !important;
    transition: all .2s ease !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
    color: var(--pl-brand) !important;
    border-bottom-color: var(--pl-brand) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
    display: none !important;
}
.woocommerce div.product .woocommerce-tabs .panel {
    font-size: 16px !important;
    line-height: 1.7 !important;
    color: var(--pl-ink-soft) !important;
}
.woocommerce div.product .woocommerce-tabs .panel h2 {
    font-family: 'Bricolage Grotesque', sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--pl-ink) !important;
    margin-bottom: 16px !important;
}

/* Extra info tabel */
.woocommerce table.shop_attributes {
    border: none !important;
}
.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
    border: none !important;
    border-bottom: 1px solid var(--pl-line) !important;
    padding: 12px 0 !important;
    font-size: 14px !important;
}
.woocommerce table.shop_attributes th {
    color: var(--pl-ink) !important;
    font-weight: 600 !important;
}
.woocommerce table.shop_attributes td {
    color: var(--pl-ink-soft) !important;
}

/* ===========================================================
   RELATED / UPSELLS — gerelateerde producten
   =========================================================== */
.woocommerce .related,
.woocommerce .upsells {
    grid-column: 1 / -1 !important;
    margin-top: 72px !important;
}
.woocommerce .related > h2,
.woocommerce .upsells > h2 {
    font-family: 'Bricolage Grotesque', sans-serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    color: var(--pl-ink) !important;
    margin-bottom: 28px !important;
}

/* ===========================================================
   PRODUCT GRID — archief & gerelateerde producten
   =========================================================== */
.woocommerce ul.products,
.woocommerce-page ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
    padding: 16px !important;
    background: white !important;
    border: 1px solid var(--pl-line) !important;
    border-radius: var(--pl-radius-lg) !important;
    box-shadow: var(--pl-shadow-sm) !important;
    transition: all .25s ease !important;
    display: flex !important;
    flex-direction: column !important;
}
.woocommerce ul.products li.product:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--pl-shadow-lg) !important;
    border-color: var(--pl-brand-soft) !important;
}
.woocommerce ul.products li.product a img {
    border-radius: var(--pl-radius) !important;
    margin-bottom: 14px !important;
    background: var(--pl-bg) !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--pl-ink) !important;
    padding: 0 4px !important;
    margin-bottom: 6px !important;
}
.woocommerce ul.products li.product .price {
    color: var(--pl-brand) !important;
    font-family: 'Bricolage Grotesque', sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    padding: 0 4px !important;
    margin-bottom: 14px !important;
    display: block !important;
}
.woocommerce ul.products li.product .price del {
    color: var(--pl-muted) !important;
    font-size: 14px !important;
}
.woocommerce ul.products li.product .price ins {
    text-decoration: none !important;
}
.woocommerce ul.products li.product .button {
    margin-top: auto !important;
    width: 100% !important;
    text-align: center !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
}

/* Sale badge */
.woocommerce span.onsale {
    background: var(--pl-brand) !important;
    color: white !important;
    border-radius: 999px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 6px 12px !important;
    min-height: 0 !important;
    min-width: 0 !important;
    line-height: 1 !important;
    top: 12px !important;
    left: 12px !important;
    margin: 0 !important;
}

/* ===========================================================
   ARCHIEF — shop header, sortering
   =========================================================== */
.woocommerce .woocommerce-products-header__title,
.woocommerce-page .woocommerce-products-header__title {
    font-family: 'Bricolage Grotesque', sans-serif !important;
    font-size: 40px !important;
    font-weight: 700 !important;
    letter-spacing: -.02em !important;
    color: var(--pl-ink) !important;
    margin-bottom: 12px !important;
}
.woocommerce .term-description,
.woocommerce-page .term-description {
    font-size: 16px !important;
    color: var(--pl-muted) !important;
    margin-bottom: 32px !important;
}
.woocommerce .woocommerce-result-count {
    font-size: 14px !important;
    color: var(--pl-muted) !important;
}
.woocommerce .woocommerce-ordering select {
    border: 1.5px solid var(--pl-line) !important;
    border-radius: var(--pl-radius) !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    color: var(--pl-ink) !important;
    background: white !important;
}

/* ===========================================================
   NOTICES — meldingen
   =========================================================== */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
.woocommerce p.no-comments {
    border-radius: var(--pl-radius) !important;
    border: none !important;
    font-size: 14px !important;
    padding: 16px 20px 16px 48px !important;
    background: var(--pl-brand-soft) !important;
    color: var(--pl-ink) !important;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
    color: var(--pl-brand) !important;
    top: 18px !important;
    left: 18px !important;
}
.woocommerce-error {
    background: #FDEBEC !important;
}
.woocommerce-error::before {
    color: #E53935 !important;
}

/* ===========================================================
   CART — winkelmand
   =========================================================== */
.woocommerce table.shop_table {
    border: 1px solid var(--pl-line) !important;
    border-radius: var(--pl-radius-lg) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: hidden !important;
}
.woocommerce table.shop_table th {
    background: var(--pl-bg) !important;
    color: var(--pl-ink) !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 16px !important;
}
.woocommerce table.shop_table td {
    padding: 16px !important;
    border-top: 1px solid var(--pl-line) !important;
    font-size: 14px !important;
}
.woocommerce table.shop_table img {
    border-radius: 10px !important;
}
.woocommerce .cart-collaterals .cart_totals {
    border: 1px solid var(--pl-line) !important;
    border-radius: var(--pl-radius-lg) !important;
    padding: 24px !important;
    background: white !important;
}
.woocommerce .cart-collaterals .cart_totals h2 {
    font-family: 'Bricolage Grotesque', sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--pl-ink) !important;
    margin-bottom: 16px !important;
}

/* Coupon veld */
.woocommerce form.checkout_coupon,
.woocommerce .coupon input.input-text {
    border-radius: var(--pl-radius) !important;
}
.woocommerce #coupon_code,
.woocommerce input.input-text,
.woocommerce textarea {
    border: 1.5px solid var(--pl-line) !important;
    border-radius: var(--pl-radius) !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    color: var(--pl-ink) !important;
}
.woocommerce input.input-text:focus,
.woocommerce textarea:focus {
    border-color: var(--pl-brand) !important;
    outline: none !important;
}

/* ===========================================================
   CHECKOUT
   =========================================================== */
.woocommerce-checkout #payment {
    background: white !important;
    border: 1px solid var(--pl-line) !important;
    border-radius: var(--pl-radius-lg) !important;
}
.woocommerce-checkout #payment ul.payment_methods {
    border-bottom: 1px solid var(--pl-line) !important;
}
.woocommerce form .form-row label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--pl-ink) !important;
}
.woocommerce .col2-set .col-1 h3,
.woocommerce .col2-set .col-2 h3,
.woocommerce-checkout h3 {
    font-family: 'Bricolage Grotesque', sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--pl-ink) !important;
}

/* ===========================================================
   RESPONSIVE — mobiel
   =========================================================== */
@media (max-width: 1024px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 768px) {
    html, body.woocommerce, body.woocommerce-page {
        overflow-x: hidden !important;
    }
    .payli-woo-wrap {
        padding: 32px 16px 60px;
    }
    .woocommerce div.product {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
    .woocommerce div.product .product_title {
        font-size: 28px !important;
    }
    .woocommerce div.product p.price,
    .woocommerce div.product span.price {
        font-size: 26px !important;
    }
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
    .woocommerce .woocommerce-products-header__title,
    .woocommerce-page .woocommerce-products-header__title {
        font-size: 28px !important;
    }
    .woocommerce div.product form.cart {
        width: 100%;
    }
    .woocommerce div.product .woocommerce-tabs ul.tabs {
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: 1fr !important;
    }
}


/* ===========================================================
   LAYOUT VERFIJNING — single product pagina
   =========================================================== */

/* Product layout: afbeelding krijgt iets meer ruimte, betere verhouding */
.woocommerce div.product {
    grid-template-columns: 1.05fr 1fr !important;
    gap: 64px !important;
    align-items: start !important;
}

/* === Product afbeelding: vult de hele kolom, geen kleine kaart === */
.woocommerce div.product div.images {
    position: sticky !important;
    top: 100px !important;
}

.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
    background: white !important;
    border: 1px solid var(--pl-line) !important;
    border-radius: var(--pl-radius-lg) !important;
    box-shadow: var(--pl-shadow-md) !important;
    padding: 32px !important;
    width: 100% !important;
}

.woocommerce div.product div.images img {
    box-shadow: none !important;
    border-radius: 12px !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
}

/* Zoom/lightbox knopje netjes in de hoek */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
    top: 20px !important;
    right: 20px !important;
    background: white !important;
    border: 1px solid var(--pl-line) !important;
    border-radius: 10px !important;
    width: 44px !important;
    height: 44px !important;
    box-shadow: var(--pl-shadow-sm) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* === Rechterkolom: alles netjes gegroepeerd === */
.woocommerce div.product div.summary {
    padding: 8px 0 !important;
}

/* Quantity + add-to-cart op één lijn, mooi uitgelijnd */
.woocommerce div.product form.cart {
    display: flex !important;
    gap: 12px !important;
    align-items: stretch !important;
    margin: 0 0 20px !important;
    flex-wrap: nowrap !important;
}

.woocommerce div.product form.cart .quantity {
    flex: 0 0 auto !important;
}

.woocommerce div.product form.cart .quantity .qty {
    height: 56px !important;
}

/* Add-to-cart knop neemt resterende ruimte */
.woocommerce div.product form.cart .button {
    flex: 1 1 auto !important;
    height: 56px !important;
    font-size: 15px !important;
}

/* === Express checkout knoppen (Apple Pay / Google Pay / Link) === */
/* Netjes groeperen in een omkaderd blokje met scheiding */
.woocommerce div.product .wc-stripe-product-checkout-container,
.woocommerce div.product .wc-stripe-payment-request-wrapper,
.woocommerce div.product #wc-stripe-payment-request-wrapper,
.woocommerce div.product .payment-request-wrapper {
    margin: 16px 0 0 !important;
    padding: 20px 0 0 !important;
    border-top: 1px solid var(--pl-line) !important;
}

/* "of betaal direct met" scheidingslabel boven express knoppen */
.woocommerce div.product .wc-stripe-payment-request-wrapper::before,
.woocommerce div.product #wc-stripe-payment-request-wrapper::before {
    content: "Of reken direct af";
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--pl-muted);
    text-align: center;
    margin-bottom: 14px;
}

/* Express knoppen: afgeronde hoeken passend bij Payli stijl */
.woocommerce div.product .wc-stripe-payment-request-button-element,
.woocommerce div.product .payment-request-wrapper button,
.woocommerce div.product .wc-stripe-payment-request-wrapper button {
    border-radius: 999px !important;
    overflow: hidden !important;
    max-width: 360px !important;
    margin: 0 auto 10px !important;
}

/* "of" separator van WooCommerce */
.woocommerce div.product .wc-stripe-payment-request-button-separator {
    display: none !important;
}

/* Product meta (categorie) — netjes met ruimte */
.woocommerce div.product .product_meta {
    margin-top: 20px !important;
    padding-top: 20px !important;
    text-align: left !important;
}

.woocommerce div.product .product_meta > span {
    font-size: 13px !important;
    text-transform: none !important;
}
.woocommerce div.product .product_meta .posted_in {
    font-weight: 600 !important;
    color: var(--pl-ink) !important;
}

/* Korte beschrijving met iets meer lucht */
.woocommerce div.product .woocommerce-product-details__short-description {
    padding-bottom: 24px !important;
    border-bottom: 1px solid var(--pl-line) !important;
    margin-bottom: 24px !important;
}

/* Als er GEEN korte beschrijving is: prijs krijgt onderlijn als scheiding */
.woocommerce div.product p.price {
    padding-bottom: 24px !important;
    border-bottom: 1px solid var(--pl-line) !important;
    margin-bottom: 24px !important;
}

/* ===========================================================
   RESPONSIVE — verfijning mobiel
   =========================================================== */
@media (max-width: 768px) {
    .woocommerce div.product {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }
    .woocommerce div.product div.images {
        position: static !important;
        top: auto !important;
    }
    .woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
        padding: 20px !important;
    }
    .woocommerce div.product form.cart {
        flex-wrap: wrap !important;
    }
    .woocommerce div.product form.cart .quantity,
    .woocommerce div.product form.cart .quantity .qty {
        width: 100% !important;
    }
    .woocommerce div.product form.cart .button {
        width: 100% !important;
        flex: 1 1 100% !important;
    }
}

/* === EINDE LAYOUT VERFIJNING === */


/* ===========================================================
   HARDE FIX — afbeelding vult kolom, knop niet ingedrukt
   Overschrijft WooCommerce's eigen width: 48% floats
   =========================================================== */

/* Product container = CSS grid, geen floats */
.woocommerce div.product,
.woocommerce-page div.product,
body.single-product div.product {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 56px !important;
    align-items: start !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* === Afbeeldingskolom: VOLLE breedte van de grid-kolom === */
.woocommerce div.product div.images,
.woocommerce-page div.product div.images,
body.single-product div.product div.images {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: none !important;
    box-sizing: border-box !important;
}

/* De gallery zelf ook vol */
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce-page div.product .woocommerce-product-gallery {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    float: none !important;
}

.woocommerce div.product .woocommerce-product-gallery__wrapper,
.woocommerce-page div.product .woocommerce-product-gallery__wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    transform: none !important;
}

/* De afbeelding-figure vol */
.woocommerce div.product .woocommerce-product-gallery__image,
.woocommerce div.product div.images figure,
.woocommerce-page div.product .woocommerce-product-gallery__image {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    float: none !important;
}

/* De <img> zelf: vult de kaart */
.woocommerce div.product div.images img,
.woocommerce div.product .woocommerce-product-gallery__image img,
.woocommerce-page div.product div.images img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* === Summary-kolom: VOLLE breedte van zijn grid-kolom === */
.woocommerce div.product div.summary,
.woocommerce-page div.product div.summary,
body.single-product div.product div.summary {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: none !important;
    box-sizing: border-box !important;
}

/* === Add-to-cart knop: NIET ingedrukt, tekst op één regel === */
.woocommerce div.product form.cart {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
}

.woocommerce div.product form.cart .quantity {
    flex: 0 0 auto !important;
    width: auto !important;
}

.woocommerce div.product form.cart .quantity .qty {
    width: 88px !important;
    height: 56px !important;
}

/* Knop neemt ALLE resterende ruimte, tekst op één regel */
.woocommerce div.product form.cart button.button,
.woocommerce div.product form.cart .single_add_to_cart_button {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 56px !important;
    white-space: nowrap !important;
    padding: 16px 28px !important;
    font-size: 15px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* === Express checkout knoppen: max breedte, gecentreerd === */
.woocommerce div.product .wc-stripe-payment-request-wrapper,
.woocommerce div.product #wc-stripe-payment-request-wrapper,
.woocommerce div.product .wc-stripe-product-checkout-container {
    width: 100% !important;
    max-width: 100% !important;
}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width: 768px) {
    .woocommerce div.product,
    .woocommerce-page div.product,
    body.single-product div.product {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }
    .woocommerce div.product form.cart {
        flex-wrap: wrap !important;
    }
    .woocommerce div.product form.cart .quantity,
    .woocommerce div.product form.cart .quantity .qty {
        width: 100% !important;
    }
    .woocommerce div.product form.cart button.button,
    .woocommerce div.product form.cart .single_add_to_cart_button {
        flex: 1 1 100% !important;
        width: 100% !important;
    }
}

/* === EINDE HARDE FIX === */