/*
Theme Name: CrystalKoorn
Theme URI: https://crystal-koorn.nl
Description: Child-thema van Extendable voor CrystalKoorn — edelstenen en kristallen. Editorial, kalm en ruim: warme steen/greige basis, diep aubergine als accent, brons als detail. Alle designtokens staan in theme.json; dit bestand bevat uitsluitend wat theme.json niet kan (WooCommerce-opmaak, states, responsive gedrag).
Author: Jan Herbert
Author URI: https://crystal-koorn.nl
Template: extendable
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: crystalkoorn
Tags: e-commerce, block-styles, full-site-editing, editor-style
*/

/* ==========================================================================
   INHOUD
   1.  Designtokens (--ck-*)
   2.  Basis en leesbaarheid
   3.  Focus-states
   4.  Typografische helpers
   5.  Productgrid (block + classic)
   6.  Productkaart
   7.  Badges: unieke steen / laatste exemplaar / uitverkocht
   8.  Productdetail
   9.  Breadcrumbs
   10. Knoppen en in-mandje
   11. Meldingen (notices)
   12. Mandje en afrekenen — opschoning
   13. Formulieren
   14. Header, navigatie, footer
   15. Responsive
   16. Reduced motion, forced colors, print
   ========================================================================== */


/* ==========================================================================
   1. DESIGNTOKENS
   Enige bron van waarheid voor wat theme.json niet als preset kan uitdrukken.
   De kleuren zelf komen uit theme.json — hier alleen verwijzingen, met een
   hardcoded fallback zodat een mislukte global-styles-load niets breekt.
   ========================================================================== */

