/* ============================================================================
   BIOHEAL HEADER SYSTEM 2.1 — "Full-Width Apothecary Bar" (staging).
   IRÁNYVÁLTÁS (Attila, 2026-06-11): a lebegő kapszula/pill MEGSZŰNT →
   teljes szélességű, nyugodt, patikai-prémium sáv:
     · a háttér a viewport TELJES szélességére fut
     · a belső tartalom (.bh-header-inner) max-width konténer, középre igazítva
     · nincs nagy border-radius, nincs lebegő kártya, nincs erős shadow
     · finom alsó hairline + nagyon lágy zöld tónus (Bioheal-brand)
     · sticky + scroll-shrink MARAD (2 állapot: top → scrolled/kompakt;
       a JS 'micro' binding él, de a micro = scrolled — nincs külön pill-állapot)
   A bioheal-brand.css UTÁN tölt → felülírja a header-szekciót.
   CSAK vizuál: a header.phtml MINDEN Hyvä/Alpine bindingja érintetlen
   (initHeader, toggleSearch/Cart, x-ref searchButton/cartButton, summaryCount,
   topmenu/customer/cart/search child-blokkok, mega-panel + mobil bottom-sheet).
   Szabály: self-host font · NINCS új ikon/emoji/CDN · csak padding/max-height/
   opacity/background/shadow átmenet · reduced-motion + focus-visible.
   Tokenek: bioheal-brand.css :root (--bh-*), fallbackekkel.
   ============================================================================ */

/* ---- 0. Állapot-változók (top → scrolled; a micro = scrolled, nincs saját szabálya) ---- */
#header.bh-header-shell {
  --bhh-logo-h: 28px;
  --bhh-pad-y: 12px;
  --bhh-bg: rgba(252, 251, 247, .97);
  --bhh-line: rgba(45, 90, 61, .14);          /* finom zöld hairline */
  --bhh-maxw: 1280px;                          /* belső konténer */
  --bhh-pad-x: clamp(16px, 3vw, 32px);
}
#header.bh-header-shell.bh-header--scrolled {  /* KOMPAKT sáv görgetve */
  --bhh-logo-h: 22px;
  --bhh-pad-y: 7px;
  --bhh-bg: rgba(252, 251, 247, .985);
}

/* ---- 1. Sticky wrapper — a .page-header tapad, NINCS lebegő rés ----
   (A #header-re tett sticky nem tapadna — bizonyított lecke; a .page-header marad
   a sticky elem. A pointer-events:none örökség veszélytelen: a #header auto.) */
.page-header {
  position: sticky; top: 0; z-index: 40;
  padding: 0;
  background: transparent;
  pointer-events: none;
}

/* ---- 2. Teljes szélességű sáv (#header) — nyugodt, stabil, hairline-nal ---- */
#header.bh-header-shell {
  position: relative;
  pointer-events: auto;
  width: 100%;
  max-width: none;
  margin: 0;
  border-radius: 0;
  background: var(--bhh-bg);
  /* NINCS backdrop-filter: a ~opak bg mellett láthatatlan, viszont CDP/OS-capture-fagyást
     okozott ÉS containing-blockot csinálna a fixed leszármazottaknak (bizonyított leckék) */
  border: 0;
  border-bottom: 1px solid var(--bhh-line);
  box-shadow: none;
  transition:
    background-color var(--bh-dur-drawer, 280ms) var(--bh-ease-soft, cubic-bezier(.4,0,.2,1)),
    box-shadow var(--bh-dur-drawer, 280ms) var(--bh-ease-soft, cubic-bezier(.4,0,.2,1)),
    border-color var(--bh-dur-drawer, 280ms) var(--bh-ease-soft, cubic-bezier(.4,0,.2,1));
}
/* görgetve: nagyon lágy elválasztó árnyék (nem kártya-shadow) */
#header.bh-header-shell.bh-header--scrolled {
  box-shadow: 0 4px 18px rgba(3, 76, 60, .05);
}

/* ---- 3. Trust microbar — teljes szélességű, nagyon lágy zöld tónusú sáv;
       a tartalma a konténerhez igazítva; görgetve összecsukódik ---- */
#header .bh-trust-bar {
  background: linear-gradient(to bottom, rgba(45, 90, 61, .05), rgba(45, 90, 61, .028));
  border-bottom: 1px solid rgba(45, 90, 61, .08);
  max-height: 30px; overflow: hidden; opacity: 1;
  transition: max-height var(--bh-dur-drawer, 280ms) var(--bh-ease-soft, ease),
              opacity var(--bh-dur-drawer, 280ms) var(--bh-ease-soft, ease),
              border-color var(--bh-dur-drawer, 280ms) var(--bh-ease-soft, ease);
}
#header .bh-trust-bar__inner {
  max-width: var(--bhh-maxw);
  margin-inline: auto;
  padding: 7px var(--bhh-pad-x) 5px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .12em;
  color: var(--bh-muted, #6B7A70); gap: 14px;
}
#header .bh-trust-bar__item { text-transform: uppercase; }
#header .bh-trust-bar__dot { color: var(--bh-gold, #C9A961); }
#header.bh-header--scrolled .bh-trust-bar {
  max-height: 0; opacity: 0; border-bottom-color: transparent;
}

/* ---- 4. Fő sor — .bh-header-inner = a max-width KONTÉNER (középre igazítva);
       position:relative → a mega-panel ehhez horgonyzik ---- */
#header .bh-header-inner {
  position: relative;
  max-width: var(--bhh-maxw) !important;
  margin-inline: auto !important;
  padding: var(--bhh-pad-y) var(--bhh-pad-x) !important;
  gap: 18px;
  transition: padding var(--bh-dur-drawer, 280ms) var(--bh-ease-soft, ease);
}

