/* Mega menu for the shop sections. Desktop: panel under the header.
   Below 1200 px: drill-down levels inside the hamburger menu.
   Markup: catalog/view/template/common/menu.twig. */

.st-mega,
.st-mega-sub { display: none; }

.st-nav-section.is-open > .st-mega { display: block; }

.st-mega a { text-decoration: none; }

.st-mega-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
}

.st-mega-ico img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.st-mega-ico.is-empty {
  background: var(--st-soft);
  border: 1px dashed #c9cfd2;
  color: #a3acb0;
}

.st-mega-title { color: var(--st-ink); }

.st-mega-title:hover,
.st-mega-title:focus-visible { color: var(--st-navy); }

@media (min-width: 1200px) {
  /* The panel spans the whole header, so it is positioned against it, not the item. */
  .st-header { position: relative; }
  .st-nav-list > li.st-nav-section { position: static; }

  .st-nav-section > .st-nav-item > .st-nav-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 28px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
  }

  .st-nav-section > .st-nav-item > .st-nav-more::before {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    opacity: .6;
  }

  .st-nav-section.is-open > .st-nav-item > .st-nav-more::before {
    transform: translateY(2px) rotate(-135deg);
  }

  .st-nav-section > .st-nav-item > .st-nav-link:hover,
  .st-nav-section.is-open > .st-nav-item > .st-nav-link { color: var(--st-navy); }

  /* The link fills the nav row (60px less its 1px top border) with the text kept on the
     row's centre line, so the underline sits on the panel's top edge. The border is
     always there and only changes colour, so opening a panel shifts nothing. */
  .st-nav-section > .st-nav-item > .st-nav-link {
    padding: 15.5px 0 12.5px;
    border-bottom: 3px solid transparent;
  }

  /* The hovered link and the section whose panel is open are marked (the mark stays while
     the pointer moves through the panel); the current page's section looks like the rest. */
  .st-nav-section > .st-nav-item > .st-nav-link:hover,
  .st-nav-section.is-open > .st-nav-item > .st-nav-link { border-bottom-color: var(--st-navy); }
  .st-nav-list > li.st-nav-section.is-current > .st-nav-item > .st-nav-link { font-weight: 400; }

  /* Vína Baravin leaves the shop: a separate boxed link pushed to the right end of the row. */
  /* The logo PNG is drawn ~18px in from its box (transparent edge); the menu starts on
     the same line as the visible logo. */
  .st-nav-list { width: 100%; padding-left: 18px; }
  .st-nav-list > li.st-nav-baravin { margin-left: auto; }

  .st-nav-list > li.st-nav-baravin > .st-nav-item > .st-nav-link {
    padding: 6px 16px;
    border: 1px solid var(--st-navy);
    border-radius: 6px;
    color: var(--st-navy);
    font-weight: 600;
    transition: background-color .15s ease, color .15s ease;
  }

  .st-nav-list > li.st-nav-baravin > .st-nav-item > .st-nav-link:hover,
  .st-nav-list > li.st-nav-baravin > .st-nav-item > .st-nav-link:focus-visible {
    background: var(--st-navy);
    color: #fff;
  }

  .st-mega {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    background: #fff;
    border-top: 1px solid var(--st-line);
    box-shadow: 0 18px 40px rgba(20, 20, 60, .12);
  }

  /* Opening fades the panel in; moving straight to another section swaps it without
     the fade (is-switching), so the page underneath never flashes through. */
  .st-nav-section.is-open > .st-mega { animation: st-mega-in .15s ease-out; }
  .st-nav-list.is-switching > .st-nav-section.is-open > .st-mega { animation: none; }

  .st-nav-section > .st-nav-item > .st-nav-link { transition: color .15s ease, border-color .15s ease; }
  .st-nav-section > .st-nav-item > .st-nav-more::before { transition: transform .2s ease; }
  .st-mega-title,
  .st-mega-list a { transition: color .15s ease; }

  .st-mega-head,
  .st-mega-open,
  .st-mega-sub { display: none; }

  .st-mega-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 40px;
    width: min(var(--st-max), calc(100% - 96px));
    margin: 0 auto;
    padding: 24px 0 28px;
  }

  .st-mega-card {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: 16px;
    align-items: start;
    padding: 18px 0;
    border-bottom: 1px solid var(--st-line);
  }

  .st-mega-title {
    display: block;
    margin: 2px 0 6px;
    font-size: 16px;
    line-height: 22px;
    font-weight: 700;
  }

  .st-mega-list {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--st-muted);
  }

  .st-mega-list a { color: var(--st-muted); }

  .st-mega-list a:hover,
  .st-mega-list a:focus-visible {
    color: var(--st-navy);
    text-decoration: underline;
  }
}