:root {
	/* Kleuren — aliassen op de theme.json-presets */
	--ck-paper:          var(--wp--preset--color--paper, #FAF8F5);
	--ck-linen:          var(--wp--preset--color--linen, #F2EDE6);
	--ck-stone:          var(--wp--preset--color--stone, #E6DED4);
	--ck-rule:           var(--wp--preset--color--rule, #DED5C9);
	--ck-ink:            var(--wp--preset--color--ink, #241F1B);
	--ck-graphite:       var(--wp--preset--color--graphite, #3A332C);
	--ck-muted:          var(--wp--preset--color--muted, #5F574E);
	--ck-plum:           var(--wp--preset--color--plum, #3D2440);
	--ck-plum-deep:      var(--wp--preset--color--plum-deep, #2B1A2E);
	--ck-plum-soft:      var(--wp--preset--color--plum-soft, #6B4A70);
	--ck-amethyst-light: var(--wp--preset--color--amethyst-light, #C9A9D0);
	--ck-bronze:         var(--wp--preset--color--bronze, #9A7442);
	--ck-bronze-ink:     var(--wp--preset--color--bronze-ink, #7D5A2E);
	--ck-bronze-light:   var(--wp--preset--color--bronze-light, #B9945F);
	--ck-alert:          var(--wp--preset--color--alert, #7E3423);
	--ck-confirm:        var(--wp--preset--color--confirm, #3E5744);
	--ck-plum-active:    #1F1222;

	/* Radii — nergens groter dan 3px */
	--ck-radius-none: 0;
	--ck-radius-xs:   2px;
	--ck-radius-sm:   3px;

	/* Randen */
	--ck-hairline: 1px solid var(--ck-rule);

	/* Schaduwen — alleen voor wat écht boven de pagina zweeft */
	--ck-shadow-none: none;
	--ck-shadow-sm:   0 1px 2px rgba(36, 31, 27, 0.05);
	--ck-shadow-md:   0 16px 48px -24px rgba(36, 31, 27, 0.22);

	/* Focus */
	--ck-focus:         var(--ck-bronze);
	--ck-focus-on-dark: var(--ck-bronze-light);

	/* Beweging */
	--ck-t-fast:  160ms ease-out;
	--ck-t-image: 240ms cubic-bezier(0.22, 0.61, 0.36, 1);

	/* Maten */
	--ck-measure:        34em;  /* ~66 tekens leesregel */
	--ck-ratio-product:  4 / 5;
	--ck-header-h:       84px;
	--ck-header-h-mob:   64px;
}

/* Secties op pruim achtergrond draaien de focus-ring mee. Zet deze klasse op
   het Group-blok (Geavanceerd > extra CSS-klasse: ck-on-dark). */
.ck-on-dark {
	--ck-focus: var(--ck-focus-on-dark);
}

.ck-on-dark a:not(.wp-element-button),
.ck-on-dark .wp-block-navigation a {
	color: var(--ck-amethyst-light);
}


/* ==========================================================================
   2. BASIS EN LEESBAARHEID
   ========================================================================== */

body {
	background-color: var(--ck-paper);
	color: var(--ck-ink);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Leesregel begrenzen op ~66 tekens. Geldt alleen voor losse alinea's in een
   contentkolom — niet voor alinea's die bewust breed gezet zijn, niet in de
   header/footer en niet in WooCommerce-UI. */
.entry-content > p:not(.has-text-align-center):not([class*="is-style"]),
.wp-block-post-content > p:not(.has-text-align-center),
.woocommerce-product-details__short-description p,
.woocommerce-Tabs-panel--description p {
	max-width: var(--ck-measure);
}

.has-text-align-center > p,
p.has-text-align-center {
	margin-inline: auto;
}

/* Prijzen en aantallen uitlijnen in het grid */
.price,
.wc-block-components-product-price,
.woocommerce-Price-amount,
.wc-block-components-totals-item__value,
.wc-block-components-order-summary-item__total-price,
.woocommerce-cart-form .product-price,
.woocommerce-cart-form .product-subtotal,
.cart_totals td {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* Links in leestekst blijven ALTIJD onderstreept — kleur alleen is te weinig
   onderscheid t.o.v. de omringende tekst (1,18:1). Zie designsysteem §8.2. */
.entry-content a:not(.wp-element-button):not(.wp-block-button__link),
.wp-block-post-content a:not(.wp-element-button):not(.wp-block-button__link) {
	text-decoration: underline;
	text-underline-offset: 0.16em;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--ck-bronze);
}

.entry-content a:not(.wp-element-button):hover,
.wp-block-post-content a:not(.wp-element-button):hover {
	text-decoration-color: currentColor;
}

/* Afbeeldingen nooit rond, nooit met kader */
img,
.wp-block-image img,
.wp-block-post-featured-image img {
	border-radius: var(--ck-radius-none);
}

/* Scheidingslijn = hairline, geen dikke streep */
.wp-block-separator {
	border: 0;
	border-top: var(--ck-hairline);
	opacity: 1;
	height: 0;
}


/* ==========================================================================
   3. FOCUS-STATES
   Zichtbaar, consistent, en nooit weggehaald. Blijft een echte `outline`
   zodat hij ook in forced-colors-modus overleeft.
   ========================================================================== */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible,
.wc-block-components-product-button__button:focus-visible,
.add_to_cart_button:focus-visible {
	outline: 2px solid var(--ck-focus);
	outline-offset: 3px;
	border-radius: var(--ck-radius-xs);
}

/* Muisklik op een knop mag géén ring achterlaten, toetsenbordfocus wél.
   :focus-visible doet dat al; deze regel haalt alleen de browser-default weg
   voor de gevallen waar :focus-visible niet matcht. */
:where(a, button):focus:not(:focus-visible) {
	outline: none;
}

/* Skip-link */
.skip-link:focus {
	background-color: var(--ck-paper);
	color: var(--ck-plum);
	outline: 2px solid var(--ck-focus);
	outline-offset: 2px;
}


/* ==========================================================================
   4. TYPOGRAFISCHE HELPERS
   ========================================================================== */

/* Eyebrow boven een sectiekop. Klasse op een Paragraph-blok. */
.ck-eyebrow {
	font-family: var(--wp--preset--font-family--sans-text);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--ck-bronze-ink);
	margin-bottom: 0.5rem;
}

/* Sectiekop met bronzen streepje erboven. Klasse op een Heading-blok. */
.ck-rule-above {
	position: relative;
	padding-top: 1.25rem;
}

.ck-rule-above::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 2.5rem;
	height: 1px;
	background-color: var(--ck-bronze);
}

.has-text-align-center.ck-rule-above::before {
	left: 50%;
	transform: translateX(-50%);
}

/* Hairline-scheiding tussen twee blokken. Klasse op een Group-blok. */
.ck-hairline-top    { border-top: var(--ck-hairline); }
.ck-hairline-bottom { border-bottom: var(--ck-hairline); }


/* ==========================================================================
   5. PRODUCTGRID
   Dekt alle drie de varianten die WooCommerce 11 kan uitleveren:
   - Product Collection (block, blockified template)
   - classic loop `ul.products > li.product` (legacy-template)
   - legacy `wc-block-grid` (All Products-blok en oude blokken)
   ========================================================================== */

.wp-block-woocommerce-product-template,
.wc-block-product-template,
ul.products,
.wc-block-grid__products {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--wp--preset--spacing--30, 1.5rem);
	row-gap: var(--wp--preset--spacing--40, 2rem);
}

/* WooCommerce zet zelf `columns-N` + flexbox op de product-template.
   Die zetten we uit: het grid hierboven is leidend en responsief. */
.wp-block-woocommerce-product-template.is-flex-container,
.wc-block-product-template.is-flex-container {
	display: grid;
}

.wp-block-woocommerce-product-template > li,
.wc-block-product-template > li,
ul.products > li.product,
.wc-block-grid__products > li {
	width: auto !important; /* overschrijft de inline flex-basis van columns-N */
	margin: 0 !important;
	float: none;
	clear: none;
	list-style: none;
}

/* Kolomaantal per breakpoint — zie designsysteem §5.8 */
@media (min-width: 782px) {
	.wp-block-woocommerce-product-template,
	.wc-block-product-template,
	ul.products,
	.wc-block-grid__products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: var(--wp--preset--spacing--30, 2rem);
		row-gap: var(--wp--preset--spacing--40, 3rem);
	}
}

@media (min-width: 1100px) {
	.wp-block-woocommerce-product-template,
	.wc-block-product-template,
	ul.products,
	.wc-block-grid__products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Resultaten-aantal en sortering op één regel, tussen twee hairlines */
.woocommerce-products-header + .woocommerce-notices-wrapper + .wp-block-woocommerce-product-results-count,
.wp-block-woocommerce-product-results-count,
.woocommerce-result-count,
.wp-block-woocommerce-catalog-sorting,
.woocommerce-ordering {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--ck-muted);
	margin: 0;
}

.woocommerce-ordering select,
.wp-block-woocommerce-catalog-sorting select {
	background-color: transparent;
	border: 0;
	border-bottom: 1px solid var(--ck-rule);
	border-radius: 0;
	color: var(--ck-muted);
	font-family: inherit;
	font-size: inherit;
	padding: 0.25rem 1.5rem 0.25rem 0;
}


/* ==========================================================================
   6. PRODUCTKAART
   ========================================================================== */

li.product,
li.wc-block-product,
.wc-block-grid__product {
	position: relative;   /* anker voor de badge */
	display: flex;
	flex-direction: column;
	gap: 0;
	text-align: left;
}

/* --- Foto: vaste 4:5 ratio, achtergrond `stone` tijdens lazy-load --- */
li.product .wp-block-woocommerce-product-image,
li.product .woocommerce-LoopProduct-link,
li.product > a:first-of-type,
.wc-block-grid__product-image {
	display: block;
	overflow: hidden;          /* nodig voor de beeldschaal op hover */
	background-color: var(--ck-stone);
	aspect-ratio: var(--ck-ratio-product);
	margin-bottom: var(--wp--preset--spacing--15, 0.75rem);
	text-decoration: none;
}

li.product .wp-block-woocommerce-product-image img,
li.product .woocommerce-LoopProduct-link img,
li.product img.attachment-woocommerce_thumbnail,
.wc-block-grid__product-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: var(--ck-radius-none);
	transition: transform var(--ck-t-image);
	will-change: transform;
}

/* --- Hairline onder de foto, waar de tekst begint --- */
li.product .wp-block-woocommerce-product-image,
li.product .woocommerce-LoopProduct-link,
.wc-block-grid__product-image {
	border-bottom: var(--ck-hairline);
}

/* --- Naam --- */
li.product .wp-block-post-title,
li.product .woocommerce-loop-product__title,
li.product .wp-block-woocommerce-product-title,
.wc-block-grid__product-title {
	font-family: var(--wp--preset--font-family--serif-display);
	font-size: var(--wp--preset--font-size--h-sm);
	font-weight: 400;
	line-height: 1.3;
	color: var(--ck-ink);
	margin: 0 0 var(--wp--preset--spacing--10, 0.5rem);
	padding: 0;

	/* max 2 regels, daarna ellipsis — houdt het grid uitgelijnd */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

li.product .wp-block-post-title a,
li.product .woocommerce-loop-product__title a,
.wc-block-grid__product-title a {
	color: inherit;
	text-decoration: none;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--ck-bronze);
}

/* --- Prijs --- */
li.product .price,
li.product .wc-block-components-product-price,
.wc-block-grid__product-price {
	font-family: var(--wp--preset--font-family--sans-text);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	color: var(--ck-ink);
	margin: 0;
}

/* Doorgestreepte oude prijs gedempt, nieuwe prijs in pruim */
li.product .price del,
.wc-block-components-product-price del {
	color: var(--ck-muted);
	opacity: 1;
	text-decoration-thickness: 1px;
	margin-right: 0.4em;
}

li.product .price ins,
.wc-block-components-product-price ins {
	color: var(--ck-plum);
	text-decoration: none;
	background: none;
	font-weight: 500;
}

/* --- Geen knop in het grid: bij unieke stenen kiest de klant op de
       productpagina, niet in de lijst (designsysteem §5.1). --- */
li.product .wp-block-woocommerce-product-button,
li.product .add_to_cart_button,
li.product a.button.product_type_simple,
.wc-block-grid__product-add-to-cart {
	display: none;
}

/* --- Hover: alleen de foto schaalt, de kaart beweegt niet --- */
@media (hover: hover) and (pointer: fine) {
	li.product:hover .wp-block-woocommerce-product-image img,
	li.product:hover .woocommerce-LoopProduct-link img,
	li.product:hover img.attachment-woocommerce_thumbnail,
	.wc-block-grid__product:hover .wc-block-grid__product-image img {
		transform: scale(1.03);
	}

	li.product:hover .wp-block-post-title a,
	li.product:hover .woocommerce-loop-product__title a,
	li.product:hover .wc-block-grid__product-title a {
		text-decoration: underline;
	}
}


/* ==========================================================================
   7. BADGES
   "Nog 1 exemplaar" komt uit de Stock Indicator (block) of p.stock (classic);
   de tekst zelf wordt in functions.php gezet. De klasse `ck-uniek` op de
   <li> wordt daar ook gezet, via de core-filter `post_class`.
   ========================================================================== */

/* Basisvorm van elke badge */
li.product .wp-block-woocommerce-product-stock-indicator,
li.product .wc-block-components-product-stock-indicator,
li.product .onsale,
li.product .wc-block-components-product-sale-badge,
.wc-block-grid__product-onsale {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	right: auto;
	z-index: 2;
	margin: 0;
	padding: 4px 8px;
	min-height: 0;
	min-width: 0;
	font-family: var(--wp--preset--font-family--sans-text);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	border-radius: var(--ck-radius-sm);
	background-color: rgba(250, 248, 245, 0.92);
	color: var(--ck-bronze-ink);
	border: 1px solid rgba(154, 116, 66, 0.4);
	backdrop-filter: blur(2px);
}

/* In het grid tonen we de voorraadregel ALLEEN als er precies 1 over is.
   Anders is het ruis: 72 stenen zijn bijna allemaal uniek. */
li.product:not(.ck-uniek) .wp-block-woocommerce-product-stock-indicator,
li.product:not(.ck-uniek) .wc-block-components-product-stock-indicator {
	display: none;
}

/* Laatste exemplaar */
li.product.ck-uniek .wp-block-woocommerce-product-stock-indicator,
li.product.ck-uniek .wc-block-components-product-stock-indicator {
	color: var(--ck-alert);
	border-color: rgba(126, 52, 35, 0.3);
}

/* Uitverkocht: badge + gedempte foto */
li.product.outofstock .wp-block-woocommerce-product-stock-indicator,
li.product.outofstock .wc-block-components-product-stock-indicator {
	display: block;
	background-color: var(--ck-stone);
	color: var(--ck-muted);
	border-color: var(--ck-rule);
}

li.product.outofstock .wp-block-woocommerce-product-image img,
li.product.outofstock .woocommerce-LoopProduct-link img,
li.product.outofstock img.attachment-woocommerce_thumbnail {
	opacity: 0.55;
	filter: grayscale(15%);
}

/* Kortingsbadge: bewust géén felle bol — pruim, rustig, en alleen als
   er echt een actieprijs staat. */
li.product .onsale,
li.product .wc-block-components-product-sale-badge,
.wc-block-grid__product-onsale {
	background-color: var(--ck-plum);
	color: var(--ck-paper);
	border-color: var(--ck-plum);
}

/* Eén badge per kaart: staat er een kortingsbadge, dan wijkt de
   voorraadbadge naar de tweede positie in plaats van eronder te schuiven. */
li.product .onsale ~ .wp-block-woocommerce-product-stock-indicator,
li.product .wc-block-components-product-sale-badge ~ .wp-block-woocommerce-product-stock-indicator {
	top: 2.75rem;
}


/* ==========================================================================
   8. PRODUCTDETAIL
   ========================================================================== */

/* --- Beeld --- */
.single-product .woocommerce-product-gallery,
.wp-block-woocommerce-product-image-gallery {
	margin-bottom: var(--wp--preset--spacing--20, 1rem);
}

.single-product .woocommerce-product-gallery__image img,
.wp-block-woocommerce-product-image-gallery img {
	border-radius: var(--ck-radius-none);
	background-color: var(--ck-stone);
}

.single-product .woocommerce-product-gallery .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--10, 0.5rem);
	margin: var(--wp--preset--spacing--10, 0.5rem) 0 0;
	padding: 0;
	list-style: none;
}

.single-product .woocommerce-product-gallery .flex-control-thumbs li {
	margin: 0;
	width: auto;
	float: none;
}

.single-product .woocommerce-product-gallery .flex-control-thumbs img {
	border: 1px solid transparent;
	aspect-ratio: var(--ck-ratio-product);
	object-fit: cover;
	opacity: 1;
	cursor: pointer;
	transition: border-color var(--ck-t-fast);
}

.single-product .woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.single-product .woocommerce-product-gallery .flex-control-thumbs img:hover {
	border-color: var(--ck-plum);
}

/* De standaard-zoomlens van WooCommerce laten we staan, maar zonder het
   opgelegde witte vlak eronder. */
.woocommerce-product-gallery__trigger {
	border-radius: var(--ck-radius-xs);
	background-color: rgba(250, 248, 245, 0.92);
	border: 1px solid var(--ck-rule);
	box-shadow: none;
}

/* --- Tekstkolom --- */
.single-product .product_title,
.single-product .wp-block-post-title {
	font-family: var(--wp--preset--font-family--serif-display);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--ck-ink);
	margin: 0 0 var(--wp--preset--spacing--15, 0.75rem);
}

.single-product .summary .price,
.single-product .wp-block-woocommerce-product-price {
	font-family: var(--wp--preset--font-family--sans-text);
	font-size: var(--wp--preset--font-size--h-md);
	font-weight: 500;
	color: var(--ck-plum);
	margin: 0 0 var(--wp--preset--spacing--15, 0.75rem);
}

.single-product .summary .price del {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--ck-muted);
}

/* --- Voorraadregel --- */
p.stock,
.wp-block-woocommerce-product-stock-indicator,
.wc-block-components-product-stock-indicator {
	font-family: var(--wp--preset--font-family--sans-text);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	margin: 0 0 var(--wp--preset--spacing--15, 0.75rem);
}

.single-product p.stock.in-stock,
.single-product .wc-block-components-product-stock-indicator--in-stock {
	color: var(--ck-confirm);
}

.single-product.ck-uniek p.stock.in-stock,
.single-product .ck-uniek p.stock.in-stock {
	color: var(--ck-alert);
}

.single-product p.stock.out-of-stock,
.single-product .wc-block-components-product-stock-indicator--out-of-stock {
	color: var(--ck-muted);
}

/* --- Korte beschrijving --- */
.woocommerce-product-details__short-description,
.single-product .wp-block-post-excerpt {
	color: var(--ck-graphite);
	max-width: var(--ck-measure);
	margin-bottom: var(--wp--preset--spacing--20, 1rem);
}

/* --- Hoeveelheid: bij 1 stuk is een stepper ruis --- */
.single-product .quantity {
	margin-right: var(--wp--preset--spacing--15, 0.75rem);
}

.single-product .quantity input.qty {
	width: 4.5rem;
	height: 3rem;
	padding: 0 0.5rem;
	text-align: center;
	background-color: var(--ck-paper);
	border: var(--ck-hairline);
	border-radius: var(--ck-radius-xs);
	color: var(--ck-ink);
	font-family: var(--wp--preset--font-family--sans-text);
}

/* WooCommerce verbergt de qty-input zelf bij max 1; ruim dan ook de ruimte op */
.single-product .quantity.hidden,
.single-product .quantity:has(input[type="hidden"]) {
	display: none;
	margin: 0;
}

/* --- Vertrouwensregels onder de knop (klasse op een List-blok) --- */
.ck-trust {
	list-style: none;
	margin: var(--wp--preset--spacing--20, 1rem) 0 0;
	padding: var(--wp--preset--spacing--20, 1rem) 0 0;
	border-top: var(--ck-hairline);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--ck-muted);
}

.ck-trust li {
	position: relative;
	padding-left: 1.5rem;
	margin-bottom: 0.5rem;
}

.ck-trust li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 14px;
	height: 1px;
	background-color: var(--ck-bronze);
}

/* --- Geen tabs: de secties staan onder elkaar (designsysteem §5.2) --- */
.woocommerce-tabs .tabs,
.woocommerce-tabs ul.wc-tabs {
	display: none;
}

.woocommerce-tabs .panel {
	display: block !important;
	max-width: none;
	margin-bottom: var(--wp--preset--spacing--80, 4.5rem);
}

.woocommerce-tabs .panel > h2:first-child {
	font-family: var(--wp--preset--font-family--serif-display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
}

/* Verwante producten */
.related.products > h2,
.up-sells > h2,
.wp-block-woocommerce-related-products > h2 {
	font-family: var(--wp--preset--font-family--serif-display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
	margin-bottom: var(--wp--preset--spacing--40, 2rem);
}

/* Reviews: bij 72 unieke stenen zonder reviewhistorie leveren lege
   sterrenbalken alleen twijfel op. Daarom verborgen tot er echte reviews zijn
   — de instelling zelf staat in WooCommerce, dit is de opmaakkant. */
.single-product .woocommerce-product-rating,
.wp-block-woocommerce-product-rating:empty {
	display: none;
}


/* ==========================================================================
   9. BREADCRUMBS
   `nav.woocommerce-breadcrumb` is de enige selector die in zowel het block
   als de classic template bestaat (het block wrapt dezelfde <nav>).
   ========================================================================== */

nav.woocommerce-breadcrumb,
.wp-block-woocommerce-breadcrumbs {
	font-family: var(--wp--preset--font-family--sans-text);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--ck-muted);
	margin: 0 0 var(--wp--preset--spacing--15, 0.75rem);
	padding: 0;
}

nav.woocommerce-breadcrumb a {
	color: var(--ck-muted);
	text-decoration: none;
}

nav.woocommerce-breadcrumb a:hover {
	color: var(--ck-ink);
	text-decoration: underline;
	text-underline-offset: 0.16em;
}

/* Scheidingsteken in lijnkleur zodat het pad rustig leest */
nav.woocommerce-breadcrumb > *:not(a) {
	color: var(--ck-rule);
}


/* ==========================================================================
   10. KNOPPEN EN IN-MANDJE
   Let op: `wp-element-button` staat op zowel de block- als de classic-knop,
   dus theme.json-knopstijlen raken beide. Hier alleen de states en de
   WooCommerce-specifieke afwijkingen.
   ========================================================================== */

.wp-element-button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .button.alt,
button.single_add_to_cart_button,
.wc-block-components-product-button__button,
.wc-block-components-button {
	font-family: var(--wp--preset--font-family--sans-text);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-transform: none;
	text-decoration: none;
	padding: 0.875rem 1.75rem;
	border: 1px solid var(--ck-plum);
	border-radius: var(--ck-radius-xs);
	background-color: var(--ck-plum);
	color: var(--ck-paper);
	box-shadow: none;
	transition: background-color var(--ck-t-fast), border-color var(--ck-t-fast), color var(--ck-t-fast);
	cursor: pointer;
}

.wp-element-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .button.alt:hover,
button.single_add_to_cart_button:hover,
.wc-block-components-product-button__button:hover,
.wc-block-components-button:hover {
	background-color: var(--ck-plum-deep);
	border-color: var(--ck-plum-deep);
	color: var(--ck-paper);
}

.wp-element-button:active,
.woocommerce a.button:active,
.woocommerce button.button:active,
button.single_add_to_cart_button:active,
.wc-block-components-product-button__button:active {
	background-color: var(--ck-plum-active);
	border-color: var(--ck-plum-active);
	transform: none;  /* knoppen bewegen niet */
}

/* Secundaire knop — klasse `is-style-outline` (core) of `ck-btn-secondary` */
.wp-block-button.is-style-outline > .wp-block-button__link,
.ck-btn-secondary,
.woocommerce a.button.wc-forward:not(.checkout):not(.alt),
.woocommerce a.button.wc-backward {
	background-color: transparent;
	color: var(--ck-plum);
	border: 1px solid var(--ck-plum);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.ck-btn-secondary:hover,
.woocommerce a.button.wc-forward:not(.checkout):not(.alt):hover,
.woocommerce a.button.wc-backward:hover {
	background-color: var(--ck-stone);
	color: var(--ck-plum);
	border-color: var(--ck-plum);
}

/* Disabled */
.wp-element-button[disabled],
.wp-element-button:disabled,
.woocommerce button.button:disabled,
.woocommerce button.button.disabled,
.wc-block-components-button:disabled {
	background-color: var(--ck-stone);
	border-color: var(--ck-stone);
	color: var(--ck-muted);
	cursor: not-allowed;
	opacity: 1;
}

/* Op de productpagina is de knop volle breedte op mobiel */
.single-product form.cart .single_add_to_cart_button,
.single-product .wp-block-woocommerce-add-to-cart-form button {
	width: 100%;
}

@media (min-width: 782px) {
	.single-product form.cart .single_add_to_cart_button,
	.single-product .wp-block-woocommerce-add-to-cart-form button {
		width: auto;
		min-width: 15rem;
	}
}

/* De AJAX-knop heeft in PHP een leeg label en wordt door de Interactivity API
   gevuld. Nooit op tekstaanwezigheid stylen; de <span> is het anker. */
.wc-block-components-product-button__button > span {
	display: inline-block;
}

/* "Bekijk mandje"-link die WooCommerce naast de knop plakt: rustiger */
.woocommerce a.added_to_cart {
	display: inline-block;
	margin-left: 0.75rem;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--ck-plum);
	text-decoration: underline;
	text-underline-offset: 0.16em;
}


/* ==========================================================================
   11. MELDINGEN
   WooCommerce' standaardbalken (geel/blauw, met icoon-pseudo-element) eruit;
   hairline-blok met een 3px kleurrand links erin.
   ========================================================================== */

.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-noreviews,
.wc-block-components-notice-banner {
	display: block;
	margin: 0 0 var(--wp--preset--spacing--20, 1rem);
	padding: var(--wp--preset--spacing--15, 0.75rem) var(--wp--preset--spacing--20, 1rem);
	background-color: var(--ck-linen);
	border: var(--ck-hairline);
	border-left: 3px solid var(--ck-plum);
	border-radius: var(--ck-radius-xs);
	color: var(--ck-graphite);
	font-family: var(--wp--preset--font-family--sans-text);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.6;
	list-style: none;
	box-shadow: none;
}

/* Het gekleurde vlak en icoon van WooCommerce/WC-Blocks weghalen */
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before,
.wc-block-components-notice-banner > svg {
	display: none;
}

.woocommerce-message {
	border-left-color: var(--ck-confirm);
}

.woocommerce-error,
.wc-block-components-notice-banner.is-error {
	border-left-color: var(--ck-alert);
	color: var(--ck-alert);
}

.wc-block-components-notice-banner.is-success {
	border-left-color: var(--ck-confirm);
}

.woocommerce-error li,
.woocommerce-info li,
.woocommerce-message li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* De knop binnen een melding blijft een gewone secundaire knop */
.woocommerce-info .button,
.woocommerce-message .button {
	float: none;
	display: inline-block;
	margin-left: 0.75rem;
	padding: 0.5rem 1rem;
	background-color: transparent;
	color: var(--ck-plum);
	border-color: var(--ck-plum);
}


/* ==========================================================================
   12. MANDJE EN AFREKENEN — OPSCHONING
   ========================================================================== */

/* --- Couponveld weg: er zijn geen coupons, en het veld zaait twijfel --- */
.woocommerce-form-coupon-toggle,
form.checkout_coupon,
.checkout_coupon,
.wc-block-components-totals-coupon,
.cart .coupon,
.woocommerce-cart-form .coupon {
	display: none !important;
}

/* --- Mandje: geen tabelranden, wel hairlines tussen de regels --- */
.woocommerce table.shop_table,
.woocommerce-cart-form__contents {
	border: 0;
	border-radius: 0;
	border-collapse: collapse;
	width: 100%;
	font-family: var(--wp--preset--font-family--sans-text);
	font-size: var(--wp--preset--font-size--x-small);
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	border: 0;
	border-bottom: var(--ck-hairline);
	padding: var(--wp--preset--spacing--15, 0.75rem) var(--wp--preset--spacing--10, 0.5rem);
	vertical-align: middle;
	background-color: transparent;
}

.woocommerce table.shop_table thead th {
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--ck-muted);
	border-bottom: var(--ck-hairline);
}

.woocommerce table.shop_table td.product-name a,
.wc-block-components-product-name {
	font-family: var(--wp--preset--font-family--serif-display);
	font-size: var(--wp--preset--font-size--h-sm);
	font-weight: 400;
	color: var(--ck-ink);
	text-decoration: none;
}

.woocommerce table.shop_table td.product-thumbnail img,
.wc-block-cart-item__image img {
	width: 72px;
	height: 90px;            /* 4:5 */
	object-fit: cover;
	border-radius: var(--ck-radius-none);
	background-color: var(--ck-stone);
}

.woocommerce table.shop_table td.product-price,
.woocommerce table.shop_table td.product-subtotal {
	text-align: right;
	white-space: nowrap;
}

/* Verwijder-kruisje rustig maken */
.woocommerce a.remove,
.wc-block-cart-item__remove-link {
	color: var(--ck-muted) !important;
	font-weight: 400;
	background: none !important;
	border-radius: 0;
	text-decoration: underline;
	text-underline-offset: 0.16em;
}

.woocommerce a.remove:hover,
.wc-block-cart-item__remove-link:hover {
	color: var(--ck-alert) !important;
	background: none !important;
}

/* --- Order-samenvatting --- */
.woocommerce .cart_totals,
.woocommerce-checkout-review-order,
.wc-block-components-sidebar .wc-block-components-totals-wrapper {
	background-color: var(--ck-linen);
	border: var(--ck-hairline);
	border-radius: var(--ck-radius-xs);
	padding: var(--wp--preset--spacing--20, 1rem);
}

.woocommerce .cart_totals h2,
.woocommerce-checkout-review-order h3 {
	font-family: var(--wp--preset--font-family--serif-display);
	font-size: var(--wp--preset--font-size--h-md);
	font-weight: 400;
	margin: 0 0 var(--wp--preset--spacing--15, 0.75rem);
}

.woocommerce .cart_totals table.shop_table td,
.woocommerce .cart_totals table.shop_table th {
	border-bottom: var(--ck-hairline);
	padding: 0.625rem 0;
}

.woocommerce .cart_totals .order-total td,
.woocommerce .cart_totals .order-total th {
	border-bottom: 0;
	border-top: 1px solid var(--ck-ink);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--ck-ink);
	padding-top: 0.875rem;
}

/* Verzendkosten altijd expliciet, nooit achter een "bereken"-link */
.woocommerce .cart_totals .shipping-calculator-button,
.wc-block-components-shipping-calculator-address__button {
	display: none;
}

.woocommerce .cart_totals .woocommerce-shipping-destination,
.woocommerce .cart_totals .shipping .woocommerce-shipping-methods {
	color: var(--ck-muted);
	font-size: var(--wp--preset--font-size--label);
}

@media (min-width: 1100px) {
	.woocommerce-checkout .woocommerce-checkout-review-order,
	.wc-block-components-sidebar {
		position: sticky;
		top: calc(var(--ck-header-h) + 1.5rem);
	}
}

/* --- Bestelbevestiging --- */
.woocommerce-order-overview,
.woocommerce-order-details,
.woocommerce-customer-details {
	font-family: var(--wp--preset--font-family--sans-text);
	font-size: var(--wp--preset--font-size--x-small);
}

.woocommerce ul.order_details {
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--40, 2rem);
	padding: var(--wp--preset--spacing--20, 1rem);
	background-color: var(--ck-linen);
	border: var(--ck-hairline);
	border-radius: var(--ck-radius-xs);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: var(--wp--preset--spacing--15, 0.75rem);
}

.woocommerce ul.order_details li {
	border: 0;
	margin: 0;
	padding: 0;
	float: none;
	font-size: var(--wp--preset--font-size--small);
	color: var(--ck-ink);
}

.woocommerce ul.order_details li strong {
	display: block;
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--ck-muted);
}


/* ==========================================================================
   13. FORMULIEREN
   Labels bóven het veld, nooit placeholder-als-label.
   ========================================================================== */

.woocommerce form .form-row,
.wc-block-components-form .wc-block-components-text-input {
	display: block;
	margin: 0 0 var(--wp--preset--spacing--20, 1rem);
	padding: 0;
}

.woocommerce form .form-row label,
.wc-block-components-form label {
	display: block;
	margin-bottom: 0.375rem;
	font-family: var(--wp--preset--font-family--sans-text);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	color: var(--ck-muted);
	line-height: 1.4;
}

.woocommerce form .form-row .required,
.woocommerce form .form-row abbr.required {
	color: var(--ck-alert);
	border: 0;
	text-decoration: none;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single,
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
textarea,
select {
	width: 100%;
	min-height: 48px;
	padding: 0.75rem 0.875rem;
	background-color: var(--ck-paper);
	border: var(--ck-hairline);
	border-radius: var(--ck-radius-xs);
	color: var(--ck-ink);
	font-family: var(--wp--preset--font-family--sans-text);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	box-shadow: none;
	transition: border-color var(--ck-t-fast);
}

textarea {
	min-height: 8rem;
	resize: vertical;
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--ck-plum);
}

::placeholder {
	color: var(--ck-muted);
	opacity: 0.75;
}

/* Foutstaat bij het veld zelf */
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select,
input[aria-invalid="true"],
.wc-block-components-text-input.has-error input {
	border-color: var(--ck-alert);
	border-width: 1px;
}

.wc-block-components-validation-error,
.woocommerce form .form-row.woocommerce-invalid label {
	color: var(--ck-alert);
	font-size: var(--wp--preset--font-size--label);
}

.woocommerce form .form-row.woocommerce-validated input.input-text {
	border-color: var(--ck-confirm);
}

/* Checkbox/radio */
input[type="checkbox"],
input[type="radio"] {
	width: 1.125rem;
	height: 1.125rem;
	min-height: 0;
	accent-color: var(--ck-plum);
	margin-right: 0.5rem;
}


/* ==========================================================================
   14. HEADER, NAVIGATIE, FOOTER
   De structuur komt uit de Extendable template parts; hier alleen de
   merkspecifieke opmaak.
   ========================================================================== */

/* Header: hairline onderlijn, schaduw pas bij scrollen.
   De klasse `ck-scrolled` wordt niet door dit thema gezet — zonder JS blijft
   de header simpelweg plat, en dat is een geldige eindtoestand. */
.wp-block-template-part header .wp-block-group.ck-header,
header.wp-block-template-part {
	background-color: var(--ck-paper);
	border-bottom: var(--ck-hairline);
	box-shadow: none;
}

body.ck-scrolled header.wp-block-template-part {
	box-shadow: var(--ck-shadow-sm);
}

/* Navigatie: onderstreping als actief-indicator, nooit alleen kleur */
.wp-block-navigation .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--sans-text);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	color: var(--ck-ink);
	text-decoration: none;
	text-underline-offset: 6px;
	text-decoration-thickness: 1px;
}

.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation [aria-current="page"] {
	color: var(--ck-ink);
	text-decoration: underline;
	text-decoration-color: var(--ck-bronze);
}

/* Uitklapmenu / mobiel paneel: dit zweeft écht boven de pagina */
.wp-block-navigation__submenu-container,
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--ck-paper);
	border: var(--ck-hairline);
	border-radius: var(--ck-radius-xs);
	box-shadow: var(--ck-shadow-md);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--serif-display);
	font-size: var(--wp--preset--font-size--h-md);
	font-weight: 400;
}