/* ---- 5. Logó — méret-átmenet a két állapot közt; a micro-pill sejt-wrapper VÉGLEG rejtve ---- */
#header .bh-qg-logo { display: flex; align-items: center; gap: 0; }
#header .bh-qg-logo img,
#header .bh-qg-logo svg {
  height: var(--bhh-logo-h) !important;
  width: auto !important; max-width: none !important;
  object-fit: contain !important;
  transition: height var(--bh-dur-drawer, 280ms) var(--bh-ease-soft, ease);
}
#header .bh-qg-logo-cell { display: none !important; }   /* kapszula-örökség: soha nem jelenik meg */

/* ---- 6. Kurált menü (a Hyvä auto-nav + hamburger HELYETT) — változatlan logika ---- */
#header .bh-header-inner > .navigation { display: none !important; }   /* Hyvä desktop auto-nav OFF */
#header .bh-header-inner > .lg\:hidden { display: none !important; }   /* Hyvä mobil hamburger+drawer OFF */

#header .bh-qg-nav {
  display: flex; align-items: center; justify-content: center;
  flex: 1 1 auto; min-width: 0; gap: 6px;
  position: static;                 /* a mega offset-parentje a .bh-header-inner (relative) */
}
#header .bh-qg-nav > a {
  position: relative; padding: 8px 16px;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Inter', system-ui, sans-serif; font-weight: 500; font-size: .98rem;
  color: var(--bh-green, #2d5a3d); white-space: nowrap; border-radius: 999px;
  transition: color var(--bh-dur-btn, 160ms) var(--bh-ease-out, ease),
              background-color var(--bh-dur-btn, 160ms) var(--bh-ease-out, ease),
              padding var(--bh-dur-drawer, 280ms) var(--bh-ease-soft, ease),
              font-size var(--bh-dur-drawer, 280ms) var(--bh-ease-soft, ease);
}
#header .bh-qg-nav > a:hover { color: var(--bh-forest, #034C3C); background: rgba(3, 76, 60, .05); }
/* gold-hairline underline (hover/aktív) */
#header .bh-qg-nav > a::after {
  content: ""; position: absolute; left: 16px; right: 100%; bottom: 4px;
  height: 1px; background: var(--bh-gold, #C9A961);
  transition: right 220ms var(--bh-ease-out, ease);
}
#header .bh-qg-nav > a:hover::after,
#header .bh-qg-nav > a[aria-current]::after { right: 16px; }
/* scrolled: kompaktabb nav */
#header.bh-header--scrolled .bh-qg-nav > a { padding: 6px 12px; font-size: .88rem; }
/* nav-szimbólum (Szezonális/Újdonságok/Cikkek) */
#header .bh-qg-nav__ico { width: 18px; height: 18px; flex: 0 0 auto; }
#header.bh-header--scrolled .bh-qg-nav__ico { width: 16px; height: 16px; }
/* arany pont a menüpontok között — a KlimFem-badge KIHAGYVA */
#header .bh-qg-nav > a:not(:first-of-type):not(.bh-qg-nav__klimfem)::before {
  content: "\00B7"; color: var(--bh-gold, #C9A961); font-weight: 700;
  margin-right: 10px; margin-left: -6px; opacity: .9;
}
#header.bh-header--scrolled .bh-qg-nav > a:not(:first-of-type):not(.bh-qg-nav__klimfem)::before { margin-right: 7px; margin-left: -4px; }
/* KlimFem = kiemelt reklám-badge */
#header .bh-qg-nav > a.bh-qg-nav__klimfem {
  color: var(--bh-forest, #034C3C); font-weight: 600;
  background: rgba(201, 169, 97, .14); border: 1px solid var(--bh-gold-soft, #E8D9B5);
  padding: 6px 14px; border-radius: 999px;
}
#header .bh-qg-nav > a.bh-qg-nav__klimfem:hover { background: rgba(201, 169, 97, .22); border-color: var(--bh-gold, #C9A961); }
#header .bh-qg-nav > a.bh-qg-nav__klimfem::after { display: none; }

/* ---- 7. Akciók — ikon-klaszter (Keresés · Belépés · Kosár) — változatlan logika ---- */
#header .bh-header-actions { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
#header .bh-qg-action,
#header .bh-header-actions > a,
#header .bh-header__cart-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: transparent; border: 1px solid transparent;
  font-family: 'Inter', system-ui, sans-serif; font-weight: 600; font-size: .92rem;
  color: var(--bh-ink, #17231E); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: color var(--bh-dur-btn, 160ms) var(--bh-ease-out, ease),
              background-color var(--bh-dur-btn, 160ms) var(--bh-ease-out, ease),
              border-color var(--bh-dur-btn, 160ms) var(--bh-ease-out, ease),
              padding var(--bh-dur-drawer, 280ms) var(--bh-ease-soft, ease);
}
#header .bh-qg-action:hover,
#header .bh-header-actions > a:hover,
#header .bh-header__cart-trigger:hover {
  color: var(--bh-forest, #034C3C); background: rgba(3, 76, 60, .05); border-color: transparent;
}
#header .bh-qg-search .bh-qg-action__label { line-height: 1; }
/* kosár-számláló (binding: x-text=summaryCount, ÉRINTETLEN) */
#header .bh-cart-count {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--bh-forest, #034C3C); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; justify-content: center;
}
#header .bh-header-actions [class*="hover:bg-gray"]:hover { background-color: rgba(3, 76, 60, .05) !important; }
#header.bh-header--scrolled .bh-qg-action,
#header.bh-header--scrolled .bh-header-actions > a,
#header.bh-header--scrolled .bh-header__cart-trigger { padding: 6px 12px; font-size: .86rem; }

