/* Kloosterbeleving - Kerstmodus (optioneel)
 * Toggle: styled on all pages. Festive skin: only html.kb-christmas-active body.kb-christmas-surface.
 * Palette after geefkerstcadeau.nl: burgundy / warm cream / gold / dark brown, candlelit hero.
 */

:root {
	--kbx-burgundy: #922B2E;
	--kbx-burgundy-dark: #6f1f22;
	--kbx-cream: #F0ECE1;
	--kbx-cream-soft: #f7f4ec;
	--kbx-gold: #c8a44a;
	--kbx-brown: #2c1a0e;
	--kbx-brown-soft: #4a3222;
	--kbx-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23c8a44a' d='M12 1l2.6 8.4H23l-6.8 5 2.6 8.4L12 17.8l-6.8 5 2.6-8.4L1 9.4h8.4z'/%3E%3C/svg%3E");
	--kbx-flake: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23c8a44a' stroke-width='2' stroke-linecap='round'%3E%3Cg id='a'%3E%3Cpath d='M50 6v88M50 20l-8-8M50 20l8-8M50 80l-8 8M50 80l8 8M50 34l-10-6M50 34l10-6M50 66l-10 6M50 66l10 6'/%3E%3C/g%3E%3Cuse href='%23a' transform='rotate(60 50 50)'/%3E%3Cuse href='%23a' transform='rotate(120 50 50)'/%3E%3Ccircle cx='50' cy='50' r='7'/%3E%3C/svg%3E");
}

/* ---------- Toggle (all pages) ---------- */
.kb-christmas-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	min-height: 36px;
	padding: 6px 12px;
	margin: 0 8px;
	border: 1px solid rgba(146, 43, 46, .35);
	border-radius: 999px;
	background: var(--kbx-cream);
	color: var(--kbx-burgundy) !important;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: .02em;
	text-decoration: none !important;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.kb-christmas-toggle::before {
	content: "";
	width: 14px;
	height: 14px;
	flex: 0 0 14px;
	background: var(--kbx-star) center / contain no-repeat;
}
.kb-christmas-toggle:hover {
	background: #e8e1d0;
	border-color: var(--kbx-burgundy);
}
.kb-christmas-toggle:focus { outline: none; }
.kb-christmas-toggle:focus-visible {
	outline: 3px solid var(--kbx-gold);
	outline-offset: 2px;
}
html.kb-christmas-active .kb-christmas-toggle,
.kb-christmas-toggle[aria-pressed="true"] {
	background: var(--kbx-burgundy);
	border-color: var(--kbx-burgundy);
	color: var(--kbx-cream) !important;
}
html.kb-christmas-active .kb-christmas-toggle:hover {
	background: var(--kbx-burgundy-dark);
}