@media (max-width: 1199px) {
  /* An open section replaces the whole list; an open card replaces the section. */
  .st-nav-list.is-drilled > li:not(.is-open),
  .st-nav-section.is-open > .st-nav-item,
  .st-mega.is-drilled > .st-mega-head,
  .st-mega.is-drilled .st-mega-card:not(.is-open),
  .st-mega-card.is-open > .st-mega-ico,
  .st-mega-card.is-open .st-mega-title,
  .st-mega-card.is-open .st-mega-open,
  .st-mega-list { display: none; }

  .st-nav-section > .st-nav-item > .st-nav-more::before {
    transform: rotate(-45deg);
    margin-top: 0;
  }

  .st-mega-back {
    display: block;
    width: 100%;
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid var(--st-line);
    background: none;
    color: var(--st-muted);
    font-size: 14px;
    line-height: 20px;
    text-align: left;
    cursor: pointer;
  }

  .st-mega-all {
    display: block;
    padding: 12px;
    background: var(--st-soft);
    color: var(--st-navy);
    font-weight: 600;
    line-height: 20px;
  }

  .st-mega-card {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--st-line);
  }

  .st-mega-ico {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
  }

  .st-mega-ico svg {
    width: 18px;
    height: 18px;
  }

  .st-mega-body {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
  }

  .st-mega-title {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 0;
    font-size: 16px;
    line-height: 20px;
  }

  .st-mega-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--st-navy);
    cursor: pointer;
  }

  .st-mega-open::before {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
  }

  .st-mega-card.is-open,
  .st-mega-card.is-open .st-mega-body,
  .st-mega-card.is-open .st-mega-sub { display: block; }

  .st-mega-card.is-open { border-bottom: 0; }

  .st-mega-sub > a:not(.st-mega-all) {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--st-line);
    color: var(--st-ink);
    font-size: 16px;
    line-height: 20px;
  }
}

/* Shop category sidebar: the tree of the current section, its current branch open. */
.st-tree ul { list-style: none; margin: 0; padding: 0; }
.st-tree-toggle { display: none; }
.st-tree > ul > .st-tree-item { border-bottom: 1px solid var(--st-line); }

.st-tree-row {
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 8px;
}

.st-tree-row > a {
  flex: 1;
  min-width: 0;
  padding: 11px 12px;
  color: var(--st-ink);
  text-decoration: none;
  font-size: 16px;
  line-height: 22px;
}

.st-tree-row > a:hover,
.st-tree-item.is-open > .st-tree-row > a { color: var(--st-navy); }
.st-tree-item.is-open > .st-tree-row > a { font-weight: 600; }

.st-tree-item.is-active > .st-tree-row {
  border-radius: 0 8px 8px 0;
  background: var(--st-soft);
  box-shadow: inset 3px 0 0 var(--st-navy);
}

.st-tree-item.is-active > .st-tree-row > a { color: var(--st-navy); font-weight: 700; }

.st-tree-item > ul {
  display: none;
  margin: 0 0 8px 12px;
  padding-left: 8px;
  border-left: 1px solid #dfe3e5;
}

.st-tree-item.is-open > ul { display: block; }
/* Animated only when the visitor opens a branch, not for the branch open on page load. */
.st-tree-item.is-open.is-toggled > ul { animation: st-tree-in .18s ease-out; }
.st-tree-item ul .st-tree-row > a { padding: 7px 12px; font-size: 14px; line-height: 20px; }
.st-tree-item ul ul .st-tree-row > a { color: var(--st-muted); }
.st-tree-item ul ul .st-tree-item.is-active > .st-tree-row > a { color: var(--st-navy); }

/* Plus and minus drawn from two bars; opening fades the vertical bar out. */
.st-tree-pm {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--st-ink);
  cursor: pointer;
}

.st-tree-pm:hover,
.st-tree-pm:focus-visible { background: var(--st-soft); color: var(--st-navy); }
.st-tree-item.is-active > .st-tree-row > .st-tree-pm:hover { background: #e3e6e8; }

.st-tree-pm::before,
.st-tree-pm::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  margin: -1px 0 0 -6px;
  border-radius: 1px;
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}

.st-tree-pm::after { transform: rotate(90deg); }
.st-tree-item.is-open > .st-tree-row > .st-tree-pm::after { transform: rotate(180deg); opacity: 0; }
.st-tree-item.is-open > .st-tree-row > .st-tree-pm { color: var(--st-navy); }

@keyframes st-tree-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

@keyframes st-mega-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .st-tree-item.is-open.is-toggled > ul,
  .st-nav-section.is-open > .st-mega { animation: none; }
  .st-tree-pm::before,
  .st-tree-pm::after,
  .st-nav-section > .st-nav-item > .st-nav-link,
  .st-nav-section > .st-nav-item > .st-nav-more::before { transition: none; }
}

/* Below 1200 the sidebar sits above the products: one "Kategorie" button opens the tree. */
@media (max-width: 1199px) {
  .st-tree-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--st-line);
    border-radius: 8px;
    background: #fff;
    color: var(--st-ink);
    font-size: 16px;
    font-weight: 600;
  }

  .st-tree-toggle::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .2s ease;
  }

  .st-tree.is-open > .st-tree-toggle::after { transform: translateY(2px) rotate(-135deg); }
  .st-tree > ul { display: none; margin-top: 8px; }
  .st-tree.is-open > ul { display: block; }
}