/* ==========================================================================
   Hippe Zeeuw · laag 6 — mobile fixes
   Laadt ALTIJD als laatste. Alleen echte mobiele correcties, geen nieuwe
   componenten. Dit is de enige laag waar !important is toegestaan, en dan
   nog alleen waar een plugin-stijl anders wint.
   ========================================================================== */

@media (max-width:1024px){
  /* de zoek-overlay meet zijn top-offset in JS; op tablet/mobiel is de
     header lager, dus laat de JS-waarde altijd winnen */
  .search-overlay__panel{ padding-inline:0; }
  .search-form input[type="search"]{ font-size:1.35rem; }
}

@media (max-width:820px){
  .sec-head{ align-items:flex-start; }
  .rev__top{ align-items:flex-start; }
  .label__specs li{ flex-direction:column; gap:5px; }
  .label__specs .k{ flex:none; padding-top:0; }
}

@media (max-width:640px){
  /* volle-breedte knoppen mogen op mobiel nooit half blijven hangen */
  .hz-buy__row{ flex-wrap:wrap; }
  .hz-buy__row .quantity{ flex:1 1 100%; }
  .hz-buy__row .quantity input.qty{ width:100%; }
  .hz-buy__row .single_add_to_cart_button{ flex:1 1 100%; min-width:100%; }

  .hero__cta .btn,
  .hz-sc__head .tlink{ flex:1 1 auto; }

  .ftr__bot{ flex-direction:column; align-items:flex-start; gap:14px; }

  /* AfterBuild-klant 6 — de knoppenrij van de categoriepagina
     (Filteren / sorteren) liep op 375px buiten het scherm. De rij mag
     afbreken: de knop Filteren houdt zijn eigen breedte, het sorteermenu
     pakt de regel eronder volledig. Niets verborgen, alles leesbaar.
     18-09-2026: de knop Maattabel is uit de balk gehaald, dus er staat nog
     maar een pil naast het sorteermenu. */
  .shop__bar{ gap:12px; }
  .shop__count{ flex:1 1 100%; }
  .shop__tools{ flex-wrap:wrap; width:100%; gap:8px; }
  .shop__tools .filters-open{
    flex:1 1 auto;
    justify-content:center;
    padding:10px 12px;
    letter-spacing:.06em;
    white-space:nowrap;
  }
  .shop__tools .selectw{ flex:1 1 100%; }
  .shop__tools .selectw .woocommerce-ordering{ width:100%; }
  .shop__tools .selectw select{ width:100%; }
}

@media (max-width:560px){
  .melia__facts div{ padding-right:12px; }
  .hz-sidecart{ width:100vw; }

  /* AfterBuild-klant 8 — de USP-balk stond onder 1024px op twee kolommen.
     De min-content van zo'n tegel (icoon + tekst + 26px padding) is ~186px,
     dus op een scherm van 360px of smaller werd het raster 373px breed en
     daarmee het hele document. Onder 560px dus één kolom. */
  .usp__grid{ grid-template-columns:1fr; }
  .usp__grid .usp__item{ border-left:0; border-top:1px solid var(--line); padding:22px 18px; }
  .usp__grid .usp__item:first-child{ border-top:0; }

  /* iOS zoomt in bij een font-size onder 16px in een focusveld */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  select,
  textarea{ font-size:16px; }
}

/* de announce-balk is op de kleinste schermen te druk met 5 items naast
   elkaar; niets verbergen, alleen strakker zetten */
@media (max-width:420px){
  .announce__set span{ padding-inline:18px; gap:18px; }
}

/* ==========================================================================
   AfterBuild-klant 6 — twee correcties die hier staan omdat dit de laatste
   laag is; zo blijven components.css/global.css onaangeroerd en blijven hun
   eigen media queries leesbaar.
   ========================================================================== */

/* 1. Chevron achter de uitklapbare items in de mobiele drawer (Kleding,
      Accessoires). Zelfde icoon en zelfde bescheiden maat als de desktopnav,
      en net als daar direct achter het woord; draait mee zodra het submenu
      open staat. */
.drawer nav a[data-sub-toggle]{
  display:flex;
  align-items:center;
  gap:9px;
}
.drawer nav a[data-sub-toggle] .sub-arrow{
  flex:none;
  width:11px;
  height:11px;
  margin-top:2px;
  stroke:currentColor;
  stroke-width:2;
  fill:none;
  opacity:.45;
  transition:transform .22s ease, opacity .22s ease;
}
.drawer nav a[data-sub-toggle][aria-expanded="true"] .sub-arrow{
  transform:rotate(180deg);
  opacity:.8;
}

/* 2. Het categorierooster op de homepage staat in components.css vast op vijf
      kolommen. Nu "Eigen label" uit de weergave is, zijn het vier tegels en
      bleef er een lege kolom over. --cats-cols komt uit front-page.php en
      telt de tegels die er echt staan; alleen boven 1180px, want daaronder
      hebben de media queries van components.css (3 en 2 kolommen) het al voor
      het zeggen. */
@media (min-width:1181px){
  .cats__grid{ grid-template-columns:repeat(var(--cats-cols,5),1fr); }
}