@media (max-width: 1100px) {
	.kb-christmas-toggle { padding: 6px 10px; margin: 0 6px; font-size: 12px; }
}
@media (max-width: 768px) {
	.kb-christmas-toggle {
		min-height: 32px;
		min-width: 32px;
		padding: 4px 9px;
		margin: 0 4px;
		font-size: 11.5px;
		max-width: 42vw;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	#header .header-right { flex-wrap: wrap; row-gap: 6px; }
}
@media (max-width: 400px) {
/* Keep the explicit mode label readable on small phones. */
	.kb-christmas-toggle {
width: auto; min-height: 34px; padding: 5px 8px; justify-content: center;
font-size: 11px; gap: 5px; max-width: none;
	}
	.kb-christmas-toggle::before { width: 16px; height: 16px; flex-basis: 16px; }
}
/* The site's custom CSS absolutely positions this button over the search field.
 * In the seasonal layout give both controls their own space. */
@media (max-width: 767px) {
html.kb-christmas-active body.kb-christmas-surface .shop-archive .open-filters {
position: relative !important;
top: auto !important;
right: auto !important;
display: inline-flex;
margin-top: 60px !important;
margin-bottom: 12px;
}
}

/* ---------- Intro hero (shop / category) ---------- */
.kb-christmas-intro { display: none; }

html.kb-christmas-active body.kb-christmas-surface .kb-christmas-intro {
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin: 0 0 clamp(16px, 3vw, 32px);
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: clamp(56px, 9vw, 112px) 20px clamp(48px, 8vw, 96px);
	text-align: center;
	color: var(--kbx-cream);
	background:
		radial-gradient(ellipse 34% 55% at 16% 38%, rgba(255, 196, 110, .38), transparent 70%),
		radial-gradient(ellipse 10% 18% at 16% 26%, rgba(255, 228, 170, .55), transparent 70%),
		radial-gradient(ellipse 40% 60% at 84% 70%, rgba(146, 43, 46, .55), transparent 72%),
		radial-gradient(ellipse 60% 70% at 50% 120%, rgba(200, 164, 74, .18), transparent 70%),
		linear-gradient(180deg, #1d110a 0%, var(--kbx-brown) 55%, #22140b 100%);
}
html.kb-christmas-active body.kb-christmas-surface .kb-christmas-intro::before,
html.kb-christmas-active body.kb-christmas-surface .kb-christmas-intro::after {
	content: "";
	position: absolute;
	z-index: -1;
	background: var(--kbx-flake) center / contain no-repeat;
	opacity: .14;
	pointer-events: none;
}
html.kb-christmas-active body.kb-christmas-surface .kb-christmas-intro::before {
	width: 180px; height: 180px; right: 6%; top: 10%;
	animation: kbx-drift 14s ease-in-out infinite alternate;
}
html.kb-christmas-active body.kb-christmas-surface .kb-christmas-intro::after {
	width: 110px; height: 110px; left: 8%; bottom: 8%;
	opacity: .1;
	animation: kbx-drift 18s ease-in-out infinite alternate-reverse;
}
html.kb-christmas-active body.kb-christmas-surface .kb-christmas-intro > * {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
	animation: kbx-rise .8s cubic-bezier(.2, .7, .2, 1) both;
}
html.kb-christmas-active body.kb-christmas-surface .kb-christmas-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 18px;
	padding: 6px 14px;
	border: 1px solid rgba(240, 236, 225, .35);
	border-radius: 999px;
	background: rgba(44, 26, 14, .45);
	color: var(--kbx-cream);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
}
html.kb-christmas-active body.kb-christmas-surface .kb-christmas-eyebrow::before {
	content: ""; width: 12px; height: 12px;
	background: var(--kbx-star) center / contain no-repeat;
}
html.kb-christmas-active body.kb-christmas-surface .kb-christmas-intro h1 {
	margin-top: 0;
	margin-bottom: 18px;
	color: var(--kbx-cream);
	font-size: clamp(34px, 6vw, 60px);
	line-height: 1.05;
	letter-spacing: -.01em;
	animation-delay: .08s;
}
html.kb-christmas-active body.kb-christmas-surface .kb-christmas-intro h1::after {
	content: "";
	display: block;
	width: 56px; height: 3px;
	margin: 18px auto 0;
	border-radius: 2px;
	background: var(--kbx-gold);
}
html.kb-christmas-active body.kb-christmas-surface .kb-christmas-description {
	color: rgba(240, 236, 225, .86);
	font-size: clamp(15px, 1.6vw, 17px);
	line-height: 1.65;
	animation-delay: .16s;
}
html.kb-christmas-active body.kb-christmas-surface .kb-christmas-description p { color: inherit; }
html.kb-christmas-active body.kb-christmas-surface .kb-christmas-description a {
	color: var(--kbx-gold);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- Surface: page, header ---------- */
html.kb-christmas-active body.kb-christmas-surface {
	background-color: var(--kbx-cream);
	--hoofdkleur-1: var(--kbx-burgundy);
	--hoofdkleur-3: var(--kbx-burgundy);
	--achtergrondkleur-1: var(--kbx-cream);
	--achtergrondkleur-2: var(--kbx-cream-soft);
	--koptekstkleur: var(--kbx-brown);
}
html.kb-christmas-active body.kb-christmas-surface #header2 .header-row {
	background: var(--kbx-burgundy);
	color: var(--kbx-cream);
}
html.kb-christmas-active body.kb-christmas-surface #header2 .header-left-tekst,
html.kb-christmas-active body.kb-christmas-surface #header2 .dashicons-saved {
	color: var(--kbx-cream);
}
/* Redundant 'Webshop' title replaced by the Christmas intro */
html.kb-christmas-active body.kb-christmas-surface .shop-archive > .section-inner-wrap > .content > h1 {
	display: none;
}
html.kb-christmas-active body.kb-christmas-surface #header .header-row {
	background: var(--kbx-cream-soft);
	border-bottom: 2px solid var(--kbx-gold);
}

/* ---------- Content area ---------- */
html.kb-christmas-active body.kb-christmas-surface .overzicht-locatie,
html.kb-christmas-active body.kb-christmas-surface .section-inner-wrap {
	background-color: transparent;
}
html.kb-christmas-active body.kb-christmas-surface .rounded.content {
	background-color: var(--kbx-cream-soft);
}
html.kb-christmas-active body.kb-christmas-surface h1,
html.kb-christmas-active body.kb-christmas-surface h2,
html.kb-christmas-active body.kb-christmas-surface h3,
html.kb-christmas-active body.kb-christmas-surface .wpgb-facet-title {
	color: var(--kbx-brown);
}
html.kb-christmas-active body.kb-christmas-surface .kb-christmas-intro h1 { color: var(--kbx-cream); }

