/* Haags.nl — FluentCart shop in de groen/gele look (geladen op /winkel/ en
 * single-product/categorie-pagina's). Zelfstandig: laadt eigen fonts + kleuren,
 * want foundation.css hangt alleen aan de code-owned Etch-pagina's.
 *
 * Oorspronkelijk een kopie van projects/sjaakbralide/src/Site/Styles/ShopTheme.css
 * (zelfde --sb-* namen en sectievolgorde), maar de twee lopen inmiddels uiteen:
 * haags heeft o.a. eigen regels voor de "Naar de shop"-knop, "Bekijk opties",
 * de lightbox (.fct-product-modal), de afrekenpagina en de filter-sidebar met
 * het mobiele filterpaneel (blokken "HAAGS-SPECIFIEK" onderaan). Kopieer dus
 * niet blind van de ene site naar de andere: vergelijk eerst met een diff. De
 * grid/lijst-schakelaar is op beide sites verborgen. */

/* Lettertypes: zelf gehost via src/Site/Fonts.php (geen Google Fonts-@import meer). */

:root {
	--sb-green-dark: #1E7A54;
	--sb-green: #2A9D6E;
	--sb-yellow: #F7E87D;
	--sb-yellow-ochre: #E6C044;
	--sb-white: #FFFFFF;
	--sb-font: "Antonio", system-ui, sans-serif;
	--sb-font-read: "Funnel Display", system-ui, sans-serif;

	/* Drie kolommen. */
	--fct-product-list-columns: 3;

	/* Cards -> groen. */
	--fct-card-bg: var(--sb-green);

	/* Knoppen ("Bestellen") -> geel met groene tekst. */
	--fct-btn-bg-color: var(--sb-yellow);
	--fct-btn-text-color: var(--sb-green-dark);
	--fct-card-btn-bg-color: var(--sb-yellow);
	--fct-card-btn-text-color: var(--sb-green-dark);
	--fct-shop-btn-bg-color: var(--sb-yellow);
	--fct-shop-btn-text-color: var(--sb-green-dark);
	--fct-add-to-cart-btn-bg-color: var(--sb-yellow);
	--fct-add-to-cart-btn-text-color: var(--sb-green-dark);
	--fct-add-to-cart-btn-hover-bg-color: var(--sb-yellow-ochre);
	--fct-add-to-cart-btn-border-color: var(--sb-yellow);

	/* Tekst op de (groene) cards -> licht. */
	--fct-card-primary-text-color: var(--sb-white);
	--fct-card-text-color: var(--sb-white);

	/* Primaire accentkleur (paginatie/actief) -> groen-dark. */
	--fct-shop-primary-bg-color: var(--sb-green-dark);
	--fct-primary-bg-color: var(--sb-green-dark);
}

/* Gele achtergrond met verticale rasterlijnen zoals de andere pagina's
 * (.sb-section::before). background-attachment: fixed houdt de strepen staan. */
body {
	background-color: var(--sb-yellow-ochre);
	background-image:
		linear-gradient(90deg, rgba(255, 255, 255, 0.10) 2px, transparent 2px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
	background-size: 100px 100%, 20px 100%;
	background-position: -2px 0, -1px 0;
	background-attachment: fixed;
}

/* ---- Titel boven de producten (SJAAK BRAL / WEBSJOP) ---- */
.sb-shop-title {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(.4rem, 1.2vw, 1rem);
	margin: 0 auto;
	padding: clamp(2.5rem, 6vw, 5rem) 5% 0;
	text-align: center;
}
.sb-shop-title__word {
	font-family: var(--sb-font);
	font-size: clamp(2.6rem, 6.5vw, 6rem);
	font-weight: 700;
	line-height: .9;
	letter-spacing: -.015em;
	text-transform: uppercase;
	color: var(--sb-green-dark);
	/* Intro: verborgen tot sb-shop.js .is-in zet (ná de page loader). */
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
}
.sb-shop-title.is-in .sb-shop-title__word { opacity: 1; transform: none; }
.sb-shop-title.is-in .sb-shop-title__word:nth-child(2) { transition-delay: .12s; }

/* ---- Gecentreerd productgrid ---- */
.wp-block-fluent-cart-products,
.fct-products-wrapper {
	width: 92%;
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	padding-top: clamp(1rem, 2vw, 1.75rem);
	padding-bottom: clamp(2.5rem, 6vw, 5rem);
}

/* HAAGS-SPECIFIEK: sjaakbral verbergt hier óók de filter-sidebar. Haags houdt
 * die; de styling staat onderaan onder "HAAGS-SPECIFIEK — filter-sidebar". De
 * max-width hierboven is daarom 1280 i.p.v. 1120px, zodat het 3-koloms grid
 * naast de sidebar past. */

/* Grid/lijst-view-switcher verbergen — alleen grid-view. */
.fct-shop-view-switcher,
.fluent-cart-shop-app-view-switcher-wrap,
[class*="view-switcher"] {
	display: none !important;
}

/* Houd de inner binnen de gecentreerde wrapper (fct-full-container-width breekt
 * anders full-bleed uit). */
.fct-products-wrapper-inner.fct-full-container-width {
	width: auto !important;
	max-width: 100% !important;
	margin-inline: 0 !important;
	left: auto !important;
	right: auto !important;
	transform: none !important;
}

/* De echte kaart-grid is .fct-products-container (grid-columns-N) — forceer 3.
 * align-items: stretch = alle kaarten in een rij even hoog (knoppen op lijn). */
.fct-products-container,
.fct-products-container[class*="grid-columns-"] {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: clamp(1.25rem, 2.5vw, 2rem) !important;
	align-items: stretch !important;
}
@media (max-width: 900px) {
	.fct-products-container,
	.fct-products-container[class*="grid-columns-"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 560px) {
	.fct-products-container,
	.fct-products-container[class*="grid-columns-"] { grid-template-columns: 1fr !important; }
}

/* ---- Productcards (groen) ---- */
/* Ronding overal 10px = de afbeeldings-ronding van de biografie-pagina. Gelijke
 * groene padding rondom (afbeelding, titel/prijs en knop even ver van de rand). */
.fct-product-card {
	--card-radius: 10px;
	display: flex !important;
	flex-direction: column;
	height: 100%;
	gap: clamp(.6rem, 1vw, .9rem);
	padding: clamp(10px, 1.1vw, 15px);
	border-radius: var(--card-radius);
	background-color: var(--sb-green);
	border: none;
	box-shadow: 0 10px 26px rgba(20, 60, 44, .16);
	transition: transform .2s ease, box-shadow .2s ease;
}
.fct-product-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 38px rgba(20, 60, 44, .24);
}

/* Intro-reveal (JS zet sb-reveal + is-in): van onder infaden. */
.fct-product-card.sb-reveal {
	opacity: 0;
	transform: translateY(34px);
	transition: opacity .6s ease, transform .6s ease;
}
.fct-product-card.sb-reveal.is-in {
	opacity: 1;
	transform: none;
}

/* Afbeelding: afgeronde rechthoek (10px), gelijke groene rand rondom. */
.fct-product-card-image-wrap {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--card-radius) !important;
	background-color: #f4efe6;
}
.fct-product-card-image {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	border-radius: var(--card-radius) !important;
}