/* ---- 7b. Akció-ikonok — 24px lucide outline, label sr-only, badge a sarkon ---- */
#header .bh-qg-search,
#header .bh-header-actions #customer-menu,
#header .bh-header__cart-trigger {
  position: relative;
  padding: 8px !important; gap: 0;
  border-radius: 999px;
}
#header .bh-qg-icon,
#header .bh-header-actions #customer-menu svg {
  width: 22px; height: 22px; flex: 0 0 auto; display: block;
  stroke-width: 1.5;
  transition: transform var(--bh-dur-btn, 160ms) var(--bh-ease-out, ease);
}
#header .bh-header-actions #customer-menu {
  color: var(--bh-ink, #17231E); background: transparent; border: 1px solid transparent;
  transition: color var(--bh-dur-btn, 160ms) var(--bh-ease-out, ease),
              background-color var(--bh-dur-btn, 160ms) var(--bh-ease-out, ease);
}
#header .bh-header-actions #customer-menu:hover { color: var(--bh-forest, #034C3C); background: rgba(3, 76, 60, .05); }
#header .bh-qg-search .bh-qg-action__label,
#header .bh-header__cart-trigger .bh-header__cart-label {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
#header .bh-header__cart-trigger .bh-cart-count {
  position: absolute; top: 0; right: 0;
  min-width: 17px; height: 17px; padding: 0 4px;
  font-size: 10px; border: 1.5px solid #FCFBF7;
}
#header .bh-qg-search:hover .bh-qg-icon,
#header .bh-header__cart-trigger:hover .bh-qg-icon,
#header .bh-header-actions #customer-menu:hover svg { transform: translateY(-1px); }
#header.bh-header--scrolled .bh-qg-search,
#header.bh-header--scrolled .bh-header-actions #customer-menu,
#header.bh-header--scrolled .bh-header__cart-trigger { padding: 6px !important; }
#header.bh-header--scrolled .bh-qg-icon,
#header.bh-header--scrolled .bh-header-actions #customer-menu svg { width: 20px; height: 20px; }

/* ---- 8. Kereső: a Hyvä alap search-formot a Phase C KERESŐ-PALETTA váltja (ld. §18);
       az alap #search-content rejtve marad ---- */

/* ---- 9. Fókusz-láthatóság (a11y) + reduced-motion ---- */
#header a:focus-visible,
#header button:focus-visible {
  outline: 2px solid var(--bh-gold, #C9A961);
  outline-offset: 3px; border-radius: 8px;
}
@media (prefers-reduced-motion: reduce) {
  .page-header,
  #header.bh-header-shell,
  #header .bh-trust-bar,
  #header .bh-header-inner,
  #header .bh-qg-logo img,
  #header .bh-qg-nav > a,
  #header .bh-qg-nav > a::after { transition: none !important; }
}

/* ---- 10. Mobil/tablet — ugyanaz a teljes szélességű sáv; a kurált nav görgethető strip ---- */
@media (max-width: 1023px) {
  #header.bh-header-shell { --bhh-pad-x: 14px; }
  #header .bh-header-inner { flex-wrap: wrap; gap: 8px; }
  #header .bh-qg-logo { width: auto !important; padding-bottom: 0 !important; order: 0; flex: 0 0 auto; }
  #header .bh-header-actions { order: 1; gap: 2px; }
  #header .bh-qg-nav {
    order: 3; width: 100%; justify-content: flex-start;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    gap: 0; padding-top: 6px; margin-top: 4px;
    border-top: 1px solid rgba(45, 90, 61, .10);
  }
  #header .bh-qg-nav::-webkit-scrollbar { display: none; }
  #header .bh-qg-nav > a { font-size: .9rem; padding: 6px 10px; }
}
@media (max-width: 640px) {
  #header.bh-header-shell { --bhh-logo-h: 24px; }
  #header.bh-header-shell.bh-header--scrolled { --bhh-logo-h: 21px; }
  #header .bh-trust-bar__inner { font-size: 10px; gap: 8px; letter-spacing: .06em; }
}

/* ---- 11. "Termékek" MEGA-PANEL (Layer 2/3) — a KONTÉNERHEZ horgonyzott lebegő panel
       (offset-parent: .bh-header-inner [relative] → a panel a max-width sávval fut) ---- */

/* Termékek-trigger + caret */
#header .bh-qg-nav__panel-trigger { gap: 6px; }
#header .bh-caret {
  width: 6px; height: 6px; display: inline-block;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px); opacity: .55;
  transition: transform var(--bh-dur-drawer, 240ms) var(--bh-ease-soft, ease);
}
#header .bh-qg-nav__panel-trigger[aria-expanded="true"] { color: var(--bh-forest, #034C3C); background: rgba(3, 76, 60, .06); }
#header .bh-qg-nav__panel-trigger[aria-expanded="true"] .bh-caret { transform: rotate(225deg) translateY(1px); }

