/*
 * Pretzo theme — single-product.css
 * Uitsluitend geladen op publieke WooCommerce Booking-productpagina's
 * (pretzo_is_public_booking_product(), inc/woocommerce.php) — nooit op
 * het private/simple "Toezicht"-product, category/tag-archieven, de shop
 * of de homepage.
 *
 * Fase 5B.1 legde de functionele basis (contentcontainer, H1-fix tegen
 * het Elementor-kit-conflict). Fase 5B.2 bouwde daar visueel op,
 * Fase 5B.2.1 loste mobiele horizontale overflow op (min-width:0-keten,
 * multi-month-kalenderstapeling, table-layout:fixed). Fase 5C is de
 * laatste polish-ronde: typografische hiërarchie, consistente
 * card/surface-taal (booking-card, veiligheidsblok) en leesbaarheid —
 * geen van de containmentregels uit 5B.2.1 is hierbij verwijderd of
 * verzwakt. Uitsluitend CSS, geen WooCommerce/Bookings-markup
 * gekopieerd of herbouwd. Alle geraakte elementen zijn WooCommerce('s
 * Bookings)-eigen, bestaande classes; er is geen eigen kalender/
 * availability/pricing-JS toegevoegd.
 */

/* ==================================================================
 * Contentcontainer & H1 (Fase 5B.1, ongewijzigd)
 * ================================================================== */

body.single-product div.images,
body.single-product div.summary {
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

/*
 * `.elementor-kit-1181 h1 { font-size: 104px; }` — specificiteit (0,1,1).
 * `body.single-product h1.product_title` = (0,2,2), wint zonder
 * `!important`. Uitsluitend deze selector — geen globale h1-regel.
 */
body.single-product h1.product_title {
	font-size: var(--wp--preset--font-size--display);
	font-weight: 800;
	line-height: 1.1;
	margin-bottom: 0.25em;
}

/* ==================================================================
 * Breadcrumbs (§11)
 * ================================================================== */

body.single-product .woocommerce-breadcrumb {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	padding-inline: clamp(1rem, 2.5vw, 1.5rem);
	padding-block: var(--wp--preset--spacing--sm, 1rem) 0;
	box-sizing: border-box;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted, #4b5563);
}

body.single-product .woocommerce-breadcrumb a {
	color: inherit;
}

/* ==================================================================
 * Desktop 2-koloms gallery/summary (§3) — 52% / 48%, echte gap
 * ================================================================== */

/*
 * WooCommerce's eigen woocommerce-layout.css zet op `div.images`/
 * `div.summary` al `float:left/right; width:48%;` (het is dat gedrag,
 * niet een lege basis, dat hier vervangen wordt). CSS Grid i.p.v. flex:
 * `fr`-tracks trekken de `gap` automatisch van de beschikbare breedte af
 * vóór de 52/48-verdeling — geen handmatige calc() nodig. Grid-items
 * negeren float vanzelf, maar niet `width` (zelfde les als de shop-
 * productgrid, Fase 4B.6) — vandaar de expliciete reset, met dezelfde
 * `!important`-conventie als daar, omdat de laadvolgorde tussen
 * plugin- en thema-CSS niet gegarandeerd is.
 */
body.single-product div.product {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--md, 1.5rem);
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	padding-inline: clamp(1rem, 2.5vw, 1.5rem);
	box-sizing: border-box;
}

body.single-product div.product > .images,
body.single-product div.product > .summary {
	float: none !important;
	width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
}

/*
 * `.woocommerce-product-gallery__wrapper` (het element dat de
 * flexslider-hoofdafbeelding bevat) is zelf ook een flex/grid-context
 * geworden zodra hij als grid-item (`.images`) fungeert. Zonder
 * `min-width:0` hier ook, kan de intrinsieke breedte van de
 * hoofdafbeelding het grid-item — en dus de hele pagina — breder maken
 * dan de viewport. Root cause van de gerapporteerde "hoofdproductafbeelding
 * loopt rechts buiten viewport".
 */
body.single-product .woocommerce-product-gallery__wrapper {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

@media (min-width: 900px) {
	body.single-product div.product {
		grid-template-columns: 52fr 48fr;
		align-items: start;
		gap: var(--wp--preset--spacing--lg, 2.5rem);
	}
}

/*
 * Volledige afbeelding zichtbaar houden — geen agressieve crop: WC's
 * eigen `object-fit` is niet gezet op de hoofdafbeelding, dus dit volgt
 * puur de natuurlijke verhouding van de afbeelding zelf. `aspect-ratio`
 * bewust niet geforceerd.
 */
body.single-product .woocommerce-product-gallery__wrapper img {
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--lg, 16px);
}

