/* =============================================================================
   Hinke. Trendstore — productpagina.

   1:1 met Figma "Productpagina" (node 2217:5790), plus de sale-variant
   (2196:2008) en de twee "toevoegen"-states (2217:6895 / 2197:959).

   Kolommen binnen de 1320px-container:
     gallery  x=299…949  (650 = thumb 97 + 15 + hoofdbeeld 538)
     tussenruimte 112
     samenvatting x=1061…1605 (544)

   MOBIEL: het ontwerp bestaat alleen op 1920 — frame "Productpagina "
   (2217:5790) is 1920×3460 en er is in het bestand geen smalle variant van deze
   pagina. Alles onder de 1400px is dus een vertaling; bij elke keuze in het
   RESPONSIVE-blok onderaan staat waaróm. De maten uit het ontwerp die met een
   vinger te maken hebben (swatch 42×42 en 43×43, hartje 21×21) blijven visueel
   staan; alleen hun aanraakvlak wordt opgerekt naar 44×44 (WCAG 2.5.8).
   ========================================================================== */

.hinke-product__top {
	padding-top: 42px; /* header eindigt 150 → breadcrumb y=192 */
}

/* --- Breadcrumb ----------------------------------------------------------- */

.hinke-crumb,
.woocommerce .hinke-crumb {
	margin: 0;
	padding: 0;
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 18px;
	color: var(--hinke-ink);
	/* Op 360px is de kruimelpad-regel 312px breed; een lange categorie- of
	   productnaam zonder spatie zou hem anders buiten het scherm duwen. Breekt
	   alleen als het écht niet past, dus op desktop verandert er niets. */
	overflow-wrap: break-word;
}

/* 18px hoog → 24px aanraakvlak (WCAG 2.5.8 AA) met een onzichtbaar vlak van 3px
   boven en onder, zoals de hamburger en de menu-items in layout.css. Alleen
   verticaal: het scheidingsteken ernaast is maar 8px marge breed, dus zijwaarts
   uitbreiden zou de kruimels elkaar laten overlappen.

   Een kruimelpad is geen "zin of tekstblok", dus de uitzondering die 2.5.8 voor
   tekstlinks maakt gaat hier niet op — het is navigatie. */
.hinke-crumb a {
	position: relative;
	color: inherit;
	text-decoration: none;
}

.hinke-crumb a::after {
	content: '';
	position: absolute;
	top: -3px;
	right: 0;
	bottom: -3px;
	left: 0;
}

.hinke-crumb a:hover {
	text-decoration: underline;
}

.hinke-crumb__sep {
	display: inline-block;
	margin: 0 8px;
}

/* --- Layout -------------------------------------------------------------- */

.hinke-product__layout {
	display: grid;
	grid-template-columns: 650px 544px;
	column-gap: 112px;
	margin-top: 29px; /* breadcrumb eindigt 210 → gallery y=239 */
	align-items: start;
}

/* --- Gallery ------------------------------------------------------------- */

.hinke-gallery {
	display: grid;
	grid-template-columns: 97px 538px;
	column-gap: 15px;
	align-items: start;
}

.hinke-gallery__thumbs {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.hinke-gallery__thumb {
	display: block;
	width: 97px;
	height: 129px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	overflow: hidden;
	line-height: 0;
}

.hinke-gallery__thumb img {
	width: 97px;
	height: 129px;
	object-fit: cover;
	display: block;
}

.hinke-gallery__thumb.is-active {
	outline: 2px solid var(--hinke-pink);
	outline-offset: -2px;
}

/* Hoofdbeeld 538×657 — crop-to-fill, vierkante hoeken. */
.hinke-gallery__main {
	width: 538px;
	height: 657px;
	overflow: hidden;
	background: var(--hinke-pink);
}

.hinke-gallery__main img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --- Samenvatting -------------------------------------------------------- */

.hinke-summary {
	padding-top: 28px; /* gallery y=239 → titel y=267 */
}

/* Sale-badge 54×26 boven de titel (schuift de kolom 16px op, net als in het ontwerp). */
.hinke-summary__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 26px;
	margin-bottom: 6px;
	background: var(--hinke-sale);
	color: var(--hinke-white);
	font-family: var(--hinke-font-body);
	font-weight: 800;
	font-size: 10px;
	line-height: 1;
	text-transform: uppercase;
}

