/* =========================================================================
   Buurtmand — huisstijl (child-theme op Storefront)
   Doel (brief §3/§4): "winkel eerst", multi-store helder, partner-branding
   zichtbaar, meeliften als rustige extra (niet schreeuwerig). Rustig, vertrouwd,
   voedsel/buurt-gevoel. Toegankelijk (contrast, focus, touch-targets) + responsive.

   Strategie: design-tokens als CSS-custom-properties, daarna gerichte overrides
   op Storefront/WooCommerce-selectors. We hacken geen core; alles is cascade.
   ========================================================================= */

:root {
	/* Palet — warm, voedsel/buurt. Donkergroen = vertrouwen/vers; terracotta = warmte. */
	--bm-green:        #2f5d3a; /* primair: knoppen, links, accenten */
	--bm-green-dark:   #244a2e; /* hover/active */
	--bm-green-soft:   #e7efe7; /* zachte vlakken/badges */
	--bm-terracotta:   #c4622d; /* secundair accent / prijs-call-to-action */
	--bm-terracotta-d: #a8511f;
	--bm-amber:        #e8b04b; /* subtiele highlight (host/incentive) */

	--bm-ink:          #2a2e2a; /* hoofdtekst — niet puur zwart, zachter */
	--bm-ink-soft:     #5a615a; /* secundaire tekst */
	--bm-paper:        #fbf8f2; /* warme off-white achtergrond */
	--bm-card:         #ffffff; /* kaarten/producttegels */
	--bm-line:         #e6e1d6; /* randen/scheidingen */

	--bm-radius:       12px;
	--bm-radius-sm:    8px;
	--bm-shadow:       0 1px 2px rgba(42, 46, 42, .06), 0 6px 18px rgba(42, 46, 42, .06);
	--bm-shadow-sm:    0 1px 2px rgba(42, 46, 42, .08);

	--bm-maxw:         1200px;

	/* Map Storefront's eigen custom properties op ons palet waar die bestaan. */
	--storefront-pre-background-color: var(--bm-green-soft);
}

/* -------------------------------------------------------------------------
   Basis / typografie — rustig en leesbaar
   ------------------------------------------------------------------------- */
body.woocommerce-page,
body {
	background-color: var(--bm-paper);
	color: var(--bm-ink);
	font-family: "Inter", "Helvetica Neue", Helvetica, Arial, "Segoe UI", system-ui, sans-serif;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.page-title,
.entry-title {
	color: var(--bm-ink);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

a {
	color: var(--bm-green);
	text-decoration: none;
}
a:hover,
a:focus {
	color: var(--bm-green-dark);
	text-decoration: underline;
}

/* Toegankelijke focus-ring overal — Storefront laat dit deels los. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.button:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--bm-amber);
	outline-offset: 2px;
	border-radius: 3px;
}

/* Lekker brede, rustige content-kolom. */
.col-full {
	max-width: var(--bm-maxw);
}

/* -------------------------------------------------------------------------
   Header — winkel-eerst, kalm
   ------------------------------------------------------------------------- */
.site-header {
	background-color: var(--bm-card);
	border-bottom: 1px solid var(--bm-line);
	box-shadow: var(--bm-shadow-sm);
}

.site-header,
.site-branding,
.site-title a {
	color: var(--bm-ink);
}
.site-title a:hover {
	color: var(--bm-green);
	text-decoration: none;
}

.storefront-primary-navigation {
	background-color: var(--bm-card);
	border-top: 1px solid var(--bm-line);
}
.main-navigation ul li a {
	color: var(--bm-ink);
	font-weight: 600;
}
.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a {
	color: var(--bm-green);
}

/* Winkelmandje-knop in de header in onze accentkleur. */
.site-header-cart .cart-contents,
.site-header .site-header-cart .cart-contents {
	color: var(--bm-ink);
}
.site-header-cart .cart-contents:hover {
	color: var(--bm-green);
}

/* -------------------------------------------------------------------------
   Knoppen — één duidelijke huisstijl, dik genoeg om te tikken (a11y)
   ------------------------------------------------------------------------- */
.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background-color: var(--bm-green);
	color: #fff;
	border-radius: var(--bm-radius-sm);
	border: 0;
	font-weight: 600;
	letter-spacing: 0.01em;
	padding: 0.7em 1.25em;
	min-height: 44px; /* touch-target */
	text-shadow: none;
	box-shadow: none;
	transition: background-color .15s ease, transform .05s ease;
}
.button:hover,
button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background-color: var(--bm-green-dark);
	color: #fff;
}
.button:active,
button:active,
.woocommerce a.button:active,
.woocommerce button.button:active {
	transform: translateY(1px);
}

/* "Toevoegen aan mand" mag opvallen zonder te schreeuwen → terracotta. */
.woocommerce ul.products li.product .button.add_to_cart_button,
.woocommerce div.product form.cart .button {
	background-color: var(--bm-terracotta);
}
.woocommerce ul.products li.product .button.add_to_cart_button:hover,
.woocommerce div.product form.cart .button:hover {
	background-color: var(--bm-terracotta-d);
}

