.single-product .site,
.single-product #content,
.single-product .site-main {
	max-width: 100% !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Content width matches the responsive width used by the header / rest of the site. */
.single-product {
	--tt-content-max: 1120px;
	--tt-content-gutter: 28px;
}

@media (min-width: 1024px) {
	.single-product {
		--tt-content-max: 1200px;
		--tt-content-gutter: 36px;
	}
}

@media (min-width: 1440px) {
	.single-product {
		--tt-content-max: 1440px;
		--tt-content-gutter: 48px;
	}
}

@media (min-width: 1920px) {
	.single-product {
		--tt-content-max: 1460px;
		--tt-content-gutter: 64px;
	}
}

.single-product .product.tt-product-page {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 138px 0 72px;
	background: var(--tt-bg, #ebe4d7);
	color: var(--tt-text);
}

.tt-product-page__container {
	width: min(var(--tt-content-max), calc(100% - (var(--tt-content-gutter) * 2)));
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	column-gap: clamp(56px, 6vw, 96px);
	row-gap: 44px;
	align-items: center;
}

.tt-product-page__breadcrumb {
	grid-column: 1 / -1;
	margin-bottom: 0px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-family: "TT Chocolates", sans-serif;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--tt-gold, #997a38);
}

.tt-product-page__breadcrumb a {
	color: var(--tt-gold, #997a38);
	text-decoration: none;
	transition: color 160ms ease;
}

.tt-product-page__breadcrumb a:hover,
.tt-product-page__breadcrumb a:focus-visible {
	color: #8f6a34;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tt-product-page__breadcrumb-sep,
.tt-product-page__breadcrumb-current {
	color: var(--tt-gold, #997a38);
}

.tt-product-page__content {
	min-width: 0;
}

.tt-product-page__container > .tt-product-page__content {
	align-self: start;
	margin-top: 40px;
}

/* ==========================================================================
   Right column — identical styling to the homepage featured product
   ========================================================================== */

.tt-product-page__content .tt-section-label {
	font-family: "TT Chocolates", sans-serif;
	margin: 0 0 16px;
	font-size: 1rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	font-weight: 700;
	line-height: 1;
	color: var(--tt-gold, #997a38);
}

.tt-product-page__content .tt-featured-title {
	margin: 0 0 24px;
	font-family: var(--tt-font-heading);
	font-size: clamp(3.25rem, 6vw, 4.875rem);
	line-height: 1;
	letter-spacing: -0.06em;
	color: var(--tt-title, #3c1c09);
}

.tt-product-page__content .tt-featured-text {
	margin: 0;
	max-width: 70ch;
	font-family: "TT Chocolates", sans-serif;
	font-size: calc(0.9375rem * var(--tt-text-scale, 1));
	line-height: 1.4;
	letter-spacing: 0.06em;
	font-weight: 500;
	color: #3c1c09;
}

.tt-product-page__content .tt-featured-text p {
	margin: 0;
}

.tt-product-page__content .tt-featured-fields {
	margin-top: 34px;
	margin-left: 22px;
}

.tt-product-page__content .tt-featured-field {
	margin-bottom: 26px;
	display: grid;
	grid-template-columns: 46px minmax(0, 240px);
	column-gap: 12px;
	row-gap: 0;
	align-items: start;
}

/* Icon per attribute: an uploaded image or a matching default SVG (inc/attribute-icons.php). */
.tt-product-page__content .tt-featured-field__icon {
	grid-column: 1;
	grid-row: 1 / span 2;
	align-self: start;
	width: 48px;
	height: 48px;
	border: 1px solid var(--tt-icon-border, #a69d93);
	border-radius: 2px;
	object-fit: contain;
	padding: 8px;
	box-sizing: border-box;
}

.tt-product-page__content .tt-featured-field__icon--svg {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	color: var(--tt-gold, #997a38);
}

.tt-product-page__content .tt-featured-field__icon--svg svg {
	display: block;
	width: 24px;
	height: 24px;
}

.tt-product-page__content .tt-featured-field__label {
	display: flex;
	align-items: center;
	gap: 0;
	margin-bottom: 0;
	line-height: 1;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--tt-stone, #a69d93);
	font-family: "TT Chocolates", sans-serif;
	font-weight: 500;
	grid-column: 2;
	padding-left: 6px;
}

/* Buttons — identical to homepage featured product. */
.tt-btn {
	font-family: "TT Chocolates", sans-serif;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.625rem;
	min-width: 13.125rem;
	padding: 0.625rem 1.125rem;
	border: 1px solid var(--tt-gold);
	border-radius: 5px;
	font-size: 0.95rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	font-weight: 500;
	line-height: 1;
	text-shadow: none;
	transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.tt-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

.tt-featured-content .tt-btn-row {
	gap: 12px;
	margin-top: 42px;
}

.tt-featured-content .tt-btn {
	min-width: 16.25rem;
	min-height: 3rem;
	padding: 1rem 3rem;
	font-size: 0.9rem;
	letter-spacing: 0.12em;
}

.tt-featured-content .tt-btn-primary {
	background: var(--tt-gold);
	color: #f6f1ed;
	border-color: var(--tt-gold);
}

.tt-featured-content .tt-btn-primary:hover,
.tt-featured-content .tt-btn-primary:focus,
.tt-featured-content .tt-btn-primary:focus-visible {
	background: #8f6a34;
	border-color: #8f6a34;
	color: #fff7eb;
}

.tt-featured-content .tt-btn-ghost {
	color: var(--tt-stone, #a69d93);
	border-color: var(--tt-gold, #997a38);
	transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease;
}

.tt-featured-content .tt-btn-ghost:hover,
.tt-featured-content .tt-btn-ghost:focus,
.tt-featured-content .tt-btn-ghost:focus-visible {
	background: var(--tt-gold, #997a38);
	border-color: var(--tt-gold, #997a38);
	color: #f6f1ed;
}

/* ==========================================================================
   Highlight product section (below the hero) — image right, content left
   ========================================================================== */

.tt-product-highlight {
	background: var(--tt-bg, #ebe4d7);
	color: var(--tt-text);
	padding: 72px 0;
}

.tt-product-highlight__container {
	width: min(var(--tt-content-max), calc(100% - (var(--tt-content-gutter) * 2)));
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
	gap: clamp(56px, 6vw, 96px);
	align-items: center;
}

.tt-product-highlight__content,
.tt-product-highlight__media {
	min-width: 0;
}

.tt-product-highlight__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 18px;
	box-shadow: 0 18px 40px rgba(44, 28, 14, 0.08);
}

@media (max-width: 1024px) {
	.tt-product-highlight__container {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

@media (max-width: 767px) {
	.tt-product-highlight {
		padding: 64px 0;
	}
}

/* ==========================================================================
   Extensions slider (below highlight) — dark brown, light text
   ========================================================================== */

.tt-product-extensions {
	background: #2b211a;
	color: var(--tt-light);
	padding: 96px 0;
	/* Container voor de slider-wrap hieronder: 100cqw is daar de sectiebreedte. */
	container-type: inline-size;
	/* Ruimte die één pijl naast de track inneemt (knop 56px + 4px lucht). */
	--tt-arrow-space: 60px;
}

.tt-product-extensions__container {
	width: min(var(--tt-content-max), calc(100% - (var(--tt-content-gutter) * 2)));
	margin: 0 auto;
}

.tt-product-extensions__label {
	margin: 0 0 14px;
	font-family: var(--tt-font-heading);
	font-size: 1rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	font-weight: 700;
	line-height: 1;
	color: rgba(255, 255, 255, 0.8);
}

.tt-product-extensions__title {
	margin: 0 0 44px;
	font-family: var(--tt-font-heading);
	font-size: clamp(2.875rem, 6vw, 4.5rem);
	line-height: 1;
	letter-spacing: -0.06em;
	font-style: italic;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.8);
}

.tt-product-extensions .tt-slider-wrap {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	container-type: inline-size;
}

/* Met pijlen wordt de track zo nodig smaller, zodat links en rechts een pijl
   binnen het scherm past: nooit breder dan de sectie min twee pijlruimtes. */
.tt-product-extensions .tt-slider-wrap--arrows {
	width: min(100%, 100cqw - 2 * var(--tt-arrow-space));
	margin-inline: auto;
}

.tt-product-extensions .tt-slider-track {
	--tt-cards-per-view: 3;
	--tt-track-gap: 26px;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--tt-cards-per-view) - 1) * var(--tt-track-gap)) / var(--tt-cards-per-view));
	gap: var(--tt-track-gap);
	width: 100%;
	margin: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	/* Let the browser handle horizontal panning natively on touch (together with
	   scroll-snap above); pan-y alone disabled it and handed the gesture to the
	   page. The JS pointer-drag stays mouse-only, see product-template.js. */
	touch-action: pan-x pan-y pinch-zoom;
	overscroll-behavior-x: contain;
	cursor: grab;
}

.tt-product-extensions .tt-slider-track::-webkit-scrollbar { display: none; }
.tt-product-extensions .tt-slider-track:active { cursor: grabbing; }

.tt-product-extensions .tt-card {
	scroll-snap-align: start;
	min-height: 0;
	position: relative;
	background: transparent;
	border-radius: 0;
	overflow: visible;
}

.tt-product-extensions .tt-card a {
	display: flex;
	flex-direction: column;
	height: auto;
	color: var(--tt-light);
	text-decoration: none;
}

.tt-product-extensions .tt-card img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 16px;
}

.tt-product-extensions .tt-card-content-below {
	position: static;
	background: transparent;
	padding: 22px 0 0;
}

.tt-product-extensions .tt-card-content-below h3 {
	margin: 0;
	font-family: var(--tt-font-heading);
	font-size: 2rem;
	line-height: 0.92;
	letter-spacing: -0.06em;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.8);
}

.tt-product-extensions .tt-card-content-below p {
	margin: 10px 0 0;
	font-family: "TT Chocolates", sans-serif;
	font-weight: 500;
	font-size: calc(0.9rem * var(--tt-text-scale, 1));
	letter-spacing: 0.11em;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.8);
}

.tt-product-extensions .tt-card-divider {
	display: block;
	width: 56px;
	height: 2px;
	margin-top: 16px;
	background: rgba(245, 239, 228, 0.3);
}

/* "Geschikte tenten": homepage collection card (image fill + overlay). */
.tt-product-extensions--tents .tt-slider-track { --tt-cards-per-view: 4; }

.tt-product-extensions--tents .tt-card {
	border-radius: 16px;
	overflow: hidden;
	min-height: 462px;
	background: var(--tt-card-fallback, #d8d0c3);
}

.tt-product-extensions--tents .tt-card a {
	display: block;
	height: 100%;
}

.tt-product-extensions--tents .tt-card img {
	height: 100%;
	aspect-ratio: auto;
	border-radius: 0;
}

.tt-product-extensions--tents .tt-card-content {
	position: absolute;
	inset: auto 0 0;
	padding: 24px 26px 46px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(20, 15, 12, 0.82) 100%);
}

.tt-product-extensions--tents .tt-card-label {
	margin: 0 0 0.75rem;
	font-family: var(--tt-font-heading);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.1;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 0 0 0.28rem rgba(0, 0, 0, 0.6), 0 0 0.65rem rgba(0, 0, 0, 0.45);
}

.tt-product-extensions--tents .tt-card-content h3 {
	margin: 0;
	font-size: 1.8rem;
	line-height: 0.92;
	color: #fff;
	text-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.5), 0 0 0.75rem rgba(0, 0, 0, 0.38);
}

.tt-product-extensions--tents .tt-card-divider {
	width: 56px;
	margin-top: 16px;
	background: #b9965d;
}

@media (max-width: 767px) {
	.tt-product-extensions--tents .tt-card { min-height: 360px; }
}

.tt-product-extensions .tt-card-below a {
	overflow: hidden;
	border-radius: 16px;
}

.tt-product-extensions .tt-arrow {
	position: absolute;
	top: clamp(110px, 19vw, 190px);
	transform: translateY(-50%);
	z-index: 5;
	width: 56px;
	height: 88px;
	padding: 0;
	border: 0;
	background: transparent;
	appearance: none;
	-webkit-appearance: none;
	color: transparent;
	font-size: 0;
	line-height: 1;
	cursor: pointer;
	transition: transform 220ms ease;
}

.tt-product-extensions .tt-arrow::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 34px;
	height: 34px;
	border-top: 7px solid #b9965d;
	border-right: 7px solid #b9965d;
	border-radius: 3px;
	transition: border-color 220ms ease;
}

.tt-product-extensions .tt-arrow-left::before { transform: translate(-50%, -50%) rotate(-135deg); }
.tt-product-extensions .tt-arrow-right::before { transform: translate(-50%, -50%) rotate(45deg); }

.tt-product-extensions .tt-arrow:hover,
.tt-product-extensions .tt-arrow:focus-visible,
.tt-product-extensions .tt-arrow:focus {
	background: transparent !important;
	transform: translateY(-50%) scale(1.05);
	outline: none;
	box-shadow: none;
}

.tt-product-extensions .tt-arrow:hover::before,
.tt-product-extensions .tt-arrow:focus-visible::before,
.tt-product-extensions .tt-arrow:focus::before {
	border-top-color: #d8b673;
	border-right-color: #d8b673;
}

/* De pijlen staan naast de track, binnen de ruimte die .tt-slider-wrap--arrows
   daarvoor vrijhoudt. De chevron loopt vanaf het knopmidden 24px naar buiten,
   dus hij blijft (ook met de hover-scale) binnen de 56px brede knop. */
.tt-product-extensions .tt-arrow-left { left: calc(-1 * var(--tt-arrow-space)); }
.tt-product-extensions .tt-arrow-right { right: calc(-1 * var(--tt-arrow-space)); }

@container (max-width: 1200px) {
	.tt-product-extensions--tents .tt-slider-track { --tt-cards-per-view: 3; }
}

@container (max-width: 900px) {
	.tt-product-extensions .tt-slider-track { --tt-cards-per-view: 2; }
}

@container (max-width: 640px) {
	.tt-product-extensions .tt-slider-track { --tt-cards-per-view: 1; }
}

/* Uitbreidingen-slider (foto boven, tekst eronder): de pijlen op het midden van
   de 4 / 3 foto, dus op 3/8 van de cardbreedte. De wrap is de container, dus
   100cqw is de trackbreedte; --tt-arrow-cards volgt de --tt-cards-per-view van
   de track hierboven (3 → 2 → 1). */
.tt-product-extensions:not(.tt-product-extensions--tents) .tt-arrow {
	--tt-arrow-cards: 3;
	top: calc((100cqw - (var(--tt-arrow-cards) - 1) * 26px) / var(--tt-arrow-cards) * 0.375);
}

@container (max-width: 900px) {
	.tt-product-extensions:not(.tt-product-extensions--tents) .tt-arrow { --tt-arrow-cards: 2; }
}

@container (max-width: 640px) {
	.tt-product-extensions:not(.tt-product-extensions--tents) .tt-arrow { --tt-arrow-cards: 1; }
}

@media (max-width: 767px) {
	.tt-product-extensions { padding: 64px 0; }

	/* Op een telefoon kost ruimte naast de track te veel cardbreedte, dus de
	   track blijft volle breedte en de pijlen liggen over de cards, in dezelfde
	   ronde knop als de lightbox (lightbox.css). De !important's winnen van de
	   background: transparent !important op :hover/:focus hierboven. */
	.tt-product-extensions .tt-slider-wrap--arrows { width: 100%; }

	.tt-product-extensions .tt-arrow {
		width: 46px;
		height: 46px;
		border: 1px solid rgba(252, 248, 245, 0.35);
		border-radius: 50%;
		background: rgba(35, 23, 4, 0.55);
		transition: transform 220ms ease, background 240ms ease, border-color 240ms ease;
	}
	.tt-product-extensions .tt-arrow::before {
		width: 11px;
		height: 11px;
		border-top: 1.5px solid var(--tt-cream, #fcf8f5);
		border-right: 1.5px solid var(--tt-cream, #fcf8f5);
		border-radius: 0;
	}
	/* Iets uit het midden, zodat de punt van de chevron optisch gecentreerd staat. */
	.tt-product-extensions .tt-arrow-left::before { transform: translate(-35%, -50%) rotate(-135deg); }
	.tt-product-extensions .tt-arrow-right::before { transform: translate(-65%, -50%) rotate(45deg); }
	.tt-product-extensions .tt-arrow-left { left: 8px; }
	.tt-product-extensions .tt-arrow-right { right: 8px; }

	.tt-product-extensions .tt-arrow:focus,
	.tt-product-extensions .tt-arrow:active {
		background: rgba(35, 23, 4, 0.55) !important;
	}
	.tt-product-extensions .tt-arrow:hover,
	.tt-product-extensions .tt-arrow:focus-visible {
		background: var(--tt-gold, #997a38) !important;
		border-color: var(--tt-gold, #997a38);
	}
	.tt-product-extensions .tt-arrow:hover::before,
	.tt-product-extensions .tt-arrow:focus-visible::before,
	.tt-product-extensions .tt-arrow:focus::before {
		border-top-color: var(--tt-cream, #fcf8f5);
		border-right-color: var(--tt-cream, #fcf8f5);
	}
}

/* ==========================================================================
   Gallery (shared look with the verkoop page)
   ========================================================================== */

.tt-verkoop-gallery {
	--tt-gallery-thumb-gap: 16px;
	position: relative;
	display: grid;
	gap: 18px;
	container-type: inline-size;
}

.tt-verkoop-gallery__stage {
	position: relative;
	overflow: hidden;
	border-radius: 18px;
	background:
		linear-gradient(160deg, rgba(255, 248, 239, 0.64), rgba(186, 159, 124, 0.18)),
		rgba(36, 25, 12, 0.08);
	box-shadow:
		0 18px 40px rgba(44, 28, 14, 0.08),
		inset 0 1px 0 rgba(255, 255, 255, 0.4);
	/* A fixed ratio, not calc(100cqw - 200px): subtracting a constant from the
	   width made the frame's shape drift with the column width, so "the format"
	   was never the same twice. */
	height: auto;
	aspect-ratio: 3 / 2;
	isolation: isolate;
}

/* min-*: 100% and max-*: none make the fill immune to the generic
   img { max-width: 100%; height: auto } rules that ship with the parent theme
   and WooCommerce — those are what let a portrait image sit at its own height
   inside the frame instead of covering it. */
.tt-verkoop-gallery__image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	min-width: 100%;
	min-height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
	object-position: center;
	will-change: transform, opacity, filter;
}

/* WooCommerce's .woocommerce img { height: auto; max-width: 100% } (0,1,1)
   outranks the single-class rule above, but only on /product/ pages where the
   body carries .woocommerce. The image then took its natural height, so a
   portrait photo showed only its top strip. Two classes win it back. */
.tt-product-page__gallery .tt-verkoop-gallery__image {
	height: 100%;
	max-width: none;
}

/* Klik op de hoofdfoto opent de lightbox (lightbox.css). */
.tt-product-page__gallery .tt-verkoop-gallery__stage {
	cursor: zoom-in;
}

.tt-product-page__gallery .tt-verkoop-gallery__nav {
	cursor: default;
}

.tt-verkoop-gallery__image--current {
	z-index: 1;
	opacity: 1;
	transform: scale(1);
	transition: opacity 220ms ease, transform 220ms ease;
}

/* Zooms out into place instead of in. At scale(0.94) the incoming image was
   smaller than the stage during the crossfade, so the frame background showed
   through around its edges; every transform step has to stay >= 1 for the image
   to cover the stage at all times. */
.tt-verkoop-gallery__image--next {
	z-index: 2;
	opacity: 0;
	transform: scale(1.06);
	transition: opacity 260ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tt-verkoop-gallery.is-transitioning .tt-verkoop-gallery__image--current {
	opacity: 0;
	transform: scale(1.02);
}

.tt-verkoop-gallery.is-transitioning .tt-verkoop-gallery__image--next {
	opacity: 1;
	transform: scale(1);
}

.tt-verkoop-gallery__overlay {
	position: absolute;
	inset: auto 0 0;
	z-index: 4;
	display: flex;
	justify-content: flex-end;
	padding: 18px 20px;
	background: linear-gradient(180deg, rgba(18, 12, 8, 0) 0%, rgba(18, 12, 8, 0.66) 100%);
}

.tt-verkoop-gallery__nav {
	display: flex;
	align-items: center;
	gap: 10px;
}

.tt-verkoop-gallery__nav-button {
	position: relative;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid rgba(245, 239, 228, 0.24);
	border-radius: 50%;
	background: rgba(22, 18, 13, 0.24);
	backdrop-filter: blur(8px);
	cursor: pointer;
	transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.tt-verkoop-gallery__nav-button::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 12px;
	height: 12px;
	border-top: 2px solid #f5efe4;
	border-right: 2px solid #f5efe4;
}

.tt-verkoop-gallery__nav-button--prev::before {
	transform: translate(-35%, -50%) rotate(-135deg);
}

.tt-verkoop-gallery__nav-button--next::before {
	transform: translate(-65%, -50%) rotate(45deg);
}

.tt-verkoop-gallery__nav-button:hover,
.tt-verkoop-gallery__nav-button:focus-visible {
	outline: none;
	transform: translateY(-1px);
	border-color: rgba(245, 239, 228, 0.48);
	background: rgba(245, 239, 228, 0.14);
}

/* Zonder deze regel kleurt button:focus uit de parent-theme reset de knop
   roze (#c36) zodra je hem aanklikt. Gelijk aan verkoop-template.css. */
.tt-verkoop-gallery__nav-button:focus,
.tt-verkoop-gallery__nav-button:active {
	outline: none;
	border-color: rgba(245, 239, 228, 0.24);
	background: rgba(22, 18, 13, 0.24);
	box-shadow: none;
}

.tt-verkoop-gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--tt-gallery-thumb-gap);
}

.tt-verkoop-gallery__thumb {
	position: relative;
	display: block;
	width: 100%;
	height: calc((100cqw - 2 * var(--tt-gallery-thumb-gap, 16px)) / 3 + 60px);
	padding: 0;
	border: 0;
	border-radius: 14px;
	background: transparent;
	cursor: pointer;
	overflow: hidden;
	box-shadow: 0 12px 24px rgba(44, 28, 14, 0.08);
	transition: transform 220ms ease, box-shadow 220ms ease;
}

.tt-verkoop-gallery__thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: inherit;
	opacity: 0;
	transition: opacity 220ms ease, inset 220ms ease;
}

.tt-verkoop-gallery__thumb.is-active {
	transform: translateY(-3px);
	box-shadow: 0 20px 34px rgba(44, 28, 14, 0.16);
}

.tt-verkoop-gallery__thumb.is-active::after {
	inset: 6px;
	opacity: 1;
}

.tt-verkoop-gallery__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.88) brightness(0.95);
	transform: scale(1);
	transition: transform 260ms ease, filter 260ms ease;
}

/* Zonder deze regel kleurt button:focus uit de parent-theme reset de thumb
   roze (#c36) zodra je hem aanklikt. */
.tt-verkoop-gallery__thumb:focus,
.tt-verkoop-gallery__thumb:active {
	outline: none;
	background: transparent;
	color: inherit;
}

.tt-verkoop-gallery__thumb.is-active img,
.tt-verkoop-gallery__thumb:hover img,
.tt-verkoop-gallery__thumb:focus-visible img {
	filter: saturate(1.02) brightness(1);
	transform: scale(1.03);
}

@media (max-width: 1024px) {
	.tt-product-page__container {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {
	.single-product .product.tt-product-page {
		padding-top: 112px;
	}

	/* Narrower gutter on the variable itself, so the hero, the highlight section
	   and the extensions section all end up on the same content width. This used
	   to be a hardcoded calc(100% - 32px) on the hero container alone, which left
	   the highlight section 24px narrower. */
	.single-product {
		--tt-content-gutter: 16px;
	}

	.tt-product-page__container {
		gap: 28px;
	}

	/* Squarer than the 3 / 2 above, so the main image stays big on a phone. */
	.tt-product-page__gallery .tt-verkoop-gallery__stage {
		aspect-ratio: 1 / 1;
	}

	.tt-product-page__gallery .tt-verkoop-gallery__thumb {
		height: auto;
		aspect-ratio: 1 / 1;
	}

	/* Keep Home -> categorie -> product on a single line. */
	.tt-product-page__breadcrumb {
		flex-wrap: nowrap;
		min-width: 0;
		gap: 6px;
		font-size: 0.625rem;
		letter-spacing: 0.1em;
		white-space: nowrap;
	}

	.tt-product-page__breadcrumb a,
	.tt-product-page__breadcrumb-current {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.tt-product-page__breadcrumb-sep {
		flex: 0 0 auto;
	}

	.tt-product-page__content .tt-featured-fields {
		margin-left: 0;
	}

	.tt-product-page__content .tt-featured-field {
		grid-template-columns: 44px minmax(0, 1fr);
	}

	.tt-featured-content .tt-btn-row {
		width: 100%;
		flex-wrap: wrap;
	}

	.tt-featured-content .tt-btn-row .tt-btn {
		flex: 1 1 100%;
		width: 100%;
		min-width: 0;
		font-size: 0.8125rem;
		min-height: 2.625rem;
		padding: 0.5rem 0.875rem;
	}
}