/* ============================================================
   Thema modern: productpagina (content/productinfo/productinfo.php,
   markup ongewijzigd). Prijs als tekst met skeleton tijdens het laden,
   opties als chips, CTA onderaan vast op mobiel, tabs -> accordeon
   op mobiel (knoppen gemaakt door assets/js/modern.js).
   ============================================================ */

main #productinfo.section {
	padding-top: var(--shop-space-5);
}

/* ---------- Galerij (include/modern/product-gallery.php, JS: initGallery) ----------
   Eén vak met een vaste verhouding (--shop-gallery-ratio, gezet in de HTML) vóór
   het laden: geen layout shift en geen wissel naar een achtergrond (die zoomde in).
   Elke foto staat volledig in het vak (contain); meer foto's = swipen (scroll-snap),
   teller, bolletjes (gsm) en miniaturen (tablet/desktop). */
main #productinfo .shop-gallery {
	position: relative;
	min-width: 0;
}
main #productinfo .shop-gallery__main {
	position: relative;
	aspect-ratio: var(--shop-gallery-ratio, 1 / 1);
	border-radius: var(--shop-r-lg);
	overflow: hidden;
	background: var(--shop-bg-2);
}
main #productinfo .shop-gallery__track {
	display: flex;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
main #productinfo .shop-gallery__track::-webkit-scrollbar {
	display: none;
}
main #productinfo .shop-gallery__track:focus-visible {
	outline: none;
	box-shadow: inset var(--shop-focus-ring);
}
main #productinfo .shop-gallery__slide {
	flex: 0 0 100%;
	height: 100%;
	margin: 0 !important;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}
main section#productinfo .productimage .shop-gallery__slide figure {
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0;
}
/* Overschrijft de max-width/max-height/cover van productinfo.php en de afronding van de skins. */
main section#productinfo .productimage .shop-gallery__slide figure > img,
main section#productinfo .productimage .shop-gallery__slide figure > video {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: contain;
	object-position: center;
	border-radius: 0;
}
main section#productinfo .productimage .shop-gallery figure.not-available > p {
	top: 50%;
	transform: translateY(-50%);
}

/* Teller "1/3" en bolletjes: enkel bij meer foto's. */
main #productinfo .shop-gallery__count {
	position: absolute;
	right: var(--shop-space-3);
	bottom: var(--shop-space-3);
	display: inline-flex;
	align-items: center;
	gap: var(--shop-space-1);
	margin: 0;
	padding: 2px var(--shop-space-2);
	border-radius: var(--shop-r-pill);
	background: rgba(20, 16, 12, 0.66);
	color: #fff;
	font-size: var(--shop-text-xs);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 1.6;
	pointer-events: none;
}
/* Ook de <i> vóór feather er een svg van maakt: anders verschuift de teller (CLS). */
main #productinfo .shop-gallery__count i,
main #productinfo .shop-gallery__count svg {
	display: inline-block;
	flex: 0 0 14px;
	width: 14px;
	height: 14px;
}
main #productinfo .shop-gallery__dots {
	position: absolute;
	left: 50%;
	bottom: var(--shop-space-3);
	transform: translateX(-50%);
	display: flex;
	gap: 6px;
	padding: 5px 7px;
	border-radius: var(--shop-r-pill);
	background: rgba(20, 16, 12, 0.32);
	pointer-events: none;
}
main #productinfo .shop-gallery__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.6);
	transition: background var(--shop-dur-fast) var(--shop-ease), transform var(--shop-dur-fast) var(--shop-ease);
}
main #productinfo .shop-gallery__dot.is-active {
	background: #fff;
	transform: scale(1.25);
}

/* Pijlen: JS haalt hidden weg; ze lopen rond (nooit disabled). Op aanraakschermen niet (swipen). */
main #productinfo .shop-gallery__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--shop-bg-1);
	box-shadow: var(--shop-shadow-md);
	color: var(--shop-fg-1);
	cursor: pointer;
}
main #productinfo .shop-gallery__nav[hidden] {
	display: none;
}
main #productinfo .shop-gallery__nav.is-prev { left: var(--shop-space-3); }
main #productinfo .shop-gallery__nav.is-next { right: var(--shop-space-3); }
main #productinfo .shop-gallery__nav:focus-visible {
	outline: none;
	box-shadow: var(--shop-focus-ring);
}