/* Secundaire/neutrale knop (bv. "verder winkelen"). */
.bm-button-secondary,
.woocommerce a.button.bm-button-secondary {
	background-color: transparent;
	color: var(--bm-green);
	border: 2px solid var(--bm-green);
}
.bm-button-secondary:hover {
	background-color: var(--bm-green-soft);
	color: var(--bm-green-dark);
}

/* -------------------------------------------------------------------------
   "Winkel met meerdere speciaalzaken" — uitleg-strip onder de header
   Gerenderd via functions.php (bm_storefront_intro). Rustig, informatief.
   ------------------------------------------------------------------------- */
.bm-shop-intro {
	background: linear-gradient(180deg, var(--bm-green-soft) 0%, var(--bm-paper) 100%);
	border-bottom: 1px solid var(--bm-line);
}
.bm-shop-intro__inner {
	max-width: var(--bm-maxw);
	margin: 0 auto;
	padding: 1.5em 1.5em 1.75em;
}
.bm-shop-intro__title {
	margin: 0 0 .25em;
	font-size: 1.4em;
}
.bm-shop-intro__text {
	margin: 0;
	color: var(--bm-ink-soft);
	max-width: 60ch;
}
.bm-shop-intro__points {
	display: flex;
	flex-wrap: wrap;
	gap: 1em 2em;
	margin: 1em 0 0;
	padding: 0;
	list-style: none;
}
.bm-shop-intro__points li {
	display: flex;
	align-items: flex-start;
	gap: .5em;
	margin: 0;
	color: var(--bm-ink);
	font-weight: 600;
	flex: 1 1 220px;
}
.bm-shop-intro__points .bm-dot {
	flex: 0 0 auto;
	width: 1.6em;
	height: 1.6em;
	border-radius: 50%;
	background: var(--bm-green);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: .9em;
}
.bm-shop-intro__points small {
	display: block;
	font-weight: 400;
	color: var(--bm-ink-soft);
}

/* -------------------------------------------------------------------------
   Productcatalogus — tegels als nette "winkel"-kaarten
   ------------------------------------------------------------------------- */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	background: var(--bm-card);
	border: 1px solid var(--bm-line);
	border-radius: var(--bm-radius);
	box-shadow: var(--bm-shadow);
	padding: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow .15s ease, transform .15s ease;
}
.woocommerce ul.products li.product:hover {
	box-shadow: 0 2px 4px rgba(42,46,42,.08), 0 12px 28px rgba(42,46,42,.10);
	transform: translateY(-2px);
}
.woocommerce ul.products li.product a img {
	margin: 0 0 .5em;
	border-radius: 0;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
	padding: 0 1em;
	font-size: 1.02em;
	font-weight: 600;
	color: var(--bm-ink);
}
.woocommerce ul.products li.product .price {
	padding: 0 1em;
	color: var(--bm-terracotta-d);
	font-weight: 700;
}
.woocommerce ul.products li.product .price del {
	color: var(--bm-ink-soft);
	font-weight: 400;
}
.woocommerce ul.products li.product .button {
	margin: .75em 1em 1em;
}
.woocommerce ul.products li.product .star-rating {
	margin: 0 1em .5em;
}

/* -------------------------------------------------------------------------
   Partner-branding op product-tegel + productpagina (taxonomie bm_partner)
   Gerenderd via functions.php. Maakt de "winkel met winkels" zichtbaar:
   partnernaam + koeltype. Rustig label, geen reclame.
   ------------------------------------------------------------------------- */
.bm-partner-badge {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	margin: 1em 1em .25em;
	padding: .25em .65em;
	background: var(--bm-green-soft);
	color: var(--bm-green-dark);
	border-radius: 999px;
	font-size: .8em;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
}
.bm-partner-badge:hover,
.bm-partner-badge:focus {
	background: var(--bm-green);
	color: #fff;
	text-decoration: none;
}
.bm-partner-badge .bm-partner-badge__icon {
	font-size: .95em;
	line-height: 1;
}

/* Koeltype-chip (vries / gekoeld / droog) — kleurgecodeerd, met tekstlabel
   (kleur alléén is niet toegankelijk → altijd ook woord). */