.hinke-summary__title {
	margin: 0;
	font-family: var(--hinke-font-body);
	font-weight: 700;
	font-size: 40px;
	line-height: 50px;
	text-transform: uppercase;
	color: var(--hinke-body);
	/* Vangnet voor een lange naam zonder spatie (artikelcode, merknaam-met-streep):
	   op 360px is de kolom 312px. Breekt alleen wanneer het niet past. */
	overflow-wrap: break-word;
}

/* Prijs 25px; bij sale staat de oude prijs doorgestreept op 20px ervoor. */
.hinke-summary__price {
	margin-top: 19px;
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 25px;
	line-height: 32px;
	color: var(--hinke-body);
}

.hinke-summary__price del {
	font-size: 20px;
	color: var(--hinke-body);
	text-decoration: line-through;
	text-decoration-skip-ink: none;
	margin-right: 10px;
}

.hinke-summary__price ins {
	font-size: 25px;
	color: var(--hinke-sale);
	text-decoration: none;
}

/* USP's: twee kolommen, hartje 15×15 + tekst op 7px afstand. */
.hinke-summary__usps {
	display: grid;
	grid-template-columns: 246px auto;
	gap: 0 0;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

.hinke-summary__usps li {
	display: flex;
	align-items: center;
	gap: 7px;
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 17px;
	color: var(--hinke-body);
}

.hinke-summary__usps img {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
}

.hinke-summary__rule {
	height: 1px;
	margin: 25px 0 0;
	border: 0;
	background: var(--hinke-line);
}

/* --- Maten & kleuren (WooCommerce-variatietabel) ------------------------- */

.hinke-summary .variations {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	display: block;
}

.hinke-summary .variations tbody,
.hinke-summary .variations tr {
	display: block;
}

.hinke-summary .variations th,
.hinke-summary .variations td {
	display: block;
	padding: 0;
	border: 0;
	text-align: left;
}

/* "Kies een maat:" / "Kies een kleur:"
   Verticale keten uit het ontwerp, vanaf de scheidingslijn op y=442:
     lijn 443 → label1 +25 = 468 (h18) → maten +13 = 498
     maten eindigen 540 → label2 +20 = 560 (h18) → kleuren +9 = 587
     kleuren eindigen 630 → knop +29 = 659
   Vandaar een basis-margin van 20 boven, met 25 voor de eerste rij. */
.hinke-summary .variations .label label {
	display: block;
	margin: 20px 0 13px;
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 18px;
	color: var(--hinke-body);
}

.hinke-summary .variations tr:first-child .label label {
	margin-top: 25px;
}

.hinke-summary .variations tr:nth-child(2) .label label {
	margin-bottom: 9px;
}

/* Maat-swatches 42×42 met 6px ertussen (groter dan de 27×27 in de loop). */
.hinke-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.hinke-swatch {
	position: relative; /* draagt het aanraakvlak hieronder */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: 0;
	background: var(--hinke-pink);
	color: var(--hinke-white);
	font-family: var(--hinke-font-ui);
	font-weight: 400;
	font-size: 17px;
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
	/* Een tik op een swatch mag nooit als "tekst selecteren" of "vergroten"
	   beginnen; anders wisselt de maat pas na de tweede tik. */
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

/* Aanraakdoel 44×44 (WCAG 2.5.8) zónder het ontwerp aan te tasten: het blokje
   blijft zichtbaar 42×42 (kleur 43×43), een onzichtbare ::after rekt alleen het
   aanraakvlak 1px op — dus 44×44 resp. 45×45. Dit past binnen de tussenruimte
   uit het ontwerp (maten 6px, kleuren 10px), zodat de vlakken elkaar niet
   overlappen: er blijft 4px resp. 8px tussen. Geen media-query nodig, want er
   verandert visueel niets: ook op desktop is een groter doel alleen winst. */
.hinke-swatch::after {
	content: '';
	position: absolute;
	top: -1px;
	right: -1px;
	bottom: -1px;
	left: -1px;
}

.hinke-swatch.is-selected {
	outline: 2px solid var(--hinke-ink);
	outline-offset: 0;
}

.hinke-swatch[disabled],
.hinke-swatch.is-unavailable {
	opacity: .45;
	text-decoration: line-through;
	cursor: not-allowed;
}

/* Kleur-swatches 43×43 ROND, 10px ertussen; gekozen = 2px zwarte ring. */
.hinke-swatches--kleur {
	gap: 10px;
}

.hinke-swatches--kleur .hinke-swatch {
	width: 43px;
	height: 43px;
	border-radius: 100px;
	background: var(--hinke-swatch, var(--hinke-pink));
	font-size: 0;
}

.hinke-swatches--kleur .hinke-swatch.is-selected {
	border: 2px solid var(--hinke-ink);
	outline: 0;
}

/* WooCommerce' eigen select verbergen wanneer we swatches tonen. */
.hinke-summary .variations select {
	width: 100%;
	max-width: 544px;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--hinke-line);
	border-radius: 0;
	background: var(--hinke-white);
	font-family: var(--hinke-font-body);
	font-size: 14px;
	color: var(--hinke-body);
}

/* WooCommerce toont bij een variabel product een tweede prijs (en voorraadregel)
   tussen de swatches en de knop. Het ontwerp heeft maar één prijs — bovenaan —
   dus we halen dit blok uit de layout; assets/js/hinke.js spiegelt de gekozen
   variatieprijs naar `.hinke-summary__price`, zodat de prijs wél meebeweegt.
   In de DOM laten staan: WooCommerce schrijft erin. */
.woocommerce .hinke-summary .woocommerce-variation-price,
.woocommerce .hinke-summary .woocommerce-variation-availability {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Eén uitzondering: "Niet op voorraad" moet je wél kunnen lezen.
   inc/variation-swatches.php streept een uitverkochte maat door, zodat je die
   normaal niet eens kunt kiezen. Maar bij veel variaties haalt WooCommerce zijn
   variatiedata via AJAX op (`data-product_variations` ontbreekt dan) en heeft die
   JS geen voorraadinfo; dan is deze regel het enige wat vertelt waarom de knop
   niet werkt. "Op voorraad" blijft verborgen — dat staat niet in het ontwerp.
   `:has()` ontbreekt in oudere browsers; die houden simpelweg de regel hierboven. */
.woocommerce .hinke-summary .woocommerce-variation-availability:has(.out-of-stock) {
	position: static;
	width: auto;
	height: auto;
	margin-top: 14px;
	overflow: visible;
	clip-path: none;
	white-space: normal;
}

.woocommerce .hinke-summary .woocommerce-variation-availability .stock {
	margin: 0;
	font-family: var(--hinke-font-body);
	font-weight: 500;
	font-size: 14px;
	line-height: 18px;
	color: var(--hinke-sale);
}

/* WooCommerce' `.woocommerce div.product form.cart .variations` (0,4,2) zet
   margin-bottom: 1em; die 16px zit tussen de kleuren en de knop en hoort er niet.
   Vijf classes nodig om te winnen. */
.woocommerce div.product .hinke-summary form.cart .variations {
	margin-bottom: 0;
}

/* De "Wissen"-link staat niet in het ontwerp én stond met visibility:hidden
   alsnog 40px in de rij te duwen. Uit de flow, maar bereikbaar voor
   screenreaders — net als de variatieprijs hierboven. */
.hinke-summary .reset_variations {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	font-family: var(--hinke-font-body);
	font-size: 13px;
	color: var(--hinke-muted);
}

/* --- Toevoegen aan winkelwagen ------------------------------------------- */

/* Aantal-veld staat niet in het ontwerp (node 2217:5790) — en dat is serverkant
   geregeld: `woocommerce_is_sold_individually` in inc/product.php maakt min == max
   == 1, waardoor WooCommerce zelf een `type="hidden"`-input rendert. Wat overblijft
   is de lege `div.quantity`-wrapper (met een screenreader-label voor de hidden
   input erin); WooCommerce geeft die een float + margin, dus die halen we hier uit
   de layout. Dit verbergt géén bruikbaar veld — dat bestaat niet meer. */
.hinke-summary form.cart .quantity {
	display: none;
}

/* Het formulier sluit direct op de scheidingslijn aan; de 29px ruimte hoort
   vóór de knop te staan (bij een variabel product komen de maat-/kleurkiezers
   er nog tussen).
   `div.product` erbij: WooCommerce' `.woocommerce div.product form.cart` is
   (0,3,2) en verslaat (0,3,1) op de type-selector — die margin-bottom van 2em
   duwde de verlanglijst-link en het accordeon 32px omlaag. */
.woocommerce div.product .hinke-summary form.cart {
	margin: 0;
}

.woocommerce .hinke-summary .single_add_to_cart_button,
.woocommerce .hinke-summary button.button.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 29px; /* kleuren eindigen 630 → knop y=659 */
	gap: 19px;
	width: 375px;
	max-width: 100%;
	height: 53px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--hinke-gold);
	color: var(--hinke-white);
	font-family: var(--hinke-font-body);
	font-weight: 800;
	font-size: 14px;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	cursor: pointer;
}