/* Miniaturen: tablet en desktop. */
main #productinfo .shop-gallery__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--shop-space-2);
	margin: var(--shop-space-3) 0 0;
	padding: 0;
	list-style: none;
}
main #productinfo .shop-gallery__thumbs li {
	margin: 0;
}
main #productinfo .shop-gallery__thumb {
	display: block;
	width: 64px;
	height: 64px;
	padding: 0;
	/* Zichtbare rand: een foto op witte achtergrond verdwijnt anders in de pagina. */
	border: 1px solid var(--shop-border-strong);
	border-radius: var(--shop-r-md);
	background: var(--shop-bg-2);
	overflow: hidden;
	cursor: pointer;
	opacity: 0.82;
	transition: opacity var(--shop-dur-fast) var(--shop-ease), border-color var(--shop-dur-fast) var(--shop-ease);
}
main #productinfo .shop-gallery__thumb:hover {
	opacity: 1;
}
main #productinfo .shop-gallery__thumb.is-active {
	border-color: var(--shop-fg-1);
	box-shadow: inset 0 0 0 1px var(--shop-fg-1);
	opacity: 1;
}
main #productinfo .shop-gallery__thumb:focus-visible {
	outline: none;
	box-shadow: var(--shop-focus-ring);
}
main section#productinfo .productimage .shop-gallery__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
	border-radius: 0;
}
/* Productvideo als eerste beeld (include/productvideo.php): zelfde vak als de foto's
   (contain), poster tot hij speelt; knop pauzeren/afspelen linksonder (WCAG 2.2.2). */
main section#productinfo .productimage .shop-gallery__slide figure > video.product-video--gallery {
	background: var(--shop-bg-2);
}
main #productinfo .product-video__toggle {
	position: absolute;
	left: var(--shop-space-3);
	bottom: var(--shop-space-3);
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(20, 16, 12, 0.66);
	color: #fff;
	cursor: pointer;
}
main #productinfo .product-video__toggle[hidden] {
	display: none;
}
main #productinfo .product-video__toggle:focus-visible {
	outline: none;
	box-shadow: var(--shop-focus-ring);
}
main #productinfo .product-video__toggle .is-pause,
main #productinfo .product-video__toggle.is-playing .is-play {
	display: none;
}
main #productinfo .product-video__toggle.is-playing .is-pause {
	display: block;
}
/* Miniatuur van de video: de poster met een afspeelteken. */
main #productinfo .shop-gallery__thumb.is-video {
	position: relative;
}
main #productinfo .shop-gallery__play {
	position: absolute;
	inset: 0;
	margin: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(20, 16, 12, 0.66);
	color: #fff;
	pointer-events: none;
}
main #productinfo .shop-gallery__video {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--shop-fg-2);
}

@media (min-width: 769px) {
	main #productinfo .shop-gallery__dots {
		display: none;
	}
	/* Meer foto's: het vak nooit zo hoog dat de miniaturen onder de vouw vallen
	   (staande eerste foto, 4:5 = 507x634 op een laptop van 900 px hoog). De
	   ruimte erboven (kop, menu, kruimelpad) is ~13 rem, de miniaturen ~5 rem.
	   De foto blijft heel (contain), het vak krijgt enkel zijruimte. Hangt
	   enkel van de viewport af, dus vast vóór het laden: geen layout shift. */
	main #productinfo .shop-gallery.is-multi .shop-gallery__main {
		width: 100%; /* anders zet aspect-ratio de max-height om in een smallere kolom */
		max-height: max(20rem, calc(100vh - 19rem));
	}
}
@media (max-width: 768px) {
	main #productinfo .shop-gallery__thumbs,
	main #productinfo .shop-gallery__nav {
		display: none !important;
	}
}
@media (hover: none) {
	main #productinfo .shop-gallery__nav {
		display: none !important;
	}
}
@media (prefers-reduced-motion: reduce) {
	main #productinfo .shop-gallery__track {
		scroll-behavior: auto;
	}
}

