/* ==========================================================================
   Winkelpagina — design 6a
   MOBILE FIRST: alle maten komen uit de referentie op 390px.
   Opschalen gebeurt onderaan met min-width.
   ========================================================================== */

/* Breedte en hoogte zijn hier inclusief rand en binnenmarge.

   Dit was de oorzaak van de kaarten die elkaar raakten. Zonder deze
   regel rekent de browser bij een kaart met hoogte 100% de rand en de
   binnenmarge er nog eens bovenop: de kaart werd 349 px hoog in een rij
   van 323, stak 26 px uit en at zo de hele tussenruimte op. De ruimte
   tussen de rijen stond dus wél goed — de kaarten waren te groot. */
.bc-winkel,
.bc-winkel *,
.bc-winkel *::before,
.bc-winkel *::after {
	box-sizing: border-box;
}

.bc-winkel {
	background: var(--bc-wit);
	padding-bottom: 24px;
}

/* De winkelpagina bepaalt haar eigen marges; de standaardpadding van
   het thema zou de verzendbalk doen inspringen. */
.wp-site-blocks > main:has(.bc-winkel),
main:has(> .bc-winkel) {
	padding-left: 0;
	padding-right: 0;
	margin-block-start: 0;
}

/* Vlak waar nog een foto moet komen. */
.bc-winkel .bc-plaatshouder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 10px;
	color: #B08968;
	background: var(--bc-creme) repeating-linear-gradient(
		45deg,
		rgba(92, 65, 48, 0.05) 0 8px,
		transparent 8px 16px
	);
}


/* --- Verzendbalk -------------------------------------------------------- */

/* De balk blijft bovenaan het scherm plakken zodra je begint te
   scrollen, zodat je onderweg blijft zien hoeveel je nog nodig hebt
   voor gratis verzending. Hij heeft een eigen achtergrond, anders
   schuift de pagina er doorheen te zien. Is de winkelwagen leeg, dan
   staat er hidden op en neemt hij geen plaats in. */
.bc-verzendbalk {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--bc-creme);
	border-bottom: 1px solid var(--bc-rand);
	box-shadow: 0 2px 10px rgba(92, 65, 48, 0.07);
	padding: 10px var(--bc-gutter) 12px;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

/* In de winkelwagen en bij het afrekenen zit de balk binnen de marge
   van de pagina; daar mag hij gewoon de volle breedte van dat vak
   nemen en zijn ronde hoeken houden. */
.woocommerce-cart .bc-verzendbalk,
.woocommerce-checkout .bc-verzendbalk,
.single-product .bc-verzendbalk {
	margin-bottom: 18px;
	border-radius: 0 0 14px 14px;
}

.bc-verzendbalk[hidden] {
	display: none;
}

.bc-verzendbalk__toast {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	color: var(--bc-bruin);
}

.bc-verzendbalk__toast[hidden] {
	display: none;
}

.bc-verzendbalk__regel {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.bc-verzendbalk__tekst {
	font-size: 12.5px;
	color: var(--bc-body);
}

.bc-verzendbalk__mandje {
	flex: 0 0 auto;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--bc-oranje-tekst);
	text-decoration: none;
	white-space: nowrap;
	padding: 4px 0;
}

.bc-verzendbalk__mandje:hover,
.bc-verzendbalk__mandje:focus-visible {
	text-decoration: underline;
}

.bc-verzendbalk__spoor {
	height: 6px;
	border-radius: var(--bc-radius-pill);
	background: var(--bc-rand);
	overflow: hidden;
}

.bc-verzendbalk__vulling {
	display: block;
	height: 100%;
	border-radius: var(--bc-radius-pill);
	background: var(--bc-oranje);
	transition: width 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
	.bc-verzendbalk__vulling {
		transition: none;
	}
}


/* --- Gratis afhalen ------------------------------------------------------
   Eén regel onder de knop op de productpagina, en onder de verzendbalk
   in de winkelwagen. Zelfde zachte crème als de balk, zodat het bij
   elkaar hoort zonder ermee te concurreren. */
.bc-afhalen {
	box-sizing: border-box;
	display: flex;
	align-items: flex-start;
	gap: 9px;
	width: 100%;
	margin: 12px 0 0;
	padding: 10px 14px;
	border-radius: var(--bc-radius-mini);
	background: var(--bc-creme);
	color: var(--bc-bruin);
	font-family: var(--bc-font);
	font-size: var(--bc-fs-body);
	line-height: 1.45;
}

.bc-afhalen__icoon {
	flex: 0 0 auto;
	margin-top: 0;
	color: var(--bc-oranje-tekst);
}

/* In de winkelwagen staat hij tussen de balk en de producten. */
.bc-afhalen--mandje {
	margin: -6px 0 18px;
}

