/* Bestaande thuisbatterij-merkpagina's (dyness-thuisbatterij, dyness-tower-pro, sigenergy-, alphaess-,
   tesla-powerwall-3p, foxess-thuisbatterij): compacter op de telefoon. Alleen ≤ 640 px; desktop blijft gelijk.
   Wordt door tools/thuis-bouw/bouw_thuis.py in de head gezet, ná de eigen <style> van de pagina. */
@media (max-width: 640px) {
  /* koppen en tekst */
  .section .section-title { font-size: 1.6rem; line-height: 1.15; }
  .section .section-sub { font-size: .95rem; line-height: 1.55; }
  .page-hero .page-sub { font-size: 1rem; line-height: 1.6; }

  /* hero: één grote knop, de rest klein naast elkaar; bellen zit in de balk onderin */
  .page-hero .hero-actions { flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: .5rem; }
  .page-hero .hero-actions .btn { width: auto; flex: 1 1 auto; padding: .65rem .85rem; font-size: .84rem; justify-content: center; }
  .page-hero .hero-actions .btn-primary { flex-basis: 100%; padding: .9rem 1rem; font-size: .95rem; }
  .page-hero .hero-actions .btn-whatsapp, .page-hero .hero-actions a[href^="tel:"] { display: none; }
  .page-hero .hero-actions .btn-ghost { flex: 1 1 calc(50% - .25rem); white-space: normal; line-height: 1.2; font-size: .8rem; padding: .6rem .6rem; text-align: center; }
  .stat-strip { margin-top: 1.8rem; }
  .stat-cell { padding: 1rem .6rem; }

  /* veegrijen: praktijkfoto's, waarom-kaarten, andere merken */
  #praktijk .gallery, .why-grid, .brand-links {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px;
    margin: 1.3rem calc(50% - 50vw) 0; padding: 0 calc(50vw - 50%) 8px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  #praktijk .gallery::-webkit-scrollbar, .why-grid::-webkit-scrollbar, .brand-links::-webkit-scrollbar { display: none; }
  #praktijk .gal-item { flex: 0 0 80%; scroll-snap-align: center; margin: 0; }
  #praktijk .gal-item img { width: 100%; height: 230px; object-fit: cover; }
  #praktijk .gal-item figcaption { font-size: 12.5px; }
  .why-card { flex: 0 0 76%; scroll-snap-align: center; padding: 1.1rem 1.15rem; }
  .why-card .why-ico { width: 36px; height: 36px; margin-bottom: .7rem; }
  .why-card h3 { font-size: 1rem; }
  .why-card p { font-size: .88rem; line-height: 1.5; }
  .brand-link { flex: 0 0 72%; scroll-snap-align: center; padding: 1rem 1.1rem; }
  .brand-link strong { font-size: .95rem; }
  .brand-link span { font-size: .82rem; }

  /* systeem & prijs */
  .product-showcase { gap: 1rem; margin-top: 1.6rem; }
  .ps-media { min-height: 0; padding: 1rem; }
  .ps-media img { max-height: 210px; width: auto; object-fit: contain; }
  .ps-title { font-size: 1.35rem; }
  .ps-desc { font-size: .92rem; line-height: 1.55; }
  .spec-row { padding: .5rem 0; }
  .spec-row span:first-child { font-size: .85rem; }
  .spec-row span:last-child { font-size: .9rem; }
  .price-grid { gap: .6rem; }
  .price-card { padding: 1.1rem 1.15rem; }

  /* calculator / samensteller */
  .calc-wrap { gap: 1rem; }
  .calc-group { margin-bottom: 1.1rem; }
  .calc-help { font-size: 9.5px; margin-top: .3rem; }
  .fase-toggle { gap: .45rem; }
  .fase-toggle.three { grid-template-columns: 1fr 1fr 1fr; }
  .fase-opt .fase-box { padding: .7rem .5rem; }
  .fase-toggle.three .fase-box strong { font-size: .9rem; }
  .fase-toggle.three .fase-box span, .fase-toggle.three .fase-box small { font-size: 10px; line-height: 1.3; }
  .calc-extras { gap: .4rem; }
  .calc-result-inner { padding: 1.1rem; }

  .cta-card { padding-left: 1.1rem; padding-right: 1.1rem; }
  .cta-card h2 { font-size: 1.55rem; }
}