.fct-product-card-title {
	font-family: var(--sb-font-read);
	font-weight: 600;
	color: var(--sb-white);
	margin: 0 !important;
}

/* Producttitel-link: wit, en bij hover GEEL (i.p.v. het thema-blauw van ACSS),
 * passend bij de gele prijzen. Geen onderstreping — dat is off-brand. */
.fct-product-card-title a {
	color: inherit;
	text-decoration: none;
}
.fct-product-card-title a:hover,
.fct-product-card-title a:focus-visible,
.fct-product-card:hover .fct-product-card-title a {
	color: var(--sb-yellow) !important;
	text-decoration: none !important;
}

/* "Naar de shop"-knop onder de producten op de homepage: groene pill met gele
 * Antonio-tekst. */
.hg-shop-cta {
	display: flex;
	justify-content: center;
	padding: clamp(1.25rem, 2.2vw, 1.6rem) 1rem clamp(1rem, 2.2vw, 1.5rem);
}
/* De producten-wrapper heeft standaard 80px padding-onder — die duwt de knop ver
 * van de kaarten. Op de homepage weg, zodat de knop dicht bij de kaarten hoort. */
body.home .fct-products-wrapper {
	padding-bottom: 0 !important;
}
/* Ruimte ónder de knop (de producten-sectie heeft standaard ~90px padding-onder):
 * wat compacter dan de default, maar iets ruimer dan de knop-hug erboven. */
body.home main > section:not(.scroll-section) {
	padding-bottom: clamp(2.25rem, 4.5vw, 3.75rem) !important;
}
.hg-shop-cta__btn {
	display: inline-block;
	/* Iets donkerder groen dan --sb-green-dark: geel op #1E7A54 haalde net geen
	 * 4,5:1 contrast (PageSpeed), op #176343 is het 5,7:1. */
	background-color: #176343;
	color: var(--sb-yellow);
	font-family: var(--sb-font);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: clamp(1.15rem, 2vw, 1.6rem);
	line-height: 1;
	padding: .85em 2em;
	border-radius: 999px;
	text-decoration: none;
	transition: background-color .2s ease, transform .2s ease;
}
.hg-shop-cta__btn:hover,
.hg-shop-cta__btn:focus-visible {
	background-color: #124f36;
	color: var(--sb-yellow);
	transform: translateY(-2px);
	text-decoration: none;
}

/* Prijzen -> geel, groter, in Antonio. Eigen regelhoogte: FluentCarts krappe
 * waarde (~0.75) liet een afgebroken "Vanaf €29,95" (smalle kaart, bijv.
 * gerelateerde producten) over zichzelf heen lopen. Bij 1.2 zit er ~1/3
 * letterhoogte tussen de regels (Antonio-hoofdletters ≈ 0.87em, gemeten). */
.fct-product-card-prices,
.fct-product-card [class*="price"],
.fct-product-card-price {
	font-family: var(--sb-font);
	font-weight: 700;
	font-size: clamp(1.5rem, 2.2vw, 2.1rem);
	line-height: 1.2;
	color: var(--sb-yellow);
}

/* "/per stuk"-suffix achter de prijs: klein en gedempt (niet de grote gele prijs).
 * !important omdat de bovenstaande [class*="price"]-wildcard óók fct_price_suffix
 * raakt (er zit "price" in de naam). */
.fct_price_suffix {
	display: inline !important;
	margin-left: .3em;
	font-family: var(--sb-font-read) !important;
	font-size: .85rem !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
	color: var(--sb-yellow) !important;
	opacity: .8;
	white-space: nowrap;
}

/* ---- Knop ("Bestellen"): geel, bold, 10px ronding, altijd onderaan de kaart
 * (margin-top:auto) zodat de knoppen bij elke kaart op dezelfde hoogte staan.
 * "Bekijk opties" (producten met opties) ook: bij gerelateerde producten mist
 * die de block-class en stond hij dun en lager. ---- */
.fluent-cart-add-to-cart-button,
.wp-block-fluent-cart-shopapp-product-buttons,
.fct-single-product-card-view-button {
	width: 100% !important;
	margin: auto 0 0 !important;
	border: none !important;
	border-radius: var(--card-radius) !important;
	padding: clamp(.85rem, 1.25vw, 1.1rem) 1rem !important;
	font-family: var(--sb-font-read);
	font-weight: 700 !important;
}

/* De winkelwagen-knop staat nu in CartButton.css (site-breed geladen). */

/* ============================================================
 * Single-product-pagina (block-template) — groen/geel, gecentreerd.
 * Wrapper is .product-info-block-wrapper met Gutenberg-kolommen.
 * ============================================================ */
.product-info-block-wrapper {
	width: 92%;
	max-width: 1150px;
	margin: 0 auto !important;
	padding: clamp(2rem, 5vw, 4rem) 0;
}

/* 2-koloms layout: afbeelding | info, verticaal gecentreerd. */
.product-info-block-wrapper .wp-block-columns {
	align-items: center !important;
	gap: clamp(2rem, 4vw, 4rem) !important;
}

/* Afbeelding in een afgeronde lichte kaart, gecentreerd. */
.fct-product-gallery-wrapper {
	background-color: #f4efe6;
	border-radius: clamp(12px, 1.4vw, 20px);
	padding: clamp(1rem, 2vw, 2rem);
	box-shadow: 0 12px 30px rgba(20, 60, 44, .14);
}
.fct-product-gallery-thumb,
.fct-product-gallery-thumb img {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	margin: 0 auto !important;
	border-radius: clamp(8px, 1vw, 14px) !important;
}

/* Titel — groen, biografie-kopfont (Antonio), ruimte eronder. */
.product-info-block-wrapper .wp-block-post-title,
.fct-product-title {
	font-family: var(--sb-font) !important;
	font-weight: 700 !important;
	font-size: clamp(2rem, 3.8vw, 3.2rem) !important;
	line-height: 1 !important;
	letter-spacing: -.01em !important;
	text-transform: none !important;
	color: var(--sb-green-dark) !important;
	margin: 0 0 clamp(1.1rem, 2vw, 1.6rem) !important;
}

/* Kop "Gerelateerde producten" onder het product — stond in het oude
 * leiblauw/system-font; nu groen in Antonio, zoals de andere shopkoppen. */
