/*
 * 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;
}

/**
 * Uitverkocht-blok + "mail mij bij voorraad"-formulier (8 sep 2026, verzoek Jesse/Rick).
 *
 * Op een product zonder voorraad toont WooCommerce geen prijs en geen koopknop
 * (`.outofstock .summary .price{display:none}` staat in dist/styles/main.css) en zet het
 * thema er een blok neer via `wcs_custom_get_availability()` in lib/product-page.php.
 * Daar staat nu het aanmeldformulier van `back-in-stock-notifier-for-woocommerce` bij.
 *
 * De volgorde in de HTML is kop -> tekst -> "Naar shop" -> formulier. Gewenst is
 * kop -> tekst -> formulier -> "Naar shop", want het formulier is de hoofdactie.
 * Dat kan zonder PHP-wijziging: `.outofstock-message` krijgt `display:contents`,
 * waardoor zijn kinderen losse flex-items van `.styling-product_page` worden en
 * met `order` te herschikken zijn.
 *
 * Alles is gescoped op `.outofstock`, want `.styling-product_page` omhult op een
 * leverbaar product de prijs en de koopknop (prioriteit 29-31 op
 * `woocommerce_single_product_summary`) — die mag hier niets van merken.
 *
 * De plugin zet `width:100%` en `text-align:center` als INLINE style op de velden en
 * op de kop; die drie overrides hebben daarom !important nodig.
 */
.single-product .outofstock .styling-product_page {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 30px;
	padding: 22px 24px;
	border: 1px solid #e6ded2;
	border-radius: 6px;
	background: #faf7f3;

	/* WooCommerce' eigen "Niet op voorraad"-regel is dubbelop naast de kop hierboven. */
	> p.stock.out-of-stock {
		display: none;
	}
}

.single-product .outofstock .outofstock-message {
	display: contents;

	> h3 {
		order: 1;
		margin: 0;
		font-size: 20px;
		line-height: 1.3;
	}

	> p {
		order: 2;
		margin: 0;
	}

	/* Secundair, MAAR alleen als het aanmeldformulier er ook staat: dan is dát de
	 * hoofdactie. Staat het formulier er niet (de plugin is nog niet uitgerold, of
	 * iemand zet hem uit), dan blijft "Naar shop" de volle knop — anders houdt de
	 * pagina helemaal geen duidelijke actie meer over. */
	> a.global-button.red,
	> a .global-button.red {
		order: 4;
	}
}

.single-product .outofstock .styling-product_page:has(.cwginstock-subscribe-form) {
	.outofstock-message > a.global-button.red,
	.outofstock-message > a .global-button.red {
		background: transparent;
		color: #aa1b1c;
		border: 1px solid #aa1b1c;
	}

	.outofstock-message > a:hover .global-button.red,
	.outofstock-message > a.global-button.red:hover {
		background: #aa1b1c;
		color: #fff;
	}
}

.single-product .outofstock .cwginstock-subscribe-form {
	order: 3;
	width: 100%;
	margin: 0;
	padding-top: 16px;
	border-top: 1px solid #e6ded2;

	/* De plugin levert een Bootstrap-achtig panel mee; dat kader is hier niet gewenst.
	 *
	 * LET OP `max-height` en `overflow`: het thema heeft in dist/styles/main.css een
	 * generieke `.panel{max-height:0;overflow:hidden}` voor het uitklap-accordeon
	 * (o.a. "Specificaties"). De plugin gebruikt diezelfde klassenaam `panel`, dus
	 * zonder deze twee regels wordt het hele formulier tot 0 px dichtgeknepen en is
	 * het onzichtbaar terwijl het wel in de HTML staat. */
	.cwginstock-panel-primary,
	.cwginstock-panel-heading,
	.cwginstock-panel-body,
	.row,
	.col-md-12 {
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
		box-shadow: none;
		width: auto;
		float: none;
		max-height: none;
		overflow: visible;
	}

	/* Het thema geeft élke h4 op de productpagina de decoratieve variant: display:flex,
	 * witte tekst, capitalize en een lijntje links en rechts via ::before/::after
	 * (zie "Specificaties"). Voor een formulierlabel is dat onleesbaar op deze
	 * achtergrond, dus die opmaak wordt hier volledig teruggezet. */
	h4 {
		display: block;
		margin: 0 0 12px;
		font-family: Merriweather, serif;
		font-size: 14px;
		font-weight: 400;
		color: #333;
		text-align: left !important;
		text-transform: none;
	}

	h4::before,
	h4::after {
		content: none;
	}

	.cwginstock-subscribe-form__form {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		align-items: center;
	}

	.form-group {
		margin: 0;
		flex: 1 1 240px;

		&:has(> .cwgstock_button) {
			flex: 0 0 auto;
		}
	}

	input.cwgstock_email,
	input.cwgstock_name {
		width: 100% !important;
		height: 44px;
		padding: 0 14px;
		border: 1px solid #d8cfc2;
		border-radius: 4px;
		background: #fff;
		font-family: Merriweather, serif;
		font-size: 14px;
		text-align: left !important;
	}

	input.cwgstock_email:focus,
	input.cwgstock_name:focus {
		border-color: #aa1b1c;
		outline: 2px solid rgba(170, 27, 28, .25);
		outline-offset: 1px;
	}

	button.cwgstock_button {
		height: 44px;
		padding: 0 22px;
		border: 0;
		border-radius: 4px;
		background: #aa1b1c;
		color: #fff;
		font-family: Cantarell, sans-serif;
		font-size: 12px;
		font-weight: 300;
		text-transform: uppercase;
		cursor: pointer;
	}

	button.cwgstock_button:hover {
		background: #8c1517;
	}

	/* Meldingen ("gelukt", "vul uw e-mailadres in") staan onder het formulier. */
	.cwgstock_output {
		flex-basis: 100%;
		margin-top: 4px;
		font-family: Merriweather, serif;
		font-size: 13px;
	}
}

@media (max-width: 480px) {
	.single-product .outofstock .cwginstock-subscribe-form {
		.form-group,
		.form-group:has(> .cwgstock_button),
		button.cwgstock_button {
			flex: 1 1 100%;
			width: 100%;
		}
	}
}