/* === DREAMY — nová hlavička na PC  ·  v11 · 2026-09-30 ===
 * Patří k hlavicka.js. Platí jen od 1200 px šířky — mobil a tablet zůstávají beze změny.
 * Záhlaví: <link rel="stylesheet" href="/user/documents/upload/styles/hlavicka.css?v=11">
 *
 * Řádek 1: logo · velké vyhledávací pole · Prodejny · Garance · Košík
 * Řádek 2: Matrace · Polštáře · Postele a rošty · Křesla La-Z-Boy · Doplňky · Outlet
 * Prvky Shoptetu (vyhledávání s našeptávačem, rozbalovací menu, košík) se jen přeskládají, fungují dál.
 */
/* mimo PC rozvržení doplněné prvky nezobrazovat (mobil/tablet zůstává, jak je) */
#header .dz-hlink,
#header .dz-cart-label { display: none; }

@media (min-width: 1200px) {
  #header .dz-hlink { display: inline-block; }
  #header .dz-cart-label { display: inline; }

  /* ---------- rozvržení: 2 řádky ---------- */
  #header { height: auto !important; background: #fff !important; border-bottom: 1px solid #efe9ec; }
  #header .navigation-wrapper { height: auto !important; display: flex !important; flex-direction: column; }
  #header .header-top {
    height: 84px !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    gap: 40px;
    position: relative;
  }
  #header .header-top > * { margin-left: 0 !important; }
  #header .site-name-wrapper { flex: 0 0 auto; }
  #header .site-name img { height: 40px !important; width: auto !important; }

  /* ---------- vyhledávání: vždy viditelné pole ---------- */
  #header .search {
    flex: 1 1 auto;
    max-width: 600px;
    height: auto !important;
    width: auto !important;
    position: relative !important;
    display: block !important;
  }
  #header #formSearchForm {
    position: relative !important;
    top: auto !important; left: auto !important; right: auto !important;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
  }
  #header #formSearchForm .search-toggle { display: none !important; }
  /* Shoptet po kliknutí do vyhledávání přidá .hovered a udělá z formuláře tmavý „overlay" — tady ho zneutralizujeme */
  #header #formSearchForm.hovered { background: transparent !important; height: auto !important; padding: 0 !important; margin: 0 !important; left: 0 !important; width: 100% !important; box-shadow: none !important; }
  #header #formSearchForm.hovered fieldset { padding: 0 !important; margin: 0 !important; left: 0 !important; top: 0 !important; width: 100% !important; max-width: none !important; }
  #header #formSearchForm fieldset { display: block !important; position: relative !important; left: 0 !important; top: 0 !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border: 0; }
  #header #formSearchForm .search-input {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 100% !important;
    height: 48px !important;
    padding: 0 18px 0 46px !important;
    border: 1px solid #e8e3df !important;
    border-radius: 12px !important;
    background: #f5f3f1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b6570' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 16px center !important;
    font-family: Rubik, sans-serif !important;
    font-size: 15px !important;
    color: #1a1a1a !important;
    box-shadow: none !important;
    transition: border-color .2s, background-color .2s;
  }
  #header #formSearchForm .search-input:focus { border-color: #d90074 !important; background-color: #fff !important; outline: none; }
  #header #formSearchForm .search-input::placeholder { color: #8a8590; }
  /* tlačítko „Hledat" schované vizuálně — hledá se Enterem, pro čtečky zůstává */
  #header #formSearchForm button.btn {
    position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
    overflow: hidden !important; clip: rect(0 0 0 0) !important; border: 0 !important;
  }
  #header .search-whisperer { top: 54px !important; left: 0 !important; width: 100% !important; }
  /* šablona našeptávač schovává, když je pole „zavřené“ (compact-form) — u nás je pole otevřené vždy */
  #header #formSearchForm .search-whisperer.active { display: block !important; z-index: 1000; border-radius: 12px; box-shadow: 0 18px 40px -18px rgba(20,17,24,.35); }

  /* ---------- pravé odkazy + košík ---------- */
  #header .navigation-buttons {
    margin-left: auto !important;
    width: auto !important;
    flex: 0 0 auto;
    height: auto !important;
    position: static !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-end !important;
    gap: 34px;
  }
  #header .dz-hlink {
    font-family: Rubik, sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #1a1a1a !important;
    text-decoration: none !important;
    white-space: nowrap;
    transition: color .2s;
  }
  #header .dz-hlink:hover { color: #d90074 !important; }
  #header .navigation-buttons .cart-count {
    position: relative !important;
    top: auto !important; left: auto !important; right: auto !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;   /* šablona ji posouvá o 17 px nahoru */
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
  }
  #header .navigation-buttons .cart-count::before { top: 50% !important; transform: translateY(-50%); left: 0 !important; }
  #header .navigation-buttons .cart-count .dz-cart-label {
    margin-left: 32px;   /* místo pro ikonu košíku (::before, absolutně vlevo) */
    font-family: Rubik, sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #1a1a1a;
  }
  #header .navigation-buttons .cart-count:hover .dz-cart-label { color: #d90074; }
  /* přihlášení není v návrhu — „Můj účet" je v zápatí */
  #header .top-nav-button-login { display: none !important; }

  /* ---------- řádek 2: menu kategorií ---------- */
  #navigation {
    margin-left: 0 !important;
    position: relative !important;
    top: auto !important; left: auto !important;
    width: 100% !important;
    height: 52px !important;
    transform: none !important;
  }
  #navigation .navigation-in { position: relative !important; width: 100% !important; height: 52px !important; }
  #header .menu-helper { display: none !important; }   /* ikona „další položky" */
  #navigation .menu-level-1 {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center;
    gap: 34px;
    width: auto !important;
    height: 52px !important;
    margin: 0 !important;
  }
  #navigation .menu-level-1 > li { height: 52px; display: flex; align-items: center; padding: 0 !important; margin: 0 !important; }
  #navigation .menu-level-1 > li:first-child { margin-left: 0 !important; }
  /* pořadí jako v návrhu: … Postele a rošty · Křesla La-Z-Boy · Doplňky · Outlet */
  #navigation .menu-level-1 > li.menu-item-2681 { order: 4; }
  #navigation .menu-level-1 > li.menu-item-2590 { order: 5; }
  #navigation .menu-level-1 > li.menu-item-2728 { order: 6; }
  #navigation .menu-level-1 > li > a {
    font-family: Rubik, sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #1a1a1a !important;
    padding: 0 !important;
    margin: 0 !important;   /* šablona dává 20 px vpravo */
    line-height: 52px !important;
    height: 52px !important;
    white-space: nowrap;
  }
  #navigation .menu-level-1 > li > a:hover { color: #d90074 !important; }
  #navigation .menu-level-1 > li .submenu-arrow { display: none !important; }
  /* rozbalovací menu hned pod řádkem menu (šablona ho posouvá o 100 px — vznikla by mezera, přes kterou by menu při přejezdu myší zmizelo) */
  /* v11: #header navíc — šablona Carbon má „#navigation ul.menu-level-1>li .menu-level-2 { top: 60px !important }"
     s vyšší specificitou, takže vyhrávala → mezera 8 px (14 px u přilepené hlavičky) */
  #header #navigation .menu-level-1 > li > .menu-level-2 { top: 100% !important; margin-top: 0 !important; }
  #navigation .menu-level-1 > li.dz-outlet > a { color: #d90074 !important; }
  /* Shoptet „dělí" menu: položky, které se podle něj nevejdou, označí .splitted a schová je.
     Při schovávání menu při scrollu si to přepočítá špatně a schová všechno → dělení na PC vypínáme,
     kategorie jsou vidět vždy. */
  #navigation .menu-level-1 > li.splitted { display: flex !important; visibility: visible !important; }
  /* Prodejny Dreamy / Blog / Kontakty z menu pryč — Prodejny jsou vpravo nahoře, ostatní v zápatí */
  #navigation .menu-level-1 > li.menu-item-2814,
  #navigation .menu-level-1 > li.menu-item-682,
  #navigation .menu-level-1 > li.menu-item-29 { display: none !important; }
  #navigation .menu-level-1 > li.menu-item-more,
  #navigation .menu-level-1 > li.appended-category { display: none !important; }

  /* ---------- hlavička při scrollu (Shoptet přidá .fixed-menu) ---------- */
  #header.fixed-menu { box-shadow: 0 6px 20px -14px rgba(20, 17, 24, .25); }
  #header.fixed-menu .header-top { height: 68px !important; }
  #header.fixed-menu #navigation,
  #header.fixed-menu #navigation .navigation-in,
  #header.fixed-menu #navigation .menu-level-1,
  #header.fixed-menu #navigation .menu-level-1 > li,
  #header.fixed-menu #navigation .menu-level-1 > li > a { height: 46px !important; line-height: 46px !important; }
}

