/* ============================================================
   META Shop — Listing / Facetten (Paket P7)
   Ergänzt site.css (.catalog/.sidebar/.facet/.pcard sind dort definiert).
   Hier NUR neue P7-Elemente: Scope-Intro, aktive-Filter-Chips,
   Facetten-"mehr", S3-Badge, Pagination, Mobile-Filter-Drawer.
   Tokens (--red, --panel, --line, --muted, --r*, --sh*) aus site.css.
   ============================================================ */

/* ---------- Scope-Intro (Kategorie-/System-Beschreibung über dem Grid) ---------- */
.listing-intro{
  color:var(--muted-2);
  max-width:72ch;
  margin:.2rem 0 1.4rem;
  font-size:var(--fs-md);
  line-height:1.6;
}

/* ---------- Aktive Filter (Chips) ---------- */
.active-filters{
  display:flex;flex-wrap:wrap;gap:.5rem;
  margin:0 0 1.3rem;
}
.active-filters[hidden]{display:none}
.chip{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.4rem .35rem .4rem .75rem;
  border-radius:999px;
  border:1px solid var(--line-2);
  background:var(--panel-2);
  color:var(--muted-2);
  font-size:var(--fs-sm);font-weight:var(--fw-medium);
  cursor:pointer;
  transition:.18s var(--ease);
}
.chip svg{
  width:15px;height:15px;border-radius:50%;padding:1px;
  background:rgba(0,0,0,.04);color:var(--muted);
  transition:.18s var(--ease);
}
.chip:hover{border-color:var(--red);color:var(--text)}
.chip:hover svg{background:var(--red);color:#fff}
.chip-clear{
  padding-inline:.85rem;
  background:transparent;border-color:transparent;color:var(--muted);
  text-decoration:underline;text-underline-offset:3px;
}
.chip-clear:hover{color:var(--text);background:transparent;border-color:transparent}

/* ---------- Facetten-"mehr/weniger anzeigen" ---------- */
.facet-more{
  margin-top:.45rem;
  background:none;border:none;
  color:var(--red-text);font-size:var(--fs-sm);font-weight:var(--fw-semibold);  /* Q4: AA-Kontrast für kleinen Rot-Text */
  cursor:pointer;padding:.2rem .35rem;border-radius:6px;
}
.facet-more:hover{color:var(--red-text);text-decoration:underline;text-underline-offset:2px}

/* ---------- S3-Sicherheitsbadge auf der Karte ---------- */
.s3-badge{
  position:absolute;top:10px;left:10px;z-index:2;
  display:inline-grid;place-items:center;
  min-width:30px;height:22px;padding:0 .45rem;
  border-radius:6px;
  background:var(--red);color:#fff;
  font-family:'Sora',sans-serif;font-weight:var(--fw-bold);font-size:var(--fs-2xs);letter-spacing:var(--ls-caps);
  box-shadow:var(--sh-1);
}

/* ---------- Familien-Karte: Varianten-Badge, Oberflächen-Swatches, Konfig-CTA ----------
   Katalog-Konsolidierung: eine Karte je Familie. Diese Elemente ergänzen .pcard (site.css). */
/* Overlap-Fix 2026-07-19 (Ludwig-Feedback, gleiche Ursache wie .rank auf der Startseite):
   Varianten-Badge lag deckungsgleich unter dem Merken-Herz (.pcard-merk top:8px/right:8px, ~34px).
   Herz bleibt oben rechts, Badge weicht nach links daneben aus (right = 34 + 8 + 6 Gap = 48px). */
.pcard-variants{
  position:absolute;top:10px;right:48px;z-index:2;
  display:inline-flex;align-items:center;
  height:22px;padding:0 .5rem;
  border-radius:6px;
  background:var(--panel-2);color:var(--muted-2);/* P4: entglast — .s3-badge bleibt einziger Signalpunkt auf der Kachel (muted-2 auf panel-2 = AA) */
  font-size:var(--fs-2xs);font-weight:var(--fw-semibold);
  border:1px solid var(--line-2);
}
/* Oberflächen-Swatches (aus finish_options) */
.pcard-finishes{display:flex;align-items:center;gap:.3rem;margin-top:.5rem}
.pcard-finishes .fsw{
  width:14px;height:14px;border-radius:50%;
  background:var(--fc,#9aa6b8);
  box-shadow:0 0 0 1px rgba(255,255,255,.18) inset, 0 0 0 1px rgba(0,0,0,.25);
}
.pcard-finishes .fsw-more{color:var(--muted);font-size:var(--fs-xs);font-weight:var(--fw-semibold);margin-left:.1rem}
/* Preis-Spanne "bis …" */
.pcard-price .upto{font-size:var(--fs-xs);color:var(--muted-2);font-weight:var(--fw-medium)}
/* Konfigurator-CTA (Link statt Warenkorb-Button bei Mehr-Varianten-Familien) */
.pcard-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.55rem .85rem;border-radius:var(--r);min-height:44px;/* Visual-Audit 2026-07-06 (#19): 44px Touch-Ziel wie .pcard-add */
  white-space:normal;text-align:center;font-size:var(--fs-ms);font-weight:var(--fw-semibold);
}
.pcard-cta svg{flex:0 0 auto}

/* ---------- Pagination ---------- */
.pager{flex-direction:column;gap:.7rem}
.pager-nav{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.35rem;
}
.pager-btn{
  min-width:40px;height:40px;padding:0 .6rem;
  display:inline-grid;place-items:center;
  border-radius:var(--r);
  border:1px solid var(--line-2);
  background:var(--panel);
  color:var(--muted-2);
  font-weight:var(--fw-semibold);font-size:var(--fs-base);
  cursor:pointer;
  transition:.18s var(--ease);
}
.pager-btn:hover:not(:disabled):not(.is-active){
  border-color:var(--line-2);background:var(--panel-2);color:var(--text);/* Design-Refresh 2026-07-16 P6: Hover ortsfest (translateY entfernt) */
}
.pager-btn.is-active{
  background:var(--red);border-color:var(--red);color:#fff;
  box-shadow:var(--sh-red);cursor:default;
}
.pager-btn:disabled{opacity:.4;cursor:not-allowed}
.pager-gap{padding:0 .2rem;color:var(--muted);user-select:none}
.pager-info{color:var(--muted);font-size:var(--fs-ms);text-align:center}

/* ---------- P3 (Audit 2026-07-05): Kategorie-Wähler (Verteiler) + Sortier-Label ---------- */
.cat-chooser{display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 1.5rem}
/* Design-Refresh 2026-07-16 P6: an category.css:61 angeglichen (flaches Panel, neutraler Hover; translateY(-2px) ist die dokumentierte Chip-Ausnahme) */
.cat-chip{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1rem;border-radius:999px;
  border:1px solid var(--line-2);background:var(--panel);color:var(--text);font-weight:var(--fw-semibold);font-size:var(--fs-sm);
  transition:.16s var(--ease,ease)}
.cat-chip:hover{color:var(--text);border-color:var(--line-2);transform:translateY(-2px);box-shadow:var(--sh-2)}
.cat-chip-count{color:var(--muted);font-weight:var(--fw-medium);font-size:var(--fs-ms)}
.sort-label{color:var(--muted);font-size:var(--fs-base);font-weight:var(--fw-medium)}
/* P3: reichhaltigerer Empty-State (Wunschmaß-CTA). .empty ist in site.css als flex-column zentriert. */
.empty-title{font-family:'Sora',sans-serif;font-weight:var(--fw-bold);font-size:var(--fs-xl);color:var(--text)}
.empty-hint{max-width:46ch;color:var(--muted);margin:0}
.empty-actions{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center}

/* ---------- Mobile-Filter-Umschalter (Drawer) ---------- */
.filter-toggle{display:none}              /* Desktop: Sidebar dauerhaft sichtbar */
.filter-toggle span{font-weight:600}
/* P2 (Audit 2026-07-05): aktiv-Zähler-Badge am Filter-Button (nur mobil sichtbar, da der Button dort erscheint). */
.filter-count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;margin-left:.15rem;
  border-radius:999px;background:var(--red);color:#fff;font-size:var(--fs-2xs);font-weight:var(--fw-bold);line-height:var(--lh-caps)}

@media (max-width:900px){
  .filter-toggle{display:inline-flex;order:-1}
  /* A1 (UX-Scout 2026-07-14): der Sticky-Balken hing im KURZEN Parent .catalog-head (Geschwister
     von .catalog-body) und löste sich nach wenigen px. display:contents hebt die Head-Kinder in
     den main.catalog-Kontext → .catalog-tools klebt über die GANZE Ergebnisliste. Scoped auf
     [data-listing], damit der .catalog-head anderer Seiten (category.html „Beliebte Artikel")
     sein Flex-Layout behält. Scroll-Ziel-Folge in catalog.js gotoPage() mitgezogen
     (display:contents-Elemente haben keine Box für scrollIntoView). */
  [data-listing] .catalog-head{display:contents}
  [data-listing] .catalog-head>div:first-child{margin-bottom:.7rem}
  /* P2: Filter-/Sortierleiste beim Scrollen der Ergebnisse oben andocken (mit aktiv-Badge sichtbar). */
  .catalog-tools{position:sticky;top:var(--header-h);z-index:20;background:var(--ink);/* Visual-Audit 2026-07-06 (#47/#21): unter dem 72px-Sticky-Header andocken statt dahinter zu verschwinden */
    padding:.55rem 0;margin-bottom:.4rem;border-bottom:1px solid var(--line)}
  /* Sidebar standardmäßig eingeklappt; per Button aufklappen */
  .catalog-body .sidebar{display:none}
  .catalog-body.filters-open .sidebar{
    display:block;
    grid-template-columns:none;
    margin-bottom:1.2rem;
    animation:facet-in .25s var(--ease-out);
  }
  @keyframes facet-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
}