/**************************************************************************/
/******************************** GLOBAL **********************************/
/**************************************************************************/
#neu-im-shop, .wp-block-product-new, .wp-block-separator { display: none !important; }
.woocommerce-Address-title { font-size: unset; color: unset; }
.wc-block-checkout__order-notes { display: none !important; }
.woocommerce-variation-add-to-cart .quantity .qty { width: 3.631em; text-align: center; }
.wc-block-components-address-form__eu-vat-guard-vat_number { flex: unset !important; width: 100%; }
.vat-guard-exempt-notice { margin-inline: 16px !important; }
.wc-block-components-radio-control .wc-block-components-radio-control__input:checked:before { background: var(--color-green-primary) !important; }
.single_add_to_cart_button:hover { cursor: pointer; }
.wc-block-components-checkbox .wc-block-components-checkbox__mark { fill: var(--color-green-secondary) !important; }
.woocommerce-MyAccount-content fieldset { margin-top: 4rem; margin-bottom: 2rem; }
/* Verberg de wrapper-rij waar de vat_number input in zit, ongeacht de formulierklasse */
p.form-row:has(#vat_number),
p.form-row-wide:has(#vat_number) {
    display: none !important;
}


#tab-description p { margin-block: 1rem; }
.woocommerce-Tabs-panel--description h2 { margin-block: 1rem; }
.tabs.wc-tabs, .woocommerce-result-count { display: none !important; }
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product span.price { color: black; }
.woocommerce ul.products li.product .button { white-space: nowrap; }
.woocommerce-variation-price .price { display: flex !important; gap: 1rem; }

.single_add_to_cart_button, .add_to_cart_button, .open-options-modal { width: 100%; max-width: 100%; box-sizing: border-box !important; display: inline-flex !important; align-items: center; justify-content: center; gap: .5rem; background: var(--color-green-primary) !important; padding: 1rem !important; color: white !important; font-weight: var(--font-weight) !important; font-size: 1.3rem !important; border: none !important; border-radius: var(--border-radius) !important; transition: all .2s ease-in-out; } 
.single_add_to_cart_button::after, 
.add_to_cart_button::after {
    content: "\e903";
    font-family: 'Woo-Side-Cart' !important;
	color: white;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}
.product_type_variable::after, .open-options-modal::after { content: "\f111" !important; font-family: dashicons !important; color: white; }
.single_add_to_cart_button:hover, .add_to_cart_button:hover, .open-options-modal:hover { background: var(--color-green-secondary) !important; }

.woocommerce .woocommerce-ordering { margin-bottom: 4rem; }
.woocommerce .products ul, .woocommerce ul.products { margin-block: 4rem; }

/*PAGINATION*/
.woocommerce nav.woocommerce-pagination * { border: none !important; }
.woocommerce nav.woocommerce-pagination a { background: none !important; min-width: 2rem !important; color: black !important; font-size: 1.5rem !important; font-weight: var(--font-weight) !important; }
.woocommerce nav.woocommerce-pagination a:hover { color: var(--color-green-primary) !important; }
.woocommerce nav.woocommerce-pagination ul li span.current { background: none !important; color: var(--color-green-primary) !important; font-size: 1.5rem !important; font-weight: var(--font-weight) !important;  }
.woocommerce nav.woocommerce-pagination ul li a:focus, .woocommerce nav.woocommerce-pagination ul li a:hover, .woocommerce nav.woocommerce-pagination ul li span.current {
    background: var(--color-green-secondary);
    color: white;
}
.woocommerce nav.woocommerce-pagination ul li { border-color: var(--color-green-primary) !important; }
/* 1. De hoofd-grid (de productlijst) */
main ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; 
    gap: 24px !important;
    position: relative;
}
ul.products .single_add_to_cart_button, ul.products .add_to_cart_button, ul.products .open-options-modal { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important;  }
/* Oude WooCommerce floats opruimen */
ul.products::before,
ul.products::after {
    content: none !important;
}
.woocommerce ul.products li.product .woocommerce-placeholder { border: none !important; }
main ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
	/* box-shadow: var(--box-shadow) !important; */
	border: 1px solid var(--color-green-primary);
	transition: all .2s ease-in-out;
}

ul.products li.product {
    float: none !important;
    clear: none !important;
	border-radius: var(--border-radius) !important;
    background: #f8f9fa !important;
}