/* ---------- Kop: titel, omschrijving, prijs ---------- */
main #productinfo .productdetail .title.is-4 {
	font-size: var(--shop-text-3xl);
	margin-bottom: var(--shop-space-3) !important;
}
main #productinfo .productdetail .title:not(.is-spaced) + .subtitle {
	margin-top: 0;
	font-size: var(--shop-text-md);
	color: var(--shop-fg-2);
	line-height: var(--shop-leading-body);
}
main #productinfo .productdetail form > .columns:first-of-type {
	flex-direction: column;
	margin-bottom: 0;
}
main #productinfo .productdetail #price-wrapper {
	flex-direction: row;
	align-items: baseline;
	gap: var(--shop-space-2);
	padding-top: 0;
}
main section#productinfo .productdetail .price-wrapper .price {
	width: auto;
	min-width: 0;
	padding: 0;
	border-radius: 0;
	background: transparent !important;
	color: var(--shop-fg-1) !important;
	font-size: var(--shop-text-xl) !important; /* rustige regel: de prijs is niet het belangrijkste */
	font-weight: var(--shop-weight-medium);
	letter-spacing: var(--shop-tracking-tight);
	font-variant-numeric: tabular-nums;
}
main section#productinfo .productdetail #price-wrapper > span {
	font-size: var(--shop-text-sm) !important;
	color: var(--shop-fg-3);
}
/* Skeleton zolang er geen prijs is (geen keuze) of de prijs laadt. */
main section#productinfo .productdetail #price-wrapper .price:empty,
main section#productinfo .productdetail #price-wrapper .price.is-loading {
	display: inline-block;
	width: 7rem;
	height: 1.5rem;
	color: transparent !important;
	background: linear-gradient(90deg, var(--shop-bg-3) 0%, var(--shop-bg-2) 50%, var(--shop-bg-3) 100%) !important;
	background-size: 200% 100% !important;
	animation: shop-shimmer 1.4s linear infinite;
	border-radius: var(--shop-r-sm);
}
main section#productinfo .productdetail #price-wrapper .price.is-loading::after {
	display: none;
}
main section#productinfo .productdetail #price-wrapper .price del {
	color: var(--shop-fg-3);
	font-weight: var(--shop-weight-regular);
}
/* Mobiel: geen tweede (sticky) prijsbalk bovenaan; de header en de CTA onderaan volstaan. */
main section#productinfo .productdetail .price-bar {
	display: none !important;
}
main section#productinfo .productdetail #price-wrapper.is-hidden-mobile {
	display: flex !important;
}

/* ---------- Allergenen bovenaan (include/modern/product-allergens.php) ----------
   Onder de omschrijving, altijd zichtbaar (ook op mobiel). Label en tekst/link op
   één regel; een lijst met iconen krijgt een eigen regel. Namen als code:
   monospace 12 px (brandbook: IBM Plex Mono 12 px voor allergeencodes). */
main #productinfo .shop-allergens {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: var(--shop-space-3);
	row-gap: var(--shop-space-2);
	margin: 0 0 var(--shop-space-3);
}
main #productinfo .shop-allergens__title {
	margin: 0;
	color: var(--shop-fg-1);
	font-family: var(--shop-font-ui, var(--shop-font-sans));
	font-size: 13px;
	font-weight: var(--shop-weight-semibold);
	line-height: 20px;
}
main #productinfo .shop-allergens__list {
	display: flex;
	flex-wrap: wrap;
	flex-basis: 100%;
	gap: 6px 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
main #productinfo .shop-allergens__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 3px 10px 3px 4px;
	border: 1px solid var(--shop-border);
	border-radius: var(--shop-r-pill);
	background: var(--shop-bg-1);
}
main #productinfo .shop-allergens__item img {
	display: block;
	width: 20px;
	height: 20px;
}
main #productinfo .shop-allergens__name {
	color: var(--shop-fg-1);
	font-family: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
	letter-spacing: 1px;
	text-transform: uppercase;
}
main #productinfo .shop-allergens__level {
	color: var(--shop-fg-2);
	font-family: var(--shop-font-ui, var(--shop-font-sans));
	font-size: 12px;
	line-height: 16px;
}
main #productinfo .shop-allergens__text {
	color: var(--shop-fg-2);
	font-family: var(--shop-font-ui, var(--shop-font-sans));
	font-size: 14px;
	line-height: 20px;
}
main #productinfo .shop-allergens__text a {
	color: var(--shop-fg-1);
	text-decoration: underline;
	text-underline-offset: 3px;
}
main #productinfo .shop-allergens__text a:focus-visible {
	outline: 2px solid var(--shop-fg-1);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ---------- Levering/afhaling ---------- */