.woocommerce .hinke-summary .single_add_to_cart_button:hover {
	background: var(--hinke-gold);
	filter: brightness(.95);
}

/* Winkelwagen-icoon 21×21 vóór het label. */
.woocommerce .hinke-summary .single_add_to_cart_button::before {
	content: '';
	width: 21px;
	height: 21px;
	background: currentColor;
	-webkit-mask: url('../../img/icons/bag.svg') no-repeat center / contain;
	mask: url('../../img/icons/bag.svg') no-repeat center / contain;
}

/* --- Verlanglijst-knop (core-markup, hartje + label uit inc/product.php) --

   Ontwerp-keten in de rechterkolom:
     knop "toevoegen aan winkelwagen" eindigt 712
     hartje  21×21 op x=1061, y=729.89   (node 2217:6670) → 18px eronder
     tekst   x=1092,  y=731.89, h=18     (node 2217:6686) → 10px naast het hartje
   Hartje en tekst staan met hun middens op 740.4 / 740.9, dus verticaal
   gecentreerd (align-items: center) — geen aparte offsets nodig.        */

.hinke-summary .sellabees-wish-btn {
	position: relative; /* draagt het aanraakvlak hieronder */
	display: inline-flex;
	align-items: center;
	gap: 10px; /* 1092 − (1061 + 21) */
	margin-top: 18px; /* 729.89 − 712 */
	padding: 0;
	border: 0;
	background: none;
	color: var(--hinke-body); /* #4e4e4e, node 2217:6686 */
	font-family: var(--hinke-font-body);
	font-weight: 500; /* Outfit Medium */
	font-size: 14px;
	line-height: 18px;
	text-align: left;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

/* Hartje + label zijn samen maar 21px hoog — onder de 24px die WCAG 2.5.8 als
   ondergrens stelt. Twee pixels lucht boven en onder maken het aanraakvlak 25px
   zonder dat er iets verschuift: de ::after staat absoluut. Op ≤1024px wordt de
   knop zelf 44px hoog (zie RESPONSIVE); daar komt dit er nog bij.
   De ruimte eromheen is groot genoeg: 18px naar de knop erboven, 25px naar het
   accordeon eronder — niets gaat overlappen. */
.hinke-summary .sellabees-wish-btn::after {
	content: '';
	position: absolute;
	top: -2px;
	right: 0;
	bottom: -2px;
	left: 0;
}

/* Hartje 21×21 uit de huisstijl (icons/heart.svg = de Figma-export van node
   2217:6670). Het glyph vult daarmee de volle 21px; de generieke core-SVG zit in
   een 24×24-viewBox en werd optisch maar ~17×15 groot — vandaar de wens "hartje
   moet wat groter". Via een mask kleurt hij mee met de knop. */
.hinke-summary .hinke-wish__icon {
	flex: 0 0 auto;
	display: block;
	width: 21px;
	height: 21px;
	background: currentColor;
	-webkit-mask: url('../../img/icons/heart.svg') no-repeat center / contain;
	mask: url('../../img/icons/heart.svg') no-repeat center / contain;
}

/* Staat het product op de lijst: alléén het hartje wordt sale-rood (net als in de
   winkelwagen). De tekst blijft #4e4e4e, zoals in het ontwerp. */
.hinke-summary .sellabees-wish-btn.is-active .hinke-wish__icon {
	background: var(--hinke-sale);
}

/* Label naast het hartje. Beide teksten staan in de DOM (inc/product.php); deze
   twee regels laten de tekst met exact dezelfde `is-active`-class meebewegen die
   de core-JS na een toggle op de knop zet. Zonder JS in het child dus. */
.hinke-summary .hinke-wish__label-on {
	display: none;
}

.hinke-summary .sellabees-wish-btn.is-active .hinke-wish__label-off {
	display: none;
}

.hinke-summary .sellabees-wish-btn.is-active .hinke-wish__label-on {
	display: inline;
}

/* Terugval: draait de filter uit inc/product.php niet, dan houdt de core-SVG
   tenminste de juiste maat en kleur. */
.hinke-summary .sellabees-wish-btn__icon {
	width: 21px;
	height: 21px;
	fill: none;
	stroke: currentColor;
}

.hinke-summary .sellabees-wish-btn.is-active .sellabees-wish-btn__icon {
	fill: var(--hinke-sale);
	stroke: var(--hinke-sale);
}

/* --- Accordeon ----------------------------------------------------------- */

.hinke-acc {
	margin-top: 25px;
}

.hinke-acc__item {
	border-top: 1px solid var(--hinke-line);
}

.hinke-acc__item:last-child {
	border-bottom: 1px solid var(--hinke-line);
}

.hinke-acc__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	/* rijhoogte 58: label staat 20px onder de lijn */
	padding: 20px 0;
	font-family: var(--hinke-font-body);
	font-weight: 800;
	font-size: 14px;
	line-height: 18px;
	color: var(--hinke-body);
	cursor: pointer;
	list-style: none;
}

