/* ==========================================================================
   NOVÁ HLAVIČKA + MEGAMENU — NANEČISTO (Roman 6. 9. 2026)
   Nikde nenasazeno. Testuje se injektáží do živého webu (_nahled.py).

   Reálie z reconu, na kterých to stojí:
   - hlavička jsou DVA sourozenci: .top-navigation-bar (h90, z-index 99)
     a #header (h56, z-index 9). Logo Dolomit JS-em stěhuje do horního pruhu.
   - .header-top má height:0 a jeho prvky jsou absolute (right 0/58/108/171/307)
   - hranice mobil/desktop je 768 (NE 992) — platforma hlásí
     navigation_breakpoint 767; naše stávající override na 992 nechávají
     pásmo 768–991 na syrovém Dolomitu
   - #navigation{overflow:hidden} + .navigation-in{width:9999em} je NOSNÉ
     (zkracování menu do „Více") — nesahat
   - .menu-helper NESMÍ zmizet z DOM, splitMenu() měří jeho offset
   - display na .menu-level-2 je PŘEPÍNAČ zavřeno/otevřeno — stylovat
     výhradně otevřený stav (li.exp / :hover / :focus-within)
   - position:sticky v hlavičce nefunguje (.overall-wrapper má overflow:hidden)
   ========================================================================== */

:root{
  --hd-promo-bg:#14213A;      /* tmavý pruh nahoře */
  --hd-promo-akcent:#F5C518;  /* kód slevy */
  --hd-ink:#1F2A37;
  --hd-muted:#6F6F6F;
  --hd-line:#E8E6E1;
  --hd-pill-active:#F6F1EA;   /* písková – aktivní položka menu */
  --hd-pill-sale:#FDE7EC;     /* světlá malinová – Výprodej */
  --hd-sale:#D31F3C;          /* ztmavená malinová, na bílé 4,8:1 (AA) */
  --hd-navy:#0A3A5C;
}

/* ---- anti-FOUC: JS hlavičku přeskládává, tak ji do té doby neukazujeme.
   opacity, NE visibility (potomek by visibility přebil) + CSS fallback
   reveal, aby hlavička nezůstala skrytá navždy, kdyby JS selhal. ---- */
html:not(.pono-hd-ready) .pono-hd,
html:not(.pono-hd-ready) .top-navigation-bar,
html:not(.pono-hd-ready) #header{
  opacity:0; pointer-events:none;
  animation:ponoHdReveal 0s linear 2.5s forwards;
}
@keyframes ponoHdReveal{ to{ opacity:1; pointer-events:auto } }