main section#productinfo .productdetail form .dates {
	display: flex;
	flex-wrap: wrap;
	gap: var(--shop-space-2);
	margin-top: var(--shop-space-2);
}
main section#productinfo .productdetail form .dates > span {
	display: inline-flex;
	align-items: center;
	gap: var(--shop-space-2);
	padding: 0.4rem 0.8rem;
	border-radius: var(--shop-r-pill);
	background: var(--shop-bg-2);
	color: var(--shop-fg-2);
	font-size: var(--shop-text-sm);
	margin: 0 !important;
}
main section#productinfo .productdetail form .dates > span svg {
	width: 16px;
	height: 16px;
	color: var(--shop-brand-text);
}
main section#productinfo .productdetail form .dates > span i {
	color: var(--shop-fg-1);
	font-style: normal;
	font-weight: var(--shop-weight-medium);
}

/* ---------- Opties (smaak, hoeveelheid, voorraad) als chips ---------- */
main section#productinfo .productdetail .field > label.has-text-weight-bold,
main section#productinfo .productdetail .field > .label {
	font-size: var(--shop-text-sm);
	font-weight: var(--shop-weight-semibold) !important;
	color: var(--shop-fg-1);
	margin-bottom: var(--shop-space-2);
	display: block;
}
main section#productinfo .productdetail .columns.has-multi-select {
	margin: 0 calc(-1 * var(--shop-space-1));
}
main section#productinfo .productdetail .columns.has-multi-select > .column {
	padding: var(--shop-space-1);
	width: auto;
	flex: none;
}
main section#productinfo .productdetail .columns.has-multi-select > .column > .control > label > p {
	min-height: 2.75rem;
	padding: 0.45rem 1rem;
	border: 1.5px solid var(--shop-border-strong);
	border-radius: var(--shop-r-md);
	background: var(--shop-bg-1);
	color: var(--shop-fg-1);
	font-size: var(--shop-text-sm);
	font-weight: var(--shop-weight-medium);
	text-align: left;
	transition: border-color var(--shop-dur-fast) var(--shop-ease), background-color var(--shop-dur-fast) var(--shop-ease), box-shadow var(--shop-dur-fast) var(--shop-ease);
}
main section#productinfo .productdetail .columns.has-multi-select > .column > .control > label:hover > p {
	border-color: var(--shop-fg-2);
}
main section#productinfo .productdetail .columns.has-multi-select > .column > .control > input[type="radio"]:checked + label > p {
	border-color: var(--shop-brand);
	background: var(--shop-accent-quiet);
	color: var(--shop-fg-1);
	box-shadow: inset 0 0 0 1px var(--shop-brand);
}
main section#productinfo .productdetail .columns.has-multi-select > .column > .control > input[type="radio"]:focus-visible + label > p {
	outline: 3px solid var(--shop-brand-text);
	outline-offset: 2px;
}
main section#productinfo .productdetail .columns.has-multi-select > .column > .control > input[type="radio"]:disabled + label > p {
	border-style: dashed;
	border-color: var(--shop-border);
	background: var(--shop-bg-2);
	color: var(--shop-fg-3);
}
/* Eén verpakking of één smaak: een vast gegeven ("Inhoud: 0,5 liter", "Smaak: Vanille"),
   geen keuzeknop. De radio blijft (verborgen) aangevinkt, dus het mandje krijgt
   dezelfde packaging_id en flavor_pivot_id.
   !important en de hogere specificiteit winnen van de chipregels van de skins. */
