/**
 * Productpagina: opmaak van templates/single-product.html.
 *
 * Alleen WooCommerce- en core-blokken, opgemaakt met de tokens uit theme.json.
 * Alleen geladen op productpagina's (inc/productpagina.php).
 *
 * Selectors beginnen met .yooker-product (de <main> van het template), zodat
 * ze winnen van de eigen blok-CSS van WooCommerce, ook als die later laadt.
 */

/* ==========================================================================
   Kruimelpad
   ========================================================================== */

.yooker-product .woocommerce-breadcrumb {
	margin: 0;
	color: var(--wp--custom--color--text--muted);
	font-size: var(--wp--preset--font-size--xs);
}

.yooker-product .woocommerce-breadcrumb a {
	color: var(--wp--custom--color--text--body);
	text-decoration: none;
}

.yooker-product .woocommerce-breadcrumb a:hover {
	color: var(--wp--custom--color--text--link);
}

/* ==========================================================================
   Galerij
   ========================================================================== */

.yooker-product .wc-block-product-gallery {
	gap: var(--wp--preset--spacing--20);
}

/* Grote afbeelding en thumbnails op een lichtgrijs vlak (zoals de placeholders in het ontwerp) */
.yooker-product .wc-block-product-gallery-large-image,
.yooker-product .wc-block-product-gallery-thumbnails__thumbnail {
	border-radius: var(--wp--custom--radius--small);
	background-color: var(--wp--custom--color--border--subtle);
	overflow: hidden;
}

.yooker-product .wc-block-product-gallery-large-image img {
	object-fit: contain;
}

.yooker-product .wc-block-product-gallery-thumbnails__thumbnail img {
	border-radius: var(--wp--custom--radius--small);
	object-fit: contain;
}

/* Actieve thumbnail: blauwe rand i.p.v. de standaard grijze overlay */
.yooker-product .wc-block-product-gallery-thumbnails__thumbnail__image--is-active {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: -2px;
}

/* Label (sale-badge) linksboven als donker pilletje */
.yooker-product .wc-block-product-gallery-large-image .wc-block-components-product-sale-badge {
	margin: var(--wp--preset--spacing--20);
	padding: 0.25rem 0.5rem;
	border: 0;
	border-radius: var(--wp--custom--radius--small);
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	text-transform: none;
}

/* ==========================================================================
   Rechterkolom: titel, meta, intro, kopen
   ========================================================================== */

.yooker-product__koop > * + * {
	margin-top: var(--wp--preset--spacing--20);
}

.yooker-product__koop .wp-block-post-title {
	margin: 0;
}

/* Merk | sterren | SKU, met streepjes ertussen */
.yooker-product__meta {
	color: var(--wp--custom--color--text--body);
	font-size: var(--wp--preset--font-size--xs);
}

.yooker-product__meta > * {
	margin: 0;
}

.yooker-product__meta > * + * {
	margin-left: 0.75rem;
	padding-left: 0.75rem;
	border-left: 1px solid var(--wp--preset--color--border);
}

.yooker-product__meta a {
	color: inherit;
}

/* Sterren in de merkkleur (geel/oranje) */
.yooker-product .wc-block-components-product-rating__stars {
	color: var(--wp--custom--color--surface--brand-contrast);
}

.yooker-product .wc-block-components-product-rating {
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
}

.yooker-product .wc-block-components-product-rating__reviews_count,
.yooker-product .wc-block-components-product-rating__reviews_count a {
	color: var(--wp--custom--color--text--body);
	text-decoration: none;
}

/* Korte omschrijving: twee regels, zoals het ontwerp */
.yooker-product__intro,
.yooker-product__intro p {
	margin: 0;
	color: var(--wp--custom--color--text--body);
	font-size: var(--wp--preset--font-size--s);
	line-height: 1.6;
}

.yooker-product__intro {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

/* Grijs koopvlak: voorraad, prijs, aantal + knop */
.yooker-product__kopen {
	margin-top: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--custom--color--border--subtle);
	border-radius: var(--wp--custom--radius--small);
	background-color: var(--wp--custom--color--surface--subtle);
}

