/* category_v2.css — Kategorieseite (menu_list.php) + PLP (product_list.php) Redesign.
   Nutzt dieselben Design-Tokens wie newhome.css (--navy/--pink/--muted/--line/--soft),
   die ueber $_useNewHome bereits global geladen sind. Nur auf TEST aktiv geschaltet
   (menu_list.php/product_list.php includes gated per Feature-Flag). */

/* Einheitliche Ueberschriften (Bugreport 2026-09-23 "Headlines stimmen nicht
   ueberein"): styles.css setzt sitieweit h1{20px}/h2{18px} (Raleway-Aera-Reste),
   .section-heading h2 (Startseite-Muster) ueberschreibt das gezielt auf 31px -
   ausserhalb dieses Wrappers (bare "Haeufige Fragen" h2, Seiten-H1) bleibt es
   bei den zu kleinen Legacy-Groessen. Hier fuer alle Content-Ueberschriften auf
   menu_list.php/product_list.php/product.php vereinheitlicht. */
h1 { font-family: "Barlow Condensed", Arial, sans-serif; font-weight: 700; color: var(--navy); font-size: 34px; line-height: 1.05; margin: 0 0 10px; }
h2 { font-family: "Barlow Condensed", Arial, sans-serif; font-weight: 700; color: var(--navy); font-size: 31px; line-height: 1; margin: 0 0 10px; }
h3 { font-family: "Barlow Condensed", Arial, sans-serif; font-weight: 700; color: var(--navy); font-size: 21px; line-height: 1.1; margin: 0 0 8px; }


/* Breadcrumb bekommt eine eigene, kompakte .section (weisses Panel wie die
   Startseite), statt des alten .ma-container Box-Panels aus breadcrumbs.php
   (sitewide genutzt) - hier gezielt nur innerhalb dieser Section zuruecksetzen. */
.breadcrumb-section { padding: 12px 20px; }
.breadcrumb-section .ma-container:has(> .breadcrumbs) {
  background: none;
  box-shadow: none;
  border: none !important;
  border-radius: 0;
  margin: 0;
  padding: 0;
}
.breadcrumbs {
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  line-height: normal;
}
/* Legacy .breadcrumbs ul{height:12px} war kleiner als die eigene Zeilenhoehe
   (Bugreport 2026-09-23 "Cheerleading unten abgeschnitten") - Buchstaben mit
   Unterlaenge (g/y/...) wurden dadurch geclippt. */
.breadcrumbs ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; height: auto; line-height: 1.6; font-size: 13px; color: var(--muted); }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--pink); }

.cv2-header h1 { margin: 0 0 10px; }
/* Legacy .ma-newproductslider-title (PLP-Titelbalken) hatte eine graue
   Textur-Hintergrundgrafik + graue Schrift/Padding (pro-title.jpg) - passt
   nicht zum Rest des Redesigns, hier zurueckgesetzt. */
.ma-newproductslider-title {
  background: none;
  padding: 0;
  margin: 0 0 16px;
}
.ma-newproductslider-title h1,
.ma-newproductslider-title h2 {
  color: var(--navy);
  font-family: "Barlow Condensed", Arial, sans-serif;
  font-size: 34px;
  padding: 0;
  margin: 0;
}
.cv2-header .cv2-intro { color: var(--muted); font-size: 15px; line-height: 1.5; max-width: 760px; margin: 0 0 4px; }
.cv2-header .cv2-banner { width: 100%; max-height: 260px; object-fit: cover; border-radius: 4px; margin: 14px 0 0; }
.cv2-header .btn { margin-top: 10px; }