.hinke-acc__head::-webkit-details-marker {
	display: none;
}

/* Plus-icoon 11×11, rechts uitgelijnd; wordt een min als het item open staat. */
.hinke-acc__icon {
	position: relative;
	flex: 0 0 auto;
	width: 11px;
	height: 11px;
}

.hinke-acc__icon::before,
.hinke-acc__icon::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 11px;
	height: 1.5px;
	background: currentColor;
	transform: translateY(-50%);
}

.hinke-acc__icon::after {
	transform: translateY(-50%) rotate(90deg);
	transition: opacity .15s ease;
}

.hinke-acc__item[open] .hinke-acc__icon::after {
	opacity: 0;
}

.hinke-acc__body {
	padding: 0 0 20px;
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 24px;
	color: var(--hinke-body);
}

/* =============================================================================
   "Shop the look" — full-bleed band 1920×833 op y=994, #f5f5f5
   ========================================================================== */

/* De hoogte van dit blok wordt bepaald door de gallery (239 + 657 = 896), niet
   door de samenvattingskolom — vandaar 98px tot de band op y=994. */
.hinke-look {
	margin-top: 98px;
	padding: 68px 0 0;
	min-height: 833px;
	background: var(--hinke-band);
}

.hinke-look__title {
	margin: 0;
	font-family: var(--hinke-font-heading);
	font-weight: 400;
	font-size: 40px;
	line-height: 55px;
	color: var(--hinke-pink);
}