/* Voorraad: groen met bolletje */
.yooker-product .wc-block-components-product-stock-indicator {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
}

.yooker-product .wc-block-components-product-stock-indicator--in-stock,
.yooker-product .wc-block-components-product-stock-indicator--available-on-backorder {
	color: var(--wp--custom--color--feedback--success);
}

.yooker-product .wc-block-components-product-stock-indicator--out-of-stock {
	color: var(--wp--custom--color--feedback--error);
}

.yooker-product__kopen .wc-block-components-product-stock-indicator::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 9999px;
	background-color: currentColor;
}

/*
 * Prijs: bedrag + "excl. btw" op één regel, de oude prijs eronder.
 * "excl. btw" is het prijs-achtervoegsel uit WooCommerce → Instellingen → Btw.
 */
.yooker-product__kopen .wc-block-components-product-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 0.5rem;
	color: var(--wp--custom--color--text--heading);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 700;
}

.yooker-product__kopen .wc-block-components-product-price ins {
	text-decoration: none;
}

.yooker-product__kopen .wc-block-components-product-price del {
	order: 1;
	flex-basis: 100%;
	color: var(--wp--custom--color--text--muted);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 400;
}

.yooker-product .wc-block-components-product-price .woocommerce-price-suffix {
	color: var(--wp--custom--color--text--muted);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 400;
}

/* Aantal + knop naast elkaar, knop vult de rest */
.yooker-product .wp-block-woocommerce-add-to-cart-form form.cart {
	grid-template-columns: auto 1fr;
	gap: 0.5rem;
	margin: var(--wp--preset--spacing--20) 0 0;
}

.yooker-product .wp-block-woocommerce-add-to-cart-form form.cart > .single_add_to_cart_button {
	grid-column: 2 / -1;
	justify-self: stretch;
}

/* Aantal: wit veld met rand */
.yooker-product div.wc-block-add-to-cart-form.wc-block-add-to-cart-form--stepper form.cart div.wc-block-components-quantity-selector.quantity {
	min-width: 0;
	width: auto;
	margin: 0;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--small);
	background-color: var(--wp--preset--color--base);
}

.yooker-product .wc-block-add-to-cart-form .wc-block-components-quantity-selector .input-text {
	width: 2.5rem;
	min-width: 0;
	color: var(--wp--custom--color--text--heading);
	font-size: var(--wp--preset--font-size--s);
}

.yooker-product .wc-block-add-to-cart-form .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
	min-width: 2rem;
	color: var(--wp--custom--color--text--body);
}

/* Gele knop met winkelwagen-icoon (zelfde kleuren als de knopstijl "Commerce") */
.yooker-product .wp-block-woocommerce-add-to-cart-form form.cart button.single_add_to_cart_button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	margin: 0;
	padding: 0.625rem 1.25rem;
	border: 0;
	border-radius: var(--wp--custom--radius--small);
	background-color: var(--wp--custom--color--surface--brand-contrast);
	color: var(--wp--custom--color--text--heading);
	font-size: var(--wp--preset--font-size--s);
	font-weight: 600;
	transition: background-color 0.15s;
}

.yooker-product .wp-block-woocommerce-add-to-cart-form form.cart button.single_add_to_cart_button.button::before {
	content: "";
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E") center / contain no-repeat;
}

.yooker-product .wp-block-woocommerce-add-to-cart-form form.cart button.single_add_to_cart_button.button:hover {
	background-color: var(--wp--custom--color--surface--brand-contrast-hover);
	color: var(--wp--custom--color--text--heading);
}

.yooker-product .wp-block-woocommerce-add-to-cart-form form.cart button.single_add_to_cart_button.button:focus-visible {
	outline: 4px solid var(--wp--custom--color--surface--brand-contrast-focus);
	outline-offset: 0;
}

/* Voordelen onder het koopvlak: klein, groen vinkje zonder rondje */
.yooker-product .yooker-product__usps {
	margin-top: var(--wp--preset--spacing--30);
	color: var(--wp--custom--color--text--body);
	font-size: var(--wp--preset--font-size--xs);
}

.yooker-product .yooker-product__usps li {
	padding-left: 1.5rem;
}

.yooker-product .yooker-product__usps li + li {
	margin-top: 0.75rem;
}

