/*
Theme Name:   Bijzonder&Lief
Theme URI:    https://www.bijzonderenlief.nl
Description:  Warm, rustig thema voor Bijzonder&Lief. Child theme van Storefront. Teksten en uitgelichte producten staan in inc/config.php.
Author:       Bart van Wiggen
Author URI:   https://vwiggen.nl
Template:     storefront
Version:      0.2.0
Requires at least: 6.4
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  bijzonderenlief
Update URI:   false
*/

/* ==========================================================================
   1. Kleuren, lettertypes en basis
   ========================================================================== */

:root {
	--bl-linnen: #faf7f2;
	--bl-zand: #f1ebe2;
	--bl-wit: #ffffff;
	--bl-tekst: #2e2a26;
	--bl-tekst-zacht: #4a433c;
	--bl-grijs: #5e564e;
	--bl-label: #6b635a;
	--bl-lijn: #e7e0d6;
	--bl-lijn-donker: #cfc6b9;
	--bl-accent: #56664f;          /* saliegroen: knoppen, links, accenten */
	--bl-accent-donker: #46553f;
	--bl-steun: #e9ede4;           /* achtergrond 'Steun & troost' */
	--bl-steun-tekst: #4e5a49;
	--bl-vieren: #f6eae1;          /* achtergrond 'Vieren & verrassen' */
	--bl-vieren-tekst: #7a5440;
	--bl-footer: #2f352c;
	--bl-footer-tekst: #e9e4da;
	--bl-footer-zacht: #c9c3b7;

	--bl-kop: 'Lora', Georgia, 'Times New Roman', serif;
	--bl-basis: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--bl-hand: 'Caveat', 'Segoe Script', cursive;

	--bl-rond: 20px;
	--bl-rond-groot: 28px;
	--bl-breedte: 1200px;
}

@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/nunito-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonts/nunito-sans-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonts/nunito-sans-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/lora-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/lora-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Lora'; font-style: italic; font-weight: 400; font-display: swap; src: url(assets/fonts/lora-latin-400-italic.woff2) format('woff2'); }
@font-face { font-family: 'Lora'; font-style: italic; font-weight: 500; font-display: swap; src: url(assets/fonts/lora-latin-500-italic.woff2) format('woff2'); }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/caveat-latin-500-normal.woff2) format('woff2'); }

body,
button,
input,
select,
textarea,
.button {
	font-family: var(--bl-basis);
}

body {
	background: var(--bl-linnen);
	color: var(--bl-tekst-zacht);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

h1, h2, h3, h4, h5, h6,
.product_title,
.woocommerce-products-header__title,
.entry-title {
	font-family: var(--bl-kop);
	font-weight: 500;
	color: var(--bl-tekst);
	letter-spacing: -0.005em;
}

a {
	color: var(--bl-accent);
}

a:hover,
a:focus {
	color: var(--bl-accent-donker);
}

:focus-visible {
	outline: 2px solid var(--bl-accent);
	outline-offset: 3px;
}

/* Storefront zet een clearfix op .col-full; in flex-/gridcontainers moet die weg. */
.site-header > .col-full::before,
.site-header > .col-full::after,
.bl-topbalk .col-full::before,
.bl-topbalk .col-full::after,
.bl-hero .col-full::before,
.bl-hero .col-full::after,
.bl-verhaal .col-full::before,
.bl-verhaal .col-full::after {
	content: none;
	display: none;
}

.col-full {
	max-width: calc(var(--bl-breedte) + 48px);
	padding-left: 24px;
	padding-right: 24px;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

.bl-boventitel {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bl-accent);
}

/* ==========================================================================
   2. Knoppen
   ========================================================================== */

.bl-knop,
.button,
button.button,
input[type="submit"],
.added_to_cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 26px;
	border: 1.5px solid transparent;
	border-radius: 999px;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.bl-knop {
	min-height: 52px;
	padding: 0 28px;
	background: var(--bl-accent);
	color: #fff;
}

.bl-knop:hover,
.bl-knop:focus {
	background: var(--bl-accent-donker);
	color: #fff;
}

.bl-knop-rand {
	background: transparent;
	color: var(--bl-tekst);
	border-color: var(--bl-tekst);
}

.bl-knop-rand:hover,
.bl-knop-rand:focus {
	background: var(--bl-tekst);
	color: #fff;
}

.bl-knop-wit {
	background: #fff;
	color: var(--bl-accent);
}

.bl-knop-wit:hover,
.bl-knop-wit:focus {
	background: var(--bl-linnen);
	color: var(--bl-accent-donker);
}

.bl-knop-rand-wit {
	background: transparent;
	color: #fff;
	border-color: #fff;
}

.bl-knop-rand-wit:hover,
.bl-knop-rand-wit:focus {
	background: #fff;
	color: var(--bl-accent);
}

.bl-knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.bl-tekstlink {
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--bl-accent);
	text-decoration: none;
	border-bottom: 1.5px solid currentColor;
	padding-bottom: 2px;
}

