/* === HB — FEJLÉC (hb-378, 2026-09-30): a régi Journal-fejléc másolata a gyári default témán ===
   Helye: catalog/view/theme/hb/stylesheet/hb-header.css · betöltés: header.twig, a hb-l2.css UTÁN.
   Sablonok: hb/template/common/header.twig, menu.twig, search.twig, cart.twig, language.twig, currency.twig · viselkedés: hb.js 4. szakasz.
   Mért értékek (élő hangszerbolt.hu, 1440 px): felső sáv 35 · logó-sor 90 (logó 340×70, kereső 38 magas pirula, margó 50/30)
   · menüsáv (Montserrat 700 14 NAGYBETŰ, 0 10 px, elválasztó 1 px #34495e) · kosár 50 széles · jelvény 18×18 #a41733.
   Görgetéskor csak a menüsáv ragad (a fejléc teteje -125 px-re ragad). A sáv mindig a régi RAGADT alakja (40 px, teljes szélesség) —
   tulaj 09-30: ragadás előtt is ugyanolyan legyen, mint ragadva; így JS sem kell hozzá.
   ≤1024 px mobil fejléc: felső sáv 30 · fő sáv 60 (ez ragad) · a menü balról becsúszó panel (80 %, max. 320 px) · a kereső a nagyítóra nyílik.
   Referencia: HB/theme/referencia/02-fejlec-menu.md. Színek: a hb.stylesheet.css tokenjei + a fejléc saját 3 tokenje lent. */

:root {
  --hb-head-line: #eeeeee;   /* sáv-elválasztó vonal (Journal „Border") */
  --hb-nav-div: #34495e;     /* menüpontok közti elválasztó (Journal „main_blue_alt") */
  --hb-badge: #a41733;       /* darabszám-jelvény (= --hb-sale) */
}