.subcategory-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 980px) { .subcategory-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) { .subcategory-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

.subcategory-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: #fff;
  text-decoration: none;
  transition: all .2s;
}
.subcategory-card:hover { border-color: var(--pink); box-shadow: 0 8px 24px rgba(237,11,135,.1); }
.subcategory-card img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--soft); }
.subcategory-card span {
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.subcategory-card span em { font-style: normal; color: var(--pink); }

.category-product-section .section-heading h2 { font-family: "Barlow Condensed", Arial, sans-serif; font-weight: 700; color: var(--navy); margin: 0; }
.category-product-section .section-heading a { color: var(--pink); font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap; }
.category-product-section .section-heading a:hover { text-decoration: underline; }
/* newhome.css blendet .section-heading>a im Mobil-Breakpoint sitieweit aus
   (fuer die Startseite gedacht) - trifft hier ungewollt auch "Alle ansehen"
   (Bugreport 2026-09-23 "fehlt in responsive"). */
.category-product-section .section-heading > a { display: flex !important; }

.product-card-v2-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 980px) { .product-card-v2-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) {
  .product-card-v2-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; overflow-x: visible; }
}

.product-card-v2 {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  overflow: hidden;
  transition: border-color .2s;
}
.product-card-v2:hover { border-color: var(--pink); }
.product-card-v2 a.pcv2-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; }
.product-card-v2 .pcv2-image { position: relative; }
.product-card-v2 img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--soft); }
.product-card-v2 .pcv2-badge {
  position: absolute; top: 8px; left: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 3px; color: #fff; background: var(--navy);
}
.product-card-v2 .pcv2-badge.sale { background: var(--pink); }
.product-card-v2 .pcv2-badge.neu { background: var(--turquoise); }
.product-card-v2 .pcv2-body { padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.product-card-v2 .pcv2-name { font-size: 14px; font-weight: 600; color: var(--navy); margin: 0; }
.product-card-v2 .pcv2-price strong { font-size: 17px; font-family: "Barlow Condensed", Arial, sans-serif; font-weight: 700; color: var(--navy); }
.product-card-v2 .pcv2-price s { font-size: 13px; color: var(--muted); margin-left: 6px; }

.category-trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 22px 28px;
}
.category-trust-strip .cts-item { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--navy); font-weight: 600; }
.category-trust-strip .cts-item svg { color: var(--pink); flex-shrink: 0; }