/* Lege winkelwagen: de balk verbergt zich, en dit regeltje gaat mee. */
.bc-verzendbalk[hidden] + .bc-afhalen--mandje {
	display: none;
}


/* --- Kruimelpad en titel ------------------------------------------------ */

.bc-winkel__kop {
	padding: 18px var(--bc-gutter) 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.bc-kruimels {
	margin: 0;
	font-size: 12.5px;
	color: var(--bc-meta);
}

.bc-kruimels a {
	color: var(--bc-oranje-tekst);
	text-decoration: none;
}

.bc-kruimels a:hover,
.bc-kruimels a:focus-visible {
	text-decoration: underline;
}

.bc-winkel__titel {
	margin: 0;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--bc-bruin);
}


/* --- Categorietegels ---------------------------------------------------- */

.bc-cattegels {
	padding: 14px var(--bc-gutter) 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
}

.bc-cattegel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	padding: 12px 4px 10px;
	border: 2px solid var(--bc-rand);
	border-radius: 16px;
	background: var(--bc-wit);
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.bc-cattegel:hover,
.bc-cattegel:focus-visible {
	border-color: var(--bc-oranje);
}

.bc-cattegel.is-actief {
	background: var(--bc-creme);
	border-color: var(--bc-oranje);
}

.bc-cattegel__icoon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	max-width: 100%;
	height: 26px;
}

.bc-cattegel__icoon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.bc-cattegel__label {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--bc-bruin);
	text-align: center;
}

.bc-cattegel.is-actief .bc-cattegel__label {
	color: var(--bc-oranje-tekst);
}


/* --- Routinefilter ------------------------------------------------------ */

.bc-routinefilter {
	padding: 16px var(--bc-gutter) 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bc-routinefilter__kop {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}

.bc-routinefilter__label {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bc-meta);
}

.bc-routinefilter__aantal {
	flex: 0 0 auto;
	font-size: 12px;
	color: var(--bc-meta);
}

.bc-stapkeuze {
	display: flex;
	gap: 2px;
	padding: 4px;
	border-radius: var(--bc-radius-pill);
	background: var(--bc-creme);
}