/* Kaarten 314×526 met 22px ertussen — zelfde maten als de homepage-carrousel,
   maar hier een statische rij (geen pijlen in het ontwerp). */
/* Dezelfde rekenval als bij de linkrij en het FAQ-raster: het ontwerp zet vier
   kaarten van 314 met 22px ertussen = 1322, twee pixels breder dan de eigen
   container van 1320. Met vaste kolommen van 314 paste de vierde kaart net niet
   en viel die naar een tweede rij — waardoor de "Shop the look"-band 1402 hoog
   werd in plaats van de ontworpen 833. Vier 1fr-kolommen houden de 22px
   tussenruimte exact en maken elke kaart 313,5: die halve pixel is
   ontwerp-afronding, de tweede rij was een echte fout. */
.hinke-look__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
	margin: 29px 0 0;
	padding: 0;
	list-style: none;
}

/* =============================================================================
   "€5 korting voor jou!" — nieuwsbriefband (Figma "Component 4")

   Zelfde band als op de homepage: markup uit template-parts/home/nieuwsbrief.php,
   opmaak uit `.hinke-promo*` in layout.css. Hier alleen de afstand, want die
   verschilt per pagina:
     home           lookbook-beelden eindigen 4385 → band y=4454  (69px, layout.css)
     productpagina  lookbook-beelden eindigen 2514 → band y=2531  (17px, hieronder)
   `.hinke-product .hinke-promo` is (0,2,0) en verslaat daarmee de (0,1,0) uit
   layout.css — dat bestand blijft dus ongemoeid.
   ========================================================================== */

