/* ═══════════════════════════════════════════════════════════════════════
   mobile-menu.css — redesign mobilního hlavního menu (JEN ≤767px)
   Načítá: <link> v Kódu hlavičky šablony — kanon meta/admin-hlavicka.html (LIVE, CDN)
     a meta/admin-hlavicka.TEST.html (TEST 785157, origin); viz manual.md kap. 4.
     Cache busting ?v=YYYYMMDD při každé změně.
   Prefix tříd: .pdu-mm-* / .pdu-dd-* / .pdu-backdrop + přestyl nativního Shoptet
     menu (#navigation, .menu-level-1/2, .submenu-arrow, li.exp, .responsive-tools)
   ───────────────────────────────────────────────────────────────────────
   ⚠ SILNÁ VAZBA NA foot.js — většina .pdu-mm-* markupu bez něj NEEXISTUJE.
   foot.js injektuje .pdu-mm-logo, .pdu-mm-top (telbar + CTA), .pdu-mm-foot,
   .pdu-mm-cat i .pdu-mm-ico (inline SVG), .pdu-backdrop a celý drill-down panel
   .pdu-dd*; přepíná také html.pdu-mm-init a .pdu-mm-fallback.
   Bez foot.js zbude jen přestylované nativní menu (fallback větev). Změna názvu
   třídy tady = nutná změna i ve foot.js.

   Rozsah: ≥768px patří Shoptet desktop nav — NESAHAT. Mimo media query jsou
   jen SEKCE 1 (default skrytí + keyframes) a SEKCE 16 (.pdu-mm-ai).
   Nativní markup: body.navigation-window-visible #navigation > .navigation-in.menu
     > ul.menu-level-1 > li.menu-item-{ID} > a (+ span.submenu-arrow);
     rozbaleno = li.exp (nativní accordion, bez JS).
   Původ: projekt ESHOP/Redesign-mobilni-menu/ (iterace 1).
   ───────────────────────────────────────────────────────────────────────
   MAPA SEKCÍ (Ctrl+F na "SEKCE N."):
    1. GLOBÁLNÍ ZÁKLAD — default skrytí B1 prvků + keyframes (mimo media query)
    2. PANEL — neprůhledné pozadí, logo v horním proužku, backdrop, scroll-lock
    3. TOP-LEVEL ŘÁDKY — velký tap-target + oddělovač
    4. CHEVRON — vlastní šipka místo nativní + rotace při rozbalení
    5. ROZBALENÁ POLOŽKA — zelené zvýraznění li.exp
    6. SUBMENU (úroveň 2) — malý náhled vlevo + textový sloupec vpravo
    7. ZÓNY — nadpisy „Nakupovat" / „Informace a služby" přes ::before
    8. RÁDCE IKONY — stroke a velikost .pdu-mm-ico na mobilu
    9. HLAVIČKA — trigger ikony hamburger + hledání (mimo panel)
   10. B1 TELBAR + CTA — horní blok .pdu-mm-top
   11. B1 FOOTER — doprava + pobočky dole (.pdu-mm-foot)
   12. B1 IKONY KATEGORIÍ — .pdu-mm-cat u top-level položek
   13. DRILL-DOWN — skrytí nativního seznamu, dokud běží náš JS
   14. LUIGI'S BOX AUTOCOMPLETE — skrytí #lbx-ac-element přes otevřené menu
   15. DRILL-DOWN PANEL — vlastní obrazovky .pdu-dd* (hlavička, řádky, animace)
   16. REŽIM AI — řádek .pdu-mm-ai (mimo media query; DORMANTNÍ, markup nevzniká)
   17. SHOPTET NOVÁ MOBILNÍ HLAVIČKA (UMS mobile_header_v1) — z-index fix + účet v menu (.navigationActions)
   Pozn.: dřívější číslování 1–13/13b přeskakovalo 6 — přečísleno 2026-07-29
   (na sekce tohoto souboru se odjinud v pdu-code neodkazuje).
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────
   SEKCE 1. GLOBÁLNÍ ZÁKLAD — SKRYTÍ B1 PRVKŮ + KEYFRAMES
   Platí na všech šířkách (mimo media query). Prvky injektované foot.js jsou
   default skryté a odkryje je až mobilní část níže. Dále keyframes pro animaci
   drill-down obrazovek a jejich vypnutí při prefers-reduced-motion.
   ─────────────────────────────────────────────────────────────────────── */