/* ==========================================================================
   3. Topbalk en header
   ========================================================================== */

.bl-topbalk {
	background: var(--bl-accent);
	color: #fff;
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
}

.bl-topbalk .col-full {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 32px;
	padding-top: 9px;
	padding-bottom: 9px;
	text-align: center;
}

.site-header,
.home.page .site-header,
.home.blog .site-header,
.home.post-type-archive-product .site-header,
.home.page:not(.page-template-template-homepage) .site-header {
	background: var(--bl-linnen);
	border-bottom: 1px solid var(--bl-lijn);
	padding-top: 0;
	margin-bottom: 0;
}

.site-header > .col-full {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 32px;
	padding-top: 16px;
	padding-bottom: 16px;
}

.site-header .site-branding,
.woocommerce-active .site-header .site-branding {
	float: none;
	width: auto;
	margin: 0;
	flex: 0 0 auto;
}

.site-header .custom-logo-link img,
.site-header .site-branding img {
	display: block;
	height: 84px;
	width: auto;
	max-width: none;
}

.site-header .site-branding .site-title {
	font-family: var(--bl-kop);
	font-size: 1.75rem;
	margin: 0;
}

/* Zoekveld */
.site-header .site-search,
.woocommerce-active .site-header .site-search {
	float: none;
	width: auto;
	margin: 0 auto;
	flex: 1 1 280px;
	max-width: 460px;
	clear: none;
}

.site-header .site-search .widget_product_search {
	margin: 0;
}

.site-header .site-search form,
.storefront-handheld-footer-bar .site-search form {
	position: relative;
	margin: 0;
}

.site-header .site-search input[type="search"],
.site-header .site-search .search-field {
	width: 100%;
	height: 46px;
	padding: 0 18px 0 46px;
	border: 1px solid #e2dace;
	border-radius: 999px;
	background: #fff;
	box-shadow: none;
	color: var(--bl-tekst);
	font-size: 0.9375rem;
}

.site-header .site-search input[type="search"]::placeholder {
	color: var(--bl-label);
}

.site-header .site-search form::before,
.site-header .widget_product_search form::before {
	left: 18px;
	top: 50%;
	transform: translateY(-50%);
	line-height: 1;
	color: var(--bl-label);
}

/* Account en winkelwagen */
.bl-header-acties {
	display: flex;
	align-items: center;
	gap: 22px;
	font-size: 0.9375rem;
	flex: 0 0 auto;
}

.bl-header-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--bl-tekst);
	text-decoration: none;
	padding: 10px 0;
}

.bl-header-link:hover,
.bl-header-link:focus {
	color: var(--bl-accent);
}

.bl-header-winkelwagen .cart-contents {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border-radius: 999px;
	background: var(--bl-zand);
	color: var(--bl-tekst);
	text-decoration: none;
	font-weight: 600;
}

.bl-header-winkelwagen .cart-contents:hover,
.bl-header-winkelwagen .cart-contents:focus {
	background: #e9e0d3;
	color: var(--bl-tekst);
}

.bl-header-winkelwagen .cart-contents::after {
	display: none;
}

.bl-header-winkelwagen .count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--bl-accent);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	opacity: 1;
}

.bl-header-winkelwagen .count.is-leeg {
	display: none;
}

/* Categoriebalk */
.bl-categoriebalk {
	border-top: 1px solid #efe8de;
}

.bl-categoriebalk ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bl-categoriebalk li {
	display: flex;
	align-items: center;
}

.bl-categoriebalk li.bl-scheiding::after {
	content: '';
	width: 1px;
	height: 18px;
	margin-left: 26px;
	background: var(--bl-lijn-donker);
}

.bl-categoriebalk a {
	display: block;
	padding: 14px 0;
	color: var(--bl-tekst);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	box-shadow: inset 0 -2px 0 transparent;
	white-space: nowrap;
}