/* Buttons */
html.kb-christmas-active body.kb-christmas-surface .button,
html.kb-christmas-active body.kb-christmas-surface button.button,
html.kb-christmas-active body.kb-christmas-surface .single_add_to_cart_button,
html.kb-christmas-active body.kb-christmas-surface .add_to_cart_button {
	background-color: var(--kbx-burgundy) !important;
	border-color: var(--kbx-burgundy) !important;
	color: var(--kbx-cream) !important;
	transition: background-color .2s ease, transform .2s ease;
}
html.kb-christmas-active body.kb-christmas-surface .button:hover,
html.kb-christmas-active body.kb-christmas-surface .single_add_to_cart_button:hover {
	background-color: var(--kbx-burgundy-dark) !important;
}
html.kb-christmas-active body.kb-christmas-surface .button:focus-visible,
html.kb-christmas-active body.kb-christmas-surface a:focus-visible,
html.kb-christmas-active body.kb-christmas-surface input:focus-visible,
html.kb-christmas-active body.kb-christmas-surface select:focus-visible,
html.kb-christmas-active body.kb-christmas-surface button:focus-visible {
	outline: 3px solid var(--kbx-gold);
	outline-offset: 2px;
}

/* Product cards */
html.kb-christmas-active body.kb-christmas-surface ul.products li.product {
	background: #fbf8f1;
	border: 1px solid rgba(200, 164, 74, .35);
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(44, 26, 14, .06), 0 8px 22px -14px rgba(44, 26, 14, .35);
	transition: transform .25s ease, box-shadow .25s ease;
}
html.kb-christmas-active body.kb-christmas-surface ul.products li.product:hover {
	transform: translateY(-3px);
	box-shadow: 0 2px 4px rgba(44, 26, 14, .08), 0 16px 30px -16px rgba(146, 43, 46, .45);
}
html.kb-christmas-active body.kb-christmas-surface ul.products li.product .woocommerce-loop-product__title {
	color: var(--kbx-brown);
}
html.kb-christmas-active body.kb-christmas-surface ul.products li.product .price,
html.kb-christmas-active body.kb-christmas-surface .summary .price {
	color: var(--kbx-burgundy) !important;
	font-weight: 700;
}
html.kb-christmas-active body.kb-christmas-surface .onsale {
	background: var(--kbx-gold) !important;
	color: var(--kbx-brown) !important;
}

/* Filters (WP Grid Builder) - colors only, no layout changes */
html.kb-christmas-active body.kb-christmas-surface .ml-wpgb-sidebar {
	background-color: var(--kbx-cream-soft);
}
html.kb-christmas-active body.kb-christmas-surface .wpgb-select,
html.kb-christmas-active body.kb-christmas-surface .wpgb-input {
	background-color: #fbf8f1 !important;
	border-color: rgba(146, 43, 46, .3) !important;
	color: var(--kbx-brown) !important;
}
html.kb-christmas-active body.kb-christmas-surface .wpgb-facet [aria-pressed="true"] .wpgb-checkbox-control,
html.kb-christmas-active body.kb-christmas-surface .wpgb-facet [aria-pressed="true"] .wpgb-radio-control {
	background-color: var(--kbx-burgundy) !important;
	border-color: var(--kbx-burgundy) !important;
}
html.kb-christmas-active body.kb-christmas-surface .wpgb-facet .wpgb-button[aria-pressed="true"] {
	background-color: var(--kbx-burgundy) !important;
	border-color: var(--kbx-burgundy) !important;
	color: var(--kbx-cream) !important;
}

/* Product page accents */
html.kb-christmas-active body.kb-christmas-surface.single-product .product_title {
	color: var(--kbx-brown);
}
html.kb-christmas-active body.kb-christmas-surface.single-product .product_title::after {
	content: "";
	display: block;
	width: 48px; height: 3px;
	margin-top: 12px;
	border-radius: 2px;
	background: var(--kbx-gold);
}
html.kb-christmas-active body.kb-christmas-surface.single-product .woocommerce-product-gallery {
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 0 0 1px rgba(200, 164, 74, .4);
}
html.kb-christmas-active body.kb-christmas-surface.single-product .woocommerce-tabs ul.tabs li.active {
	border-bottom-color: var(--kbx-burgundy);
}
html.kb-christmas-active body.kb-christmas-surface.single-product .woocommerce-tabs ul.tabs li.active a {
	color: var(--kbx-burgundy);
}
html.kb-christmas-active body.kb-christmas-surface .woocommerce-breadcrumb a {
	color: var(--kbx-burgundy);
}

/* Motion */
@keyframes kbx-rise {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: none; }
}
@keyframes kbx-drift {
	from { transform: rotate(0deg) translateY(0); }
	to { transform: rotate(25deg) translateY(10px); }
}
@media (prefers-reduced-motion: reduce) {
	.kb-christmas-toggle,
	html.kb-christmas-active body.kb-christmas-surface *,
	html.kb-christmas-active body.kb-christmas-surface *::before,
	html.kb-christmas-active body.kb-christmas-surface *::after {
		animation: none !important;
		transition: none !important;
	}
	html.kb-christmas-active body.kb-christmas-surface ul.products li.product:hover {
		transform: none;
	}
}
@media (forced-colors: active) {
	.kb-christmas-toggle { border: 1px solid ButtonText; }
}