/* ==================================================
   Crazystep - uprava existujuceho systemoveho Shoptet headera
   CSS only verzia
   Subor: /user/documents/upload/crazystep-header.css
   ================================================== */

@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700;800&display=swap");

:root {
  --cs-blue: #25445a;
  --cs-blue-light: #2f6f8f;
  --cs-cream: #f3eadc;
  --cs-white: #ffffff;
  --cs-black: #111111;
  --cs-muted: #746f5f;
  --cs-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  --cs-shadow-hover: 0 18px 38px rgba(37, 68, 90, 0.16);
}

/* ==================================================
   Zaklad headera
   ================================================== */

#header {
  background: var(--cs-white) !important;
  border-bottom: 1px solid rgba(243, 234, 220, 0.95) !important;
  box-shadow: none !important;
  font-family: "Ubuntu", Arial, sans-serif !important;
  z-index: 1000;
}

#header,
#header * {
  box-sizing: border-box;
}

#header a {
  font-family: "Ubuntu", Arial, sans-serif !important;
  text-decoration: none !important;
}

/* Vnutorne obaly headera */
#header .container,
#header .header-top,
#header .header-bottom,
#header .navigation-in,
#header .navigation-wrapper {
  font-family: "Ubuntu", Arial, sans-serif !important;
}

/* Logo */
#header .site-name,
#header .site-name a,
#header .logo,
#header .logo a {
  color: var(--cs-blue) !important;
  font-family: "Ubuntu", Arial, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.6px !important;
  text-decoration: none !important;
}

/* ==================================================
   Hlavne menu
   ================================================== */

#navigation,
#header #navigation,
#header .navigation-in,
#header .menu-level-1 {
  background: transparent !important;
  font-family: "Ubuntu", Arial, sans-serif !important;
}

#header .menu-level-1 > li > a,
#navigation .menu-level-1 > li > a {
  color: var(--cs-blue) !important;
  font-family: "Ubuntu", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px !important;
  text-decoration: none !important;
  transition: color 0.25s ease, background 0.25s ease !important;
}

#header .menu-level-1 > li > a:hover,
#header .menu-level-1 > li.active > a,
#navigation .menu-level-1 > li > a:hover,
#navigation .menu-level-1 > li.active > a {
  color: var(--cs-blue-light) !important;
}

/* Podciarknutie menu iba na desktope */
@media (min-width: 992px) {
  #header .menu-level-1 > li > a {
    position: relative !important;
  }

  #header .menu-level-1 > li > a::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 6px;
    height: 2px;
    border-radius: 999px;
    background: var(--cs-blue-light);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.25s ease;
  }

  #header .menu-level-1 > li > a:hover::after,
  #header .menu-level-1 > li.active > a::after {
    transform: scaleX(1);
  }
}

/* Dropdown menu */
#header .menu-level-2,
#header .submenu,
#header .dropdown-menu {
  border: 1px solid var(--cs-cream) !important;
  border-radius: 22px !important;
  background: var(--cs-white) !important;
  box-shadow: var(--cs-shadow) !important;
  overflow: hidden !important;
  padding: 10px !important;
}

#header .menu-level-2 a,
#header .submenu a,
#header .dropdown-menu a {
  border-radius: 14px !important;
  color: var(--cs-blue) !important;
  font-family: "Ubuntu", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 11px 14px !important;
}

#header .menu-level-2 a:hover,
#header .submenu a:hover,
#header .dropdown-menu a:hover {
  background: rgba(243, 234, 220, 0.7) !important;
  color: var(--cs-blue-light) !important;
}

/* ==================================================
   Prava cast headera - systemove tlacidla
   Hladat / Prihlasenie / Kosik / Menu
   ================================================== */

#header .navigation-buttons {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  white-space: nowrap !important;
}

/* Iba priame systemove odkazy v headeri */
#header .navigation-buttons > a {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: auto !important;
  min-height: 42px !important;
  height: 42px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border: 1px solid var(--cs-cream) !important;
  border-radius: 999px !important;
  background: rgba(243, 234, 220, 0.58) !important;
  color: var(--cs-blue) !important;
  font-family: "Ubuntu", Arial, sans-serif !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.45px !important;
  text-decoration: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease !important;
}

#header .navigation-buttons > a:hover {
  background: var(--cs-blue) !important;
  border-color: var(--cs-blue) !important;
  color: var(--cs-white) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--cs-shadow-hover) !important;
}

/* Kosik ako hlavnejsie tlacidlo */
#header .navigation-buttons > a[href*="kosik"],
#header .navigation-buttons > a[href*="cart"],
#header .navigation-buttons > a[data-target="cart"] {
  background: var(--cs-blue-light) !important;
  border-color: var(--cs-blue-light) !important;
  color: var(--cs-white) !important;
}

#header .navigation-buttons > a[href*="kosik"]:hover,
#header .navigation-buttons > a[href*="cart"]:hover,
#header .navigation-buttons > a[data-target="cart"]:hover {
  background: var(--cs-blue) !important;
  border-color: var(--cs-blue) !important;
  color: var(--cs-white) !important;
}

/* Ikona pred textom - text ostava viditelny */
#header .navigation-buttons > a::before {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: 7px !important;
  font-family: Arial, sans-serif !important;
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  color: currentColor !important;
}

/* Hladat */
#header .navigation-buttons > a[data-target="search"]::before,
#header .navigation-buttons > a[href*="vyhladavanie"]::before,
#header .navigation-buttons > a[href*="search"]::before,
#header .navigation-buttons > a[title*="Hľadať"]::before,
#header .navigation-buttons > a[aria-label*="Hľadať"]::before {
  content: "?";
}