.bl-categoriebalk a:hover,
.bl-categoriebalk a:focus,
.bl-categoriebalk a.is-actief {
	color: var(--bl-accent);
	box-shadow: inset 0 -2px 0 var(--bl-accent);
}

@media (min-width: 768px) and (max-width: 1199px) {
	.bl-categoriebalk ul {
		gap: 0 18px;
	}

	.bl-categoriebalk li.bl-scheiding::after {
		margin-left: 18px;
	}

	.bl-categoriebalk a {
		font-size: 0.875rem;
	}
}

/* Mobiel menu (Storefront regelt het openklappen) */
.bl-mobiel-menu .menu-toggle {
	border: 1.5px solid var(--bl-tekst);
	border-radius: 999px;
	background: transparent;
	color: var(--bl-tekst);
	font-weight: 700;
	padding: 10px 18px 10px 44px;
}

.bl-mobiel-menu .menu-toggle::before,
.bl-mobiel-menu .menu-toggle::after,
.bl-mobiel-menu .menu-toggle span::before {
	background-color: var(--bl-tekst);
	left: 18px;
}

.bl-mobiel-menu .handheld-navigation ul.menu li a {
	padding: 12px 0;
	font-weight: 600;
	color: var(--bl-tekst);
	border-bottom: 1px solid var(--bl-lijn);
}

.bl-mobiel-menu .handheld-navigation ul.menu li.bl-menu-extra a {
	font-weight: 400;
}

.bl-mobiel-menu .handheld-navigation ul.menu li.current-menu-item > a {
	color: var(--bl-accent);
}

@media (min-width: 768px) {
	.bl-mobiel-menu,
	.woocommerce-active .site-header .bl-mobiel-menu {
		display: none;
	}
}

@media (max-width: 767px) {
	.bl-topbalk .col-full {
		gap: 2px 18px;
		font-size: 0.75rem;
	}

	.site-header > .col-full {
		justify-content: space-between;
		padding-top: 12px;
		padding-bottom: 12px;
	}

	.site-header .custom-logo-link img,
	.site-header .site-branding img {
		height: 58px;
	}

	.site-header .site-search,
	.bl-header-acties,
	.bl-categoriebalk {
		display: none;
	}

	.bl-mobiel-menu,
	.woocommerce-active .site-header .bl-mobiel-menu {
		display: block;
		float: none;
		width: auto;
		margin: 0;
		clear: none;
		flex: 0 0 auto;
	}

	.bl-mobiel-menu.toggled {
		flex: 1 1 100%;
		order: 3;
	}

	.bl-mobiel-menu.toggled .menu-toggle {
		margin-left: auto;
		display: flex;
	}
}

/* ==========================================================================
   4. Kruimelpad, paginakoppen
   ========================================================================== */

.storefront-breadcrumb {
	margin: 0 0 1.5em;
	padding: 1.25em 0 0;
}

.storefront-breadcrumb .col-full {
	padding-left: 24px;
	padding-right: 24px;
}

.woocommerce-breadcrumb {
	font-size: 0.875rem;
	color: var(--bl-label);
}

.woocommerce-breadcrumb a {
	color: var(--bl-label);
	text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
	color: var(--bl-accent);
}

.woocommerce-products-header,
.storefront-full-width-content .woocommerce-products-header {
	padding: 0 0 2em;
	text-align: center;
}

.woocommerce-products-header__title.page-title,
.page .entry-title {
	font-size: 2.5rem;
	line-height: 1.15;
	margin: 0 0 0.35em;
}

.term-description {
	max-width: 42em;
	font-size: 1.0625rem;
	line-height: 1.65;
}

.site-main {
	margin-bottom: 4em;
}

/* ==========================================================================
   5. Productkaarten en categorietegels (winkel, categorieën, homepage)
   ========================================================================== */

ul.products li.product,
.site-main ul.products li.product {
	text-align: left;
	margin-bottom: 2.5em;
}

ul.products li.product .woocommerce-loop-product__link {
	display: block;
	text-decoration: none;
}

ul.products li.product img,
ul.products li.product-category img {
	border-radius: 18px;
	margin-bottom: 14px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
	transition: transform 0.25s ease;
}

ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2,
ul.products li.product h3 {
	font-family: var(--bl-basis);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--bl-tekst);
	padding: 0 4px;
	margin-bottom: 4px;
}