.pdu-mm-top, .pdu-mm-foot, .pdu-mm-cat, .pdu-dd, .pdu-backdrop, .pdu-mm-logo { display: none; }

@keyframes pduDdR { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes pduDdL { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  #navigation .pdu-dd-list.pdu-dd-anim-r,
  #navigation .pdu-dd-list.pdu-dd-anim-l { animation: none !important; }
}

@media (max-width: 767px) {

  /* ───────────────────────────────────────────────────────────────────────
     SEKCE 2. PANEL — POZADÍ, LOGO, BACKDROP, SCROLL-LOCK
     Plný neprůhledný panel nad hlavičkou (fix prosvítání) + bílý proužek nahoře
     pro nativní ✕. Logo i backdrop injektuje foot.js — bez něj tu nejsou.
     ─────────────────────────────────────────────────────────────────────── */
  body.navigation-window-visible #navigation#navigation {
    background: #fff !important;
    box-shadow: 2px 0 28px rgba(0, 0, 0, .35);
    z-index: 10000 !important;
    padding-bottom: 24px;
  }
  body.navigation-window-visible #navigation#navigation .navigation-in.menu {
    background: #fff;
    /* bílý proužek nahoře pro nativní ✕ (span.navigation-close), ať sedí NAD zeleným telbarem */
    padding-top: 48px;
  }
  /* a11y modál: zamkni scroll pozadí, dokud je menu otevřené (panel #navigation má vlastní scroll).
     Pozn.: iOS Safari může přesto rubber-bandovat — position:fixed na body záměrně NE (skok scrollu). */
  body.navigation-window-visible { overflow: hidden; }
  /* logo v horním bílém proužku (vlevo, vedle nativního ✕); první dítě scrolleru → roluje s obsahem
     (NEdrží připnuté — připnuté se překrývalo s podscrollovaným telbarem). margin-top:-48px ho posadí
     do proužku rezervovaného přes .navigation-in.menu padding-top:48px. */
  #navigation .pdu-mm-logo {
    display: flex;
    align-items: center;
    margin-top: -48px;
    height: 48px;
    padding: 6px 14px;
    box-sizing: border-box;
    background: #fff;
  }
  #navigation .pdu-mm-logo img {
    max-height: 32px;
    width: auto;
    display: block;
  }
  /* nativní ✕ přestylovaný na zelený kruh jako .pdu-ai-close v Režimu AI
     (style-sections.css) — na bílém proužku splýval. Nativně je to
     span.navigation-close, absolute top/right, padding 1.25rem, glyf 16px
     z fontu shoptet. Kruh je 36px kvůli shodě s AI panelem; ::after vrací
     tap-target zpátky na 48px, o který by fixní rozměr jinak přišel.
     ⚠ BEZ gate na body.navigation-window-visible: Shoptet tu třídu sundá hned
     na začátku zavírání, ale panel ještě 0,3 s odjíždí (#navigation transition)
     → styl by zmizel a v animaci by problikl nativní ✕. Rule je uvnitř
     ≤767px a scoped na #navigation, takže gate stejně nic nepřidával.
     Stín odděluje kruh od obsahu, který mu podjíždí (panel roluje, ✕ ne). */
  #navigation .navigation-close {
    top: 6px; right: 10px;
    width: 36px; height: 36px;
    padding: 0;
    box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    background: #eef4f0;
    border-radius: 50%;
    color: #1f5e3c;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
    z-index: 2;
  }
  #navigation .navigation-close::after {
    content: "";
    position: absolute;
    top: -6px; right: -6px; bottom: -6px; left: -6px;
  }
  /* backdrop = JEN click-catch (klik mimo panel zavře menu). BEZ ztmavení pozadí —
     ztmavování problikávalo na slabších telefonech. Průhledný, žádná transition. */
  .pdu-backdrop {
    display: block;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 9998;
    background: transparent;
    visibility: hidden;
    pointer-events: none;
  }
  body.navigation-window-visible .pdu-backdrop {
    visibility: visible;
    pointer-events: auto;
  }

  /* ───────────────────────────────────────────────────────────────────────
     SEKCE 3. TOP-LEVEL ŘÁDKY
     Položky ul.menu-level-1: velký tap-target (min 54 px) a tenký oddělovač.
     Desktopové megamenu náhledy (a.menu-image) se na mobilu skrývají.
     ─────────────────────────────────────────────────────────────────────── */
  body.navigation-window-visible #navigation#navigation .menu-level-1 > li {
    border-bottom: 1px solid #ececec;
  }
  body.navigation-window-visible #navigation#navigation .menu-level-1 > li > a {
    display: flex;
    align-items: center;
    min-height: 54px !important;
    padding: 12px 16px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.25;
    color: #1a1a1a !important;
  }
  /* desktop megamenu náhledy na mobilu pryč */
  body.navigation-window-visible #navigation#navigation .menu-level-1 > li > a.menu-image {
    display: none;
  }

  /* ───────────────────────────────────────────────────────────────────────
     SEKCE 4. CHEVRON
     Nativní šipka span.submenu-arrow se přebíjí vlastní ::before (CSS trojúhelník
     z rámečků), nativní ikonfont ::after se ruší. Rozbalené li.exp = rotace 180°.
     ─────────────────────────────────────────────────────────────────────── */
  body.navigation-window-visible #navigation#navigation .submenu-arrow {
    margin-left: auto;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    background: none !important;   /* přebít nativní šipku */
    position: relative;
    transition: transform .2s ease;
  }
  body.navigation-window-visible #navigation#navigation .submenu-arrow::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    margin: -7px 0 0 -5px;
    border-right: 2px solid var(--pdu-barva-zelena-akcent, #00B46E);
    border-bottom: 2px solid var(--pdu-barva-zelena-akcent, #00B46E);
    transform: rotate(45deg);
  }
  body.navigation-window-visible #navigation#navigation .submenu-arrow::after {
    content: none !important;   /* nativní ikonfont šipka — nahrazena naší ::before */
  }
  body.navigation-window-visible #navigation#navigation li.exp > a .submenu-arrow {
    transform: rotate(180deg);
  }

  /* ───────────────────────────────────────────────────────────────────────
     SEKCE 5. ROZBALENÁ POLOŽKA
     Zvýraznění aktivního li.exp — zelený text na světle zeleném pozadí.
     ─────────────────────────────────────────────────────────────────────── */
  body.navigation-window-visible #navigation#navigation li.exp > a {
    color: var(--pdu-barva-zelena-akcent, #00B46E) !important;
    background: var(--pdu-barva-zelena-svetla, #E6FFD1) !important;
  }

  /* ───────────────────────────────────────────────────────────────────────
     SEKCE 6. SUBMENU (ÚROVEŇ 2)
     Řádky ul.menu-level-2: malá bílá karta náhledu vlevo (zachovaný poměr)
     a textový sloupec vpravo, na šedém podkladu rozbalené položky.
     ─────────────────────────────────────────────────────────────────────── */
  body.navigation-window-visible #navigation#navigation li.exp > ul.menu-level-2 {
    background: #fafafa;
  }
  /* řádek = malý náhled vlevo + popisek vpravo */
  body.navigation-window-visible #navigation#navigation .menu-level-2 > li {
    display: flex !important;
    align-items: center;
    border-top: 1px solid var(--pdu-barva-okraj-svetly, #f0f0f0);
  }
  /* malá bílá karta náhledu (bez roztažení, zachovaný poměr) */
  body.navigation-window-visible #navigation#navigation .menu-level-2 > li > a.menu-image {
    flex: 0 0 46px !important;
    width: 46px !important;
    height: 46px !important;
    margin: 6px 0 6px 16px !important;
    padding: 5px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: #fff !important;
    border: 1px solid #e6e6e6 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
  }
  body.navigation-window-visible #navigation#navigation .menu-level-2 > li > a.menu-image img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
  }
  /* textový sloupec */
  body.navigation-window-visible #navigation#navigation .menu-level-2 > li > div {
    flex: 1 1 auto;
    min-width: 0;
  }
  body.navigation-window-visible #navigation#navigation .menu-level-2 > li > div > a,
  body.navigation-window-visible #navigation#navigation .menu-level-2 > li > a:not(.menu-image) {
    display: block !important;
    min-height: 44px !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
    color: var(--pdu-barva-tekst-zakladni, #333) !important;
  }

  /* ───────────────────────────────────────────────────────────────────────
     SEKCE 7. ZÓNY — NADPISY SEKCÍ
     Nadpisy „Nakupovat" a „Informace a služby" jako ::before na konkrétních
     li.menu-item-{ID}. DOM pořadí je už kategorie→info, žádný reorder se nedělá.
     ⚠ Vázáno na ID položek menu (749, 29, 706) — při změně menu zkontrolovat.
     ─────────────────────────────────────────────────────────────────────── */
  body.navigation-window-visible #navigation#navigation .menu-level-1 > li.menu-item-749::before,
  body.navigation-window-visible #navigation#navigation .menu-level-1 > li.menu-item-29::before {
    display: block;
    padding: 12px 16px 8px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--pdu-barva-zelena-akcent, #00B46E);
    background: #f4faf6;
  }
  /* zóna 1 — Nakupovat (před první kategorií) */
  body.navigation-window-visible #navigation#navigation .menu-level-1 > li.menu-item-749::before {
    content: "Nakupovat";
  }
  /* zóna 2 — Informace a služby (před první info položkou = Kontakty) */
  body.navigation-window-visible #navigation#navigation .menu-level-1 > li.menu-item-29::before {
    content: "Informace a služby";
  }
  body.navigation-window-visible #navigation#navigation .menu-level-1 > li.menu-item-29 {
    border-top: 8px solid #cfd6cf !important;
  }
  body.navigation-window-visible #navigation#navigation .menu-level-1 > li.menu-item-706 {
    border-bottom: none !important;
  }

  /* ───────────────────────────────────────────────────────────────────────
     SEKCE 8. RÁDCE IKONY NA MOBILU
     Inline SVG .pdu-mm-ico z foot.js místo PNG (bez foot.js element neexistuje).
     global.css řeší stroke/velikost jen ≥62em, tak se to tady opakuje pro mobil.
     ─────────────────────────────────────────────────────────────────────── */
  body.navigation-window-visible #navigation#navigation .pdu-mm-ico {
    width: 26px !important;
    height: 26px !important;
    color: var(--pdu-barva-zelena-akcent, #00B46E);
    overflow: visible;
    flex: none;
  }
  body.navigation-window-visible #navigation#navigation .pdu-mm-ico path,
  body.navigation-window-visible #navigation#navigation .pdu-mm-ico rect,
  body.navigation-window-visible #navigation#navigation .pdu-mm-ico circle,
  body.navigation-window-visible #navigation#navigation .pdu-mm-ico line {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* ───────────────────────────────────────────────────────────────────────
     SEKCE 9. HLAVIČKA — TRIGGER IKONY
     Ikony v .responsive-tools, tedy MIMO panel (viditelné při zavřeném menu):
     větší hamburger a zvýrazněné hledání (zelený kroužek + zelená ikona).
     ─────────────────────────────────────────────────────────────────────── */
  /* větší hamburger */
  .responsive-tools a.toggle-window[data-target="navigation"]::before {
    font-size: 24px !important;
  }
  /* zvýraznit hledání — zelený kroužek + zelená ikona */
  .responsive-tools a.toggle-window[data-target="search"] {
    background: var(--pdu-barva-zelena-svetla, #E6FFD1) !important;
    border-radius: 50% !important;
  }
  .responsive-tools a.toggle-window[data-target="search"]::before {
    color: var(--pdu-barva-zelena-akcent, #00B46E) !important;
    font-size: 20px !important;
  }

  /* ───────────────────────────────────────────────────────────────────────
     SEKCE 10. B1 — TELBAR + CTA NAHOŘE
     Zelený proužek s telefonem a otevírací dobou + žluté CTA v .pdu-mm-top.
     Celý blok injektuje foot.js — bez něj sekce nic nestyluje.
     ─────────────────────────────────────────────────────────────────────── */
  #navigation .pdu-mm-top { display: block; }
  #navigation .pdu-mm-tel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: var(--pdu-barva-zelena-akcent, #00B46E);
    color: #fff;
    padding: 8px 12px;
  }
  #navigation .pdu-mm-tel-num,
  #navigation .pdu-mm-tel-hours {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
  }
  #navigation .pdu-mm-tel-num { font-size: 16px; font-weight: 600; padding: 4px 6px; }
  #navigation .pdu-mm-tel-hours { font-size: 11px; opacity: .9; }
  /* Vizuál (žlutá --pdu-barva-zluta-cta, glossy gradienty, 1px ring, radius,
     hover lift) přebírá .pdu-pag-btn-cta ze style-pages.css — je to stejné
     tlačítko jako žluté CTA na HP a všechny sekční CSS se načítají site-wide,
     takže třída platí i tady v hlavičce. Zdejší rule proto drží UŽ JEN
     rozložení v panelu; pozor, `#navigation .pdu-mm-cta` má vyšší specificitu
     než `.pdu-pag-btn-cta`, takže cokoli vizuálního zpátky sem = přebití HP vzoru.
     display:flex (ne inline-flex z base) = tlačítko na plnou šířku panelu. */
  #navigation .pdu-mm-cta {
    display: flex;
    margin: 11px 13px;
    /* Jediná vědomá odchylka od HP vzoru: typografie na měřítko panelu.
       Base je em-based (1.05em → 16,8px) a weight 800, což je v menu nejtěžší
       prvek ze všech; panel jede na px a nejvýš na 700 (.pdu-dd-all, zóna).
       Barva, gradienty, ring, stín i radius zůstávají z .pdu-pag-btn-cta. */
    font-size: 16px;
    font-weight: 700;
  }
  #navigation .pdu-mm-top svg {
    width: 20px;
    height: 20px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* ───────────────────────────────────────────────────────────────────────
     SEKCE 11. B1 — FOOTER MENU
     Spodní blok .pdu-mm-foot (doprava, pobočky) se stroke ikonami.
     Injektuje foot.js — bez něj sekce nic nestyluje.
     ─────────────────────────────────────────────────────────────────────── */
  #navigation .pdu-mm-foot {
    display: block;
    border-top: 8px solid #cfd6cf;
    background: #f4faf6;
    padding: 8px 13px 16px;
  }
  #navigation .pdu-mm-foot a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 0;
    color: #1a1a1a;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
  }
  #navigation .pdu-mm-foot svg {
    width: 20px;
    height: 20px;
    flex: none;
    fill: none;
    stroke: var(--pdu-barva-zelena-akcent, #00B46E);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* ───────────────────────────────────────────────────────────────────────
     SEKCE 12. B1 — IKONY U TOP-LEVEL KATEGORIÍ
     Inline SVG .pdu-mm-cat v nativním seznamu i v drill-down panelu.
     Injektuje foot.js — bez něj sekce nic nestyluje.
     ─────────────────────────────────────────────────────────────────────── */
  #navigation .menu-level-1 > li .pdu-mm-cat,
  #navigation .pdu-dd .pdu-mm-cat {
    display: inline-block;
    width: 22px;
    height: 22px;
    flex: none;
    margin-right: 10px;
    fill: none;
    stroke: var(--pdu-barva-zelena-akcent, #00B46E);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* ───────────────────────────────────────────────────────────────────────
     SEKCE 13. DRILL-DOWN — SKRYTÍ NATIVNÍHO SEZNAMU
     Nativní ul.menu-level-1 mizí HNED, jakmile běží náš JS (html.pdu-mm-init)
     a menu je otevřené — ať neproblikne (vč. spodních položek telefon/mail/doprava)
     v okně, než foot.js postaví .pdu-dd. Když JS selže → foot.js přidá
     .pdu-mm-fallback → nativní menu se vrátí (styl viz SEKCE 2–8).
     ─────────────────────────────────────────────────────────────────────── */
  html.pdu-mm-init body.navigation-window-visible #navigation .navigation-in.menu:not(.pdu-mm-fallback) > ul.menu-level-1 { display: none !important; }

  /* ───────────────────────────────────────────────────────────────────────
     SEKCE 14. LUIGI'S BOX AUTOCOMPLETE
     Dropdown #lbx-ac-element žije mimo #navigation (z-index 16M+). Když otevřeme
     mobilní menu, Shoptet zavře svůj search-window, ale Luigi's dropdown zůstane
     viset PŘES menu → skryjeme ho. (foot.js navíc blurne search input.)
     ─────────────────────────────────────────────────────────────────────── */
  body.navigation-window-visible #lbx-ac-element { display: none !important; }

  /* ───────────────────────────────────────────────────────────────────────
     SEKCE 15. DRILL-DOWN PANEL (.pdu-dd*)
     Vlastní obrazovky místo nativního accordionu: hlavička s drobečkem a tlačítkem
     zpět, zóna, „vše", řádky s náhledem a chevronem, animace přechodu vlevo/vpravo
     (keyframes v SEKCI 1). Celý markup staví foot.js — bez něj tu není nic.
     ─────────────────────────────────────────────────────────────────────── */
  #navigation .pdu-dd { display: block; }
  #navigation .pdu-dd-head {
    display: none;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    border-bottom: 1px solid #ececec;
    background: #fff;
  }
  #navigation .pdu-dd-back {
    width: 40px; height: 40px;
    border: 0; background: none; padding: 0;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
  }
  #navigation .pdu-dd-back::before {
    content: "";
    width: 11px; height: 11px;
    border-left: 2px solid var(--pdu-barva-tekst-zakladni, #333);
    border-bottom: 2px solid var(--pdu-barva-tekst-zakladni, #333);
    transform: rotate(45deg);
  }
  /* drobečková kurzívou — odliší cestu od navigačních řádků pod ní */
  #navigation .pdu-dd-title { font-size: 14px; font-style: italic; line-height: 1.3; color: #8a8a8a; padding-right: 6px; }
  #navigation .pdu-dd-title .pdu-dd-cur { font-weight: 600; color: #1a1a1a; }
  #navigation .pdu-dd-sep { color: #c0c0c0; }
  #navigation .pdu-dd-row:focus,
  #navigation .pdu-dd-back:focus,
  #navigation .pdu-dd-all:focus {
    outline: 2px solid var(--pdu-barva-zelena-akcent, #00B46E);
    outline-offset: -2px;
  }
  #navigation .pdu-dd-zone {
    font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--pdu-barva-zelena-akcent, #00B46E);
    background: #f4faf6;
    padding: 10px 14px 6px;
  }
  /* Vstup do nadkategorie — záměrně vizuálně těžší než řádky podkategorií
     (levý pruh + sytější tint + 16/700 + šipka), aby ho lidé nepřehlíželi.
     Barva #0b7a4d, ne zelený akcent: na tintu #eaf7ef drží kontrast 4,9:1. */
  #navigation .pdu-dd-all {
    display: flex; align-items: center;
    min-height: 54px; box-sizing: border-box;
    padding: 12px 14px;
    background: #eaf7ef;
    border-left: 4px solid var(--pdu-barva-zelena-akcent, #00B46E);
    border-bottom: 1px solid #d7ecdf;
    color: #0b7a4d;
    font-size: 16px; font-weight: 700; line-height: 1.3;
    text-decoration: none;
  }
  #navigation .pdu-dd-all > span { flex: 1 1 auto; }
  /* ikona i chevron v tmavší zeleni řádku — zelený akcent řádků by na tintu plaval */
  #navigation .pdu-dd-all .pdu-mm-cat { stroke: #0b7a4d; }
  #navigation .pdu-dd-all .pdu-dd-chev { border-color: #0b7a4d; }
  #navigation .pdu-dd-row {
    display: flex; align-items: center;
    width: 100%; box-sizing: border-box;
    min-height: 54px; padding: 12px 14px;
    border: 0; border-bottom: 1px solid var(--pdu-barva-okraj-svetly, #f0f0f0);
    background: #fff;
    font-family: inherit; font-size: 15px; font-weight: 500; color: #1f1f1f;
    text-align: left; text-decoration: none; cursor: pointer;
  }
  #navigation .pdu-dd-row > span { flex: 1 1 auto; }
  #navigation .pdu-dd-thumb {
    width: 46px; height: 46px; flex: none;
    margin-right: 12px;
    object-fit: contain;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    padding: 4px;
    box-sizing: border-box;
  }
  #navigation .pdu-dd-chev {
    flex: none;
    width: 9px; height: 9px;
    border-top: 2px solid var(--pdu-barva-zelena-akcent, #00B46E);
    border-right: 2px solid var(--pdu-barva-zelena-akcent, #00B46E);
    transform: rotate(45deg);
    margin-left: 8px;
  }
  #navigation .pdu-dd-list.pdu-dd-anim-r { animation: pduDdR .18s ease; }
  #navigation .pdu-dd-list.pdu-dd-anim-l { animation: pduDdL .18s ease; }
}