main section#productinfo .productdetail :is(.is-single-packaging, .is-single-flavour) > .field {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: var(--shop-space-2);
}
main section#productinfo .productdetail :is(.is-single-packaging, .is-single-flavour) > .field > label {
	margin-bottom: 0 !important;
}
main section#productinfo .productdetail :is(.is-single-packaging, .is-single-flavour) .columns.has-multi-select {
	display: block !important;
	margin: 0 !important;
}
main section#productinfo .productdetail :is(.is-single-packaging, .is-single-flavour) .columns.has-multi-select > .column {
	padding: 0 !important;
}
main section#productinfo .productdetail :is(.is-single-packaging, .is-single-flavour) .columns.has-multi-select > .column > .control > input[type="radio"] + label > p,
main section#productinfo .productdetail :is(.is-single-packaging, .is-single-flavour) .columns.has-multi-select > .column > .control > input[type="radio"]:checked + label > p {
	display: inline !important;
	min-height: 0;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--shop-fg-1) !important;
	font-size: var(--shop-text-md);
	font-weight: var(--shop-weight-regular);
	cursor: default;
}
main section#productinfo .productdetail :is(.is-single-packaging, .is-single-flavour) .columns.has-multi-select > .column > .control > input[type="radio"]:checked + label > p * {
	color: inherit !important;
}
main section#productinfo .productdetail .is-single-flavour .columns.has-multi-select .head {
	font-weight: inherit;
}
main section#productinfo .productdetail .is-single-flavour .columns.has-multi-select .icecream {
	display: none !important;
}
/* ---------- Verpakkingskeuze (product.packaging_style) ----------
   Even brede opties op één rij (mobiel: --shop-pack-cols-mobile, bv. 2x2), 48 px
   hoog, tekst gecentreerd, tweede regel met de prijs (shop_packaging_prices) of
   de subtitel. De radio's blijven verborgen maar focusbaar: pijltjestoetsen
   wisselen binnen de groep, de focus is zichtbaar op het label.
   cards = een kaartje per maat (actief: inktrand + vinkje);
   segmented = één aaneengesloten balk (actief: inktvlak). */
main section#productinfo .productdetail .columns.has-multi-select.shop-pack--choice {
	display: grid !important;
	grid-template-columns: repeat(var(--shop-pack-cols, 4), minmax(0, 1fr));
	gap: var(--shop-space-2);
	margin: var(--shop-space-2) 0 0 !important;
	overflow: visible;
}
main section#productinfo .productdetail .columns.has-multi-select.shop-pack--choice > .column {
	width: auto !important;
	max-width: none !important;
	min-width: 0;
	padding: 0 !important;
	flex: none !important;
}
main section#productinfo .productdetail .columns.has-multi-select.shop-pack--choice > .column > .control > label {
	display: block;
	height: 100%;
}
main section#productinfo .productdetail .columns.has-multi-select.shop-pack--choice > .column > .control > label > p.shop-pack__option {
	position: relative;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0 !important;
	height: 100%;
	min-height: 48px !important;
	padding: 4px 8px !important;
	border: 1px solid var(--shop-border-strong) !important;
	border-radius: var(--shop-r-md) !important;
	background: var(--shop-bg-1) !important;
	color: var(--shop-fg-1) !important;
	box-shadow: none !important;
	text-align: center !important;
	white-space: nowrap;
	transition: border-color var(--shop-dur-fast) var(--shop-ease), background-color var(--shop-dur-fast) var(--shop-ease), box-shadow var(--shop-dur-fast) var(--shop-ease);
}
main section#productinfo .productdetail .shop-pack--choice .shop-pack__size {
	max-width: 100%;
	font-family: var(--shop-font-display);
	font-size: 16px;
	font-weight: var(--shop-weight-semibold);
	line-height: 20px;
	color: inherit;
	/* Vangnet: past de maat niet op één regel (smal kaartje), dan breekt ze
	   ("10 / personen") in plaats van over de rand en de buur te lopen. */
	white-space: normal;
	overflow-wrap: anywhere;
	text-wrap: balance;
}
main section#productinfo .productdetail .shop-pack--choice .shop-pack__sub {
	font-family: var(--shop-font-ui, var(--shop-font-sans));
	font-size: 12px;
	font-weight: var(--shop-weight-regular);
	line-height: 16px;
	color: var(--shop-fg-2);
	font-variant-numeric: tabular-nums;
}
main section#productinfo .productdetail .shop-pack__check {
	display: none;
}
/* Wint van de skins die alle tekst in een actieve chip wit maken. */
main section#productinfo .productdetail .columns.has-multi-select.shop-pack--choice > .column > .control > input[type="radio"] + label > p.shop-pack__option > span {
	color: inherit !important;
}
main section#productinfo .productdetail .columns.has-multi-select.shop-pack--choice > .column > .control > input[type="radio"] + label > p.shop-pack__option > .shop-pack__sub {
	color: var(--shop-fg-2) !important;
}
main section#productinfo .productdetail .columns.has-multi-select.shop-pack--segmented > .column > .control > input[type="radio"]:checked + label > p.shop-pack__option > .shop-pack__sub {
	color: inherit !important;
	opacity: 0.85;
}
main section#productinfo .productdetail .columns.has-multi-select.shop-pack--choice > .column > .control > label:hover > p.shop-pack__option {
	border-color: var(--shop-fg-1) !important;
}
/* Kaartjes: actief = inktrand (2 px) + vinkje als badge op de hoek (over de rand,
   zodat het nooit over de tekst valt). */
