/* The Cakery: productpagina. Galerij, informatie met afhaaldatum, uitklapbare
   details en verwante producten. Instelbare waarden komen als custom properties
   binnen op .cpr, zodat dit bestand statisch blijft. Laadt bewust geen fonts.

   De mediaband uit het ontwerp zit er niet in: die bestaat al als eigen widget
   (Cakery Mediaband) en die zet je gewoon onder deze neer. */

.cpr,
.cpr * { box-sizing: border-box; }

.cpr {
	--cpr-gold: #A9A083;
	--cpr-gold-deep: #877E63;
	--cpr-ink: #2A2117;
	--cpr-ink-soft: #867C6D;
	--cpr-card: #FFFDF8;
	--cpr-line: rgba(42, 33, 23, .15);
	--cpr-line-soft: rgba(42, 33, 23, .09);
	--cpr-ease: cubic-bezier(.2, .7, .3, 1);

	--cpr-cut-stage: 18px;
	--cpr-cut-card: 12px;
	--cpr-cut-field: 7px;
	--cpr-gap: 52px;
	--cpr-ratio: 1 / 1;
	--cpr-rel-ratio: 4 / 5;

	color: var(--cpr-ink);
	font-weight: 300;
	padding-top: var(--cakery-space-top, 0px);
	padding-bottom: var(--cakery-space-bottom, 0px);
}

.cpr a { color: inherit; text-decoration: none; }

/* ---------- Kruimelpad ---------- */

.cpr__crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 9px;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
	color: var(--cpr-ink-soft);
	font-size: 10px;
	letter-spacing: .22em;
	text-transform: uppercase;
}

.cpr__crumbs li {
	display: flex;
	align-items: center;
	gap: 9px;
}

.cpr__crumbs li + li::before {
	content: "";
	display: block;
	width: 4px;
	height: 4px;
	flex: none;
	background: var(--cpr-gold);
	opacity: .7;
	clip-path: polygon(35% 0, 65% 0, 100% 35%, 100% 65%, 65% 100%, 35% 100%, 0 65%, 0 35%);
}

/* ---------- Hoofdblok ---------- */

.cpr__top {
	display: grid;
	grid-template-columns: 1.08fr .92fr;
	align-items: start;
	gap: var(--cpr-gap);
}

/* ---------- Galerij ---------- */

.cpr__gal { position: sticky; top: 24px; }

/* De hoogte volgt de breedte van de kolom, dus op een breed scherm wordt een
   staande verhouding al snel erg lang. Deze bovengrens knipt dat af; de uitsnede
   doet object-fit, dus de foto blijft goed gevuld. */
.cpr__stage {
	--c: var(--cpr-cut-stage);
	position: relative;
	overflow: hidden;
	aspect-ratio: var(--cpr-ratio);
	max-height: var(--cpr-stage-max, none);
	background: #EDE6D9;
	clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)),
		calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}

/* The class is in there twice: Elementor sets .elementor img to height:auto with
   the same specificity as a single class, and then the load order decides. */
.cpr__shot.cpr__shot {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.02);
	transition: opacity .7s ease, transform 1.4s var(--cpr-ease);
}

.cpr__shot.is-on {
	opacity: 1;
	transform: none;
}

.cpr__badge {
	--c: 5px;
	position: absolute;
	z-index: 2;
	top: 16px;
	left: 16px;
	padding: 8px 14px;
	background: rgba(255, 253, 248, .94);
	color: var(--cpr-ink);
	font-size: 9.5px;
	letter-spacing: .22em;
	text-transform: uppercase;
	clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)),
		calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}

.cpr__thumbs {
	display: grid;
	grid-template-columns: repeat(var(--cpr-thumbs, 4), minmax(0, 1fr));
	gap: 10px;
	margin-top: 10px;
}

.cpr__thumb.cpr__thumb {
	--c: 7px;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	padding: 0;
	background: none;
	border: none;
	opacity: .5;
	cursor: pointer;
	transition: opacity .35s ease;
	clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)),
		calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}

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

.cpr__thumb.is-on,
.cpr__thumb.cpr__thumb:hover { opacity: 1; }

.cpr__thumb.cpr__thumb:focus-visible {
	outline: 1px solid var(--cpr-gold);
	outline-offset: 3px;
	opacity: 1;
}

/* ---------- Informatie ---------- */

.cpr__info,
.cpr__form { min-width: 0; }

