/* ============================================================
   BASTLIK.CZ — Redesign bočního menu kategorií (v2)
   Vložit do: Shoptet -> Vzhled a obsah -> Editor -> HTML kód ->
   Záhlaví, do <style>...</style>. VLOŽIT AŽ ZA tvoje stávající
   CSS (aby při shodné specifičnosti vyhrálo pořadím).

   Scope: VŠE je pod .box-categories -> nic mimo kategorie
   (tlačítka, footer, vyhledávání, košík…) se neovlivní.
   Prefix proměnných --bstlcat-.

   POZOR — konflikt se starým CSS:
   Ve tvých souborech (styles_bastlik_3.css, style_feb.css) jsou
   na kategorie staré silné rules (border 2px black, border-left
   5px, font-size 20px !important, Montserrat, .categories ul a
   font-size 17px !important, margin-left 26px !important, …).
   Tenhle soubor je přebíjí pomocí vyšší specifičnosti + !important.
   IDEÁLNÍ je ale ty staré rules pro kategorie smazat — jejich
   seznam ti pošlu ve zprávě. Bez smazání to funguje taky, jen je
   CSS „nabušenější“.
   ============================================================ */

.box-categories {
  --bstlcat-navy: #16233a;
  --bstlcat-navy-soft: #162238;
  --bstlcat-blue: #007bff;
  --bstlcat-blue-dark: #006ae0;
  --bstlcat-bg-hover: #f4f6f9;
  --bstlcat-border: #e5e7eb;
  --bstlcat-text-sub: #4b5563;
  --bstlcat-icon: #9ca3af;
  --bstlcat-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  font-family: var(--bstlcat-font) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 0 16px 0 !important;
  box-shadow: none !important;
}

/* ============================================================
   RESET starých pravidel — neutralizace borderů, fontů, marginů
   (staré CSS: border 2px black, border-left 5px, font 19-20px,
   background #f5f5f5, Montserrat, transform scale, margin 4px…)
   ============================================================ */
.box-categories .categories a {
  border: none !important;
  border-left: none !important;
  border-radius: 8px !important;
  background: transparent !important;
  margin: 0 !important;
  line-height: 1.35 !important;
  font-family: var(--bstlcat-font) !important;
  transform: none !important;
  transition: background .15s ease, color .15s ease !important;
}

/* ---------- Tmavý header "Kategorie" (z sr-only h3) ---------- */
.box-categories > h3.sr-only {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 0 10px 0 !important;
  padding: 13px 18px !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
  white-space: normal !important;
  background: var(--bstlcat-navy) !important;
  border-radius: 12px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
/* ikonka mřížky (kategorie) před textem */
.box-categories > h3.sr-only::before {
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.box-categories > h3.sr-only span {
  color: #ffffff !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
}

/* ---------- Bílá karta se seznamem ---------- */
.box-categories #categories {
  background: #ffffff !important;
  border: 1px solid var(--bstlcat-border) !important;
  border-radius: 14px !important;
  padding: 8px !important;
  box-shadow: 0 4px 20px rgba(22, 34, 56, 0.03) !important;
}
.box-categories .skip-link__wrapper {
  margin: 0 !important;
}

/* ============================================================
   ÚROVEŇ 1 — hlavní kategorie (div.categories > .topic > a)
   ============================================================ */
.box-categories #categories > .categories {
  margin: 0 0 2px 0 !important;
}
.box-categories #categories > .categories > .topic > a {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 14px !important;
  font-size: 15.5px !important;
  font-weight: 500 !important;
  color: var(--bstlcat-navy-soft) !important;
  text-decoration: none !important;
}
.box-categories #categories > .categories > .topic > a:hover {
  background: var(--bstlcat-bg-hover) !important;
  color: var(--bstlcat-blue) !important;
  font-size: 15.5px !important;
}

/* rozbalený / aktivní-předek top-level (např. "Moduly") — šedé pozadí */
.box-categories #categories > .categories.expanded > .topic > a,
.box-categories #categories > .categories > .topic.child-active > a {
  background: var(--bstlcat-bg-hover) !important;
  color: var(--bstlcat-navy-soft) !important;
  font-weight: 600 !important;
}
.box-categories #categories > .categories > .topic.child-active > a:hover {
  color: var(--bstlcat-blue) !important;
  background: var(--bstlcat-bg-hover) !important;
  font-size: 15.5px !important;
}

/* top-level, který je SÁM aktuální stránkou (.topic.active) → modrá,
   i když je rozbalený a ukazuje své podkategorie */
.box-categories #categories > .categories > .topic.active > a {
  background: var(--bstlcat-blue) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2) !important;
}
.box-categories #categories > .categories > .topic.active > a:hover {
  background: var(--bstlcat-blue-dark) !important;
  color: #ffffff !important;
  font-size: 15.5px !important;
}
.box-categories #categories > .categories > .topic.active > a .cat-trigger::after {
  color: #ffffff !important;
}

/* ---------- Ikonka +/- (úroveň 1) ---------- */
/* ikonu pozicujeme absolutně na pravou stranu na střed řádku —
   nezávisle na flexu i na starých span pravidlech */
