/* ==========================================================================
   Shop - algemeen + productoverzicht (PLP)
   ========================================================================== */

/* woocommerce */

.woocommerce-message{border:0 !important;outline:0 !important}


/* plp */

.products .wc-has-gallery .secondary-image{transition:opacity .5s ease-in-out !important}

.products li.product a .woocommerce-loop-product__title{color:var(--contrast);font-weight:bold}
.products li.product a:hover .woocommerce-loop-product__title{color:var(--accent-2)}




.products .cart {
    display: flex;
    flex-direction:column;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
}

.products .cart .quantity {
    display: inline-flex;
    align-items: center;
}

.products .cart .button.add_to_cart_button {
    margin-left: 10px;
}


.woocommerce ul.products li.product .button{margin-top:0 !important}
.woocommerce div.product form.cart > :not(.quantity):not(.single_add_to_cart_button){width:auto !important}

.products .buttons{display:flex;gap:5px;padding:1em 0 0 0}
.products .tinv-wraper{width:50px !important}
.products .tinvwl_add_to_wishlist_button{background:var(--contrast);color:var(--base-3);display:flex;height:50px !important;margin:0 !important;width:50px !important}
.products .tinvwl_add_to_wishlist_button:hover{background:var(--accent-2)}

.products .quantity .minus, .products .quantity .plus, .products .quantity input{background:var(--base-3) !important}

/* Aantal vast (bijv. nog 1 op voorraad): WooCommerce maakt het veld type="hidden", maar zet
   niet meer de class .hidden op .quantity. GeneratePress tekent zijn +/- dan toch (::before/::after).
   Hele aantalblok verbergen; het verborgen veld stuurt het aantal gewoon mee. */
.quantity:has(input.qty[type="hidden"]){display:none !important}

/* B2B: voorraad lager dan minimale afname (inc/woocommerce/minimums.php) */
.heyday-stock-notice{border-left:3px solid var(--accent-4);color:var(--contrast);font-size:.9em;font-weight:bold;margin:1em 0 0;padding:.25em 0 .25em .75em}

.products .add_to_cart_button{background:var(--accent-2) !important;color:var(--base-3) !important}
.products .add_to_cart_button:hover{background:var(--contrast) !important}





.woocommerce-bottom-description{color:var(--base-2) !important;margin:60px 0 0 0;padding:60px 0;position:relative;z-index:1}
.woocommerce-bottom-description a{color:var(--base-3);font-weight:bold;text-decoration:underline}
.woocommerce-bottom-description::before {
    content: ''; /* Creates the pseudo-element */
    position: absolute;
    top: 0;
    left: 0;
    width: 200vw; /* Full viewport width */
    height: 100%; /* Matches the height of the related products */
    background: var(--accent-2 ); /* Set your desired background color or gradient */
    z-index: -1; /* Place it behind the related products */
    transform: translateX(-50%)
}




