/* Bewegungs-Tokens — dieselben Werte wie themes/hookain/sass/_variables.scss.
   Diese Datei ist reines CSS und laeuft nicht durch den SCSS-Build, deshalb
   hier als Custom Properties statt als SCSS-Variablen. */
:root{--hk-t-tap:120ms;--hk-t-ui:200ms;--hk-t-panel:320ms;--hk-e-out:cubic-bezier(0.2,0.8,0.2,1);--hk-e-in-out:cubic-bezier(0.4,0,0.2,1)}
/*
 * Hookain Two-World skin for UltraFlexMenu.
 *
 * This is intentionally outside plugins/ultraflex_menu: UFM remains updateable
 * and continues to own markup, keyboard behaviour, lazy panels and its drawer.
 */
.hk-ultraflex-mount .bb-fn {
  --bbfn-rail-bg: #15161b;
  --bbfn-rail-bg-2: #202128;
  --bbfn-rail-fg: #fff;
  --bbfn-rail-fg-dim: rgba(255, 255, 255, .72);
  --bbfn-accent: #e2233b;
  --bbfn-panel-bg: #fff;
  --bbfn-panel-bg-2: #f6f6f5;
  --bbfn-ink: #17181d;
  --bbfn-ink-soft: #5e6068;
  --bbfn-line: #e3e4e7;
  --bbfn-radius: 3px;
  --bbfn-shadow: 0 24px 56px -26px rgba(15, 16, 22, .42);
  --bbfn-mono: "Archivo", "Inter", system-ui, sans-serif;
  --bbfn-body: "Inter", system-ui, sans-serif;
  border-top: 1px solid rgba(255, 255, 255, .09);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.hk-ultraflex-mount .bb-fn-bar {
  align-items: stretch;
  gap: 0;
  max-width: 1440px;
  min-height: 48px;
  padding-inline: clamp(.45rem, 2.3vw, 2.25rem);
  /* Die 16px Aussenabstand des Plugins liegen INNERHALB der Schiene. Solange
     die weiss war, fielen sie nicht auf; auf dunklem Grund haengt darunter ein
     leerer Streifen und die Leiste wirkt 66px hoch statt 48. Das Flyout liegt
     absolut, der Abstand wird hier also nicht gebraucht. */
  margin-bottom: 0;
}

.hk-ultraflex-mount .bb-fn-world {
  align-items: center;
  align-self: stretch;
  color: #fff;
  display: inline-flex;
  flex: 0 0 auto;
  font-family: "Archivo", "Inter", system-ui, sans-serif;
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .105em;
  margin: 0 .36rem 0 0;
  padding: 0 .78rem;
  text-transform: uppercase;
}

/* Die Weltfarben stehen weiter unten im Palettenblock, damit sie an einer
   einzigen Stelle liegen.

   Hier entfernt: .bb-fn-entry--world-shisha/-vape UND .bb-fn-world--shisha/-vape.
   Beide Klassenpaare stehen nicht im Markup — gemessen am Live-DOM traegt das
   Label nur `class="bb-fn-world"`, die Welt haengt am Elternknoten als
   `data-bb-world`. Alle Regeln darauf waren tot. Ansteuerung deshalb ueber
   `.bb-fn-world-group[data-bb-world="…"] > .bb-fn-world`. */

.hk-ultraflex-mount .bb-fn-entry__label {
  font-family: "Archivo", "Inter", system-ui, sans-serif;
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .035em;
  padding: 1.08rem .72rem .98rem;
}

.hk-ultraflex-mount .bb-fn-entry__label::after,
.hk-ultraflex-mount .bb-fn-marker {
  background: var(--bbfn-accent);
  bottom: 8px;
}

.hk-ultraflex-mount .bb-fn-entry__badge {
  background: var(--bbfn-accent);
  border-radius: 2px;
  color: #fff;
  font-size: .58rem;
  letter-spacing: .04em;
}

.hk-ultraflex-mount .bb-fn-panel {
  border-top: 0;
  border-radius: 0 0 4px 4px;
  z-index: 1045;
}

.hk-ultraflex-mount .bb-fn-panel::before { height: 3px; }

.hk-ultraflex-mount .bb-fn-panel-inner {
  max-width: 1440px;
  margin-inline: auto;
  padding: 1.6rem clamp(1rem, 3vw, 2.75rem) 1.9rem;
}

.hk-ultraflex-mount .bb-fn-cols { gap: clamp(1.2rem, 2.5vw, 2.6rem); }
.hk-ultraflex-mount .bb-fn-region--left,
.hk-ultraflex-mount .bb-fn-region--right { flex-basis: min(285px, 26%); }

.hk-ultraflex-mount .bb-fn-feature,
.hk-ultraflex-mount .bb-fn-card,
.hk-ultraflex-mount .bb-fn-promo,
.hk-ultraflex-mount .bb-fn-crate__chip {
  border-radius: 3px;
}

.hk-ultraflex-mount .bb-fn-feature {
  border-color: #e6e7e9;
  box-shadow: none;
}

.hk-ultraflex-mount .bb-fn-feature__title {
  font-family: "Archivo", "Inter", system-ui, sans-serif;
  font-size: 1.22rem;
  letter-spacing: -.025em;
}

.hk-ultraflex-mount .bb-fn-feature__cta,
.hk-ultraflex-mount .bb-fn-kicker {
  font-family: "Archivo", "Inter", system-ui, sans-serif;
  font-size: .66rem;
  letter-spacing: .08em;
}

.hk-ultraflex-mount .bb-fn-index { gap: .65rem 2rem; }
.hk-ultraflex-mount .bb-fn-index__head { margin-bottom: .25rem; }
.hk-ultraflex-mount .bb-fn-link { font-size: .82rem; line-height: 1.42; }
.hk-ultraflex-mount .bb-fn-card__label { font-size: .76rem; }

.hk-ultraflex-mount .bb-fn-card:hover,
.hk-ultraflex-mount .bb-fn-crate__chip:hover {
  border-color: var(--bbfn-accent);
  transform: translateY(-1px);
}

.hk-ultraflex-mount .bb-fn-overflow { margin-left: auto; }

@media (max-width: 1024px) {
  .hk-ultraflex-mount .bb-fn-bar { padding-inline: .3rem; }
  .hk-ultraflex-mount .bb-fn-entry__label { font-size: .68rem; padding-inline: .55rem; }
  .hk-ultraflex-mount .bb-fn-world { font-size: .61rem; padding-inline: .55rem; }
}

@media (max-width: 640px) {
  .hk-ultraflex-mount .bb-fn { border: 0; }
  .hk-ultraflex-mount .bb-fn-burger {
    background: #15161b;
    color: #fff;
    font-family: "Archivo", "Inter", system-ui, sans-serif;
    font-size: .71rem;
    font-weight: 700;
    letter-spacing: .055em;
    padding: .82rem 1rem;
    text-transform: uppercase;
  }
  .hk-ultraflex-mount .bb-fn-bar { padding: 0; }
  .hk-ultraflex-mount .bb-fn-world {
    margin: 0;
    min-height: 2.2rem;
    padding-inline: 1rem;
    width: 100%;
  }
  .hk-ultraflex-mount .bb-fn-world-group { display: block; }
  .hk-ultraflex-mount .bb-fn-world-group[data-bb-world="vape"] { margin-left: 0; }
  .hk-ultraflex-mount .bb-fn-entry__label { padding: .9rem 1rem; }
  .hk-ultraflex-mount .bb-fn-panel-inner { padding: .9rem 1rem 1.2rem; }
  .hk-ultraflex-mount .bb-fn-slim { columns: 2 130px; }
}


/* ============================================================================
 * Hookain menu skin — PALETTE + ZONEN (2026-07-12, ueberarbeitet 2026-07-29).
 *
 * 2026-07-29: Vape war BLAU (#1C6FE3) und Shisha ein abgedunkeltes Rot
 * (#C4161C) statt Markenrot. Beides jetzt auf die Markenpalette gezogen:
 * Shisha #e2233b, Vape #1fb6c9. Dazu tragen die Welten eine eigene
 * Zonenflaeche, nicht nur ein farbiges Label — sonst liest die Leiste als
 * eine Liste mit zwei bunten Etiketten statt als zwei Warenwelten.
 *
 * Die Warenwelt kodiert Bedeutung. Uses the REAL live hooks:
 *   desktop world  = .bb-fn-world-group[data-bb-world="shisha|vape"]
 *                    (the mega-panel is a descendant, so it recolours too)
 *   mobile drawer  = .bb-fn-m  (+ per-world via .bb-fn-m-world[aria-labelledby*="-vape"])
 * Fixes two live bugs: (1) everything was red because the theme's old
 * .bb-fn-entry--world-vape hook never matched the markup; (2) the mobile drawer
 * had no accent set, so flexnav's var(--bbfn-accent,#ff7a33) fell back to ORANGE.
 * Also colours the new property-values facet chips. Appended last = wins by
 * source order at equal specificity. Reversible = delete this block.
 * ==========================================================================*/

/* ---------------------------------------------------------------------------
 * 2026-07-29, zweiter Durchgang: die getoenten Weltzonen sind zurueckgenommen.
 *
 * Sie standen als blassrosa und hellcyan Flaechen in einem 48px-Streifen und
 * lasen als Textmarkierung, nicht als Warenwelt — vier konkurrierende
 * Flaechen (Vollton-Label, Tintzone, zweites Vollton-Label, schwarzer
 * Sale-Block) und keine, die fuehrt. Pastell ist ausserdem markenfremd:
 * Hookain ist Anthrazit und hartes Rot.
 *
 * Jetzt traegt die Schiene das Gewicht, die Welt haengt nur am Label-Chip und
 * am Akzent des aktiven Eintrags. Der geoeffnete Eintrag geht auf Weiss und
 * laeuft in das Panel — auf dunklem Grund ist das eindeutig, auf hellem war
 * es der Grund, warum der offene Eintrag als Karte heraussprang.
 * ------------------------------------------------------------------------- */

/* — Desktop base = Shisha, Markenrot (die Shisha-Mehrheit ist der Default) — */
.hk-ultraflex-mount .bb-fn {
  --bbfn-accent: #e2233b;
  --bbfn-accent-deep: #9e0b20;
  --bbfn-accent-weak: #fbeaec;
  --bbfn-rail-bg: #16171c;
  --bbfn-rail-bg-2: #16171c;
  --bbfn-rail-fg: #fff;
  --bbfn-rail-fg-dim: rgba(255, 255, 255, .72);
  /* Das Plugin malt die Schiene ueber ein background-image
     (linear-gradient), nicht ueber background-color — Gradient raus, flache
     Flaeche rein. */
  background-image: none;
  background-color: transparent;
  border-top-color: rgba(255, 255, 255, .08);
  border-bottom-color: rgba(255, 255, 255, .08);
  position: relative;
  z-index: 1;
}

/* Randlos: die Leiste liegt in einem Container von 1408px in einem
   1440px-Fenster, ohne Ausbruch blieben weisse Schlitze an beiden Seiten.
   Die Flaeche kommt deshalb aus einem absolut gesetzten Pseudo-Element hinter
   der Leiste. Bewusst NICHT ueber `clip-path` oder `overflow` am .bb-fn
   geloest: das Flyout-Panel liegt absolut im Eintrag und damit in .bb-fn —
   jeder beschneidende Vorfahre wuerde es abschneiden. */
.hk-ultraflex-mount {
  position: relative;
}

.hk-ultraflex-mount::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  background: #16171c;
  z-index: 0;
  pointer-events: none;
}