/* Prihlasenie */
#header .navigation-buttons > a[data-target="login"]::before,
#header .navigation-buttons > a[href*="login"]::before,
#header .navigation-buttons > a[href*="prihlas"]::before,
#header .navigation-buttons > a[title*="Prihlás"]::before,
#header .navigation-buttons > a[aria-label*="Prihlás"]::before {
  content: "?";
}

/* Kosik */
#header .navigation-buttons > a[data-target="cart"]::before,
#header .navigation-buttons > a[href*="kosik"]::before,
#header .navigation-buttons > a[href*="cart"]::before,
#header .navigation-buttons > a[title*="Košík"]::before,
#header .navigation-buttons > a[title*="košík"]::before,
#header .navigation-buttons > a[aria-label*="Košík"]::before,
#header .navigation-buttons > a[aria-label*="košík"]::before {
  content: "??";
  font-size: 14px !important;
}

/* Menu */
#header .navigation-buttons > a[data-target="navigation"]::before,
#header .navigation-buttons > a[data-target="menu"]::before,
#header .navigation-buttons > a[title*="Menu"]::before,
#header .navigation-buttons > a[aria-label*="Menu"]::before {
  content: "?";
}

/* ==================================================
   Dolezite:
   Ak Shoptet pri tychto tlacidlach pouziva ine elementy,
   neupravujeme globalne span/count/amount, aby sme nerozbili recenzie.
   ================================================== */

/* ==================================================
   Vyhladavanie - len header/search modal
   ================================================== */

#header .search,
#header .search-form,
#header .search-form fieldset,
.search-window,
.search-window-in {
  font-family: "Ubuntu", Arial, sans-serif !important;
}

#header .search input,
#header .search-form input[type="search"],
#header .search-form input[type="text"],
.search-window input[type="search"],
.search-window input[type="text"] {
  height: 46px !important;
  border: 1px solid var(--cs-cream) !important;
  border-radius: 999px !important;
  background: rgba(243, 234, 220, 0.45) !important;
  color: var(--cs-blue) !important;
  font-family: "Ubuntu", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 0 18px !important;
  box-shadow: none !important;
}

#header .search input::placeholder,
#header .search-form input::placeholder,
.search-window input::placeholder {
  color: rgba(37, 68, 90, 0.65) !important;
}

#header .search button,
#header .search-form button,
.search-window button {
  min-height: 44px !important;
  border: 1px solid var(--cs-blue-light) !important;
  border-radius: 999px !important;
  background: var(--cs-blue-light) !important;
  color: var(--cs-white) !important;
  font-family: "Ubuntu", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  transition: 0.25s ease !important;
}

#header .search button:hover,
#header .search-form button:hover,
.search-window button:hover {
  background: var(--cs-blue) !important;
  border-color: var(--cs-blue) !important;
}

/* ==================================================
   Prihlasovacie okno
   ================================================== */

.login-window,
.login-window-in,
.user-login,
.user-login-form {
  font-family: "Ubuntu", Arial, sans-serif !important;
}

.login-window-in,
.user-login,
.user-login-form {
  border-radius: 24px !important;
}

.login-window input,
.user-login input,
.user-login-form input {
  border: 1px solid var(--cs-cream) !important;
  border-radius: 999px !important;
  background: rgba(243, 234, 220, 0.45) !important;
  color: var(--cs-blue) !important;
  font-family: "Ubuntu", Arial, sans-serif !important;
  box-shadow: none !important;
}

.login-window button,
.user-login button,
.user-login-form button,
.login-window .btn,
.user-login .btn,
.user-login-form .btn {
  border-radius: 999px !important;
  background: var(--cs-blue-light) !important;
  border-color: var(--cs-blue-light) !important;
  color: var(--cs-white) !important;
  font-family: "Ubuntu", Arial, sans-serif !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
}

.login-window button:hover,
.user-login button:hover,
.user-login-form button:hover,
.login-window .btn:hover,
.user-login .btn:hover,
.user-login-form .btn:hover {
  background: var(--cs-blue) !important;
  border-color: var(--cs-blue) !important;
}

/* ==================================================
   Mobil
   ================================================== */

@media (max-width: 991px) {
  #header {
    border-bottom: 1px solid var(--cs-cream) !important;
  }

  #header .menu-level-1 {
    background: var(--cs-white) !important;
    padding: 10px !important;
  }

  #header .menu-level-1 > li {
    border-bottom: 1px solid rgba(243, 234, 220, 0.9) !important;
  }

  #header .menu-level-1 > li:last-child {
    border-bottom: none !important;
  }

  #header .menu-level-1 > li > a {
    border-radius: 16px !important;
    padding: 15px 14px !important;
    color: var(--cs-blue) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
  }

  #header .menu-level-1 > li > a:hover,
  #header .menu-level-1 > li.active > a {
    background: rgba(243, 234, 220, 0.7) !important;
    color: var(--cs-blue-light) !important;
  }

  #header .menu-level-2,
  #header .submenu {
    border: 0 !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    background: rgba(243, 234, 220, 0.45) !important;
    margin: 0 0 10px !important;
  }

  #header .navigation-buttons {
    gap: 5px !important;
  }

  #header .navigation-buttons > a {
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
    letter-spacing: 0.2px !important;
  }

  #header .navigation-buttons > a::before {
    margin-right: 5px !important;
    font-size: 14px !important;
  }
}

@media (max-width: 520px) {
  #header .site-name,
  #header .site-name a,
  #header .logo,
  #header .logo a {
    font-size: 22px !important;
  }

  #header .navigation-buttons {
    gap: 4px !important;
  }

  #header .navigation-buttons > a {
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 8px !important;
    font-size: 10px !important;
  }
}
#header {
  outline: 4px solid red !important;
}
body {
  outline: 8px solid red !important;
}