/* The Cakery: the empty basket.
 *
 * Everything sits under .cke. The reset lives in :where() and so weighs nothing;
 * see the note at the top of cakery-thanks.css for why that matters here. */

.cke {
	--cke-gold: #A9A083;
	--cke-gold-light: #D8D2BC;
	--cke-gold-deep: #857C60;
	--cke-ink: #241C16;
	--cke-linen: #F7F3EA;
	--cke-cream: #FFFDF8;
	--cke-body: #4A4238;
	--cke-muted: #857D72;
	--cke-hairline: rgba(169, 160, 131, .34);

	--cke-bevel: 22px;
	--cke-display: "Myorie", "Cormorant Garamond", Georgia, serif;

	color: var(--cke-body);
	background: var(--cke-linen);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

.cke,
.cke *,
.cke *::before,
.cke *::after { box-sizing: border-box; }

.cke :where(p, h1, h2, h3, ul, ol, li) { margin: 0; padding: 0; }

.cke :where(ul, ol) { list-style: none; }

.cke a { color: inherit; }

.cke-wrap { width: min(var(--cke-wrap-w, 1080px), 100% - 40px); margin-inline: auto; }

.cke-kicker.cke-kicker {
	margin: 0;
	color: var(--cke-gold-deep);
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: .34em;
	text-transform: uppercase;
}

/* ---------- The empty box ---------- */

.cke-top {
	position: relative;
	padding: clamp(56px, 9vw, 96px) 0 clamp(40px, 6vw, 64px);
	text-align: center;
}

/* A warm glow behind the box, like the light strips in the shop. */
.cke-top::before {
	content: "";
	position: absolute;
	z-index: 0;
	top: clamp(30px, 5vw, 60px);
	left: 50%;
	width: min(560px, 90%);
	height: 320px;
	transform: translateX(-50%);
	background: radial-gradient(closest-side, rgba(169, 160, 131, .26), rgba(169, 160, 131, 0) 70%);
	pointer-events: none;
}

.cke-top > * {
	position: relative;
	z-index: 1;
}

.cke-box {
	display: block;
	width: min(300px, 72vw);
	height: auto;
	margin: 0 auto 30px;
}

.cke-box .line {
	fill: none;
	stroke: var(--cke-gold-deep);
	stroke-width: 1.4;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.cke-box .thin {
	stroke: var(--cke-gold);
	stroke-width: 1;
	opacity: .65;
}

.cke-box .fill-soft {
	fill: rgba(169, 160, 131, .10);
	stroke: none;
}

.cke-box .seal { fill: var(--cke-gold); }

.cke-box .ghost {
	fill: none;
	stroke: var(--cke-gold);
	stroke-width: 1.2;
	stroke-dasharray: 5 7;
	opacity: .5;
}

.cke-flap-l {
	transform-origin: 62px 96px;
	animation: cke-flap-l 7s ease-in-out infinite;
}

.cke-flap-r {
	transform-origin: 218px 96px;
	animation: cke-flap-r 7s ease-in-out infinite;
}

.cke-ghost-g {
	transform-origin: 140px 128px;
	animation: cke-breathe 5s ease-in-out infinite;
}

@keyframes cke-flap-l {
	0%, 100% { transform: rotate(0deg); }
	50% { transform: rotate(-3.5deg); }
}

@keyframes cke-flap-r {
	0%, 100% { transform: rotate(0deg); }
	50% { transform: rotate(3.5deg); }
}

@keyframes cke-breathe {
	0%, 100% { opacity: .45; transform: scale(1); }
	50% { opacity: .8; transform: scale(1.03); }
}

.cke-title.cke-title {
	max-width: var(--cke-title-w, none);
	margin: 14px 0 16px;
	color: var(--cke-ink);
	font-family: var(--cke-display);
	font-size: clamp(2.4rem, 6.4vw, 3.9rem);
	font-weight: 400;
	line-height: 1.04;
	letter-spacing: 0;
	text-transform: none;
}

.cke-title em {
	color: var(--cke-gold-deep);
	font-style: italic;
}

/* The auto margins that centre the block. In the mockup they lost out to the
   reset and the text stayed stuck on the left; twice the class fixes that. */
.cke-lead.cke-lead {
	max-width: var(--cke-lead-w, 44ch);
	margin: 0 auto 30px;
	color: var(--cke-muted);
	font-weight: 300;
}

.cke-actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 14px;
}

.cke-btn.cke-btn {
	position: relative;
	display: inline-block;
	padding: 15px 34px;
	border: 0;
	font-family: inherit;
	font-size: .78rem;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: transform .25s ease, box-shadow .25s ease;
	clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px),
		calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
}

/* Colour and gradient separately, so gold stays standing when a theme clears
   background-image on links. */