/* — Vape-Welt → Cyan. Am world-group gesetzt; Entry und Mega-Panel sind
     Nachfahren, Chips / CTAs / Marker in einem Vape-Flyout faerben also mit. — */
.hk-ultraflex-mount .bb-fn-world-group[data-bb-world="vape"] {
  --bbfn-accent: #1fb6c9;
  --bbfn-accent-deep: #0a5a64;
  --bbfn-accent-weak: #e0f4f7;
}

/* — Weltlabel als kompakter Chip, mittig in der Schiene. Die Textfarbe MUSS
     je Welt unterschiedlich sein: Weiss auf #e2233b liegt bei 4.6:1 und
     traegt, Weiss auf Cyan nur bei 2.5:1 und faellt durch. Auf Cyan deshalb
     dunkles Petrol (5.4:1). — */
.hk-ultraflex-mount .bb-fn-world {
  align-self: center;
  border-radius: 3px;
  margin: 0 .55rem 0 0;
  padding: .36rem .7rem;
}
.hk-ultraflex-mount .bb-fn-world-group[data-bb-world="shisha"] > .bb-fn-world {
  background: #e2233b;
  color: #fff;
}
.hk-ultraflex-mount .bb-fn-world-group[data-bb-world="vape"] > .bb-fn-world {
  background: #1fb6c9;
  color: #04353b;
}

