/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* ==========================================================================
   4.4 WooCommerce kleurschema
   --wc-primary: paars WooCommerce default (#720eec) → blauw (#0f3c69)
   ========================================================================== */

/* --- CSS custom properties overschrijven --- */
:root {
	--wc-primary:           #0f3c69;
	--wc-primary-text:      #ffffff;
	--wc-primary-highlight: #0a2d50; /* iets donkerder blauw voor hover */
	--wc-secondary:         #0f3c69;
	--wc-highlight:         #0f3c69;
	--wc-highlighttext:     #ffffff;
	--wc-color-on-primary:  #ffffff;
}

/* --- WooCommerce knoppen (klassieke checkout + winkelwagen) --- */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #place_order,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-mini-cart__buttons a.button,
.woocommerce-mini-cart__buttons a.checkout,
.wc-block-components-button,
.wc-block-cart__submit-button,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-place-order-button {
	background-color: #0f3c69 !important;
	color:            #ffffff !important;
	border-color:     #0f3c69 !important;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #place_order:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-mini-cart__buttons a.button:hover,
.woocommerce-mini-cart__buttons a.checkout:hover,
.wc-block-components-button:hover,
.wc-block-cart__submit-button:hover {
	background-color: #0a2d50 !important;
	color:            #ffffff !important;
	border-color:     #0a2d50 !important;
}

/* --- Alt / secondary knoppen (bijv. "Naar winkelwagen") --- */
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background-color: #0f3c69 !important;
	color:            #ffffff !important;
}

.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background-color: #0a2d50 !important;
	color:            #ffffff !important;
}

/* --- Formulierelementen: focus-rand --- */
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.wc-block-components-text-input input:focus,
.wc-block-components-select select:focus {
	border-color: #0f3c69 !important;
	outline:      none;
	box-shadow:   0 0 0 2px rgba(15, 60, 105, 0.25) !important;
}

/* --- Links binnen WooCommerce (tabs, broodkruimels, etc.) --- */
.woocommerce ul.tabs li a:focus,
.woocommerce ul.tabs li.active a,
.woocommerce-breadcrumb a,
.woocommerce a {
	color: #0f3c69;
}

/* --- Tabblad actief-streep (product detail) --- */
.woocommerce ul.tabs li.active {
	border-bottom-color: #0f3c69;
}

/* --- Prijs / verkoop-badge kleur --- */
.woocommerce span.onsale {
	background-color: #0f3c69;
	color:            #ffffff;
}

/* ==========================================================================
   4.5 Card-styling
   border-radius: 14px (= --radius) | box-shadow conform design
   ========================================================================== */

/* --- Productkaarten (klassiek loop + blocks) --- */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.wc-block-grid__product,
.wc-block-product-template .wc-block-product {
	border-radius: 14px;
	box-shadow:    0 4px 24px rgba(15, 45, 75, .10);
	overflow:      hidden; /* afbeelding mee afkappen op radius */
	transition:    box-shadow .25s ease, transform .25s ease;
}

.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover,
.wc-block-grid__product:hover,
.wc-block-product-template .wc-block-product:hover {
	box-shadow: 0 8px 36px rgba(15, 45, 75, .18);
	transform:  translateY(-2px); /* subtiele lift — weglaten als ongewenst */
}

/* ==========================================================================
   Subheader Icon List → Slideshow op mobiel
   Activeer door op de Elementor widget "subheader" als CSS-klasse in te stellen
   (Geavanceerd › CSS-klassen).
   ========================================================================== */

@media (max-width: 768px) {

	.subheader .elementor-icon-list-items.sub-is-slider {
		display: block;
		padding: 0;
		margin:  0;
		width:   100%;
	}

	/* Verberg alle items */
	.subheader .elementor-icon-list-items.sub-is-slider
	> li.elementor-icon-list-item {
		display: none;
	}

	/* Toon alleen het actieve item — 100% breed, gecentreerd */
	.subheader .elementor-icon-list-items.sub-is-slider
	> li.elementor-icon-list-item.sub-slide-active {
		display:         flex;
		justify-content: center;
		align-items:     center;
		width:           100%;
		text-align:      center;
		animation:       sub-slide-in 0.4s ease;
	}

	/* Zorg dat de tekst binnen het item ook centreert */
	.subheader .elementor-icon-list-items.sub-is-slider
	> li.elementor-icon-list-item.sub-slide-active .elementor-icon-list-text {
		text-align: center;
	}

	@keyframes sub-slide-in {
		from { opacity: 0; transform: translateY(6px); }
		to   { opacity: 1; transform: translateY(0);   }
	}

}




