/* ==========================================================================
   Snapsik Store – Palladium, přebíjecí styly
   Barvy jdou přes proměnné šablony (--primary, --secondary, --secondary-v2,
   --element-color), písmo se dědí z e-shopu.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Panel „Další“ (.priority-nav__dropdown) – kategorie ve sloupcích
   Které kategorie v panelu jsou, závisí na šířce okna (přesouvá je skript
   šablony), proto se nic necílí na konkrétní položku. Menu šablona schovává
   až pod 768 px, panel tedy platí od této šířky.

   Panel se roluje uvnitř sám: je v .myheader, která je sticky (top: -40 %),
   takže se s ní zasekne a rolováním stránky by se spodek panelu nedal zobrazit.
   Proto mřížka, ne columns: sloupce s max-height přetékají do strany.
   -------------------------------------------------------------------------- */
@media only screen and (min-width: 768px) {
  html body #page #dropMenu .priority-nav__dropdown {
    display: grid!important;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr))!important;
    gap: 18px 28px!important;
    align-content: start!important;
    max-height: max(240px, calc(100vh - 280px))!important;
    max-height: max(240px, calc(100dvh - 280px))!important;
    overflow-y: auto!important;
    overscroll-behavior: contain!important;
    scrollbar-width: thin!important;
    scrollbar-color: color-mix(in srgb, var(--primary) 30%, white) transparent!important;
    padding: 20px 28px!important;
    border: 0!important;
    border-top: 3px solid var(--primary)!important;
    border-radius: 0 0 14px 14px!important;
    background: #fff!important;
    box-shadow: 0 24px 40px -16px rgba(0, 0, 0, .28)!important;
    text-align: left!important;
  }

  html body #page #dropMenu .priority-nav__dropdown li {
    display: block!important;
    width: auto!important;
    margin: 0!important;
    padding: 0!important;
    border: 0!important;
    list-style: none!important;
  }

  html body #page #dropMenu .priority-nav__dropdown li::before,
  html body #page #dropMenu .priority-nav__dropdown li a::after {
    content: none!important;
    display: none!important;
  }

  /* 1. úroveň – ikona a název */
  html body #page #dropMenu .priority-nav__dropdown > li > a {
    display: flex!important;
    align-items: center!important;
    gap: 10px!important;
    margin: 0 -8px!important;
    padding: 5px 8px!important;
    border: 0!important;
    border-radius: 8px!important;
    background: transparent!important;
    color: var(--element-color)!important;
    font-size: 14px!important;
    font-weight: 700!important;
    line-height: 1.25!important;
    letter-spacing: 0!important;
    text-transform: none!important;
    white-space: normal!important;
    transition: background-color .15s ease, color .15s ease!important;
  }

  html body #page #dropMenu .priority-nav__dropdown > li > a:hover,
  html body #page #dropMenu .priority-nav__dropdown > li.item-active > a {
    background: color-mix(in srgb, var(--primary) 9%, white)!important;
    color: var(--primary)!important;
    text-decoration: none!important;
  }

  html body #page #dropMenu .priority-nav__dropdown > li > a .menu-item-icon {
    flex: 0 0 auto!important;
    display: block!important;
    width: 30px!important;
    height: 30px!important;
    max-width: none!important;
    max-height: none!important;
    margin: 0!important;
    padding: 0!important;
    border-radius: 50%!important;
    background: #fff!important;
    object-fit: contain!important;
  }

  /* 2. úroveň – štítky za sebou, dlouhé seznamy značek tak nezaberou
     desítky řádků a panel se vejde na obrazovku */
  html body #page #dropMenu .priority-nav__dropdown .eshop-submenu-root.menu-level-2 {
    position: static!important;
    display: flex!important;
    flex-wrap: wrap!important;
    gap: 4px!important;
    width: auto!important;
    max-width: none!important;
    height: auto!important;
    margin: 4px 0 0 40px!important;
    padding: 0!important;
    border: 0!important;
    border-radius: 0!important;
    background: none!important;
    box-shadow: none!important;
    columns: auto!important;
    white-space: normal!important;
  }

  html body #page #dropMenu .priority-nav__dropdown .eshop-submenu-root.menu-level-2::before {
    content: none!important;
    display: none!important;
  }

  html body #page #dropMenu .priority-nav__dropdown .eshop-submenu-root.menu-level-2 > li {
    flex: 0 1 auto!important;
    min-width: 0!important;
  }

  html body #page #dropMenu .priority-nav__dropdown .eshop-submenu-root.menu-level-2 .menu-item-box,
  html body #page #dropMenu .priority-nav__dropdown .eshop-submenu-root.menu-level-2 .menu-item-cat {
    display: block!important;
    margin: 0!important;
    padding: 0!important;
  }

  html body #page #dropMenu .priority-nav__dropdown .eshop-submenu-root.menu-level-2 .menu-item-cat > a {
    display: inline-block!important;
    margin: 0!important;
    padding: 2px 8px!important;
    border-radius: 6px!important;
    background: var(--secondary)!important;
    color: var(--element-color)!important;
    font-size: 12.5px!important;
    font-weight: 500!important;
    line-height: 1.4!important;
    letter-spacing: 0!important;
    text-transform: none!important;
    transition: background-color .15s ease, color .15s ease!important;
  }

  html body #page #dropMenu .priority-nav__dropdown .eshop-submenu-root.menu-level-2 .menu-item-cat > a:hover,
  html body #page #dropMenu .priority-nav__dropdown .eshop-submenu-root.menu-level-2 li.item-active .menu-item-cat > a {
    background: color-mix(in srgb, var(--primary) 12%, white)!important;
    color: var(--primary)!important;
    text-decoration: none!important;
  }

  /* 3. úroveň – položka s podkategoriemi má vlastní řádek, podkategorie
     drobně pod ní s linkou vlevo */
  html body #page #dropMenu .priority-nav__dropdown .eshop-submenu-root.menu-level-2 > li.has-submenu {
    flex: 0 0 100%!important;
  }

  html body #page #dropMenu .priority-nav__dropdown .eshop-submenu-root.menu-level-3 {
    display: flex!important;
    flex-wrap: wrap!important;
    gap: 0 10px!important;
    margin: 3px 0 3px 8px!important;
    padding: 0 0 0 10px!important;
    border-left: 2px solid color-mix(in srgb, var(--primary) 18%, white)!important;
    list-style: none!important;
  }

  html body #page #dropMenu .priority-nav__dropdown .eshop-submenu-root.menu-level-3 a {
    display: inline-block!important;
    margin: 0!important;
    padding: 1px 0!important;
    color: var(--secondary-v2)!important;
    font-size: 12.5px!important;
    font-weight: 400!important;
    line-height: 1.4!important;
    letter-spacing: 0!important;
    text-transform: none!important;
  }

  html body #page #dropMenu .priority-nav__dropdown .eshop-submenu-root.menu-level-3 a:hover {
    color: var(--primary)!important;
    text-decoration: underline!important;
  }
}

/* panel na celou šířku okna: odsazení vlevo, aby obsah nezakrýval boční štítek
   „Ověřeno zákazníky“ (široký 36 px) */
@media only screen and (min-width: 768px) and (max-width: 1439px) {
  html body #page #dropMenu .priority-nav__dropdown {
    padding-left: 44px!important;
  }
}

/* hlavička je do 1160 px vyšší (vyhledávání na vlastním řádku), panel začíná níž */
@media only screen and (min-width: 768px) and (max-width: 1160px) {
  html body #page #dropMenu .priority-nav__dropdown {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))!important;
    gap: 18px 20px!important;
    max-height: max(240px, calc(100vh - 346px))!important;
    max-height: max(240px, calc(100dvh - 346px))!important;
  }
}