/* Zonen tragen keine eigene Flaeche mehr. Die Vape-Welt spannt den Rest der
   Breite, damit Sale ganz rechts sitzen kann. */
.hk-ultraflex-mount .bb-fn-world-group {
  align-items: stretch;
  background: none;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  min-width: 0;
}

.hk-ultraflex-mount .bb-fn-world-group[data-bb-world="vape"] {
  border-left: 1px solid rgba(255, 255, 255, .14);
  flex: 1 1 auto;
  margin-left: 1.25rem;
  padding-left: 1.25rem;
}

.hk-ultraflex-mount .bb-fn-world-group__list {
  align-items: stretch;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}

/* Eintraege: hell auf der Schiene. */
.hk-ultraflex-mount .bb-fn-world-group .bb-fn-entry__label {
  color: rgba(255, 255, 255, .86);
}

/* Hover hebt nur an: keine eigene Akzentkante. Den Strich an der Unterkante
   zeichnet das Plugin bereits als `.bb-fn-entry__label::after` (2px, faerbt
   ueber --bbfn-accent mit der Welt) — eine zweite Inset-Kante hier legte
   einen doppelten roten Strich darunter. */
.hk-ultraflex-mount .bb-fn-world-group .bb-fn-entry__label:hover {
  background: rgba(255, 255, 255, .07);
  color: #fff;
}

/* Der Klick-Fokus zeichnet ein 1.5px-Outline quer ueber den geoeffneten
   Eintrag. Tastaturfokus behaelt seinen Ring, der Mausklick nicht. */
.hk-ultraflex-mount .bb-fn-entry__label:focus:not(:focus-visible) {
  outline: none;
}

/* Geoeffneter Eintrag wird weiss und laeuft in das Panel darunter. */
.hk-ultraflex-mount .bb-fn-world-group .bb-fn-entry__label[aria-expanded="true"] {
  background: var(--bbfn-panel-bg);
  box-shadow: none;
  color: #16171c;
}

.hk-ultraflex-mount .bb-fn-world-group .bb-fn-entry__label:hover,
.hk-ultraflex-mount .bb-fn-world-group .bb-fn-entry__label[aria-expanded="true"] {
  border-radius: 4px 4px 0 0 !important;
}

/* — Sale haengt im Menuedatenbestand in der Vape-Welt. Statt eines eigenen
     Blocks (der auf der dunklen Schiene ohnehin verschwaende) steht er als
     rote Textmarke am rechten Rand — `margin-left: auto` in der Liste der
     Vape-Welt, die dafuer den Rest der Breite spannt.
     Markenrot auf #16171c liegt bei 3.9:1 und faellt fuer Text durch; die
     aufgehellte Variante #ff5063 erreicht 5.7:1. — */
.hk-ultraflex-mount .bb-fn-entry[data-label="Sale"] {
  --bbfn-accent: #e2233b;
  background: none;
  margin-left: auto;
}

.hk-ultraflex-mount .bb-fn-entry[data-label="Sale"] .bb-fn-entry__label {
  color: #ff5063;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.hk-ultraflex-mount .bb-fn-entry[data-label="Sale"] .bb-fn-entry__label:hover {
  color: #ff7080;
}