.subcategorie-links {
    display:       flex;
    flex-wrap:     wrap;
    gap:           8px;
    margin-bottom: 28px;
    align-items:   center;
}

.subcategorie-link {
    display:         inline-flex;
    align-items:     center;
    padding:         7px 18px;
    border:          1.5px solid #e4e0d8;
    border-radius:   50px;
    background:      #f0ece4;
    color:           #1e2d3d;
    font-size:       0.875rem;
    font-weight:     500;
    line-height:     1.4;
    white-space:     nowrap;
    text-decoration: none;
    transition:      background 0.18s, border-color 0.18s, color 0.18s;
}

.subcategorie-link:hover {
    background:      #e5dfd5;
    border-color:    #c8c2b8;
    color:           #0f2d4b;
    text-decoration: none;
}

/* Actieve categorie */
.subcategorie-link.active,
.subcategorie-link[aria-current="page"],
.subcategorie-link.current-cat {
    background:   #1e2d3d;
    border-color: #1e2d3d;
    color:        #ffffff;
    font-weight:  600;
}

/* Dropdown: standaard verborgen (desktop = pills) */
.subcategorie-dropdown {
    display: none;
}

/* Mobiel: pills verbergen, dropdown tonen */
@media (max-width: 600px) {
    .subcategorie-links {
        display: none;
    }

    .subcategorie-dropdown {
        display:        block;
        width:          100%;
        margin-bottom:  20px;
        padding:        10px 40px 10px 16px;
        border:         1.5px solid #e4e0d8;
        border-radius:  12px;
        background:     #f0ece4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%236b7a8d' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;
        appearance:         none;
        -webkit-appearance: none;
        font-size:      0.95rem;
        font-weight:    500;
        color:          #1e2d3d;
        cursor:         pointer;
        outline:        none;
        transition:     border-color 0.18s, box-shadow 0.18s;
    }

    .subcategorie-dropdown:focus {
        border-color: #0f2d4b;
        box-shadow:   0 0 0 3px rgba(15, 45, 75, 0.10);
    }
}

/* ==========================================================================
   Shop Toolbar
   Shortcode: [shop_toolbar button_url="/account-aanvragen"]
   ========================================================================== */

.shop-toolbar {
    display:       flex;
    align-items:   center;
    gap:           12px;
    margin-bottom: 24px;
}

/* ── Zoekbalk ── */
.shop-toolbar__search {
    flex:          1 1 0;
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       0 18px;
    border:        1.5px solid #dde3ea;
    border-radius: 50px;
    background:    #ffffff;
    transition:    border-color 0.18s, box-shadow 0.18s;
    min-width:     0;
    /* reset browser-default form outline */
    outline:       none;
}

.shop-toolbar__search:focus-within {
    border-color: #1e5a87;
    box-shadow:   0 0 0 3px rgba(30, 90, 135, 0.12);
}

.shop-toolbar__search i {
    color:       #9aabb8;
    font-size:   0.88rem;
    flex-shrink: 0;
}

.shop-toolbar__search-input {
    flex:        1;
    border:      none !important;
    outline:     none !important;
    box-shadow:  none !important;
    background:  transparent;
    font-size:   0.9rem;
    color:       #1e2d3d;
    padding:     10px 0;
    min-width:   0;
    /* reset WooCommerce / theme input styles */
    border-radius: 0;
}

.shop-toolbar__search-input::placeholder {
    color: #aebdca;
}

/* ── Sortering ── */
.shop-toolbar__sort {
    flex-shrink: 0;
}

.shop-toolbar__select {
    border:        1.5px solid #dde3ea;
    border-radius: 50px;
    padding:       9px 38px 9px 18px;
    font-size:     0.9rem;
    color:         #1e2d3d;
    background:    #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%236b7a8d' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 15px center;
    appearance:    none;
    -webkit-appearance: none;
    cursor:        pointer;
    outline:       none;
    transition:    border-color 0.18s, box-shadow 0.18s;
    white-space:   nowrap;
}

.shop-toolbar__select:focus {
    border-color: #0f2d4b;
    box-shadow:   0 0 0 3px rgba(15, 45, 75, 0.10);
}

/* ── Knop ── */
.shop-toolbar__btn {
    flex-shrink:     0;
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    padding:         9px 22px;
    border-radius:   50px;
    background:      #0f3c69;
    color:           #ffffff !important;
    font-size:       0.875rem;
    font-weight:     600;
    white-space:     nowrap;
    text-decoration: none;
    transition:      background 0.18s;
}

.shop-toolbar__btn:hover {
    background:      #0f2d4b;
    color:           #ffffff !important;
    text-decoration: none;
}

