/* ════════════════════════════════════════════════════════════════════════
   04-mobile-nav.css — VOALA header na mobilu

   Mobilní mock (Figma HOME 375 px): logo wordmark menší (výška 23 px),
   centrovaný, akce po stranách. Menu je stejný fullscreen overlay jako
   na desktopu, jen s menšími odkazy (clamp v --fs-overlay-link).

   Rozložení ≤ 820 px:
   - vlevo: hamburger
   - uprostřed: logo (absolutní centrování)
   - vpravo: taška (WC) — lupa a CZ/EN se přesouvají do overlay baru
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 820px) {

  .vo-header { height: 64px; }
  .vo-header__inner {
    position: relative;
    padding: 0 20px;
  }

  /* Logo do středu */
  .vo-header .vo-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  /* Figma mobil (390): wordmark 96,6 × 28,6 — stejná velikost jako desktop */
  .vo-header .vo-logo svg { height: 29px; }

  /* Burger doleva, taška doprava — akce roztáhnout přes celou šířku
     (logo je absolutně centrované, ve flow zbývá jen blok akcí) */
  .vo-header .vo-header__actions {
    width: 100%;
    justify-content: space-between;
  }
  .vo-header .vo-burger { order: -1; }

  /* Lupa a CZ/EN v headeru schovat (jsou v overlay baru) */
  .vo-header__actions .vo-search-btn,
  .vo-header__actions .vo-lang { display: none; }

  .vo-header__actions { gap: 18px; }

  /* Overlay bar na mobilu */
  .vo-overlay__bar {
    flex-basis: 64px;
    height: 64px;
    padding: 0 20px;
  }
  .vo-overlay__bar .vo-logo svg { height: 29px; }
  .vo-overlay__close svg { width: 42px; height: auto; }

  /* Overlay bar na mobilu: vlnky vlevo, logo uprostřed, jen CZ/EN vpravo
     (lupa + taška zůstávají v headeru — v baru by kolidovaly s logem) */
  .vo-overlay__bar .vo-search-btn,
  .vo-overlay__bar .vo-cart-btn { display: none; }
  .vo-overlay__bar .vo-lang { display: inline-flex; }
}

@media (max-width: 400px) {
  .vo-header__actions { gap: 14px; }
  .vo-overlay__bar .vo-header__actions { gap: 12px; }
}