/* — property-values facet chips (the Köpfe centre): crisp filter chips, accent
     hover bed. Keep dark ink on the weak bed (never red text on pink — WCAG). — */
.hk-ultraflex-mount .bb-fn-chip {
  border-radius: var(--bbfn-radius);
  transition: background-color var(--hk-t-tap) var(--hk-e-out), border-color var(--hk-t-tap) var(--hk-e-out);
}
.hk-ultraflex-mount .bb-fn-chip:hover,
.hk-ultraflex-mount .bb-fn-chip:focus-visible {
  background: var(--bbfn-accent-weak);
  border-color: var(--bbfn-accent);
  color: var(--bbfn-ink);
}

/* — Mobile drawer: lives outside .hk-ultraflex-mount and never had an accent set
     → the #ff7a33 fallback made it ORANGE. Set the Shisha red base; vape world
     sections → blue (matches desktop). — */
.bb-fn-m {
  --bbfn-accent: #e2233b;
  --bbfn-accent-deep: #9e0b20;
  --bbfn-accent-weak: #fbeaec;

  /* 2026-08-01: Die Akzente sassen, der GRUND nicht. Das Plugin liefert eine
     warme Cremepalette (#fffdf7 Flaeche, #f4f1e8 Kasten, #d8ccba Linie,
     #17150f Schrift) — die Anmutung des Referenzshops, nicht die von Hookain.
     Hookain ist kuehl und weiss: Flaechen #ffffff, Kasten #f5f7fa, Linie
     #e9ecef, Schrift #16171c. Dazu die Textschrift des Shops statt der des
     Plugins.

     Bewusst ueber die Token des Plugins statt ueber eigene Regeln: die
     Schublade baut ihre gesamte Gestaltung darauf auf, die Struktur bleibt
     unberuehrt, und ein Update des Plugins ueberschreibt nichts davon. */
  --bbfn-panel-bg: #fbfaf8;
  /* 2026-08-03: hier standen #f5f7fa und #e4e6ea — die Grautoene von
     Bootstrap, beide blaustichig. Im Verbund mit den weissen Kacheln las die
     ganze Schublade kuehl-blau und passte zu nichts im Shop. Hookain fuehrt
     WARM-neutrale Grautoene: $hookain-gray-100 #f4f4f3 und -200 #e7e7e6, zu
     finden in `_variables.scss`. Dieselben Werte tragen Produktkacheln und
     Abschnittsflaechen im restlichen Shop. */
  --bbfn-panel-bg-2: #f3f1ec;
  --bbfn-line: #e6e3dc;
  --bbfn-ink: #16171c;
  --bbfn-ink-soft: #6f6b63;
  --bbfn-rail-bg: #16171c;
  --bbfn-rail-bg-2: #1d1f26;
  --bbfn-rail-fg: #ffffff;
  --bbfn-rail-fg-dim: rgba(255, 255, 255, .62);
  --bbfn-shadow: 0 24px 60px -24px rgba(16, 17, 22, .45);
  --bbfn-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
.bb-fn-m .bb-fn-m-world[aria-labelledby*="-vape"] {
  --bbfn-accent: #1fb6c9;
  --bbfn-accent-deep: #0a5a64;
  --bbfn-accent-weak: #e0f4f7;
  /* Der Balken vor der Weltueberschrift haengt nicht an `--bbfn-accent`,
     sondern an `--bb-fn-world-color` — ohne diese Zeile stand vor „VAPE" ein
     roter Strich. */
  --bb-fn-world-color: #1fb6c9;
}

.bb-fn-m .bb-fn-m-world[aria-labelledby*="-vape"] .bb-fn-m-world__title {
  border-left-color: #1fb6c9;
}

/* Als Flaeche taugt #1fb6c9, als Schrift auf Weiss nicht: 2,47:1. Die
   Weltueberschrift laeuft deshalb im tiefen Ton (7,4:1), der Balken davor
   bleibt im hellen. */
.bb-fn-m .bb-fn-m-world[aria-labelledby*="-vape"] .bb-fn-m-world__title {
  color: #0a5a64;
}

/* ── Zwei Welten im Einstiegsraster (2026-08-03) ────────────────────────
   Bis hierher trugen nur die ABSCHNITTE weiter unten eine Welt. Das Raster
   ganz oben — die acht Kacheln, ueber die praktisch jeder einsteigt — zeigte
   Shisha und Vape in identischem Grau nebeneinander. Genau das las sich als
   „alles eine kuehle Flaeche" statt als zwei Warenwelten.

   Die Kacheln kennen ihre Welt seit heute ueber `data-hk-world`, das der
   Ausgabefilter des Feature-Plugins aus den Menue-Einstellungen schreibt
   (`ufm-world-shisha` / `-vape`). Hier wird daraus Farbe: getoente Bildflaeche,
   ein Balken in der Weltfarbe unter dem Bild, Weltfarbe beim Antippen.
   Kein Eingriff in Struktur oder Inhalte der Schublade. */
.bb-fn-m .bb-fn-m-worldcard[data-hk-world] {
  position: relative;
  overflow: hidden;
}

.bb-fn-m .bb-fn-m-worldcard[data-hk-world]::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 4px;
  background: var(--hk-world, #e2233b);
}

.bb-fn-m .bb-fn-m-worldcard[data-hk-world="shisha"] {
  --hk-world: #e2233b;
  --hk-world-tint: rgba(226, 35, 59, .08);
  --hk-world-tint-strong: rgba(226, 35, 59, .22);
}

.bb-fn-m .bb-fn-m-worldcard[data-hk-world="vape"] {
  --hk-world: #1fb6c9;
  --hk-world-tint: rgba(31, 182, 201, .10);
  --hk-world-tint-strong: rgba(31, 182, 201, .26);
}

/* 2026-08-03, nachgezogen: als flacher Tint bei 7 bis 10 Prozent verschwand die
   Welt auf dem waermeren Papiergrund — sie war da, aber sie trug nicht. Jetzt
   ein Verlauf von kraeftig oben nach fast weiss unten: die Bildflaeche wird zur
   farbigen Buehne, das Produktbild steht trotzdem frei, und unten laeuft die
   Flaeche sauber in die weisse Kachel mit der Beschriftung aus. */
.bb-fn-m .bb-fn-m-worldcard[data-hk-world] .bb-fn-m-worldcard__media {
  background: linear-gradient(
    180deg,
    var(--hk-world-tint-strong) 0%,
    var(--hk-world-tint) 62%,
    rgba(255, 255, 255, 0) 100%
  );
}

.bb-fn-m .bb-fn-m-worldcard[data-hk-world]:hover,
.bb-fn-m .bb-fn-m-worldcard[data-hk-world]:focus-visible,
.bb-fn-m .bb-fn-m-worldcard[data-hk-world][aria-expanded="true"] {
  border-color: var(--hk-world);
}

/* Die aufgeklappte Ebene fuehrt die Welt weiter, sonst bricht die Farbe genau
   dort ab, wo man tiefer einsteigt. */
.bb-fn-m .bb-fn-m-panel[data-hk-world="vape"] {
  --bbfn-accent: #1fb6c9;
  --bbfn-accent-deep: #0a5a64;
  --bbfn-accent-weak: #e0f4f7;
}

.bb-fn-m .bb-fn-m-panel[data-hk-world] .bb-fn-m-panel__header {
  border-bottom: 2px solid var(--bbfn-accent);
}

/* Die Schnellzugriff- und Servicezeilen scrollen waagerecht. Ohne Innenabstand
   klebt die erste Kachel an der Kante und die letzte wird mitten im Wort
   abgeschnitten — es sieht aus, als schoebe sich etwas ins Bild. Innenabstand
   plus eine ausblendende Kante am rechten Rand zeigt stattdessen, dass dort
   weitergescrollt werden kann. */
.bb-fn-m .bb-fn-m-row__list {
  padding-inline: 2px;
  scroll-padding-inline: 2px;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
          mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
}

/* — v2.1 (2026-07-13): bottom search-specials ("Entdecken") as CHIPS instead of
     the plugin's vertical dot-list. Same look as the facet chips above (equal
     specificity, this file loads after flexnav.css → source order wins). The
     accent dot stays as the chip's world-colour marker. Cache-key bumped to
     `.20260713chips` in header.tpl. — */
.hk-ultraflex-mount .bb-fn-specials {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}
.hk-ultraflex-mount .bb-fn-special {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  font-size: 13px;
  line-height: 1.1;
  background: var(--bbfn-panel-bg-2);
  border: 1px solid var(--bbfn-line);
  border-radius: var(--bbfn-radius);
  transition: background-color var(--hk-t-tap) var(--hk-e-out), border-color var(--hk-t-tap) var(--hk-e-out);
}
.hk-ultraflex-mount .bb-fn-special:hover,
.hk-ultraflex-mount .bb-fn-special:focus-visible {
  background: var(--bbfn-accent-weak);
  border-color: var(--bbfn-accent);
  color: var(--bbfn-ink);
}

/* — v2.1: hide the auto "Topseller" L2 group in the Köpfe Bauart spine. Node-meta
     hidden (kMenu=1, kNode=2226) is set but CompileCore only filters L1 spine cells,
     not panel groups — this CSS bridges that gap until the compile semantics are
     completed. Redundant with the bottom "Entdecken → Bestseller" corridor. — */
.hk-ultraflex-mount .bb-fn-index__group:has(> a.bb-fn-index__head[href$="/Topseller_1"]) {
  display: none;
}

/* — Kategoriesymbole in der Leiste. Sie kommen aus dem UltraFlexMenu selbst
     (MenuIconForge) und werden vom Feature-Plugin nachtraeglich ins Label
     gehaengt, weil der Leisten-Renderer nur das Label ausgibt. — */
.hk-ultraflex-mount .bb-fn-entry__label {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

.hk-ultraflex-mount .hk-fn-icon {
  flex: 0 0 auto;
  display: inline-flex;
  width: 20px;
  height: 20px;
}

.hk-ultraflex-mount .hk-fn-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Die Symbole sind fuer helle Flaechen gezeichnet; auf der dunklen Schiene
     werden sie aufgehellt statt eingefaerbt, damit die Form erhalten bleibt. */
  filter: brightness(0) invert(1) opacity(.86);
  transition: filter var(--hk-t-ui) var(--hk-e-out);
}

.hk-ultraflex-mount .bb-fn-entry__label:hover .hk-fn-icon img,
.hk-ultraflex-mount .bb-fn-entry__label[aria-expanded="true"] .hk-fn-icon img {
  filter: none;
}

/* — Dropdown: Trennlinien raus, Logos freistehend ────────────────────
   Die Gruppenueberschriften trugen eine 1px-Linie unter sich (#e3e4e7).
   Sie zerschneidet das Panel in Streifen — der Abstand allein ordnet
   besser als eine Linie. */
.hk-ultraflex-mount .bb-fn-index__head {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: .5rem;
}

/* Markenlogos standen in einer grauen Kachel mit Rahmen. Freistehend auf
   Weiss, mit einem weichen Schatten statt einer Kante — das laesst die
   Logos wirken statt den Kasten. */
.hk-ultraflex-mount .bb-fn-crate__chip {
  background: #fff;
  border-color: transparent;
  box-shadow: 0 2px 10px rgba(15, 16, 22, .08);
  transition: box-shadow var(--hk-t-ui) var(--hk-e-out), transform var(--hk-t-ui) var(--hk-e-out);
}

.hk-ultraflex-mount .bb-fn-crate__chip:hover {
  border-color: transparent;
  box-shadow: 0 8px 22px rgba(15, 16, 22, .16);
  transform: translateY(-2px);
}

/* Die Logos selbst kommen in sehr unterschiedlichen Formaten. `contain`
   haelt sie auf einer Linie, ohne sie zu beschneiden. */
.hk-ultraflex-mount .bb-fn-crate__chip .bb-fn-img {
  object-fit: contain;
  max-height: 40px;
}

/* — Chevrons raus. Das Plugin haengt sie als CSS-Dreieck an jeden Eintrag
     mit Panel (`.bb-fn-entry:has(.bb-fn-panel) > .bb-fn-entry__label::before`).
     Mit Symbol und Aktivmarke daneben sind sie ein drittes Signal fuer
     dieselbe Sache. */
.hk-ultraflex-mount .bb-fn-entry:has(.bb-fn-panel) > .bb-fn-entry__label::before {
  content: none;
}

/* — Trennlinie zwischen den Welten raus. Der Abstand und die beiden
     Label-Chips trennen bereits. */
.hk-ultraflex-mount .bb-fn-world-group[data-bb-world="vape"] {
  border-left: 0;
  padding-left: 0;
}

/* — Markenlogos ohne Kasten. Die Dateien sind transparente PNGs; ein weisser
     Rahmen mit Schatten macht daraus wieder eine Kachel. Jetzt steht das Logo
     frei auf dem Panel, der Schatten liegt nur noch beim Ueberfahren an. */
.hk-ultraflex-mount .bb-fn-crate__chip {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.hk-ultraflex-mount .bb-fn-crate__chip:hover {
  background: #fff;
  box-shadow: 0 6px 18px rgba(15, 16, 22, .12);
}

/* — Die Warenwelt bis ins Panel ziehen ───────────────────────────────
   `--bbfn-accent` wird an der Welt-Gruppe gesetzt und vererbt sich ins
   Panel, weil dieses ein Nachfahre des Eintrags ist. Sichtbar war davon
   fast nichts, weil im Panel kaum etwas den Akzent benutzt. Ein
   Vape-Dropdown sah aus wie ein Shisha-Dropdown.

   Bewusst nur Akzente, keine Flaechen: die Panels sind frei
   konfigurierbar, das Design muss jede Box-Kombination aushalten. */
.hk-ultraflex-mount .bb-fn-panel::before {
  background: var(--bbfn-accent);
}

/* Gruppenueberschriften und A-Z-Buchstaben in der Weltfarbe. */
.hk-ultraflex-mount .bb-fn-index__head-label,
.hk-ultraflex-mount .bb-fn-az__letter,
.hk-ultraflex-mount .bb-fn-kicker {
  color: var(--bbfn-accent);
}

/* Links und Chips nehmen die Welt beim Ueberfahren an. */
.hk-ultraflex-mount .bb-fn-link:hover,
.hk-ultraflex-mount .bb-fn-link:focus-visible {
  color: var(--bbfn-accent);
}

/* Die Kategorie-Karte links traegt die Welt als schmale Kante. */
.hk-ultraflex-mount .bb-fn-feature {
  box-shadow: inset 3px 0 0 var(--bbfn-accent);
}

.hk-ultraflex-mount .bb-fn-feature__cta {
  color: var(--bbfn-accent);
}

/* ============================================================================
 * Panel-Bausteine — Hookain-Anmutung je Provider
 *
 * Bewusst PRO PROVIDER gestaltet, nicht pro Kategorie: die Panels sind frei
 * konfigurierbar (Regionen mit Boxen aus feature, index, brands, facets, az,
 * crate, specials, linklist, tabs), zusammengestellt vom Betreiber oder
 * vorgeschlagen von der AssistEngine. Der Skin muss jede Kombination
 * aushalten, statt eine bestimmte vorauszusetzen.
 *
 * Durchgaengige Regeln:
 *   - Ueberschriften tragen die Weltfarbe, Fliesstext nie.
 *   - Alle Gruppenkoepfe in Space Mono, Versalien — dieselbe Auszeichnung wie
 *     Eyebrow, Topbar und Welt-Chips.
 *   - Zahlen laufen in Mono und gedaempft; sie sind Information zweiter
 *     Ordnung und duerfen nicht mit dem Label konkurrieren.
 *   - Keine Flaechen hinter Boxen, keine festen Hoehen — das waeren Annahmen
 *     ueber die Komposition.
 * ==========================================================================*/

/* Gemeinsame Auszeichnung aller Gruppenkoepfe. */
/* NICHT `.bb-fn-index__head-label`: das sind die L2-Kategorien selbst und
   damit Links, keine Abschnittskoepfe. In Mono und Weltfarbe standen zwei
   Ebenen in derselben Auszeichnung und die Liste las als lauter Ueberschriften. */
.hk-ultraflex-mount .bb-fn-facet > .bb-fn-kicker,
.hk-ultraflex-mount .bb-fn-linklist__title,
.hk-ultraflex-mount .bb-fn-kicker {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bbfn-accent);
}

/* Zahlen: Mono, gedaempft, nie in Labelgroesse. */
.hk-ultraflex-mount .bb-fn-chip__count,
.hk-ultraflex-mount .bb-fn-brands__count,
.hk-ultraflex-mount .bb-fn-tabs__tab-count {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: .66rem;
  font-weight: 400;
  color: var(--bbfn-ink-soft);
  margin-left: .35em;
}

/* facets — eckige Chips wie die Buttons im Hero. Aktiv nimmt die Welt-Tinte
   als Flaeche; die Zahl darauf im tiefen Weltton, weil Markenrot auf dem
   hellen Rosa durchfaellt. */
.hk-ultraflex-mount .bb-fn-chip {
  border-radius: 3px;
  border-color: var(--bbfn-line);
}

.hk-ultraflex-mount .bb-fn-chip:hover,
.hk-ultraflex-mount .bb-fn-chip:focus-visible,
.hk-ultraflex-mount .bb-fn-chip[aria-pressed="true"] {
  background: var(--bbfn-accent-weak, #fbeaec);
  border-color: var(--bbfn-accent);
  color: var(--bbfn-ink);
}

.hk-ultraflex-mount .bb-fn-chip:hover .bb-fn-chip__count,
.hk-ultraflex-mount .bb-fn-chip[aria-pressed="true"] .bb-fn-chip__count {
  color: var(--bbfn-accent-deep, var(--bbfn-ink));
}

/* az — Buchstaben in Archivo Black und Weltfarbe geben der langen Liste
   Rhythmus, ganz ohne Trennlinien. */
.hk-ultraflex-mount .bb-fn-az__letter {
  font-family: 'Archivo Black', 'Arial Narrow Bold', Impact, sans-serif;
  font-size: .95rem;
  color: var(--bbfn-accent);
  border-bottom: 0;
}

/* specials — Einstiege, keine Filter. Deshalb bewusst dunkel und anders als
   die Facetten-Chips, sonst liest man beide als dasselbe. */
.hk-ultraflex-mount .bb-fn-special {
  background: var(--bbfn-ink);
  border-color: var(--bbfn-ink);
  color: #fff;
  border-radius: 3px;
}

.hk-ultraflex-mount .bb-fn-special:hover,
.hk-ultraflex-mount .bb-fn-special:focus-visible {
  background: #000;
  border-color: #000;
  color: #fff;
}

.hk-ultraflex-mount .bb-fn-special__dot {
  background: var(--bbfn-accent);
}

/* feature — Kategoriekarte. Titel in Archivo Black, Versalien; der Reset
   `* { text-transform: none !important }` des Themes verlangt Gegengewicht. */
.hk-ultraflex-mount .bb-fn-feature__title {
  font-family: 'Archivo Black', 'Arial Narrow Bold', Impact, sans-serif;
  font-weight: 400;
  text-transform: uppercase !important;
  line-height: 1.04;
}

.hk-ultraflex-mount .bb-fn-feature__cta {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase !important;
}

/* index / brands / linklist — Fliesstext bleibt neutral, nur der Hover nimmt
   die Welt an. Der Abschlusslink wird als Auszeichnung gesetzt. */
.hk-ultraflex-mount .bb-fn-link--all {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase !important;
  color: var(--bbfn-accent);
}

.hk-ultraflex-mount .bb-fn-brands a:hover,
.hk-ultraflex-mount .bb-fn-linklist__link:hover {
  color: var(--bbfn-accent);
}

/* tabs — der aktive Reiter traegt die Welt an der Unterkante. */
.hk-ultraflex-mount .bb-fn-tabs__tab[aria-selected="true"] {
  box-shadow: inset 0 -2px 0 var(--bbfn-accent);
  color: var(--bbfn-ink);
}

/* L2-Kategorien im Index: normaler Fliesstext, nur der Hover nimmt die Welt. */
.hk-ultraflex-mount .bb-fn-index__head-label {
  font-family: inherit;
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bbfn-ink);
}

.hk-ultraflex-mount .bb-fn-index__head:hover .bb-fn-index__head-label {
  color: var(--bbfn-accent);
}

/* — specials: Text mitfaerben. Der dunkle Grund kam von mir, die Schriftfarbe
     blieb die alte — dunkel auf dunkel, teils gar nicht lesbar. */
.hk-ultraflex-mount .bb-fn-special,
.hk-ultraflex-mount .bb-fn-special *,
.hk-ultraflex-mount .bb-fn-special:hover *,
.hk-ultraflex-mount .bb-fn-special:focus-visible * {
  color: #fff;
}

.hk-ultraflex-mount .bb-fn-special__dot {
  flex: 0 0 auto;
  background: var(--bbfn-accent);
}

/* — Leere Index-Gruppen nehmen keine ganze Spalte mehr ein.
     Eine Gruppe ohne Unterkategorien besteht nur aus ihrer Ueberschrift,
     belegte im Raster aber eine volle Spalte in Hoehe der laengsten
     Nachbarspalte. Das sind die grossen Loecher.

     Bewusst NICHT ausgeblendet: die Ueberschrift ist ein Link auf die
     Kategorie, der sonst aus der Navigation verschwaende. Stattdessen ruecken
     solche Gruppen als kompakte Zeile zusammen.

     Sauberer waere die Einstellung `skipEmpty` an der index-Box im Studio —
     dann liefert das Plugin sie gar nicht erst aus. Das gehoert dir, nicht dem
     Theme; dies hier ist das Sicherheitsnetz fuer den Fall, dass sie aus
     ist. */
.hk-ultraflex-mount .bb-fn-index__group:not(:has(.bb-fn-index__children)) {
  grid-column: auto;
  align-self: start;
}

.hk-ultraflex-mount .bb-fn-index__group:not(:has(.bb-fn-index__children)) .bb-fn-index__head {
  margin-bottom: 0;
}

/* Das Plugin faerbt alle Panel-Links per `!important`:
   `.bb-fn-panel a.bb-fn-link { color: var(--bbfn-ink) !important }`.
   Der Special ist ein `a.bb-fn-link` — auf dunklem Grund also unsichtbar.
   Nur fuer diesen Fall gegengesteuert. */
.hk-ultraflex-mount .bb-fn-panel a.bb-fn-special,
.hk-ultraflex-mount .bb-fn-panel a.bb-fn-special:hover,
.hk-ultraflex-mount .bb-fn-panel a.bb-fn-special:focus-visible {
  color: #fff !important;
}

/* — Aktivzustand in der Leiste: eingerueckte Box mit Weltrahmen ──────
   Der Eintrag bekommt Luft nach oben und unten, damit die Box kleiner ist
   als die Schienenhoehe und ein Spalt zum Panel bleibt. */
.hk-ultraflex-mount .bb-fn-entry__label {
  margin-block: 7px;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: .5rem .7rem;
  position: relative;
}

.hk-ultraflex-mount .bb-fn-world-group .bb-fn-entry__label:hover,
.hk-ultraflex-mount .bb-fn-world-group .bb-fn-entry__label[aria-expanded="true"] {
  background: #fff;
  border-color: var(--bbfn-accent);
  color: var(--bbfn-ink);
  border-radius: 4px !important;
  box-shadow: none;
}

/* Der gleitende Marker des Plugins ist EIN Element ausserhalb der
   Welt-Gruppen — er kann `--bbfn-accent` der Welt nicht erben und blieb
   deshalb immer rot. Abgeschaltet zugunsten des Unterstrichs am Eintrag
   selbst, der in der Gruppe liegt und die Welt mitnimmt. */
.hk-ultraflex-mount .bb-fn-marker {
  display: none;
}

.hk-ultraflex-mount .bb-fn--js .bb-fn-entry__label::after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 22px;
  height: 2px;
  margin-left: -11px;
  background: var(--bbfn-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--hk-t-ui) var(--hk-e-out);
}