/* Raakvlak minimaal 44x44 voor de hamburger en het mandje */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close,
.wc-block-mini-cart__button {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Mandje-teller: de enige ronde vorm in het hele ontwerp */
.wc-block-mini-cart__badge {
	background-color: var(--ck-plum);
	color: var(--ck-paper);
	border-radius: 50%;
	min-width: 18px;
	height: 18px;
	font-family: var(--wp--preset--font-family--sans-text);
	font-size: 11px;
	font-weight: 600;
	line-height: 18px;
	text-align: center;
	padding: 0 4px;
}

.wc-block-mini-cart__drawer,
.wc-block-components-drawer {
	background-color: var(--ck-paper);
	box-shadow: var(--ck-shadow-md);
}

/* Footer: kolomkoppen en links */
.ck-footer-heading,
footer.wp-block-template-part h2,
footer.wp-block-template-part h3 {
	font-family: var(--wp--preset--font-family--sans-text);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--ck-bronze-ink);
	margin-bottom: var(--wp--preset--spacing--15, 0.75rem);
}

footer.wp-block-template-part .wp-block-navigation a,
footer.wp-block-template-part li a {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--ck-graphite);
	text-decoration: none;
	text-underline-offset: 0.16em;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--ck-bronze);
}

footer.wp-block-template-part .wp-block-navigation a:hover,
footer.wp-block-template-part li a:hover {
	text-decoration: underline;
}

