/* Pricna ulice: vzhled hlavicky. Nativni ovladani Shoptetu zustava.
   Nahradit stare bloky barvy ikon, prihlaseni a meny timto souborem. */
#header {
  --pu-nav-ink: #191714;
  --pu-nav-paper: #faf8f3;
  --pu-nav-line: #e5dfd4;
  background-color: #cd9934;
}
#header .navigation-buttons > a[data-target],
#header .navigation-buttons > .top-nav-button,
#header .navigation-buttons > .top-nav-button::before {
  color: var(--pu-nav-ink) !important;
}
#header .top-nav-button svg {
  fill: currentColor;
}
#header .navigation-buttons > a[data-target]:focus-visible,
#header .navigation-buttons > .top-nav-button:focus-visible,
#header #topNavigationDropdown:focus-visible,
#header #navigation a:focus-visible {
  outline: 2px solid var(--pu-nav-ink);
  outline-offset: -4px;
}
#header #topNavigationDropdown {
  box-sizing: border-box;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid rgba(25,23,20,.35) !important;
  border-radius: 6px;
  background: rgba(255,255,255,.10) !important;
  color: var(--pu-nav-ink) !important;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
}
#header #topNavigationDropdown:hover,
#header #topNavigationDropdown[aria-expanded="true"] {
  border-color: var(--pu-nav-ink) !important;
  background: var(--pu-nav-paper) !important;
  color: var(--pu-nav-ink) !important;
}
#header .navigation-buttons .dropdown .dropdown-menu {
  min-width: 100px;
  margin-top: 6px;
  padding: 6px;
  border: 1px solid var(--pu-nav-line);
  border-radius: 8px;
  background: var(--pu-nav-paper);
  box-shadow: 0 8px 24px rgba(25,23,20,.13);
}
#header .navigation-buttons .dropdown .dropdown-menu > li > a {
  box-sizing: border-box;
  min-height: 40px;
  padding: 10px 14px;
  border-radius: 4px;
  color: var(--pu-nav-ink) !important;
  background: transparent;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
}
#header .navigation-buttons .dropdown .dropdown-menu > li > a:hover,
#header .navigation-buttons .dropdown .dropdown-menu > li > a:focus-visible {
  color: var(--pu-nav-ink) !important;
  background: #eee5d3;
  text-decoration: none;
}
/* Desktop: zachovana vyska hlavicky a rozmery ikon kvuli nativnimu menu. */
@media (min-width: 992px) {
  #header {
    border-bottom: 1px solid rgba(25,23,20,.12);
    box-shadow: 0 3px 12px rgba(25,23,20,.07);
  }
  #header #navigation .navigation-in > .menu-level-1 > li > a {
    color: var(--pu-nav-ink);
    font-size: 16px;
    text-decoration: none;
    transition: background-color .15s ease, box-shadow .15s ease;
  }
  #header #navigation .navigation-in > .menu-level-1 > li > a > b {
    font-weight: 600;
  }
  #header #navigation .navigation-in > .menu-level-1 > li > a:hover,
  #header #navigation .navigation-in > .menu-level-1 > li > a:focus-visible,
  #header #navigation .navigation-in > .menu-level-1 > li.exp > a,
  #header #navigation .navigation-in > .menu-level-1 > li > a[aria-expanded="true"] {
    background-color: rgba(255,255,255,.14);
    box-shadow: inset 0 -3px var(--pu-nav-ink);
  }
  #header #navigation .navigation-in .menu-level-2,
  #header .menu-helper > ul {
    border: 1px solid var(--pu-nav-line);
    border-radius: 0 0 10px 10px;
    background: var(--pu-nav-paper);
    box-shadow: 0 12px 28px rgba(25,23,20,.14);
  }
  #header #navigation .navigation-in .menu-level-2 a,
  #header .menu-helper > ul a {
    color: var(--pu-nav-ink);
    font-size: 14px;
    line-height: 1.45;
    font-weight: 500;
    white-space: normal;
    overflow-wrap: break-word;
    text-decoration: none;
  }
  #header #navigation .navigation-in .menu-level-2 a:hover,
  #header #navigation .navigation-in .menu-level-2 a:focus-visible,
  #header .menu-helper > ul a:hover,
  #header .menu-helper > ul a:focus-visible {
    color: var(--pu-nav-ink);
    background: #eee5d3;
    text-decoration: none;
  }
  #header .menu-helper > span {
    color: var(--pu-nav-ink);
    font-weight: 600;
  }
  #header .navigation-buttons,
  #header .navigation-buttons > a,
  #header .navigation-buttons > .top-nav-button {
    border-color: rgba(25,23,20,.12);
  }
  #header .navigation-buttons > a[data-target]:hover,
  #header .navigation-buttons > .top-nav-button:hover {
    background: rgba(255,255,255,.18);
  }
}
@media (prefers-reduced-motion: reduce) {
  #header #navigation .navigation-in > .menu-level-1 > li > a {
    transition: none;
  }
}
/* Barva textu take v nativnim mobilnim menu. */
#header #navigation .navigation-in > ul > li > a,
#header #navigation .navigation-in .menu-level-2 a {
  color: var(--pu-nav-ink);
}