.fct-similar-product-list-container .fct-product-list-heading,
.fct-product-list-heading {
	font-family: var(--sb-font) !important;
	font-weight: 700 !important;
	letter-spacing: -.01em !important;
	color: var(--sb-green-dark) !important;
}

/* Beschrijving — wit, biografie-leesfont (Funnel Display), ruimte eronder. */
.fct-product-card-excerpt,
.wp-block-fluent-cart-excerpt,
.fct-product-excerpt,
.fct-product-excerpt p {
	font-family: var(--sb-font-read) !important;
	font-size: clamp(1rem, 1.3vw, 1.2rem) !important;
	line-height: 1.6 !important;
	color: var(--sb-white) !important;
	margin: 0 0 clamp(1.25rem, 2.5vw, 1.9rem) !important;
}

/* Prijs -> groen-dark en groot (niet geel-op-geel), ruimte eronder. */
.product-info-block-wrapper .fct-product-card-prices,
.product-info-block-wrapper .fct-product-prices,
.product-info-block-wrapper .fct-product-item-price,
.product-info-block-wrapper [class*="price"] {
	font-family: var(--sb-font) !important;
	font-weight: 700 !important;
	font-size: clamp(1.8rem, 2.6vw, 2.6rem) !important;
	color: var(--sb-green-dark) !important;
}
.product-info-block-wrapper .fct-product-prices,
.product-info-block-wrapper .fct-product-card-prices {
	margin: 0 0 clamp(1.4rem, 3vw, 2.25rem) !important;
}

/* Variantknoppen (bestel-opties zoals "Set van 2" / "Set van 4"): groen vlak met
 * gele letters, zodat de tekst leesbaar is op het oker. Gekozen = donkerder groen
 * met een gele rand. FluentCart markeert de keuze met .selected/.active én
 * aria-checked — alle drie afgedekt. Ook in FluentCarts quick-view-lightbox
 * (.fct-product-modal), mocht die ooit toch openen (sb-shop.js stuurt
 * "Bekijk opties" normaal naar de productpagina). */