/* Betaal-iconen monochroom houden */
.ck-payment-icons img,
.ck-payment-icons svg {
	filter: grayscale(100%);
	opacity: 0.65;
	max-height: 22px;
	width: auto;
}


/* ==========================================================================
   15. RESPONSIVE
   Breakpoints: 600 / 782 (= WordPress' eigen mobiel-grens) / 1100.
   ========================================================================== */

/* Productdetail: 1 kolom tot 782px, daarna 7/5 asymmetrisch.
   Werkt voor de classic single-product-layout; in een blockified template
   zet je de kolomverdeling in het Columns-blok zelf (58% / 42%). */
@media (min-width: 782px) {
	.single-product div.product {
		display: grid;
		grid-template-columns: 7fr 5fr;
		column-gap: var(--wp--preset--spacing--40, 3rem);
		align-items: start;
	}

	.single-product div.product .woocommerce-product-gallery {
		grid-column: 1;
		float: none;
		width: auto;
		margin: 0;
	}

	.single-product div.product .summary {
		grid-column: 2;
		float: none;
		width: auto;
		margin: 0;
	}

	.single-product div.product .woocommerce-tabs,
	.single-product div.product .related,
	.single-product div.product .up-sells {
		grid-column: 1 / -1;
		margin-top: var(--wp--preset--spacing--80, 4.5rem);
	}
}