.yooker-product .yooker-product__usps li::before {
	top: 0;
	width: 1rem;
	height: 1rem;
	border: 0;
	color: var(--wp--custom--color--feedback--success);
	font-size: 0.875rem;
}

.yooker-product .yooker-product__usps strong {
	color: var(--wp--custom--color--text--heading);
	font-weight: 600;
}

/* ==========================================================================
   Productinformatie: "tabs" (ankerlinks) en secties
   ========================================================================== */

.yooker-product__info > .wp-block-heading {
	margin: 0;
}

.yooker-product__tabs {
	gap: var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.yooker-product__tabs p {
	margin: 0;
}

.yooker-product__tabs a {
	display: block;
	margin-bottom: -1px;
	padding: 0.75rem 0.25rem;
	border-bottom: 2px solid transparent;
	color: var(--wp--custom--color--text--body);
	font-weight: 500;
	text-decoration: none;
}

.yooker-product__tabs a:hover {
	color: var(--wp--custom--color--text--link);
}

.yooker-product__tabs .is-actief a {
	border-bottom-color: var(--wp--preset--color--primary);
	color: var(--wp--custom--color--text--link);
}

/* Na een klik op een "tab" (#specificaties in de url) die tab actief i.p.v. de eerste */
.yooker-product__info:has(.yooker-product__sectie:target) .yooker-product__tabs .is-actief a {
	border-bottom-color: transparent;
	color: var(--wp--custom--color--text--body);
}

.yooker-product__info:has(#beschrijving:target) .yooker-product__tabs a[href="#beschrijving"],
.yooker-product__info:has(#specificaties:target) .yooker-product__tabs a[href="#specificaties"],
.yooker-product__info:has(#reviews:target) .yooker-product__tabs a[href="#reviews"] {
	border-bottom-color: var(--wp--preset--color--primary);
	color: var(--wp--custom--color--text--link);
}

.yooker-product__sectie {
	scroll-margin-top: var(--wp--preset--spacing--60);
}

.yooker-product__sectie + .yooker-product__sectie {
	margin-top: var(--wp--preset--spacing--60);
}

.yooker-product__sectie > .wp-block-heading,
.yooker-product__zijkant .wp-block-heading {
	margin: 0 0 var(--wp--preset--spacing--30);
}

/* Beschrijving */
.yooker-product .wp-block-woocommerce-product-description {
	color: var(--wp--custom--color--text--body);
	font-size: var(--wp--preset--font-size--s);
	line-height: 1.6;
}

/* ==========================================================================
   Specificaties: één tabel met grijze en witte rijen
   ========================================================================== */

.yooker-product .wp-block-woocommerce-product-specifications {
	margin: 0;
}

.yooker-product .wp-block-woocommerce-product-specifications table {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--xs);
}

.yooker-product .wp-block-woocommerce-product-specifications :is(th, td) {
	padding: 0.75rem 1rem;
	border: 0;
	font-weight: 400;
	text-align: left;
	vertical-align: top;
}

.yooker-product .wp-block-woocommerce-product-specifications tbody tr:nth-child(odd) {
	background-color: var(--wp--custom--color--surface--subtle);
}

.yooker-product .wp-block-woocommerce-product-specifications th {
	width: 50%;
	color: var(--wp--custom--color--text--body);
}

.yooker-product .wp-block-woocommerce-product-specifications td {
	color: var(--wp--custom--color--text--heading);
}

/* ==========================================================================
   Reviews
   ========================================================================== */

.yooker-reviews .wp-block-woocommerce-product-review-template {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: 0;
}

.yooker-reviews .wp-block-woocommerce-product-review-template ol {
	padding-left: var(--wp--preset--spacing--40);
}

/* Elke review als grijze kaart */
.yooker-review {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--small);
	background-color: var(--wp--custom--color--surface--subtle);
}

/* Naam | datum */
.yooker-review__wie {
	color: var(--wp--custom--color--text--muted);
}

.yooker-review__wie > * {
	margin: 0;
}

.yooker-review__wie > * + * {
	margin-left: 0.75rem;
	padding-left: 0.75rem;
	border-left: 1px solid var(--wp--preset--color--border);
}

.yooker-review .wp-block-woocommerce-product-review-content {
	color: var(--wp--custom--color--text--body);
	line-height: 1.6;
}

.yooker-review .wp-block-woocommerce-product-review-content p {
	margin: 0;
}

.yooker-reviews .wc-block-components-product-rating__stars,
.yooker-reviews .star-rating {
	color: var(--wp--custom--color--surface--brand-contrast);
}

/* Paginering ("meer reviews") als omlijnde knopjes */
.yooker-reviews .wp-block-woocommerce-product-reviews-pagination {
	gap: 0.5rem;
	margin-top: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--s);
}