ul.products li.product:hover {
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* 2. De productkaart (li) instellen voor Subgrid */
main ul.products li.product {
    display: grid !important;
    grid-template-rows: subgrid !important;
    grid-row: span 4 !important;
    gap: 12px !important;
}

/* 3. DE MISSENDE STAP: De productlink (a) openbreken */
ul.products li.product .woocommerce-LoopProduct-link {
    display: contents !important; 
}
ul.products li.product a img { height: 100% !important; }

/*LOADING SHOP PAGE*/
/* Volledige schermverduistering voor de shop */
.shop-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Zelfde verduistering als je modal */
    z-index: 99999; /* Zorgt dat hij boven alles zweeft */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Wordt geactiveerd via jQuery */
.shop-loading-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

ul.products.products-loading a,
ul.products.products-loading button,
ul.products.products-loading input,
ul.products.products-loading select,
ul.products.products-loading li.product {
    pointer-events: none !important;
}


ul.products li.product .woocommerce-loop-product__title { font-size: 1.3rem !important; }
ul.products li.product .price { color: var(--color-green-primary) !important; font-size: 1.15rem !important; font-weight: var(--font-weight) !important; margin: 0 !important;}
ul.products li.product .woocommerce-loop-product__title, ul.products li.product .price { padding-inline: 1rem !important; }
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.added::after, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.added::after, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.added::after, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.added::after, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.added::after, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.added::after, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.added::after, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.added::after { font-family: WooCommerce !important; }

ul.products li.product a img { border-top-left-radius: var(--border-radius) !important; border-top-right-radius: var(--border-radius) !important; }

.product-slider ul.products li.product a img { height: 18rem !important; object-fit: cover; }
.product-slider ul.products li.product, .product-slider ul.products li.product a.woocommerce-loop-product__link { display: flex; flex-direction: column; justify-content: space-between; }
.product-slider ul.products li.product .woocommerce-loop-product__title { margin-bottom: auto; }


/*SPINNER*/
/* Verberg de spinner standaard */
.modal-loader-wrapper {
    display: none;
}

/* Als de modal laadt: toon de spinner in het exacte midden van het scherm */
.custom-product-modal-overlay.is-open.is-loading .modal-loader-wrapper {
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99999;
}

/* Als de modal laadt: verberg de witte box volledig */
.custom-product-modal-overlay.is-open.is-loading .custom-product-modal-content {
    display: none !important;
}



.single-product span.onsale {
    width: auto !important;
    min-width: unset !important;
    display: inline-block !important;
    padding: 5px 15px !important; /* Geeft de badge weer een mooie vorm */
    right: auto !important;        /* Zorgt dat hij links uitlijnt, net als op de overzichtspagina */
    left: 0;
    border-top-right-radius: var(--border-radius) !important;
    border-bottom-right-radius: var(--border-radius) !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0!important;
}

/* ==========================================================================
   1. DE OVERLAY (ACHTERGROND VERDUISTERING)
   ========================================================================== */
.custom-product-modal-overlay {
    display: none; /* Standaard onzichtbaar */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.65); /* Donkere waas */
    z-index: 999999; /* Zorg dat hij overal bovenop ligt */
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

/* Wordt toegevoegd door jQuery zodra je op 'Opties selecteren' klikt */
.custom-product-modal-overlay.is-open {
    display: flex; 
}

/* ==========================================================================
   2. DE POP-UP CONTAINER (WITTE BOX)
   ========================================================================== */
.custom-product-modal-content {
    background: #ffffff;
    border-radius: var(--border-radius);
    width: 100%;
    position: relative;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);
    max-height: 90vh; /* Voorkomt dat de modal van het scherm loopt bij veel opties */
    overflow-y: auto; /* Voegt scrollbalk toe binnen de modal als dat nodig is */
    animation: modalFadeIn 0.3s ease-out;
}

/* Sluitknop (X) rechtsboven */
.close-modal-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 32px;
    cursor: pointer;
    line-height: 1;
    color: #333;
    transition: color 0.2s;
}
.close-modal-btn:hover {
    color: var(--color-green-secondary);
}

/* ==========================================================================
   3. JOUW SPECIFIEKE MODAL LAY-OUT (De PHP HTML-structuur)
   ========================================================================== */
/* We maken een flex- of grid-indeling om de afbeelding en omschrijving te splitsen */
#modal-dynamic-content {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Afbeelding links (200px), tekst rechts */
    gap: 25px;
}

#modal-dynamic-content .product-description { display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; padding: 2rem; }
/* #modal-dynamic-content .product-image { padding: 2rem; } */

@media (max-width: 600px) {
    /* Op mobiel zetten we de afbeelding en tekst netjes onder elkaar */
    #modal-dynamic-content {
        grid-template-columns: 1fr;
        gap: 15px;
    }
	#modal-dynamic-content .product-description { padding: 1rem; }
}

.custom-product-modal-content .product-image img {
    width: 100%;
    height: 100%; 
    object-fit: contain;
    border-radius: var(--border-radius);
}

.custom-product-modal-content .product-description span {
    color: var(--color-green-primary);
    font-size: 1.5rem;
    font-weight: var(--font-weight);
}

.custom-product-modal-content .product-description h3 {
    font-size: 2.2rem;
    font-weight: var(--font-weight);
    line-height: 1.2;
}