@media (min-width: 1100px) {
	.single-product div.product {
		column-gap: var(--wp--preset--spacing--50, 4rem);
	}
}

/* Categorie-header beeld */
.ck-category-header img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	max-height: min(46vh, 420px);
}

@media (min-width: 782px) {
	.ck-category-header img {
		aspect-ratio: 3 / 2;
	}
}

/* Hero homepage: leesbaarheidsverloop over het beeld, alleen op desktop */
@media (min-width: 782px) {
	.ck-hero {
		position: relative;
	}

	.ck-hero::after {
		content: "";
		position: absolute;
		inset: 0;
		pointer-events: none;
		background: linear-gradient(
			90deg,
			rgba(250, 248, 245, 0.92) 0%,
			rgba(250, 248, 245, 0.75) 38%,
			rgba(250, 248, 245, 0) 62%
		);
	}

	.ck-hero > .wp-block-cover__inner-container,
	.ck-hero > .wp-block-group {
		position: relative;
		z-index: 1;
	}
}

/* Mandje-tabel wordt op mobiel een lijst van regels */
@media (max-width: 599px) {
	.woocommerce table.shop_table thead {
		display: none;
	}

	.woocommerce table.shop_table,
	.woocommerce table.shop_table tbody,
	.woocommerce table.shop_table tr,
	.woocommerce table.shop_table td {
		display: block;
		width: 100%;
	}

	.woocommerce table.shop_table tr {
		position: relative;
		border-bottom: var(--ck-hairline);
		padding: var(--wp--preset--spacing--15, 0.75rem) 0;
	}

	.woocommerce table.shop_table td {
		border-bottom: 0;
		padding: 0.25rem 0;
		text-align: left;
	}

	.woocommerce table.shop_table td.product-price,
	.woocommerce table.shop_table td.product-subtotal {
		text-align: left;
	}

	.woocommerce table.shop_table td::before {
		content: attr(data-title) " ";
		font-size: var(--wp--preset--font-size--label);
		letter-spacing: 0.09em;
		text-transform: uppercase;
		color: var(--ck-muted);
		margin-right: 0.5rem;
	}

	.woocommerce table.shop_table td.product-thumbnail::before,
	.woocommerce table.shop_table td.product-remove::before {
		content: none;
	}
}