.bc-stapknop {
	flex: 1;
	min-width: 0;
	padding: 10px 4px;
	border: 0;
	border-radius: var(--bc-radius-pill);
	background: transparent;
	color: #7A6A5A;
	font-family: var(--bc-font);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.bc-stapknop:hover {
	color: var(--bc-bruin);
}

.bc-stapknop.is-actief {
	background: var(--bc-wit);
	color: var(--bc-oranje-tekst);
	box-shadow: 0 2px 8px rgba(92, 65, 48, 0.14);
}

.bc-routinefilter__tip {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.45;
	color: #7A6A5A;
}


/* --- Bundelkaart -------------------------------------------------------- */

.bc-bundel {
	margin: 14px var(--bc-gutter) 0;
	padding: 12px;
	border: 2px solid var(--bc-oranje);
	border-radius: 18px;
	background: var(--bc-wit);
	display: flex;
	align-items: center;
	gap: 12px;
}

.bc-bundel[hidden] {
	display: none;
}

.bc-bundel__foto {
	flex: 0 0 92px;
	width: 92px;
	height: 92px;
	border-radius: 12px;
	overflow: hidden;
	display: block;
}

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

.bc-bundel__tekst {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.bc-bundel__badge {
	align-self: flex-start;
	padding: 3px 9px;
	border-radius: var(--bc-radius-pill);
	background: var(--bc-bruin);
	color: var(--bc-wit);
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1.5;
}

.bc-bundel__naam {
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--bc-body);
	text-decoration: none;
}

.bc-bundel__sub {
	margin: 0;
	font-size: 11.5px;
	line-height: 1.35;
	color: var(--bc-meta);
}

.bc-bundel__onder {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 2px;
}

.bc-bundel__prijs {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: wrap;
}

.bc-bundel__prijs del {
	font-size: 12px;
	color: var(--bc-meta);
	text-decoration: line-through;
}

.bc-bundel__prijs ins {
	font-size: 16px;
	font-weight: 700;
	color: var(--bc-oranje-tekst);
	text-decoration: none;
	background: none;
}


/* --- De ronde plusknop --------------------------------------------------
   Eén knop voor het hele raster: altijd 40 bij 40, nooit uitrekken.

   De !important staat er met opzet. Deze knop draagt ook de WooCommerce-
   klassen die het toevoegen aan de winkelwagen regelen, en zowel
   WooCommerce zelf als onze eigen woocommerce.css tuigen die klassen op
   met eigen padding, hoogtes en kleuren. Die regels zijn specifieker dan
   .bc-plus en wonnen het, waardoor de knop uitgroeide tot een ovaal die
   over de prijs viel. Hier laten we er geen twijfel over bestaan.
   ------------------------------------------------------------------------ */

.bc-plus,
a.bc-plus,
.bc-winkel a.bc-plus,
.bc-winkel .bc-kaart__onder a.bc-plus {
	box-sizing: border-box !important;
	position: relative;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 40px !important;
	width: 40px !important;
	min-width: 40px !important;
	max-width: 40px !important;
	height: 40px !important;
	min-height: 40px !important;
	max-height: 40px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: var(--bc-oranje) !important;
	box-shadow: none !important;
	color: var(--bc-wit) !important;
	font-family: var(--bc-font);
	font-size: 22px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	letter-spacing: 0 !important;
	text-align: center !important;
	text-decoration: none !important;
	text-transform: none !important;
	white-space: nowrap !important;
	overflow: hidden;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.bc-plus:hover,
.bc-plus:focus-visible {
	background: var(--bc-oranje-hover) !important;
	color: var(--bc-wit) !important;
}

/* WooCommerce hangt tijdens het toevoegen een spinner en een vinkje aan
   de knop via ::after. In een rond knopje van 40 px past dat niet; we
   geven zelf feedback met de kleur en met de melding bovenaan. */
.bc-plus::before,
.bc-plus::after {
	content: none !important;
	display: none !important;
}

.bc-plus.loading {
	opacity: 0.55;
}

.bc-plus.added {
	background: var(--bc-bruin) !important;
}

/* De automatische "Winkelwagen bekijken"-link die WooCommerce na het
   toevoegen naast de knop plakt, hoort niet in dit raster: de
   verzendbalk bovenaan toont het mandje al. */
.bc-winkel .added_to_cart,
.bc-kaart .added_to_cart,
.bc-bundel .added_to_cart,
a.added_to_cart.wc-forward,
.bc-winkel a.added_to_cart {
	display: none !important;
}


/* --- Productraster ------------------------------------------------------ */

/* De ruimte tussen de kaarten staat hier met !important, en rij en kolom
   apart. Een losse row-gap van buitenaf drukte de rijen anders tegen
   elkaar aan, waardoor de kaarten elkaar leken te raken. */
.bc-raster,
.bc-winkel .bc-raster {
	padding: 14px var(--bc-gutter) 0;
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	column-gap: 12px !important;
	row-gap: 18px !important;
	align-items: stretch !important;
	align-content: start !important;
}

/* Niets in het raster mag een eigen marge meebrengen: dat is wat de
   rijen eerder over elkaar duwde. */
.bc-winkel .bc-raster > * {
	margin: 0 !important;
}

.bc-kaart {
	display: flex;
	flex-direction: column;
	min-width: 0;
	height: 100%;
	border: 1px solid var(--bc-rand);
	border-radius: 16px;
	background: var(--bc-wit);
	overflow: hidden;
}

.bc-kaart[hidden] {
	display: none;
}

.bc-kaart__foto {
	position: relative;
	display: block;
	height: 150px;
	flex: 0 0 auto;
	background: var(--bc-creme);
	text-decoration: none;
}

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

.bc-kaart__badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	padding: 4px 9px;
	border-radius: var(--bc-radius-pill);
	color: var(--bc-wit);
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1.4;
}

.bc-kaart__badge--oranje { background: var(--bc-oranje); }
.bc-kaart__badge--bruin  { background: var(--bc-bruin); }
.bc-kaart__badge--blauw  { background: var(--bc-blauw); }

/* Een product kan bij twee stappen horen; de labels staan dan naast
   elkaar linksonder op de foto. */
.bc-kaart__stappen {
	position: absolute;
	bottom: 8px;
	left: 8px;
	right: 8px;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.bc-kaart__stap {
	padding: 3px 8px;
	border-radius: var(--bc-radius-pill);
	background: var(--bc-wit);
	color: var(--bc-blauw);
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
	box-shadow: 0 1px 4px rgba(92, 65, 48, 0.12);
}

.bc-kaart__tekst {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 10px 12px 12px;
}

.bc-kaart__merk {
	margin: 0;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bc-meta);
}

.bc-kaart__naam {
	margin: 0;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--bc-body);
}

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

.bc-kaart__naam a:hover,
.bc-kaart__naam a:focus-visible {
	color: var(--bc-oranje-tekst);
}

.bc-kaart__inhoud {
	margin: 0;
	font-size: 11.5px;
	color: var(--bc-meta);
}

.bc-kaart__onder {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8px;
	margin-top: auto;
	padding-top: 8px;
}

.bc-kaart__prijs {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--bc-bruin);
}

.bc-kaart__prijs del {
	display: block;
	font-size: 11.5px;
	font-weight: 400;
	color: var(--bc-meta);
}

.bc-kaart__prijs ins {
	text-decoration: none;
	background: none;
	color: var(--bc-oranje-tekst);
}