ul.products li.product .price {
	display: block;
	padding: 0 4px;
	margin-bottom: 12px;
	color: var(--bl-tekst);
	font-size: 1rem;
	font-weight: 400;
}

ul.products li.product .price del {
	color: var(--bl-label);
}

ul.products li.product .button,
ul.products li.product .added_to_cart {
	min-height: 40px;
	padding: 0 18px;
	margin: 0 4px;
	font-size: 0.875rem;
	background: transparent;
	color: var(--bl-tekst);
	border: 1.5px solid var(--bl-lijn-donker);
}

ul.products li.product .button:hover,
ul.products li.product .button:focus {
	border-color: var(--bl-accent);
	background: var(--bl-accent);
	color: #fff;
}

ul.products li.product .added_to_cart {
	border-color: transparent;
	color: var(--bl-accent);
}

ul.products li.product .onsale {
	position: absolute;
	top: 12px;
	left: 12px;
	margin: 0;
	padding: 4px 12px;
	border: 0;
	border-radius: 999px;
	background: var(--bl-vieren);
	color: var(--bl-vieren-tekst);
	font-weight: 700;
	font-size: 0.8125rem;
	text-transform: none;
}

ul.products li.product {
	position: relative;
}

ul.products li.product-category a {
	display: block;
	text-decoration: none;
}

ul.products li.product-category h2,
ul.products li.product-category .woocommerce-loop-category__title {
	font-family: var(--bl-kop);
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--bl-tekst);
	padding: 0 4px;
}

ul.products li.product-category mark.count {
	background: none;
	color: var(--bl-label);
	font-family: var(--bl-basis);
	font-size: 0.875rem;
	font-weight: 400;
}

@media (hover: hover) {
	ul.products li.product a:hover img,
	ul.products li.product-category a:hover img,
	.bl-tegel:hover .bl-tegel-foto {
		transform: scale(1.02);
	}
}

.storefront-sorting {
	font-size: 0.875rem;
	margin-bottom: 1.5em;
}

.woocommerce-ordering select,
.orderby {
	padding: 8px 14px;
	border: 1px solid var(--bl-lijn-donker);
	border-radius: 999px;
	background-color: #fff;
}

.woocommerce-pagination .page-numbers li .page-numbers {
	border-radius: 999px;
}

.woocommerce-pagination .page-numbers li .page-numbers.current {
	background: var(--bl-accent);
	color: #fff;
}

/* ==========================================================================
   6. Productpagina
   ========================================================================== */

.single-product div.product {
	display: flex;
	flex-wrap: wrap;
	gap: 0 56px;
	align-items: flex-start;
}

.single-product div.product .woocommerce-product-gallery,
.single-product div.product .summary {
	float: none;
	margin-right: 0;
}

.single-product div.product .woocommerce-product-gallery {
	flex: 1 1 460px;
	min-width: 0;
	width: auto;
}

.single-product div.product .summary {
	flex: 1 1 400px;
	min-width: 0;
	width: auto;
}

.single-product div.product .woocommerce-tabs,
.single-product div.product .related,
.single-product div.product .upsells {
	flex: 1 1 100%;
}

.single-product div.product .woocommerce-product-gallery .flex-viewport,
.single-product div.product .woocommerce-product-gallery__image img,
.single-product div.product .woocommerce-product-gallery__wrapper {
	border-radius: 24px;
}

.single-product div.product .woocommerce-product-gallery .flex-viewport {
	margin-bottom: 14px;
}

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
}

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs::before,
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs::after {
	content: none;
	display: none;
}

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 14px;
	border: 2px solid transparent;
	opacity: 0.75;
}

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active,
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img:hover {
	border-color: var(--bl-accent);
	opacity: 1;
}

.single-product div.product .woocommerce-product-gallery__trigger {
	border-radius: 999px;
	top: 16px;
	right: 16px;
}

.bl-product-boventitel {
	margin: 0 0 0.5em;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bl-accent);
}

.single-product div.product .product_title {
	font-size: 2.6rem;
	line-height: 1.1;
	margin-bottom: 0.35em;
}

.single-product div.product .summary p.price,
.single-product div.product .summary > span.price {
	font-size: 1.5rem;
	color: var(--bl-tekst);
	margin-bottom: 1em;
}

.single-product div.product .woocommerce-product-details__short-description {
	font-size: 1.125rem;
	line-height: 1.65;
	color: var(--bl-tekst-zacht);
	margin-bottom: 1.5em;
}

