/* =============================================================================
 * VARIA+PLUS — mobilní hlavička (Shoptet, šablona Classic / 11-one)
 * Vlastní CSS · v1.0   —   patří k souboru varia-header-mobile.js
 *
 * Dvě věci:
 *   1) Hlavička na mobilu není přilepená nahoře — roluje s obsahem.
 *   2) Logo, hamburger a košík jsou v jednom zarovnaném řádku.
 *
 * Jak to bylo předtím: .top-navigation-bar i #header byly `position: fixed`
 * (dvě lišty nad sebou) a jednotlivé prvky uvnitř `position: absolute`
 * s ručními posuny — hamburger měl `top: -15px`, košík `top: 11px`, proto
 * nebyly v jedné rovině. Místo dopočítávání posunů se řádek staví flexem.
 *
 * Platí jen pro mobilní verzi šablony (body.mobile) do 767 px.
 * !important je tu potřeba, protože původní pravidla přicházejí ze style.css,
 * který se načítá až za námi.
 * ========================================================================== */

@media (max-width: 767px) {

  /* --------------------------------------------------- konec přilepení */
  body.mobile .top-navigation-bar,
  body.mobile #header {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
  }

  /* místo rezervované pro zafixovanou hlavičku už není k čemu */
  body.mobile .overall-wrapper {
    padding-top: 0 !important;
  }

  /* ------------------------------------------------------ řádek hlavičky */
  body.mobile #header .header-top {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 60px;
    height: auto !important;
    padding: 8px 14px;
  }

  body.mobile #header .site-name-wrapper {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
  }

  body.mobile #header .site-name {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    max-width: 190px;
    height: auto !important;
    margin: 0;
    padding: 0;
  }

  body.mobile #header .site-name img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 40px;
  }

  /* ------------------------------------------------- ikony vpravo v řadě */
  body.mobile #header .navigation-buttons {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex: 0 0 auto;
    width: auto !important;
    height: auto !important;
    margin: 0;
    padding: 0;
  }

  body.mobile #header .navigation-buttons .responsive-tools {
    position: static !important;
    display: flex !important;
    align-items: center;
    gap: 4px;
    width: auto !important;
    height: auto !important;
    margin: 0;
    padding: 0;
  }

  /* každá ikona stejný čtverec, obsah na střed */
  body.mobile #header .navigation-buttons > a,
  body.mobile #header .navigation-buttons .responsive-tools > a {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
    background: none;
    line-height: 1;
  }

  /* ikony kreslí šablona přes ::before — sjednotíme velikost a zarovnání */
  body.mobile #header .navigation-buttons > a::before,
  body.mobile #header .navigation-buttons .responsive-tools > a::before {
    position: static !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    font-size: 24px !important;
    line-height: 1 !important;
  }

  /* Ikony, které šablona na mobilu nepoužívá, mají nulový rozměr — ať
   * v řádku nedělají prázdné místo. */
  body.mobile #header .navigation-buttons .responsive-tools > a[data-target="search"]:empty,
  body.mobile #header .navigation-buttons .responsive-tools > a[data-target="login"]:empty {
    display: none !important;
  }

  /* cena u košíku se na mobil nevejde */
  body.mobile #header .navigation-buttons .cart-price {
    display: none !important;
  }

  /* --------------------------------------------- horní lišta s kontakty */
  body.mobile .top-navigation-bar {
    height: auto !important;
    min-height: 0;
    overflow: visible;
  }

  /* prázdný obal po přesunutých ikonách nesmí držet místo */
  body.mobile .top-navigation-bar .top-navigation-tools:empty {
    display: none !important;
  }
}