/*
 * Gebruik zoveel mogelijk nested CSS
 * Meer informatie: https://www.w3schools.com/cssref/sel_nesting.php
 */

@media (max-width: 768px) {
	.archive .site-content .custom-shop{
		padding-left: 0px !important;
		padding-right: 0px !important;
		flex-flow: column;
		padding-top: 20px;
	}
	.archive .site-content{
		padding: 0 15px !important
	}
	.featured-products .elementor-shortcode .cart, .product .elementor-shortcode .cart {
		display: flex;
		justify-content: center;
		margin-top: 15px;
		
		.quantity input{
			margin-right: 10px;
		}
	}
}

/*
 * Lege FacetWP-facetten verbergen, inclusief hun kop.
 *
 * Een facet zonder keuzes rendert als een lege <div class="facetwp-facet ..."></div>.
 * De bijbehorende Elementor-kop ("Sub-regio") bleef dan alsnog staan, met een losse
 * titel zonder inhoud als resultaat.
 *
 * Bewust CSS en geen JS: FacetWP herlaadt facetten via AJAX, en `:has()` wordt door de
 * browser opnieuw geëvalueerd zodra de DOM verandert. Een JS-oplossing zou bij elke
 * `facetwp-loaded` opnieuw moeten draaien.
 *
 * Sliders en fselect-dropdowns renderen altijd inhoud en zijn dus nooit `:empty` —
 * die blijven staan, ook als er maar één waarde in zit.
 */
.elementor-widget-shortcode:has(.facetwp-facet:empty) {
	display: none;
}

/* De kop die er direct boven staat: `:has(+ ...)` kijkt naar het volgende broertje. */
.elementor-widget-heading:has(+ .elementor-widget-shortcode .facetwp-facet:empty) {
	display: none;
}
/* Nieuwe archive styling */
body .elementor-element .facetwp-checkbox{
	font-size: 14px;
}
/* Nieuwe archive styling */
.archive .elementor-pagination{
	display: flex;
    justify-content: center;
}
.facetwp-type-checkboxes .facetwp-toggle{
	font-size: 14px;
}
.facetwp-type-checkboxes .facetwp-hidden{
	display: none !important;
}
.elementor.elementor-location-archive{
	width: 100%;
}
.facetwp-reset{
	background-color: #504d53;
    border-radius: 4px;
    color: #fff;
    padding: 12px 20px;
    font-family: Cantarell;
    font-weight: 100;
    text-transform: uppercase;
    font-size: 12px;
    box-shadow: none;
}
/*
 * Elementor loop items niet afknippen.
 *
 * Het thema heeft `.featured-products, .product { overflow: hidden }` in
 * dist/styles/main.css staan. Dat was bedoeld voor de oude `li.product`-kaartjes,
 * maar WooCommerce hangt de class `product` óók aan een Elementor loop item.
 * Daardoor werd de onderrand van de bestelknop op de merkarchieven afgeknipt.
 *
 * Stond eerst in de module awcf_product_info; hoort hier omdat het niets met dat
 * blokje te maken heeft. main.css zelf aanpassen heeft geen zin: dat is
 * gecompileerd en de buildbron staat niet op de server.
 */
.e-loop-item.product {
	overflow: visible;
}

/**
 * Op de archieven geen opgeblazen h2.
 *
 * main.css zet `h2 { font-size: 25px }` en verhoogt dat vanaf 992px naar 36px. Op de
 * nieuwe archieven staan meerdere h2's onder elkaar (de blokken van het merkverhaal en
 * de kop naast de gegevenstabel) en daar is 36px te fors. Hier zetten we de basiswaarde
 * terug; buiten de archieven verandert er niets.
 *
 * main.css zelf aanpassen kan niet: die is gecompileerd en de buildbron staat niet op
 * de server.
 */
@media (min-width: 992px) {
	body.archive h2 {
		font-size: 25px;
	}
}

/**
 * Cinzel doortrekken naar alle koppen — klantwens Erik, 13 aug 2026.
 *
 * h1, h2, h5 en h6 stonden al op Cinzel; alleen h3, h4 en een handvol losse
 * overschrijvingen in main.css stonden nog op Merriweather. Hier zetten we die om.
 *
 * BROODTEKST BLIJFT MERRIWEATHER. Cinzel heeft geen echte onderkast (het is een
 * kapitalenletter naar Romeins voorbeeld) en is als leesletter onbruikbaar; p, ul
 * en ol laten we dus met rust.
 *
 * Cinzel is een VARIABEL font: 400 t/m 900 komen uit hetzelfde woff2 dat Elementor
 * al lokaal serveert (uploads/elementor/google-fonts). Een zwaarder gewicht kost dus
 * geen extra laadtijd en is geen nep-vet van de browser.
 *
 * main.css zelf aanpassen kan niet: die is gecompileerd en de buildbron staat niet
 * op de server. Deze module laadt ná main.css, dus gelijke specificiteit wint.
 */
h3,
h3.home-h3 {
	font-family: Cinzel, serif;
}

.single-product h1.product_title,
.woocommerce-cart .entry-title {
	font-family: Cinzel, serif;
}

.single-product h4 {
	font-family: Cinzel, serif;
}

.woocommerce-checkout h3 span {
	font-family: Cinzel, serif;
}

#customer_login h2 {
	font-family: Cinzel, serif;
}

/**
 * BEWUST NIET OMGEZET, twee keer:
 *
 * 1. De producttitels in de webshop-grid (`li.product h2.woocommerce-loop-product__title`).
 *    Dat is technisch een h2, maar functioneel een productnaam in een lijst. Het vakje
 *    is 7ex hoog met `overflow: hidden`; Cinzel loopt breder dan Merriweather, dus
 *    lange namen ("Chateau Mouton Rothschild 1982 in Giftbox") worden eerder afgekapt.
 *    Wil Erik het toch, dan is het onderstaande blok genoeg.
 *
 * 2. De UI-labels die op Cantarell staan (globale h4, `.facetwp-flyout h3`). Dat zijn
 *    filterkoppen in kleinkapitaal, geen koppen in de tekst — die horen bij de UI-letter.
 */
/*
li.product h2.woocommerce-loop-product__title {
	font-family: Cinzel, serif;
}
*/

/**
 * Kopgewicht 600 (13 aug 2026, op verzoek van Rick).
 *
 * De H1 van de archieven stond al op 600 terwijl de koppen eronder op 300 tot 400
 * stonden; daardoor oogde alles onder de titel dun. Nu staat de hele kophiërarchie
 * op hetzelfde gewicht.
 *
 * Cinzel is een variabel font (400-900 uit hetzelfde woff2 dat Elementor al lokaal
 * serveert), dus dit is écht vet en geen nep-vet van de browser, en het kost geen
 * extra laadtijd.
 *
 * LET OP: dit blok is niet de hele wijziging. Koppen die hun gewicht zelf zetten,
 * winnen hiervan op specificiteit en zijn bij de bron aangepast:
 *   - `.awcf-merkverhaal__kop`      -> awcf_merkverhaal.css
 *   - `.awcf-chateau-meta__titel`   -> awcf_chateau_meta.css
 *   - 6 heading-widgets in Elementor-sjabloon 34818 -> _elementor_data
 * Zoek je later een kop die niet meedoet, kijk dan eerst daar en niet hier.
 */
h1, h2, h3, h5, h6,
.single-product h1.product_title,
.single-product h4 {
	font-weight: 600;
}