/*! Cakery Shop. Instelbare waarden komen als custom properties binnen op
 *  .cshop, zodat dit bestand statisch blijft. Laadt bewust geen fonts.
 *  Legt zelf geen paginabreedte op: dat doet de container van Rey of Elementor. */

/* The class is in there twice. The Elementor kit sets h1 to h3 and p with a
   class plus an element (.elementor-kit-000 h1), and that beats a single class.
   Without this doubling the kit would decide the colour and the typeface here.
   Your own settings in the widget still come first: Elementor writes those with
   the wrapper included and so more specifically still. */

/* The class is in there twice. A theme rule like ".elementor button" is a class
   plus an element and so beats a single class; which of the two wins would
   otherwise depend on the order the stylesheets load in. */

.cshop {
	--cshop-gold: #A9A083;
	--cshop-gold-deep: #877E63;
	--cshop-ink: #2A2117;
	--cshop-ink-soft: #867C6D;
	--cshop-paper: #FBF8F2;
	--cshop-line: rgba(42, 33, 23, .15);
	--cshop-line-soft: rgba(42, 33, 23, .09);
	--cshop-cols: 4;
	--cshop-gap: 26px;
	--cshop-cut: 14px;
	--cshop-cut-btn: 7px;
	--cshop-cut-chip: 6px;
	--cshop-ratio: 4 / 5;
	--cshop-zoom: 1.05;
	--cshop-bar-top: 0px;
	--cshop-bar-x: 15px;
	color: var(--cshop-ink);
	/* Vertical breathing room: the site setting wins, with this section's own
	   design value as the fallback. */
	padding-top: var(--cakery-space-top, 0px);
	padding-bottom: var(--cakery-space-bottom, 0px);
}

.cshop-oct {
	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));
}

/* ---------- Kop ---------- */

.cshop__crumbs {
	margin: 0;
	padding: 26px 0 0;
	color: var(--cshop-ink-soft);
	font-size: 10.5px;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.cshop__crumbs a { color: inherit; text-decoration: none; }
.cshop__crumbs a:hover { color: var(--cshop-ink); }

.cshop__crumbs .cshop__sep {
	margin: 0 9px;
	color: var(--cshop-gold);
	font-style: normal;
}

.cshop__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 34px;
	padding: 34px 0 30px;
}
.cshop__kicker.cshop__kicker {
	margin: 0;
	color: var(--cshop-gold-deep);
	font-size: 10.5px;
	letter-spacing: .3em;
	text-transform: uppercase;
}
.cshop__title.cshop__title {
	max-width: var(--cshop-title-w, none);
	margin: 12px 0 0;
	font-family: "Myorie", Georgia, serif;
	font-size: clamp(34px, 4.6vw, 54px);
	font-weight: 400;
	line-height: 1.08;
}
.cshop__sub.cshop__sub {
	max-width: var(--cshop-sub-w, 50ch);
	margin: 14px 0 0;
	color: var(--cshop-ink-soft);
	font-size: 15px;
	line-height: 1.7;
}
.cshop__count.cshop__count {
	margin: 0;
	padding-bottom: 8px;
	color: var(--cshop-ink-soft);
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* ---------- Filterbalk ---------- */

/* Blijft plakken onder een eventuele vaste header van het thema; die hoogte
   zet je met --cshop-bar-top, anders schuift de balk eronder. */
/* Hoog in de stapeling, want de uitklappende sorteerlijst hangt hier onderuit en
   moet over de kaarten heen vallen. Die kaarten hebben een clip-path en vormen
   daarmee een eigen laag.

   Geen backdrop-filter meer: de achtergrond is dekkend, dus er valt niets te
   vervagen. Het kostte alleen een aparte rasterlaag bij elke scrollstap, en zo'n
   laag kan uitstekende kinderen afsnijden. */
.cshop__bar {
	position: sticky;
	top: var(--cshop-bar-top);
	z-index: 60;
	border-top: 1px solid var(--cshop-line-soft);
	border-bottom: 1px solid var(--cshop-line-soft);
	background: var(--cshop-paper);
}

.cshop__barin {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 22px;
	/* Wat lucht aan de zijkanten, anders raken de chips links en het
	   sorteerveld rechts de rand van de balk. */
	padding: 14px var(--cshop-bar-x, 15px);
}

.cshop__chips {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 7px;
}

.cshop__chipsep {
	width: 1px;
	height: 20px;
	margin: 0 6px;
	background: var(--cshop-line);
}

.cshop__chip.cshop__chip {
	--c: var(--cshop-cut-chip);
	padding: 10px 17px;
	background: transparent;
	color: var(--cshop-chip-ink, var(--cshop-ink));
	border: none;
	box-shadow: inset 0 0 0 1px var(--cshop-line);
	font-family: inherit;
	font-size: 11.5px;
	letter-spacing: .12em;
	white-space: nowrap;
	cursor: pointer;
	transition: background .3s ease, color .3s ease, box-shadow .3s ease;
}

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

/* De gekozen chip. Deze kleuren lopen via eigen variabelen, zodat de kleur van
   een gewone chip ze niet overschrijft: Elementor schrijft die met de wrapper
   erbij en dat is specifieker dan deze regel. */
.cshop__chip.is-on {
	background: var(--cshop-chip-on-bg, var(--cshop-ink));
	color: var(--cshop-chip-on-ink, var(--cshop-paper));
	box-shadow: none;
}

.cshop__chip--attr.is-on {
	background: var(--cshop-gold);
	color: #231C13;
}

.cshop__chip:focus-visible {
	outline: 1px solid var(--cshop-gold);
	outline-offset: 3px;
}

.cshop__sort {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--cshop-ink-soft);
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.cshop__sortlabel { white-space: nowrap; }

/* De rand en de vorm zitten op het omhulsel, niet op het veld zelf. Zo bepaalt
   het veld zijn eigen breedte aan de hand van de langste optie en kan de tekst
   niet meer afgekapt worden. */
.cshop__sortwrap {
	--c: var(--cshop-cut-chip);
	position: relative;
	display: inline-flex;
	align-items: center;
	box-shadow: inset 0 0 0 1px var(--cshop-line);
	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));
}

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