main section#productinfo .productdetail .columns.has-multi-select.shop-pack--cards > .column > .control > input[type="radio"]:checked + label > p.shop-pack__option {
	border-color: var(--shop-fg-1) !important;
	box-shadow: inset 0 0 0 1px var(--shop-fg-1) !important;
	background: var(--shop-bg-2) !important;
	color: var(--shop-fg-1) !important;
}
main section#productinfo .productdetail .shop-pack--cards input[type="radio"]:checked + label .shop-pack__check {
	display: block;
	position: absolute;
	top: -7px;
	right: -7px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--shop-fg-1);
	box-shadow: 0 0 0 2px var(--shop-bg-1);
}
main section#productinfo .productdetail .shop-pack--cards input[type="radio"]:checked + label .shop-pack__check::after {
	content: '';
	position: absolute;
	left: 6px;
	top: 3px;
	width: 6px;
	height: 10px;
	border: solid var(--shop-bg-1);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
/* Keuzebalk: één rand rond het geheel, 1 px lijnen ertussen, actief = inktvlak. */
main section#productinfo .productdetail .columns.has-multi-select.shop-pack--segmented {
	gap: 1px;
	padding: 0;
	border: 1px solid var(--shop-border-strong);
	border-radius: var(--shop-r-md);
	background: var(--shop-border-strong);
	overflow: hidden;
}
main section#productinfo .productdetail .columns.has-multi-select.shop-pack--segmented > .column > .control > label > p.shop-pack__option {
	min-height: 46px !important;
	border: 0 !important;
	border-radius: 0 !important;
}
main section#productinfo .productdetail .columns.has-multi-select.shop-pack--segmented > .column > .control > label:hover > p.shop-pack__option {
	background: var(--shop-bg-2) !important;
}
main section#productinfo .productdetail .columns.has-multi-select.shop-pack--segmented > .column > .control > input[type="radio"]:checked + label > p.shop-pack__option {
	background: var(--shop-fg-1) !important;
	color: var(--shop-bg-1) !important;
}
/* Laatste rij van een keuzebalk die breekt: de laatste optie vult de rij. */
main section#productinfo .productdetail .shop-pack--segmented.shop-pack--d4 > .column:last-child:nth-child(4n+3) { grid-column: span 2; }
main section#productinfo .productdetail .shop-pack--segmented.shop-pack--d4 > .column:last-child:nth-child(4n+2) { grid-column: span 3; }
main section#productinfo .productdetail .shop-pack--segmented.shop-pack--d4 > .column:last-child:nth-child(4n+1) { grid-column: span 4; }
/* Focus (toetsenbord): dubbele ring, zichtbaar op wit en op het inktvlak. */
main section#productinfo .productdetail .columns.has-multi-select.shop-pack--choice > .column > .control > input[type="radio"]:focus-visible + label > p.shop-pack__option {
	outline: 2px solid var(--shop-fg-1);
	outline-offset: 2px;
}
main section#productinfo .productdetail .columns.has-multi-select.shop-pack--segmented > .column > .control > input[type="radio"]:focus-visible + label > p.shop-pack__option {
	outline: 0;
	box-shadow: inset 0 0 0 2px var(--shop-bg-1), inset 0 0 0 4px var(--shop-fg-1) !important;
}
main section#productinfo .productdetail .columns.has-multi-select.shop-pack--choice > .column > .control > input[type="radio"]:disabled + label > p.shop-pack__option {
	background: var(--shop-bg-2) !important;
	color: var(--shop-fg-3) !important;
	cursor: not-allowed;
}
main section#productinfo .productdetail .shop-pack--choice input[type="radio"]:disabled + label .shop-pack__size {
	text-decoration: line-through;
}
/* Vijf maten (ijstaarten) in een smalle infokolom (tablet, klein laptopvenster):
   één rij van vijf wordt te smal voor "10 personen", dus 3 kolommen zoals op mobiel. */
