/* ==========================================================================
   Hippe Zeeuw · laag 7 — winkel / winkelwagen / afrekenen / account
   Geport uit master-concept/css/pages.css. Laadt op de shop- en
   productarchiefpagina's, de winkelwagen, het afrekenen en mijn-account
   (zie inc/hz-enqueue.php) — nooit op de homepage.

   BEWUST NIET GEPORT (staat al in assets/css/woocommerce.css, op de échte
   Woo-markup, en zou daar alleen maar mee vechten):
     .cart / .cart__head / .citem      -> .hz-cart + table.shop_table.cart
     .qty                              -> .quantity + input.qty
     .summary                          -> .hz-cart__aside  (let op: .summary
                                          zit óók op het PDP-koopvak, dus deze
                                          regels zouden daar aangrijpen)
     .coupon                           -> .woocommerce .coupon
     .empty                            -> .hz-cart-empty / .hz-empty
     .co / .cosec / .costeps / .rcard / .miniline / .trustrow
     .auth / .panel / .perks           -> .hz-login + form.login/.register
     .acc / .accnav / .orders / .badge -> .hz-account + .woocommerce-MyAccount-*
     .field / .fgrid                   -> .woocommerce form .form-row
   Ook weggelaten: de nav-, zoekbalk- en paginakopblokken (staan in
   global.css / components.css of horen bij de zoekoverlay), en alles onder
   CONTACT / PROSE / STEPS / FAQ / CADEAUBON / OVER ONS / OVERZICHT — dat zijn
   andere paginatypes en niet deze brok.
   ========================================================================== */

/* ------------------------------------------------------------- kruimelpad */
/* Concept: .crumbs / .crumbs i. Bij ons .hz-crumbs met .hz-crumb-sep,
   zie hz_breadcrumb_args() in inc/hz-woo-hooks.php. */
.hz-crumbs{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  font-size:.75rem;
  letter-spacing:.06em;
  color:var(--ink-3);
  padding-block:20px 0;
}
.hz-crumbs a{ transition:color .2s var(--ease); }
.hz-crumbs a:hover{ color:var(--ink); }
.hz-crumbs span[aria-current]{ color:var(--ink); }
.hz-crumb-sep{ font-style:normal; opacity:.5; }

/* ================================================================== SHOP */
.shop{
  display:grid;
  grid-template-columns:262px 1fr;
  gap:clamp(28px,3.4vw,58px);
  align-items:start;
  padding-bottom:clamp(60px,7vw,110px);
}
/* AfterBuild-klant 8 — een grid-item heeft standaard min-width:auto, dus het
   kan niet smaller worden dan zijn min-content. De productkolom bevat het
   .prod-grid (op mobiel twee kolommen), en die min-content was op een telefoon
   breder dan het scherm: de kolom werd 434px bij een viewport van 390px,
   waardoor het HELE document breder werd dan het scherm. Gevolg: horizontaal
   scrollen, de knoppen Filteren/Maattabel + de sorteerbalk buiten beeld, en
   een aankondigingsbalk die maar tot de oude schermbreedte liep. min-width:0
   laat de kolom gewoon krimpen. */
.shop > *{ min-width:0; }

/* --------------------------------------------------------- filterkolom
   De markup hiervoor staat sinds brok 7 in woocommerce/archive-product.php.
   Onze filters zijn LINKS en geen checkboxes (er wordt server-side op een
   URL-parameter gefilterd, dus het werkt ook zonder JavaScript); de
   input:checked-regels hieronder blijven staan voor de conceptvorm, de
   a.check.is-on-variant er direct onder is degene die bij ons aangrijpt. */
.filters{
  position:sticky;
  top:calc(var(--hdr-h) + 22px);
}
.filters__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  padding-bottom:14px;
  border-bottom:1px solid var(--ink);
  margin-bottom:6px;
}
.filters__head h2{ font-size:1.35rem; }
.filters__head button{
  font-size:.6875rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-3);
  transition:color .2s var(--ease);
}
.filters__head button:hover{ color:var(--brick); }

.fgroup{ border-bottom:1px solid var(--line); }
.fgroup__btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:17px 0;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.fgroup__btn svg{
  width:12px; height:12px;
  stroke:var(--ink-3);
  stroke-width:1.8;
  fill:none;
  transition:transform .3s var(--ease);
  flex:none;
}
.fgroup.is-open .fgroup__btn svg{ transform:rotate(180deg); }
.fgroup__body{ display:none; padding-bottom:20px; }
.fgroup.is-open .fgroup__body{ display:block; }