/* Een outline zou door de clip-path van het omhulsel worden weggesneden, dus is
   de focusmarkering een dikkere gouden rand. */
.cshop__sortwrap:focus-within { box-shadow: inset 0 0 0 2px var(--cshop-gold); }

/* De eigen pijl. De pijl van het besturingssysteem past niet bij de rest en
   ziet er op elk platform anders uit. */
.cshop__sortwrap::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 15px;
	width: 7px;
	height: 7px;
	border-right: 1px solid var(--cshop-gold);
	border-bottom: 1px solid var(--cshop-gold);
	transform: translateY(-50%) rotate(45deg);
	pointer-events: none;
	transition: border-color .3s ease;
}

.cshop__sortwrap:hover::after { border-color: var(--cshop-ink); }

/* Twee keer de class, want een themaregel op select is een class plus een
   element en zou anders van een enkele class winnen. */
.cshop__sortwrap.cshop__sortwrap select {
	appearance: none;
	-webkit-appearance: none;
	/* Geen breedte: het veld meet zichzelf op aan de langste optie. Met
	   width:100% en border-box zou de padding van de tekstbreedte afgaan en werd
	   "Onze volgorde" afgekapt. Even veel ruimte links als rechts, zodat de
	   tekst optisch in het midden staat en niet tegen de pijl aan botst. */
	padding: 11px 34px;
	background: transparent;
	color: var(--cshop-ink);
	border: none;
	box-shadow: none;
	font-family: inherit;
	font-size: 12.5px;
	letter-spacing: .04em;
	text-align: center;
	text-align-last: center;
	text-transform: none;
	cursor: pointer;
}

.cshop__sortwrap.cshop__sortwrap select:focus { outline: none; }

/* Zolang het script niet gedraaid heeft staat het gewone veld er; dan tekent het
   besturingssysteem de uitgeklapte lijst en zijn alleen de kleuren van ons. */
.cshop__sortwrap.cshop__sortwrap option {
	background: var(--cshop-paper);
	color: var(--cshop-ink);
	text-align: left;
}

/* ---------- De eigen keuzelijst ----------
   Zodra het script draait komt hier onze eigen knop en lijst voor in de plaats.
   Alleen zo blijft ook de uitgeklapte lijst in de huisstijl; die van het
   besturingssysteem valt niet te stylen. */

.cshop__sortbtn.cshop__sortbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-width: 11em;
	padding: 11px 22px;
	background: transparent;
	color: var(--cshop-ink);
	border: none;
	font-family: inherit;
	font-size: 12.5px;
	letter-spacing: .04em;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
}

.cshop__sortval { flex: 1; }

.cshop__sortarrow {
	width: 7px;
	height: 7px;
	flex: none;
	margin-top: -3px;
	border-right: 1px solid var(--cshop-gold);
	border-bottom: 1px solid var(--cshop-gold);
	transform: rotate(45deg);
	transition: transform .3s var(--cshop-ease, ease), border-color .3s ease;
}

.cshop__sortwrap.is-open .cshop__sortarrow {
	margin-top: 2px;
	transform: rotate(-135deg);
	border-color: var(--cshop-ink);
}

