/* ============================================================
   SARACEN HEADER — clean fix pro Shoptet hlavicku
   ŘEŠÍ:
   - Tmava barva ikon a textu (header je bily, ikony byly bile)
   - Hamburger dropdown ZUSTANE viditelny a nepreskakuje
   - Z-index nad hero sekci (jinak prosvitala)

   KLICOVE PRAVIDLO: NIKDY neaplikovat `filter` na .menu-helper
   nebo jakehokoliv jejiho predka, protoze:
   1) Filter cascade-uje na vsechny potomky (cely dropdown bude
      cerny/cerveny)
   2) Filter vytvori novou compositor vrstvu — pri animaci dropdownu
      browser musi prekreslovat celou vrstvu = vizualni skoky
   ============================================================ */

/* ---------- 1) Header nad hero sekci ---------- */
#header {
  z-index: 1000 !important;
}

/* ---------- 2) Vsechen text v headeru — tmavomodry brand ----------
   Vyjmuto: img (logo), input value, .btn-conversion (cervene tlacitka) */
#header,
#header a,
#header span,
#header button:not(.btn-conversion):not(.add-to-cart-button),
#header .cart-price,
#header .navigation-buttons,
#header .dropdown,
#header .dropdown button,
#header #navigation a,
#header .menu-helper > span,
#header .navigation-in a {
  color: #061B41 !important;
}

/* ---------- 3) Ikony renderovane jako CSS background-image (bile SVG/PNG)
   Filter `brightness(0)` obarvi vsechny pixely (vcetne bilych) na cernou.
   Aplikujeme JEN na elementy bez dropdownu uvnitr. */
#header .btn-icon,
#header .search-toggle,
#header .navigation-close,
#header .caret,
#header .submenu-arrow {
  filter: brightness(0) saturate(100%);
}

/* Ikony v pseudo-elementech (Shoptet nektere ikony renderuje pres ::before)
   POZN: .menu-helper::before NENI v seznamu — jeji filter resime nize
   v izolovanem bloku, jinak by zasahoval do dropdownu. */
#header .btn-icon::before,
#header .btn-icon::after,
#header .top-nav-button-login::before,
#header .top-nav-button-login::after,
#header .search-toggle::before,
#header .search-toggle::after,
#header .navigation-close::before,
#header .navigation-close::after,
#header .caret::before,
#header .caret::after {
  filter: brightness(0) saturate(100%) !important;
}

/* ---------- 4) HAMBURGER MENU — KRITICKA SEKCE ----------
   Shoptet kresli hamburger ikonu jako background-image (bila SVG)
   bud na .menu-helper, ::after, nebo nekde jinde — nelze spolehlive
   trefit pres filter. Resime to NAHRAZENIM: schovame vse co Shoptet
   kresli a vlozime vlastni tmavou inline SVG hamburger ikonu pres ::before.

   Funguje to bez ohledu na to, kde Shoptet ikonu mel — protoze nase
   ::before sedi absolutne uprostred .menu-helper s vysokym z-indexem
   a tmavou barvou. */

#header .menu-helper {
  /* NEsetovat position — Shoptet ji ma nastavenou na absolute (levy roh).
     Pseudo ::before bude position: absolute uvnitr a Shoptet positioning
     ji uz vytvari valid containing block. */
  /* Schovat puvodni Shoptet ikonu pokud byla background-image na elementu */
  background-image: none !important;
  /* Pojistka — zachovat klikatelnou plochu i kdyz schovame ::after ikonu */
  min-width: 44px !important;
  min-height: 44px !important;
}

/* Nase vlastni tmava hamburger ikona — 3 cary, brand navy */
#header .menu-helper::before {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 24px !important;
  height: 18px !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18' fill='none' stroke='%23061B41' stroke-width='2.2' stroke-linecap='round'><line x1='2' y1='3' x2='22' y2='3'/><line x1='2' y1='9' x2='22' y2='9'/><line x1='2' y1='15' x2='22' y2='15'/></svg>") !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  filter: none !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 10 !important;
  pointer-events: none !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Schovat Shoptet vlastni ::after ikonu — JEN background, NE display:none.
   display: none by skryl layout-bearing element a .menu-helper by ztratil
   sve rozmery → na nic by se nedalo kliknout. */
#header .menu-helper::after {
  background-image: none !important;
  opacity: 0 !important;
}

/* Pripadne ikony renderovane jako background-image na <span> nebo
   jeho pseudo-elementech — taky schovat */
#header .menu-helper > span:first-child {
  filter: none !important;
  background-image: none !important;
}
#header .menu-helper > span::before,
#header .menu-helper > span::after {
  background-image: none !important;
  opacity: 0 !important;
}

/* Dropdown polozky — explicitne ZADNY filter, jen color */
#header .menu-helper ul,
#header .menu-helper ul a,
#header .menu-helper li,
#header .menu-helper li a,
#header .menu-helper li a b,
#header .menu-helper .menu-level-1,
#header .menu-helper .menu-level-1 a,
#header .menu-helper .menu-level-1 a b,
#header .menu-helper .top-navigation-bar-menu,
#header .menu-helper .top-navigation-bar-menu a {
  filter: none !important;
  color: #061B41 !important;
}

/* Hover na .menu-helper — ZADNY filter (jinak se prepocita layer + skoky) */
#header .menu-helper:hover,
#header .menu-helper:focus,
#header .menu-helper.active,
#header .menu-helper[aria-expanded="true"] {
  filter: none !important;
}

/* ---------- 5) Inline SVG ikony (kdyby Shoptet pouzival) ---------- */
#header svg {
  fill: #061B41 !important;
  color: #061B41 !important;
}
#header svg path,
#header svg circle,
#header svg rect {
  fill: currentColor !important;
}

/* ---------- 6) Hover stavy — pouze color, ne filter pro containery ---------- */
#header a:hover,
#header button:not(.btn-conversion):hover,
#header .top-nav-button:hover {
  color: #C21D2A !important;
}

/* Hover ikon — filter chain konvertujici cernou na cervenou (#C21D2A).
   POUZE pro samostatne ikony BEZ dropdownu uvnitr. */
#header .btn-icon:hover,
#header .search-toggle:hover {
  filter: brightness(0) saturate(100%)
    invert(20%) sepia(89%) saturate(3500%)
    hue-rotate(346deg) brightness(92%) contrast(95%);
}

/* ---------- 7) Dropdown menu polozky styling ----------
   Aby vypadaly cisto pri otevreni hamburgeru a neprejskakovaly. */
#header .menu-helper ul {
  margin: 0;
  padding: 0;
}
#header .menu-helper li {
  list-style: none;
}
#header .menu-helper li a {
  font-family: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
#header .menu-helper li a:hover {
  color: #C21D2A !important;
}

/* ---------- 8) Stabilita layoutu — zamezit preskakovani buttonu ----------
   Shoptet nekdy meni font-size nebo padding pri hoveru, coz pri kombinaci
   s nasimi pravidly zpusobuje skoky. Vynutime stabilni rozmery. */
#header .top-nav-button,
#header .btn-icon,
#header .menu-helper {
  transition: color 0.2s ease, filter 0.2s ease, background 0.2s ease;
}

/* Zabranit ze by hover menil rozmer ikon (typicka pricina skoku) */
#header .btn-icon:hover,
#header .search-toggle:hover,
#header .menu-helper:hover {
  transform: none !important;
}

/* ---------- 9) Cart-price text ---------- */
#header .cart-price {
  font-weight: 500;
}