.bm-koeltype {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	padding: .15em .55em;
	border-radius: 999px;
	font-size: .75em;
	font-weight: 700;
	border: 1px solid transparent;
}
.bm-koeltype--vries   { background: #e8f1fb; color: #1d5ba6; border-color: #cfe2f6; }
.bm-koeltype--gekoeld { background: #e7f4ef; color: #1d7a59; border-color: #cfeae0; }
.bm-koeltype--droog   { background: #f6efe2; color: #8a6d1f; border-color: #eadfc7; }

/* Op de single-product-pagina iets prominenter onder de titel. */
.bm-single-partner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5em;
	margin: 0 0 1em;
	padding: .75em 1em;
	background: var(--bm-card);
	border: 1px solid var(--bm-line);
	border-left: 4px solid var(--bm-green);
	border-radius: var(--bm-radius-sm);
}
.bm-single-partner .bm-partner-badge {
	margin: 0;
}
.bm-single-partner__by {
	color: var(--bm-ink-soft);
	font-size: .9em;
}

/* Partner-archief (taxonomie-pagina): assortiment-strip per speciaalzaak.
   WooCommerce toont titel + beschrijving zelf; wij voegen alleen het
   koeltype-assortiment toe (zie functions.php sectie 6). */
.bm-partner-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5em 1em;
	margin: 0 0 2em;
	color: var(--bm-ink-soft);
	font-size: .92em;
}
.bm-partner-archive-header.bm-partner-meta {
	background: var(--bm-card);
	border: 1px solid var(--bm-line);
	border-left: 4px solid var(--bm-green);
	border-radius: var(--bm-radius-sm);
	padding: .75em 1em;
}

/* -------------------------------------------------------------------------
   Cart / checkout — rustige tabellen, duidelijke totalen
   ------------------------------------------------------------------------- */
.woocommerce table.shop_table,
.woocommerce-cart table.cart,
.woocommerce-checkout .woocommerce-checkout-review-order-table {
	background: var(--bm-card);
	border: 1px solid var(--bm-line);
	border-radius: var(--bm-radius);
	overflow: hidden;
}
.woocommerce .cart-collaterals .cart_totals > h2,
.woocommerce-checkout #order_review_heading {
	color: var(--bm-ink);
}

/* Het gecombineerde-minimum-bericht (BM_Minimum) leesbaar in onze huisstijl:
   Woo rendert dit als .woocommerce-info / .woocommerce-error notice. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
	border-top-color: var(--bm-green);
	background: var(--bm-green-soft);
	color: var(--bm-ink);
	border-radius: var(--bm-radius-sm);
}
.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--bm-green);
}
.woocommerce-error {
	border-top-color: var(--bm-terracotta);
	background: #fbeee6;
}
.woocommerce-error::before {
	color: var(--bm-terracotta-d);
}

/* -------------------------------------------------------------------------
   MEELIFT-ENTRY — "de kers, niet de taart" (brief §4)
   Rustige, kleine sectie onderaan winkelpagina's. NIET in your face.
   Gerenderd via functions.php (bm_meelift_entry) — toont [buurtmand_meelift]
   alleen als die shortcode bestaat; anders een kalme uitleg + link.
   ------------------------------------------------------------------------- */
.bm-meelift {
	max-width: var(--bm-maxw);
	margin: 3em auto 1em;
	padding: 1.5em 1.75em;
	background: var(--bm-card);
	border: 1px solid var(--bm-line);
	border-radius: var(--bm-radius);
	box-shadow: var(--bm-shadow);
}
.bm-meelift__head {
	display: flex;
	align-items: center;
	gap: .6em;
	margin: 0 0 .5em;
}
.bm-meelift__badge {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: .35em;
	padding: .2em .6em;
	background: var(--bm-amber);
	color: #4a3a10;
	border-radius: 999px;
	font-size: .75em;
	font-weight: 700;
	text-transform: lowercase;
	letter-spacing: .02em;
}
.bm-meelift__title {
	margin: 0;
	font-size: 1.2em;
	color: var(--bm-ink);
}
.bm-meelift__text {
	margin: 0 0 1em;
	color: var(--bm-ink-soft);
	max-width: 64ch;
}
.bm-meelift__cta .button {
	background: var(--bm-green);
}
.bm-meelift__cta {
	display: flex;
	flex-wrap: wrap;
	gap: .75em;
	align-items: center;
}
.bm-meelift__cta .bm-meelift__note {
	color: var(--bm-ink-soft);
	font-size: .85em;
}

/* Wanneer de plugin de shortcode wél levert, geven we hem ademruimte. */
.bm-meelift__app {
	margin-top: 1em;
}

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */
.site-footer {
	background: var(--bm-green-dark);
	color: #e7efe7;
}
.site-footer a {
	color: #fff;
}
.site-footer a:hover {
	color: var(--bm-amber);
}

/* -------------------------------------------------------------------------
   Responsive — mobiel-eerst gedrag, alles blijft tikbaar
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.bm-shop-intro__inner,
	.bm-meelift {
		padding-left: 1em;
		padding-right: 1em;
	}
	.bm-shop-intro__points {
		gap: .75em;
	}
	.bm-shop-intro__points li {
		flex: 1 1 100%;
	}
	.bm-meelift {
		margin-top: 2em;
	}
}

@media (max-width: 480px) {
	.woocommerce ul.products li.product .button {
		width: calc(100% - 2em);
	}
}

/* Respecteer "verminderde beweging". */
@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
		animation: none !important;
	}
	.woocommerce ul.products li.product:hover {
		transform: none;
	}
}

/* Screen-reader-only helper (Storefront heeft .screen-reader-text; back-up hier). */
.bm-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}