/* Het omhulsel mag niet meer clippen zodra de lijst eronder hangt; die valt er
   immers buiten. De vorm verhuist daarom naar de knop. */
.cshop__sortwrap.is-custom {
	overflow: visible;
	clip-path: none;
	box-shadow: none;
}

/* Het hidden-attribuut van het veld is een attribuutselector in de
   browserstijl, en een themaregel als ".rey-siteContent select" verslaat die.
   Vandaar hier nog een keer, sterker. */
.cshop__sortwrap.is-custom select {
	display: none;
}

/* Het pijltje van het gewone veld hoort bij dat veld. De eigen knop heeft er
   zelf een, dus hier weg; anders staan er twee naast elkaar. */
.cshop__sortwrap.is-custom::after {
	content: none;
}

.cshop__sortwrap.is-custom .cshop__sortbtn {
	--c: var(--cshop-cut-chip);
	box-shadow: inset 0 0 0 1px var(--cshop-line);
	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));
}

.cshop__sortwrap.is-custom .cshop__sortbtn:hover,
.cshop__sortwrap.is-open .cshop__sortbtn {
	box-shadow: inset 0 0 0 1px rgba(169, 160, 131, .8);
}

.cshop__sortwrap.is-custom .cshop__sortbtn:focus-visible {
	box-shadow: inset 0 0 0 2px var(--cshop-gold);
	outline: none;
}

.cshop__sortlist {
	--c: var(--cshop-cut-chip);
	position: absolute;
	z-index: 20;
	/* Het label eromheen staat in hoofdletters met veel spatiëring; dat hoort
	   hier niet bij. */
	letter-spacing: .04em;
	text-transform: none;
	top: calc(100% + 8px);
	right: 0;
	min-width: 100%;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--cshop-paper);
	box-shadow: inset 0 0 0 1px var(--cshop-line), 0 18px 40px rgba(42, 33, 23, .16);
	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));
}

.cshop__sortlist:focus { outline: none; }

.cshop__sortopt {
	padding: 9px 16px;
	color: var(--cshop-ink-soft);
	font-size: 12.5px;
	letter-spacing: .04em;
	white-space: nowrap;
	cursor: pointer;
	transition: background .25s ease, color .25s ease;
}

.cshop__sortopt:hover { color: var(--cshop-ink); background: rgba(169, 160, 131, .14); }

/* De gekozen regel, met het octagoontje uit het logo ervoor. */
.cshop__sortopt.is-on {
	position: relative;
	padding-left: 28px;
	color: var(--cshop-ink);
}

.cshop__sortopt.is-on::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 13px;
	width: 5px;
	height: 5px;
	margin-top: -2.5px;
	background: var(--cshop-gold);
	clip-path: polygon(35% 0, 65% 0, 100% 35%, 100% 65%, 65% 100%, 35% 100%, 0 65%, 0 35%);
}

@media (prefers-reduced-motion: reduce) {
	.cshop__sortarrow,
	.cshop__sortopt { transition: none; }
}

/* ---------- Raster ---------- */

.cshop__grid {
	display: grid;
	grid-template-columns: repeat(var(--cshop-cols), minmax(0, 1fr));
	gap: var(--cshop-gap);
	padding: 38px 0 26px;
}

.cshop-card { display: flex; flex-direction: column; }
.cshop-card.is-hidden { display: none; }

.cshop-card__media {
	--c: var(--cshop-cut);
	position: relative;
	aspect-ratio: var(--cshop-ratio);
	overflow: hidden;
	background: #EDE6D9;
}

/* De dekkende link over de foto. Onder de hart- en winkelmandknop, die op
   z-index 2 staan, zodat die gewoon blijven werken. */
.cshop-card__link {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
}

/* The class is in there twice on purpose. Elementor sets .elementor img to
   height:auto, with exactly the same specificity as a single class; which of the
   two wins then depends on the order the stylesheets come in. That order is not
   fixed, so we give this one the last word here. */
.cshop-card__media.cshop-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .9s cubic-bezier(.2, .7, .3, 1);
}

.cshop-card:hover .cshop-card__media img { transform: scale(var(--cshop-zoom)); }