/* ====================== DESKTOP (>=768, jako Dolomit) ==================== */
@media (min-width:768px){

  /* původní horní pruh zmizí – jeho obsah si přebírá .pono-hd */
  html body .top-navigation-bar{ display:none !important; }

  .pono-hd{ position:relative; z-index:100; background:#fff; }
  .pono-hd__in{ max-width:1280px; margin:0 auto; padding:0 15px; }

  /* --- 1. akční pruh --- */
  .pono-hd__promo{ background:var(--hd-promo-bg); color:#fff; font-size:13px; }
  .pono-hd__promo .pono-hd__in{
    display:flex; align-items:center; justify-content:space-between;
    gap:24px; min-height:34px; padding-top:6px; padding-bottom:6px;
  }
  .pono-hd__promo-akce{ font-weight:700; }
  .pono-hd__promo-akce b{ color:var(--hd-promo-akcent); font-weight:800; letter-spacing:.02em; }
  .pono-hd__promo-vyhody{ display:flex; gap:32px; }
  .pono-hd__promo-vyhody span{ white-space:nowrap; }
  /* barvu textu v tmavém pruhu nastavujeme explicitně — theme má na
     #header a i #content a globální pravidla, která by ji přebila */
  .pono-hd__promo a, .pono-hd__promo a:link, .pono-hd__promo a:visited{
    color:#fff !important; text-decoration:underline;
  }

  /* --- 2. utility odkazy --- */
  .pono-hd__utility{ border-bottom:1px solid var(--hd-line); }
  .pono-hd__utility .pono-hd__in{
    display:flex; justify-content:flex-end; gap:22px; min-height:32px; align-items:center;
  }
  .pono-hd__utility a, .pono-hd__utility a:link, .pono-hd__utility a:visited{
    font-size:13px; color:var(--hd-muted) !important;
    text-decoration:underline; text-underline-offset:3px;
  }
  .pono-hd__utility a:hover, .pono-hd__utility a:focus{ color:var(--hd-ink) !important; }

  /* --- 3. hlavní řádek: logo | hledání | nástroje --- */
  .pono-hd__main .pono-hd__in{
    display:grid; grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center; gap:36px; min-height:104px;
  }
  .pono-hd__logo{ display:flex; align-items:center; }
  .pono-hd__logo img{ max-height:64px; width:auto; display:block; }
  /* hledání bylo 738 px proti logu 161 — neúměrně dominantní.
     Držíme ho na rozumné šířce a centrujeme ve volném sloupci. */
  .pono-hd__hledani{ display:flex; justify-content:center; }
  .pono-hd__hledani form.search-form{ max-width:560px; }

  /* hledání: používáme NATIVNÍ formulář (kvůli našeptávači), jen ho
     odkrýváme a přepozicováváme — vlastní input by whisperer neaktivoval */
  .pono-hd__hledani{ min-width:0; }
  .pono-hd__hledani form.search-form{
    position:static !important; width:100% !important;
    right:auto !important; bottom:auto !important; top:auto !important;
    display:block !important;
  }
  /* Rámeček byl 66 px vysoký, tlačítko 42 → poloměry 33 vs 21 px a opticky
     jiné zaoblení. Srovnáno: rámeček 54, tlačítko 42, obojí plně oblé. */
  .pono-hd__hledani form.search-form fieldset{
    display:flex !important; align-items:center !important; gap:10px;
    position:relative; width:100%; margin:0 !important;
    padding:5px 5px 5px 18px; height:54px; box-sizing:border-box;
    border:1.5px solid var(--hd-ink); border-radius:999px; background:#fff;
  }
  .pono-hd__hledani form.search-form fieldset::before{
    content:""; flex:0 0 20px; height:20px; opacity:.75; align-self:center;
    background:no-repeat center/contain
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2A37' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.5-3.5'/></svg>");
  }
  /* input byl o 5 px nad osou (střed 114 proti 119 u rámečku i tlačítka) —
     Dolomit mu dává vlastní margin a line-height */
  html body .pono-hd__hledani form.search-form input.query-input{
    flex:1 1 auto; min-width:0; opacity:1 !important;
    width:auto !important; height:42px !important;
    margin:0 !important; padding:0 4px !important;
    line-height:42px !important; vertical-align:middle !important;
    border:0 !important; box-shadow:none !important; background:transparent !important;
    font-size:15px; align-self:center !important;
  }
  html body .pono-hd__hledani form.search-form button.btn{
    flex:0 0 auto; height:42px !important; padding:0 26px !important;
    border-radius:999px !important;   /* Dolomit tu drží 15px */
    margin:0 !important; align-self:center !important;
    background:var(--hd-ink) !important; border:0 !important;
    color:#fff !important; font-weight:800; font-size:13px;
    letter-spacing:.06em; text-transform:uppercase; line-height:42px !important;
  }
  .pono-hd__hledani form.search-form button.btn:hover,
  .pono-hd__hledani form.search-form button.btn:focus{ background:var(--hd-navy) !important; }
  /* sbalovací lupa Dolomitu je v nové hlavičce zbytečná */
  .pono-hd__hledani .search-toggle{ display:none !important; }

  /* --- nástroje vpravo --- */
  .pono-hd__nastroje{ display:flex; align-items:center; gap:18px; }
  /* odznak stavíme z HTML: oficiální kruhový certifikát (130×130, zmenšený
     jen 2,4× na 54 a tedy ostrý) + vlastní text vedle */
  .pono-hd__heureka-in{
    display:flex !important; align-items:center; gap:10px;
    text-decoration:none !important;
  }
  .pono-hd__heureka-kruh{ display:block; width:54px; height:54px; flex:0 0 54px; }
  .pono-hd__heureka-text{ display:flex; flex-direction:column; line-height:1.1; }
  .pono-hd__heureka-text b{
    font-size:21px; font-weight:800; color:#F5A623; letter-spacing:-.01em;
  }
  .pono-hd__heureka-text i{
    font-style:normal; font-size:12px; color:var(--hd-muted); max-width:104px;
  }
  .pono-hd__ikony{ display:flex; align-items:center; gap:6px; }

  /* přesunuté nativní prvky (košík, přihlášení) zbavit absolutní pozice,
     kterou jim Dolomit dává vůči .header-top (right 0/58/108/171/307) */
  .pono-hd__ikony > *{
    position:relative !important; right:auto !important; top:auto !important;
    bottom:auto !important; left:auto !important; margin:0 !important;
    width:46px !important; height:46px !important;
    display:inline-flex !important; align-items:center; justify-content:center;
  }
  .pono-hd__ikony a, .pono-hd__ikony button{
    color:var(--hd-ink) !important; background:transparent !important; border:0 !important;
  }
  .pono-hd__ikony a:hover, .pono-hd__ikony button:hover{ color:var(--hd-sale) !important; }
  /* dotykový cíl 44 px řešíme pseudo-elementem, ne min-width —
     roztažený box by v těsném řádku vytlačil poslední ikonu za okraj */
  .pono-hd__ikony > *::after{
    content:""; position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%); width:44px; height:44px;
  }
  /* Dolomit kreslí ikony webfontem pravidlem vázaným na původní umístění —
     po přesunu má ::before content:none a zbude holý text. Kreslíme si je
     tedy sami SVG pozadím a nativní popisek schováme (ne odstraníme, kvůli
     čtečkám ho necháváme jako .sr-only). Specificita musí přebít Dolomit,
     proto html body a plný řetěz. */
  html body .pono-hd__ikony > *{
    /* POZOR: samotné width nestačí — Dolomit drží na .cart-count
       min-width:90px a min-width vyhraje nad width bez ohledu na
       !important. Proto se musí srovnat i min/max, jinak je košík širší
       než ostatní ikony a rozestupy jsou nerovnoměrné. */
    width:46px !important; min-width:46px !important; max-width:46px !important;
    height:46px !important; min-height:46px !important; padding:0 !important;
    display:inline-flex !important; align-items:center !important;
    justify-content:center !important; overflow:visible !important;
    background-repeat:no-repeat !important; background-position:center !important;
    background-size:28px 28px !important; font-size:0 !important;
  }
  /* zděděný webfont glyf vypnout, jinak by se zdvojil s naší SVG ikonou
     (past z 3. 6. 2026 u košíku). ::after si necháváme na dotykový cíl. */
  html body .pono-hd__ikony > *::before{ content:none !important; display:none !important; }
  html body .pono-hd__ikony > * > span:not(.cart-price):not(.sr-only){
    position:absolute !important; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap;
  }
  html body .pono-hd__ikony .top-nav-button-login{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2A37' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/></svg>") !important;
  }
  html body .pono-hd__ikony a.cart-count{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2A37' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 8h12l-1 12H7L6 8z'/><path d='M9 8V6a3 3 0 0 1 6 0v2'/></svg>") !important;
  }
  .pono-hd__ikony .cart-count .cart-price{ display:none !important; }
  .pono-hd__ikony .cart-count i{
    position:absolute !important; top:1px !important; right:1px !important;
    min-width:19px; height:19px; padding:0 4px; border-radius:999px;
    background:var(--hd-sale) !important; color:#fff !important;
    font-size:11px; font-weight:800; font-style:normal; line-height:19px;
    display:flex !important; align-items:center; justify-content:center;
  }

  /* --- 4. pruh menu --- */
  html body #header{ border-top:1px solid var(--hd-line); }
  /* Dolomit drží #navigation na calc(100% - 300px) jako rezervu pro ikony
     v .header-top. Ty jsou nově v .pono-hd, takže rezerva jen zkracuje menu
     a nové položky padaly pod hamburger „Více". Posouváme i .menu-helper —
     NESMÍ zmizet z DOM ani dostat display:none, splitMenu() čte jeho offset. */
  html body .overall-wrapper #navigation{ width:calc(100% - 40px) !important; }
  html body .container.navigation-wrapper .menu-helper{ right:4px !important; }

  /* Hlavní menu na střed. Dolomit drží .navigation-in na width:9999em
     (139 986 px) — v takovém kontejneru nemá justify-content co rozdělovat,
     proto se to musí srovnat na 100 %. Ověřeno, že tím splitMenu netrpí:
     počet .splitted zůstává stejný, menu drží jeden řádek a přetečení je 0
     na 1280/1440/1600/1920 i na 1100, kde se položky reálně nevejdou.
     Centruje se vůči obsahové šířce (container), na kterou lícuje i panel. */
  html body #navigation .navigation-in{ width:100% !important; }
  html body #navigation ul.menu-level-1{
    width:100% !important; justify-content:center !important;
    padding-left:0 !important;
  }
  html body .menu-helper.pono-hd-helper-skryt{
    opacity:0 !important; pointer-events:none !important;
  }
  /* Jednotná typografie hlavního menu.
     Kategoriové položky mají text zabalený v <b>, kterému Dolomit dává
     18px/700/text-transform:none — proto se lišily od našich přidaných
     položek (14px/800/uppercase), které <b> nemají. Cílíme proto i na
     vnitřní <b>/<span>; .submenu-arrow vynecháváme, ta nese ikonu. */
  .pono-hd-ready #navigation ul.menu-level-1 > li > a,
  .pono-hd-ready #navigation ul.menu-level-1 > li > a b,
  .pono-hd-ready #navigation ul.menu-level-1 > li > a > span:not(.submenu-arrow){
    font-size:14px !important;
    font-weight:800 !important;
    text-transform:uppercase !important;
    letter-spacing:.04em !important;
  }
  .pono-hd-ready #navigation ul.menu-level-1 > li > a{
    padding:0 18px 1px !important;
  }
  /* Barevné zvýraznění položek (ovál za Ponožkami / Výprodejem) je na
     Romanův pokyn 7. 9. PROZATÍM ZRUŠENÉ — třídy --aktivni a --sale
     se dál přidávají, jen nemají styl, takže se dá kdykoli vrátit. */

  /* neaktivní položky (Akce, Novinky – cíl zatím neexistuje) */
  .pono-hd-ready #navigation ul.menu-level-1 > li > a[aria-disabled="true"]{
    opacity:.5; cursor:default;
  }

  /* ============ MEGAMENU: mřížka se skupinami a viditelnou L3 ============
     Otevřený stav POUZE. Zavřený (display:none) patří Dolomitu. */
  html body #navigation ul.menu-level-1 > li.exp > ul.menu-level-2,
  html body #navigation ul.menu-level-1 > li:hover > ul.menu-level-2,
  html body #navigation ul.menu-level-1 > li:focus-within > ul.menu-level-2{
    /* sloupcový tok (ne mřížka po řádcích) — dlaždice se vyváží podle výšky,
       jinak je celý řádek vysoký jako nejdelší skupina a vzniknou díry */
    display:block !important;
    column-count:4 !important; column-gap:34px !important;
    padding:26px !important;
    /* panel začíná na y=220 (nová hlavička je vyšší), takže strop musí
       počítat s tím — jinak nejvyšší sekce (Dámské, 901 px) končí pod
       spodním okrajem okna */
    max-height:calc(100vh - 240px) !important; overflow:auto !important;
  }
  /* Dolomit drží na dlaždici flex:0 1 25% → v gridu by z toho byla
     šířka 25 % STOPY (69 z 276 px) a název by se zalomil na tři řádky */
  html body #navigation ul.menu-level-1 > li.exp > ul.menu-level-2 > li,
  html body #navigation ul.menu-level-1 > li:hover > ul.menu-level-2 > li,
  html body #navigation ul.menu-level-1 > li:focus-within > ul.menu-level-2 > li{
    width:auto !important; flex:none !important; min-width:0 !important;
    display:grid !important;
    grid-template-columns:56px minmax(0,1fr) !important;
    column-gap:14px !important; align-items:start !important;
    margin:0 0 26px !important; min-height:0 !important;
    break-inside:avoid !important; -webkit-column-break-inside:avoid !important;
  }
  /* obrázek skupiny */
  html body #navigation .menu-level-2 > li > a.menu-image{
    grid-row:1 / span 2; width:56px !important; height:56px !important;
    border-radius:10px; background-color:#F6F1EA;
    background-size:36px 36px !important; background-position:center !important;
    background-repeat:no-repeat !important;
    display:block !important; margin:0 !important;
  }
  html body #navigation .menu-level-2 > li > div{
    grid-column:2; width:auto !important; flex:none !important; min-width:0 !important;
  }
  html body #navigation .menu-level-2 > li > div > a > span{
    font-size:14px !important; font-weight:800 !important;
    text-transform:uppercase !important; letter-spacing:.03em !important;
    line-height:1.25 !important; color:var(--hd-ink) !important;
  }
  /* TŘETÍ ÚROVEŇ VIDITELNÁ.
     Dnes ji skrývá NAŠE ponozkovna.css pravidlem o specificitě (1,1,3)
     s !important — proto musí mít odkrytí vyšší specificitu, samotné
     !important navrch nestačí (ověřeno reconem: první pokus tiše prohrál). */
  html body #navigation ul.menu-level-1 > li.exp > ul.menu-level-2 > li > div > ul.menu-level-3,
  html body #navigation ul.menu-level-1 > li:hover > ul.menu-level-2 > li > div > ul.menu-level-3,
  html body #navigation ul.menu-level-1 > li:focus-within > ul.menu-level-2 > li > div > ul.menu-level-3{
    display:block !important; margin:6px 0 0 !important; padding:0 !important;
  }
  html body #navigation .menu-level-3 > li{ margin:0 !important; }
  html body #navigation .menu-level-3 > li > a{
    display:block; padding:3px 0 !important;
    font-size:13px !important; font-weight:400 !important;
    line-height:1.45 !important; color:var(--hd-muted) !important;
    text-transform:none !important;
  }
  html body #navigation .menu-level-3 > li > a:hover,
  html body #navigation .menu-level-3 > li > a:focus{
    color:var(--hd-sale) !important; text-decoration:underline;
  }
  /* skupinové nadpisy u Ponožek (li::before ze sekce pono-mm2) v nové
     mřížce překážejí — jsou navázané na order 1/6/11/16 */
  .pono-hd-ready #navigation li.menu-item-5818 .menu-level-2 > li::before{ content:none !important; }

  /* Ponožky: sevřenější řádkování (Roman 7. 9.). 17 z 20 skupin nemá
     podkategorie, takže při mezeře 26 px působil panel řídce. */
  /* specificita musí zrcadlit obecné pravidlo dlaždice (…li.exp > ul > li),
     jinak tenhle kratší selektor tiše prohraje a margin zůstane 26 px */
  html body #navigation ul.menu-level-1 > li.menu-item-5818.exp > ul.menu-level-2 > li,
  html body #navigation ul.menu-level-1 > li.menu-item-5818:hover > ul.menu-level-2 > li,
  html body #navigation ul.menu-level-1 > li.menu-item-5818:focus-within > ul.menu-level-2 > li{
    margin-bottom:14px !important;
  }
  html body #navigation li.menu-item-5818 .menu-level-2 > li > div > a > span{
    line-height:1.18 !important;
  }
  html body #navigation li.menu-item-5818 .menu-level-3 > li > a{
    padding:1px 0 !important; line-height:1.34 !important;
  }
  .pono-hd-ready #navigation li.menu-item-5818 .menu-level-2{
    grid-auto-flow:row !important; grid-template-rows:none !important;
  }
  .pono-hd-ready #navigation li.menu-item-5818 .menu-level-2 > li{ order:0 !important; }

  /* dlaždice bez obrázku nemá zet prázdným místem */
  html body #navigation .menu-level-2 > li.pono-hd-bezobr{
    grid-template-columns:minmax(0,1fr) !important;
  }
  html body #navigation .menu-level-2 > li.pono-hd-bezobr > div{ grid-column:1; }
}

/* ======================== MOBIL (<768) ==================================
   Zůstává NATIVNÍ Dolomit drawer. Měníme jen to, co je v novém pruhu. */
@media (max-width:767.98px){
  .pono-hd__utility, .pono-hd__heureka, .pono-hd__logo, .pono-hd__hledani,
  .pono-hd__nastroje{ display:none; }
  /* .header-top má height:0 — když do něj v úzkém desktopovém DOM spadne
     logo (viz pojistka v JS), musí dostat výšku, jinak se překryje s menu */
  html.pono-hd-logo-uzko #header .header-top{ height:auto !important; min-height:56px; }
  html.pono-hd-logo-uzko #header .header-top .site-name-wrapper{ display:block !important; }
  html.pono-hd-logo-uzko #header .header-top .site-name img{ max-height:40px; width:auto; }
  .pono-hd__promo .pono-hd__in{
    flex-direction:column; align-items:flex-start; gap:2px;
    font-size:12px; padding:6px 15px;
  }
  .pono-hd__promo-vyhody{ gap:14px; font-size:11px; opacity:.85; flex-wrap:wrap; }
}