/* ─────────────────────────────────────────────────────────────────────
   Anna Haakt — aanvullende styling
   Alles wat theme.json niet kan bereiken. Gebruikt uitsluitend de
   preset-CSS-variabelen uit theme.json, zodat één paletwijziging daar
   overal doorwerkt.
   ───────────────────────────────────────────────────────────────────── */

/* Toegankelijkheid: zichtbare focus-indicator op alles wat focus krijgt.
   De browserdefault verdwijnt achter onze eigen achtergrondkleuren. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--clay);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Skip-link — nodig voor toetsenbordnavigatie, standaard buiten beeld. */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: .75rem 1.25rem;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	text-decoration: none;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* Respecteer de systeemvoorkeur voor minder beweging. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Productafbeeldingen krijgen een vaste verhouding zodat een grid met
   foto's van ongelijke hoogte niet gaat springen tijdens het laden. */
.annahaakt-product-grid img,
.wc-block-grid__product-image img,
.woocommerce ul.products li.product a img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	width: 100%;
	height: auto;
}

/* ── WooCommerce ──────────────────────────────────────────────────────
   Woo rendert een deel van de shop nog met klassieke markup en zijn eigen
   stylesheet. Hier trekken we die in het thema-designsysteem. */

.woocommerce, .woocommerce-page {
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--ink);
}

/* Knoppen: gelijk aan de core/button-styling uit theme.json. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button:not(.is-link) {
	background: var(--wp--preset--color--clay);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: .03em;
	border: 0;
	border-radius: 2px;
	padding: .9em 1.8em;
	line-height: 1.2;
	transition: background-color .18s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce button.button.alt:hover,
.wc-block-components-button:not(.is-link):hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background: var(--wp--preset--color--clay);
	color: var(--wp--preset--color--white);
}

/* Prijzen — rustig, niet schreeuwerig. */
.woocommerce .price,
.wc-block-components-product-price {
	font-family: var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--ink);
	font-weight: 500;
}
.woocommerce .price del,
.wc-block-components-product-price del {
	color: var(--wp--preset--color--muted);
	font-weight: 400;
	opacity: 1;
}
.woocommerce .price ins,
.wc-block-components-product-price ins {
	color: var(--wp--preset--color--clay);
	text-decoration: none;
}

/* Productkaarten in de shop-grid. */
.woocommerce ul.products li.product,
.wc-block-grid__product { text-align: left; }
.woocommerce ul.products li.product a img,
.wc-block-grid__product-image img { border-radius: 2px; margin-bottom: var(--wp--preset--spacing--20); }
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	line-height: 1.3;
	padding: 0;
	margin: 0 0 .35rem;
}

/* "Sale"-badge — zacht, geen felle sticker. */
.woocommerce span.onsale,
.wc-block-components-product-sale-badge {
	background: var(--wp--preset--color--clay-soft);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	border-radius: 2px;
	padding: .35em .8em;
	min-height: 0;
	min-width: 0;
	line-height: 1.4;
}

/* Meldingen (winkelmand bijgewerkt, foutmelding, ...). */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top: 0;
	border-left: 3px solid var(--wp--preset--color--sage);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	border-radius: 2px;
	box-shadow: var(--wp--preset--shadow--soft);
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--wp--preset--color--sage-deep); }
.woocommerce-error { border-left-color: var(--wp--preset--color--clay); }
.woocommerce-error::before { color: var(--wp--preset--color--clay); }

/* Formuliervelden — checkout en account. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.wc-block-components-text-input input {
	border: 1px solid var(--wp--preset--color--sage-soft);
	border-radius: 2px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	padding: .7em .9em;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	border-color: var(--wp--preset--color--sage-deep);
	outline: 2px solid var(--wp--preset--color--clay);
	outline-offset: 1px;
}

/* Tabellen (winkelmand, ordertotalen). */
.woocommerce table.shop_table {
	border: 1px solid var(--wp--preset--color--sage-soft);
	border-radius: 2px;
	border-collapse: separate;
}
.woocommerce table.shop_table th {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	letter-spacing: .03em;
	color: var(--wp--preset--color--ink);
}

/* Breadcrumb en resultaattelling — secundaire informatie. */
.woocommerce .woocommerce-breadcrumb,
.woocommerce .woocommerce-result-count {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}
.woocommerce .woocommerce-breadcrumb a { color: var(--wp--preset--color--sage-deep); }

/* Mollie toont betaalmethode-iconen in de checkout; geef ze lucht. */
.wc_payment_method img,
.wc-block-components-payment-method-icons img { max-height: 28px; width: auto; }

/* ── Header-acties ────────────────────────────────────────────────────
   Zoeken, account en winkelmand staan naast elkaar rechts in de header.
   De core-zoekknop is standaard een gevulde knop; dat trekt in een rustig
   ontwerp te veel aandacht weg van de producten. Hier alleen het icoon. */

.wp-block-search__button.has-icon {
	background: transparent;
	color: var(--wp--preset--color--ink);
	padding: .4em;
	min-width: 0;
	border: 0;
}
.wp-block-search__button.has-icon:hover,
.wp-block-search__button.has-icon:focus {
	background: transparent;
	color: var(--wp--preset--color--clay);
}
.wp-block-search__button svg { width: 22px; height: 22px; }

/* Account-icoon op dezelfde optische grootte als de andere twee.
   Op de wrapper targeten en niet op .wc-block-customer-account__account-icon:
   die klasse zet WooCommerce alleen wanneer het blok automatisch wordt
   ingehaakt. Plaats je het blok zelf, dan heeft de SVG geen klasse én geen
   intrinsieke afmeting — hij rendert dan als 0 bij 0 pixels en is onzichtbaar. */
.wp-block-woocommerce-customer-account svg,
.wc-block-customer-account__account-icon { width: 22px; height: 22px; fill: currentColor; }
.wp-block-woocommerce-customer-account { display: flex; align-items: center; }
.wc-block-customer-account a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
}
.wc-block-customer-account a:hover { color: var(--wp--preset--color--clay); }

/* Winkelmandknop: geen knop-uiterlijk, gewoon icoon plus bedrag. */
.wc-block-mini-cart__button {
	background: transparent;
	color: var(--wp--preset--color--ink);
	padding: .4em;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
}
.wc-block-mini-cart__button:hover { background: transparent; color: var(--wp--preset--color--clay); }
.wc-block-mini-cart__amount { font-weight: 500; }