.custom-product-modal-content .description {
    font-size: 1.2rem;
}

.custom-product-modal-content .product-link {
    display: block;
    font-size: 1.3rem;
    font-weight: var(--font-weight);
	text-decoration: underline;
	transition: all .2s ease-in-out;
	margin-block: .5rem;
}
.custom-product-modal-content .product-link:hover { color: var(--color-green-primary); }

.custom-product-modal-content .variations .label, .custom-product-modal-content .variations .reset_variations { display: none; }
.custom-product-modal-content .single_variation_wrap .woocommerce-variation-add-to-cart { display: flex; gap: 1rem; justify-content: space-between; align-items: center; }
.custom-product-modal-content .single_variation_wrap { margin-top: auto; }
.custom-product-modal-content .woocommerce-variation-price { margin-block: 1rem; }
/* ==========================================================================
   5. ANIMATIE
   ========================================================================== */
@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}







/**************************************************************************/
/************************* SINGLE PRODUCT PAGE ****************************/
/**************************************************************************/
/* Verberg de prijs-range bovenaan ALLEEN bij variabele producten */
.product-type-variable .summary > p.price {
    display: none !important;
}

/* Zorg dat de gekozen variatie-prijs onderaan (boven de knop) wél zichtbaar blijft */
.product-type-variable .single_variation .price {
    display: block !important;
}

/* Zorg dat de prijs van een simpel product altijd netjes zichtbaar blijft */
.product-type-simple .summary p.price {
    display: block !important;
}

/* Slider arrows */
/* Container voor de pijlen relatief positioneren ten opzichte van de wrapper */
.woocommerce-product-gallery {
    position: relative !important;
}

