/*
 * Bats & Birds maatwerk – basisstijlen voor de shortcodes.
 *
 * De utility-klassen hieronder werden al door de shortcodes gebruikt (prijsblok, vacatures),
 * maar het oude stylesheet werd nooit geladen. Ze zijn gescoped onder .bb-ui zodat ze geen
 * andere elementen met dezelfde generieke klassenamen raken.
 * Kaart-/gridstijlen voor producten staan in Divi > Thema-opties > Custom CSS.
 */

.bb-ui.font-secondary, .bb-ui .font-secondary { font-family: 'Merriweather', Georgia, serif; }
.bb-ui.font-bold, .bb-ui .font-bold { font-weight: 700; }
.bb-ui.flex, .bb-ui .flex { display: flex; }
.bb-ui.flex-col, .bb-ui .flex-col { flex-direction: column; }
.bb-ui.gap-10, .bb-ui .gap-10 { gap: 10px; }
.bb-ui.gap-36, .bb-ui .gap-36 { gap: 36px; }
.bb-ui .text-lg { font-size: 44px; }
.bb-ui .text-md { font-size: 24px; }
.bb-ui .text-sm { font-size: 18px; }
.bb-ui .text-xs { font-size: 14px; }
.bb-ui .text-dark-green { color: #1D3C34; }
.bb-ui .text-light-green { color: #39892F; }
.bb-ui .text-grey { color: #5D5D5D; }
.bb-ui .text-light-grey { color: #858585; }
.bb-ui .strike { text-decoration: line-through; }
.bb-ui #light-green-titles h3 { color: #39892F; }

@media screen and (max-width: 980px) {
	.bb-ui .text-lg { font-size: 32px; }
}
@media screen and (max-width: 768px) {
	.bb-ui .text-lg { font-size: 26px; }
	.bb-ui .text-md { font-size: 20px; }
	.bb-ui .text-sm { font-size: 16px; }
}

/* Categorienamen in productkaarten (was een link binnen een link; nu tekst). */
.bb-product-cat span { color: #78A469; }

/*
 * Categoriegrid ([bb_category_products]): de hele kaart is een link. Voorheen stond er een link
 * binnen die link; de browser "repareerde" dat door .bb-product-item direct in het grid te zetten.
 * Nu de HTML geldig is, is de link het grid-item en krijgt die de kolombreedtes uit Divi's custom CSS.
 */
.bb-category-archive .bb-product-grid > a {
	display: block;
	width: 23%;
	margin: 1%;
	color: inherit;
	text-decoration: none;
}
.bb-category-archive .bb-product-grid > a > .bb-product-item {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	margin: 0;
}
@media (max-width: 992px) {
	.bb-category-archive .bb-product-grid > a { width: 31%; }
}
@media (max-width: 768px) {
	.bb-category-archive .bb-product-grid > a { width: 48%; }
}
@media (max-width: 576px) {
	.bb-category-archive .bb-product-grid > a { width: 100%; }
}

/*
 * Footer (Theme Builder): de foto in de call-to-action steekt op mobiel ~140px buiten beeld,
 * waardoor elke pagina horizontaal kon scrollen. clip snijdt alleen horizontaal af, zonder
 * een scrollcontainer te maken (de foto mag verticaal wel buiten de sectie uitsteken).
 */
footer.et-l--footer {
	overflow-x: clip;
}