.cpr__kicker.cpr__kicker {
	margin: 0;
	color: var(--cpr-gold-deep);
	font-size: 10.5px;
	letter-spacing: .3em;
	text-transform: uppercase;
}

.cpr__title.cpr__title {
	max-width: var(--cpr-title-w, none);
	margin: 12px 0 0;
	color: inherit;
	font-family: 'Myorie', 'Georgia', serif;
	font-weight: 400;
	font-size: clamp(30px, 3.6vw, 46px);
	line-height: 1.12;
	letter-spacing: 0;
	text-transform: none;
}

.cpr__lead.cpr__lead {
	max-width: var(--cpr-lead-w, 46ch);
	margin: 16px 0 0;
	color: var(--cpr-ink-soft);
	font-size: 15px;
	line-height: 1.75;
}

.cpr__lead p { margin: 0 0 .6em; }

.cpr__lead p:last-child { margin-bottom: 0; }

.cpr__priceline {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 20px;
	font-size: 26px;
}

.cpr__priceline del {
	color: var(--cpr-ink-soft);
	font-size: 17px;
}

.cpr__priceline ins { text-decoration: none; }

.cpr__vat {
	margin-left: 5px;
	color: var(--cpr-ink-soft);
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.cpr__people {
	color: var(--cpr-ink-soft);
	font-size: 12.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
}

/* ---------- Pluspunten ---------- */

.cpr__usps {
	display: grid;
	gap: 10px;
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--cpr-line-soft);
}

.cpr__usp.cpr__usp {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin: 0;
	color: var(--cpr-ink-soft);
	font-size: 13.5px;
	line-height: 1.5;
}

.cpr__usp svg {
	width: 14px;
	height: 14px;
	flex: none;
	margin-top: 3px;
	color: var(--cpr-gold);
}

/* ---------- Afhaaldatum ---------- */

.cpr__pick { margin-top: 24px; }

.cpr__label.cpr__label {
	margin: 0 0 11px;
	color: var(--cpr-ink-soft);
	font-size: 10.5px;
	letter-spacing: .22em;
	text-transform: uppercase;
}

.cpr__dateb.cpr__dateb {
	--c: var(--cpr-cut-field);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	width: 100%;
	padding: 15px 18px;
	background: var(--cpr-card);
	color: var(--cpr-ink);
	border: none;
	box-shadow: inset 0 0 0 1px var(--cpr-line);
	font-family: inherit;
	font-size: 13.5px;
	text-align: left;
	cursor: pointer;
	transition: box-shadow .3s ease;
	clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)),
		calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}

.cpr__dateb.cpr__dateb:hover { box-shadow: inset 0 0 0 1px rgba(169, 160, 131, .8); }

.cpr__dateb.is-set { box-shadow: inset 0 0 0 1px rgba(169, 160, 131, .95); }

.cpr__datev {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.cpr__datev small {
	color: var(--cpr-ink-soft);
	font-size: 10.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.cpr__dateb svg {
	width: 14px;
	height: 14px;
	flex: none;
	color: var(--cpr-gold-deep);
	transition: transform .35s ease;
}

.cpr__dateb:hover svg { transform: translateX(2px); }

/* ---------- Aantal en de knop ---------- */

.cpr__buy {
	display: flex;
	gap: 10px;
	margin-top: 22px;
}

.cpr__qty {
	--c: var(--cpr-cut-field);
	display: flex;
	align-items: center;
	background: var(--cpr-card);
	box-shadow: inset 0 0 0 1px var(--cpr-line);
	clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)),
		calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}

.cpr__qtyb.cpr__qtyb {
	width: 44px;
	height: 56px;
	padding: 0;
	background: none;
	color: var(--cpr-ink);
	border: none;
	font-family: inherit;
	font-size: 17px;
	cursor: pointer;
}

.cpr__qtyb.cpr__qtyb:hover { color: var(--cpr-gold-deep); }

/* Het echte veld: WooCommerce leest quantity uit het formulier. Het staat er dus
   wel, alleen zonder de pijltjes van de browser. */
.cpr__qty.cpr__qty input,
.cpr__qtyval.cpr__qtyval {
	width: 40px;
	padding: 0;
	background: none;
	border: none;
	color: var(--cpr-ink);
	font-family: inherit;
	font-size: 14px;
	text-align: center;
	font-variant-numeric: tabular-nums;
	appearance: textfield;
	-moz-appearance: textfield;
}