.check{
  display:flex;
  align-items:center;
  gap:11px;
  padding:6px 0;
  font-size:.875rem;
  color:var(--ink-2);
  cursor:pointer;
  transition:color .2s var(--ease);
}
.check:hover{ color:var(--ink); }
.check input{ position:absolute; opacity:0; pointer-events:none; }
.check__box{
  width:16px; height:16px;
  border:1px solid var(--line);
  border-radius:3px;
  display:grid;
  place-items:center;
  flex:none;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.check__box::after{
  content:"";
  width:8px; height:4px;
  border-left:1.6px solid #fff;
  border-bottom:1.6px solid #fff;
  transform:rotate(-45deg) scale(0);
  transition:transform .2s var(--ease);
}
.check input:checked + .check__box{ background:var(--stone); border-color:var(--stone); }
.check input:checked + .check__box::after{ transform:rotate(-45deg) scale(1); }
.check em{ font-style:normal; margin-left:auto; font-size:.75rem; color:var(--ink-3); }

/* link-variant: zelfde vinkje, maar aangestuurd door .is-on uit PHP */
a.check{ text-decoration:none; }
a.check.is-on{ color:var(--ink); }
a.check.is-on .check__box{ background:var(--stone); border-color:var(--stone); }
a.check.is-on .check__box::after{ transform:rotate(-45deg) scale(1); }
/* subcategorie onder haar hoofdcategorie — het categoriefilter zelf is er
   sinds 18-09-2026 uit, deze regel blijft staan voor eventuele andere
   geneste lijsten in de filterkolom */
.check--sub{ padding-left:17px; font-size:.8125rem; }

/* kleur- en maatfilters */
.fcolors{ display:flex; flex-wrap:wrap; gap:9px; padding-top:4px; }
.fcolors button{
  width:26px; height:26px;
  border-radius:50%;
  border:1px solid var(--line);
  position:relative;
  transition:transform .25s var(--ease);
}
.fcolors button:hover{ transform:scale(1.12); }
.fcolors button.is-on::after{
  content:"";
  position:absolute; inset:-4px;
  border:1px solid var(--ink);
  border-radius:50%;
}
.fsizes{ display:flex; flex-wrap:wrap; gap:7px; padding-top:4px; }
.fsizes button{
  min-width:44px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:3px;
  font-size:.75rem;
  letter-spacing:.06em;
  color:var(--ink-2);
  transition:border-color .22s var(--ease), background .22s var(--ease), color .22s var(--ease);
}
.fsizes button:hover{ border-color:var(--ink); color:var(--ink); }
.fsizes button.is-on{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.fsizes button[disabled]{ opacity:.32; pointer-events:none; text-decoration:line-through; }

/* Linkvariant van de maatknoppen. Het maatfilter (S/M/L/XL/XXL, zie
   inc/hz-maatfilter.php) filtert server-side op ?maat=, dus het zijn <a>'s en
   geen <button>'s — zelfde vorm als de conceptknoppen hierboven, maar een link
   heeft geen font-erfenis van een knop en moet zijn onderstreping kwijt. */
.fsizes a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:3px;
  font-size:.75rem;
  letter-spacing:.06em;
  color:var(--ink-2);
  text-decoration:none;
  transition:border-color .22s var(--ease), background .22s var(--ease), color .22s var(--ease);
}
.fsizes a:hover{ border-color:var(--ink); color:var(--ink); }
.fsizes a.is-on{ background:var(--ink); border-color:var(--ink); color:var(--paper); }

.frange{ padding-top:10px; }
.frange__bar{
  position:relative;
  height:2px;
  background:var(--paper-3);
  margin:16px 0 14px;
}
.frange__fill{ position:absolute; left:12%; right:22%; top:0; bottom:0; background:var(--stone); }
.frange__bar i{
  position:absolute;
  top:50%;
  width:14px; height:14px;
  border-radius:50%;
  background:var(--paper);
  border:1px solid var(--stone-dk);
  transform:translate(-50%,-50%);
}
.frange__val{
  display:flex;
  justify-content:space-between;
  font-size:.8125rem;
  color:var(--ink-2);
}

/* ------------------------------------------------------- resultaatbalk */
.shop__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  padding-bottom:22px;
  border-bottom:1px solid var(--line);
  margin-bottom:clamp(22px,2.6vw,36px);
}
.shop__count{ font-size:.8125rem; color:var(--ink-3); letter-spacing:.06em; }
.shop__count b{ color:var(--ink); font-weight:600; }
/* toevoeging: woocommerce_result_count() zet er een <p> in, die anders een
   eigen marge meebrengt en de balk scheeftrekt */