/* Compacte, gelijke thumbnails met duidelijke active/hover-state. */
body.single-product .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: var(--wp--preset--spacing--sm, 1rem) !important;
}

body.single-product .flex-control-thumbs li {
	width: calc(25% - 0.375rem) !important;
	float: none !important;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--sm, 6px);
}

body.single-product .flex-control-thumbs li img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--sm, 6px);
	box-shadow: 0 0 0 2px transparent;
	transition: box-shadow 0.15s ease, opacity 0.15s ease;
}

/* Rustige, subtiele active/hover-ring i.p.v. een harde rand. */
body.single-product .flex-control-thumbs li img.flex-active,
body.single-product .flex-control-thumbs li img:hover {
	box-shadow: 0 0 0 2px var(--wp--preset--color--blue, #007bff);
}

/* ==================================================================
 * Product summary volgorde & meta (§4, §11)
 * ================================================================== */

body.single-product .summary .price {
	display: block;
	margin: 0 0 0.3em;
	font-size: var(--wp--preset--font-size--h2);
	font-weight: 700;
	color: var(--wp--preset--color--navy, #111827);
}

body.single-product .product-reassurance {
	margin-block: 0.6em 1.1em;
}

/*
 * Zelfde check-accent-taal als `.product-safety__list` hieronder — één
 * consistent "bevestigings"-icoon in plaats van twee verschillende
 * bullet-stijlen op dezelfde pagina.
 */
body.single-product .product-reassurance__item {
	position: relative;
	margin: 0 0 0.5em;
	padding-left: 1.3em;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.5;
	color: var(--wp--preset--color--muted, #4b5563);
}

body.single-product .product-reassurance__item::before {
	content: '✓';
	position: absolute;
	left: 0;
	top: 0;
	color: var(--wp--preset--color--blue, #007bff);
	font-weight: 700;
}

/* SKU/categorie: visueel secundair, niet verwijderd. */
body.single-product .summary .product_meta {
	margin-top: var(--wp--preset--spacing--md, 1.5rem);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted, #4b5563);
}

body.single-product .summary .product_meta > span {
	display: block;
	margin-bottom: 0.2em;
}

/* ==================================================================
 * Booking-card (§4, §5)
 * ================================================================== */

/*
 * `form.cart` is voor een booking-product de enige `.cart`-form op de
 * pagina (single-product/add-to-cart/booking.php) — hier als kaart
 * gestyled, zelfde surface/radius-taal als `.pretzo-card`
 * (components.css), zonder die class te hergebruiken (deze CSS-laag
 * raakt bewust geen gedeeld bestand tenzij aantoonbaar nodig — hier niet
 * het geval, twee regels volstaan).
 */
/*
 * `.booking-card__heading` (uit `woocommerce_before_add_to_cart_form`)
 * en `form.cart` staan als opeenvolgende siblings in de DOM, vóór
 * `<form>` opent — er zit niets tussen. Samen vormen ze visueel één
 * kaart: de heading krijgt de bovenste, `form.cart` de onderste hoeken
 * en dezelfde surface/rand, zonder een nieuwe wrapper-<div> toe te
 * voegen aan WooCommerce Bookings' eigen markup.
 */
/*
 * §6 — de booking-card is het belangrijkste CRO-element op de pagina:
 * iets meer visueel gewicht dan de andere surfaces (reassurance,
 * veiligheidsblok) via een zachte schaduw, zonder schreeuwerig te
 * worden — geen felle kleuren, geen dikke randen.
 */
body.single-product .booking-card__heading {
	margin: var(--wp--preset--spacing--md, 1.5rem) 0 0;
	padding: 1.1rem 1.5rem 0;
	background: var(--wp--preset--color--surface, #f5f6f8);
	border: 1px solid var(--wp--preset--color--border, #e2e5ea);
	border-bottom: none;
	border-radius: var(--wp--custom--radius--lg, 16px) var(--wp--custom--radius--lg, 16px) 0 0;
	font-size: var(--wp--preset--font-size--h4);
	font-weight: 700;
	box-shadow: 0 12px 28px -18px rgba(17, 24, 39, 0.18);
}

body.single-product form.cart {
	background: var(--wp--preset--color--surface, #f5f6f8);
	border: 1px solid var(--wp--preset--color--border, #e2e5ea);
	border-top: none;
	border-radius: 0 0 var(--wp--custom--radius--lg, 16px) var(--wp--custom--radius--lg, 16px);
	padding: var(--wp--preset--spacing--md, 1.5rem);
	margin: 0;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	box-shadow: 0 12px 28px -18px rgba(17, 24, 39, 0.18);
}

body.single-product .wc-bookings-booking-form,
body.single-product .wc-bookings-date-picker,
body.single-product .picker {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

body.single-product .wc-bookings-booking-cost {
	margin-top: 0.75em;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--h4);
	color: var(--wp--preset--color--navy, #111827);
}

/*
 * ---------- Kalender (jQuery UI datepicker, WC Bookings' eigen JS) ----------
 * Uitsluitend presentatie op de daadwerkelijke, door WC Bookings zelf
 * gerenderde classes (jquery-ui-styles.css/frontend.css) — geen enkele
 * beschikbaarheids-/statuslogica aangepast, geen JS herschreven.
 */
/*
 * ROOT CAUSE (kalender/booking-card overflow): jQuery UI's eigen
 * bundled CSS (woocommerce-bookings/dist/jquery-ui-styles.css) zet
 * `.ui-datepicker { width: 17em; }` als basis — onschuldig op zichzelf
 * (272px), MAAR met `enable_range_picker: 1` (bevestigde bookingconfig)
 * initialiseert jQuery UI datepicker doorgaans met `numberOfMonths: 2`
 * (start+einddatum naast elkaar), wat `.ui-datepicker-group { width: 50%;
 * float:left }` activeert — de twee maandpanelen samen vragen dan
 * intrinsiek ±34em (≈544px) aan `.ui-datepicker`-breedte, ver boven een
 * 390px-viewport. `min-width:0` hieronder zorgt dat de grid/flex-context
 * eromheen dat mag laten krimpen; de losse `.ui-datepicker-group`-fix
 * verderop (mobiel) stapelt de twee panelen verticaal i.p.v. ze naast
 * elkaar te dwingen.
 */
body.single-product .ui-datepicker {
	width: 100% !important;
	max-width: 22rem;
	min-width: 0;
	box-sizing: border-box;
	font-family: var(--wp--preset--font-family--body);
	border: 1px solid var(--wp--preset--color--border, #e2e5ea);
	border-radius: var(--wp--custom--radius--md, 10px);
	background: var(--wp--preset--color--white, #fff);
	padding: 0.75rem;
}

body.single-product .ui-datepicker-group {
	box-sizing: border-box;
}

body.single-product .ui-datepicker-header {
	background: none;
	border: none;
	padding: 0 0 0.5em;
}

body.single-product .ui-datepicker-title {
	font-weight: 700;
	color: var(--wp--preset--color--navy, #111827);
}

body.single-product .ui-datepicker-prev,
body.single-product .ui-datepicker-next {
	cursor: pointer;
	border-radius: var(--wp--custom--radius--sm, 6px);
}

body.single-product .ui-datepicker-prev:hover,
body.single-product .ui-datepicker-next:hover {
	background: var(--wp--preset--color--surface, #f5f6f8);
}

body.single-product .ui-datepicker-calendar {
	width: 100%;
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 2px;
}

/* Weekdagen (ma/di/wo/...) — voorheen ongestyled, dus vlak/moeilijk leesbaar. */
body.single-product .ui-datepicker-calendar th {
	padding-bottom: 0.5em;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--muted, #4b5563);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-align: center;
}

/* Voldoende touch-target op mobiel, duidelijk klikbaar op desktop. */
body.single-product .ui-datepicker-calendar td a,
body.single-product .ui-datepicker-calendar td span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	border-radius: var(--wp--custom--radius--sm, 6px);
	text-align: center;
}

body.single-product .ui-datepicker-calendar td a {
	color: var(--wp--preset--color--navy, #111827);
	text-decoration: none;
}

body.single-product .ui-datepicker-calendar td a:hover {
	background: var(--wp--preset--color--surface, #f5f6f8);
}

body.single-product .ui-datepicker-calendar td a:focus-visible {
	outline: 2px solid var(--wp--preset--color--blue, #007bff);
	outline-offset: 1px;
}

/* Vandaag: subtiele ring — nadrukkelijk anders dan "geselecteerd". */
body.single-product .ui-datepicker-calendar .ui-datepicker-today a {
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--border, #e2e5ea);
}

/* Geselecteerde datum: gevulde Pretzo-blauwe status. */
body.single-product .ui-datepicker-calendar .ui-datepicker-current-day a {
	background: var(--wp--preset--color--blue, #007bff);
	color: var(--wp--preset--color--white, #fff);
}

/* Niet-beschikbaar: gedempt, duidelijk niet-klikbaar — geen functionele status verkeerd voorgesteld. */
body.single-product .ui-datepicker-calendar td.unavailable a,
body.single-product .ui-datepicker-calendar td.unavailable span {
	color: var(--wp--preset--color--muted, #4b5563);
	text-decoration: line-through;
	cursor: not-allowed;
	opacity: 0.5;
}

body.single-product .ui-datepicker-other-month a {
	opacity: 0.35;
}

/* ---------- "Reserveer datum" — Pretzo primary-CTA-taal ---------- */
body.single-product .single_add_to_cart_button,
body.single-product .wc-bookings-booking-form-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 44px;
	margin-top: 1em;
	padding: 0.75em 1.5em;
	border: 2px solid transparent;
	border-radius: var(--wp--custom--radius--md, 10px);
	background: var(--wp--preset--color--blue, #007bff);
	color: var(--wp--preset--color--white, #fff);
	-webkit-text-fill-color: var(--wp--preset--color--white, #fff);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--base);
	cursor: pointer;
}

body.single-product .single_add_to_cart_button:hover:not(:disabled):not([aria-disabled='true']),
body.single-product .single_add_to_cart_button:focus-visible,
body.single-product .single_add_to_cart_button:active,
body.single-product .wc-bookings-booking-form-button:hover:not(:disabled):not([aria-disabled='true']),
body.single-product .wc-bookings-booking-form-button:focus-visible,
body.single-product .wc-bookings-booking-form-button:active {
	background: color-mix(in srgb, var(--wp--preset--color--blue, #007bff) 85%, black);
	color: var(--wp--preset--color--white, #fff);
	-webkit-text-fill-color: var(--wp--preset--color--white, #fff);
}

body.single-product .single_add_to_cart_button:disabled,
body.single-product .single_add_to_cart_button[aria-disabled='true'],
body.single-product .wc-bookings-booking-form-button:disabled,
body.single-product .wc-bookings-booking-form-button[aria-disabled='true'] {
	opacity: 0.55;
	cursor: not-allowed;
}

/* ==================================================================
 * Tabs — Omschrijving / Meer informatie (§7)
 * ================================================================== */

body.single-product .woocommerce-tabs {
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1200px);
	min-width: 0;
	margin-inline: auto;
	padding-inline: clamp(1rem, 2.5vw, 1.5rem);
	box-sizing: border-box;
	margin-top: var(--wp--preset--spacing--lg, 2.5rem);
}

body.single-product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1.5em;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--wp--preset--color--border, #e2e5ea);
}

body.single-product .woocommerce-tabs ul.tabs li {
	margin: 0;
}

body.single-product .woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: 0.6em 1em;
	color: var(--wp--preset--color--muted, #4b5563);
	text-decoration: none;
	font-weight: 600;
	border-radius: var(--wp--custom--radius--sm, 6px) var(--wp--custom--radius--sm, 6px) 0 0;
}

body.single-product .woocommerce-tabs ul.tabs li:hover a {
	color: var(--wp--preset--color--navy, #111827);
	background: var(--wp--preset--color--surface, #f5f6f8);
}

body.single-product .woocommerce-tabs ul.tabs li.active a {
	color: var(--wp--preset--color--blue, #007bff);
	box-shadow: inset 0 -2px var(--wp--preset--color--blue, #007bff);
}

body.single-product .woocommerce-tabs .woocommerce-Tabs-panel {
	max-width: 65ch;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	line-height: 1.7;
	overflow-wrap: break-word;
}

/*
 * `table-layout:fixed`: zonder dit kan een tabel met lange, spatieloze
 * celinhoud (bv. een lange attribuutwaarde) weigeren te krimpen onder
 * zijn intrinsieke breedte, ook al staat `max-width` op de tabel zelf —
 * `max-width` beperkt alleen de bovengrens, niet de auto-table-layout-
 * berekening die eraan voorafgaat.
 */
body.single-product .woocommerce-tabs table.shop_attributes {
	width: 100%;
	max-width: 65ch;
	min-width: 0;
	table-layout: fixed;
	border-collapse: collapse;
}

body.single-product .woocommerce-tabs table.shop_attributes th,
body.single-product .woocommerce-tabs table.shop_attributes td {
	padding: 0.6em 0.8em;
	border-bottom: 1px solid var(--wp--preset--color--border, #e2e5ea);
	text-align: left;
}

/* ==================================================================
 * Veiligheid & gebruik (§8)
 * ================================================================== */

body.single-product .product-safety {
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1200px);
	min-width: 0;
	margin-inline: auto;
	padding-inline: clamp(1rem, 2.5vw, 1.5rem);
	margin-block: var(--wp--preset--spacing--lg, 2.5rem);
	box-sizing: border-box;
}

body.single-product .product-safety__heading {
	margin: 0 0 0.75em;
	font-size: var(--wp--preset--font-size--h3);
}

/* Zelfde surface/border/radius-taal als de booking-card hierboven — consistente kaartstijl. */
body.single-product .product-safety__list {
	margin: 0;
	padding: var(--wp--preset--spacing--md, 1.5rem);
	list-style: none;
	background: var(--wp--preset--color--surface, #f5f6f8);
	border: 1px solid var(--wp--preset--color--border, #e2e5ea);
	border-radius: var(--wp--custom--radius--lg, 16px);
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.6rem;
}

@media (min-width: 700px) {
	body.single-product .product-safety__list {
		grid-template-columns: 1fr 1fr;
	}
}

body.single-product .product-safety__list li {
	position: relative;
	margin: 0;
	padding-left: 1.4em;
	font-size: var(--wp--preset--font-size--small);
}

body.single-product .product-safety__list li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: var(--wp--preset--color--blue, #007bff);
	font-weight: 700;
}

/* ==================================================================
 * Related products (§9) — hergebruikt .product-card (components.css)
 * via de verbrede scope in woocommerce/content-product.php; hier
 * uitsluitend het grid/container, geen kaartstijl gedupliceerd.
 * ================================================================== */

body.single-product .related.products {
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1200px);
	min-width: 0;
	margin-inline: auto;
	padding-inline: clamp(1rem, 2.5vw, 1.5rem);
	margin-block: var(--wp--preset--spacing--lg, 2.5rem) 0;
	box-sizing: border-box;
}

body.single-product .related.products > h2 {
	font-size: var(--wp--preset--font-size--h2);
	margin-bottom: var(--wp--preset--spacing--md, 1.5rem);
}

body.single-product .related.products ul.products {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--md, 1.5rem);
	list-style: none;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
}

body.single-product .related.products ul.products::before,
body.single-product .related.products ul.products::after {
	content: none !important;
}

body.single-product .related.products ul.products li.product {
	float: none !important;
	width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
}

/*
 * `.product-card` (base rule, components.css) is `flex-direction:column`
 * met `.product-card__body { flex: 1; }` maar geen `min-width:0` op de
 * body — als grid-item (`li.product`) mag de kaart daardoor niet
 * krimpen onder haar eigen content-breedte. Uitsluitend hier, binnen de
 * single-product-gescopeerde selector, gecorrigeerd — components.css
 * zelf blijft ongewijzigd, dus de shop/homepage-kaarten zijn niet
 * geraakt.
 */
body.single-product .related.products ul.products li.product.product-card,
body.single-product .related.products ul.products li.product .product-card__body {
	min-width: 0;
}

@media (max-width: 1024px) {
	body.single-product .related.products ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Zelfde compacte 1-koloms kaart als /winkel/ — geen ongemakkelijke 2+1. */
@media (max-width: 600px) {
	body.single-product .related.products ul.products {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
}

/*
 * Zelfde WebKit-`:visited`-defensie als shop.css (Fase 4B.6): niet
 * globaal in components.css, want die stylesheet is niet
 * page-gescopeerd — hier herhaald voor de related-products-CTA, die
 * niet van shop.css's scope profiteert (dat bestand laadt hier niet).
 */
body.single-product .related.products ul.products li.product .product-card__cta {
	color: var(--wp--preset--color--white, #fff);
	-webkit-text-fill-color: var(--wp--preset--color--white, #fff);
}

body.single-product .related.products ul.products li.product .product-card__cta:hover,
body.single-product .related.products ul.products li.product .product-card__cta:focus-visible,
body.single-product .related.products ul.products li.product .product-card__cta:active {
	color: var(--wp--preset--color--white, #fff);
	-webkit-text-fill-color: var(--wp--preset--color--white, #fff);
}

/* ==================================================================
 * Mobiel (§10) — QA-breedte ±390-393px
 * ================================================================== */

@media (max-width: 600px) {
	/*
	 * Expliciete, harde containment voor 1. div.product zelf en 2. elke
	 * directe/relevante afstammeling die elders zijn eigen breedte/
	 * min-width claimt (WooCommerce- of jQuery-UI-eigen CSS). `!important`
	 * hier, want dit is de laatste, mobiel-specifieke correctielaag —
	 * geen vervanging van de containment hierboven, een aanvulling erop
	 * voor de gevallen waar die (op deze breedte, bevestigd op echte
	 * staging-QA) alsnog niet won.
	 */
	body.single-product div.product,
	body.single-product div.product > .images,
	body.single-product div.product > .summary,
	body.single-product .woocommerce-product-gallery__wrapper,
	body.single-product form.cart,
	body.single-product .wc-bookings-booking-form,
	body.single-product .wc-bookings-date-picker,
	body.single-product .picker,
	body.single-product .ui-datepicker,
	body.single-product .woocommerce-tabs,
	body.single-product .woocommerce-tabs .woocommerce-Tabs-panel,
	body.single-product .product-safety,
	body.single-product .related.products,
	body.single-product .related.products ul.products,
	body.single-product .related.products ul.products li.product {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
	}

	body.single-product h1.product_title {
		font-size: clamp(2.125rem, 4vw + 1.3rem, 2.5rem);
		line-height: 1.02;
		max-width: 100%;
		word-break: normal;
		overflow-wrap: normal;
		hyphens: none;
	}

	/*
	 * Root cause "hoofdafbeelding loopt rechts buiten viewport": de
	 * basisregel (`width:100%; height:auto;`, boven) forceert de
	 * afbeelding altijd op de volle breedte van haar container — maar
	 * zolang die container zelf breder dan de viewport kon worden (nu
	 * hierboven gefixt), werd de afbeelding evenredig meegerekt. Met de
	 * container nu vast op 100% van de viewport, hier bovendien
	 * `width:auto` i.p.v. geforceerd 100%, zodat de afbeelding nooit
	 * breder dan haar eigen, natuurlijke breedte binnen die container
	 * hoeft te worden — en `object-fit:contain` + `max-height` voorkomt
	 * dat de galerij extreem hoog wordt, zonder te croppen.
	 */
	/*
	 * §4 — "gallery iets compacter indien veilig": 70vh (Fase 5B.2.1) was
	 * uitsluitend een overflow-vangnet, geen bewuste ontwerpkeuze — 50vh
	 * geeft een compacter boven-de-vouw-gevoel en meer ruimte voor
	 * titel/prijs, zonder de onderliggende containment (width/max-width/
	 * min-width hierboven) aan te raken.
	 */
	body.single-product .woocommerce-product-gallery__wrapper img {
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: 50vh;
		object-fit: contain;
	}

	body.single-product form.cart {
		padding: var(--wp--preset--spacing--sm, 1rem);
	}

	/*
	 * Root cause "kalender/booking-card loopt rechts buiten viewport":
	 * bij `enable_range_picker:1` initialiseert WC Bookings de
	 * jQuery-UI-datepicker doorgaans met twee maandpanelen naast elkaar
	 * (`.ui-datepicker-group{width:50%;float:left}`, jquery-ui-styles.css)
	 * — samen intrinsiek breder dan één mobiele viewport. Panelen hier
	 * verticaal stapelen i.p.v. naast elkaar dwingen; functioneel
	 * ongewijzigd (nog steeds twee volledige maanden zichtbaar, nu
	 * onder elkaar i.p.v. naast elkaar). Alleen binnen deze mobiele
	 * media query — desktop behoudt het naast-elkaar-patroon.
	 */
	body.single-product .ui-datepicker-group {
		width: 100% !important;
		float: none !important;
	}

	body.single-product .ui-datepicker-calendar td a,
	body.single-product .ui-datepicker-calendar td span {
		min-height: 44px;
	}

	body.single-product .woocommerce-tabs ul.tabs {
		gap: 0.25rem;
	}

	body.single-product .woocommerce-tabs ul.tabs li a {
		min-height: 44px;
		padding: 0.6em 0.85em;
		font-size: var(--wp--preset--font-size--small);
	}

	body.single-product .woocommerce-tabs table.shop_attributes {
		max-width: 100%;
	}

	/* 2-koloms veiligheidslijst is al ≥700px-only (basisregel); op
	   mobiel dus al 1 kolom — hier alleen de padding wat compacter. */
	body.single-product .product-safety__list {
		padding: var(--wp--preset--spacing--sm, 1rem);
	}
}