/* ── Mobiel ── */
@media (max-width: 640px) {
    .shop-toolbar {
        flex-wrap: wrap;
    }

    .shop-toolbar__search {
        flex: 1 1 100%;
        order: 1;
    }

    .shop-toolbar__sort {
        flex: 1 1 0;
        order: 2;
    }

    .shop-toolbar__sort .shop-toolbar__select {
        width: 100%;
    }

    .shop-toolbar__btn {
        flex:            1 1 0;
        order:           3;
        justify-content: center;
    }
}

/* ==========================================================================
   Loop: voorraadlabel [aggvo_stock_info]
   ========================================================================== */

.aggvo-stock {
    display:     flex;
    align-items: center;
    gap:         5px;
    font-size:   12px;
    font-weight: 500;
    margin:      4px 0 6px;
    line-height: 1.3;
}

.aggvo-stock--in  { color: #2e7d32; }
.aggvo-stock--low { color: #c75000; }
.aggvo-stock--out { color: #9e9e9e; }

/* ==========================================================================
   Loop: slimme knop [aggvo_loop_button]
   ========================================================================== */

/*
 * Verberg de ORIGINELE WooCommerce add-to-cart knoppen in de Elementor Loop.
 * De [aggvo_loop_button] shortcode vervangt deze volledig.
 * Verwijder deze regel als je de oude knop ook uit het Elementor template hebt gehaald.
 */
.wc-block-product-template .wp-block-button:not(:has(.aggvo-lb)),
.wc-block-product-template .wc-block-components-product-button:not(:has(.aggvo-lb)),
.wc-block-product-template a.add_to_cart_button:not(.aggvo-lb),
.wc-block-product-template a.button:not(.aggvo-lb),
.wc-block-product-template .elementor-button-wrapper:not(:has(.aggvo-lb)) {
    display: none !important;
}

.aggvo-lb {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    width:           100%;
    padding:         11px 16px;
    font-size:       14px;
    font-weight:     600;
    text-align:      center;
    text-decoration: none;
    border-radius:   0 0 10px 10px;
    transition:      background 0.2s, color 0.2s, box-shadow 0.15s;
    cursor:          pointer;
    box-sizing:      border-box;
}

/* Verwijder de standaard padding van de Elementor widget-wrapper */
.elementor-widget-shortcode:has(.aggvo-lb) .elementor-widget-container {
    padding: 0 !important;
}

/* "In winkelwagen" — donker */
.aggvo-lb--cart {
    background: #1E2D3D;
    color:      #ffffff !important;
}

.aggvo-lb--cart:hover {
    background: #2d4460;
    color:      #ffffff !important;
    box-shadow: 0 4px 14px rgba(30, 45, 61, 0.25);
}

/* "Kies opties" — licht, onderscheidend van directe aankoop */
.aggvo-lb--options {
    background: #f0ece4;
    color:      #1E2D3D !important;
    border:     1.5px solid #d0c8bc;
}

.aggvo-lb--options:hover {
    background: #e5dfd5;
    color:      #1E2D3D !important;
    box-shadow: 0 4px 14px rgba(30, 45, 61, 0.10);
}

/* ==========================================================================
   Productgalerij Lightbox Modal
   ========================================================================== */

/* Pointer op de klikbare galerij-afbeeldingen */
.woocommerce-product-gallery__image a {
    cursor: zoom-in;
    display: block;
}

/* Vangnet: verberg WooCommerce zoom-overlay als die toch geladen wordt */
.woocommerce-product-gallery .zoomImg { display: none !important; }

/* Scroll vergrendelen terwijl de modal open is */
body.cb-lb-noscroll { overflow: hidden; }

/* ── Modal wrapper ── */
#cb-lightbox {
    display:          none;
    position:         fixed;
    inset:            0;
    z-index:          100000;
    align-items:      center;
    justify-content:  center;
}

#cb-lightbox.is-open {
    display: flex;
}

/* ── Donkere overlay ── */
.cb-lb__backdrop {
    position:   absolute;
    inset:      0;
    background: rgba(8, 12, 20, 0.90);
    cursor:     zoom-out;
}

/* ── Afbeelding ── */
.cb-lb__img-wrap {
    position:         relative;
    z-index:          1;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    animation:        cb-lb-fadein 0.18s ease;
}

@keyframes cb-lb-fadein {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1);    }
}

.cb-lb__img {
    display:        block;
    max-width:      min(88vw, 1100px);
    max-height:     88vh;
    object-fit:     contain;
    border-radius:  6px;
    box-shadow:     0 20px 60px rgba(0, 0, 0, 0.55);
    user-select:    none;
    pointer-events: none;
}