/* ───────────────────────────────────────────────────────────────────────
   SEKCE 16. REŽIM AI — ŘÁDEK .pdu-mm-ai
   Sticky pill „Zeptejte se AI" v horním bloku menu (.pdu-mm-top). Mimo media
   query, ale prakticky jen mobilní — rodič .pdu-mm-top je jinde display:none.
   ⚠ DORMANTNÍ — markup nikde nevzniká: blok, který ho ve foot.js vykresloval,
   byl 2026-07-28b odebrán (na přání majitele) a styly tu zůstaly záměrně pro
   případný návrat. Vstupy do Režimu AI dnes vedou přes pill u searche.
   Návrat = vrátit JS blok do foot.js, viz meta/CHANGELOG.md „2026-07-28b".
   ─────────────────────────────────────────────────────────────────────── */
.pdu-mm-ai{position:sticky;bottom:8px;z-index:3;display:flex;align-items:center;justify-content:center;gap:9px;width:calc(100% - 24px);margin:16px 12px 8px;margin-bottom:calc(8px + env(safe-area-inset-bottom, 0px));padding:14px 16px;border:0;border-radius:999px;background:linear-gradient(90deg,#1f9d57,#14b8a6);color:#fff;font-weight:700;font-size:15px;font-family:inherit;cursor:pointer;box-shadow:0 6px 20px rgba(16,94,54,.35);-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}
.pdu-mm-ai svg{flex:0 0 auto}
.pdu-mm-ai:active{filter:brightness(1.07)}

/* ───────────────────────────────────────────────────────────────────────
   SEKCE 17. SHOPTET NOVÁ MOBILNÍ HLAVIČKA (UMS mobile_header_v1)
   Shoptet 2026-08-04/18 odstraňuje starou mobilní hlavičku (Frontend News
   2026-07-21). Nová hlavička dělá z #header position:fixed + z-index:56 →
   #header je STACKING CONTEXT a #navigation (z-index 10000, SEKCE 2) jako
   jeho potomek se celý propadne POD .pdu-backdrop (přímé dítě body, 9998).
   Backdrop pak spolkne každý tap v otevřeném menu a foot.js menu zavře
   (= „klik na kategorii zavře menu"). Fix: při otevřeném menu vyzvednout
   celý #header nad backdrop. Na staré hlavičce je #header position:static
   → z-index se ignoruje = neškodný no-op (ověřeno A/B, viz
   Redesign-mobilni-menu/_testing/mh1-fix.mjs — v0 i v1fix 100% PASS).
   Dále: nová hlavička renderuje do .navigation-in seznam .navigationActions
   (u nás jen „Přihlášení"). 2026-08-07 byl na přání majitele SKRYTÝ, ale
   Shoptet zároveň skrývá i login ikonu v .responsive-tools → mobil pak neměl
   v UI ŽÁDNÝ vstup do účtu (dotaz zákazníka přes pobočku 2026-08-20).
   Od 2026-08-20 je proto ZPĚT: odkaz PŘESOUVÁ foot.js na konec .pdu-mm-foot
   (pod Pobočky) a prázdný seznam si označí .pdu-mm-moved. Pravidla níže jsou
   FALLBACK pro případ, že foot.js nedoběhne — seznam pak zůstane nad footerem
   ve stejném vzhledu (SEKCE 11), takže vstup do účtu je vidět vždy.
   Text řídí Shoptet (nepřihlášený „Přihlášení", přihlášený vstup do účtu).
   Opětovné skrytí = tenhle blok za display:none !important + blok v foot.js.
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  body.navigation-window-visible #header {
    z-index: 10001;
  }
  #navigation .navigationActions {
    display: block;
    list-style: none;
    margin: 0;
    border-top: 8px solid #cfd6cf;
    background: #f4faf6;
    padding: 8px 13px 0;
  }
  #navigation .navigationActions li {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  #navigation .navigationActions li::before {
    display: none;
  }
  #navigation .navigationActions a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 0;
    color: #1a1a1a;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
  }
  /* Ikona uživatele stejného stylu jako stroke ikony v .pdu-mm-foot; barva je
     v data URI napevno (#00B46E = --pdu-barva-zelena-akcent, do url() nelze var). */
  #navigation .navigationActions a::before {
    content: "";
    width: 20px;
    height: 20px;
    flex: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300B46E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
  }
  /* Účet je servisní vstup, ne navigace obchodu → oddělovací linka a tmavší zelený
     text ho odliší od Dopravy a Poboček, aniž by footer zmohutněl. Barva #0b7a4d
     jako u .pdu-dd-all (zelený akcent by na tintu #f4faf6 na text neměl kontrast).
     Třídu .pdu-mm-acc dává foot.js prvnímu přesunutému odkazu (u přihlášeného
     přibývá druhá položka, ta zůstává obyčejný řádek). */
  #navigation .pdu-mm-foot a.pdu-mm-acc {
    margin-top: 7px;
    padding-top: 12px;
    border-top: 1px solid #cfd6cf;
    color: #0b7a4d;
    font-weight: 700;
  }
  /* Po přesunu odkazu do patičky je seznam prázdný → pryč (whitespace uzly kazí :empty). */
  #navigation .navigationActions.pdu-mm-moved {
    display: none;
  }
  /* Fallback bez JS: seznam a patička tvoří jeden zelený blok → druhý oddělovač pryč. */
  #navigation .navigationActions:not(.pdu-mm-moved) ~ .pdu-mm-foot {
    border-top: 0;
    padding-top: 0;
  }
  /* Vendor sticky-header (252557, Classic.css) při scrollu (.sticky-mobile) schovává
     lupu: `.sticky-mobile .responsive-tools > a[data-target="search"]{visibility:hidden}`.
     Na staré hlavičce OK (kondenzovaná lišta měla vlastní layout), na nové fixní
     hlavičce tím lupa mizí úplně → vrátit. Login neřešíme (skrývá ho sám Shoptet). */
  body.ums_mobile_header_v1--on.sticky-mobile .responsive-tools a[data-target="search"] {
    visibility: visible !important;
  }
}