/* Algemene styling voor de FlexSlider pijl-navigatie */
.woocommerce-product-gallery .flex-direction-nav {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce-product-gallery .flex-direction-nav a {
    position: absolute !important;
    top: 37% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    width: 40px !important;
    height: 40px !important;
    background: white;
    border-radius: 50% !important;
    text-align: center !important;
    line-height: 38px !important;
    color: #333333 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-size: 0 !important; /* Verbergt eventuele standaard tekst-pijlen */
}

/* Hover effect voor de knoppen */
.woocommerce-product-gallery .flex-direction-nav a:hover {
    color: var(--color-green-primary, #4caf50) !important; 
}

/* Linker pijl positioneren */
.woocommerce-product-gallery .flex-direction-nav a.flex-prev {
    left: 15px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Rechter pijl positioneren */
.woocommerce-product-gallery .flex-direction-nav a.flex-next {
    right: 15px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Pijl-icoontjes toevoegen met CSS borders (geen zware icon-fonts nodig) */
.woocommerce-product-gallery .flex-direction-nav a.flex-prev::before {
    content: '' !important;
    display: inline-block !important;
    width: 10px !important;
    height: 10px !important;
    border-left: 2px solid currentColor !important;
    border-bottom: 2px solid currentColor !important;
    transform: rotate(45deg) !important;
    margin-left: 4px !important;
}

.woocommerce-product-gallery .flex-direction-nav a.flex-next::before {
    content: '' !important;
    display: inline-block !important;
    width: 10px !important;
    height: 10px !important;
    border-right: 2px solid currentColor !important;
    border-top: 2px solid currentColor !important;
    transform: rotate(45deg) !important;
    margin-right: 4px !important;
}


.product .product_title { margin-bottom: 1rem; }
.product .price { margin-block: 1rem !important;}
.product .variations select { margin-top: 2rem; }
.product .woocommerce-Price-amount { color: var(--color-green-primary) !important; font-size: 1.3rem !important; font-weight: var(--font-weight) !important; margin: 0 !important; }
.product .cart { display: flex; align-items: center; }
.product-type-variable .cart { flex-wrap: wrap; }
.single_variation_wrap { width: 100%; }
.woocommerce-variation-add-to-cart { display: flex; align-items: center; }
.woocommerce-variation { width: 100%; }
.product .cart .quantify { margin-right: 1rem !important; }
.variations label, .variations .reset_variations { display: none !important; }

.product .product_meta, .product .summary > h2  { display: none; }

.woocommerce table.shop_attributes { border-top: none; }
.woocommerce table.shop_attributes th, .woocommerce table.shop_attributes td { text-align: start; border-bottom: none; }
.woocommerce table.shop_attributes tr:nth-child(even) th, .woocommerce table.shop_attributes tr:nth-child(even) td { background: none; }
.woocommerce table.shop_attributes th { font-size: 1rem;}
.woocommerce table.shop_attributes td { font-style: normal; }
/* 1. Zorg dat de tabel randen op rijen toestaat */
.woocommerce table.shop_attributes {
    border-collapse: collapse !important;
}

/* 2. Nu zal deze regel wél werken! */
.woocommerce table.shop_attributes tr { 
    border-bottom: 1px solid var(--color-green-light) !important; 
}
.woocommerce-product-gallery__image {
    pointer-events: none !important;
}

.flex-viewport { background: #f8f9fa; border-radius: var(--border-radius); }
.single-product .woocommerce-product-gallery__image a { width: 100%; }
.single-product .woocommerce-product-gallery__image img {
    width: 100% !important;
    height: 25rem !important;
    /*aspect-ratio: 1 / 1 !important; /* Dwingt de afbeelding in een perfect vierkant */
    object-fit: contain !important;   /* Zorgt dat de afbeelding niet vervormt maar vult */
    object-position: center !important; /* Centreert de afbeelding */
    border-radius: var(--border-radius);
}



/*PREVIEW IMAGES */
/* 1. Maak de container vrij voor scrollen en forceer de breedte */
.single-product .flex-control-thumbs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;   /* Forceer horizontale scroll */
    overflow-y: hidden !important;
    width: 100% !important;        /* CRUCIAAL: mag niet groter worden dan parent */
    max-width: 100% !important;
    
    /* Interactie en swipe-optimalisatie */
    pointer-events: auto !important; 
    touch-action: pan-x !important; 
    -webkit-overflow-scrolling: touch !important; 
    
    gap: 10px !important;
    margin-top: 15px !important;
    padding: 0 0 10px 0 !important; 
}

/* 2. Zorg dat de list items exact 1/4e pakken en niet krimpen */
.single-product .flex-control-thumbs li {
    flex: 0 0 calc((100% - (3 * 10px)) / 4) !important; /* Behoudt de 4 kolommen */
    width: calc((100% - (3 * 10px)) / 4) !important;
    list-style: none !important;
}


.woocommerce div.product div.images, .woocommerce div.product div.summary { margin-bottom: 4rem; } 
.package-content { margin-bottom: 4rem; }
.package-content > .container { width: 94.5%; padding: 2rem; padding-block: 3rem; display: flex; background: var(--color-green-light); margin-inline: unset; }
.package-content p { display: flex; align-items: end; font-size: 1.15rem; }
.package-content svg { width: 2.8rem; margin-right: .5rem; }
.package-content img { width: 20rem; position: absolute; right: -3.5rem; bottom: 0; }
.package-content h2 { font-size: 2.2rem; margin-bottom: 2rem; }
.woocommerce-Tabs-panel--description .product-description { width: 70%; }
.woocommerce div.product div.images .flex-control-thumbs li img { border-radius: var(--border-radius); }


/* Veelgestelde vragen */
.faq { position: relative; }
.faq > div > h2 { color: var(--color-green-primary); font-size: 3rem; font-weight: var(--font-weight); line-height: 1.2; margin-bottom: 4rem; }
.faq .questions-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 1;  }
.faq .questions-bg img { position: sticky; top: 10rem; left: 1rem; opacity: .3; width: 25rem; display: block; }
.description-container .container { display: flex; }
.description-container > img { position: absolute; top: 2rem; right: 1rem; opacity: .3; width: 20rem; }


/* recommendations */
.woocommerce-loop-product__title { color: black !important; }
.recommendations { position: relative; margin-top: 5rem; padding-top: 10rem; padding-bottom: 4rem; }
.recommendations .background { position: absolute; z-index: 0; display: block; top: 0; left: 0; object-fit: cover; width: 100%; height: 100%; opacity: .2; user-select: none; pointer-events: none; }
.recommendations h2 { color: var(--color-green-primary); font-size: 3rem; font-weight: var(--font-weight); line-height: 1.2; }
.recommendations p { color: black; font-size: 2rem; font-weight: var(--font-weight); margin-bottom: 2rem; }
.recommendations ul.products li.product { border: none; }




@media (max-width: 1330px) {
    main ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media screen and (max-width: 1146px) { 
	.toc .wh-toc-toggle-icon, #wh-toc-sticky-bar { display: block; }
	.description-container .toc { display: none; }
	.faq .questions-bg img { display: none; }
	.faq .product-description { width: 100%; }
	.package-content img { right: 0; }
}

@media (max-width: 930px) {
    main ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media screen and (max-width: 756px) { 
	.description-container > img { display: none; }
}  


@media (max-width: 768px) { 
	.woocommerce div.product div.images, .woocommerce div.product div.summary, .package-content { margin-bottom: 4rem; }
	.package-content > .container { width: unset; }
	.package-content img { display: none; }
	.single-product .woocommerce-product-gallery__image img { height: unset !important; }
}


@media (max-width: 600px) {
    main ul.products { grid-template-columns: repeat(1, 1fr) !important; }
	.woocommerce ul.products li.product a img { height: unset !important; }
}