/* ---------- v2: při scrollu dolů schovat řádek s menu (třídu přidává hlavicka.js) ---------- */
@media (min-width: 1200px) {
  #header #navigation {
    transition: height .3s ease, opacity .25s ease, transform .3s ease;
  }
  #header.fixed-menu.dz-nav-hidden #navigation {
    height: 0 !important;
    opacity: 0;
    transform: translateY(-10px) !important;
    overflow: hidden;
    pointer-events: none;
  }
  #header.fixed-menu.dz-nav-hidden #navigation .navigation-in,
  #header.fixed-menu.dz-nav-hidden #navigation .menu-level-1 { height: 0 !important; }
}

/* v3 — texty menu o kousek výš */
@media (min-width: 1200px) {
  #navigation .menu-level-1 > li > a { transform: translateY(-4px); }
}

/* v5 — Outlet jako růžový štítek, ať se odliší od ostatních kategorií */
@media (min-width: 1200px) {
  #navigation .menu-level-1 > li.dz-outlet > a {
    height: 30px !important;
    line-height: 30px !important;
    padding: 0 14px !important;
    border-radius: 999px;
    background: #d90074;
    color: #fff !important;
    font-weight: 600 !important;
    transform: translateY(-4px);   /* stejně jako ostatní texty menu */
    transition: background .2s;
  }
  #navigation .menu-level-1 > li.dz-outlet > a:hover { background: #a3005a; color: #fff !important; }
  #header.fixed-menu #navigation .menu-level-1 > li.dz-outlet > a { height: 28px !important; line-height: 28px !important; }
}

/* v6 — Outlet: jemnější růžová, mírně zaoblený obdélník místo „pilulky" */
@media (min-width: 1200px) {
  #navigation .menu-level-1 > li.dz-outlet > a { border-radius: 6px; background: #fbe3ef; color: #d90074 !important; }
  #navigation .menu-level-1 > li.dz-outlet > a:hover { background: #f6cde1; color: #b8005f !important; }
}

/* v8 — pojistka: když hlavička není „přilepená", menu je vždy vidět */
@media (min-width: 1200px) {
  #header:not(.fixed-menu) #navigation { opacity: 1 !important; height: 52px !important; transform: none !important; pointer-events: auto !important; }
}

/* v10 — lišta „název produktu + Přidat do košíku" (detail produktu) přesně pod hlavičkou
   (šablona ji má natvrdo 80 px od vrchu → pod novou hlavičkou vznikala mezera / překryv) */
@media (min-width: 1200px) {
  .fixed-cart-line { top: var(--dz-header-bottom, 80px) !important; transition: top .3s ease; }
}