/* Eurocat (eurocat.nl) - over site.css heen. Kleuren uit het logo (Claude\Eurocat\Logo Eurocat 2025.png):
   blauw #00549C (cirkel), geel #FCD454 (euroteken en letters), donker marineblauw #000C60 (schaduw).
   Geel alleen op blauw of marine (op wit is het onleesbaar); knoppen en links blauw. */
:root{
  --rood:#00549C;--rood-donker:#003F78;          /* "rood" is in site.css de accentkleur: hier blauw */
  --ec-blauw:#00549C;--ec-blauw-donker:#003F78;--ec-geel:#FCD454;--ec-geel-donker:#E9BC2E;--ec-marine:#000C60;
  --ec-blauw-licht:#EAF1F8;
}

/* kop: blauw, dan staat het gele logo goed leesbaar (geel op wit is dat niet) */
.logo-merk{display:block;height:54px;width:auto}
@media (max-width:600px){.logo-merk{height:42px}}
.kop{background:var(--ec-blauw);border-bottom:3px solid var(--ec-geel)}
.menu a{color:#E6EEF7}
.menu a:hover,.menu a[aria-current="page"]{color:#FFFFFF}
.menu a[aria-current="page"]{text-decoration-color:var(--ec-geel)}
.kop .knop-rand{background:transparent;color:#FFFFFF;border-color:rgba(255,255,255,.55)}
.kop .knop-rand:hover{color:#FFFFFF;border-color:#FFFFFF}
.kop .knop-rood{background:var(--ec-geel);color:var(--ec-marine)}
.kop .knop-rood:hover{background:var(--ec-geel-donker);color:var(--ec-marine)}
/* hero direct onder de blauwe kop: wat lucht tussen kop en kopregel */
.hero{border-top:0}

/* hero: blauw vlak zoals de cirkel in het logo, kop in het geel */
.hero{background:var(--ec-blauw);border-bottom:0;color:#FFFFFF}
.hero h1{color:var(--ec-geel)}
.hero p{color:#E6EEF7}
.hero .knop-rood{background:var(--ec-geel);color:var(--ec-marine)}
.hero .knop-rood:hover{background:var(--ec-geel-donker);color:var(--ec-marine)}
.hero .knop-rand{background:transparent;color:#FFFFFF;border-color:rgba(255,255,255,.55)}
.hero .knop-rand:hover{color:#FFFFFF;border-color:#FFFFFF}
.hero-foto{border-radius:14px;box-shadow:8px 8px 0 var(--ec-marine)}
.hero-foto figcaption{padding:12px 18px 14px;border-top:1px solid var(--lijn)}
.hero-foto figcaption a{color:var(--tekst)}

/* kleine accenten in geel en blauw */
.onderwerp:nth-child(-n+3){border-top-color:var(--ec-blauw)}
.onderwerp::after{color:var(--ec-blauw)}
.groep-beeld{background:var(--ec-blauw-licht)}
.groep-beeld svg{stroke:var(--ec-blauw)}
.prijsvak{background:var(--ec-blauw-licht)}
.melding-top{background:var(--ec-marine);color:var(--ec-geel)}
.melding-top a{color:var(--ec-geel)}

/* lijst met originele nummers (home en assortiment) */
.merk-nummers{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px 24px;margin-top:8px}
.merk-nummers a{display:flex;justify-content:space-between;gap:8px;padding:9px 0;border-bottom:1px solid var(--lijn);text-decoration:none;color:var(--tekst);font-size:16px;min-width:0}
.merk-nummers a small{font-family:'Instrument Sans',system-ui,sans-serif;color:var(--grijs-2);font-size:13px;white-space:nowrap}
.merk-nummers a:hover{color:var(--ec-blauw)}

/* voet: marineblauw, zoals de schaduw in het logo */
.voet{background:var(--ec-marine);border-top:0;color:#D5DAEA}
.voet a{color:#FFFFFF;text-decoration:none}
.voet a:hover{text-decoration:underline;text-underline-offset:3px}
.voet a:hover{color:var(--ec-geel)}
.voet-naam{color:var(--ec-geel)}
.voet-kop{color:#FFFFFF}
.voet-lijst{color:#C3C9E0}
.voet-merk{margin:0 0 12px;font-size:14px;color:#C3C9E0;max-width:300px}
.voet-onder{border-top-color:rgba(255,255,255,.18);color:#A9B0CF}
.voet-kort{color:#A9B0CF}
.voet-kort strong{color:var(--ec-geel)}

/* zoekveld in de hero (origineel nummer of AS/BM-nummer) */
.ec-zoek{display:flex;gap:8px;max-width:540px;margin:0 0 20px}
.ec-zoek input{flex:1 1 auto;min-width:0;height:52px;padding:0 16px;border:0;border-radius:8px;font-family:var(--mono);font-size:17px;background:#FFFFFF;color:var(--tekst)}
.ec-zoek input::placeholder{font-family:'Instrument Sans',system-ui,sans-serif;color:var(--grijs-2)}
.ec-zoek input:focus{outline:3px solid var(--ec-geel);outline-offset:1px}
.hero .ec-zoek .knop-rood{background:var(--ec-marine);color:#FFFFFF}
.hero .ec-zoek .knop-rood:hover{background:#000840;color:#FFFFFF}

/* zoekpagina's katalysatoren / roetfilters */
.gr-zoek{display:flex;gap:8px;max-width:640px;margin:32px 0 20px}
.gr-zoek input{flex:1 1 auto;min-width:0;height:52px;padding:0 16px;border:1px solid var(--lijn-veld);border-radius:8px;font-size:17px;background:#FFFFFF}
.gr-zoek input:focus{outline:3px solid var(--ec-geel);outline-offset:1px;border-color:var(--ec-blauw)}
.gr-merken{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.gr-merken a{padding:7px 12px;border:1px solid var(--lijn-knop);border-radius:999px;text-decoration:none;color:var(--tekst);font-size:14px;font-weight:500}
.gr-merken a small{color:var(--grijs-2);font-variant-numeric:tabular-nums}
.gr-merken a:hover{border-color:var(--ec-blauw);color:var(--ec-blauw)}
.gr-merken a[aria-current="page"]{background:var(--ec-blauw);border-color:var(--ec-blauw);color:#FFFFFF}
.gr-merken a[aria-current="page"] small{color:#CFE0F2}
.gr-aantal{margin:0 0 20px}
.gr-rij{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:28px 24px}
.gr-item{display:flex;flex-direction:column;gap:4px;text-decoration:none;color:var(--tekst);min-width:0}
.gr-item small{font-size:13px;color:var(--grijs-2)}
.gr-item b{font-weight:500;font-size:17px}
.gr-item:hover b{color:var(--ec-blauw)}
.gr-past{font-size:14px;color:var(--grijs);overflow-wrap:anywhere}
.gr-paginas{display:flex;flex-wrap:wrap;gap:6px;margin-top:40px}
.gr-paginas a,.gr-paginas span{min-width:40px;padding:8px 10px;text-align:center;border:1px solid var(--lijn-knop);border-radius:8px;text-decoration:none;color:var(--tekst);font-variant-numeric:tabular-nums}
.gr-paginas span{border-color:transparent}
.gr-paginas a[aria-current="page"]{background:var(--ec-blauw);border-color:var(--ec-blauw);color:#FFFFFF}

/* pagina per origineel nummer: de passende AS/BM-artikelen bovenaan, als kaartjes naar het gegevensblad */
.ec-past{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin:0 0 28px}
.ec-past a,.ec-past span{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--lijn-knop);border-left:4px solid var(--ec-geel);border-radius:8px;text-decoration:none;color:var(--tekst);min-width:0}
.ec-past a:hover{border-color:var(--ec-blauw);border-left-color:var(--ec-geel)}
.ec-past b{font-weight:600;font-size:17px;overflow-wrap:anywhere}
.ec-past small{font-size:13px;color:var(--grijs-2)}