.product-info-block-wrapper .fct-product-variant-item,
.fct-product-modal .fct-product-variant-item {
	background-color: var(--sb-green) !important;
	border: 2px solid var(--sb-green) !important;
	border-radius: 14px !important;
	color: var(--sb-yellow) !important;
	transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.product-info-block-wrapper .fct-product-variant-item:hover,
.fct-product-modal .fct-product-variant-item:hover {
	background-color: var(--sb-green-dark) !important;
	border-color: var(--sb-green-dark) !important;
}
.product-info-block-wrapper .fct-product-variant-item.selected,
.product-info-block-wrapper .fct-product-variant-item.active,
.product-info-block-wrapper .fct-product-variant-item[aria-checked="true"],
.fct-product-modal .fct-product-variant-item.selected,
.fct-product-modal .fct-product-variant-item.active,
.fct-product-modal .fct-product-variant-item[aria-checked="true"] {
	background-color: var(--sb-green-dark) !important;
	border-color: var(--sb-yellow) !important;
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(247, 232, 125, .35) !important;
}
.product-info-block-wrapper .fct-product-variant-item:focus-visible,
.fct-product-modal .fct-product-variant-item:focus-visible {
	outline: 3px solid var(--sb-yellow) !important;
	outline-offset: 2px;
}
.product-info-block-wrapper .fct-product-variant-item .fct-product-variant-title,
.product-info-block-wrapper .fct-product-variant-item .fct-product-variant-text,
.product-info-block-wrapper .fct-product-variant-item .hg-unit__variant-meta,
.product-info-block-wrapper .fct-product-variant-item .hg-unit__variant-price,
.product-info-block-wrapper .fct-product-variant-item .hg-unit__variant-piece,
.product-info-block-wrapper .fct-product-variant-item .hg-unit__variant-compare,
.product-info-block-wrapper .fct-product-variant-item .fct-product-variant-price,
.product-info-block-wrapper .fct-product-variant-item .fct-product-variant-item-price,
.product-info-block-wrapper .fct-product-variant-item .fct-product-variant-compare-price,
.fct-product-modal .fct-product-variant-item .fct-product-variant-title,
.fct-product-modal .fct-product-variant-item .fct-product-variant-text,
.fct-product-modal .fct-product-variant-item .hg-unit__variant-meta,
.fct-product-modal .fct-product-variant-item .hg-unit__variant-price,
.fct-product-modal .fct-product-variant-item .hg-unit__variant-piece,
.fct-product-modal .fct-product-variant-item .hg-unit__variant-compare,
.fct-product-modal .fct-product-variant-item .fct-product-variant-price,
.fct-product-modal .fct-product-variant-item .fct-product-variant-item-price,
.fct-product-modal .fct-product-variant-item .fct-product-variant-compare-price {
	color: var(--sb-yellow) !important;
}

/* Quick-view-lightbox: witte achtergrond, dus de witte omschrijving en de gele
 * "/per set van 2" en prijzen groen maken (op de productpagina staan ze op
 * groen/oker en blijven ze wit/geel). */
.fct-product-modal .fct-product-excerpt,
.fct-product-modal .fct-product-excerpt p,
.fct-product-modal .fct-product-prices,
.fct-product-modal .fct-product-prices *,
.fct-product-modal .fct-product-item-price,
.fct-product-modal .fct-product-item-price *,
.fct-product-modal .fct_price_suffix {
	color: var(--sb-green-dark) !important;
}

/* De variantprijs ("€29,95 / set van 2") is groter gemaakt dan FluentCart's vaste
 * line-height; zonder eigen regelhoogte + marge loopt 'ie over het
 * hoeveelheid-label heen. */
.product-info-block-wrapper .fct-product-item-price {
	line-height: 1.15 !important;
	margin: 0 0 clamp(1rem, 2vw, 1.5rem) !important;
}

/* Hoeveelheid-label + ruimte. */
.fct-product-quantity-container {
	margin: 0 0 clamp(1.4rem, 3vw, 2.25rem) !important;
}
.fct-product-quantity-container > label {
	display: block;
	margin-bottom: .6rem;
	font-family: var(--sb-font) !important;
	color: var(--sb-green-dark) !important;
	text-transform: uppercase;
	letter-spacing: .02em;
}

/* Aantal-selector (- 1 +) helemaal in geel/groen. */
.fct-product-quantity {
	border: 2px solid var(--sb-green-dark) !important;
	border-radius: 999px !important;
	background-color: var(--sb-green-dark) !important;
	overflow: hidden;
}
.fct-product-quantity button,
.fct-product-quantity input,
.fct-product-quantity [class*="value"],
.fct-product-quantity [class*="count"] {
	background-color: transparent !important;
	color: var(--sb-yellow) !important;
	border: none !important;
	font-family: var(--sb-font) !important;
	font-weight: 700 !important;
}
.fct-product-quantity button:hover {
	background-color: rgba(247, 232, 125, .18) !important;
}

/* Knoppen: "Bestellen" groen gevuld, "Buy Now" groene omlijning. */
.product-info-block-wrapper .fct-product-buttons-wrap {
	display: flex !important;
	gap: 1rem !important;
	flex-wrap: wrap;
	margin-top: clamp(1.25rem, 2.5vw, 2rem) !important;
}
.product-info-block-wrapper .fluent-cart-add-to-cart-button {
	width: auto !important;
	flex: 1 1 auto;
	margin: 0 !important;
	background-color: var(--sb-green-dark) !important;
	color: var(--sb-yellow) !important;
	border: 2px solid var(--sb-green-dark) !important;
	border-radius: 12px !important;
}
.product-info-block-wrapper .fluent-cart-direct-checkout-button {
	width: auto !important;
	flex: 1 1 auto;
	margin: 0 !important;
	background-color: transparent !important;
	color: var(--sb-green-dark) !important;
	border: 2px solid var(--sb-green-dark) !important;
	border-radius: 12px !important;
	font-family: var(--sb-font-read) !important;
	font-weight: 700 !important;
}

/* Beschrijving/tabs onder het product. */
.fct-product-tab-nav-item,
.fct-product-tab-pane,
.fct-product-tab-pane p,
.fct-product-sku,
.fct-product-stock {
	font-family: var(--sb-font-read) !important;
	color: var(--sb-green-dark) !important;
}

/* Losse productbeschrijving onderaan: biografie-leesfont, groen (klant,
 * 2026-09-17: wit was slecht leesbaar op geel, contrast 1,75:1, groen 3:1).
 * Hoogstens 750px breed voor een prettige regellengte, tekst een tandje groter
 * dan de korte beschrijving. De linkerkant lijnt uit met de product-info
 * erboven (breedte 92%, max. 1150px, gecentreerd). */
.fluent-products-template-default main > p,
.fluent-products-template-default main > .wp-block-group > p,
.fluent-products-template-default .wp-block-post-content > p {
	width: 92%;
	max-width: 750px;
	margin-left: max(4%, calc((100% - 1150px) / 2)) !important;
	margin-right: auto !important;
	font-family: var(--sb-font-read) !important;
	font-size: clamp(1.1rem, 1.45vw, 1.35rem) !important;
	line-height: 1.6 !important;
	color: var(--sb-green-dark) !important;
}

/* Tekst die uit Word/Outlook in de beschrijving is geplakt, houdt eigen kleuren
 * en lettertypes (<span style="color: #0a0a0a">, ook binnen <strong>). Die tekst
 * werd zwart (klant, 2026-09-17). Alles binnen de alinea volgt nu de alinea:
 * groen, leesfont. Vet blijft vet. Links blijven onderstreept, want de regels
 * hieronder zijn specifieker. Getest in tests/product-description.spec.ts. */
.fluent-products-template-default main > p *,
.fluent-products-template-default main > .wp-block-group > p *,
.fluent-products-template-default .wp-block-post-content > p * {
	color: inherit !important;
	font-family: inherit !important;
}

/* Links in die beschrijving (Facebook, mailadres): groen i.p.v. het standaard
 * donkerblauw, met onderstreping zodat ze als link herkenbaar blijven. */
.fluent-products-template-default main > p a,
.fluent-products-template-default main > .wp-block-group > p a,
.fluent-products-template-default .wp-block-post-content > p a {
	color: var(--sb-green-dark) !important;
	font-weight: 600;
	text-decoration: underline !important;
	text-underline-offset: .15em;
	transition: color .2s ease;
}
.fluent-products-template-default main > p a:hover,
.fluent-products-template-default main > p a:focus-visible,
.fluent-products-template-default main > .wp-block-group > p a:hover,
.fluent-products-template-default main > .wp-block-group > p a:focus-visible,
.fluent-products-template-default .wp-block-post-content > p a:hover,
.fluent-products-template-default .wp-block-post-content > p a:focus-visible {
	color: var(--sb-white) !important;
}

/* ============================================================
 * Afreken-pagina (FluentCart checkout) — groen/geel.
 * ============================================================ */
.fct-checkout {
	width: 92%;
	max-width: 1180px;
	margin: 0 auto !important;
	padding: clamp(1.5rem, 4vw, 3.5rem) 0;
}

/* Sectiekoppen (Factuuradres, Verzendopties, Betaling, ...). */
.fct-checkout .fct_form_section_header_label,
.fct-checkout h2,
.fct-checkout h3 {
	font-family: var(--sb-font) !important;
	font-weight: 700 !important;
	color: var(--sb-green-dark) !important;
	letter-spacing: .005em;
}

/* Labels + hulptekst. */
.fct-checkout label {
	font-family: var(--sb-font-read) !important;
	color: var(--sb-green-dark) !important;
}

/* Invoervelden — zachtgroene tint (niet wit), duidelijke groene rand, ronding +
 * groene placeholder, zodat ze bij het groen/gele ontwerp passen. Ook de custom
 * land-dropdown (.fct-nice-select) en FluentCart's .fct-input meenemen. */
.fct-checkout input:not([type="checkbox"]):not([type="radio"]),
.fct-checkout select,
.fct-checkout textarea,
.fct-checkout .fct-input:not(.fct-input-checkbox),
.fct-checkout .fct-nice-select {
	border-radius: 12px !important;
	border: 2px solid rgba(30, 122, 84, .4) !important;
	background-color: #EAF3EC !important;
	color: var(--sb-green-dark) !important;
	font-family: var(--sb-font-read) !important;
	font-size: 1.02rem !important;
	padding: .85em 1.1em !important;
	box-shadow: none !important;
}

/* Checkbox — nette kleine custom checkbox (op het groene vlak): wit vierkantje
 * met gele rand; aangevinkt -> geel met groen vinkje. */
.fct-checkout input[type="checkbox"],
.fct-checkout input.fct-input-checkbox {
	appearance: none !important;
	-webkit-appearance: none !important;
	flex: 0 0 auto !important;
	width: 1.4em !important;
	height: 1.4em !important;
	min-width: 1.4em !important;
	min-height: 1.4em !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 6px !important;
	border: 2px solid var(--sb-yellow) !important;
	background-color: rgba(255, 255, 255, .92) !important;
	box-shadow: none !important;
	cursor: pointer;
	position: relative;
	transition: background-color .15s ease, border-color .15s ease;
}
.fct-checkout input[type="checkbox"]:checked,
.fct-checkout input.fct-input-checkbox:checked {
	background-color: var(--sb-yellow) !important;
	border-color: var(--sb-yellow) !important;
}
.fct-checkout input[type="checkbox"]:checked::after,
.fct-checkout input.fct-input-checkbox:checked::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 45%;
	width: .32em;
	height: .62em;
	border: solid var(--sb-green-dark);
	border-width: 0 .2em .2em 0;
	transform: translate(-50%, -50%) rotate(45deg);
}
.fct-checkout input::placeholder,
.fct-checkout textarea::placeholder,
.fct-checkout .fct-nice-select .current:empty::before {
	color: rgba(30, 122, 84, .55) !important;
	opacity: 1 !important;
}
.fct-checkout input:focus,
.fct-checkout select:focus,
.fct-checkout textarea:focus,
.fct-checkout .fct-nice-select.open {
	border-color: var(--sb-green-dark) !important;
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(30, 122, 84, .18) !important;
}

