/* ============================================================
   ZekerMobiel footer — Z6 fanout (2026-07-06)
   Strak 4-koloms footer + kaal 28px betaalrij (magenta iDEAL, geen wero).
   Laadt NA css/styles.css; selectors zijn met .site-footer gescoped zodat
   ze de oudere .footer-grid / .trust-strip / .pay-* regels overschrijven.
   ============================================================ */

/* -- brand-rij boven de kolommen (volle breedte) -- */
.site-footer .footer-brand{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px 20px;
  padding-bottom:30px; margin-bottom:34px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.site-footer .footer-brand .brand{
  display:inline-flex; align-items:center; gap:11px; flex:0 0 auto;
  text-decoration:none; font-size:22px;
}
.site-footer .footer-brand .brand__svg{width:44px;height:44px;display:block}
.site-footer .footer-brand__tag{
  margin:0; color:rgba(255,255,255,.68); font-size:18px; line-height:1.55;
  max-width:640px; flex:1 1 340px;
}

/* -- 4-koloms grid (desktop) -- */
.site-footer .footer-grid.footer-grid--4{
  display:grid;
  grid-template-columns:1.15fr 1.15fr 1fr 1fr;
  gap:34px 34px;
  align-items:start;
}
.site-footer .footer-grid--4 > div:first-child{grid-column:auto;max-width:none} /* neutraliseer legacy brand-span */
.site-footer .footer-col__title{
  font-family:var(--font-body,inherit);
  text-transform:uppercase; letter-spacing:.1em; font-weight:700;
  font-size:13.5px; line-height:1.3; color:#8fe0cd;
  margin:0 0 14px;
}
.site-footer .footer-col a{
  display:block; color:rgba(255,255,255,.80); text-decoration:none;
  font-size:16px; line-height:1.45; padding:5px 0;
}
.site-footer .footer-col a:hover{color:#fff; text-decoration:underline}
.site-footer .footer-col a[href^="mailto:"],
.site-footer .footer-col a[href^="tel:"]{overflow-wrap:anywhere}
.site-footer .footer-contact__tel{font-size:19px; font-weight:700; padding-top:0}
.site-footer .footer-hours{
  color:rgba(255,255,255,.6); font-size:18px; line-height:1.55; margin:10px 0 0;
}

/* -- bedrijfsinfo / Lageveen Holding -- */
.site-footer .footer-legal{
  margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.12);
}
.site-footer .footer-legal__holding{
  margin:0; color:rgba(255,255,255,.74); font-size:14px; line-height:1.55;
}
.site-footer .footer-legal__holding strong{color:#fff; font-weight:700}
.site-footer .footer-legal__line{
  margin:5px 0 0; color:rgba(255,255,255,.6); font-size:18px; line-height:1.5;
  overflow-wrap:anywhere;
}
.site-footer .footer-legal__line a{color:rgba(255,255,255,.86); text-decoration:underline}
.site-footer .footer-legal__line a:hover{color:#fff}

/* -- trust-kolom -- */
.site-footer .footer-trust{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:11px;
}
.site-footer .footer-trust li{
  position:relative; padding-left:26px;
  color:rgba(255,255,255,.82); font-size:18px; line-height:1.4;
}
.site-footer .footer-trust li::before{
  content:""; position:absolute; left:0; top:2px; width:16px; height:16px;
  background:#8fd6b4;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* -- betaalrij (icon-rij onder de footer): 28px, kaal, geen drager -- */
.site-footer .footer-pay{
  display:flex; align-items:center; flex-wrap:wrap; gap:12px 22px;
  margin-top:36px; padding-top:26px;
  border-top:1px solid rgba(255,255,255,.12);
}
.site-footer .footer-pay__label{
  color:rgba(255,255,255,.66); font-size:14px; font-weight:600; letter-spacing:.01em;
}
.site-footer .footer-pay .pay-row{
  display:flex; align-items:center; flex-wrap:wrap; gap:14px 20px;
  margin:0; padding:0; background:none; box-shadow:none; border:0;
  justify-content:flex-start; flex:1 1 auto;
}
.site-footer .footer-pay .pay-logo{
  height:28px; width:auto; display:block;
  background:none; border:0; border-radius:0; padding:0; box-shadow:none;
}
/* kaart/PSP-lockups uniform WIT op het donkere thema (kaal, geen kaartje);
   iDEAL blijft magenta en Klarna blijft roze (hun eigen merk-lockup). */
.site-footer .footer-pay .pay-logo--w{filter:brightness(0) invert(1);}

/* -- onderbalk -- */
.site-footer .footer-bottom{
  border-top:1px solid rgba(255,255,255,.14);
  margin-top:30px; padding-top:22px;
  display:flex; justify-content:space-between; gap:10px 16px; flex-wrap:wrap;
  color:rgba(255,255,255,.55); font-size:14px;
}

/* -- verberg de inerte JS-suppressie-marker (app.js bail-out) -- */
.site-footer .trust-strip--z6suppress{display:none !important}

/* ============ responsive ============ */
@media (max-width:900px){
  .site-footer .footer-grid.footer-grid--4{grid-template-columns:1fr 1fr; gap:30px 28px}
  /* Contact & Trust over de volle breedte onder de 2 link-kolommen (nette mobiele 2-koloms-les) */
  .site-footer .footer-col--contact,
  .site-footer .footer-col--trust{grid-column:1 / -1}
  .site-footer .footer-col--trust .footer-trust{
    display:grid; grid-template-columns:1fr 1fr; gap:11px 24px;
  }
}
@media (max-width:560px){
  .site-footer .footer-brand__tag{font-size:14.5px}
  .site-footer .footer-col a{font-size:16px; padding:6px 0}
  .site-footer .footer-col--trust .footer-trust{grid-template-columns:1fr}
  .site-footer .footer-pay{gap:12px 16px}
  .site-footer .footer-pay .pay-row{gap:14px 16px; justify-content:flex-start}
  .site-footer .footer-bottom{flex-direction:column; gap:6px; align-items:flex-start}
}

/* ================================================================
   SCHOUW-nafix 14-07 (hoofdsessie-sub A6) — rode punten uit
   shared\feeds\schouw-2026-07-14.json (contrast, kleine fonts,
   tap-targets). Bewust in footer.css: dit stylesheet laadt op elke
   pagina als LAATSTE en wint dus de cascade-volgorde. Selectors
   dubbel geschreven waar bestaande regels meer specificiteit hebben.
   ================================================================ */

/* — contrast: expliciete background-color als fallback onder foto/gradient.
   De schouw-proxy (en een gebruiker wiens afbeelding niet laadt) ziet anders
   wit-op-wit. Gradient/foto blijft eroverheen tekenen. */
.site-footer{background-color:#0e1d16}
.home-v2 .hero-main{background-color:#122a1f}
.home-v2 .flank{background-color:#122a1f}
.pdp__zoom-hint{background:rgba(0,24,48,.94);font-size:14px}

/* — kleine fonts mobiel: labels/badges naar minimaal 14px op <=980px.
   Desktop-maatvoering blijft onaangeroerd. */
@media (max-width:980px){
  .topbar{font-size:14px}
  .home-v2 .kicker,.kicker{font-size:14px}
  .home-v2 .hero-eyebrow,.hero-eyebrow{font-size:14px}
  .home-v2 .pcard__merk,.pcard__merk{font-size:14px}
  .home-v2 .pstock,.pstock{font-size:14px}
  .home-v2 .pbadge,.pbadge{font-size:14px}
  .home-v2 .pcard__fin,.pcard__fin{font-size:14px}
  .price small,.product-card__foot .price small,.home-v2 .pcard__price small,
  .segment-card__price small{font-size:14px}
  .pay-in3-line{font-size:14px}
  .nav__cart .count{font-size:14px}
  .home-v2 .ccorner-s,.ccorner-s{font-size:14px}
  .home-v2 .csub,.csub{font-size:14px}
  .home-v2 .cmp-flag,.cmp-flag{font-size:14px}
  .home-v2 .compare .cname b,.compare .cname b{font-size:14px}
  .site-footer .footer-col__title,.footer-col__title{font-size:14px}
  .site-footer .footer-legal__line,.footer-legal__line{font-size:14px}
  .pdp__buy .financing small,.financing small{font-size:14px}
  /* merkregel onder het logo: op tablet leesbaar 14px; op klein scherm was
     dit al verborgen per ontwerp (zm-critical) — die regel herbevestigen */
  .brand small{font-size:14px}
}
@media (max-width:640px){
  .brand small{display:none}
}

/* — mandje-label: tekst zit in .nav__cart-txt (was kaal tekstnode dat op
   mobiel met font-size:0 werd weggedrukt). Op smal scherm icoon-only, maar
   het label blijft bestaan voor schermlezers, met leesbare fontmaat. */
@media (max-width:640px){
  .nav__cart .nav__cart-txt{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;font-size:14px}
}

/* — tap-targets mobiel: interactieve elementen naar >=44px raakhoogte.
   Voor inline links: padding + negatieve marge = groter raakvlak ZONDER
   layoutverschuiving. */
@media (max-width:980px){
  .brand{min-height:44px}
  .nav__toggle,.site-header .nav__toggle{min-height:44px}
  .nav__cart,.site-header .nav__cart{min-height:44px;min-width:44px;justify-content:center}
  .nav .nav__search button,.nav__search button{min-height:44px}
  .nav .nav__search input,.nav__search input{min-height:44px}
  .seeall{padding:9px 0;margin:-9px 0}
  .hero-fin a{padding:12px 0;margin:-12px 0}
  .home-v2 .pcard__title a,.pcard__title a{display:inline-block;padding:12px 0;margin:-12px 0}
  .product-card__title a{display:inline-block;padding:12px 0;margin:-12px 0}
  .button--small,.home-v2 .kh-pcard .button--small,
  .product-card__foot .button--small{min-height:44px}
  .site-footer .footer-grid a,.site-footer .footer-col a,
  .footer-grid a,.footer-col a{padding:11px 0}
  .topbar__item a{display:inline-block;padding:11px 0;margin:-11px 0}
  .breadcrumb a{display:inline-block;padding:10px 0;margin:-10px 0}
  .arrow-link{padding:8px 0;margin:-8px 0}
  .pdp__brand,.product-card__brand{display:inline-block;padding:12px 0;margin:-12px 0}
}

/* — verfijning 2 (zelfde schouwronde): specifieke selectors die id-/triple-class-
   regels uit home-v2.css/zm-verkoop.css moeten overstemmen + consent-/PDP-links */
@media (max-width:980px){
  #acc-grid .pcard__fin{font-size:14px}
  .home-v2 .chead .csub{font-size:14px}
  .home-v2 .pcard .button--small,.home-v2 .kh-pcard .button--small{min-height:44px}
  .pdp__buy .button,.pdp .button--block{min-height:44px}
  .garantie__meer a{display:inline-block;padding:12px 0;margin:-12px 0}
  .pdp__model-tag a{display:inline-block;padding:12px 0;margin:-12px 0}
  .zmc-cc__link{display:inline-block;padding:12px 0;margin:-12px 0}
  button.hr-link,.hr-link{padding:12px 0;margin:-12px 0}
  /* inline links in lopende tekst: groter raakvlak zonder layout-verschuiving */
  main p > a:not([class]),main li > a:not([class]){display:inline-block;padding:12px 0;margin:-12px 0}
}

/* — mini-kaarten: door de nesting-fix is de hele kaart weer één <a>;
   de link-onderstreping hoort daar niet op de kaartinhoud te staan */
a.product-card{text-decoration:none;color:inherit}


/* ================================================================
   SHOPSCAN 28-07 — betaallogo-rij brak op in 5+1 (layoutpoort RIJ-WEES)
   Gemeten op 320 en 360 px, op alle vijf gescande paginas: zes logos in
   een flex-wrap laten Apple Pay als eenling op een tweede rij achter.
   Dat is letterlijk de operator-klacht ("de icoontjes komen raar onder
   elkaar"). Een grid van drie kolommen kan per definitie geen wees
   maken bij zes items: het is altijd 3+3.
   GRENS 375px, niet 560px. Met 560 sloeg de fix door: de poort meldde bij
   390 en 412 px "wrapt naar 2 rijen terwijl de 6 items samen 343px nodig
   hebben en er 362px is" — daar paste alles nog op één regel en maakte het
   grid er zelf twee van. De echte wees trad alleen op bij 320 en 360 px.
   Zo lost de fix precies het gemeten defect op en niets daarbuiten.
   ================================================================ */
@media (max-width:375px){
  .site-footer .footer-pay .pay-row{
    display:grid; grid-template-columns:repeat(3,auto);
    justify-content:start; align-items:center; gap:14px 18px;
  }
  .site-footer .footer-pay .pay-logo{justify-self:start}
}