.single-product div.product form.cart {
	margin-bottom: 1.25em;
	padding: 0;
}

.single-product div.product table.variations {
	margin-bottom: 0.5em;
}

.single-product div.product .single_variation_wrap .woocommerce-variation:empty,
.single-product div.product .single_variation_wrap .woocommerce-variation-description:empty {
	display: none;
}

.single-product div.product table.variations th,
.single-product div.product table.variations td {
	display: block;
	padding: 0;
	background: none;
	text-align: left;
}

.single-product div.product table.variations th.label,
.single-product div.product table.variations td.label {
	padding-bottom: 10px;
}

.single-product div.product table.variations label {
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--bl-tekst);
}

.single-product div.product table.variations select {
	min-width: 220px;
	padding: 10px 16px;
	border: 1.5px solid var(--bl-lijn-donker);
	border-radius: 999px;
	background-color: #fff;
}

.single-product div.product table.variations {
	position: relative;
}

.single-product div.product table.variations td.value {
	margin-bottom: 0;
}

/* 'Wissen' rechts naast het label in plaats van eronder */
.single-product div.product .reset_variations {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	font-size: 0.875rem;
}

.single-product div.product .woocommerce-variation-add-to-cart {
	padding-top: 12px;
}

/* Keuzeknoppen (assets/js/thema.js) */
.bl-verborgen-select {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
}

.bl-keuzes {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.bl-keuze {
	min-height: 46px;
	padding: 0 22px;
	border: 1.5px solid var(--bl-lijn-donker);
	border-radius: 999px;
	background: #fff;
	color: var(--bl-tekst);
	font-weight: 600;
	font-size: 0.9375rem;
	cursor: pointer;
}

.bl-keuze:hover {
	border-color: var(--bl-tekst);
	background: #fff;
	color: var(--bl-tekst);
}

.bl-keuze[aria-pressed="true"] {
	border-color: var(--bl-tekst);
	background: var(--bl-tekst);
	color: #fff;
}

.bl-keuze:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	text-decoration: line-through;
}

/* Aantal + knop */
.single-product div.product form.cart .woocommerce-variation-add-to-cart,
.single-product div.product form.cart:not(.variations_form) {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: stretch;
}

.single-product div.product form.cart .quantity {
	float: none;
	margin: 0;
}

.single-product div.product form.cart .quantity .qty {
	width: 4.5em;
	height: 56px;
	border: 1.5px solid var(--bl-lijn-donker);
	border-radius: 999px;
	background: #fff;
	text-align: center;
	font-size: 1rem;
}

.single-product div.product form.cart .single_add_to_cart_button,
.single-product div.product form.cart .button {
	float: none;
	flex: 1 1 220px;
	min-height: 56px;
	font-size: 1.0625rem;
	background: var(--bl-accent);
	border-color: var(--bl-accent);
	color: #fff;
}

.single-product div.product form.cart .single_add_to_cart_button:hover,
.single-product div.product form.cart .single_add_to_cart_button:focus {
	background: var(--bl-accent-donker);
	border-color: var(--bl-accent-donker);
	color: #fff;
}

.single-product div.product form.cart .single_add_to_cart_button.disabled {
	opacity: 0.55;
}

.bl-vertrouwen {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	margin: 0 0 1.5em;
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
	color: var(--bl-grijs);
}

.bl-vertrouwen li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.bl-vertrouwen a {
	color: var(--bl-grijs);
}

/* Tabbladen beschrijving / extra info / beoordelingen */
.single-product div.product .woocommerce-tabs {
	padding-top: 2em;
	border-top: 1px solid var(--bl-lijn);
}

.woocommerce-tabs ul.tabs li a {
	font-weight: 700;
	color: var(--bl-tekst);
}

.woocommerce-tabs ul.tabs li.active a {
	color: var(--bl-accent);
}

.woocommerce-tabs ul.tabs li.active::after {
	color: var(--bl-accent);
}

.woocommerce-tabs .panel {
	font-size: 1.0625rem;
	line-height: 1.7;
}

.woocommerce-tabs .panel h2:first-of-type {
	font-size: 1.5rem;
}

.single-product .related,
.single-product .upsells {
	margin-top: 1em;
	padding-top: 2.5em;
	border-top: 1px solid var(--bl-lijn);
}

