/* =========================================================
   Blossom WooCommerce Customizations – Single product
   Geladen via is_product() (zie hoofdbestand).
   ========================================================= */


/* =========================================================
   Auteur in de hero (single product template)
   ========================================================= */

.author-no-image .blossom-author-image {
	display: none;
}

.author-no-image .blossom-author-name {
	color: #F2EDE6;
	text-decoration: underline;
}


/* =========================================================
   Variabel product – kleurkeuze
   ========================================================= */

/* 1. Formulier als grid: label | select (2 kolommen breed)
      rij 2: Wissen | Op voorraad */
.wp-block-add-to-cart-form form.variations_form {
	display: grid !important;
	grid-template-columns: auto auto 1fr;
	column-gap: 16px;
	row-gap: 8px;
	align-items: center;
	margin: 0 !important;
}

/* Wrappers "platslaan" zodat de inhoud grid-items worden.
   De tabel heeft role="presentation", dus er gaat geen semantiek verloren. */
.wp-block-add-to-cart-form form.variations_form table.variations,
.wp-block-add-to-cart-form form.variations_form table.variations tbody,
.wp-block-add-to-cart-form form.variations_form table.variations tr,
.wp-block-add-to-cart-form form.variations_form table.variations th,
.wp-block-add-to-cart-form form.variations_form table.variations td,
.wp-block-add-to-cart-form form.variations_form .single_variation_wrap,
.wp-block-add-to-cart-form form.variations_form .woocommerce-variation.single_variation {
	display: contents !important;
}

/* 2. Label "Kleur" */
.wp-block-add-to-cart-form .variations label[for] {
	grid-column: 1;
	grid-row: 1;
	margin: 0 !important;
	color: #E4E1DC !important;
	font-weight: 700;
	line-height: 1.2;
}

/* 3. Select in huisstijl – breedte past zich aan langste optie aan */
.wp-block-add-to-cart-form .variations select {
	grid-column: 2 / -1;
	grid-row: 1;
	justify-self: start;
	width: auto !important;
	max-width: 100%;
	margin: 0 !important;
	padding: 12px 44px 12px 16px !important;
	border: 1px solid #5D7975 !important;
	border-radius: 12px !important;
	background-color: transparent !important;
	color: #E4E1DC !important;
	font-size: 1rem;
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23E4E1DC' stroke-width='2'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 16px center !important;
	box-shadow: none !important;
	outline: none !important;
	cursor: pointer;
}

/* Opties in de uitklaplijst leesbaar houden (anders crème op wit) */
.wp-block-add-to-cart-form .variations select option {
	color: #0B1829;
	background: #FFFFFF;
}

/* Focus: geen dikke ring, rand licht op */
.wp-block-add-to-cart-form .variations select:hover,
.wp-block-add-to-cart-form .variations select:focus,
.wp-block-add-to-cart-form .variations select:focus-visible {
	border-color: #E4E1DC !important;
	outline: none !important;
	box-shadow: none !important;
}

