/**
 * FIXU brand overrides for obleceni.fixu.cz
 * Colors: primary #326BFA, accent #FF3F26
 * Scoped to chrome (header/topbar/footer accents) — does not restyle configurator canvas.
 */
:root {
  --fixu-blue: #326BFA;
  --fixu-blue-hover: #2554d4;
  --fixu-blue-active: #1e45b3;
  --fixu-red: #FF3F26;
  --fixu-red-hover: #e6351f;
  --fixu-red-active: #c92d1a;
  --primary: #326BFA;
  --accent: #FF3F26;
  --rgba-primary: rgba(50, 107, 250, 0.1);
  --blue: #326BFA;
}

/* ---- Shared FIXU topbar ---- */
.fixu-topbar {
  background: transparent;
  border-bottom: 1px solid var(--line, #E9E9E9);
  padding: 0;
}

.fixu-topbar .container {
  max-width: 1300px;
}

.fixu-topbar__nav {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.fixu-topbar__list {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px 18px;
  min-width: max-content;
}

.fixu-topbar__list a {
  display: inline-block;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 500;
  color: #415161;
  text-decoration: none;
  white-space: nowrap;
  padding: 2px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.fixu-topbar__list a:hover,
.fixu-topbar__list a:focus-visible {
  color: var(--fixu-blue);
  outline: none;
}

.fixu-topbar__list a.is-active,
.fixu-topbar__list a[aria-current="page"] {
  color: var(--fixu-blue);
  font-weight: 600;
  border-bottom-color: var(--fixu-blue);
}

@media (max-width: 991.98px) {
  .fixu-topbar__list {
    gap: 4px 14px;
    padding: 6px 0;
  }
  .fixu-topbar__list a {
    font-size: 12px;
  }
}

/* ---- Transparent main header ---- */
header#header.header-fixu,
header.header-fixu {
  background: transparent !important;
  box-shadow: none;
}

header#header.header-fixu.header-bg,
header.header-fixu.header-bg {
  background-color: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.header-fixu .logo-header img.logo {
  max-height: 42px;
  width: auto;
  height: auto;
}

.header-fixu .box-nav-ul .item-link,
.header-fixu .mobile-menu,
.header-fixu .mobile-menu .icon,
.header-fixu .nav-icon .icon,
.header-fixu .nav-icon .nav-icon-item {
  color: var(--main, #181818);
}

.header-fixu .nav-icon .nav-icon-item svg path {
  stroke: currentColor;
}

/* Beat leftover #header … color:#fff hover from styles.css (ID specificity) */
#header.header-fixu .box-nav-ul .menu-item:not(.menu-express):not(.menu-sigri).active > .item-link,
#header.header-fixu .box-nav-ul .menu-item:not(.menu-express):not(.menu-sigri):hover > .item-link,
#header.header-fixu .box-nav-ul .menu-item:not(.menu-express):not(.menu-sigri):hover > .menu-dropdown-toggle,
#header.header-fixu .box-nav-ul .menu-item:not(.menu-express):not(.menu-sigri).active > .menu-dropdown-toggle,
.header-fixu .nav-icon .nav-icon-item:hover,
.header-fixu .nav-icon .nav-icon-item:hover .icon,
.header-fixu .mobile-menu:hover .icon {
  color: var(--fixu-blue);
}

.header-fixu .nav-icon .nav-icon-item:hover svg path {
  stroke: var(--fixu-blue);
}

.header-fixu .nav-icon .nav-icon-item:focus-visible,
.header-fixu .box-nav-ul .item-link:focus-visible,
.header-fixu .mobile-menu:focus-visible {
  outline: 2px solid var(--fixu-blue);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Cart badge uses accent red (reference site) */
.header-fixu .nav-icon .count-box {
  background-color: var(--fixu-red) !important;
  color: #fff !important;
}

/*
 * CTA hover fix (Potisk do 24h / #Sigri)
 * styles.css still has a magenta-era rule:
 *   #header … .menu-item:hover .item-link { color: #fff }
 * On a light/transparent header that forces white text. For pill CTAs
 * that can mean white-on-white (or white text without a solid fill).
 * Override only these two CTAs — do not retarget all nav hovers.
 */
#header.header-fixu .box-nav-ul > .menu-express.menu-item > .item-link,
#header.header-fixu .box-nav-ul > .menu-express.menu-item:hover > .item-link,
#header.header-fixu .box-nav-ul > .menu-express.menu-item.active > .item-link,
#header.header-fixu .box-nav-ul > .menu-express.menu-item > .item-link:hover,
#header.header-fixu .box-nav-ul > .menu-express.menu-item > .item-link:focus-visible,
#header.header-fixu .box-nav-ul > .menu-express.menu-item > .item-link:active {
  background-color: var(--fixu-red) !important;
  background-image: none !important;
  color: #ffffff !important;
  border-color: var(--fixu-red) !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #ffffff;
}

#header.header-fixu .box-nav-ul > .menu-express.menu-item > .item-link:hover,
#header.header-fixu .box-nav-ul > .menu-express.menu-item > .item-link:focus-visible {
  background-color: var(--fixu-red-hover) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
  box-shadow: 0 4px 14px rgba(255, 63, 38, 0.35);
}

#header.header-fixu .box-nav-ul > .menu-express.menu-item > .item-link:active {
  background-color: var(--fixu-red-active) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
}

#header.header-fixu .box-nav-ul > .menu-sigri.menu-item > .item-link,
#header.header-fixu .box-nav-ul > .menu-sigri.menu-item:hover > .item-link,
#header.header-fixu .box-nav-ul > .menu-sigri.menu-item.active > .item-link,
#header.header-fixu .box-nav-ul > .menu-sigri.menu-item > .item-link:hover,
#header.header-fixu .box-nav-ul > .menu-sigri.menu-item > .item-link:focus-visible,
#header.header-fixu .box-nav-ul > .menu-sigri.menu-item > .item-link:active {
  background-color: #ffffff !important;
  background-image: none !important;
  color: var(--fixu-blue) !important;
  border: 1px solid rgba(50, 107, 250, 0.35) !important;
  opacity: 1 !important;
  -webkit-text-fill-color: var(--fixu-blue);
}

#header.header-fixu .box-nav-ul > .menu-sigri.menu-item > .item-link:hover,
#header.header-fixu .box-nav-ul > .menu-sigri.menu-item > .item-link:focus-visible {
  background-color: #eff4ff !important;
  color: var(--fixu-blue) !important;
  border-color: var(--fixu-blue) !important;
  -webkit-text-fill-color: var(--fixu-blue);
  box-shadow: 0 4px 14px rgba(50, 107, 250, 0.18);
}

#header.header-fixu .box-nav-ul > .menu-sigri.menu-item > .item-link:active,
#header.header-fixu .box-nav-ul > .menu-sigri.menu-item.active > .item-link {
  background-color: #e8effe !important;
  color: var(--fixu-blue) !important;
  -webkit-text-fill-color: var(--fixu-blue);
}

