/**
 * WooCommerce-opmaak — brug naar het ontwerp.
 *
 * Los gehouden en alleen op WooCommerce-pagina's ingeladen (zie functions.php).
 * Leunt zoveel mogelijk op bestaande design-tokens (kleuren, spacing, knoppen,
 * type-schaal) zodat shop/product/winkelwagen dezelfde look krijgen als de
 * secties. De productlistings hergebruiken de bestaande .product-kaart-CSS;
 * hieronder vooral de brug-/aanvullende regels.
 */

/* ============================================================
   1. Knoppen — WooCommerce .button → design .btn.btn-primary
   ============================================================ */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button,
.woocommerce a.added_to_cart {
	min-height: var(--btn-height);
	padding: 0.5rem var(--btn-padding);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0 0.8rem;
	font-family: var(--font-family);
	font-size: var(--font-size);
	font-weight: 500;
	line-height: 1.2;
	text-transform: none;
	letter-spacing: 0;
	border-radius: var(--btn-border-radius);
	border: var(--btn-border-width) solid var(--primary-color);
	background-color: var(--primary-color);
	color: var(--white);
	cursor: pointer;
	transition: var(--transition);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .button:hover,
.woocommerce button.button:focus {
	background-color: var(--secondary-color);
	border-color: var(--secondary-color);
	color: var(--white);
}
/* Primaire actieknoppen (.alt): checkout, plaats bestelling — overschrijft WC-paars. */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce .button.alt {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
	color: var(--white);
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce .button.alt:hover {
	background-color: var(--secondary-color);
	border-color: var(--secondary-color);
	color: var(--white);
}
/* Secundaire/alternatieve knoppen (omlijnd). */
.woocommerce .button.alt.disabled,
.woocommerce .widget_shopping_cart .button {
	opacity: 1;
}

/* ============================================================
   2. Prijzen
   ============================================================ */
.woocommerce .price,
.woocommerce .price .woocommerce-Price-amount {
	color: var(--text-color);
	font-weight: 600;
}
.woocommerce .price del {
	opacity: 0.5;
	font-weight: 400;
}
.woocommerce .price ins {
	text-decoration: none;
}
/* Prijs in de tekstkaart (shop-listings). */
.tekstkaart .product-card-content .price,
.tekstkaart .product-card-content .price * {
	font-size: 1.8rem;
}

/* ============================================================
   3. Productlistings — grid responsive + nette afkapping
   ============================================================ */
@media (width >= 1200px) {
	.woocommerce .tekstkaarten.grid-column-3 {
		grid-template-columns: repeat(4, 1fr);
	}
}
@media (width < 992px) {
	.woocommerce .tekstkaarten.grid-column-3 {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (width < 576px) {
	.woocommerce .tekstkaarten.grid-column-3 {
		grid-template-columns: 1fr;
	}
}
.tekstkaart .product-card-content p a {
	color: inherit;
	text-decoration: none;
}
.tekstkaart .product-card-content p a:hover {
	color: var(--primary-color);
}

/* ============================================================
   4. Archief-header (titel, aantal, sortering)
   ============================================================ */
.woocommerce .page-title {
	font-size: var(--h2);
	font-weight: 500;
	margin-bottom: var(--gutter-3);
}
.woocommerce .term-description {
	max-width: 72rem;
	margin: 0 0 var(--gutter-3);
}
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	font-size: var(--fs-sm);
	margin: 0 0 var(--gutter-3);
}
.woocommerce .woocommerce-result-count {
	float: left;
	line-height: 4rem;
}
.woocommerce .woocommerce-ordering {
	float: right;
}
.woocommerce .tekstkaarten {
	clear: both;
}
.woocommerce .woocommerce-ordering select {
	padding: 0.6rem 1.2rem;
	border: 0.1rem solid rgba(0, 0, 0, 20%);
	border-radius: 0.6rem;
	font-family: var(--font-family);
}

/* ============================================================
   5. Paginering
   ============================================================ */
.woocommerce nav.woocommerce-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
	justify-content: center;
	border: 0;
	margin-top: var(--md);
}
.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
	margin: 0;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	min-width: 4rem;
	height: 4rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 1.2rem;
	border: 0.1rem solid rgba(0, 0, 0, 20%);
	border-radius: 4rem;
	color: var(--text-color);
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
	color: var(--white);
}

/* ============================================================
   6. Enkel product
   ============================================================ */
/* De enkel-product-wrapper heeft óók class="product". Alles wat de wrapper raakt
   scopen op `.product.type-product` (de wrapper) of op de galerij — zo houden de
   geneste gerelateerde-kaarten gewoon de listing-kaartstijl (zoals op de POP). */
.single-product .product.type-product::before,
.single-product .product.type-product:hover::before {
	content: none;
}
/* Wrapper-hover (de wrapper is óók .product) mag de knoppen in de
   gerelateerde-productenkaarten niet laten 'hoveren' via `.product:hover .btn svg`. */
.single-product .product.type-product:hover .btn svg {
	transform: none;
}

/* Galerij links, samenvatting rechts; tabs + gerelateerd vol-breed eronder. */
.single-product .product.type-product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--gutter-4);
	align-items: start;
}
.single-product .product.type-product > * {
	grid-column: 1 / -1;
	min-width: 0;
}
.single-product .product.type-product > .woocommerce-product-gallery {
	grid-column: 1;
	grid-row: 1;
	width: 100%;
	margin: 0;
	float: none;
}
.single-product .product.type-product > .summary {
	grid-column: 2;
	grid-row: 1;
	float: none;
	width: auto;
	margin: 0;
}
@media (width < 768px) {
	.single-product .product.type-product {
		grid-template-columns: 1fr;
		gap: var(--gutter-3);
	}
	.single-product .product.type-product > .woocommerce-product-gallery,
	.single-product .product.type-product > .summary {
		grid-column: 1 / -1;
		grid-row: auto;
	}
}

