/* =========================================================================
   ECCE VITA – MOBILNÍ HLAVIČKA (CSS)
   Pouze MOBIL (max-width: 768px)
   Párový JS: ecce-mobilni-hlavicka.js (přesun hamburgeru + měření výšky)
   Cíle:
     1) Hlavička 1:1 dle Figmy (hamburger | logo | srdce | účet | košík)
     2) Odolnost vůči notifikačnímu proužku o 1 / 2 / 3+ řádcích
        -> odsazení se počítá z reálné výšky hlavičky (--dkral-header-h),
           kterou nastavuje párový JS přes ResizeObserver.
   Pozn.: vše prefixováno "dkral-", vysoká specificita + !important
          (Shoptet má closed-source styly, které je nutné přebíjet).
   ========================================================================= */

@media (max-width: 768px) {

  /* ---- Notifikační (announcement) proužek: necháme přirozeně růst ---- */
  #header .site-msg.information {
    position: relative !important;
    min-height: 0 !important;
    height: auto !important;
    z-index: 10 !important;
  }
  /* skrytý zavírací křížek nenechává prázdné místo */
  #header .site-msg.information .close.js-close-information-msg {
    display: none !important;
  }

  /* ---- Hnědý bar = řádek: [hamburger][logo][srdce][účet][košík] ---- */
  #header .container.navigation-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    column-gap: 0 !important;
    min-height: 56px !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    background: #36200B !important;
    position: relative !important;
    /* O kolik posunout všechny prvky baru svisle dolů (změň na jednom místě) */
    --dkral-icons-shift: 5px;
  }

  /* Svislý posun celé řady (hamburger, logo, srdce, login, košík) */
  #header .container.navigation-wrapper > .mburg,
  #header .container.navigation-wrapper > .site-name,
  #header .container.navigation-wrapper > .navigation-buttons {
    transform: translateY(var(--dkral-icons-shift, 0px)) !important;
  }

  /* Hamburger – přesunut do baru (JS), statický, zarovnaný vlevo */
  #header .container.navigation-wrapper > .mburg {
    position: static !important;
    order: 0 !important;
    flex: 0 0 auto !important;
    width: 34px !important;
    height: 56px !important;
    margin: 0 !important;
    top: auto !important; left: auto !important; right: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
  /* Normalizace mmenu tlačítka a 3 proužků na stejnou tloušťku/šířku/rozestup.
     (Shoptet/mmenu dává prostřednímu proužku 1.5px a různé pozice – sjednocujeme.) */
  #header .mburg .mburger {
    position: relative !important;
    width: 24px !important;
    height: 16px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    flex: 0 0 24px !important;
  }
  /* Plynulá animace hamburger <-> X (best practice):
     - všechny 3 proužky leží na SPOLEČNÉM svislém středu (top:50%)
     - rozmístění i přeměna se dělá JEN přes transform + opacity
       (běží na GPU/kompozitoru, žádný reflow z animace top)
     - transition dáváme na základní pravidlo -> animuje v obou směrech
     - přebíjíme i případný vlastní transition od mmenu */
  #header .mburg .mburger b {
    position: absolute !important;
    left: 0 !important; right: auto !important;
    top: 50% !important;
    width: 24px !important;
    height: 2px !important;
    margin: -1px 0 0 0 !important; /* půl výšky -> přesný střed */
    border-radius: 2px !important;
    background-color: #fff !important;
    transform-origin: center center !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s ease !important;
    will-change: transform, opacity !important;
    backface-visibility: hidden !important;
  }
  /* ZAVŘENÝ stav – hamburger (rozestup 7px přes translateY) */
  #header .mburg .mburger b:nth-of-type(1) { transform: translateY(-7px) !important; }
  #header .mburg .mburger b:nth-of-type(2) { transform: translateY(0) !important; opacity: 1 !important; }
  #header .mburg .mburger b:nth-of-type(3) { transform: translateY(7px) !important; }

  /* OTEVŘENÝ stav (mmenu) -> křížek (X).
     POZOR: mmenu dává třídu na <body>, ne na <html>.
     Pokrýváme průběh animace (_opening) i ustálený stav (_opened). */
  body.mm-wrapper_opening #header .mburg .mburger b:nth-of-type(1),
  body.mm-wrapper_opened  #header .mburg .mburger b:nth-of-type(1) {
    transform: translateY(0) rotate(45deg) !important;
  }
  body.mm-wrapper_opening #header .mburg .mburger b:nth-of-type(2),
  body.mm-wrapper_opened  #header .mburg .mburger b:nth-of-type(2) {
    transform: translateY(0) scaleX(0.2) !important;
    opacity: 0 !important;
  }
  body.mm-wrapper_opening #header .mburg .mburger b:nth-of-type(3),
  body.mm-wrapper_opened  #header .mburg .mburger b:nth-of-type(3) {
    transform: translateY(0) rotate(-45deg) !important;
  }

  /* Logo */
  #header .container.navigation-wrapper .site-name {
    order: 1 !important;
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;
    max-width: none !important;
    height: 56px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    position: static !important;
    left: auto !important; top: auto !important;
    transform: translateY(var(--dkral-icons-shift, 0px)) !important;
    /* Logo je hnědé -> převedeme na čistě bílé (stejně jako původně na live) */
    filter: brightness(0) invert(1) !important;
  }
  #header .container.navigation-wrapper .site-name a {
    display: flex !important;
    align-items: center !important;
    height: 56px !important;
    min-width: 120px !important;
  }
  #header .container.navigation-wrapper .site-name img {
    width: 130px !important;
    max-width: 44vw !important;
    height: auto !important;
    max-height: 32px !important;
    object-fit: contain !important;
    margin: 0 !important;
  }

  /* Skupina ikon vpravo */
  #header .container.navigation-wrapper .navigation-buttons {
    order: 2 !important;
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    position: static !important;
    top: auto !important; right: auto !important;
    transform: translateY(var(--dkral-icons-shift, 0px)) !important;
  }

  /* Schované prvky, které ve Figmě nejsou */
  #header .navigation-buttons .dropdown,
  #header .navigation-buttons .languagesMenu,
  #header .navigation-buttons a[data-target="search"],
  #header .navigation-buttons a[data-target="navigation"],
  #header .navigation-buttons .dkral-heureka-image {
    display: none !important;
  }
  #header .dkral-top-bar.dkral-contact-strip { display: none !important; }

  /* Jednotný vzhled ikon (srdce / účet / košík) */
  #header .navigation-buttons > a,
  #header .navigation-buttons > button,
  #header .navigation-buttons > #dkLabFavHeaderWrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 22px !important;
    color: #fff !important;
    box-sizing: border-box !important;
  }

  /* Pořadí dle Figmy: srdce -> účet -> košík */
  #header .navigation-buttons > #dkLabFavHeaderWrapper { order: 1 !important; }
  #header .navigation-buttons > .top-nav-button-login   { order: 2 !important; }
  #header .navigation-buttons > a[data-target="cart"]   { order: 3 !important; }

  /* Účet (login) – ikona uživatele */
  #header .navigation-buttons > .top-nav-button-login {
    font-size: 0 !important;
    background-image: url("https://www.eccevita.cz/user/documents/upload/denmar_folder/images/user.svg") !important;
  }
  /* Košík – ikona tašky */
  #header .navigation-buttons > a[data-target="cart"] {
    background-image: url("https://www.eccevita.cz/user/documents/upload/denmar_folder/images/shopping_bag.svg") !important;
  }
  /* Srdce – oblíbené (ikona je font-icon uvnitř) */
  #header .navigation-buttons > #dkLabFavHeaderWrapper .dkLabFavHeaderIconBtn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 56px !important;
    line-height: 56px !important;
    color: #fff !important;
  }

  /* ---- Vyhledávací "pill" (vždy viditelný pod barem) ----
     Odolnost: odsazení odvozeno z reálné výšky hlavičky (--dkral-header-h),
     kterou nastavuje párový JS, ne natvrdo 120px. */
  #header { z-index: 100000 !important; }

  .content-window.search-window {
    display: flex !important;
    width: 100% !important;
    height: auto !important;
    z-index: 1 !important;
  }
  .content-window-in.search-window-in {
    padding-top: calc(var(--dkral-header-h, 112px) + 8px) !important;
    padding-bottom: 12px !important;
  }
  input.query-input.form-control.search-input.js-search-input.lg {
    max-height: 45px !important;
    border-radius: 32px !important;
  }
  .navigation-buttons a[data-target="search"],
  .btn.toggle-window-arr.toggle-window[data-target="search"],
  .search button.btn.btn-default.btn-arrow-right.btn-lg {
    display: none !important;
  }
}