/* Mobile offcanvas — same contrast guarantees */
#mobileMenu .menu-express > .mb-menu-link,
#mobileMenu .menu-express > .mb-menu-link:hover,
#mobileMenu .menu-express > .mb-menu-link:focus-visible,
#mobileMenu .menu-express > .mb-menu-link span {
  color: var(--fixu-red) !important;
}

#mobileMenu .menu-sigri > .mb-menu-link,
#mobileMenu .menu-sigri > .mb-menu-link:hover,
#mobileMenu .menu-sigri > .mb-menu-link:focus-visible,
#mobileMenu .menu-sigri > .mb-menu-link span {
  color: var(--fixu-blue) !important;
}

/* Dropdown / submenu panels keep solid readable background */
.header-fixu .box-nav-ul .sub-menu,
.header-fixu .list-categories-inner,
.canvas-mb {
  background-color: #fff;
}

/* Mobile menu: FIXU category links */
.fixu-mb-topnav {
  list-style: none;
  margin: 0 0 16px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--line, #E9E9E9);
}

.fixu-mb-topnav li {
  margin: 0;
}

.fixu-mb-topnav a {
  display: block;
  padding: 8px 0;
  font-size: 14px;
  font-weight: 500;
  color: #415161;
  text-decoration: none;
}

.fixu-mb-topnav a.is-active,
.fixu-mb-topnav a:hover {
  color: var(--fixu-blue);
}

/* Accent helpers */
.text-accent,
a.text-accent {
  color: var(--fixu-red) !important;
}

.btn-accent,
.tf-btn.btn-accent {
  background-color: var(--fixu-red);
  border-color: var(--fixu-red);
  color: #fff;
}

.btn-accent:hover,
.tf-btn.btn-accent:hover {
  background-color: var(--fixu-red-hover);
  border-color: var(--fixu-red-hover);
  color: #fff;
}

a:focus-visible,
button:focus-visible,
.tf-btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline-color: var(--fixu-blue);
}

/* Form controls */
.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--fixu-blue);
  box-shadow: 0 0 0 0.2rem var(--rgba-primary);
}