.bc-kaart__prijs .woocommerce-Price-currencySymbol {
	font-weight: inherit;
}


/* --- Huidtest-kaart in het raster --------------------------------------- */

.bc-quizkaart {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 18px;
	border-radius: 16px;
	background: var(--bc-blauw);
	color: var(--bc-wit);
	text-decoration: none;
}

.bc-quizkaart[hidden] {
	display: none;
}

.bc-quizkaart__tekst {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.bc-quizkaart__titel {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
}

.bc-quizkaart__sub {
	font-size: 12.5px;
	line-height: 1.35;
}

.bc-quizkaart__knop {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 10px 14px;
	border-radius: var(--bc-radius-pill);
	background: var(--bc-wit);
	color: #2E8DB0;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

.bc-quizkaart:hover .bc-quizkaart__knop,
.bc-quizkaart:focus-visible .bc-quizkaart__knop {
	background: var(--bc-creme);
}


/* --- Leegstand en paginering -------------------------------------------- */

.bc-raster__leeg {
	margin: 0;
	padding: 32px var(--bc-gutter);
	text-align: center;
	font-size: 14px;
	color: var(--bc-meta);
}

.bc-raster__leeg[hidden] {
	display: none;
}

.bc-winkel__paginering {
	padding: 20px var(--bc-gutter) 0;
}

.bc-winkel__paginering .woocommerce-pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.bc-winkel__paginering .woocommerce-pagination li {
	border: 0;
	margin: 0;
}

.bc-winkel__paginering .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	padding: 0 12px;
	border: 1px solid var(--bc-rand);
	border-radius: var(--bc-radius-pill);
	background: var(--bc-wit);
	color: var(--bc-bruin);
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: none;
}

.bc-winkel__paginering .page-numbers.current,
.bc-winkel__paginering .page-numbers:hover {
	background: var(--bc-oranje);
	border-color: var(--bc-oranje);
	color: var(--bc-wit);
}


/* --- Vertrouwensregel --------------------------------------------------- */

.bc-troeven {
	margin: 20px var(--bc-gutter) 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--bc-rand);
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	text-align: center;
}

.bc-troeven li {
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--bc-bruin);
}


/* ==========================================================================
   Opschalen naar grotere schermen
   ========================================================================== */

@media (min-width: 700px) {

	.bc-winkel {
		max-width: 1120px;
		margin: 0 auto;
		padding-bottom: 40px;
	}

	.bc-verzendbalk {
		padding: 12px 40px 14px;
	}

	.bc-winkel__kop {
		padding: 28px 40px 0;
		gap: 6px;
	}

	.bc-winkel__titel {
		font-size: 40px;
	}

	.bc-cattegels {
		padding: 20px 40px 0;
		gap: 14px;
	}

	.bc-cattegel {
		flex-direction: row;
		justify-content: center;
		gap: 12px;
		padding: 14px 10px;
	}

	.bc-cattegel__icoon {
		width: 48px;
		height: 30px;
	}

	.bc-cattegel__label {
		font-size: 15px;
	}

	.bc-routinefilter {
		padding: 24px 40px 0;
		gap: 10px;
	}

	.bc-routinefilter__label,
	.bc-routinefilter__aantal {
		font-size: 13px;
	}

	.bc-stapknop {
		padding: 11px 8px;
		font-size: 13.5px;
	}

	.bc-routinefilter__tip {
		font-size: 13.5px;
	}

	.bc-bundel {
		margin: 20px 40px 0;
		padding: 16px;
		gap: 20px;
	}

	.bc-bundel__foto {
		flex: 0 0 120px;
		width: 120px;
		height: 120px;
	}

	.bc-bundel__naam {
		font-size: 18px;
	}

	.bc-bundel__sub {
		font-size: 13px;
	}

	.bc-bundel__prijs ins {
		font-size: 20px;
	}

	.bc-raster,
	.bc-winkel .bc-raster {
		padding: 20px 40px 0;
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		column-gap: 20px !important;
		row-gap: 28px !important;
	}

	.bc-kaart__foto {
		height: 220px;
	}

	.bc-kaart__naam {
		font-size: 15px;
	}

	.bc-kaart__prijs {
		font-size: 17px;
	}

	.bc-quizkaart {
		padding: 22px 28px;
	}

	.bc-quizkaart__titel {
		font-size: 18px;
	}

	.bc-quizkaart__sub {
		font-size: 13.5px;
	}

	.bc-troeven {
		margin: 32px 40px 0;
		padding-top: 20px;
		gap: 16px;
	}

	.bc-troeven li {
		font-size: 13.5px;
	}

	.bc-winkel__paginering {
		padding: 28px 40px 0;
	}
}

@media (min-width: 1000px) {

	.bc-raster,
	.bc-winkel .bc-raster {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}

	.bc-kaart__foto {
		height: 200px;
	}
}