.cshop-card__badge {
	--c: 5px;
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	padding: 7px 12px;
	background: rgba(251, 248, 242, .94);
	color: var(--cshop-ink);
	font-size: 9.5px;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.cshop-card__fav {
	--c: 6px;
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	display: grid;
	width: 34px;
	height: 34px;
	place-items: center;
	padding: 0;
	background: rgba(251, 248, 242, .92);
	color: var(--cshop-ink);
	border: none;
	opacity: 0;
	transform: translateY(-4px);
	cursor: pointer;
	transition: opacity .35s ease, transform .35s ease, color .3s ease;
}

.cshop-card__fav svg { width: 16px; height: 16px; }
.cshop-card__fav:hover { color: #A33B4A; }

.cshop-card__add {
	--c: var(--cshop-cut-btn);
	position: absolute;
	right: 14px;
	bottom: 14px;
	left: 14px;
	z-index: 2;
	padding: 13px 0;
	background: rgba(251, 248, 242, .95);
	color: var(--cshop-ink);
	border: none;
	font-family: inherit;
	font-size: 10.5px;
	letter-spacing: .18em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	opacity: 0;
	transform: translateY(10px);
	cursor: pointer;
	transition: opacity .4s ease, transform .4s cubic-bezier(.2, .7, .3, 1), background .3s ease;
}

.cshop-card__add:hover { background: #FFFFFF; }

.cshop-card:hover .cshop-card__fav,
.cshop-card:hover .cshop-card__add,
.cshop-card:focus-within .cshop-card__fav,
.cshop-card:focus-within .cshop-card__add {
	opacity: 1;
	transform: none;
}

.cshop-card__media .added_to_cart { display: none; }

.cshop-card__body { padding: 16px 2px 0; }
.cshop-card__name.cshop-card__name {
	margin: 0;
	font-size: 16.5px;
	font-weight: 400;
	line-height: 1.3;
}

.cshop-card__name a { color: inherit; text-decoration: none; }
/* Vaste hoogte, zodat de voetregels van alle kaarten op een lijn liggen. */
.cshop-card__note.cshop-card__note {
	display: -webkit-box;
	overflow: hidden;
	margin: 5px 0 0;
	color: var(--cshop-ink-soft);
	font-size: 13px;
	line-height: 1.5;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	min-height: calc(2 * 1.5em);
	min-height: 2lh;
}

.cshop-card__foot {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-top: 12px;
	padding-top: 11px;
	border-top: 1px solid var(--cshop-line-soft);
}

.cshop-card__meta {
	color: var(--cshop-ink-soft);
	font-size: 10.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.cshop-card__price { font-size: 15.5px; font-weight: 400; }
.cshop-card__price del { margin-right: 6px; opacity: .5; }
.cshop-card__price ins { text-decoration: none; }
/* ---------- Leeg en meer laden ---------- */
.cshop__empty.cshop__empty {
	display: none;
	padding: 60px 0;
	color: var(--cshop-ink-soft);
	font-size: 15px;
	text-align: center;
}

.cshop__empty.is-on { display: block; }

.cshop__more {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 24px 0 90px;
}
.cshop__moretxt.cshop__moretxt {
	margin: 0;
	color: var(--cshop-ink-soft);
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.cshop__morebar {
	position: relative;
	overflow: hidden;
	width: 190px;
	height: 1px;
	background: var(--cshop-line);
}

.cshop__morebar span {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background: var(--cshop-gold);
	transition: width .3s ease;
}

.cshop__morebtn.cshop__morebtn {
	--c: 8px;
	position: relative;
	overflow: hidden;
	margin-top: 6px;
	padding: 17px 40px;
	background: transparent;
	color: var(--cshop-ink);
	border: none;
	box-shadow: inset 0 0 0 1px var(--cshop-line);
	font-family: inherit;
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .35s ease, color .35s ease, box-shadow .35s ease;
}

.cshop__morebtn.cshop__morebtn:hover {
	background: var(--cshop-ink);
	color: var(--cshop-paper);
	box-shadow: none;
}

.cshop__morebtn[hidden] { display: none; }

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
	.cshop { --cshop-cols: 3; --cshop-gap: 20px; }
}

@media (max-width: 820px) {
	.cshop { --cshop-cols: 2; --cshop-gap: 16px; }

	.cshop__barin { gap: 14px; }

	.cshop__sort {
		width: 100%;
		justify-content: space-between;
	}

	.cshop-card__fav,
	.cshop-card__add {
		opacity: 1;
		transform: none;
	}

	.cshop-card__note { min-height: 0; }
}

@media (hover: none) {
	.cshop-card__fav,
	.cshop-card__add {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cshop-card__media.cshop-card__media img,
	.cshop-card__fav,
	.cshop-card__add,
	.cshop__morebar span {
		transition: none;
	}

	.cshop-card:hover .cshop-card__media img { transform: none; }
}

/* De balk staat boven de voetregel, dus de streep hoort bij die voet en niet
   hier. Anders staan er twee haarlijnen vlak onder elkaar. */
.cshop-card__body .calg {
	margin-top: 10px;
	padding-top: 0;
	border-top: none;
}