/* Galerij vult de hele kolombreedte (geen kaart-aspectratio). */
.single-product .woocommerce-product-gallery {
	position: relative;
	width: 100%;
	margin: 0;
	float: none;
}
.single-product .woocommerce-product-gallery figure {
	aspect-ratio: auto;
	margin: 0;
}
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image img,
.single-product .woocommerce-product-gallery img {
	width: 100%;
	height: auto;
	object-fit: initial;
}

/* "Aanbieding!"-badge in dezelfde stijl als de grid-labels (witte chip). */
.woocommerce span.onsale {
	position: absolute;
	top: 2.4rem;
	left: 0;
	right: auto;
	margin: 0;
	min-width: 0;
	min-height: 0;
	padding: var(--gutter-xs) 1rem;
	border-radius: 0;
	background-color: var(--white);
	color: var(--text-color);
	font-size: 1.3rem;
	font-weight: 500;
	line-height: 1;
	text-transform: uppercase;
}

/* Samenvatting (rechterkolom). */
.single-product .summary .product_title {
	font-size: var(--h2);
	font-weight: 500;
	margin-bottom: var(--gutter-2);
}
/* WC kleurt prijs/voorraad standaard olijfgroen (#958e09 via :where() + div.product,
   net specifieker dan een class-only regel); terugzetten naar de huisstijl. */
.single-product div.product .summary p.price,
.single-product div.product .summary span.price,
.single-product div.product .summary p.price .woocommerce-Price-amount {
	color: var(--text-color);
}
.single-product div.product .summary p.price,
.single-product div.product .summary span.price {
	font-size: var(--h5);
	margin-bottom: var(--gutter-2);
}
.single-product div.product .summary .stock {
	color: var(--primary-color);
	font-weight: 600;
	margin-bottom: var(--gutter-2);
}
.woocommerce-product-summary__description,
.single-product .summary .woocommerce-product-details__short-description {
	margin-bottom: var(--gutter-3);
}
.single-product .summary form.cart {
	margin-bottom: var(--gutter-4);
}

/* Links in huisstijlkleur (PDP rendert buiten .entry-content). */
.single-product .summary a,
.single-product .product_meta a,
.single-product .woocommerce-product-summary__description a,
.single-product .woocommerce-tabs a {
	color: var(--primary-color);
}
.single-product .summary a:hover,
.single-product .product_meta a:hover,
.single-product .woocommerce-product-summary__description a:hover {
	color: var(--secondary-color);
}

.single-product .woocommerce-tabs ul.tabs {
	padding: 0;
	margin-bottom: var(--gutter-3);
}
.single-product .woocommerce-tabs .panel h2 {
	font-size: var(--h4);
}
.single-product .related.products > h2,
.single-product .upsells.products > h2 {
	font-size: var(--h3);
	font-weight: 500;
	margin-bottom: var(--gutter-3);
}

/* ============================================================
   7. Winkelwagen, afrekenen, account — tabellen & formulieren
   ============================================================ */