@media screen and (min-width: 826px) and (max-width: 1023px) {
	main section#productinfo .productdetail .columns.has-multi-select.shop-pack--choice.shop-pack--d5 {
		grid-template-columns: repeat(var(--shop-pack-cols-mobile, 3), minmax(0, 1fr));
	}
	main section#productinfo .productdetail .shop-pack--segmented.shop-pack--d5.shop-pack--m3 > .column:last-child:nth-child(3n+2) { grid-column: span 2; }
}
@media screen and (max-width: 825px) {
	main section#productinfo .productdetail .columns.has-multi-select.shop-pack--choice {
		grid-template-columns: repeat(var(--shop-pack-cols-mobile, 2), minmax(0, 1fr));
	}
	main section#productinfo .productdetail .shop-pack--segmented.shop-pack--d4 > .column:last-child { grid-column: auto; }
	main section#productinfo .productdetail .shop-pack--segmented.shop-pack--m3 > .column:last-child:nth-child(3n+2) { grid-column: span 2; }
	main section#productinfo .productdetail .shop-pack--segmented.shop-pack--m3 > .column:last-child:nth-child(3n+1) { grid-column: span 3; }
}
@media (prefers-reduced-motion: reduce) {
	main section#productinfo .productdetail .columns.has-multi-select.shop-pack--choice > .column > .control > label > p.shop-pack__option {
		transition: none;
	}
}
main section#productinfo .productdetail .divider {
	margin: var(--shop-space-4) 0;
	color: var(--shop-fg-3);
}

/* ---------- Aantal + in winkelmandje ---------- */
main section#productinfo .productdetail form > .columns.is-variable:has(.shopping-cart) {
	margin-top: var(--shop-space-4);
}
main section#productinfo .productdetail .select select {
	min-height: 3rem;
	border-radius: var(--shop-r-pill);
	font-weight: var(--shop-weight-semibold);
}
main section#productinfo .productdetail .button.shopping-cart {
	min-height: 3rem;
	padding-inline: 2rem;
	font-size: var(--shop-text-md);
}
main section#productinfo .productdetail .button.shopping-cart .is-hidden-mobile {
	display: inline !important;
}
main section#productinfo .productdetail .button.shopping-cart .icon:first-child {
	margin-right: var(--shop-space-2) !important;
}
main section#productinfo .errorMessage {
	border-radius: var(--shop-r-sm);
	color: var(--shop-neg);
}

/* Prijs in de koopknop zodra een maat gekozen is ("In winkelmandje · € 9,00", modern.js). */
main section#productinfo .productdetail .button.shopping-cart .shop-cta-price {
	margin-left: 0.35em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
main section#productinfo .productdetail .button.shopping-cart .shop-cta-price[hidden] {
	display: none;
}

