/* ============================================================================
   fs-mostwanted.css — "FOGSMOKE Most Wanted"
   ----------------------------------------------------------------------------
   Angelegt 21.08.2026, Sitzung MOSTWANTED. Auftrag Yunus: ein Produktkarussell
   direkt unter dem Geschmacksfinder ("FINDE DEINEN GESCHMACK!").

   BESITZ: Diese Datei gehoert der Sitzung MOSTWANTED. Sie ist neu und wird von
   keiner anderen Sitzung beschrieben — deshalb kein Splice-Protokoll noetig.
   Rollback = Datei loeschen + Zeile aus template.xml + Aufruf in page/index.tpl.

   GELTUNGSBEREICH: alles haengt an .fs-mw. Kein einziger Selektor greift
   ausserhalb des Abschnitts.

   WAS HIER BEWUSST *NICHT* STEHT: Regeln fuer die Produktkarte selbst.
   Die Karte ist 'productlist/item_box.tpl' und soll ueberall gleich aussehen
   (Vorgabe Yunus). Die Schiene traegt dafuer die Klasse 'carousel' — damit
   greift die bereits vorhandene, abgestimmte Hoehen- und Container-Query-Kette
   aus custom.css (.carousel .productbox ...), statt sie hier zu duplizieren.
   Slick wird dadurch NICHT aktiv: JTL initialisiert Slider ueber die Klasse
   .slick-lazy, nicht ueber .carousel (geprueft in js/jtl.evo.js).

   Farben nach dem verbindlichen Farbsystem:
     Kopf/Text #111114 · Magenta als TEXT #c90f88 (5,37:1) · Kanten #d9d9de
   ============================================================================ */

.fs-mw {
    --fs-mw-ink:      #111114;
    --fs-mw-ink-weich:var(--brand-grau-tief);
    --fs-mw-akzent:   #c90f88;   /* Magenta, textsicher */
    --fs-mw-kante:    #d9d9de;
    --fs-mw-abstand:  16px;
    --fs-mw-spalten:  4;
}

/* ---------------------------------------------------------------------------
   1 — KOPFZEILE
   Titel und Unterzeile links, die beiden Pfeile rechts auf gleicher Grundlinie.
   --------------------------------------------------------------------------- */

.fs-mw-kopf {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: clamp(18px, 2vw, 28px);
}

.fs-mw-kopf-text {
    min-width: 0;
}

.fs-mw-titel {
    margin: 0;
    color: var(--fs-mw-ink);
    font-family: "FS Display", "FS Text", "Arial Narrow", sans-serif;
    font-size: clamp(28px, 3.2vw, 48px);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: .015em;
    text-transform: uppercase;
}

.fs-mw-titel .fs-mw-akzent {
    color: var(--fs-mw-akzent);
}

.fs-mw-sub {
    margin: 10px 0 0;
    color: var(--fs-mw-ink-weich);
    font-size: 15px;
    line-height: 1.45;
}

/* ---------------------------------------------------------------------------
   2 — PFEILE
   Kantig wie der Rest des Redesigns (Radius 0), 2px schwarze Kante.
   Ohne JavaScript bleiben sie unsichtbar — dann traegt die Schiene sich selbst
   (wischen/scrollen), und ein toter Knopf waere schlechter als keiner.
   --------------------------------------------------------------------------- */

.fs-mw-nav {
    display: none;
    flex: 0 0 auto;
    gap: 8px;
}

.fs-mw-nav.is-bereit {
    display: flex;
}

.fs-mw-pfeil {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 2px solid var(--fs-mw-ink);
    border-radius: 0;
    background: #fff;
    color: var(--fs-mw-ink);
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease, opacity .16s ease;
}

.fs-mw-pfeil:hover:not(:disabled),
.fs-mw-pfeil:focus-visible:not(:disabled) {
    background: var(--fs-mw-ink);
    color: #fff;
}

.fs-mw-pfeil:focus-visible {
    outline: 2px solid var(--fs-mw-akzent);
    outline-offset: 2px;
}

.fs-mw-pfeil:disabled {
    border-color: var(--fs-mw-kante);
    color: var(--fs-mw-kante);
    cursor: default;
}

/* ---------------------------------------------------------------------------
   3 — SCHIENE
   Ein Raster in einer Spalte pro Karte, waagerecht scrollbar mit Rasterpunkten.
   Funktioniert vollstaendig ohne JavaScript.
   --------------------------------------------------------------------------- */

