/**
* Agri-Boss Winkelweergave — Syndified-opmaak.
*
* DIT IS HET ENIGE BESTAND WAAR !important IS TOEGESTAAN.
*
* Waarom: de Tailwind-build van Syndified zet zijn utilities zelf op
* !important (622 declaraties op de productpagina) en de app.css
* wordt als kale midden in de body geprint, ná elke stylesheet
* die wij netjes kunnen enqueuen. Tegen een !important uit dezelfde
* origin bestaat maar één verdediging, en dat is er zelf ook een.
*
* Spelregels om updates van de plugin te overleven:
* - Mik op de componentklassen (.dsw-product-grid-items,
* .dsw-primary-site-btn, …), niet op losse utilities — die
* veranderen per Tailwind-build.
* - Alles is dubbel gescoped op body.ab-eigen-syndified, zodat de
* module-schakelaar ook hier geldt.
*/
/* ── KLEURTOKENS ──────────────────────────────────────────────── */
/*
* Syndified zet --dss-primary-color via JavaScript als INLINE STYLE
* op (documentElement.style.setProperty). Een inline style
* verslaat elke normale author-declaratie; alleen author-!important
* wint. Dit is dus geen stijlkeuze maar de enige werkende route.
*/
html {
--dss-primary-color: #3B732C !important;
--dss-brand-color: #3B732C !important;
--dsw-cta-button-color: #00820D !important;
}
/* ── DE KOOPKNOP ──────────────────────────────────────────────── */
/* Vierkant (radius 0), zoals elke knop op de site sinds de
unificatielaag; de 5px stamde uit een eerdere fase. */
body.ab-eigen-syndified .dsw-primary-site-btn {
background-color: #00820D !important;
border-color: #00820D !important;
color: #fff !important;
border-radius: 0 !important;
box-shadow: none !important;
font-family: "Mulish", sans-serif !important;
font-size: 15px !important;
font-weight: 700 !important;
text-transform: none !important;
letter-spacing: normal !important;
transition: background-color .15s ease !important;
}
body.ab-eigen-syndified .dsw-primary-site-btn:hover {
background-color: #006A0B !important;
border-color: #006A0B !important;
opacity: 1 !important;
}
body.ab-eigen-syndified .dsw-secondary-site-btn {
background-color: #fff !important;
color: #3B732C !important;
border-color: #3B732C !important;
border-radius: 0 !important;
font-family: "Mulish", sans-serif !important;
font-weight: 700 !important;
text-transform: none !important;
}
body.ab-eigen-syndified .dsw-primary-site-link {
color: #3B732C !important;
}
body.ab-eigen-syndified .dsw-primary-site-svg {
fill: #3B732C !important;
color: #3B732C !important;
}
/*
* De Tailwind-laag van Syndified geeft afbeeldingen een eigen rand
* (1px #D1D5DB, met !important) — en die lekte tot op de WooCommerce-
* archiefkaarten, als binnenkader om elke productfoto. Alleen de
* kaartrand mag omlijsten. Dit hoort hier en niet in weergave.css:
* tegen een !important helpt alleen een !important, en dat is enkel
* in dit bestand toegestaan.
*/
body.ab-eigen-archief ul.products li.product img,
ul.products.ab-raster li.product img {
border: 0 !important;
}
/* ── DE RASTERPAGINA'S (merk- en takpagina's van Syndified) ────── */
/*
* Deze pagina's (bv. /maaien-en-grond-bewerken/grasmaaiers/) zijn een
* TWEEDE Vue-template naast de productpagina, met een eigen hero,
* filterzijbalk en kaartenraster. Zelfde ontwerptaal als de
* WooCommerce-archieven: witte kop met Khand-titel in plaats van de
* donkere fotobanner, en kaarten die één-op-één op onze eigen
* productkaarten lijken.
*/
/* De hero: van donkere fotobanner naar dezelfde witte winkelkop als
de archieven. Logo klein bovenaan (dat is hier de "wenkbrauw"),
titel en tekst links uitgelijnd eronder. */
body.ab-eigen-syndified #app .dsw-hero-without-image-container {
background: #fff !important;
background-image: none !important;
min-height: 0 !important;
margin: 0 !important;
padding: 26px 0 0 !important;
text-align: left !important;
}
body.ab-eigen-syndified #app .dsw-hero-without-image-container .dsw-container {
flex-direction: column !important;
align-items: flex-start !important;
}
body.ab-eigen-syndified #app .dsw-hero-without-image-container .dsw-container > div {
width: 100% !important;
margin: 0 !important;
display: block !important;
text-align: left !important;
}
body.ab-eigen-syndified #app .dsw-hero-without-image-container img {
max-height: 46px !important;
width: auto !important;
max-width: 210px !important;
margin: 0 0 14px !important;
}
body.ab-eigen-syndified #app .dsw-hero-without-image-container h1 {
margin: 0 0 10px !important;
font-family: "Khand", "Mulish", sans-serif !important;
font-size: clamp(30px, 3.5vw, 42px) !important;
font-weight: 500 !important;
line-height: 1.1 !important;
letter-spacing: 0 !important;
text-transform: uppercase !important;
color: #111 !important;
text-align: left !important;
}
body.ab-eigen-syndified #app .dsw-hero-without-image-container h1 ~ div {
max-width: 820px !important;
font-size: 15px !important;
line-height: 1.6 !important;
color: #505050 !important;
text-align: left !important;
}
/* Mulish voor de lopende tekst van de rasterpagina's (app.css zegt
Lato); koppen regelen hun eigen letter. */
body.ab-eigen-syndified #app .dsw-font-dsw:not(h1):not(h2):not(h3) {
font-family: "Mulish", sans-serif !important;
}
/*
* Syndified zet margin-top:100px op de grid-template — en de klasse
* staat op #app ZELF, dat direct onder hangt. Met de donkere
* themabody erachter werd die marge een zwarte balk van 100px tussen
* header en pagina. Beide varianten dekken (klasse op #app én op een
* kind, per templateversie verschillend).
*/
body.ab-eigen-syndified #app.dsw-products-grid-page,
body.ab-eigen-syndified #app .dsw-products-grid-page,
body.ab-eigen-syndified #app.dsw-single-product {
margin-top: 0 !important;
}
/* En de bovenmarge van de productsectie zelf wat inhouden. */
body.ab-eigen-syndified #app.dsw-single-product .dsw-top-section-wrapper {
padding-top: 18px !important;
}
/*
* En het vangnet: op elke pagina met een Syndified-app wordt de body
* wit. De donkere themabody is een keuze voor de homepage-banden;
* hier kan hij alleen maar als zwarte kier door naden heen lekken —
* welke marge een volgende pluginversie ook toevoegt.
*/
body.ab-eigen-syndified:has(#app) {
background-color: #fff !important;
}
/*
* Op merkpagina's als /etesia/ ligt een SEO-h1 met dsw-text-white
* bewust onzichtbaar op het witte logoblok. Onze donkere titelregel
* zou hem zichtbaar maken — "ETESIA" als tekst naast het
* ETESIA-logo. Weg ermee; de tekst blijft gewoon in de HTML staan.
*/
body.ab-eigen-syndified #app .dsw-hero-without-image-container h1.dsw-text-white,
body.ab-eigen-syndified #app .dsw-hero-without-image-container .dsw-text-white h1 {
display: none !important;
}
/* ── Verfraaiing: het karakter van de rest van de site ── */
/* De groene accentstreep boven de paginatitel — de "wenkbrauw" van de
homepagesecties, hier als vormtaal (tekst toevoegen kan niet in
andermans Vue-boom, de streep zelf wel). */
body.ab-eigen-syndified #app .dsw-hero-without-image-container h1::before {
content: "" !important;
display: block !important;
width: 46px !important;
height: 3px !important;
margin: 0 0 12px !important;
background: #3B732C !important;
}
/* De filterrijen: van grijze blokken naar witte rijen met een fijne
lijn — zelfde taal als de kaarten. */
body.ab-eigen-syndified #app .dsw-bg-gray-100[class*="dsw-border"] {
background: #fff !important;
border: 0 !important;
border-bottom: 1px solid #E4E4E4 !important;
}
body.ab-eigen-syndified #app .dsw-bg-gray-100[class*="dsw-border"] legend {
transition: color .15s ease !important;
}
body.ab-eigen-syndified #app .dsw-bg-gray-100[class*="dsw-border"]:hover legend {
color: #3B732C !important;
}
/* Focus en aandacht: velden lichten groen op als je erin staat. */
body.ab-eigen-syndified #app select:focus,
body.ab-eigen-syndified #app input:focus {
border-color: #3B732C !important;
outline: 2px solid rgba(59, 115, 44, .25) !important;
outline-offset: 0 !important;
}
/*
* Leven bij het laden: de kaarten verschijnen zachtjes van onder,
* de eerste rijen licht gespreid — zelfde gevoel als de
* scroll-reveal op de homepage. Eén keer, kort, en uit voor wie
* beweging heeft uitgezet.
*/
@keyframes ab-kaart-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: none; }
}
body.ab-eigen-syndified .dsw-product-grid-items {
animation: ab-kaart-in .35s ease both !important;
}
body.ab-eigen-syndified .dsw-product-grid-items:nth-child(2) { animation-delay: .05s !important; }
body.ab-eigen-syndified .dsw-product-grid-items:nth-child(3) { animation-delay: .1s !important; }
body.ab-eigen-syndified .dsw-product-grid-items:nth-child(4) { animation-delay: .15s !important; }
body.ab-eigen-syndified .dsw-product-grid-items:nth-child(5) { animation-delay: .2s !important; }
body.ab-eigen-syndified .dsw-product-grid-items:nth-child(6) { animation-delay: .25s !important; }
@media (prefers-reduced-motion: reduce) {
body.ab-eigen-syndified .dsw-product-grid-items {
animation: none !important;
}
}
/* De filterzijbalk. */
body.ab-eigen-syndified #app .dsw-filters h3,
body.ab-eigen-syndified #app h3.dsw-normal-case {
font-family: "Khand", "Mulish", sans-serif !important;
font-size: 20px !important;
font-weight: 500 !important;
text-transform: uppercase !important;
letter-spacing: .02em !important;
color: #111 !important;
}
/* ── De filterkolom op de MERKpagina's ─────────────────────────── */
/*
* Syndified bouwt twee soorten filterkolommen.
*
* Op een CATEGORIEpagina krijgt elke filtergroep een