/* ---------- Tabs (desktop) ---------- */
main #productinfo .productinfo {
	margin-top: var(--shop-space-6);
}
main #productinfo .productinfo .tabs ul {
	border-bottom: 1px solid var(--shop-border);
	gap: var(--shop-space-5);
}
main #productinfo .productinfo .tabs a {
	padding: var(--shop-space-3) 0;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	color: var(--shop-fg-3);
	font-weight: var(--shop-weight-semibold);
}
main #productinfo .productinfo .tabs a:hover {
	color: var(--shop-fg-1);
	border-bottom-color: var(--shop-border-strong);
}
main #productinfo .productinfo .tabs li.is-active a {
	color: var(--shop-fg-1);
	border-bottom-color: var(--shop-brand);
}
main #productinfo .productinfo .tabs-content article.content {
	max-width: 72ch;
	color: var(--shop-fg-2);
	line-height: var(--shop-leading-body);
}
.shop-acc__head {
	display: none;
}

/* ---------- Toegevoegd-venster ---------- */
main #added-product-modal .modal-card {
	border-radius: var(--shop-r-lg);
	box-shadow: var(--shop-shadow-lg);
}
main #added-product-modal .modal-card-head,
main #added-product-modal .modal-card-foot {
	border-color: var(--shop-border);
}

/* ---------- Mobiel ---------- */
@media screen and (max-width: 825px) {
	main #productinfo.section {
		padding-top: var(--shop-space-3);
	}
	main #productinfo .productdetail.is-hidden-tablet .title.is-4 {
		font-size: var(--shop-text-2xl);
	}
	/* CTA onderaan, binnen duimbereik, zolang het formulier in beeld is */
	main section#productinfo .productdetail form > .columns.is-variable:has(.shopping-cart) {
		position: sticky;
		bottom: 0;
		z-index: 5;
		margin: var(--shop-space-4) calc(-1 * var(--shop-gutter)) 0;
		padding: var(--shop-space-3) var(--shop-gutter) calc(var(--shop-space-3) + env(safe-area-inset-bottom));
		background: var(--shop-bg-1);
		border-top: 1px solid var(--shop-border);
		box-shadow: 0 -6px 16px rgba(20, 22, 26, 0.06);
	}
	main section#productinfo .productdetail form > .columns.is-variable:has(.shopping-cart) > .column {
		width: 100%;
		padding: 0;
	}
	main section#productinfo .productdetail form > .columns.is-variable:has(.shopping-cart) .columns.is-mobile {
		margin: 0;
		gap: var(--shop-space-2);
		flex-wrap: nowrap;
	}
	main section#productinfo .productdetail form > .columns.is-variable:has(.shopping-cart) .columns.is-mobile > .column {
		padding: 0;
	}
	main section#productinfo .productdetail form > .columns.is-variable:has(.shopping-cart) .columns.is-mobile > .column:last-child {
		flex: 1;
	}
	/* opties: horizontaal swipen blijft (is-scrollable-mobile), maar met lucht */
	main section#productinfo .productdetail .columns.has-multi-select.is-scrollable-mobile {
		flex-wrap: wrap;
		overflow: visible;
	}

	/* tabs -> accordeon */
	main #productinfo .productinfo .tabs {
		display: none;
	}
	main #productinfo .productinfo .tabs-content {
		border-top: 1px solid var(--shop-border);
	}
	.shop-acc__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		min-height: 3.25rem;
		padding: 0 var(--shop-space-1);
		border: 0;
		border-bottom: 1px solid var(--shop-border);
		background: none;
		color: var(--shop-fg-1);
		font: var(--shop-weight-semibold) var(--shop-text-md) / 1.3 var(--shop-font-sans);
		text-align: left;
		cursor: pointer;
	}
	.shop-acc__head i {
		color: var(--shop-fg-3);
		transition: transform var(--shop-dur) var(--shop-ease);
	}
	.shop-acc__head[aria-expanded="true"] i {
		transform: rotate(180deg);
	}
	main #productinfo .productinfo .tabs-content > div.shop-acc__panel {
		display: none;
		padding: var(--shop-space-3) var(--shop-space-1) var(--shop-space-4);
		border-bottom: 1px solid var(--shop-border);
	}
	main #productinfo .productinfo .tabs-content > div.shop-acc__panel.is-open {
		display: block;
	}
	main #productinfo .productinfo .tabs-content > div.shop-acc__panel > .columns,
	main #productinfo .productinfo .tabs-content > div.shop-acc__panel > .columns > .column {
		margin: 0;
		padding: 0;
	}
}