.yooker-reviews .wp-block-woocommerce-product-reviews-pagination a {
	padding: 0.375rem 0.75rem;
	border: 2px solid var(--wp--custom--color--border--focus);
	border-radius: var(--wp--custom--radius--small);
	color: var(--wp--custom--color--text--link);
	font-weight: 500;
	text-decoration: none;
}

.yooker-reviews .wp-block-woocommerce-product-reviews-pagination a:hover {
	background-color: var(--wp--custom--color--primary--50);
}

/* Formulier om een review te schrijven */
.yooker-reviews .wp-block-woocommerce-product-review-form {
	margin-top: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--s);
}

.yooker-reviews .wp-block-woocommerce-product-review-form :is(input[type="text"], input[type="email"], textarea) {
	box-sizing: border-box;
	width: 100%;
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--medium);
	background-color: var(--wp--preset--color--base);
	font: inherit;
}

.yooker-reviews .wp-block-woocommerce-product-review-form :is(input[type="text"], input[type="email"], textarea):focus {
	border-color: var(--wp--custom--color--border--focus);
	outline: none;
	box-shadow: 0 0 0 1px var(--wp--custom--color--border--focus);
}

.yooker-reviews .wp-block-woocommerce-product-review-form p.stars a {
	color: var(--wp--custom--color--surface--brand-contrast);
}

/* ==========================================================================
   Zijkolom: "Vaak samen gekocht" en "Bekijk ook eens"
   ========================================================================== */

.yooker-productlijst + .yooker-productlijst {
	margin-top: var(--wp--preset--spacing--60);
}

.yooker-productlijst ul.wc-block-product-template {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
}

.yooker-productlijst ul.wc-block-product-template > li {
	width: 100%;
	margin: 0;
}

/* Kaart: afbeelding links (grijs vlak), info rechts */
.yooker-productkaart {
	align-items: flex-start;
}

.yooker-productkaart > .wc-block-components-product-image {
	flex: 0 0 45%;
	margin: 0;
	border-radius: var(--wp--custom--radius--small);
	background-color: var(--wp--custom--color--border--subtle);
	overflow: hidden;
}

.yooker-productkaart > .wc-block-components-product-image img {
	aspect-ratio: 1;
	object-fit: contain;
}

.yooker-productkaart__info {
	flex: 1;
	min-width: 0;
}

.yooker-productkaart__info > * {
	margin: 0;
}

.yooker-productkaart .wp-block-post-title {
	font-weight: 700;
	line-height: 1.3;
}

.yooker-productkaart .wp-block-post-title a {
	color: var(--wp--custom--color--text--heading);
	text-decoration: none;
}

.yooker-productkaart .wp-block-post-title a:hover {
	color: var(--wp--custom--color--text--link);
}

.yooker-productkaart .wc-block-components-product-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 0.375rem;
	color: var(--wp--custom--color--text--heading);
	font-size: var(--wp--preset--font-size--s);
	font-weight: 700;
}

.yooker-productkaart .wc-block-components-product-price ins {
	text-decoration: none;
}

.yooker-productkaart .wc-block-components-product-price del {
	order: 1;
	flex-basis: 100%;
	color: var(--wp--custom--color--text--muted);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 400;
}

/* Voorraad als groen labeltje met rand */
.yooker-productkaart .wc-block-components-product-stock-indicator {
	margin-top: 0.25rem;
	padding: 0.125rem 0.5rem;
	border: 1px solid currentColor;
	border-radius: var(--wp--custom--radius--small);
}