/* Land-dropdown (nice-select): waarde verticaal centreren i.p.v. onderaan. */
.fct-checkout .fct-nice-select {
	display: flex !important;
	align-items: center !important;
	min-height: 3.2em !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	line-height: 1.2 !important;
}
.fct-checkout .fct-nice-select .current {
	color: var(--sb-green-dark) !important;
	font-family: var(--sb-font-read) !important;
}

/* Land-dropdownlijst in dezelfde stijl (afgerond, groene rand). */
.fct-checkout .fct-nice-select-dropdown,
.fct-checkout .fct-nice-select .list {
	border-radius: 12px !important;
	border: 2px solid rgba(30, 122, 84, .4) !important;
	background-color: var(--sb-white) !important;
	overflow: hidden;
}
.fct-checkout .fct-nice-select .option {
	color: var(--sb-green-dark) !important;
	font-family: var(--sb-font-read) !important;
	background-color: transparent !important;
}
.fct-checkout .fct-nice-select .option.selected,
.fct-checkout .fct-nice-select .option:hover,
.fct-checkout .fct-nice-select .option.focus {
	background-color: rgba(30, 122, 84, .12) !important;
}

/* Radio-accent in de huisstijl (checkbox is hierboven custom gestyled). */
.fct-checkout input[type="radio"] {
	accent-color: var(--sb-yellow) !important;
	width: 1.2em !important;
	height: 1.2em !important;
}

/* Samenvatting bestelling — groene kaart (zoals de productcards): witte tekst,
 * gele prijzen. De binnenste .fct_summary is de kaart; de buitenwrapper laten we
 * transparant zodat er geen leeg groen vlak eronder staat. */
.fct_checkout_summary {
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
}
.fct_summary {
	background-color: var(--sb-green) !important;
	border: none !important;
	border-radius: 16px !important;
	color: var(--sb-white) !important;
	font-family: var(--sb-font-read) !important;
	box-shadow: 0 10px 26px rgba(20, 60, 44, .18);
}
.fct_checkout_summary *,
.fct_summary * {
	color: var(--sb-white);
	border-color: rgba(255, 255, 255, .22) !important;
}
/* Prijzen + totaal -> geel, in Antonio. */
.fct_checkout_summary [class*="price"],
.fct_checkout_summary [class*="total"],
.fct_checkout_summary [class*="amount"],
.fct_checkout_summary strong,
.fct_checkout_summary b {
	font-family: var(--sb-font) !important;
	font-weight: 700 !important;
	color: var(--sb-yellow) !important;
}
/* Kop "Samenvatting bestelling" -> Antonio, wit. */
.fct_checkout_summary h2,
.fct_checkout_summary h3,
.fct_checkout_summary [class*="summary_header"],
.fct_checkout_summary [class*="title"] {
	font-family: var(--sb-font) !important;
	color: var(--sb-white) !important;
}
/* Binnenste witte secties transparant maken zodat het groen doorschijnt en de
 * witte tekst (Subtotaal/Totaal) zichtbaar wordt (stond wit-op-wit). Ook de
 * rand/ronding van die sectie weg: die vormde een los kader op de groene kaart. */