.box-categories #categories .categories .topic > a,
.box-categories #categories .categories li > a {
  position: relative !important;
  padding-right: 36px !important;
}
.box-categories #categories .categories .topic > a > .cat-trigger,
.box-categories #categories .categories li > a > .cat-trigger,
.box-categories .cat-trigger {
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  left: auto !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 1 !important;
  width: 16px !important;
  height: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
}
/* "+" jen pro kategorie s podkategoriemi (.expandable), NE pro
   pouhé .external (Sady, Příslušenství — ty nemají podkategorie) */
.box-categories #categories > .categories.expandable > .topic > a .cat-trigger::after {
  content: "\002B";
  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 600;
  color: var(--bstlcat-icon);
  transition: color .15s;
}
.box-categories #categories > .categories.expandable.expanded > .topic > a .cat-trigger::after,
.box-categories #categories > .categories > .topic.child-active > a .cat-trigger::after {
  content: "\2212";
  color: var(--bstlcat-navy-soft);
}
.box-categories #categories > .categories > .topic > a:hover .cat-trigger::after {
  color: var(--bstlcat-blue);
}

/* ============================================================
   ÚROVEŇ 2+ — podkategorie (ul > li > a)
   ============================================================ */
.box-categories .categories ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 4px 0 6px 10px !important;
}
.box-categories .categories ul li {
  margin: 0 0 2px 0 !important;
}
.box-categories .categories ul li a {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 9px 14px !important;
  margin-left: 0 !important;      /* přebíjí staré margin-left:26px */
  font-size: 14.5px !important;   /* přebíjí staré font-size:17px !important */
  font-weight: 500 !important;
  color: var(--bstlcat-text-sub) !important;
  text-decoration: none !important;
  border-radius: 6px !important;
}
.box-categories .categories ul li a:hover {
  background: var(--bstlcat-bg-hover) !important;
  color: var(--bstlcat-navy-soft) !important;
  font-size: 14.5px !important;   /* přebíjí staré hover font-size:18px !important */
}

/* rozbalená podkategorie s dětmi (aktivní-předek) — šedé pozadí */
.box-categories .categories ul li.expanded > a,
.box-categories .categories ul li.child-active > a,
.box-categories .categories ul li.active:has(li.active) > a {
  background: var(--bstlcat-bg-hover) !important;
  color: var(--bstlcat-navy-soft) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.box-categories .categories ul li.child-active > a:hover,
.box-categories .categories ul li.active:has(li.active) > a:hover {
  background: var(--bstlcat-bg-hover) !important;
  color: var(--bstlcat-blue) !important;
  font-size: 14.5px !important;
}

/* ikonka +/- u rozbalitelných podkategorií (jen .expandable) */
.box-categories .categories ul li.expandable > a .cat-trigger::after {
  content: "\002B";
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 600;
  color: var(--bstlcat-icon);
  transition: color .15s;
}
.box-categories .categories ul li.expandable.expanded > a .cat-trigger::after,
.box-categories .categories ul li.child-active > a .cat-trigger::after {
  content: "\2212";
  color: var(--bstlcat-navy-soft);
}
.box-categories .categories ul li a:hover .cat-trigger::after {
  color: var(--bstlcat-blue);
}

/* ---------- Úroveň 3 (vnořený ul ul) — větší odsazení ---------- */
.box-categories .categories ul ul {
  padding: 2px 0 4px 12px !important;
}
.box-categories .categories ul ul li a {
  font-size: 14px !important;
  padding: 8px 14px !important;
}

/* ============================================================
   AKTIVNÍ POLOŽKA (aktuální stránka) — modrá pilulka
   = .active BEZ aktivního potomka (leaf i podkategorie s dětmi,
   na jejíž stránce právě jsem). Předci zůstávají šedí (výše).
   ============================================================ */
.box-categories .categories ul li.active:not(:has(li.active)) > a,
.box-categories .categories ul li a.active {
  background: var(--bstlcat-blue) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2) !important;
}
.box-categories .categories ul li.active:not(:has(li.active)) > a:hover,
.box-categories .categories ul li a.active:hover {
  background: var(--bstlcat-blue-dark) !important;
  color: #ffffff !important;
  font-size: 14.5px !important;
}
.box-categories .categories ul li.active:not(:has(li.active)) > a .cat-trigger::after,
.box-categories .categories ul li a.active .cat-trigger::after {
  color: #ffffff !important;
}

/* ============================================================
   Rozbalování — skryté potomky dokud není .expanded
   ============================================================ */
.box-categories .categories.expandable:not(.expanded) > ul,
.box-categories .categories ul li.expandable:not(.expanded) > ul {
  display: none !important;
}
.box-categories .categories.expanded > ul,
.box-categories .categories ul li.expandable.expanded > ul {
  display: block !important;
  color: inherit !important;   /* přebíjí staré color:white na ul */
}

/* ============================================================
   Responzivita
   ============================================================ */
@media (max-width: 768px) {
  .box-categories #categories {
    padding: 6px !important;
  }
  .box-categories #categories > .categories > .topic > a {
    padding: 12px !important;
  }
}