.hinke-product .hinke-promo {
	margin-top: 17px; /* 2531 − 2514 */
	/* De band eindigt op 2925, de footer ("Component 3") begint op 2952. Op de
	   homepage zit daar het SEO-tekstblok tussen, hier niets — dus die 27px wit
	   staat hier. */
	margin-bottom: 27px; /* 2952 − 2925 */
}

/* De winkelwagen-melding (core-toast) stond hier, maar die verschijnt ook als je
   vanaf een categoriepagina toevoegt — en dit bestand laadt alleen op de
   productpagina. De opmaak staat nu in assets/css/layout.css, dat altijd laadt. */

/* =============================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1400px) {
	.hinke-product__layout {
		grid-template-columns: minmax(0, 1fr) 480px;
		column-gap: 56px;
	}
	.hinke-gallery {
		grid-template-columns: 97px minmax(0, 1fr);
	}
	.hinke-gallery__main {
		width: 100%;
		height: auto;
		aspect-ratio: 538 / 657;
	}
	.hinke-look {
		min-height: 0;
		padding-bottom: 68px;
	}
}

@media (max-width: 1024px) {
	.hinke-product__layout {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 40px;
	}
	.hinke-summary {
		padding-top: 0;
	}
	.hinke-summary__title {
		font-size: clamp(26px, 4vw, 40px);
		line-height: 1.2;
	}
	.hinke-summary__usps {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
	}
	.hinke-look__grid {
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	}

	/* Verlanglijst-knop: aanraakdoel minstens 44px hoog (WCAG 2.5.8). Hartje +
	   label zijn samen maar 21px hoog — te klein voor een vinger. We rekken de
	   knop op i.p.v. het hartje: het hartje blijft 21×21 uit het ontwerp.
	   De marge zakt van 18 naar 7px, zodat het midden van het hartje op
	   dezelfde plek blijft liggen: 18 + 21/2 = 28,5 ≈ 7 + 44/2 = 29.
	   Alleen ≤1024px, waar de kolommen tóch al opnieuw gestapeld zijn — op
	   desktop zou 44px de verticale keten uit het ontwerp 23px uitrekken. */
	.hinke-summary .sellabees-wish-btn {
		min-height: 44px;
		margin-top: 7px;
	}
}