.cke-btn.primary {
	background-color: var(--cke-gold);
	background-image: linear-gradient(135deg, #BDB498 0%, var(--cke-gold) 45%, var(--cke-gold-deep) 100%);
	color: #FFFDF8;
	box-shadow: 0 10px 26px rgba(169, 160, 131, .32);
}

.cke-btn.primary::after {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 1px;
	background: rgba(255, 255, 255, .45);
}

.cke-btn.ghost {
	background: var(--cke-cream);
	color: var(--cke-ink);
	box-shadow: inset 0 0 0 1px var(--cke-gold-light);
}

/* 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. */
.cke-btn.primary:hover,
.cke-btn.primary:focus-visible {
	background-color: var(--cke-btn-hover-bg, #3A2C1F);
	background-image: none;
	color: var(--cke-btn-hover-ink, #F5F0E3);
	box-shadow: 0 8px 22px rgba(42, 33, 23, .16);
}

.cke-btn.ghost:hover,
.cke-btn.ghost:focus-visible {
	background: var(--cke-cream);
	box-shadow: inset 0 0 0 1px var(--cke-gold);
}

.cke-btn.cke-btn:focus-visible {
	outline: 2px solid var(--cke-gold-deep);
	outline-offset: 3px;
}

.cke-div {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	max-width: 360px;
	margin: clamp(40px, 6vw, 60px) auto 0;
}

.cke-div span {
	flex: 1;
	height: 1px;
	background: linear-gradient(to right, transparent, var(--cke-hairline), transparent);
}

.cke-div i {
	width: 9px;
	height: 9px;
	background: var(--cke-gold);
	clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
}

/* ---------- The categories ---------- */

.cke-cats {
	padding: clamp(40px, 6vw, 60px) 0 clamp(48px, 7vw, 72px);
	text-align: center;
}

.cke-cats-t.cke-cats-t {
	margin: 8px 0 30px;
	color: var(--cke-ink);
	font-family: var(--cke-display);
	font-size: clamp(1.7rem, 3.4vw, 2.3rem);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0;
	text-transform: none;
}

.cke-tiles {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.cke-tile {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--cke-ink);
	text-decoration: none;
	clip-path: polygon(var(--cke-bevel) 0, calc(100% - var(--cke-bevel)) 0, 100% var(--cke-bevel),
		100% calc(100% - var(--cke-bevel)), calc(100% - var(--cke-bevel)) 100%, var(--cke-bevel) 100%,
		0 calc(100% - var(--cke-bevel)), 0 var(--cke-bevel));
}

/* Twice the class: a theme rule like .elementor img {height: auto} is a class
   plus an element and would otherwise beat this one. */
.cke-tile img.cke-tile-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .8s cubic-bezier(.2, .7, .3, 1);
}

.cke-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(36, 28, 22, .82) 0%, rgba(36, 28, 22, .34) 46%, rgba(36, 28, 22, .08) 100%),
		linear-gradient(rgba(169, 160, 131, .30), rgba(169, 160, 131, .30));
	transition: opacity .5s ease;
}

.cke-tile:hover img.cke-tile-img { transform: scale(1.06); }

.cke-tile:hover::after { opacity: .82; }

.cke-tile-in {
	position: absolute;
	z-index: 2;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 22px 18px;
	text-align: left;
}

.cke-tile-in strong {
	display: block;
	color: var(--cke-cream);
	font-family: var(--cke-display);
	font-size: 1.35rem;
	font-weight: 400;
	line-height: 1.15;
}

.cke-tile-in span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 7px;
	color: var(--cke-gold-light);
	font-size: .68rem;
	letter-spacing: .22em;
	text-transform: uppercase;
}

.cke-tile-in span i {
	width: 6px;
	height: 6px;
	background: var(--cke-gold-light);
	clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
}

.cke-tile:focus-visible {
	outline: 2px solid var(--cke-gold-deep);
	outline-offset: 4px;
}

/* ---------- The dark band ---------- */

.cke-band {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin-bottom: clamp(56px, 8vw, 88px);
	padding: clamp(38px, 5vw, 54px) clamp(24px, 4vw, 46px);
	background: radial-gradient(120% 140% at 50% 0%, #3A2E24 0%, var(--cke-ink) 60%, #1B1510 100%);
	color: rgba(247, 243, 234, .72);
	text-align: left;
	clip-path: polygon(var(--cke-bevel) 0, calc(100% - var(--cke-bevel)) 0, 100% var(--cke-bevel),
		100% calc(100% - var(--cke-bevel)), calc(100% - var(--cke-bevel)) 100%, var(--cke-bevel) 100%,
		0 calc(100% - var(--cke-bevel)), 0 var(--cke-bevel));
}

.cke-item {
	padding-top: 16px;
	border-top: 1px solid rgba(169, 160, 131, .3);
}

.cke-item strong {
	display: block;
	margin-bottom: 6px;
	color: var(--cke-gold-light);
	font-size: .95rem;
	font-weight: 500;
}

.cke-item p {
	font-size: .88rem;
	font-weight: 300;
}

.cke-item a {
	color: var(--cke-gold-light);
	border-bottom: 1px solid rgba(216, 210, 188, .4);
	text-decoration: none;
}

.cke-item a:hover { color: var(--cke-cream); }

/* ---------- WooCommerce's notice ----------
   "Your cart is currently empty" with a button back to the shop. This widget says
   the same thing, so it would be there twice. This rule only touches pages where
   the widget is, because this file is only loaded there. */

.cke-hidewoo .cart-empty,
.cke-hidewoo .return-to-shop,
.cke-hidewoo .wc-empty-cart-message { display: none; }

/* ---------- Coming in ---------- */

.cke-rise {
	opacity: 0;
	transform: translateY(16px);
	animation: cke-rise .8s cubic-bezier(.2, .8, .3, 1) forwards;
}

.cke-rise.d1 { animation-delay: .1s; }
.cke-rise.d2 { animation-delay: .22s; }
.cke-rise.d3 { animation-delay: .34s; }
.cke-rise.d4 { animation-delay: .46s; }
.cke-rise.d5 { animation-delay: .58s; }

@keyframes cke-rise { to { opacity: 1; transform: none; } }

/* ---------- Small screen ---------- */

@media (max-width: 900px) {
	.cke-tiles { grid-template-columns: repeat(2, 1fr); }

	.cke-band {
		grid-template-columns: 1fr;
		gap: 22px;
	}
}

@media (max-width: 520px) {
	.cke { --cke-bevel: 16px; }

	.cke-btn.cke-btn { width: 100%; }

	.cke-tile { aspect-ratio: 4 / 3; }
}

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

	.cke-rise {
		opacity: 1;
		transform: none;
	}
}