/* =====================================================================
   home-strak.css — alleen op de home (index.html), geladen ná redesign.css.
   strak-shops 29-08 (design-audit: home 13,3 schermen mobiel / 9,3 desktop,
   doel <=8 / <=6). Bewust een eigen bestand: redesign.css staat op 1610
   pagina's en een wijziging daar laat de cachebuster-poort alle pagina's
   herschrijven. Alles hier is dichtheid en inklapbaarheid; inhoud blijft.
   ===================================================================== */
.seo-meer{margin-top:14px}
.seo-meer>summary{cursor:pointer;font-weight:700;color:var(--accent-deep);list-style:none;display:inline-flex;align-items:center;gap:8px;padding:8px 0}
.seo-meer>summary::-webkit-details-marker{display:none}
.seo-meer>summary::after{content:"+";font-weight:800}
.seo-meer[open]>summary::after{content:"\2013"}
.seo-longread{padding:30px 0}
.seo-longread h2{margin-bottom:10px}

@media (min-width:761px){
  .section{padding-block:28px}
  .sechead{margin-bottom:16px}
  .catrow-sec{padding:34px 0 4px}
  .rails{padding:20px 0 10px}
  .rail{padding:12px 0 2px}
  .breaker{padding:24px 0}
  .stats-grid{padding:16px 0}
  .wizards{margin-top:16px}
  .wizard{padding:16px;gap:8px}
  .spec-photo{aspect-ratio:4/3;align-self:center}
  .zeker{margin-top:18px;gap:14px 24px}
  /* 8 magazijntegels in één rij i.p.v. 2 rijen van 4 (651px -> ~190px) */
  .ig-grid{grid-template-columns:repeat(8,1fr);gap:10px}
  .faq-item summary{padding:11px 16px;min-height:44px}
  .foot-top{padding-block:34px 22px}
  .foot-col ul{gap:6px}
  .chips-row{padding:14px 0}
  .foot-bottom{padding:12px 0}
}

@media (max-width:760px){
  .section{padding-block:18px}
  .sechead{margin-bottom:12px}
  /* hero: de klantenservice-flank dubbelt met de footer (WhatsApp/e-mail) */
  .hero-side .flank--service{display:none}
  .hero-copy{padding:26px 20px}
  .catrow-sec{padding:22px 0 2px}
  .rails{padding:14px 0 6px}
  .rail{padding:8px 0 0}
  .rail-head{margin-bottom:6px}
  .breaker{padding:18px 0}
  .stats-grid{padding:10px 0;row-gap:10px}
  /* kieswijzers als swipe-rail (huisstijl: rails, niet stapelen): 690px -> ~240px */
  .wizards{display:flex;overflow-x:auto;gap:10px;margin-top:12px;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
  .wizards::-webkit-scrollbar{display:none}
  .wizards .wizard{flex:0 0 78%;scroll-snap-align:start;padding:16px;gap:8px}
  /* specialist: foto (358px) dicht, vier zekerheden 2x2 */
  .spec-photo{display:none}
  .zeker{grid-template-columns:1fr 1fr;gap:12px 10px;margin-top:16px}
  .zeker article{flex-direction:column;gap:6px}
  .zeker p{font-size:13px;line-height:1.4}
  /* magazijnfoto's: op mobiel dicht, de rails tonen al productfoto's */
  .ig-sec{display:none}
  .brands{padding:16px 0}
  .faq-item summary{padding:11px 14px;min-height:44px;font-size:14.5px}
  .faq-a{font-size:14px;padding:0 14px 12px}
  /* footer als accordeon: Onderdelen/Merken/Kieswijzers achter hun kop
     (js/home-strak.js zet .is-open); Klantenservice blijft open */
  .foot-top{padding-block:22px 10px;gap:0}
  .foot-brand{padding-bottom:10px}
  .foot-col{border-top:1px solid rgba(255,255,255,.12)}
  nav.foot-col .foot-h{display:flex;justify-content:space-between;align-items:center;margin:0;padding:12px 0;cursor:pointer}
  nav.foot-col .foot-h::after{content:"";width:8px;height:8px;margin-right:4px;border-right:2px solid rgba(255,255,255,.7);border-bottom:2px solid rgba(255,255,255,.7);transform:rotate(45deg);transition:transform .2s}
  nav.foot-col.is-open .foot-h::after{transform:rotate(-135deg)}
  nav.foot-col:not(.is-open) ul{display:none}
  nav.foot-col.is-open ul{padding-bottom:12px}
  .foot-col#contact{padding-top:12px}
  .foot-col#contact .foot-h{margin-bottom:8px}
  .chips-row{padding:12px 0}
  .chips-row .wrap{gap:8px 14px}
  .chips-row p{font-size:12px}
  .foot-bottom{padding:12px 0}
  .foot-bottom .wrap{gap:6px 14px;font-size:12.5px}
  .foot-bottom nav{gap:8px 14px}
  .foot-company,.foot-partners{font-size:12px;margin-top:4px}
}

/* ── ronde 2 (na meting: 8,4 mobiel / 6,8 desktop) ──────────────────── */
/* magazijnstrip: acht productfoto's die de rails al tonen; op alle breedtes dicht
   (lazy images laden niet in display:none). Markup blijft voor het VD:STRIP-gereedschap. */
.ig-sec{display:none}
@media (min-width:761px){
  .section{padding-block:22px}
  .catcard{padding:12px 8px}
  .foot-col ul{gap:4px}
  .foot-col a{font-size:14px}
  .foot-bottom .wrap{gap:4px 20px}
  .foot-company,.foot-partners{margin-top:2px}
  .brands{padding:20px 0 24px}
  .zeker{margin-top:14px;gap:12px 22px}
  .spec-copy .lead{margin-bottom:0}
  .wizards{margin-top:12px}
  .seo-longread .prose>h2+p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
}
@media (max-width:760px){
  /* specialist: inleiding en de vier toelichtingen dicht, koppen blijven */
  .spec-copy .lead{display:none}
  .zeker p{display:none}
  .zeker{gap:10px}
  /* koopgids: intro als teaser van 5 regels, de rest zit al achter 'Lees verder' */
  .seo-longread .prose>h2+p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden}
  .foot-bottom nav{gap:6px 12px}
  .foot-bottom .wrap{gap:4px 12px;font-size:12px}
  .foot-company,.foot-partners{font-size:11.5px;line-height:1.4;margin-top:2px}
  .chips-row .chips img{height:20px;width:auto}
  .chips-row .chips{gap:8px}
  .foot-col#contact ul{gap:5px}
}
/* categorierij desktop: 13 tegels op één rij i.p.v. 8 + 5 (380px -> ~150px) */
@media (min-width:761px){
  .catrow{grid-template-columns:repeat(13,1fr);gap:8px}
  .catcard b{font-size:12.5px;margin-top:6px}
}