/*
 * Productpagina (templates/single-product.html). Rustig en voorspelbaar: hier
 * komt het geld binnen. Geen loader, geen tekstanimaties.
 */

.boozt-product {
	padding-top: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--60);
}

.boozt-product__kruimel {
	color: var(--wp--preset--color--ink-muted, #6b5a52);
	margin-bottom: var(--wp--preset--spacing--40);
}

.boozt-product__top {
	gap: clamp(1.5rem, 4vw, 4rem);
}

/* ------------------------------------------------------------ galerij */
/* Zie galerij.css (Osmo parallax-galerij, shortcode [vino2_galerij]). */

/* --------------------------------------------------------------- koop */

.boozt-product__titel {
	font-size: var(--wp--preset--font-size--xxl);
	margin: 0 0 0.5rem;
}

.boozt-product__prijs {
	font-weight: 700;
	color: var(--wp--preset--color--ink, #1b0b09);
	margin: 0.25rem 0 1rem;
}

.boozt-product__prijs .woocommerce-Price-amount {
	font-size: var(--wp--preset--font-size--xl);
}

.boozt-product__kort {
	font-size: var(--wp--preset--font-size--lg);
	color: var(--wp--preset--color--ink-muted, #6b5a52);
	margin-bottom: 1.5rem;
}

.boozt-product__koop .boozt-usps {
	margin-bottom: 1.75rem;
}

/* Bestelformulier: aantal + knop op één regel, knop in de stijl van [vino2_knop]. */
.boozt-product__koop form.cart {
	display: flex;
	align-items: stretch;
	gap: 0.75rem;
	margin: 0 0 1rem;
}

.boozt-product__koop form.cart .quantity {
	display: flex;
}

.boozt-product__koop form.cart .qty {
	width: 4.5rem;
	height: 100%;
	min-height: 3.25rem;
	padding: 0 0.5rem;
	border: 1px solid var(--wp--preset--color--ink, #1b0b09);
	border-radius: 2.5em;
	background: transparent;
	font: inherit;
	font-weight: 600;
	text-align: center;
	color: var(--wp--preset--color--ink, #1b0b09);
}

/* Toevoegen aan winkelwagen: bordeaux, hover nacht (17-09, Victor: omgedraaid t.o.v. de andere
   knoppen — de koopknop springt eruit). Zelfde knop op het productkaartje in shop.css. */
.boozt-product__koop .single_add_to_cart_button {
	flex: 1;
	min-height: 3.25rem;
	padding: 0.85em 1.35em;
	border: 1px solid var(--wp--preset--color--wine, #70041c);
	border-radius: 2.5em;
	background-color: var(--wp--preset--color--wine, #70041c);
	color: var(--wp--preset--color--cream, #ebe0d6);
	font: inherit;
	font-size: 1.0625rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.boozt-product__koop .single_add_to_cart_button:hover,
.boozt-product__koop .single_add_to_cart_button:focus-visible {
	background-color: var(--wp--preset--color--ink, #1b0b09);
	border-color: var(--wp--preset--color--ink, #1b0b09);
	color: var(--wp--preset--color--cream, #ebe0d6);
}

.boozt-product__koop .single_add_to_cart_button.disabled {
	opacity: 0.5;
	cursor: default;
}

.boozt-product__koop .woocommerce-product-rating {
	margin: 0 0 0.5rem;
}

/* Sterren onder de titel: link naar #reviews (inc/beoordelingen.php), dicht onder de titel
   in plaats van de standaard blokruimte (24px). Bordeaux, zoals in de beoordelingssectie. */
.boozt-product__koop > .boozt-product__sterren {
	display: inline-flex;
	margin-block-start: 0.1rem;
	color: var(--wp--preset--color--wine, #70041c);
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.boozt-product__koop > .boozt-product__sterren .wp-block-woocommerce-product-rating {
	margin: 0;
}

.boozt-product__koop > .boozt-product__sterren .wc-block-components-product-rating__stars {
	color: inherit;
}

.boozt-product__koop > .boozt-product__sterren:hover {
	opacity: 0.7;
}

.boozt-product__koop > .boozt-product__sterren:focus-visible {
	border-radius: 0.25rem;
}

/* Doel van de sterrenlink: niet onder de plakkende balk verdwijnen. */
#reviews {
	scroll-margin-top: calc(var(--vino2-bar-h, 4.5rem) + 1.5rem);
}

/* ---------------------------------------------------------- secties */

.boozt-product__hotspot .hotspot-hero {
	padding-top: var(--wp--preset--spacing--60);
}

.boozt-product__tekst,
.boozt-product__vergelijking,
.boozt-product__reviews {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--60);
}

.boozt-product__faq {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--60);
}

.boozt-product__faq h2 {
	margin-bottom: var(--wp--preset--spacing--40);
}

/* ------------------------------------------------------------ mobiel */

@media (max-width: 781px) {
	.boozt-product {
		padding-top: var(--wp--preset--spacing--30);
	}

	/* Aantal en knop naast elkaar, ook op mobiel (15-09, Victor). De knoptekst mag niet
	   afbreken: dan rekt het aantalveld (stretch) mee tot een ei. Past hij echt niet
	   (schermen < ±340px), dan valt de knop als geheel naar de volgende regel. */
	.boozt-product__koop form.cart {
		flex-wrap: wrap;
	}

	/* Hoge specificiteit: WooCommerce zet `.woocommerce div.product form.cart div.quantity
	   { margin: 0 4px 0 0 }` (0,3,3) en `.woocommerce .quantity .qty` (0,3,0); die 4px
	   marge duwde de knop nét naar de volgende regel. */
	.woocommerce-page .boozt-product .boozt-product__koop form.cart div.quantity {
		margin: 0;
	}

	/* WooCommerce's clearfix (`form.cart::before/::after { display: table }`) wordt in een
	   flexbox twee extra items met elk een gap van 12px — net genoeg om de knop naar
	   de volgende regel te duwen. */
	.woocommerce-page .boozt-product .boozt-product__koop form.cart::before,
	.woocommerce-page .boozt-product .boozt-product__koop form.cart::after {
		content: none;
		display: none;
	}

	.boozt-product__koop form.cart .quantity .qty {
		width: 3rem;
	}

	.boozt-product__koop .single_add_to_cart_button {
		flex: 1 1 auto;
		white-space: nowrap;
		padding: 0.85em 0.7em;
		font-size: 0.875rem;
	}
}

/* Cadeaulink onder de koopknop ([vino2_cadeau_link], inc/landing.php). */
.boozt-product__koop .boozt-product__cadeau {
	margin: 0.25rem 0 0;
	font-size: 0.875rem;
	color: var(--wp--preset--color--ink-muted, #6b5a52);
}

.boozt-product__cadeau a {
	font-weight: 600;
	color: var(--wp--preset--color--wine, #70041c);
}