/* =====================================================================
   BongoBong — Rasta Design · FlexNav-Skin
   Ziel: templates/Sweet/themes/sweet/bb-rasta-flexnav.css
   Lädt NACH plugins/bb_frontend/frontend/css/flexnav.css (Enqueue in
   Sweet/layout/header.tpl). Doppelte Klasse = gewinnt sicher gegen die
   Token-Defaults des Plugins, egal in welcher Load-Order.

   Warum nötig: flexnav.css fällt auf bb-hiphop-Tokens zurück
   (--bb-accent #ff7a33 Orange, --bb-dark Rail). bb-rasta.css definiert
   diese nicht mehr → ohne Skin würde FlexNav orange/dunkel rendern.
   Kein Markup-Eingriff: reine Token-Umbelegung + 3 Licht-Rail-Korrekturen.
   ===================================================================== */

.bb-fn.bb-fn,
.bb-fn-m.bb-fn-m {
  /* Rail: hell (Dummy-Header: Off-White, Mono-Ink-Labels) statt Dark-Crate */
  --bbfn-rail-bg: #fdfcf7;                 /* --bb-bg */
  --bbfn-rail-bg-2: #f5f2e7;               /* --bb-bg-2 */
  --bbfn-rail-fg: #17150e;                 /* --bb-ink */
  --bbfn-rail-fg-dim: rgba(23, 21, 14, .62);
  --bbfn-accent: #178a41;                  /* Rasta-Grün: Marker, Hover, Wipe */

  /* Panel: weißes Paper-Sheet mit warmem Sekundärton (Dummy .rmega) */
  --bbfn-panel-bg: #ffffff;                /* --bb-surface */
  --bbfn-panel-bg-2: #f5f2e7;              /* --bb-bg-2 */
  --bbfn-ink: #17150e;
  --bbfn-ink-soft: #514b3c;                /* --bb-ink-2 */
  --bbfn-line: #e2ddcc;                    /* solide Variante von --bb-line */
  --bbfn-radius: 16px;                     /* --bb-radius */
  --bbfn-shadow: 0 1px 2px rgba(23, 21, 14, .05), 0 24px 56px -24px rgba(23, 21, 14, .35);

  /* Welt-Label (SHISHA/VAPE-Gruppen): Gold auf heller Rail */
  --bb-fn-world-color: #b8860a;            /* abgedunkeltes --bb-y für Kontrast auf hell */
  --bb-fn-world-bg: rgba(23, 21, 14, .04);
  --bb-fn-world-border: rgba(23, 21, 14, .14);

  --bbfn-mono: "Space Mono", ui-monospace, "Cascadia Mono", monospace;
  --bbfn-body: "Hanken Grotesk", "IBM Plex Sans", system-ui, sans-serif;
}

/* Licht-Rail-Korrekturen (Werte, die in flexnav.css nicht tokenisiert sind) */