.fct_summary .fct_checkout_form_section,
.fct_summary .fct_item_tax_hint_button {
	background-color: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
/* Tax-tooltip: leesbaar donkergroen vlak. */
.fct_summary .fct_item_tax_tooltip {
	background-color: var(--sb-green-dark) !important;
	color: var(--sb-white) !important;
}

/* Waardebon-box: lichter vlak op het groen. */
.fct_checkout_summary .fct_coupon,
.fct-checkout [class*="coupon"] {
	background-color: rgba(255, 255, 255, .12) !important;
	border-radius: 10px !important;
}
/* Links op het groen (bv. "See details") -> geel. */
.fct_checkout_summary a {
	color: var(--sb-yellow) !important;
}

/* Ruimte tussen de formuliervelden (stonden tegen elkaar aan). */
.fct-checkout .fct_input_wrapper {
	margin-bottom: .85rem !important;
}
.fct-checkout .fct_checkout_input_group {
	gap: .85rem !important;
	margin-bottom: .25rem !important;
}

/* "Bestelling plaatsen"-knop — groen gevuld, gele tekst. */
.fct_place_order_btn {
	background-color: var(--sb-green-dark) !important;
	background-image: none !important;
	color: var(--sb-yellow) !important;
	border: none !important;
	border-radius: 12px !important;
	font-family: var(--sb-font-read) !important;
	font-weight: 700 !important;
}
.fct_place_order_btn:hover {
	background-color: var(--sb-green) !important;
}

/* Links (bv. "See details", "Activeer vanuit instellingen"). */
.fct-checkout a {
	color: var(--sb-green-dark) !important;
	text-decoration-color: rgba(30, 122, 84, .5);
}

/* Hele formuliervlak (links) als groene kaart, net als de samenvatting. De
 * lichtgroene velden contrasteren erop; koppen/labels/tekst -> wit, links -> geel. */
.fct_checkout_form {
	background-color: var(--sb-green) !important;
	border-radius: 16px !important;
	padding: clamp(1.5rem, 3vw, 2.25rem) !important;
	box-shadow: 0 10px 26px rgba(20, 60, 44, .18);
}
.fct_checkout_form .fct_form_section_header_label,
.fct_checkout_form h2,
.fct_checkout_form h3,
.fct_checkout_form label,
.fct_checkout_form legend {
	color: var(--sb-white) !important;
}
.fct_checkout_form p,
.fct_checkout_form small,
.fct_checkout_form .fct_form_section_body > span {
	color: rgba(255, 255, 255, .85) !important;
}
.fct_checkout_form a {
	color: var(--sb-yellow) !important;
	text-decoration-color: rgba(247, 232, 125, .6);
}

/* ---- Afreken-leesbaarheid + accenten ---- */

/* Hulpteksten (geen verzendopties / geen betaalmethode) -> geel, goed leesbaar. */
.fct_checkout_form p,
.fct_checkout_form .fct_form_section_body > span,
.fct_checkout_form [class*="empty"],
.fct_checkout_form [class*="notice"] {
	color: var(--sb-yellow) !important;
}

/* Tax-breakdown-box: lichte box -> groen-dark tekst zodat alles leesbaar is. */
.fct_summary .fct_tax_summary_box,
.fct_summary .fct_item_tax_tooltip {
	background-color: var(--sb-white) !important;
	border-radius: 12px !important;
	border: none !important;
}
.fct_summary .fct_tax_summary_box,
.fct_summary .fct_tax_summary_box *,
.fct_summary .fct_item_tax_tooltip,
.fct_summary .fct_item_tax_tooltip * {
	color: var(--sb-green-dark) !important;
	border-color: rgba(30, 122, 84, .18) !important;
}

/* "Laat een bericht achter"-toggle -> geel. */
.fct_summary .fct_order_note_wrapper > label,
.fct_summary .fct_order_note_wrapper > summary,
.fct_summary .fct_order_note_wrapper > *:first-child,
.fct_summary .fct_tax_simple_toggle,
.fct_summary [class*="note"] [class*="toggle"],
.fct_summary [class*="note_label"] {
	color: var(--sb-yellow) !important;
}

/* Berichtveld niet tegen de zijkanten van de kaart (inset). */
.fct_summary .fct_order_note_wrapper {
	padding-left: clamp(1rem, 2vw, 1.5rem) !important;
	padding-right: clamp(1rem, 2vw, 1.5rem) !important;
	padding-bottom: clamp(1rem, 2vw, 1.5rem) !important;
}

/* Productnaam in de samenvatting stevig wit (was iets zacht). */
.fct_summary [class*="item_title"],
.fct_summary [class*="product_title"],
.fct_summary [class*="cart_item"] [class*="title"] {
	color: var(--sb-white) !important;
	opacity: 1 !important;
}

/* Productregel in de samenvatting: titel geel (was groen-op-groen, nauwelijks
 * leesbaar) en de regelprijs iets groter. */
.fct_summary .fct_line_item a,
.fct_summary .fct_line_item [class*="title"] {
	color: var(--sb-yellow) !important;
}
.fct_summary .fct_line_item_total {
	font-size: 1.2rem !important;
	font-weight: 700 !important;
}

/* Thumbnail in de samenvatting een tandje groter + titel iets groter. */
.fct_summary .fct_line_item .fct_item_image,
.fct_summary .fct_line_item .fct_item_image > a,
.fct_summary .fct_line_item .fct_item_image img {
	width: 66px !important;
	height: 66px !important;
}
.fct_summary .fct_line_item .fct_item_image img {
	border-radius: 10px !important;
	object-fit: cover !important;
}
.fct_summary .fct_line_item a {
	font-size: 1.28rem !important;
}

/* Paginator-tekst ("Weergave van 1 tot 10 van 10 items" + "30 per pagina")
 * in het site-groen i.p.v. het standaard grijsblauw. */
.fct-shop-paginator,
.fct-shop-paginator *,
.fct-shop-paginator-results,
.fct-shop-per-page-selector,
.fct-shop-per-page-selector select {
	color: var(--sb-green-dark) !important;
}
.fct-shop-per-page-selector select {
	border-color: rgba(30, 122, 84, .4) !important;
}

/* Afrekenpagina: tekst in de witte kaders zwart i.p.v. geel. De brede
 * ".fct_checkout_form p"-regel (var(--sb-yellow) !important) verft álle
 * checkout-paragrafen geel, maar in de witte adres- en betaalkaders is dat
 * onleesbaar. Hogere specificiteit (parent-class erbij) wint. */
.fct_checkout_form .fct_address_selector_info,
.fct_checkout_form .fct_address_selector span,
.fct_checkout_form .fct_address_info,
.fct_checkout_form .fct_address_info p,
.fct_checkout_form .fct_address_info span,
.fct_checkout_form .fct_payment_method_wrapper label,
.fct_checkout_form .fct_payment_method_wrapper label *,
.fct_checkout_form .fct_shipping_methods_item label,
.fct_checkout_form .fct_shipping_methods_item label * {
	color: #1c1c1c !important;
}
.mollie-payment-methods .mollie-payment-description {
	color: #1c1c1c !important;
}

/* Verzendoptie-regel: titel links, bedrag rechts, netjes uitgelijnd in de witte
 * balk (het bedrag stond anders direct achter de titel geplakt en de tekst was
 * wit-op-wit door de generieke .fct_checkout_form label-regel). */
.fct_checkout_form .fct_shipping_methods_item label {
	display: flex !important;
	align-items: center !important;
	gap: .5em !important;
	font-weight: 600 !important;
}
.fct_checkout_form .fct_shipping_methods_item .shipping-method-amount {
	margin-left: auto !important;
	font-weight: 700 !important;
}

/* Sectie "Verzendopties" weg als er niets te kiezen valt: precies één optie van
 * €0,00. De prijzen zijn inclusief verzendkosten (klant, 2026-09-17), dus
 * "Verzendkosten inbegrepen in de prijs €0,00" zei niets. FluentCart vinkt die
 * ene optie zelf aan, dus bestellen werkt gewoon. De sectie komt vanzelf terug
 * bij een tweede optie (bv. afhalen), bij een optie met kosten, zonder
 * verzendoptie ("geen verzendmethoden voor dit adres") en bij een foutmelding.
 * Padding op de lege wrapper: 14px (marge van het vinkje erboven) + 10px = de
 * 24px tussen de andere onderdelen. Getest in tests/checkout.spec.ts. */
.fct_checkout_form .fct_shipping_methods:has(.fct_shipping_methods_item .shipping-method-amount[aria-label$="€0,00"]):not(:has(.fct_shipping_methods_item ~ .fct_shipping_methods_item)):not(:has(.fct_form_error:not(:empty))) {
	display: none !important;
}
.fct_checkout_form .fct_checkout_shipping_methods:has(.fct_shipping_methods_item .shipping-method-amount[aria-label$="€0,00"]):not(:has(.fct_shipping_methods_item ~ .fct_shipping_methods_item)):not(:has(.fct_form_error:not(:empty))) {
	padding-top: 10px;
}

/* ============================================================
 * HAAGS-SPECIFIEK — filter-sidebar + grid/lijst-schakelaar
 *
 * Dit blok staat NIET in de sjaakbral-versie van dit bestand: daar wordt de
 * sidebar verborgen. Haags houdt hem, dus krijgt hij dezelfde behandeling als
 * een productkaart: groen vlak, witte labels, gele koppen en accenten, en
 * lichte invoervelden met donkergroene tekst. Alles hieronder gebruikt de
 * FluentCart-eigen classes, dus het werkt zonder de Shop Starter-plugin.
 * De grid/lijst-schakelaar hoort hier NIET bij: die is op beide sites
 * verborgen (regel bovenin).
 *
 * Dit blok is van haags alleen. Ook erboven staan inmiddels haags-eigen regels
 * (zie de kop van dit bestand): vergelijk dus met een diff voordat je iets
 * tussen de twee sites overzet.
 * ============================================================ */

/* Categorie-titel boven het archief ("Nieuw", "Boeken", …). Stond nog in het
 * oude marineblauw; nu donkergroen in Antonio, zoals de shopkop op sjaakbral
 * (.sb-shop-title__word hierboven).
 *
 * !important omdat er een inline <style> op de pagina staat met
 * `body.tax-product-categories .wp-block-query-title { color: var(--fcss-button-bg,#213875) }`
 * — een restant uit de tijd dat de FluentCart Shop Starter-plugin aan stond.
 * Die variabele bestaat nu niet meer, dus die regel valt terug op het blauw.
 * Alleen kleur en font overrulen; de uitlijning uit die regel blijft staan. */
.wp-block-query-title,
.wp-block-post-terms,
.wp-block-term-description {
	font-family: var(--sb-font) !important;
	font-weight: 700 !important;
	letter-spacing: -.01em;
	color: var(--sb-green-dark) !important;
}

/* De sidebar als groene kaart, gelijk aan .fct-product-card. */
.fct-shop-filter-wrapper {
	background-color: var(--sb-green);
	border: none;
	border-radius: 10px;
	padding: clamp(1rem, 1.6vw, 1.35rem);
	box-shadow: 0 10px 26px rgba(20, 60, 44, .16);
}

/* Kopjes ("Product Categories", "Price") in Antonio, geel. */
.fct-shop-filter-wrapper .item-heading {
	font-family: var(--sb-font);
	font-weight: 700;
	font-size: 1.05rem;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: var(--sb-yellow);
}
.fct-shop-filter-wrapper .fct-shop-item-collapse-wrap .toggle-icon {
	color: var(--sb-yellow);
	background: transparent;
	border: none;
}

/* Scheidingslijn tussen de filterblokken. */
.fct-shop-filter-item + .fct-shop-filter-item {
	border-top: 1px solid rgba(255, 255, 255, .18);
}

/* Zoekveld: wit boxje op het groen, donkergroene tekst + icoon. */
.fct-shop-product-search .fct-shop-input {
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, .3);
	background-color: var(--sb-white);
	color: var(--sb-green-dark);
	font-family: var(--sb-font-read);
	/* De sidebar is smal (~210px); op standaardgrootte valt de placeholder
	 * buiten het veld. */
	font-size: .88rem;
}
.fct-shop-product-search .fct-shop-input::placeholder {
	color: rgba(30, 122, 84, .55);
	opacity: 1;
}
.fct-shop-product-search .fct-shop-input:focus {
	outline: none;
	border-color: var(--sb-yellow);
	box-shadow: 0 0 0 3px rgba(247, 232, 125, .35);
}
.fct-search-icon,
.fct-search-clear {
	color: var(--sb-green-dark);
}

