/* elx-nav-3.css: menu „Naše produkty“ v hlavičce na počítači (Honza, 6. 11. 2026). Mobil beze změny. */
@media (max-width: 767px) { .elx-nav2 { display: none !important; } }
@media (min-width: 768px) {
  /* původní řádek kategorií, původní odkazy O nás… a bílý pruh šablony pod hlavičkou pryč */
  html.elx-nav-on #navigation, html.elx-nav-on #cu-top-menu, html.elx-nav-on #header::after { display: none !important; }
  #header .header-top { position: relative; }
  .elx-nav2 { flex: 1 1 auto; display: flex; justify-content: center; align-self: stretch; min-width: 0; }
  .elx-nav2 ul { list-style: none; margin: 0; padding: 0; }
  .elx-nav2 a { text-decoration: none; }
  .elx-top { display: flex; align-items: stretch; gap: 34px; }
  .elx-top > li { display: flex; align-items: center; position: relative; }
  .elx-info, .elx-pm-btn { color: #fff; font-size: 16px; padding: 8px 0 6px; border-bottom: 2px solid transparent; white-space: nowrap; }
  /* šablona barví a:hover a a:focus černě, v černé hlavičce musí odkazy zůstat bílé */
  #header .elx-nav2 .elx-info, #header .elx-nav2 .elx-info:hover, #header .elx-nav2 .elx-info:focus,
  #header .elx-nav2 .elx-info:visited, #header .elx-nav2 .elx-info:active, #header .elx-nav2 .elx-info.is-active,
  #header .elx-pm-btn, #header .elx-pm-btn:hover, #header .elx-pm-btn:focus, #header .elx-pm-btn:active { color: #fff !important; }
  .elx-info:hover, .elx-info:focus-visible { border-bottom-color: rgba(255, 255, 255, .5); }
  .elx-pm-btn:hover { border-bottom-color: rgba(255, 255, 255, .5); }
  /* odkazy v panelu zůstávají černé i po najetí a navštívení */
  #header .elx-pm-panel a, #header .elx-pm-panel a:hover, #header .elx-pm-panel a:focus, #header .elx-pm-panel a:visited { color: #000; }
  #header .elx-t-sub a { color: #444; }
  #header .elx-t-sub a:hover, #header .elx-t-sub a:focus, #header .elx-t-sub a.is-active { color: #000; }
  .elx-info.is-active { border-bottom-color: #fff; }
  .elx-pm-btn { position: relative; display: flex; align-items: center; gap: 8px; padding-right: 22px; background: none; border-top: 0; border-left: 0; border-right: 0; font-family: inherit; font-weight: 600; cursor: pointer; }
  .elx-pm-btn::after { content: ""; position: absolute; right: 4px; top: 12px; width: 7px; height: 7px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); transition: transform .15s; }
  .elx-pm.is-open .elx-pm-btn::after { transform: translateY(3px) rotate(225deg); }
  .elx-pm.is-active .elx-pm-btn { border-bottom-color: rgba(255, 255, 255, .7); }
  .elx-nav2 a:focus-visible, .elx-nav2 button:focus-visible, .elx-ctx a:focus-visible, .elx-side a:focus-visible, .elx-side button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
  /* panel */
  .elx-pm-panel { display: none; position: absolute; top: 100%; left: -24px; z-index: 60; width: 390px; padding: 14px 0; background: #fff; box-shadow: 0 16px 34px rgba(0, 0, 0, .18); }
  .elx-pm.is-open .elx-pm-panel { display: block; }
  .elx-pm-panel.is-cols { width: 760px; }
  .elx-pm-panel.is-cols .elx-tree { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8px; }
  /* strom kategorií (panel i boční sloupec) */
  .elx-t-row { display: flex; align-items: center; justify-content: space-between; }
  .elx-t-link { flex: 1; display: flex; align-items: center; gap: 12px; padding: 8px 22px; color: #000; font-size: 15px; font-weight: 500; }
  .elx-t-link:hover { background: #f3f3f3; }
  .elx-t.is-active > .elx-t-row > .elx-t-link { font-weight: 700; box-shadow: inset 3px 0 0 #000; }
  .elx-t-tog { position: relative; flex: 0 0 40px; height: 40px; border: 0; background: none; cursor: pointer; color: #000; }
  .elx-t-tog::before { content: ""; position: absolute; left: 15px; top: 14px; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
  /* podmenu jako flyout vpravo vedle seznamu */
  .elx-t { position: relative; }
  .elx-t.has-sub.is-open > .elx-t-row { background: #f3f3f3; }
  .elx-t-sub { display: none; position: absolute; top: -8px; left: 100%; z-index: 61; width: 300px; padding: 8px 0 !important; background: #fff; box-shadow: 8px 14px 30px rgba(0, 0, 0, .16); border-left: 1px solid #eee; }
  .elx-t.elx-flip > .elx-t-sub { left: auto; right: 100%; border-left: 0; border-right: 1px solid #eee; box-shadow: -8px 14px 30px rgba(0, 0, 0, .16); }
  .elx-t.elx-inline > .elx-t-sub { position: static; width: auto; box-shadow: none; border: 0; padding: 0 0 6px 26px !important; }
  .elx-t.is-open > .elx-t-sub { display: block; }
  .elx-t-sub a { padding-left: 18px !important; }
  .elx-t-img { flex: 0 0 44px; width: 44px; height: 44px; object-fit: contain; background: #fff; }
  .elx-t-sub .elx-t-img { flex-basis: 40px; width: 40px; height: 40px; }
  .elx-t-sub a { display: flex; align-items: center; gap: 12px; padding: 5px 22px 5px 44px; color: #444; font-size: 14px; }
  .elx-t-sub a:hover { color: #000; background: #f3f3f3; }
  .elx-t-sub a.is-active { color: #000; font-weight: 700; box-shadow: inset 3px 0 0 #000; }
  @media (prefers-reduced-motion: reduce) { .elx-pm-btn::after, .elx-t-tog::before { transition: none; } }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .elx-top { gap: 22px; }
  .elx-info, .elx-pm-btn { font-size: 15px; }
}