/* a lebegő panel */
#header .bh-mega {
  position: absolute; top: calc(100% + 8px);
  left: var(--bhh-pad-x); right: var(--bhh-pad-x);
  z-index: 55; text-align: left;
  background: #FCFBF7;
  border: 1px solid var(--bh-gold-soft, #E8D9B5); border-radius: 18px;
  box-shadow: 0 20px 48px rgba(3, 76, 60, .12);
  padding: 22px;
  opacity: 0; transform: translateY(-8px) scale(.985); visibility: hidden; pointer-events: none;
  transition: opacity var(--bh-dur-drawer, 240ms) var(--bh-ease-out, cubic-bezier(.22,.61,.36,1)),
              transform var(--bh-dur-drawer, 240ms) var(--bh-ease-out, cubic-bezier(.22,.61,.36,1)),
              visibility var(--bh-dur-drawer, 240ms);
}
#header .bh-mega--open { opacity: 1; transform: none; visibility: visible; pointer-events: auto; }
#header .bh-mega__inner { display: grid; grid-template-columns: 1.05fr 1.5fr 1fr; gap: 24px; }
#header .bh-mega__col h4 {
  font-family: 'Inter', system-ui, sans-serif; font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--bh-muted, #6B7A70); margin: 0 0 12px;
}
/* col 1 — kategórialista (+ szimbólumok) */
#header .bh-mega__catlist { display: flex; flex-direction: column; gap: 2px; }
#header .bh-mega__catlist a {
  display: flex; align-items: center; justify-content: space-between; gap: 9px;
  padding: 9px 12px; border-radius: 12px;
  font-family: 'Inter', system-ui, sans-serif; font-weight: 500; font-size: .96rem;
  color: var(--bh-ink, #17231E); white-space: nowrap;
  transition: background-color var(--bh-dur-btn, 160ms) ease, color var(--bh-dur-btn, 160ms) ease;
}
#header .bh-mega__catlist a:hover,
#header .bh-mega__catlist a.is-active { background: var(--bh-sage-50, #EEF5EF); color: var(--bh-forest, #034C3C); }
#header .bh-mega__cat-ico { width: 22px; height: 22px; flex: 0 0 auto; }
#header .bh-mega__cat-name { flex: 1 1 auto; }
#header .bh-mega .arr {
  width: 6px; height: 6px; flex: 0 0 auto; margin-left: 10px;
  border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor;
  transform: rotate(45deg); opacity: .5;
}
/* col 2 — Layer-3 termékek */
#header .bh-mega__sub { min-height: 190px; }
#header .bh-mega__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 12px; }
#header .bh-mega__grid a {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 10px; border-radius: 9px; font-size: .84rem; color: var(--bh-ink-soft, #36433C);
  transition: background-color var(--bh-dur-btn, 160ms) ease, color var(--bh-dur-btn, 160ms) ease;
}
#header .bh-mega__grid a::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; flex: 0 0 auto;
  background: var(--bh-gold, #C9A961);
  transition: background-color var(--bh-dur-btn, 160ms) ease, transform var(--bh-dur-btn, 160ms) ease;
}
#header .bh-mega__grid a:hover { background: var(--bh-sage-50, #EEF5EF); color: var(--bh-forest, #034C3C); }
#header .bh-mega__grid a:hover::before { background: var(--bh-forest, #034C3C); transform: scale(1.3); }
#header .bh-mega__all {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 6px 12px;
  font-size: .86rem; font-weight: 600; color: var(--bh-forest, #034C3C); border-radius: 999px;
  transition: background-color var(--bh-dur-btn, 160ms) ease, gap var(--bh-dur-btn, 160ms) ease;
}
#header .bh-mega__all:hover { background: rgba(3, 76, 60, .06); gap: 9px; }
/* col 3 — kiemelt + szezonális */
#header .bh-mega__feat { display: flex; flex-direction: column; gap: 8px; }
#header .bh-mega__feat a {
  display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 14px;
  border: 1px solid transparent;
  transition: border-color var(--bh-dur-btn, 160ms) ease, background-color var(--bh-dur-btn, 160ms) ease;
}
#header .bh-mega__feat a:hover { border-color: var(--bh-gold-soft, #E8D9B5); background: #fff; }
#header .bh-mega__ph {
  width: 50px; height: 50px; flex: 0 0 auto; border-radius: 12px; padding: 4px; overflow: hidden;
  background: var(--bh-sage-100, #DFEDE2); border: 1px solid var(--bh-gold-soft, #E8D9B5);
  display: flex; align-items: center; justify-content: center;
}
#header .bh-mega__ph img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; }
#header .bh-mega__nm { font-size: .9rem; font-weight: 600; color: var(--bh-ink, #17231E); line-height: 1.2; }
#header .bh-mega__season {
  display: block; margin-top: 12px; padding: 14px 16px; border-radius: 16px;
  background: linear-gradient(135deg, var(--bh-mist, #F5F8F5), var(--bh-sage-50, #EEF5EF));
  border: 1px solid var(--bh-gold-soft, #E8D9B5);
}
#header .bh-mega__season-k { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bh-copper, #B07A4B); }
#header .bh-mega__season-t { display: block; font-family: 'Inter', serif; font-size: 1.1rem; color: var(--bh-ink, #17231E); margin: 3px 0 8px; }
#header .bh-mega__season-cta { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 600; color: var(--bh-forest, #034C3C); }

@media (prefers-reduced-motion: reduce) {
  #header .bh-mega, #header .bh-caret, #header .bh-mega__all, #header .bh-mega__feat a { transition: none !important; }
}
@media (max-width: 1023px) {
  #header .bh-mega { display: none !important; }
  #header .bh-caret { display: none; }
}

/* ---- 14. MOBIL: "Termékek" kategória bottom-sheet (CSAK <1024px; saját Alpine + accordion;
       a markup a #header TESTVÉRE — fixed-containing-block lecke) ---- */
.bh-msheet-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(10, 58, 48, .34); pointer-events: auto; }
.bh-msheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; pointer-events: auto;
  max-height: 86vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--bh-paper, #FAF8F2);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -16px 50px rgba(3, 76, 60, .2);
  transform: translateY(100%);
  /* ZÁRT állapot: visibility:hidden a transform MELLÉ (a slide-out VÉGÉN, delay-jel)
     — a zárt sheet linkjei kikerülnek a tab-sorrendből és az a11y-fából
     (fókuszcsapda-fix), és a fullPage-capture sem festi a fold alá. */
  visibility: hidden;
  transition: transform var(--bh-dur-drawer, 280ms) var(--bh-ease-soft, cubic-bezier(.4, 0, .2, 1)),
              visibility 0s linear var(--bh-dur-drawer, 280ms);
  padding: 6px 16px 28px;
}
.bh-msheet--open {
  transform: none; visibility: visible;
  transition: transform var(--bh-dur-drawer, 280ms) var(--bh-ease-soft, cubic-bezier(.4, 0, .2, 1)), visibility 0s;
}
.bh-msheet__grab { width: 42px; height: 4px; border-radius: 99px; background: var(--bh-sage-300, #9FC4A8); margin: 8px auto 6px; cursor: pointer; }
.bh-msheet__head { display: flex; align-items: center; justify-content: space-between; padding: 4px 2px 6px; }
.bh-msheet__title { font-family: 'Inter', serif; font-size: 1.3rem; color: var(--bh-ink, #17231E); }
.bh-msheet__close { width: 40px; height: 40px; font-size: 1.7rem; line-height: 1; color: var(--bh-muted, #6B7A70); background: none; border: 0; cursor: pointer; }
.bh-msheet__cat { border-top: 1px solid var(--bh-hairline, rgba(23, 35, 30, .08)); }
.bh-msheet__cat-head {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 15px 2px; background: none; border: 0; cursor: pointer;
  font-family: 'Inter', system-ui, sans-serif; font-size: 1.05rem; font-weight: 500; color: var(--bh-green, #2d5a3d);
}
.bh-msheet__ico { width: 24px; height: 24px; flex: 0 0 auto; }
.bh-msheet__cat-name { flex: 1 1 auto; }
.bh-msheet__chev {
  width: 9px; height: 9px; flex: 0 0 auto; margin-right: 4px;
  border-right: 2px solid var(--bh-muted, #6B7A70); border-bottom: 2px solid var(--bh-muted, #6B7A70);
  transform: rotate(45deg); transition: transform var(--bh-dur-panel, 240ms) var(--bh-ease-out, ease);
}
.bh-msheet__chev.is-open { transform: rotate(-135deg); }
.bh-msheet__sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--bh-dur-panel, 240ms) var(--bh-ease-soft, ease); }
.bh-msheet__sub.is-open { grid-template-rows: 1fr; }
.bh-msheet__sub-inner { overflow: hidden; display: flex; flex-direction: column; }
.bh-msheet__sub-inner a {
  padding: 12px 2px 12px 36px; font-size: .98rem; color: var(--bh-ink-soft, #36433C);
  border-top: 1px solid var(--bh-sage-50, #EEF5EF);
}
.bh-msheet__all { color: var(--bh-forest, #034C3C) !important; font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .bh-msheet, .bh-msheet__sub, .bh-msheet__chev { transition: none !important; }
}
@media (min-width: 1024px) {
  /* §19 (2026-06-12): a mobil-only display:none elrejtés TÖRÖLVE — a sheet
     desktopon bal drawerként él (§19/6); zárt állapotát a transform adja. */
}

/* ---- 16. Kézírásos szlogen (CSAK top állapot, széles desktop) — „Az egészség mindenkié!" ---- */
#header .bh-qg-slogan {
  flex: 0 0 auto; align-self: center;
  font-family: 'Newsreader', 'Segoe Script', cursive;
  font-size: 1.15rem; line-height: .9; font-weight: 700;
  color: var(--bh-green, #2d5a3d); transform: rotate(-4deg);
  margin: 0 2px 0 16px; white-space: nowrap; opacity: .9;
  transition: opacity var(--bh-dur-drawer, 280ms) var(--bh-ease-out, ease);
}
#header.bh-header--scrolled .bh-qg-slogan { display: none; }
@media (max-width: 1199px) { #header .bh-qg-slogan { display: none; } }

/* ---- 17. MOBIL: a kurált nav-strip ELTŰNIK görgetésre (Attila, 2026-06-09).
   Lefelé görgetve a .bh-qg-nav strip eltűnik → a header FŐ SORA (logó + akció-ikonok)
   STICKY marad, több hely a tartalomnak; felfelé görgetve / a tetőn visszajön.
   Vezérlő: navHidden Alpine-state (header.phtml @scroll). CSAK <1024px (desktopon a nav
   mindig látszik). FONTOS lecke: a .bh-qg-nav FLEX-item → implicit min-height:auto miatt
   a max-height/height NEM zsugorítja 0-ra (bizonyítva, 41px marad); a display:none a tiszta,
   bombabiztos elrejtés. A !important a §6 .bh-qg-nav flex-szabály felülírásához kell. ---- */
@media (max-width: 1023px) {
  #header.bh-header--navhidden .bh-qg-nav {
    display: none !important;
  }
}

/* ---- 18. KERESŐ-PALETTA (Phase C) — Premium White command-palette élő GraphQL találatokkal ---- */
#header #search-content { display: none !important; }   /* a Hyvä alap search-form helyett a paletta */
/* A paletta a .page-header (pointer-events:none) alatt renderelődik → EXPLICIT auto kell (mint a mobil
   bottom-sheetnél), különben a kattintások a header mögé esnek (✕→kosár, találat-link halott, „fagyott"). */
.bh-sp-scrim, .bh-sp, .bh-sp * { pointer-events: auto; }
.bh-sp-scrim {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(10, 58, 48, .38);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.bh-sp {
  position: fixed; z-index: 71; left: 50%; top: 84px; transform: translateX(-50%);
  width: min(640px, calc(100vw - 32px)); max-height: min(72vh, 640px);
  display: flex; flex-direction: column;
  background: var(--bh-paper, #FAF8F2); border: 1px solid var(--bh-gold-soft, #E8D9B5);
  border-radius: 20px; box-shadow: 0 30px 70px rgba(3, 76, 60, .22); overflow: hidden;
}
.bh-sp__bar {
  display: flex; align-items: center; gap: 12px; padding: 16px 18px;
  border-bottom: 1px solid var(--bh-hair, rgba(23, 35, 30, .1));
}
.bh-sp__icon { color: var(--bh-muted, #6B7A70); flex: 0 0 auto; }
.bh-sp__input {
  flex: 1 1 auto; min-width: 0; border: 0; background: transparent; outline: none;
  font-family: 'Inter', system-ui, sans-serif; font-size: 1.05rem; color: var(--bh-ink, #17231E);
}
.bh-sp__input::placeholder { color: var(--bh-muted, #6B7A70); }
.bh-sp__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.bh-sp__close {
  flex: 0 0 auto; width: 34px; height: 34px; font-size: 1.5rem; line-height: 1;
  color: var(--bh-muted, #6B7A70); background: none; border: 0; border-radius: 999px; cursor: pointer;
}
.bh-sp__close:hover { background: rgba(3, 76, 60, .06); color: var(--bh-forest, #034C3C); }
.bh-sp__body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px; }
.bh-sp__hint, .bh-sp__loading, .bh-sp__empty {
  padding: 22px 14px; text-align: center; color: var(--bh-muted, #6B7A70); font-size: .92rem;
}
.bh-sp__results { display: flex; flex-direction: column; gap: 2px; }
.bh-sp__item a {
  display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 12px;
  transition: background-color var(--bh-dur-btn, 160ms) ease;
}
.bh-sp__item a:hover { background: var(--bh-sage-50, #EEF5EF); }
.bh-sp__thumb {
  width: 52px; height: 52px; flex: 0 0 auto; border-radius: 10px;
  background: #fff; border: 1px solid var(--bh-gold-soft, #E8D9B5);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.bh-sp__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.bh-sp__name {
  flex: 1 1 auto; min-width: 0; line-height: 1.3;
  font-family: 'Inter', system-ui, sans-serif; font-size: .96rem; font-weight: 500; color: var(--bh-ink, #17231E);
}
.bh-sp__price {
  flex: 0 0 auto; white-space: nowrap;
  font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: .96rem; color: var(--bh-forest, #034C3C);
}
.bh-sp__all {
  display: block; margin: 6px 4px 2px; padding: 12px; text-align: center; border-radius: 12px;
  background: var(--bh-forest, #034C3C); color: #fff; font-weight: 600; font-size: .92rem;
}
.bh-sp__all:hover { background: var(--bh-green, #2d5a3d); }
/* MOBIL: teljes képernyős kereső */
@media (max-width: 639px) {
  .bh-sp {
    top: 0; left: 0; transform: none; width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; border: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bh-sp-scrim, .bh-sp { transition: none !important; }
}

/* ============================================================================
   §19 — EGYSOROS HEADER + DRAWER + INLINE KERESŐ (korrekciós sprint 2026-06-12)
   Elv: a meglévő bindingok/komponensek érintetlenek; ez a réteg csak elrejt,
   átpozicionál és 1 új gombot stilizál. Backup: server-truth/ + julyland .bak.
   ============================================================================ */

/* 1) trust-sor + kategória-sor KI -> egyetlen sor (a mega-panel is a navval megy) */
#header .bh-trust-bar { display: none !important; }
#header .bh-qg-nav { display: none !important; }
#header .bh-qg-slogan { display: none !important; }

/* 2) egysoros flex minden nézeten: [logó][Menü] ... [akciók] */
#header .bh-header-inner { flex-wrap: nowrap !important; justify-content: flex-start !important; gap: 6px; }
#header .bh-qg-logo { width: auto !important; padding-bottom: 0 !important; }
#header .bh-header-actions { margin-left: auto !important; }

/* 3) Menü-gomb a logó mellett */
.bh-menu-btn {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px;
  margin-left: 10px; padding: 8px 12px; background: none; border: 0; border-radius: 10px;
  cursor: pointer; color: var(--bh-forest, #034C3C);
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: .92rem; line-height: 1;
  transition: background-color .2s;
}
.bh-menu-btn:hover { background: rgba(3, 76, 60, .06); }
.bh-menu-btn__bars { display: inline-flex; flex-direction: column; gap: 4px; width: 20px; }
.bh-menu-btn__bars i { display: block; height: 2px; border-radius: 2px; background: currentColor; }
@media (max-width: 639px) { .bh-menu-btn__label { display: none; } .bh-menu-btn { margin-left: 2px; } }

/* 4) lefelé görgetésre eltűnik, felfelé megjelenik (meglévő navHidden state-re).
   ⚠️ A transform a #header-en fut, NEM a .page-header-en: a wrapper transformja
   containing blockot adna a benne ülő fixed msheet-nek → mobilon a "lecsúszó"
   fejléc behúzta a menüt a képernyőre (2026-06-12 bug, javítva). */
#header { transition: transform .3s var(--bh-ease-soft, ease); }
#header.bh-header--navhidden { transform: translateY(-103%); }
@media (prefers-reduced-motion: reduce) { #header { transition: none; } }

/* 5) kereső-paletta: marad inline buborék a header alatt — szelídebb háttérrel */
.bh-sp-scrim { background: rgba(23, 35, 30, .10) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.bh-sp { top: 70px !important; }
@media (max-width: 767px) {
  .bh-sp { top: 58px !important; left: 0 !important; transform: none !important; width: 100vw !important; border-radius: 0 0 16px 16px !important; border-left: 0 !important; border-right: 0 !important; }
}

/* 6) msheet: mobilon marad bottom-sheet, desktopon BAL OLDALI drawer */
@media (min-width: 1024px) {
  .bh-msheet {
    left: 0; right: auto; top: 0; bottom: 0; width: 420px; height: 100%; max-height: none;
    border-radius: 0 18px 18px 0; box-shadow: 18px 0 60px rgba(3, 76, 60, .18);
    transform: translateX(-103%); padding: 18px 22px 28px;
  }
  .bh-msheet.bh-msheet--open { transform: translateX(0) !important; }
  .bh-msheet__grab { display: none; }
}

/* 7) menü kurált oldal-linkek */
.bh-msheet__links { border-top: 1px solid var(--bh-hairline, rgba(23, 35, 30, .08)); margin-top: 10px; padding-top: 8px; }
.bh-msheet__links a { display: block; padding: 12px 6px; color: var(--bh-ink, #17231E); text-decoration: none; font-family: 'Inter', sans-serif; font-weight: 600; font-size: .95rem; }
.bh-msheet__links a:hover { color: var(--bh-forest, #034C3C); }

/* ============================================================================
   §20 — IMMERZÍV MENÜ-OVERLAY (2026-06-18). A "Menü" gomb (bh-msheet-open) nyitja.
   Világos stage, generált kép-banner SCRIM NÉLKÜL, doboz nélküli átlátszó packshotok,
   a stage a hover-elt kategória gombhoz igazodik. Desktop bal-sáv+stage / mobil accordion.
   Markup a #header TESTVÉRE (fixed-containing-block lecke). pointer-events explicit auto
   (a .page-header pointer-events:none alatt renderel). reduced-motion-biztos.
   ============================================================================ */
.bh-ov-scrim, .bh-ov, .bh-ov * { pointer-events: auto; }
.bh-ov-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(13, 47, 38, .42); }
.bh-ov {
  position: fixed; inset: 0; z-index: 61; display: flex; flex-direction: column;
  background:
    radial-gradient(1100px 600px at 78% -8%, var(--bh-sage-50, #EEF5EF), transparent 58%),
    linear-gradient(180deg, var(--bh-paper, #FAFBF8) 0%, #F6F9F4 100%);
  opacity: 0; visibility: hidden; transform: translateY(12px) scale(.992); pointer-events: none;
  transition: opacity .34s var(--bh-ease-out, cubic-bezier(.16,1,.3,1)),
              transform .42s var(--bh-ease-out, cubic-bezier(.16,1,.3,1)),
              visibility .34s;
}
.bh-ov--open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }

.bh-ov__top { display: flex; align-items: center; gap: 16px; max-width: 1320px; width: 100%; margin: 0 auto; padding: 20px clamp(16px, 3.2vw, 40px) 8px; }
.bh-ov__logo img { height: 38px; width: auto; display: block; }
.bh-ov__search { flex: 1 1 auto; max-width: 440px; display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--bh-hair, rgba(23,35,30,.12)); border-radius: 999px; padding: 11px 18px; color: var(--bh-muted, #6B7A70); font-family: 'Inter', sans-serif; font-size: .95rem; cursor: pointer; text-align: left; }
.bh-ov__search:hover { border-color: var(--bh-gold, #C9A961); }
.bh-ov__search svg { flex: 0 0 auto; }
.bh-ov__sp { flex: 1 1 auto; }
.bh-ov__close { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--bh-hair, rgba(23,35,30,.12)); background: #fff; border-radius: 999px; padding: 10px 16px; cursor: pointer; color: var(--bh-ink, #2B322E); font-family: 'Inter', sans-serif; font-weight: 600; font-size: .9rem; }
.bh-ov__close:hover { border-color: var(--bh-gold, #C9A961); color: var(--bh-forest, #034C3C); }
.bh-ov__close b { font-size: 1.2rem; line-height: 1; font-weight: 400; }

.bh-ov__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: minmax(320px, 36%) 1fr; align-items: start; gap: clamp(20px, 2.4vw, 38px); max-width: 1320px; width: 100%; margin: 0 auto; padding: 8px clamp(16px, 3.2vw, 40px) 14px; }

.bh-ov__rail { display: flex; flex-direction: column; }
.bh-ov__rail h4 { font-family: 'Inter', sans-serif; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--bh-muted, #6B7A70); margin: 6px 4px 12px; }
.bh-ov__cat { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; border: 0; background: none; cursor: pointer; padding: 12px 16px; border-radius: 14px; color: var(--bh-ink, #2B322E); position: relative; transition: background-color .18s ease, color .18s ease; }
.bh-ov__cat:hover, .bh-ov__cat.is-active { background: #fff; }
.bh-ov__cat.is-active { box-shadow: 0 8px 26px rgba(3, 76, 60, .07); }
.bh-ov__cat .bh-symbol--nav { transition: transform .25s var(--bh-ease-out, ease); }
.bh-ov__cat:hover .bh-symbol--nav, .bh-ov__cat.is-active .bh-symbol--nav { transform: scale(1.04); }
.bh-ov__cat-nm { flex: 1 1 auto; font-family: 'Newsreader', Georgia, serif; font-size: 1.3rem; font-weight: 500; line-height: 1.1; }
.bh-ov__cat:hover .bh-ov__cat-nm, .bh-ov__cat.is-active .bh-ov__cat-nm { color: var(--bh-forest, #034C3C); }
.bh-ov__cat-ar { width: 8px; height: 8px; flex: 0 0 auto; border-right: 1.6px solid var(--bh-muted, #6B7A70); border-top: 1.6px solid var(--bh-muted, #6B7A70); transform: rotate(45deg); opacity: 0; transition: opacity .2s ease; }
.bh-ov__cat:hover .bh-ov__cat-ar, .bh-ov__cat.is-active .bh-ov__cat-ar { opacity: .7; }
.bh-ov__cat::before { content: ""; position: absolute; left: 16px; bottom: 7px; width: 0; height: 1.5px; background: var(--bh-gold, #C9A961); transition: width .3s var(--bh-ease-out, ease); }
.bh-ov__cat.is-active::before { width: 40px; }

.bh-ov__stagewrap { position: relative; display: flex; transition: transform .34s var(--bh-ease-out, cubic-bezier(.16,1,.3,1)); will-change: transform; }
.bh-ov__stage { position: relative; flex: 1 1 auto; min-height: 270px; border-radius: 30px; overflow: hidden; background: #fff; border: 1px solid var(--bh-hair-2, rgba(23,35,30,.07)); box-shadow: var(--bh-shadow-card, 0 12px 36px rgba(23,35,30,.10)); display: flex; flex-direction: row; }
.bh-ov__banner { position: relative; flex: 0 0 43%; overflow: hidden; }
.bh-ov__banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bh-ov__content { flex: 1 1 auto; padding: clamp(18px, 1.8vw, 28px) clamp(20px, 2vw, 30px); display: flex; flex-direction: column; justify-content: center; }
.bh-ov__t { font-family: 'Newsreader', Georgia, serif; font-weight: 500; font-size: clamp(1.55rem, 2.3vw, 2.05rem); line-height: 1.05; color: var(--bh-ink, #2B322E); margin: 0; }
.bh-ov__d { color: var(--bh-muted, #6B7A70); font-size: .95rem; line-height: 1.45; max-width: 40ch; margin: 6px 0 0; }
.bh-ov__feat { display: flex; gap: 4px; margin-top: 16px; flex-wrap: wrap; }
.bh-ov__pcard { display: flex; flex-direction: column; align-items: center; width: 112px; padding: 9px 6px 7px; border-radius: 14px; background: none; transition: background-color .2s ease, transform .25s var(--bh-ease-out, ease); }
.bh-ov__pcard:hover { background: var(--bh-sage-50, #EEF5EF); transform: translateY(-3px); }
.bh-ov__ph { height: 78px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.bh-ov__ph img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(23,35,30,.14)); }
.bh-ov__pnm { font-family: 'Inter', sans-serif; font-size: .8rem; font-weight: 600; line-height: 1.25; color: var(--bh-ink-soft, #55605A); text-align: center; }
.bh-ov__cta { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 18px; background: var(--bh-forest, #034C3C); color: #fff; font-family: 'Inter', sans-serif; font-weight: 600; font-size: .9rem; padding: 11px 20px; border-radius: 999px; transition: gap .2s ease, transform .2s ease, background-color .2s ease; }
.bh-ov__cta:hover { gap: 13px; transform: translateY(-1px); background: var(--bh-green, #2d5a3d); }

.bh-ov__foot { max-width: 1320px; width: 100%; margin: 0 auto; padding: 8px clamp(16px, 3.2vw, 40px) 22px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; border-top: 1px solid var(--bh-hair-2, rgba(23,35,30,.07)); }
.bh-ov__flinks { display: flex; gap: 6px; flex-wrap: wrap; }
.bh-ov__flinks a { padding: 8px 14px; border-radius: 999px; font-family: 'Inter', sans-serif; font-weight: 600; font-size: .9rem; color: var(--bh-ink, #2B322E); }
.bh-ov__flinks a:hover { background: #fff; color: var(--bh-forest, #034C3C); }
.bh-ov__trust { margin-left: auto; display: flex; align-items: center; gap: 12px; color: var(--bh-muted, #6B7A70); font-family: 'Inter', sans-serif; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.bh-ov__trust .d { color: var(--bh-gold, #C9A961); }

/* mobil accordion */
.bh-ov__mlist { display: none; }
.bh-ov__mi { border-top: 1px solid var(--bh-hair, rgba(23,35,30,.12)); }
.bh-ov__mi-head { display: flex; align-items: center; gap: 13px; width: 100%; background: none; border: 0; cursor: pointer; padding: 15px 4px; text-align: left; color: var(--bh-ink, #2B322E); }
.bh-ov__mi-nm { flex: 1 1 auto; font-family: 'Newsreader', Georgia, serif; font-size: 1.2rem; font-weight: 500; }
.bh-ov__mi-chev { width: 9px; height: 9px; flex: 0 0 auto; border-right: 2px solid var(--bh-muted, #6B7A70); border-bottom: 2px solid var(--bh-muted, #6B7A70); transform: rotate(45deg); transition: transform .25s var(--bh-ease-out, ease); }
.bh-ov__mi.is-open .bh-ov__mi-chev { transform: rotate(-135deg); }
.bh-ov__mi-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s var(--bh-ease-soft, ease); }
.bh-ov__mi.is-open .bh-ov__mi-panel { grid-template-rows: 1fr; }
.bh-ov__mi-inner { overflow: hidden; }
.bh-ov__mhero { height: 120px; border-radius: 14px; overflow: hidden; margin: 2px 2px 12px; }
.bh-ov__mhero img { width: 100%; height: 100%; object-fit: cover; }
.bh-ov__mfeat { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 14px; -webkit-overflow-scrolling: touch; }
.bh-ov__mfeat .bh-ov__pcard { width: 118px; padding: 8px; }
.bh-ov__mfeat .bh-ov__ph { height: 92px; }
.bh-ov__mall { display: inline-block; margin: 0 2px 14px; color: var(--bh-forest, #034C3C); font-family: 'Inter', sans-serif; font-weight: 700; font-size: .9rem; }
.bh-ov__mlinks { border-top: 1px solid var(--bh-hair, rgba(23,35,30,.12)); margin-top: 6px; padding-top: 8px; }
.bh-ov__mlinks a { display: block; padding: 12px 6px; color: var(--bh-ink, #2B322E); font-family: 'Inter', sans-serif; font-weight: 600; font-size: .95rem; }
.bh-ov__mlinks a:hover { color: var(--bh-forest, #034C3C); }

@media (max-width: 1023px) {
  .bh-ov__body { grid-template-columns: 1fr; }
  .bh-ov__rail, .bh-ov__stagewrap { display: none; }
  .bh-ov__mlist { display: block; }
  .bh-ov__top { flex-wrap: wrap; }
  .bh-ov__search { order: 3; max-width: none; flex-basis: 100%; }
  .bh-ov__foot { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bh-ov, .bh-ov__stagewrap, .bh-ov__cat, .bh-ov__pcard, .bh-ov__mi-panel, .bh-ov__mi-chev, .bh-ov__cta { transition: none !important; }
}