/* Categorie-labels wit, met een gele checkbox en groen vinkje. FluentCart
 * verbergt de echte input en tekent .checkmark. */
.fct-shop-checkbox {
	font-family: var(--sb-font-read);
	color: var(--sb-white);
}
.fct-shop-checkbox:hover {
	color: var(--sb-yellow);
}
.fct-shop-checkbox .checkmark {
	border-color: rgba(255, 255, 255, .55);
	background-color: rgba(255, 255, 255, .92);
}
.fct-shop-checkbox input[type="checkbox"]:checked + .checkmark {
	background-color: var(--sb-yellow);
	border-color: var(--sb-yellow);
}
.fct-shop-checkbox input[type="checkbox"]:checked + .checkmark::after {
	border-color: var(--sb-green-dark);
}
.fct-shop-checkbox input[type="checkbox"]:focus-visible + .checkmark {
	box-shadow: 0 0 0 3px rgba(247, 232, 125, .35);
}

/* Prijsvelden: lichte boxjes met donkergroene tekst. */
.fct-shop-price-range {
	background-color: var(--sb-white);
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 10px;
}
.fct-shop-price-range .fc_price_range_input,
.fct-shop-currency-sign {
	color: var(--sb-green-dark);
	font-family: var(--sb-font-read);
	background: transparent;
}
.fct-shop-price-range:focus-within {
	border-color: var(--sb-yellow);
	box-shadow: 0 0 0 3px rgba(247, 232, 125, .35);
}

/* Prijs-slider: lichte baan, gele selectie, witte grepen. */
.fct-shop-range-slider.noUi-target,
.fct-shop-range-slider .noUi-target {
	background: rgba(255, 255, 255, .28);
	border: none;
	box-shadow: none;
}
.fct-shop-range-slider .noUi-connect {
	background: var(--sb-yellow);
}
.fct-shop-range-slider .noUi-handle {
	background: var(--sb-white);
	border: 2px solid var(--sb-yellow);
	box-shadow: 0 1px 4px rgba(20, 60, 44, .25);
}
.fct-shop-range-slider .noUi-tooltip {
	background: var(--sb-white);
	color: var(--sb-green-dark);
	border-color: rgba(30, 122, 84, .2);
}

/* Mobiel: de "Filter"-knop boven de producten in het site-groen (FluentCart
 * geeft het icoon een vaste stroke="#2F3448"; CSS wint van dat attribuut) en
 * met ruimte eronder, anders staat hij tegen het eerste kaartje. */
.fct-shop-filter-toggle-button {
	color: var(--sb-green-dark) !important;
	margin-bottom: .9rem !important;
}
.fct-shop-filter-toggle-button svg path {
	stroke: currentColor;
}

/* Mobiel: FluentCart zet de filters in een off-canvas-paneel
 * (.fct-shop-responsive-filter-container). Dat staat buiten
 * .fct-shop-filter-wrapper, dus hier dezelfde groene kaartkleur, met gele
 * letters (de categorielabels stonden wit-op-wit). Zoekveld, prijsvelden en
 * slider krijgen de regels hierboven al. */
.fct-shop-responsive-filter-container {
	background-color: var(--sb-green) !important;
	color: var(--sb-yellow);
}
.fct-shop-responsive-filter-header,
.fct-shop-responsive-filter-container .fct-shop-filter-item {
	border-color: rgba(255, 255, 255, .18) !important;
}
.fct-shop-responsive-filter-header h3,
.fct-shop-responsive-filter-container .item-heading {
	font-family: var(--sb-font);
	font-weight: 700;
	letter-spacing: .01em;
	color: var(--sb-yellow) !important;
}
.fct-shop-responsive-filter-header h3 {
	font-size: 1.6rem;
}
.fct-shop-responsive-filter-container .item-heading {
	font-size: 1.05rem;
	text-transform: uppercase;
}
.fct-shop-responsive-filter-close-button,
.fct-shop-responsive-filter-container .toggle-icon {
	color: var(--sb-yellow) !important;
	background: transparent !important;
	border: none !important;
}
.fct-shop-responsive-filter-container .fct-shop-checkbox {
	color: var(--sb-yellow);
}
.fct-shop-responsive-filter-container .fct-shop-checkbox:hover {
	color: var(--sb-white);
}
/* Focusrand geel i.p.v. FluentCarts blauw (bijv. rond "Categorieën"). */
.fct-shop-responsive-filter-container :focus {
	outline-color: var(--sb-yellow) !important;
}