.fs-mw-schiene {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc(
        (100% - (var(--fs-mw-spalten) - 1) * var(--fs-mw-abstand)) / var(--fs-mw-spalten)
    );
    gap: var(--fs-mw-abstand);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* Platz fuer Karten-Hover (Lift + Schatten), sonst schneidet der Scroll-
       Container die Kante ab. Das scroll-padding muss dem seitlichen Innenrand
       entsprechen: sonst rastet die erste Karte bei scrollLeft = 4 statt 0 ein
       und der Zurueck-Pfeil steht beim Laden faelschlich aktiv (gemessen). */
    padding: 4px 4px 10px;
    margin: -4px -4px 0;
    scroll-padding: 0 4px;
    scrollbar-width: none;
}

.fs-mw-schiene::-webkit-scrollbar {
    display: none;
}

.fs-mw-schiene:focus-visible {
    outline: 2px solid var(--fs-mw-akzent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .fs-mw-schiene { scroll-behavior: auto; }
}

.fs-mw-karte {
    display: flex;
    flex-direction: column;
    min-width: 0;
    scroll-snap-align: start;
}

/* Die Karte fuellt die Zelle; die Hoehen-Kette aus custom.css (.carousel ...)
   richtet Preis-, Kauf- und Statuszeile danach untereinander aus. */
.fs-mw-karte > .productbox {
    flex: 1 1 auto;
}

/* ---------------------------------------------------------------------------
   4 — RANGZEILE
   Der Auftrag heisst "die 5" — also wird die Reihenfolge auch sichtbar.
   Die Zahl steht UEBER der Karte, nicht darauf: so verdeckt sie weder das
   Produktbild noch die Sale-/Neu-Fahnen, die JTL oben links einblendet.
   Platz 1 bekommt als einziger den Magenta-Akzent.
   --------------------------------------------------------------------------- */

.fs-mw-rangzeile {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.fs-mw-rang {
    color: var(--fs-mw-ink);
    font-family: "FS Display", "FS Text", "Arial Narrow", sans-serif;
    font-size: 17px;
    line-height: 1;
    letter-spacing: .06em;
}

.fs-mw-strich {
    flex: 1 1 auto;
    height: 2px;
    background: var(--fs-mw-ink);
}

.fs-mw-karte:first-child .fs-mw-rang { color: var(--fs-mw-akzent); }
.fs-mw-karte:first-child .fs-mw-strich { background: var(--fs-mw-akzent); }

/* ---------------------------------------------------------------------------
   5 — BREITEN
   Wieviele Karten gleichzeitig im Bild stehen. Die gebrochenen Werte lassen
   die naechste Karte angeschnitten stehen — das ist der Hinweis, dass es
   weitergeht, und ersetzt die ausgeblendete Bildlaufleiste.
   --------------------------------------------------------------------------- */

@media (max-width: 1199.98px) {
    .fs-mw { --fs-mw-spalten: 3; }
}

@media (max-width: 991.98px) {
    .fs-mw { --fs-mw-spalten: 2.5; }
}

@media (max-width: 767.98px) {
    .fs-mw {
        --fs-mw-spalten: 1.6;
        --fs-mw-abstand: 12px;
    }
    /* Auf dem Handy wird gewischt — die Pfeile kosten dort nur Platz. */
    .fs-mw-nav.is-bereit { display: none; }
    .fs-mw-kopf { margin-bottom: 16px; }
    .fs-mw-sub { font-size: 14px; margin-top: 8px; }
    .fs-mw-rang { font-size: 15px; }
}

@media (max-width: 400px) {
    .fs-mw { --fs-mw-spalten: 1.35; }
}

/* ---------------------------------------------------------------------------
   NACHTRAG 30.08.2026, Sitzung LISTENANSICHT (Ansage Yunus: "kopiere auch
   den bild abschnitt bitte 1 zu 1 aus der kategorieansicht" + "warenkorb
   und mengenwaehler sind auch nicht identisch"):
   Mobil bekommt die Karte EXAKT die Breite der Kategorie-Rasterkarte —
   (100vw - 61px) / 2, an zwei Viewports gemessen (390 -> 164.5, 360 ->
   149.5). Damit sind Bildquadrat, Mengenwaehler (98px) und Warenkorb-
   Knopf (45px) automatisch identisch zur Kategorieseite; die
   Spaltenzahl-Rechnung (--fs-mw-spalten) gilt mobil nicht mehr.
   --------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .fs-mw-schiene {
        grid-auto-columns: calc((100vw - 61px) / 2);
    }
}