.woocommerce table.shop_table {
	border-radius: 0.8rem;
	border-color: rgba(0, 0, 0, 12%);
}
.woocommerce table.shop_table th {
	font-weight: 600;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-account .woocommerce-EditAccountForm input.input-text,
.select2-container .select2-selection--single {
	padding: 1rem 1.4rem;
	border: 0.1rem solid rgba(0, 0, 0, 20%);
	border-radius: 0.6rem;
	font-family: var(--font-family);
	min-height: 4.6rem;
}
.woocommerce .cart_totals h2,
.woocommerce-checkout h3,
.woocommerce-account h2,
.woocommerce .cross-sells > h2 {
	font-size: var(--h4);
	font-weight: 500;
}
.woocommerce-checkout #payment {
	border-radius: 0.8rem;
	background-color: var(--light-grey-color);
}

/* Mijn account — ingelogd: navigatie links, content rechts (i.p.v. floats die
   bij smalle content over elkaar kunnen vallen). */
.woocommerce:has(> .woocommerce-MyAccount-navigation) {
	display: grid;
	grid-template-columns: 24rem minmax(0, 1fr);
	gap: var(--gutter-4);
	align-items: start;
}
.woocommerce:has(> .woocommerce-MyAccount-navigation) > * {
	grid-column: 1 / -1;
}
.woocommerce:has(> .woocommerce-MyAccount-navigation) > .woocommerce-MyAccount-navigation {
	grid-column: 1;
	float: none;
	width: auto;
}
.woocommerce:has(> .woocommerce-MyAccount-navigation) > .woocommerce-MyAccount-content {
	grid-column: 2;
	float: none;
	width: auto;
	min-width: 0;
}
.woocommerce-MyAccount-navigation ul {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}
.woocommerce-MyAccount-navigation li {
	display: block;
	border-bottom: 0.1rem solid rgba(0, 0, 0, 10%);
}
.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 1.2rem 0;
	color: var(--text-color);
	text-decoration: none;
	border: 0;
	border-radius: 0;
}
.woocommerce-MyAccount-navigation li a:hover {
	color: var(--primary-color);
	text-decoration: none;
	border: 0;
}
.woocommerce-MyAccount-navigation li.is-active a {
	color: var(--primary-color);
	font-weight: 600;
}
@media (width < 768px) {
	.woocommerce:has(> .woocommerce-MyAccount-navigation) {
		grid-template-columns: 1fr;
	}
	.woocommerce:has(> .woocommerce-MyAccount-navigation) > .woocommerce-MyAccount-navigation,
	.woocommerce:has(> .woocommerce-MyAccount-navigation) > .woocommerce-MyAccount-content {
		grid-column: 1 / -1;
	}
}
/* Login/registratie naast elkaar (als registratie aanstaat). */
.woocommerce-account .u-columns.col2-set {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--gutter-4);
}
.woocommerce-account .u-columns.col2-set .col-1,
.woocommerce-account .u-columns.col2-set .col-2 {
	float: none;
	width: auto;
}
@media (width < 768px) {
	.woocommerce-account .u-columns.col2-set {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   8. Meldingen (notices)
   ============================================================ */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top-color: var(--primary-color);
	border-radius: 0.6rem;
}
/* Geen blauwe browser-focusrand op de melding-balk (WC focust 'm voor SR). */
.woocommerce-message:focus,
.woocommerce-info:focus,
.woocommerce-error:focus,
.woocommerce-notices-wrapper [tabindex]:focus {
	outline: none;
}
.woocommerce-message {
	border-top-color: var(--primary-color);
}
.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--primary-color);
}

/* ============================================================
   9. WooCommerce-blokken (block cart/checkout)
   ============================================================ */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	font-family: var(--font-family);
}
/* Gevulde actieknoppen (Doorgaan naar afrekenen / Bestelling plaatsen). */
.wp-block-woocommerce-cart .wc-block-components-button.contained,
.wp-block-woocommerce-checkout .wc-block-components-button.contained,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	background-color: var(--primary-color) !important;
	color: var(--white) !important;
	border-radius: var(--btn-border-radius);
	text-decoration: none !important;
}
.wp-block-woocommerce-cart .wc-block-components-button.contained:hover,
.wp-block-woocommerce-checkout .wc-block-components-button.contained:hover {
	background-color: var(--secondary-color) !important;
}
/* Links in primaire kleur. */
.wp-block-woocommerce-cart a,
.wp-block-woocommerce-checkout a {
	color: var(--primary-color);
}