.shop__count .woocommerce-result-count{ margin:0; font-size:inherit; color:inherit; }
.shop__tools{ display:flex; align-items:center; gap:10px; }
.filters-open{
  display:none;
  align-items:center;
  gap:9px;
  border:1px solid var(--line);
  border-radius:999px;
  padding:10px 18px;
  font-size:.75rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.filters-open svg{ width:14px; height:14px; stroke:var(--ink); stroke-width:1.5; fill:none; }

.selectw{ position:relative; }
.selectw svg{
  position:absolute;
  right:14px; top:50%;
  transform:translateY(-50%);
  width:12px; height:12px;
  stroke:var(--ink-2);
  stroke-width:1.8;
  fill:none;
  pointer-events:none;
}
/* toevoeging: woocommerce_catalog_ordering() zet er een <form> omheen */
.selectw .woocommerce-ordering{ margin:0; }
/* .field select uit het concept is weggelaten — .field bestaat hier niet */
.selectw select{
  appearance:none;
  -webkit-appearance:none;
  border:1px solid var(--line);
  background:var(--paper);
  border-radius:999px;
  padding:11px 40px 11px 18px;
  font:inherit;
  font-size:.8125rem;
  color:var(--ink);
  cursor:pointer;
  outline:none;
  transition:border-color .22s var(--ease);
}
.selectw select:hover{ border-color:var(--ink); }

/* actieve filterchips — markup in woocommerce/archive-product.php */
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.chips:empty{ display:none; }
.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--paper-2);
  border-radius:999px;
  padding:7px 14px;
  font-size:.75rem;
  color:var(--ink-2);
}
.chip svg{ width:11px; height:11px; stroke:var(--ink-2); stroke-width:2; fill:none; }
.chip button{ display:flex; }
/* het kruisje is bij ons een link naar de URL zonder dat filter */
.chip a{ display:flex; }

/* ---------------------------------------------------------- paginering
   Concept: .pager met .is-cur en .gap. woocommerce_pagination() rendert
   <nav class="woocommerce-pagination"><ul class="page-numbers"> met
   .current en .dots — zelfde vorm, andere klassenamen. */
.woocommerce-pagination{
  margin-top:clamp(44px,5vw,72px);
}
.woocommerce-pagination ul.page-numbers{
  display:flex;
  align-items:center;
  justify-content:center;
  /* AfterBuild-klant 8 — 15 paginanummers naast elkaar passen op een telefoon
     niet op een regel; zonder wrap duwden ze het document 23px breder dan de
     viewport. */
  flex-wrap:wrap;
  row-gap:7px;
  gap:7px;
  list-style:none;
  margin:0;
  padding:0;
  border:0;
}
.woocommerce-pagination ul.page-numbers li{ border:0; margin:0; padding:0; }
.woocommerce-pagination a.page-numbers,
.woocommerce-pagination span.page-numbers{
  min-width:42px; height:42px;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-size:.875rem;
  color:var(--ink-2);
  transition:background .22s var(--ease), color .22s var(--ease);
}
.woocommerce-pagination a.page-numbers:hover{ background:var(--paper-2); color:var(--ink); }
.woocommerce-pagination .page-numbers.current{ background:var(--ink); color:var(--paper); }
.woocommerce-pagination .page-numbers.dots{ color:var(--ink-3); }

/* categorie-intro onderaan archief (SEO-blok) */
.seo-note{
  border-top:1px solid var(--line);
  padding-top:clamp(34px,4vw,54px);
  margin-top:clamp(44px,5vw,74px);
  max-width:70ch;
}
.seo-note h2{ font-size:clamp(1.5rem,2.4vw,2rem); margin-bottom:16px; }
.seo-note p{ color:var(--ink-2); font-size:.9375rem; }

/* ============================================================ responsive */
@media (max-width:1180px){
  .shop{ grid-template-columns:230px 1fr; }
}

@media (max-width:1024px){
  .shop{ grid-template-columns:1fr; }
  .filters{
    position:fixed;
    inset:0 auto 0 0;
    width:min(88vw,340px);
    background:var(--paper);
    z-index:120;
    transform:translateX(-100%);
    transition:transform .45s var(--ease);
    overflow-y:auto;
    padding:24px;
    top:0;
  }
  .filters.is-open{ transform:none; }
  .filters-open{ display:inline-flex; }
  .filters--static{ position:static; }
}