@media (max-width: 640px) {
	.hinke-gallery {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 12px;
	}
	/* Thumbs onder het hoofdbeeld als liggende strook. `flex: 0 0 auto` op de
	   li's is nodig omdat flex-items anders mogen krimpen: bij vijf beelden of
	   meer (5 × 97 + 4 × 12 = 533 > 312) moet de strook schuiven, niet persen.
	   Snap houdt een thumb netjes tegen de linkerrand na een veeg. */
	.hinke-gallery__thumbs {
		flex-direction: row;
		order: 2;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
	}
	.hinke-gallery__thumbs > li {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}
	/* Eén beeld = één thumb: naast het hoofdbeeld (desktop) is dat het ontwerp,
	   maar eronder op een telefoon is het 141px die niets toevoegt — er is
	   niets om naar te wisselen. Browsers zonder :has() houden de oude
	   situatie; er gaat dus niets stuk. */
	.hinke-gallery__thumbs:has(li:only-child) {
		display: none;
	}
	/* Knop over de volle breedte. `div.product` erbij is nodig: de basisregel
	   hierboven noemt óók `.woocommerce .hinke-summary button.button.alt` en dat
	   is (0,4,1) — een media-query telt niet mee in specificiteit, dus (0,3,0)
	   verloor en de knop bleef 375px staan. Tussen 480 en 640px was dat zichtbaar;
	   daaronder viel het niet op omdat `max-width: 100%` hem tóch al afkapte.
	   Deze twee selectors zijn (0,5,1) en (0,5,2) en winnen dus wel. */
	.woocommerce div.product .hinke-summary .single_add_to_cart_button,
	.woocommerce div.product .hinke-summary button.button.alt {
		width: 100%;
	}
	/* "Shop the look": het ontwerp zet vier kaarten van 314 naast elkaar. Met
	   `auto-fit, minmax(240px, …)` viel dat op 360–414px terug naar ÉÉN kolom:
	   vier kaarten van 610–700px hoog maakten de band 2730–3090px lang. Twee
	   kolommen houdt het een rij gerelateerde producten en past bij het
	   archief, dat vanaf 900px ook naar twee kolommen gaat (shop.css). De 16px
	   tussenruimte komt van datzelfde archief (≤560px), want 22px is te veel
	   van de 312px die er op 360 te verdelen is. */
	.hinke-look__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}
	/* De winkelwagen-melding stond hier ook nog met top/right/left: 12px. Dat is
	   weg: de melding verschijnt sitebreed (ook vanaf een categoriepagina) en
	   wordt in assets/css/layout.css al netjes afgekapt met
	   `max-width: calc(100vw - 38px)`. Twee plekken die hetzelfde regelen gaf
	   alleen scheve marges op de productpagina (links 12, rechts 26). Gemeten op
	   360 en 390: de melding valt volledig binnen het scherm. */
}

/* =============================================================================
   VARIATIE-SWATCHES — aanvullingen bij de blokken hierboven

   De swatches staan náást de WooCommerce-select (inc/variation-swatches.php):
   die select blijft in de DOM omdat add-to-cart-variation.js hem uitleest én
   herschrijft, maar hij is onzichtbaar. De selector moet de WooCommerce-regel
   `.woocommerce div.product form.cart .variations select` (0,4,3) verslaan —
   vandaar deze lengte.

   `.hinke-has-swatches` wordt door de swatch-JS op de cel gezet. Zonder die JS
   (of zonder inc/variation-swatches.php) blijft de select dus gewoon zichtbaar
   en bruikbaar — de swatches zijn een verrijking, geen vervanging.
   ========================================================================== */

.woocommerce div.product .hinke-summary form.cart .variations td.hinke-has-swatches select {
	position: absolute;
	width: 1px;
	height: 1px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	opacity: 0;
	pointer-events: none;
	overflow: hidden;
	clip-path: inset(50%);
}

/* Lichte kleuren (wit, ivoor) vallen weg op de witte pagina → 2px randje.
   `:not(.is-selected)` zodat de zwarte keuze-ring altijd wint. */
.hinke-swatches--kleur .hinke-swatch--light:not(.is-selected) {
	border: 2px solid var(--hinke-body);
}

/* WooCommerce zet `.woocommerce div.product form.cart .variations label` (0,4,2)
   op font-weight 700 en verslaat daarmee `.hinke-summary .variations .label label`
   (0,3,1) hierboven. Deze regel (0,6,4) geeft het ontwerp (Outfit 400) zijn recht. */
.woocommerce div.product .hinke-summary form.cart .variations th.label label {
	font-weight: 400;
}