.category-content { color: var(--ink, #142437); font-size: 15px; line-height: 1.6; }
.category-content h2 { font-family: "Barlow Condensed", Arial, sans-serif; color: var(--navy); margin-top: 0; }

/* PLP Toolbar (echte Markup-Klassen aus product_list_tools.php) — vereinheitlicht:
   native <select> (Artikel pro Seite / Sortierung) bekommen dieselbe Pille wie
   die .filter-dropdown-toggle Buttons (Farbe/Größe), Pagination als Pill statt
   Legacy-Float. Mobil: alles stapelt sauber, groessere Touch-Targets (44px). */
.toolbar,
body.nh-home-active .toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 0 !important; background: none !important; border: none !important; box-shadow: none !important;
}
/* Toolbar-Section kompakter als andere .section-Panels (Bugreport 2026-09-23
   "zu viel Abstand vom Rand zu den Elementen"). */
.section:has(> .toolbar) { padding: 10px 16px; }
.toolbar .pager { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; width: 100%; padding: 0; height: auto; }
/* Pager IMMER als letztes Element rendern (order:99), NICHT nur mobil - sonst
   haengt margin-left:auto am ERSTEN Kind (DOM-Reihenfolge: Pager kommt vor
   Limiter/Filter) und schiebt bei jeder Aenderung der Pager-Breite (z.B. wenn
   ein Farbfilter auf 1 Seite reduziert und die Seitenzahlen verschwinden) die
   GESAMTE Gruppe sichtbar nach links (Bugreport 2026-09-23 "Elemente springen
   nach links"). Mit order:99 bleibt der Pager als letztes, unabhaengiges
   Element stabil rechtsbuendig, Limiter/Filter bleiben unveraendert links. */
.toolbar .js-pager.pages { order: 99; margin: 0 0 0 auto; float: none; }
.toolbar .js-pager.pages ol { display: flex; list-style: none; margin: 0; padding: 0; gap: 4px; }
.toolbar .js-pager.pages a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; border-radius: 6px; border: 1px solid var(--line);
  color: var(--navy); font-weight: 600; font-size: 13px; text-decoration: none;
}
.toolbar .js-pager.pages a.current { background: var(--navy); border-color: var(--navy); color: #fff; }
.toolbar .js-pager.pages a:hover { border-color: var(--pink); }
/* Legacy .pager .limiter{float:left;margin:7px 0 5px 10px} (styles.css) hatte
   die native <select>-Variante verschoben (Bugreport 2026-09-23 "erste Zeile
   noch verschoben") - Artikel-pro-Seite/Sortierung nutzen inzwischen dasselbe
   .filter-dropdown-Muster wie Farbe/Groesse (Bugreport 2026-09-23 "Selektor
   Reihenfolge wie Farbe/Groesse handhaben"), betrifft diese Regel nicht mehr. */
.toolbar .filter-dropdown-toggle { min-height: 36px; }

@media (max-width: 680px) {
  .toolbar { padding: 0 !important; gap: 8px; }
  /* Grid statt flex-wrap+calc(50%): garantiert 2 GLEICH breite Spalten,
     unabhaengig von Inhaltslaenge (Bugreport 2026-09-23 "unterschiedliche
     Breite" - lange Select-Texte wie "Neueste zuerst" sprengten vorher ihre
     50%-Spalte und rutschten in eine eigene volle Zeile, waehrend kuerzere
     Filter wie "Farbe"/"Groesse" brav nebeneinander blieben). */
  .toolbar .pager { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  /* Explizite Zellen per Kindposition statt Auto-Placement (Bugreport
     2026-09-23: Auto-Placement verrutschte, weil der Pager trotz order:99
     wegen seiner expliziten grid-column als "teilweise positioniertes" Item
     VOR den Auto-Items platziert wird - Grid-Spec-Eigenheit, order wirkt dort
     nicht). DOM-Reihenfolge im Markup: Pager, Limit, Sortierung, Farbe, Groesse
     (alle .filter-dropdown seit dem Umbau auf das einheitliche Dropdown-Muster). */
  .toolbar .pager > :nth-child(2) { grid-column: 1; grid-row: 1; }
  .toolbar .pager > :nth-child(3) { grid-column: 2; grid-row: 1; }
  .toolbar .pager > :nth-child(4) { grid-column: 1; grid-row: 2; }
  .toolbar .pager > :nth-child(5) { grid-column: 2; grid-row: 2; }
  .toolbar .filter-dropdown { min-width: 0; }
  .toolbar .filter-dropdown-toggle { width: 100%; min-height: 44px; }
  .toolbar .js-pager.pages {
    grid-column: 1 / -1; grid-row: 3; order: 99;
    width: 100%; justify-content: center; margin-left: 0; margin-top: 4px;
  }
  .toolbar .js-pager.pages a { min-width: 38px; height: 38px; }
  .toolbar .filter-dropdown-panel { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; max-height: 60vh; }
}

/* PLP Filter/Toolbar (Legacy-Vorbereitung, aktuell ungenutzt) */
.plp-toolbar-v2 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 4px 0 18px; }
.plp-toolbar-v2 .pt-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border: 1px solid var(--line); border-radius: 20px;
  font-size: 13px; font-weight: 600; color: var(--navy); background: #fff;
  cursor: pointer; user-select: none; transition: all .15s;
}
.plp-toolbar-v2 .pt-chip:hover { border-color: var(--pink); }
.plp-toolbar-v2 .pt-chip.active { background: var(--navy); border-color: var(--navy); color: #fff; }
.plp-toolbar-v2 .pt-chip .swatch { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); display: inline-block; }
.plp-toolbar-v2 .pt-clear { font-size: 13px; color: var(--muted); text-decoration: underline; cursor: pointer; }
.plp-toolbar-v2 .pt-count { font-size: 13px; color: var(--muted); margin-left: auto; }