.hk-ultraflex-mount .bb-fn--js .bb-fn-entry__label:hover::after,
.hk-ultraflex-mount .bb-fn--js .bb-fn-entry__label[aria-expanded="true"]::after {
  transform: scaleX(1);
}

/* Auf der weissen Box zeigt das Symbol wieder seine Originalfarben. */
.hk-ultraflex-mount .bb-fn-entry__label:hover .hk-fn-icon img,
.hk-ultraflex-mount .bb-fn-entry__label[aria-expanded="true"] .hk-fn-icon img {
  filter: none;
}

/* — Markenlogos: kein Kasten, auch nicht beim Ueberfahren.
     Vorher bekam der Chip im Hover weissen Grund und Schatten — genau die
     Kachel, die weg sollte. Jetzt hebt das Logo selbst ab, der Schatten
     liegt am Bild statt am Kasten. */
.hk-ultraflex-mount .bb-fn-crate__chip,
.hk-ultraflex-mount .bb-fn-crate__chip:hover,
.hk-ultraflex-mount .bb-fn-crate__chip:focus-visible {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

.hk-ultraflex-mount .bb-fn-crate__chip .bb-fn-img {
  transition: transform var(--hk-t-ui) var(--hk-e-out), filter var(--hk-t-ui) var(--hk-e-out);
}

.hk-ultraflex-mount .bb-fn-crate__chip:hover .bb-fn-img,
.hk-ultraflex-mount .bb-fn-crate__chip:focus-visible .bb-fn-img {
  transform: translateY(-4px);
  filter: drop-shadow(0 6px 10px rgba(15, 16, 22, .22));
}

/* Logos groesser, Name naeher: dadurch faellt der Schatten beim Ueberfahren
   in die Beschriftung statt in die Luft dazwischen. */
.hk-ultraflex-mount .bb-fn-crate__chip {
  gap: 3px;
}

.hk-ultraflex-mount .bb-fn-crate__chip .bb-fn-img {
  max-height: 52px;
}

/* `max-height` allein bringt nichts: die Logos sind breiter als hoch, also
   begrenzt die Breite. Das Plugin deckelt `.bb-fn-img` auf 90px — der Chip
   muss mitwachsen, sonst laeuft das Bild aus seinem Kasten. */
.hk-ultraflex-mount .bb-fn-crate__chip {
  min-width: 148px;
}

.hk-ultraflex-mount .bb-fn-crate__chip .bb-fn-img {
  max-width: 118px;
}