.single-product .related > h2,
.single-product .upsells > h2,
.storefront-full-width-content .related.products > h2:first-child,
.storefront-full-width-content .up-sells > h2:first-child {
	font-size: 2rem;
	text-align: left;
	margin-bottom: 1em;
}

/* Vaste balk 'in winkelwagen' bij scrollen */
.storefront-sticky-add-to-cart {
	background: var(--bl-linnen);
	border-bottom: 1px solid var(--bl-lijn);
}

.storefront-sticky-add-to-cart__content-button {
	border-radius: 999px;
}

/* ==========================================================================
   7. Homepage
   ========================================================================== */

.bl-home h1,
.bl-home h2,
.bl-home h3 {
	margin: 0;
}

.bl-home p {
	margin: 0;
}

.bl-img-leeg {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	background: var(--bl-zand);
	border-radius: var(--bl-rond);
}

/* Hero */
.bl-hero {
	padding: 64px 0 72px;
}

.bl-hero .col-full {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 48px;
}

.bl-hero-tekst {
	flex: 1 1 420px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.bl-hero h1 {
	font-size: clamp(2.5rem, 5vw, 3.625rem);
	line-height: 1.08;
	letter-spacing: -0.01em;
}

.bl-hero h1 em {
	color: var(--bl-accent);
	font-style: italic;
}

.bl-hero-intro {
	font-size: 1.1875rem;
	line-height: 1.6;
	color: var(--bl-grijs);
	max-width: 34em;
}

.bl-hero .bl-knoppen {
	margin-top: 8px;
}

.bl-hero-beeld {
	flex: 1 1 420px;
	min-width: 0;
	position: relative; /* ook voor oudere, gecachte pagina's */
}

.bl-hero-item {
	position: relative;
}

.bl-hero-item[hidden] {
	display: none;
}

.bl-hero-foto,
.bl-hero-beeld > .bl-img-leeg {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1.08;
	object-fit: cover;
	border-radius: var(--bl-rond-groot);
}

.bl-hero-kaartje {
	position: absolute;
	left: 20px;
	bottom: 20px;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 18px 12px 12px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.95);
	box-shadow: 0 6px 24px rgba(46, 42, 38, 0.12);
	color: var(--bl-tekst);
	text-decoration: none;
	max-width: calc(100% - 40px);
}

.bl-hero-kaartje img {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: 10px;
	flex: 0 0 48px;
}

.bl-hero-kaartje > span {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 0.9375rem;
}

.bl-hero-kaartje strong {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bl-hero-kaartje .bl-prijs {
	color: var(--bl-grijs);
	font-size: 0.875rem;
}

.bl-hero-kaartje:hover,
.bl-hero-kaartje:focus {
	color: var(--bl-accent);
}

/* Sectiekoppen */
.bl-sectiekop {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 40px;
}

.bl-sectiekop.bl-midden {
	align-items: center;
	text-align: center;
}

.bl-sectiekop h2 {
	font-size: clamp(2rem, 3.5vw, 2.625rem);
	line-height: 1.15;
}

.bl-sectiekop p {
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--bl-grijs);
	max-width: 36em;
}

/* Waar sta jij nu? */
.bl-fases {
	background: #fff;
	border-top: 1px solid #efe8de;
	border-bottom: 1px solid #efe8de;
	padding: 80px 0;
	scroll-margin-top: 24px;
}