.cpr__qty input::-webkit-outer-spin-button,
.cpr__qty input::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

.cpr__qty.cpr__qty input:focus-visible {
	outline: 1px solid var(--cpr-gold);
	outline-offset: 2px;
}

.cpr__add.cpr__add {
	--c: 8px;
	position: relative;
	overflow: hidden;
	flex: 1;
	height: 56px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: linear-gradient(135deg, #C9BE9E 0%, #A9A083 52%, #BCB08F 100%);
	color: #231C13;
	border: none;
	box-shadow: 0 8px 24px rgba(42, 33, 23, .15);
	font-family: inherit;
	font-size: 11.5px;
	letter-spacing: .2em;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform .4s var(--cpr-ease), box-shadow .4s ease;
	clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)),
		calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}

/* Rustig van goud naar bruin, met lichtbeige tekst. Geen glansveeg en geen
   sprongetje: die trekken de aandacht naar het effect in plaats van naar de
   knop. Kleur en tekst staan in variabelen, dus je kunt er in Elementor
   overheen. */
.cpr__add.cpr__add:hover:not(.is-off),
.cpr__add.cpr__add:focus-visible:not(.is-off) {
	background-color: var(--cpr-btn-hover-bg, #3A2C1F);
	background-image: none;
	color: var(--cpr-btn-hover-ink, #F5F0E3);
	box-shadow: 0 8px 22px rgba(42, 33, 23, .16);
}

/* Zonder datum is de knop nog geen koopknop maar een uitnodiging. */
.cpr__add.is-off {
	background: none;
	box-shadow: inset 0 0 0 1px var(--cpr-line);
	color: var(--cpr-ink-soft);
}

/* Terwijl het verzoek loopt. Geen tekstwissel, want dan verspringt de knop van
   breedte en oogt hij als een andere knop. */
.cpr__add.is-busy {
	opacity: .7;
	pointer-events: none;
}

.cpr__add.cpr__add.is-off:hover {
	transform: none;
	box-shadow: inset 0 0 0 1px rgba(169, 160, 131, .85);
}

.cpr__note.cpr__note {
	margin: 14px 0 0;
	color: var(--cpr-ink-soft);
	font-size: 12.5px;
	line-height: 1.6;
}

.cpr__note b {
	color: var(--cpr-gold-deep);
	font-weight: 400;
}

.cpr__sold.cpr__sold {
	margin: 22px 0 0;
	padding: 16px 18px;
	background: var(--cpr-card);
	box-shadow: inset 0 0 0 1px var(--cpr-line);
	color: var(--cpr-ink-soft);
	font-size: 13.5px;
	line-height: 1.6;
}

/* ---------- Details ---------- */

.cpr__det {
	display: grid;
	grid-template-columns: 300px 1fr;
	align-items: start;
	gap: var(--cpr-gap);
	padding-top: 82px;
}

.cpr__deth.cpr__deth {
	position: sticky;
	top: 26px;
	margin: 0;
	color: inherit;
	font-family: 'Myorie', 'Georgia', serif;
	font-weight: 400;
	font-size: 30px;
	letter-spacing: 0;
	text-transform: none;
}

.cpr__q { border-bottom: 1px solid var(--cpr-line-soft); }

.cpr__q:first-child { border-top: 1px solid var(--cpr-line-soft); }

.cpr__q summary {
	display: flex;
	justify-content: space-between;
	gap: 18px;
	padding: 19px 0;
	font-size: 14.5px;
	list-style: none;
	cursor: pointer;
}

.cpr__q summary::-webkit-details-marker { display: none; }

.cpr__q summary:focus-visible {
	outline: 2px solid var(--cpr-gold);
	outline-offset: 2px;
}

.cpr__plus {
	position: relative;
	width: 11px;
	height: 11px;
	flex: none;
	margin-top: 5px;
}

.cpr__plus::before,
.cpr__plus::after {
	content: "";
	position: absolute;
	background: var(--cpr-gold-deep);
	transition: transform .35s ease, opacity .35s ease;
}

.cpr__plus::before {
	top: 5px;
	left: 0;
	width: 11px;
	height: 1px;
}

.cpr__plus::after {
	top: 0;
	left: 5px;
	width: 1px;
	height: 11px;
}

.cpr__q[open] .cpr__plus::after {
	transform: scaleY(0);
	opacity: 0;
}

.cpr__body.cpr__body {
	max-width: var(--cpr-body-w, 62ch);
	margin: 0;
	padding: 0 0 20px;
	color: var(--cpr-ink-soft);
	font-size: 14px;
	line-height: 1.75;
}

.cpr__body p { margin: 0 0 .7em; }

.cpr__body p:last-child { margin-bottom: 0; }

.cpr__specs {
	display: grid;
	gap: 9px;
	margin: 0;
	padding: 0 0 20px;
	color: var(--cpr-ink-soft);
	font-size: 14px;
}

.cpr__specs div {
	display: flex;
	gap: 16px;
}

.cpr__specs dt {
	min-width: 130px;
	color: var(--cpr-ink);
}

.cpr__specs dd { margin: 0; }

/* ---------- Verwante producten ---------- */

.cpr__also {
	border-top: 1px solid var(--cpr-line-soft);
	margin-top: 70px;
	padding-top: 70px;
}

.cpr__alsoh {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 28px;
}

.cpr__alsot.cpr__alsot {
	margin: 0;
	color: inherit;
	font-family: 'Myorie', 'Georgia', serif;
	font-weight: 400;
	font-size: clamp(24px, 2.6vw, 32px);
	letter-spacing: 0;
	text-transform: none;
}

.cpr__alsol.cpr__alsol {
	padding-bottom: 4px;
	border-bottom: 1px solid rgba(169, 160, 131, .5);
	color: var(--cpr-gold-deep);
	font-size: 10.5px;
	letter-spacing: .2em;
	text-transform: uppercase;
	transition: color .3s ease, border-color .3s ease;
}

.cpr__alsol.cpr__alsol:hover,
.cpr__alsol.cpr__alsol:focus-visible {
	color: var(--cpr-ink);
	border-color: var(--cpr-gold);
}

.cpr__alsog {
	display: grid;
	grid-template-columns: repeat(var(--cpr-also-cols, 4), minmax(0, 1fr));
	gap: 18px;
}

.cpr__rel { display: block; }

/* De kaartjes onderaan hebben hun eigen verhouding: die blijven staand, ook als
   de hoofdfoto vierkant is. */
.cpr__relm {
	--c: var(--cpr-cut-card);
	display: block;
	overflow: hidden;
	aspect-ratio: var(--cpr-rel-ratio, 4 / 5);
	background: #EDE6D9;
	clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)),
		calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}