/* De grid/lijst-schakelaar is verborgen (zie de regel bovenin, gelijk aan
 * sjaakbral): de lijstweergave werkt niet goed voor deze producten. FluentCart
 * onthoudt de laatst gekozen weergave, dus forceer de kaarten terug naar de
 * grid-vorm voor bezoekers die eerder op "lijst" hadden geklikt. */
.fct-products-wrapper-inner.mode-list .fct-products-container,
.fct-products-wrapper-inner.mode-list .fct-products-container[class*="grid-columns-"] {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.fct-products-wrapper-inner.mode-list .fct-product-card {
	flex-direction: column !important;
}
.fct-products-wrapper-inner.mode-list .fct-product-card .fct-product-card-image-wrap {
	width: 100% !important;
	flex: 0 0 auto !important;
}
@media (max-width: 900px) {
	.fct-products-wrapper-inner.mode-list .fct-products-container,
	.fct-products-wrapper-inner.mode-list .fct-products-container[class*="grid-columns-"] {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}
@media (max-width: 560px) {
	.fct-products-wrapper-inner.mode-list .fct-products-container,
	.fct-products-wrapper-inner.mode-list .fct-products-container[class*="grid-columns-"] {
		grid-template-columns: 1fr !important;
	}
}

/* ============================================================
 * HAAGS-SPECIFIEK — productpagina: galerij-kader in kaart-groen
 * ============================================================ */

/* De buitenste rand om de productfoto (het galerij-kader) was licht/crème
 * (#f4efe6, de gedeelde regel hierboven); op haags krijgt 'ie dezelfde groene
 * look als de productkaarten in de shop. De foto binnenin houdt zijn eigen
 * ronding, zodat er een egale groene rand omheen ontstaat. */
.fct-product-gallery-wrapper {
	background-color: var(--sb-green);
}

/* ============================================================
 * HAAGS-SPECIFIEK — klantaccount (/account/): knoppen in het groen
 * ============================================================ */

/* FluentCart kleurt de primaire knoppen in de klantomgeving ("Profiel
 * opslaan" enz.) via eigen variabelen: customer-profile-global.css zet ze op
 * :root (#253241), customer-profile.css past ze met !important toe op
 * .fluent-cart-customer-profile-app .el-button--primary. Hier zetten we die
 * variabelen op het app-element op het groen van de site, met witte tekst
 * (contrast 5,2:1). De uitlog- en inlogknop staan in de mu-plugin
 * haags-site-customizations.php. Getest in tests/account.spec.ts. */
.fluent-cart-customer-profile-app {
	--fct-customer-dashboard-btn-bg-color: var(--sb-green-dark);
	--fct-customer-dashboard-btn-border-color: var(--sb-green-dark);
	--fct-customer-dashboard-btn-text-color: var(--sb-white);
}

/* Vensters (bijv. "Nieuw adres toevoegen") die buiten de app worden
 * geplaatst: daar geldt de variabele niet en zou het Element Plus-blauw
 * (#409eff) verschijnen. */
.el-overlay .el-button--primary {
	background-color: var(--sb-green-dark);
	border-color: var(--sb-green-dark);
	color: var(--sb-white);
}
.el-overlay .el-button--primary:hover,
.el-overlay .el-button--primary:focus-visible {
	background-color: #176343;
	border-color: #176343;
	color: var(--sb-white);
}

/* Tabel "Gerelateerde transacties" op de bestelpagina (/account/order/…).
 * FluentCart geeft de kolommen vaste breedtes (samen 865px) en knipt de rest
 * af (overflow: hidden), waardoor "Ontvangstbewijs ⋮" buiten beeld viel.
 * Hier vult de tabel de breedte met kolommen in procenten. Smaller dan 820px
 * schuift hij opzij, met de kolom "Ontvangstbewijs ⋮" vast rechts in beeld
 * (sticky). Getest in tests/order.spec.ts (klantaccount). */
.fct-single-order-box .fct-customer-dashboard-table .el-scrollbar__view {
	display: block !important;
}
.fct-single-order-box .fct-customer-dashboard-table .el-table__header,
.fct-single-order-box .fct-customer-dashboard-table .el-table__body {
	width: 100% !important;
	min-width: 820px;
}
/* Kolommen: # · Datum · Bedrag · Status · Type · Betaalmethode · Ontvangstbewijs ⋮ */
.fct-single-order-box .fct-customer-dashboard-table col:nth-child(1) { width: 9% !important; }
.fct-single-order-box .fct-customer-dashboard-table col:nth-child(2) { width: 14% !important; }
.fct-single-order-box .fct-customer-dashboard-table col:nth-child(3) { width: 10% !important; }
.fct-single-order-box .fct-customer-dashboard-table col:nth-child(4) { width: 16% !important; }
.fct-single-order-box .fct-customer-dashboard-table col:nth-child(5) { width: 12% !important; }
.fct-single-order-box .fct-customer-dashboard-table col:nth-child(6) { width: 16% !important; }
.fct-single-order-box .fct-customer-dashboard-table col:nth-child(7) { width: 23% !important; }
/* Geen woorden midden doorbreken ("Betaalmethod-e"). */
.fct-single-order-box .fct-customer-dashboard-table .cell {
	word-break: normal !important;
	overflow-wrap: normal !important;
}
.fct-single-order-box .fct-customer-dashboard-table th:last-child,
.fct-single-order-box .fct-customer-dashboard-table td:last-child {
	position: sticky;
	right: 0;
	z-index: 3;
}
.fct-single-order-box .fct-customer-dashboard-table td:last-child {
	background-color: var(--sb-white);
}
@media (max-width: 1180px) {
	/* Schaduw: er schuift iets onder de vaste kolom door. */
	.fct-single-order-box .fct-customer-dashboard-table th:last-child,
	.fct-single-order-box .fct-customer-dashboard-table td:last-child {
		box-shadow: -12px 0 12px -12px rgba(0, 0, 0, .2);
	}
}

/* Statusbadges: FluentCart zet elk woord met een hoofdletter (text-transform:
 * capitalize); in het Nederlands hoort dat niet ("In afwachting"). Op de
 * telefoon mogen ze naar een volgende regel. */
.fluent-cart-customer-profile-app .fct-badge {
	text-transform: none !important;
}
.fluent-cart-customer-profile-app .fct-order-status-badges {
	flex-wrap: wrap;
}