.bl-groep {
	border-radius: var(--bl-rond-groot);
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.bl-groep + .bl-groep {
	margin-top: 40px;
}

.bl-groep-steun {
	background: var(--bl-steun);
}

.bl-groep-vieren {
	background: var(--bl-vieren);
}

.bl-groep-kop {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 24px;
}

.bl-groep-kop h3 {
	font-size: 1.75rem;
}

.bl-groep-kop p {
	font-size: 0.9375rem;
}

.bl-groep-steun .bl-groep-kop p {
	color: var(--bl-steun-tekst);
}

.bl-groep-vieren .bl-groep-kop p {
	color: var(--bl-vieren-tekst);
}

.bl-tegels {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bl-tegels-3 {
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.bl-tegel {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: var(--bl-rond);
	background: #fff;
	color: var(--bl-tekst);
	text-decoration: none;
}

.bl-tegel:hover,
.bl-tegel:focus {
	color: var(--bl-tekst);
}

.bl-tegel .bl-tegel-foto,
.bl-tegel .bl-img-leeg {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 0;
	transition: transform 0.25s ease;
}

.bl-tegels-3 .bl-tegel .bl-tegel-foto,
.bl-tegels-3 .bl-tegel .bl-img-leeg {
	aspect-ratio: 4 / 3;
}

.bl-tegel-tekst {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 18px 20px 22px;
}

.bl-tegel-titel {
	font-family: var(--bl-kop);
	font-size: 1.3125rem;
	font-weight: 500;
}

.bl-tegel:hover .bl-tegel-titel,
.bl-tegel:focus .bl-tegel-titel {
	color: var(--bl-accent);
}

.bl-tegel-uitleg {
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--bl-grijs);
}

/* Voordelen */
.bl-voordelen {
	padding: 56px 0;
}

.bl-voordelen ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bl-voordelen li {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.bl-voordeel-icoon {
	flex: 0 0 48px;
	height: 48px;
	border-radius: 999px;
	background: var(--bl-steun);
	color: var(--bl-steun-tekst);
	display: flex;
	align-items: center;
	justify-content: center;
}

.bl-voordelen li > span:last-child {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--bl-grijs);
}

.bl-voordelen strong {
	font-size: 1rem;
	color: var(--bl-tekst);
}

/* Maatwerk */
.bl-maatwerk-sectie {
	padding: 8px 0 72px;
}

.bl-maatwerk {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 40px 56px;
	padding: 56px;
	border-radius: 32px;
	background: var(--bl-accent);
	color: #fff;
}

.bl-maatwerk-tekst {
	flex: 1 1 420px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.bl-maatwerk .bl-boventitel {
	color: rgba(255, 255, 255, 0.82);
}

.bl-maatwerk h2 {
	color: #fff;
	font-size: clamp(2.125rem, 4vw, 3rem);
	line-height: 1.1;
}

.bl-maatwerk-intro {
	font-size: 1.1875rem;
	line-height: 1.65;
	color: #f3f4f0;
}

.bl-maatwerk .bl-knoppen {
	margin-top: 8px;
}

.bl-maatwerk .bl-knop {
	min-height: 56px;
	font-size: 1.0625rem;
}

.bl-maatwerk-mail {
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.88);
}

.bl-maatwerk-mail a {
	color: #fff;
}

.bl-maatwerk-voorbeelden {
	flex: 1 1 380px;
	min-width: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bl-maatwerk-voorbeelden li {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.9);
}

.bl-maatwerk-voorbeelden li:nth-child(2) {
	margin-top: 32px;
}

.bl-maatwerk-voorbeelden img,
.bl-maatwerk-voorbeelden .bl-img-leeg {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 18px;
}

/* Productrijen */
.bl-rij {
	padding: 24px 0 32px;
}

.bl-rij + .bl-rij {
	padding-top: 8px;
}

.bl-rij-kop {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 24px;
	margin-bottom: 24px;
}

.bl-rij-kop h2 {
	font-size: clamp(1.75rem, 3vw, 2.125rem);
}

.bl-rij .woocommerce {
	margin: 0;
}

.bl-rij ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 0 24px;
	margin: 0;
}

.bl-rij ul.products::before,
.bl-rij ul.products::after {
	content: none;
	display: none;
}

.bl-rij ul.products li.product {
	width: auto;
	float: none;
	margin: 0 0 2em;
}

@media (max-width: 767px) {
	.bl-rij ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 14px;
	}
}

/* Verhaal */
.bl-verhaal {
	margin-top: 48px;
	padding: 80px 0;
	background: var(--bl-zand);
}

.bl-verhaal .col-full {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 56px;
}

.bl-verhaal-beeld {
	flex: 1 1 380px;
	min-width: 0;
}

.bl-verhaal-beeld img,
.bl-verhaal-beeld .bl-img-leeg {
	display: block;
	width: 100%;
	max-width: 520px;
	height: auto;
	aspect-ratio: 4 / 4.6;
	object-fit: cover;
	border-radius: var(--bl-rond-groot);
}

