/*
 * hk-flexmenu - owned navigation module, structural stylesheet (WP3).
 *
 * Styles the exact DOM emitted by frontend/template/flexmenu/*.tpl.
 * Colours/typography are driven by --hkfm-* custom properties set inline on the <nav>
 * by FlexMenu\Renderer\ViewModelBuilder::tokenStyle(); every var has a neutral fallback so the
 * menu is usable before a theme is configured. This is structural, not the final visual design.
 *
 * Owned permanent prefix: .hk-fm*  (no coupling to any vendor selector).
 */

/* ----------------------------------------------------------------------------
 * Tokens (fallback defaults; overridden by inline --hkfm-* on .hk-fm)
 * ------------------------------------------------------------------------- */
.hk-fm {
  --_bg: var(--hkfm-bg, #ffffff);
  --_link: var(--hkfm-link, #1f2933);
  --_link-hover: var(--hkfm-link-hover, #111827);
  --_link-hover-bg: var(--hkfm-link-hover-bg, rgba(0, 0, 0, 0.05));
  --_link-active: var(--hkfm-link-active, #c0392b);
  --_sub-bg: var(--hkfm-sub-bg, #ffffff);
  --_sub-text: var(--hkfm-sub-text, #1f2933);
  --_sub-link: var(--hkfm-sub-link, #1f2933);
  --_sub-link-hover: var(--hkfm-sub-link-hover, #c0392b);
  --_frame-border: var(--hkfm-frame-border, #e5e7eb);
  --_frame-bg: var(--hkfm-frame-bg, #f9fafb);
  --_heading: var(--hkfm-heading, #111827);
  --_heading-font: var(--hkfm-heading-font, inherit);
  --_radius: 6px;
  --_gap: 0.25rem;
  --_submenu-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
  --_z-sticky: 1030;
  --_z-submenu: 1031;
  --_speed: 140ms;

  position: relative;
  display: block;
  background: var(--_bg);
  font-size: 0.95rem;
  line-height: 1.3;
}

/* ----------------------------------------------------------------------------
 * Top bar
 * ------------------------------------------------------------------------- */
.hk-fm-entry-wrapper {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
  min-height: 0;
}

.hk-fm-entry-group {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  min-width: 0;
}

.hk-fm-entry-group-left {
  flex: 0 1 auto;
}

/* right group hugs the far edge */
.hk-fm-entry-group-right {
  flex: 0 0 auto;
  margin-left: auto;
}

/* ----------------------------------------------------------------------------
 * Entry + label
 * ------------------------------------------------------------------------- */
.hk-fm-entry {
  position: relative;
  display: flex;
  align-items: stretch;
}

.hk-fm-entry-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 0.9rem;
  color: var(--_link);
  text-decoration: none;
  white-space: nowrap;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  transition: color var(--_speed) ease, background-color var(--_speed) ease;
}

.hk-fm-entry-label:hover,
.hk-fm-entry-label:focus-visible {
  color: var(--_link-hover);
  background: var(--_link-hover-bg);
  outline: none;
}

.hk-fm-entry-label:focus-visible {
  outline: 2px solid var(--_link-active);
  outline-offset: -2px;
}

.hk-fm-entry.hk-fm-active > .hk-fm-entry-label {
  color: var(--_link-hover);
  background: var(--_link-hover-bg);
}

.hk-fm-link-active > .hk-fm-entry-label,
.hk-fm-entry-label.hk-fm-link-active,
.hk-fm-link.hk-fm-link-active {
  color: var(--_link-active);
}

.hk-fm-entry-icon {
  display: inline-block;
  max-height: 1.25em;
  width: auto;
  vertical-align: middle;
}

.hk-fm-entry-font-icon {
  font-size: 1.1em;
  line-height: 1;
}

.hk-fm-entry-label--name {
  display: inline-block;
}

/* caret */
.hk-fm-caret-down {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 0.15rem;
  border-left: 0.3em solid transparent;
  border-right: 0.3em solid transparent;
  border-top: 0.3em solid currentColor;
  transition: transform var(--_speed) ease;
}

.hk-fm-entry.hk-fm-active > .hk-fm-entry-label .hk-fm-caret-down {
  transform: rotate(180deg);
}

/* ----------------------------------------------------------------------------
 * Submenu shell
 * ------------------------------------------------------------------------- */
.hk-fm-submenu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--_z-submenu);
  min-width: 14rem;
  margin-top: 0;
  padding: 1rem;
  background: var(--_sub-bg);
  color: var(--_sub-text);
  border: 1px solid var(--_frame-border);
  border-radius: var(--_radius);
  box-shadow: var(--_submenu-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity var(--_speed) ease, transform var(--_speed) ease, visibility 0s linear var(--_speed);
}

.hk-fm-entry.hk-fm-active > .hk-fm-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--_speed) ease, transform var(--_speed) ease, visibility 0s;
}

/* alignment variants (JS may further clamp to viewport) */
.hk-fm-submenu-align-left {
  left: 0;
  right: auto;
}

.hk-fm-submenu-align-right {
  left: auto;
  right: 0;
}

.hk-fm-submenu-align-center {
  left: 50%;
  right: auto;
  transform: translate(-50%, 4px);
}

.hk-fm-entry.hk-fm-active > .hk-fm-submenu-align-center {
  transform: translate(-50%, 0);
}

.hk-fm-submenu-align-full {
  left: 0;
  right: 0;
  width: 100%;
}

/* ----------------------------------------------------------------------------
 * Box areas (5 fixed slots: top / left / center / right / bottom)
 * ------------------------------------------------------------------------- */
.hk-fm-boxarea {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "top    top    top"
    "left   center right"
    "bottom bottom bottom";
  gap: 1rem;
}

.hk-fm-box-top { grid-area: top; }
.hk-fm-box-left { grid-area: left; }
.hk-fm-box-center { grid-area: center; }
.hk-fm-box-right { grid-area: right; }
.hk-fm-box-bottom { grid-area: bottom; }

.hk-fm-box {
  min-width: 0;
}

/* ----------------------------------------------------------------------------
 * Content provider block
 * ------------------------------------------------------------------------- */
.hk-fm-content + .hk-fm-content {
  margin-top: 0.85rem;
}

.hk-fm-content-framed {
  padding: 0.85rem;
  background: var(--_frame-bg);
  border: 1px solid var(--_frame-border);
  border-radius: var(--_radius);
}

.hk-fm-content-title {
  margin-bottom: 0.5rem;
}

.hk-fm-section-heading {
  display: block;
  color: var(--_heading);
  font-family: var(--_heading-font);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hk-fm-content-body--nopadding {
  padding: 0;
}

.hk-fm-content-description--title {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.hk-fm-content-description--text {
  color: var(--_sub-text);
}

/* ----------------------------------------------------------------------------
 * Linklist listing (2 levels)
 * ------------------------------------------------------------------------- */
.hk-fm-listing--linklist {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: var(--hkfm-listing-columns, auto);
}

.hk-fm-listing--item {
  break-inside: avoid;
  margin: 0 0 0.15rem;
}

.hk-fm-listing .hk-fm-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.2rem 0;
  color: var(--_sub-link);
  text-decoration: none;
  transition: color var(--_speed) ease;
}

.hk-fm-listing .hk-fm-link:hover,
.hk-fm-listing .hk-fm-link:focus-visible {
  color: var(--_sub-link-hover);
  text-decoration: underline;
  outline: none;
}

.hk-fm-listing--linklist-label {
  font-weight: 500;
}

.hk-fm-count {
  font-size: 0.75em;
  color: inherit;
  opacity: 0.6;
}

.hk-fm-listing--linklist-group {
  list-style: none;
  margin: 0.1rem 0 0.4rem;
  padding: 0 0 0 0.6rem;
  border-left: 1px solid var(--_frame-border);
}

.hk-fm-listing--linklist-group .hk-fm-link {
  font-weight: 400;
  font-size: 0.9em;
}

/* image grid listing (brands / categories with media) */
.hk-fm-listing--images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  gap: 0.5rem;
}

.hk-fm-listing--images .hk-fm-listing--item {
  margin: 0;
}

.hk-fm-listing--images-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.45rem;
  text-align: center;
  color: var(--_sub-link);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--_radius);
  transition: border-color var(--_speed) ease, color var(--_speed) ease;
}

.hk-fm-listing--images-link:hover,
.hk-fm-listing--images-link:focus-visible {
  border-color: var(--_frame-border);
  color: var(--_sub-link-hover);
  text-decoration: none;
  outline: none;
}

.hk-fm-listing--images-img img {
  max-width: 100%;
  height: auto;
  max-height: 3rem;
  object-fit: contain;
}

.hk-fm-listing--images-name {
  font-size: 0.85em;
}

/* index listing (A-Z grouped) */
.hk-fm-listing--index {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hk-fm-listing--index .hk-fm-listing--item {
  margin: 0;
}

.hk-fm-index-letter {
  margin-top: 0.35rem;
  padding: 0.25rem 0 0.1rem;
  color: var(--_heading);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--_frame-border);
}

/* labelimages listing (thumbnail + label rows) */
.hk-fm-listing--labelimages {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hk-fm-listing--labelimages .hk-fm-listing--item {
  margin: 0 0 0.15rem;
}

.hk-fm-labelimages-link {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.3rem 0.4rem;
  border-radius: var(--_radius);
  color: var(--_sub-link);
  text-decoration: none;
  transition: background-color var(--_speed) ease, color var(--_speed) ease;
}

.hk-fm-labelimages-link:hover,
.hk-fm-labelimages-link:focus-visible {
  background: var(--_frame-bg);
  color: var(--_sub-link-hover);
  outline: none;
}

.hk-fm-labelimages-img {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hk-fm-labelimages-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.hk-fm-labelimages-name {
  min-width: 0;
}

/* slider listing (horizontal scroller + prev/next, enhanced by JS) */
.hk-fm-listing--slider {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.hk-fm-slider-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
}

.hk-fm-slider-item {
  flex: 0 0 auto;
  width: 7rem;
}

.hk-fm-slider-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  text-align: center;
  color: var(--_sub-link);
  text-decoration: none;
}

.hk-fm-slider-link:hover,
.hk-fm-slider-link:focus-visible {
  color: var(--_sub-link-hover);
  outline: none;
}

.hk-fm-slider-img img {
  max-width: 100%;
  height: auto;
  max-height: 3.5rem;
  object-fit: contain;
}

.hk-fm-slider-name {
  font-size: 0.8em;
}

.hk-fm-slider-nav {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  background: var(--_sub-bg);
  color: var(--_sub-text);
  border: 1px solid var(--_frame-border);
  border-radius: 50%;
  line-height: 1;
  cursor: pointer;
}

.hk-fm-slider-nav[disabled] {
  opacity: 0.4;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .hk-fm-slider-track {
    scroll-behavior: auto;
  }
}

/* ----------------------------------------------------------------------------
 * Overflow toggler + hidden-entries panel
 * ------------------------------------------------------------------------- */
.hk-fm-toggler {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  align-self: stretch;
}

.hk-fm-toggler-icon,
.hk-fm-toggler-icon::before,
.hk-fm-toggler-icon::after {
  display: block;
  width: 1.25rem;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.hk-fm-toggler-icon {
  position: relative;
}

.hk-fm-toggler-icon::before,
.hk-fm-toggler-icon::after {
  content: "";
  position: absolute;
  left: 0;
}

.hk-fm-toggler-icon::before { top: -6px; }
.hk-fm-toggler-icon::after { top: 6px; }

.hk-fm-hidden-entries-container {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: var(--_z-submenu);
  flex-direction: column;
  min-width: 12rem;
  padding: 0.5rem;
  background: var(--_sub-bg);
  border: 1px solid var(--_frame-border);
  border-radius: var(--_radius);
  box-shadow: var(--_submenu-shadow);
}

.hk-fm-hidden-entries-container.hk-fm-active {
  display: flex !important;
}

/* nested entries inside the overflow panel stack vertically with static submenus */
.hk-fm-hidden-entries-container .hk-fm-entry {
  display: block;
}

.hk-fm-hidden-entries-container .hk-fm-submenu {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  box-shadow: none;
  border: 0;
  padding: 0.25rem 0 0.5rem 0.75rem;
}

/* ----------------------------------------------------------------------------
 * State helpers
 * ------------------------------------------------------------------------- */
.hk-fm-hidden {
  display: none !important;
}

.hk-fm-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--_z-sticky);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.hk-fm-sticky-placeholder {
  display: block;
}

/* lock background scroll while the mobile panel is open */
.hk-fm-mobile-noscroll {
  overflow: hidden;
}

/* ----------------------------------------------------------------------------
 * Mobile (<= 736px): collapse to toggler-driven vertical panel
 * ------------------------------------------------------------------------- */
@media (max-width: 736px) {
  .hk-fm-entry-wrapper {
    flex-wrap: wrap;
  }

  /* the toggler is the only visible top-level control; groups fold below it */
  .hk-fm-entry-type-toggler {
    order: -1;
    margin-left: auto;
  }

  .hk-fm-entry-group-left,
  .hk-fm-entry-group-right {
    flex: 1 1 100%;
    flex-direction: column;
    margin-left: 0;
  }

  /* groups stay collapsed until the toggler sets .hk-fm-open on the nav */
  .hk-fm:not(.hk-fm-open) .hk-fm-entry-group-left,
  .hk-fm:not(.hk-fm-open) .hk-fm-entry-group-right {
    display: none;
  }

  .hk-fm-entry {
    display: block;
  }

  .hk-fm-entry-label {
    width: 100%;
    justify-content: space-between;
  }

  /* submenus render inline (accordion) on mobile, not as floating popovers */
  .hk-fm-submenu {
    position: static;
    width: auto;
    min-width: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: hidden;
    transform: none;
    max-height: 0;
    padding: 0 0.75rem;
    overflow: hidden;
    transition: max-height var(--_speed) ease, padding var(--_speed) ease;
  }

  .hk-fm-entry.hk-fm-active > .hk-fm-submenu {
    visibility: visible;
    max-height: 80vh;
    padding: 0.5rem 0.75rem 0.75rem;
    overflow: auto;
  }

  .hk-fm-submenu-align-center,
  .hk-fm-entry.hk-fm-active > .hk-fm-submenu-align-center {
    left: auto;
    transform: none;
  }

  .hk-fm-boxarea {
    grid-template-columns: 1fr;
    grid-template-areas:
      "top"
      "left"
      "center"
      "right"
      "bottom";
  }

  .hk-fm-sticky {
    width: 100%;
  }
}

/* ----------------------------------------------------------------------------
 * Reduced motion
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hk-fm-entry-label,
  .hk-fm-submenu,
  .hk-fm-caret-down,
  .hk-fm-listing .hk-fm-link {
    transition: none !important;
  }
}

/* ============================================================================
 * Hookain bar theme + full-width mega panel (light "world" pass, 2026-06-18).
 * Scoped to the owned .hkfm-bar mount and to full-width dropdowns, so the
 * structural defaults above stay untouched for any other mount.
 *
 * Design target = the real hookain.de / PROTO look (SESSION-HANDOFF.md §2.1):
 * a LIGHT bar with coloured "world" groups (SHISHA = red, VAPE = teal), small
 * per-entry line-icons and a right-aligned red "Sale". The colours are driven
 * by world classes set per entry via the model's `cssClass` field (rendered
 * onto the .hk-fm-entry element in entry.tpl line 2):
 *   - .hkfm-world-shisha  -> red pill + red top accent + red diagonal hatch
 *   - .hkfm-world-vape     -> teal pill + teal top accent + teal hatch
 *   - .hkfm-sale           -> red label + tag icon, right group
 * Per-entry icons already render via entry.tpl line 9 (font icon span or img),
 * so they need no backend change. See docs/build/flexmenu/bar-design-draft.md.
 *
 * Bar background is themable via --hkfm-bar-bg (fallback #ffffff) so the editor
 * can drive it later (SESSION-HANDOFF.md §8 "--hkfm-bar-bg token").
 * ========================================================================= */

/* light, branded top bar */
.hkfm-bar {
  --hkfm-bar-bg: #ffffff;
  --hkfm-bar-border: #e7e2da;
  --hkfm-brand-red: #e2001a;
  --hkfm-brand-red-soft: rgba(226, 0, 26, 0.08);
  --hkfm-world-vape: #0fb5ad;
  --hkfm-world-vape-soft: rgba(15, 181, 173, 0.1);

  background: var(--hkfm-bar-bg);
  border-bottom: 1px solid var(--hkfm-bar-border);
  box-shadow: 0 1px 2px rgba(20, 17, 15, 0.04);
}

.hkfm-bar .hk-fm {
  --hkfm-bg: transparent;
  --hkfm-link: #2c2925;
  --hkfm-link-hover: #14110f;
  --hkfm-link-hover-bg: rgba(20, 17, 15, 0.05);
  --hkfm-link-active: var(--hkfm-brand-red, #e2001a);
  --hkfm-sub-bg: #ffffff;
  --hkfm-sub-text: #2c2925;
  --hkfm-sub-link: #3a3631;
  --hkfm-sub-link-hover: var(--hkfm-brand-red, #e2001a);
  --hkfm-heading: #14110f;
  --hkfm-frame-border: #ece8e1;
  --hkfm-frame-bg: #faf8f4;
}

/* bar labels: roomier, uppercase, brand underline accent on hover/open */
.hkfm-bar .hk-fm-entry-label {
  padding: 0.85rem 1.05rem;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Force the token colour on the labels: the PROTO theme styles the anchor
 * at equal specificity, so scope through .hk-fm (0-3-0, + :link/:visited) to
 * win and keep the bar text correct on the light bar. */
.hkfm-bar .hk-fm .hk-fm-entry-label,
.hkfm-bar .hk-fm .hk-fm-entry-label:link,
.hkfm-bar .hk-fm .hk-fm-entry-label:visited {
  color: var(--_link);
}

.hkfm-bar .hk-fm .hk-fm-entry-label:hover,
.hkfm-bar .hk-fm .hk-fm-entry-label:focus-visible {
  color: var(--_link-hover);
}

.hkfm-bar .hk-fm .hk-fm-entry.hk-fm-active > .hk-fm-entry-label {
  color: var(--_link-active);
}

.hkfm-bar .hk-fm-entry-label:hover,
.hkfm-bar .hk-fm-entry.hk-fm-active > .hk-fm-entry-label {
  box-shadow: inset 0 -3px 0 var(--_link-active);
}

.hkfm-bar .hk-fm-entry.hk-fm-active > .hk-fm-entry-label {
  color: var(--_link-active);
  background: transparent;
}

/* per-entry line-icon: sized + tinted to the current label colour so it reads
 * as a small monoline glyph in front of the label (entry.tpl line 9). */
.hkfm-bar .hk-fm-entry-icon {
  max-height: 1.05em;
  opacity: 0.85;
  object-fit: contain;
}

.hkfm-bar .hk-fm-entry-font-icon {
  font-size: 1em;
  opacity: 0.85;
  color: currentColor;
}

/* ----------------------------------------------------------------------------
 * "World" PANELS (DOM: .hkfm-worldgroup.hkfm-worldgroup-{shisha,vape} wraps the
 * pill entry + its item entries, emitted by menu.tpl). Each world is ONE rounded
 * coloured BOX: a clearly visible accent tint, a subtle diagonal accent hatch, a
 * 2-3px accent top-accent border and rounded corners. The PANEL carries the
 * colour; the inner entries are transparent (only the pill stays filled and the
 * items get an accent icon + accent hover). The per-world accent lives in
 * --hkfm-accent on the panel, so the pill, item icons and item hovers inherit it.
 * ------------------------------------------------------------------------- */

/* accent assignment on the PANEL — the pill + items inherit it */
.hkfm-bar .hkfm-worldgroup-shisha {
  --hkfm-accent: var(--hkfm-brand-red, #e2001a);
  --hkfm-accent-soft: var(--hkfm-brand-red-soft, rgba(226, 0, 26, 0.08));
  --hkfm-accent-tint: rgba(226, 0, 26, 0.085);
  --hkfm-accent-hatch: rgba(226, 0, 26, 0.14);
}

.hkfm-bar .hkfm-worldgroup-vape {
  --hkfm-accent: var(--hkfm-world-vape, #0fb5ad);
  --hkfm-accent-soft: var(--hkfm-world-vape-soft, rgba(15, 181, 173, 0.1));
  --hkfm-accent-tint: rgba(15, 181, 173, 0.11);
  --hkfm-accent-hatch: rgba(15, 181, 173, 0.16);
}

/* the panel itself: a flex row holding the pill + items, painted as a clearly
 * visible rounded coloured box. Layer 1 = the accent top-accent border (2.5px),
 * layer 2 = a fine diagonal hatch, layer 3 = the flat accent tint ground. */
.hkfm-bar .hkfm-worldgroup {
  display: flex;
  align-items: stretch;
  margin: 0.3rem 0.4rem 0.3rem 0;
  padding: 0.15rem 0.3rem;
  border-radius: 9px;
  background-color: var(--hkfm-accent-tint, transparent);
  background-image:
    linear-gradient(var(--hkfm-accent), var(--hkfm-accent)),
    repeating-linear-gradient(
      135deg,
      var(--hkfm-accent-hatch) 0,
      var(--hkfm-accent-hatch) 1px,
      transparent 1px,
      transparent 9px
    );
  background-repeat: no-repeat, repeat;
  background-size: 100% 2.5px, auto;
  background-position: top left, top left;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hkfm-accent) 14%, transparent);
}

/* the first panel hugs the bar's left edge a touch tighter */
.hkfm-bar .hk-fm-entry-group-left > .hkfm-worldgroup:first-child {
  margin-left: 0.1rem;
}

/* the two world panels drift apart fluidly above 1440px (0 gap at/under the
 * target width) so the bar uses the extra space instead of leaving a void. */
.hkfm-bar .hk-fm-entry-group-left {
  gap: clamp(0rem, calc((100vw - 1440px) * 0.05), 3rem);
}

/* inner entries are transparent — the panel provides the tint/hatch/accent */
.hkfm-bar .hkfm-worldgroup .hk-fm-entry.hkfm-world,
.hkfm-bar .hkfm-worldgroup .hk-fm-entry.hkfm-world-item,
.hkfm-bar .hkfm-worldgroup .hk-fm-entry[class*="hkfm-world"] {
  background: transparent;
  background-image: none;
  border-radius: 0;
}

/* the world label = a filled rounded PILL in the accent colour at the panel's
 * left, white uppercase bold text, lifted with a soft tinted shadow */
.hkfm-bar .hkfm-worldgroup .hk-fm-entry.hkfm-world > .hk-fm-entry-label,
.hkfm-bar .hk-fm .hkfm-worldgroup .hk-fm-entry.hkfm-world > .hk-fm-entry-label,
.hkfm-bar .hk-fm .hkfm-worldgroup .hk-fm-entry.hkfm-world > .hk-fm-entry-label:link,
.hkfm-bar .hk-fm .hkfm-worldgroup .hk-fm-entry.hkfm-world > .hk-fm-entry-label:visited {
  margin: 0.25rem 0.5rem 0.25rem 0.15rem;
  padding: 0.32rem 0.95rem;
  color: #ffffff;
  background: var(--hkfm-accent);
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  box-shadow: 0 2px 6px -1px color-mix(in srgb, var(--hkfm-accent) 45%, transparent);
}

.hkfm-bar .hkfm-worldgroup .hk-fm-entry.hkfm-world > .hk-fm-entry-label:hover,
.hkfm-bar .hkfm-worldgroup .hk-fm-entry.hkfm-world.hk-fm-active > .hk-fm-entry-label {
  color: #ffffff;
  background: var(--hkfm-accent);
  filter: brightness(1.06);
  box-shadow: 0 3px 9px -1px color-mix(in srgb, var(--hkfm-accent) 55%, transparent);
}

/* world pill caret + icon ride on the white pill text */
.hkfm-bar .hkfm-worldgroup .hk-fm-entry.hkfm-world > .hk-fm-entry-label .hk-fm-caret-down,
.hkfm-bar .hkfm-worldgroup .hk-fm-entry.hkfm-world > .hk-fm-entry-label .hk-fm-entry-font-icon,
.hkfm-bar .hkfm-worldgroup .hk-fm-entry.hkfm-world > .hk-fm-entry-label .hk-fm-entry-icon {
  color: #ffffff;
  opacity: 1;
}

/* items in a world: transparent label, dark text; the small line-icon
 * (~15-16px, before the label) is tinted to the world accent so the group reads
 * as a colour family even at rest */
.hkfm-bar .hkfm-worldgroup .hk-fm-entry.hkfm-world-item > .hk-fm-entry-label .hk-fm-entry-font-icon {
  font-size: 15px;
  color: var(--hkfm-accent);
  opacity: 0.9;
}

.hkfm-bar .hkfm-worldgroup .hk-fm-entry.hkfm-world-item > .hk-fm-entry-label .hk-fm-entry-icon {
  max-height: 16px;
  color: var(--hkfm-accent);
  opacity: 0.9;
}

/* item label: transparent, a touch tighter so the panel feels dense and retail;
 * the world accent underline grows in + the label tints on hover/open */
/* Fluid item spacing: pinned to the tight 0.5rem floor at <=1440px (the width the
 * bar is tuned to fit), then grows with viewport width above 1440 so the bar
 * breathes on wider screens instead of staying cramped. The calc term is negative
 * below 1440 so clamp() holds the floor — no regression at or under the target. */
.hkfm-bar .hkfm-worldgroup .hk-fm-entry.hkfm-world-item > .hk-fm-entry-label {
  padding-left: clamp(0.5rem, calc(0.5rem + (100vw - 1440px) * 0.012), 1rem);
  padding-right: clamp(0.5rem, calc(0.5rem + (100vw - 1440px) * 0.012), 1rem);
  background: transparent;
}

.hkfm-bar .hkfm-worldgroup .hk-fm-entry.hkfm-world-item > .hk-fm-entry-label:hover,
.hkfm-bar .hkfm-worldgroup .hk-fm-entry.hkfm-world-item.hk-fm-active > .hk-fm-entry-label {
  color: var(--hkfm-accent);
  background: color-mix(in srgb, var(--hkfm-accent) 9%, transparent);
  box-shadow: inset 0 -3px 0 var(--hkfm-accent, var(--_link-active));
}

.hkfm-bar .hkfm-worldgroup .hk-fm-entry.hkfm-world-item > .hk-fm-entry-label:hover .hk-fm-entry-font-icon,
.hkfm-bar .hkfm-worldgroup .hk-fm-entry.hkfm-world-item > .hk-fm-entry-label:hover .hk-fm-entry-icon {
  opacity: 1;
}

/* ----------------------------------------------------------------------------
 * Right-aligned "Sale" — red label with a tag glyph.
 * ------------------------------------------------------------------------- */
.hkfm-bar .hk-fm-entry.hkfm-sale > .hk-fm-entry-label,
.hkfm-bar .hk-fm .hk-fm-entry.hkfm-sale > .hk-fm-entry-label,
.hkfm-bar .hk-fm .hk-fm-entry.hkfm-sale > .hk-fm-entry-label:link,
.hkfm-bar .hk-fm .hk-fm-entry.hkfm-sale > .hk-fm-entry-label:visited {
  color: var(--hkfm-brand-red, #e2001a);
  font-weight: 800;
  letter-spacing: 0.04em;
}

.hkfm-bar .hk-fm-entry.hkfm-sale > .hk-fm-entry-label:hover,
.hkfm-bar .hk-fm-entry.hkfm-sale.hk-fm-active > .hk-fm-entry-label {
  color: var(--hkfm-brand-red, #e2001a);
  background: var(--hkfm-brand-red-soft, rgba(226, 0, 26, 0.08));
  box-shadow: inset 0 -3px 0 var(--hkfm-brand-red, #e2001a);
}

.hkfm-bar .hk-fm-entry.hkfm-sale .hk-fm-entry-font-icon,
.hkfm-bar .hk-fm-entry.hkfm-sale .hk-fm-entry-icon {
  color: var(--hkfm-brand-red, #e2001a);
  opacity: 1;
}

/* fallback tag glyph when the entry has no font/image icon configured */
.hkfm-bar .hk-fm-entry.hkfm-sale > .hk-fm-entry-label .hk-fm-entry-label--name::before {
  content: "";
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.4rem;
  vertical-align: -0.1em;
  background-color: currentColor;
  -webkit-mask: var(--hkfm-tag-icon) center / contain no-repeat;
  mask: var(--hkfm-tag-icon) center / contain no-repeat;
}

.hkfm-bar .hk-fm-entry.hkfm-sale {
  --hkfm-tag-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Cline x1='7' y1='7' x2='7.01' y2='7'/%3E%3C/svg%3E");
}

/* if the admin supplied a real font/image/svg icon, hide the fallback tag */
.hkfm-bar .hk-fm-entry.hkfm-sale > .hk-fm-entry-label:has(.hk-fm-entry-font-icon) .hk-fm-entry-label--name::before,
.hkfm-bar .hk-fm-entry.hkfm-sale > .hk-fm-entry-label:has(.hk-fm-entry-icon) .hk-fm-entry-label--name::before,
.hkfm-bar .hk-fm-entry.hkfm-sale > .hk-fm-entry-label:has(.hk-fm-entry-svg-icon) .hk-fm-entry-label--name::before {
  display: none;
}

/* ----------------------------------------------------------------------------
 * Owned inline SVG line-icons (FlexMenuIcons registry, entry.tpl iconType='svg').
 * The <svg stroke="currentColor"> tints to the label colour automatically, so the
 * pill icon reads white, the world-item icon picks up the world accent and the
 * Sale icon reads red — no mask hacks, no CDN, no FontAwesome.
 * ------------------------------------------------------------------------- */
.hk-fm-entry-svg-icon {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  vertical-align: -0.15em;
}

.hk-fm-entry-svg-icon svg.hkfm-ico {
  display: block;
  width: 1.05em;
  height: 1.05em;
}

.hkfm-bar .hk-fm-entry-svg-icon {
  margin-right: clamp(0.3rem, calc(0.3rem + (100vw - 1440px) * 0.006), 0.55rem);
}

/* world pill: white icon on the filled accent pill */
.hkfm-bar .hkfm-worldgroup .hk-fm-entry.hkfm-world > .hk-fm-entry-label .hk-fm-entry-svg-icon {
  color: #ffffff;
}

.hkfm-bar .hkfm-worldgroup .hk-fm-entry.hkfm-world > .hk-fm-entry-label .hk-fm-entry-svg-icon svg.hkfm-ico {
  width: 1em;
  height: 1em;
}

/* world item: accent-tinted ~15px glyph, brightens on hover/open */
.hkfm-bar .hkfm-worldgroup .hk-fm-entry.hkfm-world-item > .hk-fm-entry-label .hk-fm-entry-svg-icon {
  color: var(--hkfm-accent);
  opacity: 0.9;
}

.hkfm-bar .hkfm-worldgroup .hk-fm-entry.hkfm-world-item > .hk-fm-entry-label .hk-fm-entry-svg-icon svg.hkfm-ico {
  width: 15px;
  height: 15px;
}

.hkfm-bar .hkfm-worldgroup .hk-fm-entry.hkfm-world-item > .hk-fm-entry-label:hover .hk-fm-entry-svg-icon,
.hkfm-bar .hkfm-worldgroup .hk-fm-entry.hkfm-world-item.hk-fm-active > .hk-fm-entry-label .hk-fm-entry-svg-icon {
  opacity: 1;
}

/* Sale: red tag glyph */
.hkfm-bar .hk-fm-entry.hkfm-sale .hk-fm-entry-svg-icon {
  color: var(--hkfm-brand-red, #e2001a);
}

/* world PANELS + pills + sale fold back to plain accordion rows on mobile:
 * the panel drops its box (tint/hatch/accent/rounding/flex) and stacks its
 * entries, and the pill becomes a plain full-width row. */
@media (max-width: 736px) {
  .hkfm-bar .hkfm-worldgroup {
    display: block;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background-color: transparent;
    background-image: none;
    box-shadow: none;
  }

  .hkfm-bar .hkfm-worldgroup .hk-fm-entry.hkfm-world > .hk-fm-entry-label {
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    justify-content: space-between;
  }
}

/* ---- full-width mega panel ----
 * Position the full dropdown against the full-width wrapper (not the ~1-cell
 * entry) so it actually spans the bar. :has() picks the entries that own a
 * full dropdown; where unsupported the panel simply keeps the cell width. */
.hk-fm-entry:has(> .hk-fm-submenu-align-full) {
  position: static;
}

.hk-fm-submenu-align-full {
  left: 0;
  right: 0;
  width: 100%;
  padding: 1.75rem clamp(1rem, 4vw, 3rem) 2rem;
  border: 0;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 26px 44px -16px rgba(0, 0, 0, 0.4);
}

/* full-panel internal layout: optional description = narrow sidebar with a
 * divider, the subcategory grid fills the rest. Flex (not the rigid 3-col grid)
 * so a missing description lets the grid take the whole panel. */
.hk-fm-submenu-align-full .hk-fm-boxarea {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.5rem;
}

.hk-fm-submenu-align-full .hk-fm-box-top,
.hk-fm-submenu-align-full .hk-fm-box-bottom {
  flex: 1 1 100%;
}

.hk-fm-submenu-align-full .hk-fm-box-left {
  flex: 0 0 15rem;
  max-width: 16rem;
  padding-right: 1.75rem;
  border-right: 1px solid var(--_frame-border);
}

.hk-fm-submenu-align-full .hk-fm-box-center,
.hk-fm-submenu-align-full .hk-fm-box-right {
  flex: 1 1 0;
  min-width: 0;
}

/* the 2-level link list flows into newspaper columns; each parent+children
 * group stays intact (a "column" in the mega grid) */
.hk-fm-submenu-align-full .hk-fm-listing--linklist {
  columns: 240px;
  column-gap: 2.25rem;
}

.hk-fm-submenu-align-full .hk-fm-listing--linklist > .hk-fm-listing--item {
  break-inside: avoid;
  margin: 0 0 1.4rem;
}

/* parent category = bold heading with a hairline rule under it */
.hk-fm-submenu-align-full .hk-fm-listing--linklist-label {
  display: block;
  margin-bottom: 0.55rem;
  padding-bottom: 0.4rem;
  color: var(--_heading);
  font-weight: 700;
  font-size: 0.92rem;
  border-bottom: 1px solid var(--_frame-border);
}

/* children list: drop the indent border, comfortable rows */
.hk-fm-submenu-align-full .hk-fm-listing--linklist-group {
  margin: 0;
  padding: 0;
  border: 0;
}

.hk-fm-submenu-align-full .hk-fm-listing--linklist-group .hk-fm-link {
  padding: 0.2rem 0;
  font-size: 0.88rem;
}

/* "Alle anzeigen (N)" tail link: italic + muted, like the reference */
.hk-fm-submenu-align-full .hk-fm-listing--more {
  margin-top: 0.2rem;
}

.hk-fm-submenu-align-full .hk-fm-listing--more-link {
  font-style: italic;
  font-size: 0.82rem;
  color: var(--_sub-link-hover);
}

/* description box (left column of the mega panel) reads as lead copy */
.hk-fm-submenu-align-full .hk-fm-content-description--title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--_heading);
}

.hk-fm-submenu-align-full .hk-fm-content-description--text {
  font-size: 0.86rem;
  line-height: 1.5;
  color: #6b655d;
}

/* hk-flexmenu-30
 * Preserve the complete two-world FlexMenu. The only visual refinement is a
 * slimmer desktop bar, connected world labels, 4px corners and a 2px top line.
 * Priority, ordering, overall length and mobile behaviour remain unchanged. */
@media (min-width: 992px) {
  body .hkfm-bar {
    --hkfm-brand-red: #e2233b;
    --hkfm-brand-red-soft: rgba(226, 35, 59, 0.1);
    --hkfm-world-vape: #1fb6c9;
    --hkfm-world-vape-soft: rgba(31, 182, 201, 0.16);
    --hkfm-bar-height: 44px;
    --hkfm-panel-radius: 4px;
  }

  body .hkfm-bar .hk-fm {
    --_radius: var(--hkfm-panel-radius);
  }

  body .hkfm-bar .hk-fm-entry-wrapper,
  body .hkfm-bar .hk-fm-entry-label {
    min-height: var(--hkfm-bar-height);
  }

  body .hkfm-bar .hk-fm-entry-label {
    padding: 0.48rem 0.75rem;
  }

  body .hkfm-bar .hkfm-worldgroup-shisha {
    --hkfm-accent-tint: #f6e8ea;
    --hkfm-accent-hatch: rgba(226, 35, 59, 0.1);
  }

  body .hkfm-bar .hkfm-worldgroup-vape {
    --hkfm-accent-tint: #dff2f5;
    --hkfm-accent-hatch: rgba(31, 182, 201, 0.16);
  }

  body .hkfm-bar .hkfm-worldgroup {
    margin-top: 0;
    margin-bottom: 0;
    padding: 0 0.2rem 0 0;
    border-radius: var(--hkfm-panel-radius) var(--hkfm-panel-radius) 0 0;
    background-size: 100% 2px, auto;
    box-shadow:
      inset 0 2px 0 var(--hkfm-accent),
      inset 0 0 0 1px color-mix(in srgb, var(--hkfm-accent) 12%, transparent);
  }

  body .hkfm-bar .hkfm-worldgroup .hk-fm-entry.hkfm-world > .hk-fm-entry-label,
  body .hkfm-bar .hk-fm .hkfm-worldgroup .hk-fm-entry.hkfm-world > .hk-fm-entry-label,
  body .hkfm-bar .hk-fm .hkfm-worldgroup .hk-fm-entry.hkfm-world > .hk-fm-entry-label:link,
  body .hkfm-bar .hk-fm .hkfm-worldgroup .hk-fm-entry.hkfm-world > .hk-fm-entry-label:visited {
    min-height: var(--hkfm-bar-height);
    margin: 0 0.35rem 0 0;
    padding: 0.28rem 0.72rem;
    border-radius: calc(var(--hkfm-panel-radius) - 1px) 0 0 0;
    font-family: "Space Mono", ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    box-shadow: none;
  }

  body .hkfm-bar .hkfm-worldgroup .hk-fm-entry.hkfm-world-item > .hk-fm-entry-label {
    padding-left: clamp(0.45rem, calc(0.45rem + (100vw - 1440px) * 0.01), 0.8rem);
    padding-right: clamp(0.45rem, calc(0.45rem + (100vw - 1440px) * 0.01), 0.8rem);
  }
}

/* ============================================================================
 * MOBILE variant (.hk-fm--mobile) - FM-M4
 *
 * Structural + base skin for the mobile drawer DOM emitted by menu.mobile.tpl + mobile/*.tpl.
 * Plugin owns structure/state; HookainV2 theme owns final brand tints via --hkfm-* / --hkfm-world-*.
 * Drawer open/close, body scroll-lock and the burger trigger are wired by the mount (FM-M5); this file
 * positions the drawer (off-canvas, .is-open reveals) and styles the segment/panels/cards/rows.
 * ========================================================================= */

.hk-fm--mobile {
  --hkfm-m-bg: var(--hkfm-bg, #14110f);
  --hkfm-m-fg: var(--hkfm-link, #f5f3f0);
  --hkfm-m-muted: rgba(255, 255, 255, 0.55);
  --hkfm-m-line: rgba(255, 255, 255, 0.12);
  --hkfm-m-card: rgba(255, 255, 255, 0.04);
  --hkfm-m-card-hover: rgba(255, 255, 255, 0.09);
  --hkfm-world-shisha: var(--hkfm-shisha, #e2483d);
  --hkfm-world-vape: var(--hkfm-vape, #21b6a8);
  --hkfm-accent: var(--hkfm-link-active, var(--hkfm-world-shisha));
  --hkfm-dur: 220ms;
  --hkfm-ease: cubic-bezier(0.4, 0, 0.2, 1);

  position: fixed;
  inset: 0 auto 0 0;
  /* Stays BELOW consent (1055/1060), age-gate (1090/1095) and sidecart (1085/1086) so those overlays are
     never trapped behind the drawer; ABOVE the tabbar (1020). FM-M5 owns body scroll-lock + consent-open QA. */
  z-index: 1050;
  display: flex;
  flex-direction: column;
  width: 84vw;
  max-width: 400px;
  height: 100%;
  height: 100dvh;
  background: var(--hkfm-m-bg);
  color: var(--hkfm-m-fg);
  transform: translateX(-100%);
  transition: transform var(--hkfm-dur) var(--hkfm-ease);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
  -webkit-overflow-scrolling: touch;
}
.hk-fm--mobile.is-open { transform: translateX(0); }

/* Backdrop (mount toggles .is-open alongside the drawer). */
.hk-fm-mobile-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1049;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--hkfm-dur, 220ms) ease;
}
.hk-fm-mobile-backdrop.is-open { opacity: 1; visibility: visible; }

/* Body scroll-lock while the drawer is open (the one chosen class; FM-M5). */
body.hk-fm-mobile-open { overflow: hidden; }

/* Header + close (FM-M5) */
.hk-fm-mobile__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0.75rem;
  border-bottom: 1px solid var(--hkfm-m-line);
}
.hk-fm-mobile__brand {
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  color: var(--hkfm-m-fg);
}
.hk-fm-mobile__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: var(--hkfm-m-card);
  color: var(--hkfm-m-fg);
  cursor: pointer;
}
.hk-fm-mobile__close-x {
  position: relative;
  width: 16px;
  height: 16px;
}
.hk-fm-mobile__close-x::before,
.hk-fm-mobile__close-x::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 16px;
  height: 2px;
  margin-top: -1px;
  background: currentColor;
}
.hk-fm-mobile__close-x::before { transform: rotate(45deg); }
.hk-fm-mobile__close-x::after { transform: rotate(-45deg); }

/* World switch (segment) */
.hk-fm-mobile__worlds {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem;
  border-bottom: 1px solid var(--hkfm-m-line);
}
.hk-fm-mobile__world-btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--hkfm-m-line);
  border-radius: 999px;
  background: var(--hkfm-m-card);
  color: var(--hkfm-m-fg);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--hkfm-dur) var(--hkfm-ease), border-color var(--hkfm-dur) var(--hkfm-ease);
}
.hk-fm-mobile__world-ico { display: inline-flex; }
.hk-fm-mobile__world-ico svg { width: 20px; height: 20px; }
.hk-fm-mobile__world-btn[aria-pressed="true"] { border-color: transparent; color: #fff; }
.hk-fm-mobile__world-btn.hkfm-world-shisha[aria-pressed="true"] { background: var(--hkfm-world-shisha); }
.hk-fm-mobile__world-btn.hkfm-world-vape[aria-pressed="true"] { background: var(--hkfm-world-vape); }

/* Panel stack */
.hk-fm-mobile__stack { position: relative; flex: 1 1 auto; overflow: hidden; }
.hk-fm-mobile__panel {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.75rem;
}
.hk-fm-mobile__panel[hidden] { display: none; }
.hk-fm--mobile[data-hkfm-dir="forward"] .hk-fm-mobile__panel.is-active {
  animation: hkfm-in-right var(--hkfm-dur) var(--hkfm-ease);
}
.hk-fm--mobile[data-hkfm-dir="back"] .hk-fm-mobile__panel.is-active {
  animation: hkfm-in-left var(--hkfm-dur) var(--hkfm-ease);
}
@keyframes hkfm-in-right { from { transform: translateX(28px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes hkfm-in-left { from { transform: translateX(-28px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* L1 world grid + cards */
.hk-fm-mobile__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  align-content: start;
}
.hk-fm-mobile__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-height: 78px;
  padding: 0.6rem 0.6rem 0.7rem;
  border: 1px solid var(--hkfm-m-line);
  border-radius: 13px;
  background: var(--hkfm-m-card);
  color: var(--hkfm-m-fg);
  text-decoration: none;
  transition: background var(--hkfm-dur) var(--hkfm-ease), border-color var(--hkfm-dur) var(--hkfm-ease);
}
.hk-fm-mobile__card:hover,
.hk-fm-mobile__card:focus-visible { background: var(--hkfm-m-card-hover); }
/* world-tinted icon chip (duotone feel): faint tint plate behind the stroked glyph */
.hk-fm-mobile__card-art {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  color: var(--hkfm-m-fg);
  background: color-mix(in srgb, currentColor 13%, transparent);
}
.hk-fm-mobile__card-art svg { width: 21px; height: 21px; }
.hk-fm-mobile__card-img { width: 38px; height: 38px; object-fit: contain; }
.hk-fm-mobile__card-label { font-weight: 600; line-height: 1.2; }
.hk-fm-mobile__card-chevron {
  position: absolute;
  right: 0.7rem;
  bottom: 0.7rem;
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--hkfm-m-muted);
  border-right: 2px solid var(--hkfm-m-muted);
  transform: rotate(45deg);
}
/* world-tinted card art (grid carries the world) */
.hk-fm-mobile__grid[data-hkfm-world="shisha"] .hk-fm-mobile__card-art { color: var(--hkfm-world-shisha); }
.hk-fm-mobile__grid[data-hkfm-world="vape"] .hk-fm-mobile__card-art { color: var(--hkfm-world-vape); }

/* Split home (L0): both worlds side by side - left col = Shisha, right = Vape. Each world: a clickable
   header (drills to the world's full overview) + that world's category SYMBOL CARDS (symbol big, name below). */
.hk-fm-mobile__home-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  align-content: start;
}
.hk-fm-mobile__home-col { min-width: 0; }
.hk-fm-mobile__home-col[data-hkfm-world="shisha"] { --hkfm-accent: var(--hkfm-world-shisha); }
.hk-fm-mobile__home-col[data-hkfm-world="vape"] { --hkfm-accent: var(--hkfm-world-vape); }

/* Clickable world header (the Shisha / Vape pill) - drills to that world's overview. */
.hk-fm-mobile__col-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  min-height: 44px;
  padding: 0.4rem 0.7rem;
  margin-bottom: 0.5rem;
  border: 0;
  border-radius: 999px;
  background: var(--hkfm-accent);
  color: #fff;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.hk-fm-mobile__col-head .hk-fm-mobile__world-ico { display: inline-flex; flex: none; }
.hk-fm-mobile__col-head .hk-fm-mobile__world-ico svg { width: 18px; height: 18px; }
.hk-fm-mobile__col-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hk-fm-mobile__col-chevron {
  flex: none;
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.85;
}

/* Card grids: home = 1 card per row inside each half-width world column; world overview = full-width 1-col. */
.hk-fm-mobile__home-grid { display: grid; grid-template-columns: 1fr; gap: 0.5rem; }
.hk-fm-mobile__world[data-hkfm-world="shisha"] { --hkfm-accent: var(--hkfm-world-shisha); }
.hk-fm-mobile__world[data-hkfm-world="vape"] { --hkfm-accent: var(--hkfm-world-vape); }
.hk-fm-mobile__world .hk-fm-mobile__level-art { color: var(--hkfm-accent); }
.hk-fm-mobile__world-grid { display: grid; grid-template-columns: 1fr; gap: 0.6rem; }

/* Big symbol on top, category name below, centred inside the box. */
.hk-fm-mobile__home-grid .hk-fm-mobile__card,
.hk-fm-mobile__world-grid .hk-fm-mobile__card {
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  padding: 0.85rem 0.5rem 0.7rem;
}
.hk-fm-mobile__home-grid .hk-fm-mobile__card-art,
.hk-fm-mobile__world-grid .hk-fm-mobile__card-art {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  color: var(--hkfm-accent);
}
.hk-fm-mobile__home-grid .hk-fm-mobile__card-art svg,
.hk-fm-mobile__world-grid .hk-fm-mobile__card-art svg { width: 28px; height: 28px; }
.hk-fm-mobile__home-grid .hk-fm-mobile__card-label,
.hk-fm-mobile__world-grid .hk-fm-mobile__card-label { font-size: 0.9rem; }
/* the bottom-right chevron is visual noise on a centred tile - the whole card drills */
.hk-fm-mobile__home-grid .hk-fm-mobile__card-chevron,
.hk-fm-mobile__world-grid .hk-fm-mobile__card-chevron { display: none; }
/* world overview is full-width, so its symbols can breathe a bit larger */
.hk-fm-mobile__world-grid .hk-fm-mobile__card-art { width: 60px; height: 60px; }
.hk-fm-mobile__world-grid .hk-fm-mobile__card-art svg { width: 32px; height: 32px; }
.hk-fm-mobile__world-grid .hk-fm-mobile__card-label { font-size: 1rem; }

/* Drilled panel head + breadcrumb */
.hk-fm-mobile__level-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.4rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--hkfm-m-line);
}
.hk-fm-mobile__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.25rem 0.25rem 0.25rem 0;
  border: 0;
  background: none;
  color: var(--hkfm-m-muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.hk-fm-mobile__back-ico {
  width: 9px;
  height: 9px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.hk-fm-mobile__level-title { flex: 1 1 auto; font-weight: 800; letter-spacing: -0.01em; }
.hk-fm-mobile__level-art { width: 26px; height: 26px; }
.hk-fm-mobile__level-art svg { width: 100%; height: 100%; }
.hk-fm-mobile__crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  color: var(--hkfm-m-muted);
}

/* Rows + View-All */
.hk-fm-mobile__viewall {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 0.7rem;
  margin-bottom: 0.4rem;
  border-radius: 11px;
  background: color-mix(in srgb, var(--hkfm-accent) 15%, transparent);
  color: var(--hkfm-accent);
  border: 1px solid color-mix(in srgb, var(--hkfm-accent) 38%, transparent);
  font-weight: 700;
  text-decoration: none;
}
.hk-fm-mobile__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.6rem 0.25rem;
  border-bottom: 1px solid var(--hkfm-m-line);
  color: var(--hkfm-m-fg);
  text-decoration: none;
}
.hk-fm-mobile__row:hover,
.hk-fm-mobile__row:focus-visible { color: #fff; }
.hk-fm-mobile__row-chevron {
  flex: none;
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--hkfm-m-muted);
  border-right: 2px solid var(--hkfm-m-muted);
  transform: rotate(45deg);
}

/* Utilities (home level only) */
.hk-fm-mobile__utilities {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.75rem;
  border-top: 1px solid var(--hkfm-m-line);
}
.hk-fm--mobile.is-drilled .hk-fm-mobile__utilities { display: none; }
.hk-fm-mobile__card--util {
  flex: 1 1 45%;
  flex-direction: row;
  align-items: center;
  min-height: 48px;
}

/* Footbar (thumb zone) */
.hk-fm-mobile__footbar {
  display: flex;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  border-top: 1px solid var(--hkfm-m-line);
}
.hk-fm-mobile__footbar button {
  flex: 1 1 0;
  min-height: 48px;
  border: 1px solid var(--hkfm-m-line);
  border-radius: 12px;
  background: var(--hkfm-m-card);
  color: var(--hkfm-m-fg);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.hk-fm-mobile__footbar button[hidden] { display: none; }
.hk-fm-mobile__footbar button[disabled] { opacity: 0.4; cursor: default; }

/* Per-world accent: tint the viewall + tree caret/links to the panel's world (red / teal). */
.hk-fm-mobile__panel[data-hkfm-parent="world:shisha"] { --hkfm-accent: var(--hkfm-world-shisha); }
.hk-fm-mobile__panel[data-hkfm-parent="world:vape"] { --hkfm-accent: var(--hkfm-world-vape); }

/* Inline accordion tree (category panel) - dense, scannable, one scroll, no further panels. */
.hk-fm-mobile__tree { list-style: none; margin: 0; padding: 0; }
.hk-fm-mobile__trow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  min-height: 44px;
  padding: 0.4rem 0.25rem;
  border: 0;
  border-bottom: 1px solid var(--hkfm-m-line);
  background: none;
  color: var(--hkfm-m-fg);
  font: inherit;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.hk-fm-mobile__trow:hover,
.hk-fm-mobile__trow:focus-visible { color: #fff; }
.hk-fm-mobile__tlabel { flex: 1 1 auto; min-width: 0; }
.hk-fm-mobile__tcaret {
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--hkfm-m-muted);
  border-bottom: 2px solid var(--hkfm-m-muted);
  transform: rotate(-45deg);
  transition: transform var(--hkfm-dur) var(--hkfm-ease);
}
.hk-fm-mobile__tnode.is-open > .hk-fm-mobile__trow .hk-fm-mobile__tcaret {
  transform: rotate(45deg);
  border-color: var(--hkfm-accent);
}
.hk-fm-mobile__tchildren {
  padding-left: 0.8rem;
  margin-left: 0.3rem;
  border-left: 1px solid var(--hkfm-m-line);
}
.hk-fm-mobile__tchildren[hidden] { display: none; }
.hk-fm-mobile__tviewall { color: var(--hkfm-accent); font-weight: 600; }

/* "You are here": weak accent wash on the current category, so the user's location is visible at a glance.
   The world grid carries its accent (panels set theirs near the top of this block). */
.hk-fm-mobile__grid[data-hkfm-world="shisha"] { --hkfm-accent: var(--hkfm-world-shisha); }
.hk-fm-mobile__grid[data-hkfm-world="vape"] { --hkfm-accent: var(--hkfm-world-vape); }
.hk-fm-mobile__trow.hk-fm-link-active,
.hk-fm-mobile__trow.is-current,
.hk-fm-mobile__row.hk-fm-link-active,
.hk-fm-mobile__homerow.hk-fm-link-active {
  background: color-mix(in srgb, var(--hkfm-accent) 13%, transparent);
  color: #fff;
  box-shadow: inset 3px 0 0 0 var(--hkfm-accent);
  border-radius: 0 6px 6px 0;
}
.hk-fm-mobile__viewall.hk-fm-link-active {
  background: color-mix(in srgb, var(--hkfm-accent) 24%, transparent);
  box-shadow: inset 0 0 0 1px var(--hkfm-accent);
}
.hk-fm-mobile__card.hk-fm-link-active {
  background: color-mix(in srgb, var(--hkfm-accent) 16%, var(--hkfm-m-card));
  border-color: color-mix(in srgb, var(--hkfm-accent) 55%, transparent);
}

/* Orientation / tablet caps (do not apply a flat 84vw to wide-but-short or tablet viewports) */
@media (max-width: 991.98px) and (orientation: landscape) {
  .hk-fm--mobile { width: 360px; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .hk-fm--mobile { width: 380px; }
  .hk-fm-mobile__grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* The mobile drawer is a <992px surface; never let it show on desktop even if mounted. */
@media (min-width: 992px) {
  .hk-fm--mobile,
  .hk-fm-mobile-backdrop { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .hk-fm--mobile,
  .hk-fm--mobile *,
  .hk-fm-mobile-backdrop {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}