/* ============================================================
   WEBSHOP-SCOPED THEMA (PLAN_WEBSHOP_ACHTERGROND_TILE_KLEUR)

   Elk vlak volgt zijn --shop-* waarde MET fallback naar het originele
   token: var(--shop-bg, var(--color-background)). Zo valt de achtergrond
   nooit naar transparant terug als --shop-bg ontbreekt (bv. een gecachte
   oude brandkit_css) - dat veroorzaakte een doorzichtige sticky header.
   Bewust GEEN globale remap van --color-background zelf (dat liet de
   waarde collapsen).

   --color-background-light blijft het "lift"-niveau (modals/dropdowns/
   winkelwagen) - ongemoeid. style.css en _checkout.css blijven bevroren.
   Dit bestand laadt als laatste in base.html.
   ============================================================ */

/* Pagina + chrome-banden volgen de webshop-achtergrond. */
body {
    background: var(--shop-bg, var(--color-background));
    color: var(--shop-text, var(--color-text));
}

.header,
.logo-banner,
.footer,
.home-faq-section {
    background: var(--shop-bg, var(--color-background));
    color: var(--shop-text, var(--color-text));
}

/* Product-tile volgt --shop-tile; locatie-/review-kaarten ongemoeid.
   Tekst per rol, telkens met fallback naar de originele kleur. */
.card:not(.home-loc-card) {
    background: var(--shop-tile, var(--color-background-light));
}

.card:not(.home-loc-card) .card-name,
.card:not(.home-loc-card) .price {
    color: var(--shop-card-text, var(--color-text-accent));
}

.card:not(.home-loc-card) .card-desc,
.card:not(.home-loc-card) .price-per,
.card:not(.home-loc-card) .price-vat-label {
    color: var(--shop-card-muted, var(--color-text-light));
}