.bl-verhaal-tekst {
	flex: 1 1 420px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.bl-verhaal h2 {
	font-size: clamp(2rem, 3.5vw, 2.625rem);
	line-height: 1.15;
}

.bl-verhaal-tekst > p:not(.bl-boventitel):not(.bl-handschrift) {
	font-size: 1.125rem;
	line-height: 1.7;
	color: var(--bl-tekst-zacht);
}

.bl-handschrift {
	font-family: var(--bl-hand);
	font-size: 2.125rem;
	color: var(--bl-tekst);
	line-height: 1.1;
}

@media (max-width: 767px) {
	.bl-hero {
		padding: 32px 0 48px;
	}

	.bl-hero .col-full,
	.bl-verhaal .col-full {
		gap: 32px;
	}

	.bl-fases,
	.bl-verhaal {
		padding: 56px 0;
	}

	.bl-groep {
		padding: 20px;
		border-radius: var(--bl-rond);
	}

	.bl-tegels {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.bl-tegels-3 {
		grid-template-columns: 1fr;
	}

	.bl-tegel-tekst {
		padding: 14px 14px 16px;
	}

	.bl-tegel-titel {
		font-size: 1.125rem;
	}

	.bl-tegels:not(.bl-tegels-3) .bl-tegel-uitleg {
		display: none;
	}

	.bl-maatwerk {
		padding: 32px 24px;
		border-radius: var(--bl-rond-groot);
	}

	.bl-maatwerk-voorbeelden li:nth-child(2) {
		margin-top: 0;
	}
}

/* ==========================================================================
   8. Footer
   ========================================================================== */

.site-footer {
	background: var(--bl-footer);
	color: var(--bl-footer-tekst);
	padding: 64px 0 32px;
}

.bl-footer-kolommen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 40px;
}

.bl-footer-merk {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.bl-footer-logo {
	width: auto;
	height: 72px;
	filter: invert(1) brightness(1.6);
	align-self: flex-start;
}

.bl-footer-slogan {
	margin: 0;
	font-family: var(--bl-kop);
	font-style: italic;
	font-size: 1.125rem;
	line-height: 1.5;
	color: #f4f0e8;
}

.bl-footer-onderregel {
	margin: 0;
	font-size: 0.875rem;
	color: var(--bl-footer-zacht);
}

.bl-footer-kolom h2 {
	margin: 0 0 14px;
	font-family: var(--bl-basis);
	font-size: 1rem;
	font-weight: 700;
	color: #fff;
}

.bl-footer-kolom ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 0.9375rem;
}

.site-footer .bl-footer a,
.site-footer .bl-footer a:not(.button):not(.components-button) {
	color: var(--bl-footer-tekst);
	text-decoration: none;
}

.site-footer .bl-footer a:hover,
.site-footer .bl-footer a:focus {
	color: #fff;
	text-decoration: underline;
}

.bl-footer-onder {
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid #4a5245;
	font-size: 0.8125rem;
	color: var(--bl-footer-zacht);
}

/* Mobiele balk onderaan (Storefront) */
.storefront-handheld-footer-bar {
	background: var(--bl-linnen);
	border-top: 1px solid var(--bl-lijn);
}

.storefront-handheld-footer-bar ul li > a {
	background-color: var(--bl-linnen);
	color: var(--bl-tekst);
	border-right: 1px solid var(--bl-lijn);
}

.storefront-handheld-footer-bar ul li.cart .count {
	background: var(--bl-accent);
	color: #fff;
	border-color: var(--bl-linnen);
}

.storefront-handheld-footer-bar ul li.search .site-search {
	background: var(--bl-linnen);
}

/* ==========================================================================
   9. Overig: formulieren, meldingen, beheerdersmelding
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea,
.input-text {
	border: 1px solid var(--bl-lijn-donker);
	border-radius: 12px;
	background: #fff;
	box-shadow: none;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
	border-radius: 14px;
	background-color: var(--bl-steun);
	color: var(--bl-tekst);
	border-left: 0;
}

.woocommerce-message a,
.woocommerce-info a {
	color: var(--bl-tekst);
}

.woocommerce-message .button,
.woocommerce-info .button {
	background: var(--bl-accent);
	color: #fff;
	min-height: 40px;
	font-size: 0.875rem;
}

.woocommerce-error {
	background-color: #f6e3df;
}

.bl-config-melding {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 9999;
	max-width: 420px;
	padding: 12px 16px;
	border-radius: 12px;
	background: #fff4d6;
	color: #4a3b10;
	font-size: 0.8125rem;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
}

/* Winkelwagen- en afrekenblokken van WooCommerce */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-button:not(.is-link) {
	border-radius: 999px;
	text-decoration: none;
}

.wc-block-cart__submit-button .wc-block-components-button__text,
.wc-block-components-checkout-place-order-button .wc-block-components-button__text {
	text-decoration: none;
}