/* Gutter meeschalen (root padding-aware alignments blijft aan) */
@media (min-width: 782px) {
	body {
		--wp--style--root--padding-left: 2rem;
		--wp--style--root--padding-right: 2rem;
	}
}


/* ==========================================================================
   16. REDUCED MOTION, FORCED COLORS, PRINT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	li.product:hover .wp-block-woocommerce-product-image img,
	li.product:hover .woocommerce-LoopProduct-link img,
	li.product:hover img.attachment-woocommerce_thumbnail {
		transform: none;
	}
}

@media (forced-colors: active) {
	/* Laat het systeem de kleuren bepalen, maar houd de focus-ring zichtbaar
	   en zorg dat badges een rand behouden (anders vallen ze weg). */
	:where(a, button, input, select, textarea, [tabindex]):focus-visible {
		outline: 3px solid CanvasText;
		outline-offset: 2px;
	}

	li.product .wp-block-woocommerce-product-stock-indicator,
	li.product .onsale,
	li.product .wc-block-components-product-sale-badge {
		border: 1px solid CanvasText;
		backdrop-filter: none;
	}
}

@media print {
	header.wp-block-template-part,
	footer.wp-block-template-part,
	.wp-block-navigation,
	.wc-block-mini-cart,
	.woocommerce-product-gallery__trigger {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
	}
}

