/* ===========================================================
   Categorie-archief — Body & Shape Store (Manus-ontwerp)
   Header + subcategorie-pills + filter-rij + 4-koloms grid.
   .product-card / .product-grid komen globaal uit main.css;
   hier alleen de categorie-specifieke chrome + grid-zekerheid.
   =========================================================== */

/* Layout: geen permanente sidebar meer — filters = slide-in drawer */
.tax-product_cat .shop-layout,
.tax-product_brand .shop-layout,
.post-type-archive-product .shop-layout {
  display: block;
}

/* === HEADER === */
.category-header {
  text-align: center;
  padding: 22px 0 28px;   /* meer lucht tussen broodkruimel en titel (klantfeedback) */
  max-width: 700px;
  margin: 0 auto;
}
.category-header__title {
  font-family: 'Neue Faktum Extended', 'Archivo', sans-serif;
  font-size: 30px;        /* gelijk aan PDP-producttitel (klantfeedback 08-07) */
  font-weight: 400;
  letter-spacing: normal;
  color: var(--bss-ink);
  margin: 0 0 14px;
  line-height: 1.05;
}
@media (max-width: 768px) {
  .category-header__title { font-size: 28px; }
}
/* Mobiel: header links uitgelijnd + volledige breedte (klant-design 01-07). */
@media (max-width: 600px) {
  /* Compacter naar boven op mobiel (klantfeedback 08-07): kleinere verticale gaps tussen
     broodkruimel → titel → omschrijving → subcat-balk → filter/sorteer-rij. */
  .tax-product_cat .breadcrumb, .tax-product_brand .breadcrumb,
  .post-type-archive-product .breadcrumb { padding: 10px 0 2px !important; }
  .category-header { text-align: left; max-width: none; margin: 0; padding: 6px 0 8px; }
  .category-header__title { font-size: 22px; margin-bottom: 6px; }
  .category-header__description { font-size: 14.5px; line-height: 1.6; }
  .category-tabs-bar { margin-bottom: 2px; }
  .category-filter-row { padding: 4px 0 10px; }
}
.category-header__description {
  font-size: 14px;        /* gelijk aan de subcat-pills eronder (klantfeedback 08-07) */
  color: var(--bss-body);
  line-height: 1.7;
  margin: 0;
  /* CAT-02: intro op exact 1 regel, "Lees meer" inline erachter */
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 5px;
  max-width: 100%;
}
.category-header__intro {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.category-header__readmore {
  flex-shrink: 0;
  padding: 0;
  background: none;
  border: none;
  font: inherit;
  color: var(--bss-muted);   /* grijs, niet groen/vet/onderstreept (CAT-02) */
  cursor: pointer;
  text-decoration: none;
}
.category-header__readmore:hover { color: var(--bss-green); text-decoration: underline; }
/* Mobiel: intro links uitgelijnd i.p.v. gecentreerd */
@media (max-width: 600px) {
  .category-header__description { justify-content: flex-start; }
}

/* === FILTERS = off-canvas drawer op ALLE breedtes (Manus: geen sidebar) === */
.tax-product_cat .shop-filters,
.tax-product_brand .shop-filters,
.post-type-archive-product .shop-filters,
body.search .shop-filters {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(380px, 92vw);
  height: auto;
  background: #fff;
  z-index: 1200;
  transform: translateX(100%);
  transition: transform .3s ease;
  overflow-y: auto;
  box-shadow: -4px 0 24px rgba(0,0,0,.18);
  padding: 1.25rem 1.5rem 1.75rem;
  pointer-events: none;
}
.tax-product_cat .shop-filters.is-open,
.tax-product_brand .shop-filters.is-open,
.post-type-archive-product .shop-filters.is-open,
body.search .shop-filters.is-open {
  transform: translateX(0);
  pointer-events: auto;
}
.tax-product_cat .shop-filters__close,
.post-type-archive-product .shop-filters__close,
body.search .shop-filters__close { display: flex !important; }
.tax-product_cat .shop-filters__backdrop,
.post-type-archive-product .shop-filters__backdrop,
body.search .shop-filters__backdrop { display: block !important; }

/* === SUBCATEGORIE-BALK (CAT-03: sticky onder de header) === */
.category-tabs-bar {
  /* Sticky onder de header (klantfeedback 08-07: balk moet blijven staan bij scrollen).
     top ≈ headerhoogte (logo 90px + 2×9px padding). Fijn-af te stemmen op staging. */
  position: sticky;
  top: 108px;
  z-index: 40;
  /* GEEN volle-breedte achtergrondband bij het sticky worden — alleen de pill-balk zelf
     (.category-tabs, met eigen achtergrond) blijft plakken (klantfeedback 08-07). */
  background: transparent;
  margin: 0 0 8px;
  padding: 0;             /* geen verticale band-zone → alleen de pill-balk plakt */
  pointer-events: none;   /* transparante zones vangen geen klikken; pills zetten 'm terug aan */
}
.category-tabs-bar .category-tabs { pointer-events: auto; }

/* === SUBCATEGORIE-PILLS === */
.category-tabs {
  display: flex;
  flex-wrap: wrap;           /* DESKTOP: alle subcategorieën naast elkaar zichtbaar; wrapt i.p.v. scrollen */
  justify-content: center;
  width: fit-content;        /* weinig pills → smalle balk, gecentreerd; veel pills → tot volle breedte */
  background: var(--bss-tile);
  border-radius: 5px;        /* veel minder rond (klantfeedback 08-07: ~5px) */
  padding: 5px;
  gap: 2px;
  margin: 0 auto;            /* gecentreerd */
  max-width: 100%;
}
.category-tabs::-webkit-scrollbar { display: none; }
/* MOBIEL: één rij, horizontaal swipen (scroll) i.p.v. wrappen. */
@media (max-width: 600px) {
  .category-tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
}
.category-tabs__tab {
  flex-shrink: 0;
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 500;
  color: var(--bss-muted);
  text-align: center;
  border-radius: 5px;        /* losse pills minder rond, gelijk aan container (klantfeedback 08-07: ~5px) */
  white-space: nowrap;
  text-decoration: none;
  transition: all 0.15s ease;
}
.category-tabs__tab--active {
  background: #fff;
  color: var(--bss-ink);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.category-tabs__tab:hover:not(.category-tabs__tab--active) { color: var(--bss-ink); }

/* === FILTER-RIJ === */
.category-filter-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  padding: 8px 0 20px;
}
.category-filter-btn {
  font-size: 14px;
  font-weight: 500;
  color: var(--bss-ink);
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.category-filter-btn svg { stroke: var(--bss-ink); }
/* Lege sorteer-box niet als witte balk tonen (klantfeedback D-03) */
.category-filter-row .shop-toolbar__sort:empty { display: none; }
/* Sorteren: subtiel/on-brand (klantfeedback: rauwe select viel buiten het design).
   Borderless, tekst in ink-kleur, eigen chevron — zelfde rustige stijl als de "Filteren"-knop. */
.category-filter-row .shop-toolbar__sort select {
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 28px 8px 4px;
  border: none;
  background-color: transparent;
  color: var(--bss-ink);
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23262626' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
}
.category-filter-row .shop-toolbar__sort select:hover { color: var(--bss-green); }

/* === PRODUCT-GRID (4 kolommen desktop) === */
.tax-product_cat .product-grid,
.tax-product_brand .product-grid,
.post-type-archive-product .product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 24px;
  padding-bottom: 48px;
}

/* Grotere productfoto op categorie-/merk-/zoekpagina's, LINKS uitgelijnd met titel + merk
   (klantfeedback 02-07). Foto vult de kaartbreedte; aspect blijft behouden via contain. */
:is(.tax-product_cat, .tax-product_brand, .post-type-archive-product, body.search) .product-card__image-wrap {
  justify-content: flex-start;
}
:is(.tax-product_cat, .tax-product_brand, .post-type-archive-product, body.search) .product-card__image,
:is(.tax-product_cat, .tax-product_brand, .post-type-archive-product, body.search) .product-card__image-wrap img[data-lazyloaded] {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  object-position: left center;
  transform: none !important;   /* globale scale(1.06) uit → geen uitsteek links, exact uitgelijnd */
}
/* Subtiele hover-zoom vanaf links, zodat de linkerlijn blijft kloppen. */
:is(.tax-product_cat, .tax-product_brand, .post-type-archive-product, body.search) .product-card:hover .product-card__image {
  transform: scale(1.04) !important; transform-origin: left center;
}
@media (max-width: 1024px) {
  .tax-product_cat .product-grid,
  .tax-product_brand .product-grid,
  .post-type-archive-product .product-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .tax-product_cat .product-grid,
  .tax-product_brand .product-grid,
  .post-type-archive-product .product-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
}

/* === MOBIELE LIJST-WEERGAVE (klant-design 01-07): afbeelding links, info + Bekijk rechts,
   rijen gescheiden door lijnen — i.p.v. de 2-koloms grid op telefoon.
   Geldt voor categorie-, merk- én zoekarchieven. === */
@media (max-width: 600px) {
  :is(.tax-product_cat, .tax-product_brand, .post-type-archive-product, body.search) .product-grid {
    grid-template-columns: 1fr; gap: 0; padding-bottom: 24px;
  }
  :is(.tax-product_cat, .tax-product_brand, .post-type-archive-product, body.search) .product-card {
    border-bottom: 1px solid var(--bss-line);
  }
  :is(.tax-product_cat, .tax-product_brand, .post-type-archive-product, body.search) .product-card__link {
    display: grid; grid-template-columns: 110px 1fr; column-gap: 16px; align-items: stretch; padding: 16px 0;
  }
  :is(.tax-product_cat, .tax-product_brand, .post-type-archive-product, body.search) .product-card__image-wrap {
    width: 110px; height: 110px; margin: 0; aspect-ratio: 1 / 1;
  }
  :is(.tax-product_cat, .tax-product_brand, .post-type-archive-product, body.search) .product-card__image {
    width: 100%; height: 100%; object-fit: contain;
  }
  :is(.tax-product_cat, .tax-product_brand, .post-type-archive-product, body.search) .product-card__info {
    display: flex; flex-direction: column; gap: 2px;
  }
  :is(.tax-product_cat, .tax-product_brand, .post-type-archive-product, body.search) .product-card__name {
    font-family: 'Inter', sans-serif; font-size: 18px !important; font-weight: 700;
    line-height: 1.3; color: #1f1f1f; margin: 0 0 2px;
  }
  /* Merk: chrome forceert uppercase/600/letter-spacing → hier expliciet resetten (anders "RABEKO"). */
  :is(.tax-product_cat, .tax-product_brand, .post-type-archive-product, body.search) .product-card__brand {
    font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 400;
    text-transform: none; letter-spacing: 0; color: rgba(43, 43, 43, .6);
  }
  /* Review-ster iets groter op mobiel (klantfeedback 08-07). */
  :is(.tax-product_cat, .tax-product_brand, .post-type-archive-product, body.search) .product-card__stars { font-size: 18px; line-height: 1; }
  /* Prijs+knop naar de onderkant van de rij (uitgelijnd met onderkant foto). */
  :is(.tax-product_cat, .tax-product_brand, .post-type-archive-product, body.search) .product-card__bottom {
    /* flex-wrap:nowrap (expliciet — een basisregel zet 'm op wrap): anders wrapt de
       "bekijk"-knop bij een lange prijs (mét eenheid) naar de volgende regel en gaat-ie
       links staan. Knop moet ALTIJD rechts (klantfeedback 07-07). */
    display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; flex-wrap: nowrap;
  }
  :is(.tax-product_cat, .tax-product_brand, .post-type-archive-product, body.search) .product-card__price {
    font-size: 16px; flex: 1 1 auto; min-width: 0; line-height: 1.3;   /* prijs + inhoud naast elkaar; knop blijft rechts */
  }
  /* Oude (doorgestreepte) prijs op een eigen regel BOVEN de vanaf-prijs; vanaf-prijs +
     inhoud (| 350 ml) blijven daaronder naast elkaar (klantfeedback 08-07). */
  :is(.tax-product_cat, .tax-product_brand, .post-type-archive-product, body.search) .product-card__price del {
    display: block; font-size: 12px; color: var(--bss-muted-light);
    text-decoration: line-through; line-height: 1.2; margin: 0 0 1px;
  }
  :is(.tax-product_cat, .tax-product_brand, .post-type-archive-product, body.search) .product-card__price ins { text-decoration: none; }
  :is(.tax-product_cat, .tax-product_brand, .post-type-archive-product, body.search) .product-card__unit { white-space: nowrap; }
  :is(.tax-product_cat, .tax-product_brand, .post-type-archive-product, body.search) .product-card__btn {
    flex-shrink: 0;                                  /* knop nooit verkleinen/wrappen → altijd rechts */
    background: var(--bss-green); color: #fff; padding: 9px 18px; border-radius: 6px;  /* kleiner → meer ruimte voor prijs + inhoud (klantfeedback 08-07) */
    font-size: 13px; font-weight: 600; white-space: nowrap; line-height: 1;
  }
}

/* Rating-rij ALTIJD even hoog (ook zonder reviews) op alle breedtes → titels/prijzen
   lijnen uit over kaarten mét én zónder reviews (klantfeedback: no-review-kaarten stonden hoger). */
:is(.tax-product_cat, .tax-product_brand, .post-type-archive-product, body.search) .product-card__rating {
  min-height: 20px;
}

/* Productkaarten = globale Manus-look uit bss-chrome.css. Hier de archief-specifieke
   typografie exact volgens klant-design (categorie desk.png, blok CAT-06 t/m CAT-12).
   Scope: categorie- + merk- + zoekarchieven, DESKTOP/tablet (≥601px); mobiel heeft
   een eigen lijst-design hierboven. */
@media (min-width: 601px) {
/* Compacte, design-conforme afstanden: sterren→titel→merk strak onder elkaar; alleen
   merk→prijs iets meer lucht. GEEN 2-regel-reservering (die gaf te grote gaps). */
:is(.tax-product_cat, .tax-product_brand, .post-type-archive-product, body.search) .product-card__rating {
  display: flex; align-items: center; gap: 6px; margin: 0 0 7px;
  min-height: 18px;              /* CAT-10: sterren-rij consistent hoog (ook zonder reviews) */
  font-size: 13px; color: var(--bss-muted);
}
:is(.tax-product_cat, .tax-product_brand, .post-type-archive-product, body.search) .product-card__stars {
  color: var(--bss-green); font-size: 18px; letter-spacing: 0; line-height: 1;  /* CAT-06: ster iets groter (klantfeedback 08-07) */
}
:is(.tax-product_cat, .tax-product_brand, .post-type-archive-product, body.search) .product-card__reviews {
  font-size: 13px; color: var(--bss-muted);   /* CAT-07: "reviews" erachter (markup) */
}
:is(.tax-product_cat, .tax-product_brand, .post-type-archive-product, body.search) .product-card__name {
  font-family: 'Inter', sans-serif; font-size: 16px !important; font-weight: 600; color: #2b2b2b;  /* CAT-08: Inter Semibold #2b2b2b 16pt */
  margin: 0 0 4px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;  /* CAT-11: max 2 regels, geen reservering */
}
:is(.tax-product_cat, .tax-product_brand, .post-type-archive-product, body.search) .product-card__brand {
  font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 400; color: rgba(43,43,43,.6);  /* CAT-09: Inter Regular #2b2b2b 60% 15pt */
  text-transform: none; letter-spacing: 0; margin: 0;
}
/* CAT-12: prijs 17pt / inhoud 15pt op één horizontale rij. Prijs-rij naar de kaartbodem
   (margin-top:auto) → prijzen lijnen horizontaal uit over de rij, óók bij 2-regel-titels;
   min. lucht onder het merk via min-height op de tussenruimte. */
:is(.tax-product_cat, .tax-product_brand, .post-type-archive-product, body.search) .product-card__bottom {
  margin-top: auto; padding-top: 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;  /* knop náást prijs+inhoud (klantfeedback) */
}
:is(.tax-product_cat, .tax-product_brand, .post-type-archive-product, body.search) .product-card__bottom .product-card__price {
  font-size: 17px; color: #2b2b2b;
}
:is(.tax-product_cat, .tax-product_brand, .post-type-archive-product, body.search) .product-card__unit {
  font-size: 15px; font-weight: 400; color: var(--bss-muted);
}
:is(.tax-product_cat, .tax-product_brand, .post-type-archive-product, body.search) .product-card__bottom .product-card__btn {
  flex-shrink: 0;
  background: var(--bss-green); color: #fff; padding: 10px 22px; border-radius: 6px;
  font-size: 14px; font-weight: 500; white-space: nowrap; line-height: 1;
}
} /* /min-width:601px — CAT-06 t/m CAT-12 */

/* Knoptekst 1-op-1 met design ("bekijk", kleine letters) op alle archiefbreedtes.
   Scope houdt de homepage-kaart ("Bekijk") ongemoeid. */
:is(.tax-product_cat, .tax-product_brand, .post-type-archive-product, body.search) .product-card__btn {
  text-transform: lowercase;
}

/* Aanbieding: doorgestreepte oude prijs BOVEN de nieuwe prijs (eigen regel), zodat links
   [oude prijs] boven [nieuwe prijs | inhoud] staat en de "bekijk"-knop er rechts netjes naast past. */
:is(.tax-product_cat, .tax-product_brand, .post-type-archive-product, body.search) .product-card__bottom .product-card__price {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; row-gap: 1px;
}
:is(.tax-product_cat, .tax-product_brand, .post-type-archive-product, body.search) .product-card__bottom .product-card__price del {
  flex: 0 0 100%; order: -1;                 /* eigen regel, bovenaan */
  font-size: 13px; font-weight: 400; color: var(--bss-muted); text-decoration: line-through;
}
:is(.tax-product_cat, .tax-product_brand, .post-type-archive-product, body.search) .product-card__bottom .product-card__price ins {
  text-decoration: none;
}

/* Status-badges compacter in de smalle archief/zoek-fotokolom (~110px) — altijd één regel. */
:is(.tax-product_cat, .tax-product_brand, .post-type-archive-product, body.search) .product-card__badges {
  top: 6px; left: 6px; gap: 4px;
}
:is(.tax-product_cat, .tax-product_brand, .post-type-archive-product, body.search) .product-card__badge {
  font-size: 10px; padding: 3px 9px; border-radius: 5px;
}

/* Content-breedte gelijk aan de chrome (1440 boxed) → "nav breder dan pagina" weg.
   De category/archive/search-content zat in .container (1280) = smaller dan de header. */
.tax-product_cat .site-main > .container,
.tax-product_brand .site-main > .container,
.post-type-archive-product .site-main > .container,
body.search .site-main > .container,
.tax-product_cat .breadcrumb .container,
.tax-product_brand .breadcrumb .container,
.post-type-archive-product .breadcrumb .container,
body.search .breadcrumb .container {
  max-width: none;
  width: 100%;
  padding-left: max(24px, calc((100% - 1440px) / 2));
  padding-right: max(24px, calc((100% - 1440px) / 2));
}

/* SEO-tekstblok onderaan de categoriepagina ("Lees meer" scrollt hierheen) + herhaalde subcat-nav (klantfeedback 01-07) */
.category-seo { margin: 48px 0 8px; padding-top: 32px; border-top: 1px solid var(--bss-line); scroll-margin-top: 90px; }
.category-seo .category-tabs { margin-bottom: 20px; }
.category-seo__title { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 22px; color: var(--bss-ink); margin: 0 0 12px; } /* platte-tekst-titel in Inter, niet Faktum (klantfeedback 08-07) */
.category-seo__text { color: var(--bss-body); font-size: 15px; line-height: 1.7; max-width: 900px; overflow-wrap: break-word; }
.category-seo__text p { margin: 0 0 12px; }
/* Duidelijke, aflopende koptekst-hiërarchie in de SEO-tekst: kleiner dan de paginatitel
   (30px) en steeds kleiner h1>h2>h3 — base-theme zette h2 op 32px (groter dan de h1)
   (klantfeedback 08-07). Inter, geen uppercase/letterspacing. */
.category-seo__text :is(h1, h2, h3, h4) {
  font-family: 'Inter', sans-serif;
  color: var(--bss-ink);
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.3;
  margin: 24px 0 8px;
}
.category-seo__text h1 { font-size: 22px; font-weight: 700; }
.category-seo__text h2 { font-size: 18px; font-weight: 600; }
.category-seo__text h3 { font-size: 16px; font-weight: 600; }
.category-seo__text h4 { font-size: 15px; font-weight: 600; }
.category-seo__text :is(h1, h2, h3, h4):first-child { margin-top: 0; }