/* ---------------------------------------------------------------- 1. keret + ragadás */
.hb-header { position: sticky; top: -125px; z-index: 1030; font-family: var(--hb-font); color: var(--hb-text); }
html { scroll-padding-top: 40px; }
.hb-header .container { padding-left: 20px; padding-right: 20px; }
.hb-bar { display: flex; align-items: center; position: relative; }
.hb-header .hb-bar::before, .hb-header .hb-bar::after { content: none; } /* a Bootstrap .container clearfixe flex-elem lenne: a felső sáv csoportjait középre húzná */
/* alap-nullázás :where()-rel (0 fajsúly): a lenti osztály-szabályok mindig erősebbek */
:where(.hb-header) a { color: var(--hb-text); text-decoration: none; }
:where(.hb-header) a:hover, :where(.hb-header) a:focus { color: var(--hb-text); text-decoration: none; }
:where(.hb-header) button { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
:where(.hb-header) ul { list-style: none; margin: 0; padding: 0; }
:where(.hb-header) .fa { font-size: inherit; }

/* ---------------------------------------------------------------- 2. lenyílók (felső sáv Info, Fiók, nyelv, pénznem) */
.hb-dd { position: relative; }
.hb-dd-menu {
  display: none; position: absolute; top: 100%; left: 0; z-index: 5; min-width: 100px; margin-top: 6px; padding: 5px 0;
  background: var(--hb-primary); border-radius: 4px; box-shadow: 0 5px 20px rgba(0, 0, 0, .25);
}
.hb-dd-menu::before {
  content: ""; position: absolute; bottom: 100%; left: 12px;
  border: 6px solid transparent; border-bottom-color: var(--hb-primary);
}
.hb-dd-menu::after { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 8px; } /* híd: a kurzor átérhet a résen */
.hb-dd:hover > .hb-dd-menu, .hb-dd:focus-within > .hb-dd-menu, .hb-dd.hb-open > .hb-dd-menu,
.hb-dd:hover > form > .hb-dd-menu, .hb-dd:focus-within > form > .hb-dd-menu, .hb-dd.hb-open > form > .hb-dd-menu { display: block; }
.hb-dd-menu a, .hb-dd-menu button {
  display: block; width: 100%; padding: 7px 12px; font-size: 13px; font-weight: 400; line-height: 1.4; text-align: left;
  text-transform: none; white-space: nowrap; color: #fff;
}
.hb-dd-menu a:hover, .hb-dd-menu a:focus, .hb-dd-menu button:hover, .hb-dd-menu button:focus { background: var(--hb-accent); color: #fff; }
.hb-header .hb-caret { margin-left: 3px; font-size: 11px; }

/* ---------------------------------------------------------------- 3. felső sáv (35 px)
   hb-381 (tulaj 09-30): a háttér és az elválasztó vonal a KÜLSŐ elemen → széltől szélig, mint a menüsáv; a .container csak igazít. */
.hb-topbar { background: var(--hb-bg); border-bottom: 1px solid var(--hb-head-line); }
.hb-topbar .container { height: 35px; }
.hb-topbar .hb-bar { justify-content: space-between; }
.hb-top-left { display: flex; align-items: center; height: 100%; }
.hb-top-left > li { height: 100%; }
.hb-top-left > li > a, .hb-top-phone {
  display: flex; align-items: center; height: 100%; padding: 0 5px;
  font-size: 12px; font-weight: 700; line-height: 18px; text-transform: uppercase; white-space: nowrap;
}
.hb-top-left > li > a > .fa:first-child, .hb-top-phone > .fa { margin-right: 5px; font-size: 18px; }
.hb-top-left .hb-ico > .fa { margin-right: 0; }
.hb-top-left .hb-dd-toggle { color: var(--hb-text-muted); }
.hb-top-left .hb-dd-toggle > .fa-info { width: 7px; }
.hb-top-phone { position: absolute; left: 50%; top: 0; transform: translateX(-50%); color: var(--hb-text); }
/* hb-456 (tulaj 10-07): a szöveg (→ kapcsolat-lap) és a telefonszám (tel:) két külön link; rámutatáskor csak az adott rész húzódik alá */
.hb-top-phone > a { display: flex; align-items: center; height: 100%; }
.hb-top-phone > .hb-top-tel { margin-left: 4px; }
.hb-top-phone > a:hover, .hb-top-phone > a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.hb-top-acct { display: none; }
.hb-top-right { display: flex; align-items: center; height: 100%; gap: 7px; }
.hb-top-right > .hb-dd, .hb-top-right form { height: 100%; }
.hb-top-right .hb-dd-toggle { display: flex; align-items: center; height: 100%; padding: 0; font-size: 12px; font-weight: 700; white-space: nowrap; }
.hb-top-right .hb-dd-toggle img { margin-right: 5px; }
.hb-top-right .hb-dd-toggle b { margin-right: 4px; }
/* nyelv/pénznem lenyíló: fehér, sötét szöveg (a régi) */
.hb-top-right .hb-dd-menu { left: auto; right: 0; margin-top: 0; background: #fff; }
.hb-top-right .hb-dd-menu::before { left: auto; right: 12px; border-bottom-color: #fff; }
.hb-top-right .hb-dd-menu button { color: var(--hb-bg); }
.hb-top-right .hb-dd-menu button:hover, .hb-top-right .hb-dd-menu button:focus { background: var(--hb-head-line); color: var(--hb-bg); }
.hb-top-right .hb-dd-menu img { margin-right: 4px; vertical-align: 0; }

/* ---------------------------------------------------------------- 4. logó-sor (90 px): logó · kereső · fiók · összehasonlítás
   hb-381: a háttér a külső elemen (széltől szélig). hb-382 (tulaj 09-30, „kisebb logó”): 70 → 54 px (a 340×70-es kép 262×54-re). */
.hb-midbar { background: var(--hb-bg); }
.hb-midbar .container { height: 90px; }
.hb-burger, .hb-search-toggle { display: none; }
.hb-header #logo { flex: none; margin: 0; }
.hb-header #logo img { display: block; width: auto; height: 54px; max-width: none; }
.hb-header #logo h1 { margin: 0; font-size: 24px; }
.hb-search {
  display: flex; flex: 1 1 auto; min-width: 0; height: 38px; margin: 0 30px 0 50px;
  background: #fff; border-radius: 40px;
}
.hb-header #search { margin-bottom: 0; } /* a gyári #search 10 px alsó margója 5 px-szel feljebb tolná */
.hb-search .form-control {
  height: 100%; padding: 0 12px 0 16px; border: 0; border-radius: 40px 0 0 40px; box-shadow: none;
  background: transparent; color: var(--hb-bg); font-size: 15px;
}
.hb-search .form-control::placeholder { color: var(--hb-bg); opacity: 1; }
.hb-search .form-control:focus { box-shadow: none; }
.hb-search-btn { flex: none; width: 45px; height: 100%; border-radius: 0 40px 40px 0; background: var(--hb-accent); color: #fff; font-size: 20px; }
.hb-search-btn:hover, .hb-search-btn:focus { background: var(--hb-primary); }
.hb-acct { flex: none; }
.hb-acct > .hb-dd-toggle { display: flex; align-items: center; height: 43px; padding: 5px; }
.hb-acct > .hb-dd-toggle > .fa { margin: 5px 10px 0 0; font-size: 28px; }
.hb-acct-txt b { display: block; font-size: 15px; font-weight: 700; line-height: 1.2; }
.hb-acct-txt small { display: block; font-size: 10px; font-weight: 400; line-height: 1.3; color: var(--hb-text-muted); white-space: nowrap; }
.hb-acct .hb-dd-menu { left: auto; right: 0; }
.hb-acct .hb-dd-menu::before { left: auto; right: 20px; }
.hb-cmp { position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 48px; height: 43px; margin-left: 8px; }
.hb-cmp > .fa {
  display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-top: 5px;
  border: 2px solid #fff; border-radius: 50%; font-size: 13px;
}
.hb-badge {
  position: absolute; display: flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 3px;
  background: var(--hb-badge); border: 1px solid #fff; border-radius: 10px;
  color: #fff; font-family: var(--hb-font); font-size: 11px; font-weight: 400; line-height: 1;
}
.hb-cmp > .hb-badge { top: 7px; left: 25px; }

/* ---------------------------------------------------------------- 5. menüsáv (40 px) + kosár
   A sáv ragadás előtt is ugyanolyan, mint ragadva (tulaj 09-30): teljes szélességű, 40 px, árnyékkal → megakadáskor semmi nem mozdul. */
.hb-navbar { background: var(--hb-primary); box-shadow: 0 10px 30px rgba(0, 0, 0, .1); }
.hb-navbar .container { height: 40px; background: var(--hb-primary); }
/* ≥1320 px (a 1280-as doboz mellett marad hely) oldalsó belső margó nélkül: a menü a doboz bal, a kosár a jobb széléig ér (a régi ragadt sáv) */
@media (min-width: 1320px) {
  .hb-navbar .container { padding-left: 0; padding-right: 0; }
}
.hb-nav { display: flex; flex: 1 1 auto; align-items: stretch; min-width: 0; height: 100%; }
.hb-nav-head, .hb-sub-toggle, .hb-nav-overlay { display: none; }
.hb-nav-main, .hb-nav-right { display: flex; align-items: stretch; height: 100%; }
.hb-nav-right { margin-left: auto; }
.hb-nav-main > li, .hb-nav-right > li { display: flex; }
.hb-nav-main > li + li > a, .hb-nav-right > li > a { border-left: 1px solid var(--hb-nav-div); }
.hb-nav-main > li > a, .hb-nav-right > li > a {
  display: flex; align-items: center; padding: 0 10px; white-space: nowrap;
  font-family: var(--hb-font-head); font-size: 14px; font-weight: 700; line-height: 21px; text-transform: uppercase; color: #fff;
}
.hb-nav-main > li > a > .fa, .hb-nav-contact > a > .fa { display: none; }
.hb-nav-info > a > .fa { margin-right: 5px; font-size: 17px; }
.hb-nav-main > li:hover > a, .hb-nav-main > li:focus-within > a, .hb-nav-right > li:hover > a, .hb-nav-right > li:focus-within > a,
.hb-nav-main > li > a:focus, .hb-nav-right > li > a:focus { background: var(--hb-accent); color: #fff; }
.hb-nav-main > .hb-nav-special > a { color: var(--hb-gold); }
/* lenyílók: hoverre, kis késleltetéssel (a régi hoverIntent helyett); billentyűzettel is */
.hb-sub {
  position: absolute; top: 100%; z-index: 5; visibility: hidden; opacity: 0;
  transition: opacity .15s ease .1s, visibility 0s linear .25s;
}
.hb-nav li:hover > .hb-sub, .hb-nav li:focus-within > .hb-sub { visibility: visible; opacity: 1; transition-delay: .12s, .12s; }
/* mega-panel: a teljes konténer-szélesség (a .hb-bar a viszonyítási pont), 6 oszlop */
.hb-mega {
  left: 0; right: 0; max-height: 600px; overflow-y: auto; padding: 10px;
  background: var(--hb-bg); border-top: 1px solid var(--hb-head-line); box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}
.hb-mega-cols { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.hb-mega-cols > li { padding: 10px; }
.hb-mega-cols a {
  display: inline; padding-bottom: 2px; border-bottom: 1px dotted var(--hb-head-line);
  font-family: var(--hb-font-head); font-size: 16px; font-weight: 700; line-height: 1.6; color: #fff;
}
.hb-mega-cols a:hover, .hb-mega-cols a:focus { color: var(--hb-accent); }
/* 3. szint (hb-504, 10-09; a hb_menu modul adja): az oszlopcím alatt az alkategóriái — linklista fehérrel, előtte „›”, hoverre zöld
   (a régin kép is volt a cím és a lista között: E15). A ⊕ gomb csak mobilon látszik.
   hb-620 (10-19, Zoli: „a TR-menü jobban olvasható”): 15 px (előtte a régi 13 px), a cím 16 px; a hosszú név nem vágódik le „…”-tal,
   hanem két sorba törik, a második sor a „›” mögé igazodik (flex). */
.hb-mega-sub { margin-top: 8px; }
.hb-mega-cols .hb-mega-sub a {
  display: flex; padding: 2px 0; border: 0;
  font-family: var(--hb-font); font-size: 15px; font-weight: 400; line-height: 1.6;
}
.hb-mega-cols .hb-mega-sub a::before { content: "\203A"; flex: none; margin-right: 6px; }
/* Infó-lenyíló: kis lista a menüpont alatt */
.hb-nav-right > li { position: relative; }
.hb-drop { left: 0; min-width: 200px; padding: 5px 0; background: var(--hb-bg); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.hb-drop a { display: block; padding: 10px; font-size: 15px; font-weight: 400; line-height: 1.4; color: #fff; white-space: nowrap; }
.hb-drop a:hover, .hb-drop a:focus { color: var(--hb-accent); }
/* kosár: táska + „Kosár" + jelvény; bal oldalt világos vonal */
.hb-header #cart { flex: none; display: block; height: 100%; margin: 0 0 0 20px; border-left: 1px solid var(--hb-head-line); }
.hb-cart-btn {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 49px; height: 100%; color: #fff;
}
.hb-cart-btn > .fa { font-size: 22px; line-height: 1; }
.hb-cart-label { display: block; margin-top: 1px; font-size: 12px; line-height: 12px; }
.hb-cart-btn > .hb-badge { top: 0; right: -5px; }
.hb-cart-btn:hover, .hb-cart-btn:focus, #cart.open > .hb-cart-btn { background: var(--hb-accent); }
.hb-cart-btn.hb-loading > .fa::before { content: "\f110"; } /* fa-spinner a gyári „Betöltés..." helyett */
.hb-cart-btn.hb-loading > .fa { animation: fa-spin 1s linear infinite; }
.hb-header #cart .dropdown-menu { min-width: 400px; margin-top: 0; border-radius: 0; }
.hb-header #cart .dropdown-menu li > div { min-width: 0; }
.hb-header #cart .dropdown-menu td.text-right { white-space: nowrap; } /* „x 2" és az ár ne törjön két sorba */

/* ---------------------------------------------------------------- 6. szűk asztal (1025–1279 px): minden elfér egy sorban */
@media (min-width: 1025px) and (max-width: 1279px) {
  .hb-header #logo img { height: 44px; } /* hb-382: a 70→54 arányában (56 × 0,8) */
  .hb-search { margin: 0 20px 0 30px; }
  .hb-nav-main > li > a, .hb-nav-right > li > a { padding: 0 7px; font-size: 12px; }
  .hb-nav-info > a > .fa { font-size: 15px; }
  .hb-header #cart { margin-left: 10px; }
}
@media (min-width: 1025px) and (max-width: 1139px) {
  .hb-nav-main > li > a, .hb-nav-right > li > a { padding: 0 5px; font-size: 11px; }
}

/* ---------------------------------------------------------------- 7. mobil fejléc (≤1024 px) */
@media (max-width: 1024px) {
  .hb-header { top: -30px; }
  html { scroll-padding-top: 62px; }
  .hb-header .container { width: auto; max-width: none; padding-left: 0; padding-right: 0; }

  /* felső sáv 30 px: bal Belépés/Regisztráció (belépve Fiókom/Kilépés), jobb pénznem + nyelv */
  .hb-topbar .container { height: 30px; padding: 0 5px; }
  .hb-top-left, .hb-top-phone { display: none; }
  .hb-top-acct { display: flex; align-items: center; height: 100%; }
  .hb-top-acct a { display: flex; align-items: center; height: 100%; padding: 0 5px; font-size: 11px; font-weight: 700; text-transform: uppercase; white-space: nowrap; }
  .hb-top-acct .fa { margin-right: 5px; font-size: 14px; }
  .hb-top-right { gap: 10px; }
  .hb-top-right .hb-cur { order: -1; }
  .hb-top-right .hb-dd-toggle { font-size: 14px; }
  .hb-top-right .hb-dd-toggle img, .hb-top-right .hb-dd-toggle b { display: none; }

  /* fő sáv 60 px: ☰ · logó · … · fiók · nagyító · (kosár: a menüsávból ide igazítva) */
  .hb-midbar { box-shadow: rgba(0, 0, 0, .2) 0 15px 90px -10px; } /* hb-381: az árnyék is a külső elemen */
  .hb-midbar .container { height: 60px; padding-right: 56px; }
  .hb-burger { display: flex; align-items: center; justify-content: center; flex: none; width: 45px; height: 60px; font-size: 28px; }
  .hb-header #logo { margin-left: 5px; padding: 0 15px; }
  .hb-header #logo img { height: 30px; }
  .hb-acct { margin-left: auto; }
  .hb-acct > .hb-dd-toggle { justify-content: center; width: 40px; height: 60px; padding: 0; }
  .hb-acct > .hb-dd-toggle > .fa { margin: 0; font-size: 26px; }
  .hb-acct > .hb-dd-toggle > .fa-user-o::before { content: "\f007"; } /* teli ember-ikon, mint a régi mobilon */
  .hb-acct-txt, .hb-acct > .hb-dd-menu, .hb-cmp { display: none !important; }
  .hb-search-toggle { display: flex; align-items: center; justify-content: center; flex: none; width: 60px; height: 60px; font-size: 26px; }
  /* a kereső a fő sáv alá nyílik: világos, lekerekített keretben lebeg a tartalom fölött (a régi) */
  .hb-search {
    display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 4; height: auto; margin: 0; padding: 5px;
    background: rgba(238, 238, 238, .9); border-radius: 40px;
  }
  .hb-search-open .hb-search { display: flex; }
  .hb-search .form-control { height: 40px; background: #fff; font-size: 16px; }
  .hb-search-btn { height: 40px; width: 45px; }

  /* a menüsáv mobilon csak a kosarat hordozza: a fő sáv jobb szélére kerül */
  .hb-navbar { position: absolute; top: 30px; right: 0; height: 60px; background: none; box-shadow: none; }
  .hb-navbar .container { height: 60px; background: none; }
  .hb-header #cart { margin: 0; }
  .hb-cart-btn { width: 55px; }
  .hb-cart-label { display: none; }
  .hb-cart-btn > .fa { font-size: 24px; }
  .hb-cart-btn > .hb-badge { top: 8px; right: 4px; }
  .hb-header #cart .dropdown-menu { width: calc(100vw - 16px); min-width: 0; max-width: 400px; max-height: 70vh; }

  /* a menü: balról becsúszó panel + fátyol */
  .hb-nav {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 2; display: block; width: 80%; max-width: 320px; height: auto;
    overflow-y: auto; overscroll-behavior: contain; background: var(--hb-bg);
    transform: translateX(-100%); visibility: hidden; transition: transform .35s ease, visibility 0s linear .35s;
  }
  .hb-nav-open .hb-nav { transform: none; visibility: visible; transition: transform .35s ease; }
  .hb-nav-overlay {
    display: block; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1;
    background: #444349; opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s linear .35s;
  }
  .hb-nav-open .hb-nav-overlay { opacity: .85; visibility: visible; transition: opacity .35s; }
  html.hb-nav-open, html.hb-nav-open body { overflow: hidden; }
  .hb-nav-head { display: flex; align-items: center; justify-content: space-between; height: 45px; }
  .hb-nav-head > span { padding: 0 12px; font-family: var(--hb-font-head); font-size: 17px; font-weight: 300; text-transform: uppercase; }
  .hb-nav-close { width: 45px; height: 45px; font-size: 25px; }
  .hb-nav-main, .hb-nav-right { display: block; height: auto; margin: 0; }
  .hb-nav-main > li, .hb-nav-right > li { display: block; position: relative; border-bottom: 1px solid var(--hb-primary); }
  .hb-nav-main > li > a, .hb-nav-right > li > a, .hb-nav-main > li + li > a {
    display: flex; min-height: 46px; padding: 10px 56px 10px 5px; border-left: 0;
    font-size: 17px; font-weight: 400; line-height: 25px; text-transform: none; white-space: normal;
  }
  .hb-nav-main > li > a > .fa, .hb-nav-right > li > a > .fa { display: inline-block; width: 24px; margin: 0 10px 0 5px; font-size: 22px; text-align: center; }
  .hb-nav-used > a > .fa { color: #f0883a; }
  .hb-nav-main > li:hover > a, .hb-nav-right > li:hover > a { background: none; }
  .hb-nav-main > li > a:focus, .hb-nav-right > li > a:focus { background: rgba(255, 255, 255, .06); }
  .hb-sub-toggle {
    display: flex; align-items: center; justify-content: center; position: absolute; top: 1px; right: 8px;
    width: 44px; height: 44px; background: var(--hb-accent); border-radius: 10px; font-size: 22px; color: #fff;
  }
  /* körvonalas ⊕ / ⊖ (a régi): kör-keret + fa-plus / fa-minus */
  .hb-sub-toggle > .fa {
    display: flex; align-items: center; justify-content: center; width: 21px; height: 21px;
    border: 2px solid #fff; border-radius: 50%; font-size: 11px;
  }
  .hb-sub-toggle > .fa::before { content: "\f067"; }
  .hb-open > .hb-sub-toggle > .fa::before { content: "\f068"; }
  .hb-sub, .hb-nav li:hover > .hb-sub, .hb-nav li:focus-within > .hb-sub {
    display: none; position: static; visibility: visible; opacity: 1; transition: none;
    max-height: none; padding: 0 0 10px; background: none; border: 0; box-shadow: none; min-width: 0;
  }
  .hb-nav li.hb-open > .hb-sub { display: block; }
  .hb-mega-cols { display: block; }
  .hb-mega-cols > li { padding: 0; }
  .hb-mega-cols a, .hb-drop a {
    display: block; padding: 7px 10px 7px 20px; border: 0; font-family: var(--hb-font); font-size: 15px; font-weight: 400; line-height: 1.4; white-space: normal;
  }
  .hb-mega-cols a::before, .hb-drop a::before { content: "\203A"; margin-right: 6px; }
  /* 3. szint (hb-504): az alkategória a saját ⊕ gombjával nyílik, egy szinttel beljebb (a régi harmonika szintenként beljebb kezdett) */
  .hb-mega-cols > li.hb-has-sub3 { position: relative; }
  .hb-mega-cols > li.hb-has-sub3 > a { display: flex; align-items: center; min-height: 44px; padding-right: 56px; }
  .hb-mega-cols .hb-sub-toggle { top: 2px; width: 40px; height: 40px; }
  .hb-mega-sub { display: none; margin: 0; }
  .hb-mega-cols > li.hb-open > .hb-mega-sub { display: block; }
  .hb-mega-cols .hb-mega-sub a { display: block; padding: 7px 10px 7px 35px; font-size: 14px; line-height: 1.4; }
}
@media (max-width: 380px) {
  .hb-header #logo { padding: 0 8px; }
  .hb-header #logo img { height: 26px; }
  .hb-search-toggle { width: 46px; }
}