/* 1. Rail-Unterkante: Rasta-Streifen statt harter Dark-Kante (Dummy .rs-undernav) */
.bb-fn.bb-fn { position: relative; border-bottom: 0; }
.bb-fn.bb-fn::after {
  content: ""; display: block; height: 3px;
  background: linear-gradient(90deg, #178a41 0 33.34%, #eab00e 33.34% 66.67%, #d8402c 66.67% 100%);
}

/* 2. Featured-Entry (Sale): Rot statt Accent-Badge-Gelbstich */
.bb-fn.bb-fn .bb-fn-entry--featured > .bb-fn-entry__link { color: #d8402c; }
.bb-fn.bb-fn .bb-fn-entry__badge { background: #d8402c; color: #fff; border-radius: 999px; }

/* 3. Drawer-Backdrop auf Ink statt Schwarz-Braun */
.bb-fn--js.bb-fn--drawer-open::before,
.bb-fn-m.bb-fn-m--open::before { background: rgba(23, 21, 14, .45); }

/* Mobile-Drawer: weiße Karten bleiben (bereits #fff hart), Akzent-Ringe erben --bbfn-accent. */

/* =====================================================================
   Kistendeckel-Ausbau (Tier A, 2026-07-15, Owner-Freigabe)
   Rasta-Spalten-Rotation · Icon-Kacheln (geforgte webp bleiben, Rasta rahmt) ·
   farbige, wachsende Spaltenkopf-Unterstriche · Tri-Color-Panel-Wipe ·
   engere Abstände. REINE CSS-Schicht auf der Live-Struktur (showIcons ist an).
   Prinzip: --bbfn-accent je Spalte neu binden → Unterstrich, Icon-Ring und
   Link-Hover der Spalte übernehmen die Farbe (Grün→Gold→Rot, positionell).
   ===================================================================== */

/* 1 · Rasta-Rotation je Spalte (Index-Archetyp) */
.bb-fn-panel .bb-fn-index__group:nth-child(3n+2){ --bbfn-accent:#eab00e; }
.bb-fn-panel .bb-fn-index__group:nth-child(3n){   --bbfn-accent:#d8402c; }
/* Karten- und Bildraster-Archetypen (BONGSHOP, Random Fun) rotieren im Hover mit */
.bb-fn-cards .bb-fn-card:nth-child(3n+2),
.bb-fn-imagegrid .bb-fn-imgtile:nth-child(3n+2){ --bbfn-accent:#eab00e; }
.bb-fn-cards .bb-fn-card:nth-child(3n),
.bb-fn-imagegrid .bb-fn-imgtile:nth-child(3n){   --bbfn-accent:#d8402c; }

/* 2 · Icon-Kachel: geforgtes Symbol in rasta-getönter, gerundeter Kachel + Ring */
.bb-fn-index__head--icon .bb-fn-index__icon{
  width:46px; height:46px; padding:5px; border-radius:12px; overflow:hidden;
  background:color-mix(in srgb, var(--bbfn-accent) 13%, #fff);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--bbfn-accent) 34%, transparent);
  transition:transform .18s var(--bbfn-ease), background .16s, box-shadow .16s;
}
.bb-fn-index__head--icon .bb-fn-index__icon img{ width:100%; height:100%; object-fit:contain; }
.bb-fn-index__group:hover .bb-fn-index__head--icon .bb-fn-index__icon{
  background:color-mix(in srgb, var(--bbfn-accent) 20%, #fff);
  box-shadow:inset 0 0 0 1.5px var(--bbfn-accent);
  transform:translateY(-1px) rotate(-4deg) scale(1.03);
}
.bb-fn-index--icons .bb-fn-index__children{ padding-left:58px; }

/* 3 · Spaltenkopf-Unterstrich in Spaltenfarbe, wächst bei Hover */
.bb-fn-panel a.bb-fn-index__head{ position:relative; }
.bb-fn-panel a.bb-fn-index__head::after{
  content:""; position:absolute; left:0; bottom:-1px; height:2px; width:26px;
  background:var(--bbfn-accent); transition:width .2s var(--bbfn-ease);
}
.bb-fn-panel .bb-fn-index__group:hover a.bb-fn-index__head::after{ width:100%; }

/* 4 · Panel-Signatur: Tri-Color-Wipe statt Einfarb-Grün (nutzt Basis-Animation) */
/* Owner 2026-07-19 R6: eigene 2px-Panel-Linie entfernt — sie war duenner (2 statt 4px)
   und nur panelbreit statt viewportbreit, stand also als zweite versetzte Linie
   unter der Header-Rasta-Linie. */
.bb-fn-panel::before{ display: none; }

/* 5 · Engere Abstände (kleiner als jetzt) */
.bb-fn-panel-inner{ padding:20px 30px 26px; }
.bb-fn-cols{ gap:30px; }
.bb-fn-index{ gap:5px 26px; }
.bb-fn-index__group{ margin-bottom:11px; }
.bb-fn-index__children .bb-fn-link{ font-size:13.5px; line-height:1.5; }
.bb-fn .bb-fn-entry__link{ padding:15px 4px 15px 13px; }
.bb-fn .bb-fn-entry:not(:has(> .bb-fn-entry__toggle)) > .bb-fn-entry__link{ padding-right:13px; }

/* 6 · Mobile-Drawer: Worldcard-Akzentbalken mitrotieren (Konsistenz)
   ⚠ WAR TOT. Die beiden Zeilen standen hier seit 2026-07-19 und griffen nie:
   sie zielten mit `nth-child` auf die KARTE, aber jede Karte ist das einzige
   Kind ihres <li> im Grid — also immer nth-child(1). Live nachgemessen am
   2026-08-14: alle sechs Kanten grün, computed `--bbfn-accent` sechsmal
   #178a41. Ein positionsabhängiger Selektor kann nicht an einem Wrapper
   vorbeigreifen; deshalb liefert der Renderer die Farbe jetzt als DATUM
   (`data-bb-fn-hue`, N20-B6) — an Kachel, Weltfläche und allen Bereichsflächen
   darunter. Wer auf die goldene Kachel tippt, bleibt in Gold. */
.bb-fn-m [data-bb-fn-hue="1"] { --bbfn-accent: var(--bb-y, #eab00e); }
.bb-fn-m [data-bb-fn-hue="2"] { --bbfn-accent: var(--bb-r, #d8402c); }

/* 7 · N20-B6 · Feinschliff des mobilen Drawers
   ------------------------------------------------------------------
   Vorlage ist der vom Owner freigegebene Dummy (2026-08-14). Die Werte
   sind KEINE neuen Farben, sondern die Tokens, die live ohnehin gelten —
   am 2026-08-14 an shop2 abgelesen, nicht aus dem Repo geglaubt:
   --bb-bg #fdfcf7 · --bb-font-disp Anton (geladen) · --bb-stripe. */

/* Grundfläche: das warme Papier des Shops statt reinem Weiß. Der Drawer war
   #ffffff (--bbfn-panel-bg), während die Seite darunter #fdfcf7 trägt — im
   Übergang sah der Drawer kalt aus. */
@media (max-width: 991.98px) {
  .bb-fn-m.bb-fn-m--open .bb-fn-m__home { background: var(--bb-bg, #fdfcf7); }

  /* Die Rasta-Kante des Shops als Oberkante des Drawers: dieselbe Signatur wie
     unter der Kopfzeile, damit der Drawer als Teil des Shops liest und nicht
     als Systemfläche. 4 px wie am Header (#jtl-nav-wrapper::after). */
  .bb-fn-m.bb-fn-m--open .bb-fn-m__home::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    background: var(--bb-stripe, linear-gradient(90deg,#178a41 0 33.34%,#eab00e 33.34% 66.67%,#d8402c 66.67% 100%));
  }

  /* Anton für die Namen — im Shop trägt sie jede Überschrift. Im Drawer bisher
     nirgends, obwohl die Schrift geladen ist. Nur Namen, nicht die Zahlen:
     Anton ist eine Display-Schrift und wird in 10 px unleserlich. */
  .bb-fn-m .bb-fn-m-panel__label,
  .bb-fn-m .bb-fn-m-worldcard__name {
    font-family: var(--bb-font-disp, 'Anton', system-ui, sans-serif);
    font-weight: 400;
    letter-spacing: .01em;
    text-transform: uppercase;
  }

  .bb-fn-m .bb-fn-m-panel__label { font-size: 20px; line-height: 1.1; }
  .bb-fn-m .bb-fn-m-worldcard__name { font-size: 15px; }

  /* Staffelanimation: die Kacheln laufen der Reihe nach ein, 38 ms Versatz wie
     im Dummy. `both` hält den Startzustand, sonst blitzt die Endlage im ersten
     Frame auf. Sechs Regeln statt einer Berechnung, weil `sibling-index()` in
     den Zielbrowsern noch nicht trägt. */
  @media (prefers-reduced-motion: no-preference) {
    .bb-fn-m--open .bb-fn-m-worldgrid > li,
    .bb-fn-m--open .bb-fn-m-panel--active .bb-fn-m-panel__item {
      animation: bb-fn-m-auf 240ms cubic-bezier(.2, .7, .3, 1) both;
    }

    .bb-fn-m--open .bb-fn-m-worldgrid > li:nth-child(1),
    .bb-fn-m--open .bb-fn-m-panel--active .bb-fn-m-panel__item:nth-child(1) { animation-delay: 0ms; }
    .bb-fn-m--open .bb-fn-m-worldgrid > li:nth-child(2),
    .bb-fn-m--open .bb-fn-m-panel--active .bb-fn-m-panel__item:nth-child(2) { animation-delay: 38ms; }
    .bb-fn-m--open .bb-fn-m-worldgrid > li:nth-child(3),
    .bb-fn-m--open .bb-fn-m-panel--active .bb-fn-m-panel__item:nth-child(3) { animation-delay: 76ms; }
    .bb-fn-m--open .bb-fn-m-worldgrid > li:nth-child(4),
    .bb-fn-m--open .bb-fn-m-panel--active .bb-fn-m-panel__item:nth-child(4) { animation-delay: 114ms; }
    .bb-fn-m--open .bb-fn-m-worldgrid > li:nth-child(5),
    .bb-fn-m--open .bb-fn-m-panel--active .bb-fn-m-panel__item:nth-child(5) { animation-delay: 152ms; }
    .bb-fn-m--open .bb-fn-m-worldgrid > li:nth-child(n+6),
    .bb-fn-m--open .bb-fn-m-panel--active .bb-fn-m-panel__item:nth-child(n+6) { animation-delay: 190ms; }

    @keyframes bb-fn-m-auf {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: none; }
    }
  }

  /* Die Bereichszeile bekommt den Farbring ihrer Welt — bisher war der Pfeil
     eine graue Kontur, die in jeder Welt gleich aussah. */
  .bb-fn-m .bb-fn-m-branch__arrow {
    border-color: color-mix(in srgb, var(--bbfn-accent) 45%, transparent);
    color: var(--bbfn-accent);
  }

  .bb-fn-m .bb-fn-m-branch:active .bb-fn-m-branch__arrow {
    background: var(--bbfn-accent);
    color: #fff;
  }

  /* Die Pfadzeile in Rasta-Grün: sie ist der Weg zurück und darf gefunden
     werden, ohne die Fläche zu dominieren. */
  .bb-fn-m .bb-fn-m-crumb__item {
    border-color: color-mix(in srgb, var(--bb-g, #178a41) 40%, transparent);
    color: var(--bb-g, #178a41) !important;
  }

  /* Die klebende Aktion trägt die Farbe ihrer Welt, nicht immer Grün. */
  .bb-fn-m .bb-fn-m-action__link {
    background: var(--bbfn-accent);
    border-color: var(--bbfn-accent);
    color: #fff !important;
  }

  /* Treffer der Drawer-Suche: Rasta-Kante links statt Rundum-Rahmen — sie
     sollen als Liste lesen, nicht als sechzig einzelne Karten. */
  .bb-fn-m .bb-fn-m-result {
    border-left: 3px solid var(--bb-g, #178a41);
  }

  .bb-fn-m .bb-fn-m-result__kind {
    border-color: color-mix(in srgb, var(--bb-g, #178a41) 40%, transparent);
    color: var(--bb-g, #178a41);
  }
}

/* =====================================================================
   Header-Feinschliff Rasta (Owner-Auftrag 2026-07-16, Punkt 9)
   Live verifiziert (Playwright /Grinder, 1904px): #jtl-nav-wrapper ist
   vollbreit (x0/w≈vw), .bb-fn (Rail) nur containerbreit (x317) → die
   Rasta-Unterkante endete am Container. Jetzt: durchgängig + dicker, feine
   Oberlinie durchgängig, Navleiste minimal tiefer, Header-Icons + Logo auf
   Dummy-Maß verkleinert. Rollback: diesen Block löschen + Buster zurück.
   ===================================================================== */

/* Durchgängige Rasta-Unterkante (4px) am VOLLBREITEN Wrapper statt am Rail.
   (kein position auf #jtl-nav-wrapper setzen — sticky nicht brechen; ::after
   ist ein Block, füllt die volle Wrapper-Breite von selbst.) */
.bb-fn.bb-fn::after { display: none; }               /* containerbreite Alt-Linie raus */
#jtl-nav-wrapper::after {
  content: ""; display: block; height: 4px;
  background: linear-gradient(90deg,#178a41 0 33.34%,#eab00e 33.34% 66.67%,#d8402c 66.67% 100%);
}

/* Feine Oberlinie über der Navleiste — am bereits vollbreiten Wrapper statt
   mit 100vw am Rail. So bleibt die Linie full-bleed, ohne die Scrollbarbreite
   in document.scrollWidth einzurechnen (vorher +8 px horizontaler Overflow). */
.bb-fn.bb-fn::before { display: none; }
#jtl-nav-wrapper > .navbar-wrapper::before {
  content: ""; display: block; height: 1px;
  background: rgba(23, 21, 14, .12);
}

/* Owner 1.2/1.3: Nav-Bar WEISS (der cream→beige-Rail-Verlauf wirkte grau) und
   die Rasta-Linie (::after) BÜNDIG als Unterkante. Rail/Mount opak weiss halten
   (transparent verbietet sich: Sticky-Nav ließe Inhalt durchscheinen). Basis-
   Hairline (border-bottom am Wrapper) raus -> keine dunkle Linie unter der Rasta. */
.bb-fn-mount, .bb-fn { background: transparent; }   /* Owner 2026-07-19: Cream des Headers statt Weiss */
#jtl-nav-wrapper { border-bottom: 0 !important; }
@media (max-width: 991.98px) { .bb-fn-m { background: transparent; } }   /* Owner 2026-07-19: Cream statt Weiss (wie Desktop) */

/* Navleiste minimal tiefer/luftiger (war „leicht zu weit oben") */
.bb-fn.bb-fn .bb-fn-entry__link,
.bb-fn.bb-fn .bb-fn-entry__toggle {
  padding-block: 6px;        /* Owner 2026-07-19 R6: Bar wieder +10px (38 -> 48px) */
  font-size: 14.4px;         /* R4: nochmals +0.5pt (13 -> 13.7 -> 14.4px) */
  align-items: center; line-height: 1;
}
.bb-fn.bb-fn .bb-fn-bar, .bb-fn.bb-fn .bb-fn-entry { align-items: center; }
/* Owner 2026-07-19 R4: horizontal wieder linksbuendig (vertikal bleibt mittig) */
.bb-fn.bb-fn .bb-fn-bar { justify-content: flex-start; }
/* Owner 2026-07-19 R5: Die Bar ist ein <ul> und brachte 16px Browser-Margin mit —
   dadurch klebten die Eintraege oben und die Rasta-Linie stand 16px tiefer.
   Margin raus => Linie schliesst direkt an, Eintraege sitzen optisch mittig. */
.bb-fn.bb-fn .bb-fn-bar { margin-bottom: 0; }
/* Mega-Panel erst UNTER der Rasta-Linie (header::after, 4px) oeffnen,
   sonst legt es sich ueber die Linie (sichtbarer Versatz). */
.bb-fn.bb-fn .bb-fn-panel { top: calc(100% + 4px); }
/* Owner 2026-07-19 R6: Slider-Unterstrich stand auf bottom:12px (Wert der alten
   66px-Leiste) und lag damit auf der Schrift — jetzt an der Leistenunterkante. */
.bb-fn.bb-fn .bb-fn-marker { bottom: 5px; }

/* Header-Icons (Merkliste/Konto/Warenkorb) + Logo kleiner (Dummy-Maß).
   Logo braucht explizite Höhe (height:auto kollabiert bei lazy-load auf 0).
   Icon-Größe = font-size der fa-Glyphe; kleiner als der Alt-Stand (16px). */
#shop-logo, .navbar-brand img#shop-logo { height: 38px; width: auto; max-height: 38px; }
.nav-icons .nav-link .fa,
.nav-icons .nav-link [class*="fa-"],
.nav-icons .nav-link svg { font-size: 14px; }

/* =====================================================================
   P10: Symbol vor jedem Rail-Navigationspunkt (Owner-Entscheid 2026-07-16)
   Markup vom Renderer: .bb-fn-entry__link > span.bb-fn-entry__icon > img
   (geforgtes menu-icon der Oberkategorie; Random Fun ohne Icon = nur Text).
   Der Label-Flex hat gap:.5ch → Icon + Text sitzen sauber; Chevron (::before,
   T-M2: der Chevron ist jetzt ein eigener Button NEBEN dem Link, kein ::before
   mehr. Rollback: Renderer-Files zurück + diese Regel raus. */
.bb-fn .bb-fn-entry__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: none; order: 0; margin-right: 1px;
  opacity: 1; transition: opacity var(--bbfn-in) var(--bbfn-ease), transform var(--bbfn-in) var(--bbfn-ease);
}
.bb-fn .bb-fn-entry__icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.bb-fn .bb-fn-entry:hover > .bb-fn-entry__link .bb-fn-entry__icon,
.bb-fn .bb-fn-entry:focus-within > .bb-fn-entry__link .bb-fn-entry__icon {
  transform: translateY(-1px) scale(1.06);
}
@media (max-width: 640px) { .bb-fn .bb-fn-entry__icon { width: 24px; height: 24px; } }