.nav-categories-footer{color:var(--base-2) !important;margin:-1px 0 0 0;padding:60px 0;position:relative;z-index:1}
.nav-categories-footer a{color:var(--base-3);font-weight:bold;text-decoration:underline}
.nav-categories-footer a:hover{color:#f55e19}
.nav-categories-footer::before {
    content: ''; /* Creates the pseudo-element */
    position: absolute;
    top: 0;
    left: 0;
    width: 200vw; /* Full viewport width */
    height: 100%; /* Matches the height of the related products */
    background: var(--contrast); /* Set your desired background color or gradient */
    z-index: -1; /* Place it behind the related products */
    transform: translateX(-50%)
}


/* shoppagina: subcategorie-grids (shortcode [subcategory_grids]) */

.subcat-grids{margin:80px 0 0}
.subcat-grid + .subcat-grid{margin-top:72px}

/* kop + "Alle ..."-link */
.subcat-grid__header{align-items:baseline;border-bottom:1px solid var(--contrast);display:flex;flex-wrap:wrap;gap:10px 20px;margin:0 0 28px;padding:0 0 14px}
.subcat-grid__title{margin:0}
.subcat-grid__all{color:var(--accent);font-weight:bold;margin-left:auto;text-decoration:none;transition:color .25s}
.subcat-grid__all:hover{color:var(--contrast)}

/* grid: vaste kolommen, zodat tegels in elk blok even groot zijn.
   De tegels zelf zijn standaard Woo-tegels (zie "categorie-tegels" hieronder);
   hier alleen Woo's float-layout (breedtes, marges, clearfix) uitschakelen. */
.subcat-grid ul.products{display:grid !important;gap:28px 16px;grid-template-columns:repeat(2, minmax(0, 1fr)) !important;margin:0 !important;padding:0}
.subcat-grid ul.products::before,
.subcat-grid ul.products::after{display:none !important}
.subcat-grid ul.products li.product{clear:none !important;float:none !important;margin:0 !important;width:auto !important}
@media (min-width:600px)  { .subcat-grid ul.products{grid-template-columns:repeat(3, minmax(0, 1fr)) !important} }
@media (min-width:768px)  { .subcat-grid ul.products{grid-template-columns:repeat(4, minmax(0, 1fr)) !important} }
@media (min-width:1024px) { .subcat-grid ul.products{grid-template-columns:repeat(7, minmax(0, 1fr)) !important} }


/* categorie-tegels: algemene hover voor alle categorie-overzichten
   (shoppagina, subcategorie-grids, [scrollable_categories], categoriearchieven).
   Markup komt uit inc/woocommerce/archive.php. De kleurwissel van de naam komt uit
   GeneratePress; de lijn neemt die kleur over (currentColor). */

/* GeneratePress-wrappers om de foto altijd volle breedte: anders krimpen ze mee met
   de geladen afbeelding (lazy + sizes="auto" kan per tegel een kleinere versie kiezen) */
.product-category .wc-product-image,
.product-category .inside-wc-product-image{display:block !important;width:100% !important}

/* foto: vaste verhouding (300:372, die van de standaard uploads), afwijkende afbeeldingen
   worden vanuit het midden passend gemaakt; zoomt licht in binnen het kader */
.product-category .product-category__image{aspect-ratio:300 / 372;display:block;margin:0 0 1em;overflow:hidden}
.product-category .product-category__image img{display:block;height:100% !important;margin:0 !important;object-fit:cover;object-position:center;transition:transform .4s ease;width:100%}
.product-category a:hover .product-category__image img,
.product-category a:focus-visible .product-category__image img{transform:scale(1.05)}

/* naam: was een h2 (kopopmaak uit GeneratePress), nu een div, dus de kopopmaak hier.
   Geen kleur: die erft van de link, inclusief de hoverkleur. */
.product-category .woocommerce-loop-category__title{font-family:var(--gp-font--gatore);font-size:1em;line-height:1.2;margin:0;padding:.5em 0}

/* naam: lijn groeit van links naar rechts, zoals in het hoofdmenu */
.product-category .woocommerce-loop-category__title{display:inline-block;position:relative}
.product-category .woocommerce-loop-category__title::after{background-color:currentColor;bottom:0;content:'';height:3px;left:0;position:absolute;transition:width .3s ease;width:0}
.product-category a:hover .woocommerce-loop-category__title::after,
.product-category a:focus-visible .woocommerce-loop-category__title::after{width:100%}

/* systeeminstelling "beperkte beweging": geen zoom, lijn zonder animatie */
@media (prefers-reduced-motion: reduce) {
    .product-category .product-category__image img{transition:none}
    .product-category a:hover .product-category__image img,
    .product-category a:focus-visible .product-category__image img{transform:none}
    .product-category .woocommerce-loop-category__title::after{transition:none}
}


/* PLP-werkbalk: Filter + soort (chips of uitklappaneel).
   Markup: inc/woocommerce/archive.php, script: assets/js/plp-toolbar.js */

.plp-toolbar-wrap{margin:0 0 30px}
.plp-toolbar{align-items:stretch;display:flex;flex-wrap:wrap;gap:8px}
.plp-chips{display:flex;flex-wrap:wrap;gap:8px}

.plp-toolbar .ocs-toggle-filters,
.plp-chip,
.plp-soort__toggle{align-items:center;box-sizing:border-box;display:inline-flex;margin:0;min-height:48px}

/* filterknop: gevuld, zodat hij zich onderscheidt van de chips (icoon wit, uit filters.css) */
.plp-toolbar .ocs-toggle-filters{background:var(--contrast) url("data:image/svg+xml,%3Csvg width='15' height='17' fill='none' version='1.1' viewBox='0 0 .45 .51' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0.0193 0.075h0.154m0 0c0 0.0284 0.023 0.0514 0.0514 0.0514 0.0284 0 0.0514-0.023 0.0514-0.0514m-0.103 0c0-0.0284 0.023-0.0514 0.0514-0.0514 0.0284 0 0.0514 0.023 0.0514 0.0514m0 0h0.154m-0.411 0.18h0.309m0 0c0 0.0284 0.023 0.0514 0.0514 0.0514s0.0514-0.023 0.0514-0.0514-0.023-0.0514-0.0514-0.0514c-0.0284 0-0.0514 0.023-0.0514 0.0514zm-0.206 0.18h0.309m-0.309 0c0-0.0284-0.023-0.0514-0.0514-0.0514-0.0284 0-0.0514 0.023-0.0514 0.0514 0 0.0284 0.023 0.0514 0.0514 0.0514 0.0284 0 0.0514-0.023 0.0514-0.0514z' stroke='%23fff' stroke-linecap='round' stroke-width='.0386'/%3E%3C/svg%3E%0A") 20px center no-repeat;color:var(--base-3)}
.plp-toolbar .ocs-toggle-filters:hover{background-color:var(--accent);color:var(--base-3)}

/* chips (1 t/m 4 subcategorieën, desktop) */
.plp-chip{border:1px solid var(--contrast);color:var(--contrast);padding:0 18px;text-decoration:none;transition:background-color .25s,color .25s;white-space:nowrap}
.plp-chip:hover,
.plp-chip[aria-current="page"]{background:var(--contrast);color:var(--base-3)}
.plp-chips .plp-chip:hover,
.plp-chips .plp-chip:focus{text-decoration:none}

/* Soort-knop */
.plp-soort__toggle{background:transparent;border:1px solid var(--contrast);color:var(--contrast);cursor:pointer;font:inherit;gap:10px;padding:0 18px}
.plp-soort__toggle:hover,
.plp-soort__toggle:focus{background:transparent;color:var(--accent)}
.plp-soort__text{display:flex;gap:5px}
.plp-soort__label::after{content:':'}
.plp-soort__current{font-weight:bold}
.plp-soort__toggle .plp-soort__chevron{display:block;flex:none;height:14px;transition:transform .2s;width:14px}
.plp-soort__toggle[aria-expanded="true"] .plp-soort__chevron{transform:rotate(180deg)}

/* uitklappaneel: duwt de producten omlaag, schuift open/dicht via grid-rijen 0fr -> 1fr.
   Dicht = visibility hidden (pas na de animatie), zodat links dan niet focusbaar zijn. */
.plp-soort__panel{display:grid;grid-template-rows:0fr;margin:0;opacity:0;transition:grid-template-rows .35s ease,margin-top .35s ease,opacity .25s ease,visibility 0s linear .35s;visibility:hidden}
.plp-soort__panel.is-open{grid-template-rows:1fr;margin-top:8px;opacity:1;transition:grid-template-rows .35s ease,margin-top .35s ease,opacity .25s ease .05s,visibility 0s;visibility:visible}
.plp-soort__inner{min-height:0;overflow:hidden}
.plp-soort__panel ul{border:1px solid var(--contrast);column-gap:24px;columns:4;list-style:none;margin:0;padding:16px 24px}
.plp-soort__panel li{break-inside:avoid;margin:0}
.plp-soort__panel a{color:var(--contrast);display:block;padding:7px 0;text-decoration:none}
.plp-soort__panel a:hover{color:var(--accent)}
.plp-soort__panel a[aria-current="page"]{color:var(--accent);font-weight:bold}

@media (min-width:768px) and (max-width:1023px) {
    .plp-soort__panel ul{columns:3}
}

/* desktop: bij weinig subcategorieën alleen de chips */
@media (min-width:768px) {
    .plp-toolbar-wrap--chips .plp-soort__toggle,
    .plp-toolbar-wrap--chips .plp-soort__panel{display:none !important}
}

/* mobiel: altijd Filter + Soort naast elkaar, paneel als lijst */
@media (max-width:767px) {
    .plp-toolbar-wrap--chips .plp-toolbar,
    .plp-toolbar-wrap--dropdown .plp-toolbar{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr))}
    .plp-chips{display:none}
    .plp-soort__toggle{justify-content:space-between;min-height:52px;min-width:0;padding:6px 12px;text-align:left}
    .plp-soort__text{flex-direction:column;gap:0;min-width:0}
    .plp-soort__label{font-size:11px;letter-spacing:.06em;text-transform:uppercase}
    .plp-soort__label::after{content:none}
    .plp-soort__current{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .plp-soort__panel ul{columns:1;padding:4px 16px}
    .plp-soort__panel li + li{border-top:1px solid var(--contrast-3)}
    .plp-soort__panel a{padding:11px 0}
}

/* systeeminstelling "beperkte beweging": paneel zonder animatie */
@media (prefers-reduced-motion: reduce) {
    .plp-soort__panel,
    .plp-soort__panel.is-open,
    .plp-soort__toggle .plp-soort__chevron{transition:none}
}