/* === CK-AANVULLINGEN (deploy) === */
/* De voorpagina heeft een eigen hero; de titelbalk van het thema is daar dubbelop. */
body.home .wp-block-post-title,
body.home .wp-block-template-part .wp-block-post-title,
body.home header.entry-header,
body.home .page-header,
body.home .wp-block-group.has-tertiary-background-color:has(> .wp-block-post-title) {
    display: none !important;
}

/* Hero: tekst moet altijd leesbaar zijn, ook als het beeld licht is. */
body.home .wp-block-cover h1,
body.home .wp-block-cover h1.wp-block-heading {
    color: #ffffff !important;
    text-shadow: 0 1px 24px rgba(36, 31, 27, 0.45);
}
body.home .wp-block-cover p,
body.home .wp-block-cover p a {
    color: #f7f4f0 !important;
    text-shadow: 0 1px 14px rgba(36, 31, 27, 0.5);
}
body.home .wp-block-cover .wp-block-cover__inner-container {
    max-width: 34rem;
    margin-right: auto;
    margin-left: 0;
}
@media (max-width: 781px) {
    body.home .wp-block-cover .wp-block-cover__inner-container { max-width: none; }
}

/* === CK-HOMEPAGE-GRIDS === */
/* Categoriekaarten op de homepage (eigen markup i.p.v. het WooCommerce-lijstblok). */
.ck-cat-kaart { margin: 0; }
.ck-cat-kaart a { text-decoration: none; }
.ck-cat-kaart img {
    transition: transform .5s cubic-bezier(.2,.6,.2,1), filter .4s ease;
}
.ck-cat-kaart:hover img { transform: scale(1.02); filter: brightness(1.03); }
.ck-cat-kaart figcaption {
    margin-top: .7rem;
    font-family: var(--wp--preset--font-family--serif-display, Georgia, serif);
    font-size: 1.2rem;
    line-height: 1.25;
    color: var(--wp--preset--color--ink, #241F1B);
}
.ck-cat-kaart figcaption a { color: inherit; border-bottom: 1px solid transparent; }
.ck-cat-kaart:hover figcaption a { border-bottom-color: var(--wp--preset--color--bronze, #9A7442); }
.ck-cat-kaart figcaption span {
    display: block;
    margin-top: .15rem;
    font-family: var(--wp--preset--font-family--sans-text, system-ui, sans-serif);
    font-size: .85rem;
    color: var(--wp--preset--color--muted, #5F574E);
}

/* Productgrid via de [products]-shortcode: ruimer, met leesbare titels. */
.woocommerce ul.products { gap: 2.5rem 2rem; }
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 1.02rem !important;
    line-height: 1.3;
    min-height: 2.6em;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    word-break: normal;
}
.woocommerce ul.products li.product img {
    aspect-ratio: 4 / 5;
    object-fit: cover;
    width: 100%;
}

/* === CK-PRODUCTTEGEL-FIX === */
/* FIX: de productlink had aspect-ratio 4/5 MET overflow:hidden, waardoor hij
   exact zo hoog werd als de foto en de titel + prijs eronder werden afgeklemd.
   De verhouding hoort op de afbeelding, niet op de link. */
.woocommerce ul.products li.product a.woocommerce-loop-product__link,
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
    aspect-ratio: auto !important;
    overflow: visible !important;
    height: auto !important;
    display: block;
}
.woocommerce ul.products li.product a.woocommerce-loop-product__link img,
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link img {
    aspect-ratio: 4 / 5;
    object-fit: cover;
    width: 100%;
    height: auto;
    display: block;
    border-radius: 2px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    display: block !important;
    margin: .8rem 0 .25rem;
    font-size: 1.02rem !important;
    line-height: 1.3;
    min-height: 2.6em;
    color: var(--wp--preset--color--ink, #241F1B);
}
.woocommerce ul.products li.product .price {
    display: block !important;
    font-family: var(--wp--preset--font-family--sans-text, system-ui, sans-serif);
    font-size: .95rem;
    color: var(--wp--preset--color--graphite, #3A332C);
    margin-bottom: .6rem;
}
/* Knop mag niet de halve tegel vullen. */
.woocommerce ul.products li.product .button {
    width: auto;
    padding: .55rem 1rem;
    font-size: .85rem;
    white-space: nowrap;
}
.woocommerce ul.products li.product { text-align: left; }

/* === CK-PRODUCTGRID === */
/* Het klassieke [products]-grid gebruikt floats en liep daardoor trapsgewijs
   uit de lijn. CSS grid geeft een vaste, voorspelbare indeling. */
.woocommerce ul.products,
.woocommerce-page ul.products {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 2.75rem 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none !important; display: none !important; }
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    clear: none !important;
    display: flex;
    flex-direction: column;
}
/* Titel en prijs vullen de ruimte, de knop zakt naar onderen: gelijke tegelhoogte. */
.woocommerce ul.products li.product a.woocommerce-loop-product__link { flex: 0 0 auto; }
.woocommerce ul.products li.product .button { margin-top: auto; align-self: flex-start; }

/* Knoptekst mag niet afgekapt worden. */
.woocommerce ul.products li.product .button,
.woocommerce a.button, .woocommerce button.button {
    white-space: normal;
    max-width: 100%;
    line-height: 1.25;
}
@media (max-width: 480px) {
    .woocommerce ul.products, .woocommerce-page ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem 1rem;
    }
    .woocommerce ul.products li.product .button { font-size: .8rem; padding: .5rem .75rem; }
}

/* === CK-BLOKPRODUCTEN === */
/* De blok-gebaseerde shop/categorie-templates gebruiken andere classes dan de
   klassieke loop. Zonder deze regels blijft er een lege band onder elke foto
   staan (de container heeft 4/5, de foto zelf niet). */
.wc-block-product .wc-block-components-product-image,
.wc-block-product .wc-block-components-product-image a,
.wp-block-woocommerce-product-image .wc-block-components-product-image {
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 2px;
    background: var(--wp--preset--color--stone, #E6DED4);
}
.wc-block-product .wc-block-components-product-image img,
.wp-block-woocommerce-product-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
}
.wc-block-product .wc-block-components-product-name {
    font-family: var(--wp--preset--font-family--serif-display, Georgia, serif);
    font-size: 1.05rem;
    line-height: 1.3;
    color: var(--wp--preset--color--ink, #241F1B);
}
.wc-block-product .wc-block-components-product-price {
    font-family: var(--wp--preset--font-family--sans-text, system-ui, sans-serif);
    font-size: .95rem;
    color: var(--wp--preset--color--graphite, #3A332C);
}

/* === CK-CATGRID === */
/* Categoriegrid op de homepage: alle 11 categorieen, auto-fit zodat er geen
   halve rijen ontstaan. Losse figure's i.p.v. wp:columns (die liep uit de lijn). */
.ck-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 2.5rem 2rem;
}
@media (max-width: 600px) {
    .ck-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1rem; }
    .ck-cat-kaart figcaption { font-size: 1.05rem; }
}