/* ── Sluit-knop ── */
.cb-lb__close {
    position:        fixed;
    top:             16px;
    right:           20px;
    z-index:         2;
    width:           44px;
    height:          44px;
    border-radius:   50%;
    border:          none;
    background:      rgba(255, 255, 255, 0.13);
    color:           #fff;
    display:         flex;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    transition:      background 0.18s;
    padding:         0;
}

.cb-lb__close:hover { background: rgba(255, 255, 255, 0.26); }

/* ── Navigatiepijlen ── */
.cb-lb__prev,
.cb-lb__next {
    position:        fixed;
    top:             50%;
    transform:       translateY(-50%);
    z-index:         2;
    width:           52px;
    height:          52px;
    border-radius:   50%;
    border:          none;
    background:      rgba(255, 255, 255, 0.13);
    color:           #fff;
    display:         flex;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    transition:      background 0.18s;
    padding:         0;
}

.cb-lb__prev { left:  16px; }
.cb-lb__next { right: 16px; }

.cb-lb__prev:hover,
.cb-lb__next:hover { background: rgba(255, 255, 255, 0.26); }

/* ── Teller (bijv. "2 / 4") ── */
.cb-lb__counter {
    position:    fixed;
    bottom:      20px;
    left:        50%;
    transform:   translateX(-50%);
    z-index:     2;
    color:       rgba(255, 255, 255, 0.65);
    font-size:   13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    pointer-events: none;
}

/* ── Mobiel ── */
@media (max-width: 600px) {
    .cb-lb__prev { left:  6px; width: 42px; height: 42px; }
    .cb-lb__next { right: 6px; width: 42px; height: 42px; }
    .cb-lb__img  { max-width: 96vw; max-height: 82vh; }
}

/* ==========================================================================
   Staffelprijs tabel — [staffelprijs] shortcode
   ========================================================================== */
.staffelprijs-wrap {
    margin: 20px 0;
}

.staffelprijs-tabel {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.5;
}

.staffelprijs-tabel thead th {
    background: #0f3c69;
    color: #fff;
    font-weight: 600;
    padding: 9px 14px;
    text-align: left;
    white-space: nowrap;
}

.staffelprijs-tabel tbody tr {
    border-bottom: 1px solid #e8e8e8;
    transition: background 0.15s;
}

.staffelprijs-tabel tbody tr:hover {
    background: #f4f8fc;
}

.staffelprijs-tabel tbody td {
    padding: 8px 14px;
    vertical-align: middle;
}

.staffelprijs-row--base td {
    color: #666;
    font-style: italic;
}

.staffelprijs-korting {
    font-weight: 600;
    color: #2e7d32;
}

@media (max-width: 480px) {
    .staffelprijs-tabel thead th,
    .staffelprijs-tabel tbody td {
        padding: 7px 9px;
        font-size: 13px;
    }
}

/* ── [product_bijlagen] shortcode ─────────────────────────────────────── */
.product-bijlagen-wrap {
    margin: 24px 0;
}

.bijlagen-titel {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #0f3c69;
}

.bijlagen-lijst {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bijlage-item {
    margin: 0;
    padding: 0;
}

.bijlage-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    background: #f5f7fa;
    border: 1px solid #dde3ea;
    border-radius: 6px;
    text-decoration: none;
    color: #1a1a1a;
    transition: background 0.15s, border-color 0.15s;
}

.bijlage-link:hover {
    background: #e8edf4;
    border-color: #0f3c69;
    color: #0f3c69;
}

.bijlage-icon {
    font-size: 18px;
    flex-shrink: 0;
    line-height: 1;
}

.bijlage-naam {
    flex: 1 1 auto;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bijlage-desc {
    font-size: 12px;
    font-weight: 400;
    color: #666;
}

.bijlage-size {
    font-size: 12px;
    color: #888;
    flex-shrink: 0;
}

.bijlage-ext {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: #0f3c69;
    border-radius: 4px;
    padding: 2px 6px;
    flex-shrink: 0;
    letter-spacing: 0.04em;
}

@media (prefers-color-scheme: dark) {
    .bijlage-link {
        background: #1e2530;
        border-color: #374151;
        color: #e5e7eb;
    }
    .bijlage-link:hover {
        background: #263045;
        border-color: #6b9fd4;
        color: #93c5fd;
    }
    .bijlage-desc,
    .bijlage-size {
        color: #9ca3af;
    }
    .bijlagen-titel {
        color: #93c5fd;
    }
}