/* 4. Wissen-link */
.wp-block-add-to-cart-form .reset_variations {
	grid-column: 2;
	grid-row: 2;
	justify-self: start;
	margin: 0 !important;
	color: #E4E1DC !important;
	font-size: 15px !important;
	font-weight: 400;
	line-height: 1.4;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wp-block-add-to-cart-form .reset_variations:hover {
	color: #FFFFFF !important;
}

/* 5. Op voorraad: naast Wissen, zelfde formaat */
.wp-block-add-to-cart-form .woocommerce-variation-availability {
	grid-column: 3;
	grid-row: 2;
	justify-self: start;
}

.wp-block-add-to-cart-form .woocommerce-variation-availability p.stock {
	margin: 0 !important;
	font-size: 15px !important;
	line-height: 1.4 !important;
	color: #DDE4E2 !important;
}

.wp-block-add-to-cart-form .woocommerce-variation-availability p.out-of-stock {
	color: #C28675 !important;
}

/* Voorraad verbergen zolang er geen variatie gekozen is */
.wp-block-add-to-cart-form .single_variation_wrap:has(.woocommerce-variation-add-to-cart-disabled) .woocommerce-variation-availability {
	display: none;
}

/* 6. Lege blokken weg (veroorzaken extra ruimte) */
.wp-block-add-to-cart-form .woocommerce-variation-description:empty,
.wp-block-add-to-cart-form .woocommerce-variation-price:empty {
	display: none !important;
}

.wp-block-add-to-cart-form .woocommerce-variation-description,
.wp-block-add-to-cart-form .woocommerce-variation-price {
	grid-column: 1 / -1;
}

/* 7. Aantal + knop: volle breedte eronder */
.wp-block-add-to-cart-form .woocommerce-variation-add-to-cart {
	grid-column: 1 / -1;
	margin-top: 16px;
}

/* Aantal-veld verbergen bij de winkelmandknop */
.single-add-to-cart .quantity {
	display: none !important;
}

/* 8. Mobiel: label boven de select, select volle breedte */
@media (max-width: 600px) {
	.wp-block-add-to-cart-form .variations label[for] {
		grid-column: 1 / -1;
		grid-row: 1;
	}
	.wp-block-add-to-cart-form .variations select {
		grid-column: 1 / -1;
		grid-row: 2;
		width: 100% !important;
		max-width: none;
	}
	.wp-block-add-to-cart-form .reset_variations {
		grid-column: 1;
		grid-row: 3;
	}
	.wp-block-add-to-cart-form .woocommerce-variation-availability {
		grid-column: 2 / -1;
		grid-row: 3;
	}
}


/* =========================================================
   Productgalerij – afbeelding verticaal gecentreerd
   WooCommerce zet height: 100% op de wrapper (in :where()), waardoor
   de afbeelding bovenin het vierkante 1:1-vak bleef staan. Met auto
   krijgt de wrapper de hoogte van de afbeelding en wordt die
   gecentreerd.
   ========================================================= */
.wc-block-product-gallery-large-image .wc-block-components-product-image {
	height: auto !important;
}


/* =========================================================
   Productgalerij – streepjes-navigatie ≤ 899px
   Thumbnails worden stipjes; de actieve een langer streepje.
   De stipjes liggen onderaan in de witte kaart.
   Het plaatje blijft onzichtbaar klikbaar, zodat de
   Interactivity API-actie (selectCurrentImage) blijft werken.
   Actief-status via de <img>: de class op <picture> komt van de
   WebP-plugin en wordt niet bijgewerkt bij wisselen.
   ========================================================= */
@media (max-width: 899px) {

	/* Galerij is het ankerpunt voor de streepjes */
	.wc-block-product-gallery {
		position: relative !important;
	}

	/* Thumbnail-balk: uit de flow, onderaan in de kaart.
	   -30px omdat de witte kaart (Greyd-wrapper) onder de galerij
	   nog padding heeft. */
	.wc-block-product-gallery .wc-block-product-gallery-thumbnails {
		position: absolute !important;
		left: 0;
		right: 0;
		bottom: -30px;
		z-index: 5;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		pointer-events: none; /* swipen op de foto blijft werken */
		mask-image: none !important;
	}

	.wc-block-product-gallery .wc-block-product-gallery-thumbnails::before,
	.wc-block-product-gallery .wc-block-product-gallery-thumbnails::after {
		display: none !important;
	}

	.wc-block-product-gallery .wc-block-product-gallery-thumbnails__scrollable {
		display: flex !important;
		flex-direction: row !important;
		justify-content: center;
		align-items: center;
		gap: 6px;
		height: auto !important;
		overflow: visible !important;
		padding: 0 !important;
	}

	/* Elke thumbnail wordt een stipje */
	.wc-block-product-gallery .wc-block-product-gallery-thumbnails__thumbnail {
		position: relative;
		flex: 0 0 auto !important;
		width: 8px !important;
		height: 8px !important;
		min-width: 0 !important;
		aspect-ratio: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 999px !important;
		background-color: rgba(194, 134, 117, 0.35);
		overflow: visible !important;
		pointer-events: auto; /* stipjes zelf blijven klikbaar */
		transition: width 0.2s ease, background-color 0.2s ease;
	}

	/* Actieve afbeelding: langer streepje */
	.wc-block-product-gallery .wc-block-product-gallery-thumbnails__thumbnail:has(img.wc-block-product-gallery-thumbnails__thumbnail__image--is-active) {
		width: 24px !important;
		background-color: #C28675;
	}

	/* Plaatje onzichtbaar maar klikbaar, met groter tikvlak */
	.wc-block-product-gallery .wc-block-product-gallery-thumbnails__thumbnail picture {
		position: absolute !important;
		inset: -10px -3px !important;
		width: auto !important;
		height: auto !important;
		margin: 0 !important;
		opacity: 0;
	}

	.wc-block-product-gallery .wc-block-product-gallery-thumbnails__thumbnail img {
		width: 100% !important;
		height: 100% !important;
		margin: 0 !important;
		border: 0 !important;
		cursor: pointer;
	}

	/* Actief-overlay van WooCommerce uitschakelen */
	.wc-block-product-gallery .wc-block-product-gallery-thumbnails__thumbnail::before,
	.wc-block-product-gallery .wc-block-product-gallery-thumbnails__thumbnail::after,
	.wc-block-product-gallery .wc-block-product-gallery-thumbnails__thumbnail picture::after {
		display: none !important;
	}

	/* Toetsenbordfocus zichtbaar op het stipje */
	.wc-block-product-gallery .wc-block-product-gallery-thumbnails__thumbnail:has(img:focus-visible) {
		outline: 2px solid #C28675;
		outline-offset: 3px;
	}
}

/* ==========================================================================
   Groene achtergrond achter de product-hero (.sing-prod-bg)

   Structuur in Greyd: group .pos-relative met daarin een lege group
   .sing-prod-bg (het groene vlak) en de Columns (foto | titel t/m knop).

   Desktop: het groen eindigt altijd halverwege de "In winkelwagen"-knop,
   ook als er knoppen (paperback/hardback/kleur) bij komen. Het groen is een
   ::before op de Columns, in dezelfde grid-rij als de group met titel t/m
   knop, en wordt met --prod-overlap ingekort tot halverwege de knop.
   Mobiel: absoluut gepositioneerde .sing-prod-bg met vaste inset-waarden.
   ========================================================================== */
@media (min-width: 900px) {

	/* Het losse groene block is op desktop niet nodig: het groen komt uit ::before */
	.pos-relative > .sing-prod-bg {
		display: none !important;
	}

	.pos-relative:has(> .sing-prod-bg) > .wp-block-columns {
		--prod-pad: clamp(24px, 7vw, 110px);   /* ruimte links/rechts in het groen */
		--prod-gap: clamp(32px, 7vw, 110px);   /* ruimte tussen foto en tekst */
		--prod-top: 48px;                      /* foto en titel onder de bovenrand */
		--prod-overlap: 93px;                  /* simpel product: tot halverwege de knop */

		display: grid !important;
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-rows: auto repeat(10, auto) 1fr;
		column-gap: var(--prod-gap) !important;
		row-gap: 0 !important;
		align-items: start;
		isolation: isolate;
		margin-top: 0 !important;
		padding: 0 var(--prod-pad) !important;
	}

	/* Variabel product: minder ruimte onder de knop */
	body:has(form.variations_form) .pos-relative:has(> .sing-prod-bg) > .wp-block-columns {
		--prod-overlap: 57px;
	}

	/* Groen vlak: zelfde rij als de titel t/m de knop, stopt halverwege de knop */
	.pos-relative:has(> .sing-prod-bg) > .wp-block-columns::before {
		content: "";
		grid-column: 1 / -1;
		grid-row: 1;
		align-self: stretch;
		margin: 0 calc(-1 * var(--prod-pad)) var(--prod-overlap);
		background-color: var(--wp--preset--color--primary, #3D6459);
		border-radius: 24px;
		z-index: -1;
	}

	/* Fotokolom: over alle rijen, zodat de foto onder het groen uitsteekt */
	.pos-relative:has(> .sing-prod-bg) > .wp-block-columns > .wp-block-column:first-child {
		grid-column: 1;
		grid-row: 1 / -1;
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
		padding-top: var(--prod-top);
	}

	/* Tekstkolom: blocks worden zelf grid-items */
	.pos-relative:has(> .sing-prod-bg) > .wp-block-columns > .wp-block-column:last-child {
		display: contents !important;
	}

	/* Titel t/m knop: rij 1 (bepaalt de hoogte van het groen) */
	.pos-relative:has(> .sing-prod-bg) > .wp-block-columns > .wp-block-column:last-child > :first-child {
		grid-column: 2;
		grid-row: 1;
		margin: 0 !important;
		padding-top: var(--prod-top) !important;
	}

	/* Alles daarna (bijv. "of koop via onze partners") onder het groen */
	.pos-relative:has(> .sing-prod-bg) > .wp-block-columns > .wp-block-column:last-child > :not(:first-child) {
		grid-column: 2;
	}
}

/* Mobiel (≤ 899px) */
@media (max-width: 899px) {

	.pos-relative:has(> .sing-prod-bg) {
		position: relative;
		isolation: isolate;
	}

	.sing-prod-bg {
		position: absolute !important;
		margin: 0 !important;
		padding: 0 !important;
		z-index: -1;
		inset: 70px 0 110px 0;   /* alle producttypes */
		height: unset;
	}

	/* Variabel product: geen aparte inset meer. De ruimte onder de knop is
	   overal gelijk (zie "Partnerlinks onder de winkelmandknop"). */

	/* Tablet (782–899px): WordPress stapelt Columns pas onder 782px, maar
	   de hero-CSS gaat al onder 900px naar de mobiele opbouw. Daartussen
	   stonden foto en tekst nog naast elkaar met het mobiele groen erachter.
	   Hier dus ook stapelen, zodat layout en groen hetzelfde breekpunt hebben. */
	.pos-relative:has(> .sing-prod-bg) > .wp-block-columns {
		flex-wrap: wrap !important;
	}

	.pos-relative:has(> .sing-prod-bg) > .wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* ==========================================================================
   Productafbeelding en galerij (desktop)
   Overgenomen uit Extra CSS.
   ========================================================================== */
:where(.wc-block-product-gallery-large-image):has(.wc-block-components-product-image--aspect-ratio-auto) {
	aspect-ratio: 1 / 1;
	height: 371px;
	border: 10px solid #fff;
	border-radius: 24px;
	background-image: url('/wp-content/uploads/2026/06/Background-Image-Product-Image.png');
	padding: 24px;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

:where(.wc-block-product-gallery-large-image) .wc-block-components-product-image.wc-block-components-product-image.wc-block-components-product-image--aspect-ratio-auto img {
	object-fit: contain !important;
	height: 268px;
}

:where(.is-vertical .wc-block-product-gallery-thumbnails) :where(.wc-block-product-gallery-thumbnails__thumbnail) {
	padding: 15px;
	background: rgba(255, 255, 255, 0.75);
	border-radius: 8px;
}

.wc-block-next-previous-buttons__button {
	display: none;
}

/* --- Thumbnails: Safari-fix (desktop) ---
   Safari rekent de hoogte van de thumbnails (aspect-ratio + procentuele
   hoogte binnen flexbox) anders uit: de thumbnail werd te laag en de
   afbeelding afgeknipt. Vaste verhouding + afbeelding gecentreerd via
   object-fit/object-position.
   Let op: géén display op de thumbnail zelf zetten. WooCommerce verbergt
   thumbnails van niet-gekozen variaties met display: none; een display-regel
   met !important maakt die weer zichtbaar (en niet klikbaar).
   <picture> komt van de WebP-plugin en is standaard inline. */
@media (min-width: 900px) {
	.wc-block-product-gallery .wc-block-product-gallery-thumbnails__thumbnail {
		height: auto !important;
		aspect-ratio: 1 / 1 !important;
	}

	.wc-block-product-gallery .wc-block-product-gallery-thumbnails__thumbnail picture {
		display: block !important;
		width: 100% !important;
		height: 100% !important;
	}

	.wc-block-product-gallery .wc-block-product-gallery-thumbnails__thumbnail img {
		display: block !important;
		width: 100% !important;
		height: 100% !important;
		object-fit: contain !important;
		object-position: center !important;
	}

	/* Fade-rand (mask) van de thumbnail-balk uit: gaf in Safari een vage/afgeknipte rand */
	.wc-block-product-gallery .wc-block-product-gallery-thumbnails {
		-webkit-mask-image: none !important;
		mask-image: none !important;
	}
}

/* ==========================================================================
   Specificaties (product meta)
   Overgenomen uit Extra CSS.
   ========================================================================== */
.wp-block-woocommerce-product-meta,
.wp-block-woocommerce-product-meta a {
	font-size: 15px !important;
}

.wc-block-components-product-sku {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

/* ==========================================================================
   Kolom met partnerlinks ("of koop via een van onze partners")
   Op mobiel/tablet de volgorde omdraaien. Overgenomen uit Extra CSS.
   ========================================================================== */
@media (max-width: 920px) {
	.partners-col-left {
		order: 1 !important;
	}
}

/* ==========================================================================
   Partnerlinks onder de winkelmandknop
   (geplaatst door includes/affiliate-links-placement.php, binnen het
   woocommerce/add-to-cart-form blok)

   - Absoluut: neemt geen ruimte in, dus het groene vlak blijft halverwege
     de knop eindigen en het open paneel ligt over de content eronder.
   - Links uitgelijnd met de knop; de breedte van het blok blijft ongemoeid
     (width: fit-content centreerde de knop in de Greyd-grid).
   ========================================================================== */
.wp-block-add-to-cart-form:has(> .blossom-partners) {
	position: relative;
}

.wp-block-add-to-cart-form > .blossom-partners {
	position: absolute !important;
	top: calc(100% + 12px);
	left: 0;
	width: 289px;
	max-width: calc(100vw - 32px);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	z-index: 20;
}

.wp-block-add-to-cart-form > .blossom-partners .blossom-partners__toggle {
	white-space: nowrap;
}

.wp-block-add-to-cart-form > .blossom-partners .blossom-partners__panel {
	box-shadow: 0 14px 20px 0 rgba(11, 24, 41, 0.08);
}

/* Open paneel boven de USP-balk.
   De hero (.pos-relative) en de Columns hebben isolation: isolate, dus een
   z-index op de partners zelf komt niet boven secties die later in de DOM
   staan. Daarom de hele hero één laag hoger zetten, alleen zolang het
   paneel open is (zo blijft een sticky header er gewoon boven). */
.pos-relative:has(.blossom-partners[open]) {
	position: relative;
	z-index: 2;
}

/* Mobiel/tablet (≤ 899px): het groen (.sing-prod-bg) staat op een vaste
   afstand (110px) van de onderkant van .pos-relative. Dat klopt alleen als
   er onder de knop altijd evenveel ruimte zit. Daarom krijgt het
   winkelmandblok in de hero ALTIJD dezelfde marge: met of zonder
   partnerlinks, met of zonder edities, simpel of variabel. De partners
   (absoluut) vallen in die marge.
   Meer ruimte = groen loopt verder door achter de knop.
   Klopt de knop niet meer op de rand: alleen deze waarde bijstellen. */
@media (max-width: 899px) {
	.pos-relative:has(> .sing-prod-bg) .wp-block-add-to-cart-form {
		margin-bottom: var(--blossom-partners-space, 54px) !important;
	}

	.pos-relative:has(> .sing-prod-bg) .wp-block-add-to-cart-form form.cart {
		margin-bottom: 0 !important;
	}
}