.cpr__relm.cpr__relm img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1s var(--cpr-ease);
}

.cpr__rel:hover .cpr__relm img { transform: scale(1.05); }

.cpr__relr {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 12px;
	padding-top: 11px;
	border-top: 1px solid var(--cpr-line-soft);
	font-size: 14px;
}

.cpr__relp { color: var(--cpr-ink-soft); }

/* ---------- Meelopende koopbalk ---------- */

.cpr__bar {
	position: fixed;
	z-index: 60;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(255, 253, 248, .96);
	border-top: 1px solid var(--cpr-line-soft);
	transform: translateY(105%);
	transition: transform .45s var(--cpr-ease);
}

.cpr__bar.is-on { transform: none; }

.cpr__barin {
	display: flex;
	align-items: center;
	gap: 18px;
	width: min(var(--cpr-bar-w, 1300px), 100%);
	margin: 0 auto;
	padding: 12px 28px;
}

.cpr__bart.cpr__bart {
	--c: 7px;
	width: 44px;
	height: 44px;
	flex: none;
	object-fit: cover;
	clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)),
		calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}

.cpr__barx {
	flex: 1;
	min-width: 0;
}

.cpr__barn {
	overflow: hidden;
	font-size: 14px;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.cpr__barm {
	color: var(--cpr-ink-soft);
	font-size: 11.5px;
}

.cpr__bar .cpr__add {
	flex: none;
	width: 210px;
	height: 44px;
}

/* ---------- Klein scherm ---------- */

@media (max-width: 1000px) {
	.cpr {
		--cpr-gap: 34px;
	}

	.cpr__top,
	.cpr__det { grid-template-columns: 1fr; }

	.cpr__gal { position: static; }

	.cpr__deth { position: static; }

	.cpr__alsog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
	.cpr__bart,
	.cpr__barm { display: none; }

	.cpr__bar .cpr__add { width: 170px; }
}

@media (prefers-reduced-motion: reduce) {
	.cpr,
	.cpr *,
	.cpr-cal,
	.cpr-cal * {
		transition: none !important;
		animation: none !important;
	}
}