/* =========================================================
   v2.5.4 — Category arrow click fix + fitted mobile category panel
   ---------------------------------------------------------
   - Subcategories open only from arrow click, never from hover.
   - The clicked/open state now wins over :hover and :focus-within.
   - Mobile drawer displays only product categories and fits inside viewport.
   ========================================================= */

body.vlg-theme .vlg-cat-subtoggle,
body.vlg-theme .vlg-cat-subtoggle * {
  pointer-events: auto !important;
  user-select: none !important;
}

body.vlg-theme .vlg-category-dropdown,
body.vlg-theme .vlg-cat-dropdown-list,
body.vlg-theme .vlg-cat-tree {
  overflow-x: hidden !important;
}

/* Desktop/tablet: keep hover/focus closed unless the arrow-click class exists. */
@media (min-width: 783px) {
  body.vlg-theme .vlg-cat-submenu-mode-accordion .vlg-cat-item.has-children:not(.is-sub-open):hover > .vlg-cat-submenu,
  body.vlg-theme .vlg-cat-submenu-mode-accordion .vlg-cat-item.has-children:not(.is-sub-open):focus-within > .vlg-cat-submenu {
    display: none !important;
  }

  body.vlg-theme .vlg-cat-submenu-mode-accordion .vlg-cat-item.has-children.is-sub-open > .vlg-cat-submenu,
  body.vlg-theme .vlg-cat-submenu-mode-accordion .vlg-cat-item.has-children.is-sub-open:hover > .vlg-cat-submenu,
  body.vlg-theme .vlg-cat-submenu-mode-accordion .vlg-cat-item.has-children.is-sub-open:focus-within > .vlg-cat-submenu,
  body.vlg-theme .vlg-cat-submenu-mode-accordion .vlg-cat-item.has-children.is-sub-open > .vlg-cat-submenu.is-open {
    position: static !important;
    display: grid !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    max-height: none !important;
    gap: 6px !important;
    margin: 7px 0 8px 14px !important;
    padding: 0 0 0 11px !important;
    border: 0 !important;
    border-left: 2px solid rgba(242, 138, 0, .24) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body.vlg-theme .vlg-cat-submenu-mode-accordion .vlg-cat-item.has-children.is-sub-open > .vlg-cat-row .vlg-cat-link,
  body.vlg-theme .vlg-cat-submenu-mode-accordion .vlg-cat-item.has-children.is-sub-open:hover > .vlg-cat-row .vlg-cat-link,
  body.vlg-theme .vlg-cat-submenu-mode-accordion .vlg-cat-item.has-children.is-sub-open:focus-within > .vlg-cat-row .vlg-cat-link {
    background: #fff5e8 !important;
    color: var(--vlg-primary, #f28a00) !important;
  }

  body.vlg-theme .vlg-cat-submenu-mode-accordion .vlg-cat-item.has-children.is-sub-open > .vlg-cat-row .vlg-cat-subtoggle span,
  body.vlg-theme .vlg-cat-submenu-mode-accordion .vlg-cat-item.has-children.is-sub-open:hover > .vlg-cat-row .vlg-cat-subtoggle span,
  body.vlg-theme .vlg-cat-submenu-mode-accordion .vlg-cat-item.has-children.is-sub-open:focus-within > .vlg-cat-row .vlg-cat-subtoggle span {
    transform: rotate(180deg) !important;
  }
}

/* Mobile: use a bottom-sheet style drawer so it cannot stay hidden above the screen. */
@media (max-width: 900px) {
  body.vlg-theme .vlg-nav.is-open,
  body.vlg-theme.vlg-menu-open .vlg-nav.is-open {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    top: auto !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    height: min(82vh, 680px) !important;
    max-height: calc(100vh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom))) !important;
    width: auto !important;
    overflow: hidden !important;
    z-index: 100010 !important;
  }

  @supports (height: 100dvh) {
    body.vlg-theme .vlg-nav.is-open,
    body.vlg-theme.vlg-menu-open .vlg-nav.is-open {
      height: min(82dvh, 680px) !important;
      max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    }
  }

  body.admin-bar.vlg-theme .vlg-nav.is-open,
  body.admin-bar.vlg-theme.vlg-menu-open .vlg-nav.is-open {
    top: auto !important;
  }

  body.vlg-theme .vlg-nav.is-open .vlg-nav-inner,
  body.vlg-theme.vlg-menu-open .vlg-nav.is-open .vlg-nav-inner {
    height: calc(100% - 21px) !important;
    min-height: 0 !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  body.vlg-theme .vlg-nav.is-open .vlg-mobile-nav-head strong::after {
    content: "" !important;
  }

  body.vlg-theme .vlg-nav.is-open .vlg-mobile-nav-head strong {
    font-size: 18px !important;
  }

  body.vlg-theme .vlg-nav.is-open .vlg-mobile-nav-head span {
    display: none !important;
  }

  body.vlg-theme .vlg-nav.is-open .vlg-mobile-nav-head strong::before {
    content: "Tootekategooriad" !important;
  }

  body.vlg-theme .vlg-nav.is-open .vlg-mobile-nav-head strong {
    font-size: 0 !important;
  }

  body.vlg-theme .vlg-nav.is-open .vlg-mobile-nav-head strong::before {
    font-size: 18px !important;
  }

  /* Show only product categories in the mobile drawer. */
  body.vlg-theme .vlg-nav.is-open .vlg-mobile-quick-links,
  body.vlg-theme .vlg-nav.is-open .vlg-primary-menu {
    display: none !important;
  }

  body.vlg-theme .vlg-nav.is-open .vlg-category-menu,
  body.vlg-theme.vlg-menu-open .vlg-nav.is-open .vlg-category-menu {
    grid-template-rows: minmax(0, 1fr) !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.vlg-theme .vlg-nav.is-open .vlg-category-button,
  body.vlg-theme.vlg-menu-open .vlg-nav.is-open .vlg-category-button {
    display: none !important;
  }

  body.vlg-theme .vlg-nav.is-open .vlg-category-dropdown,
  body.vlg-theme.vlg-menu-open .vlg-nav.is-open .vlg-category-dropdown {
    display: block !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body.vlg-theme .vlg-nav.is-open .vlg-cat-tree {
    height: 100% !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 8px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.vlg-theme .vlg-nav.is-open .vlg-cat-item.has-children.is-sub-open > .vlg-cat-submenu,
  body.vlg-theme .vlg-nav.is-open .vlg-cat-item.has-children.is-sub-open:hover > .vlg-cat-submenu,
  body.vlg-theme .vlg-nav.is-open .vlg-cat-item.has-children.is-sub-open:focus-within > .vlg-cat-submenu,
  body.vlg-theme .vlg-nav.is-open .vlg-cat-item.has-children.is-sub-open > .vlg-cat-submenu.is-open {
    position: static !important;
    display: grid !important;
    gap: 6px !important;
    width: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    margin: 7px 0 7px 14px !important;
    padding: 0 0 0 10px !important;
    border: 0 !important;
    border-left: 2px solid rgba(242, 138, 0, .24) !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

@media (max-width: 430px) {
  body.vlg-theme .vlg-nav.is-open,
  body.vlg-theme.vlg-menu-open .vlg-nav.is-open {
    left: 6px !important;
    right: 6px !important;
    bottom: max(6px, env(safe-area-inset-bottom)) !important;
    height: min(86vh, 680px) !important;
  }

  @supports (height: 100dvh) {
    body.vlg-theme .vlg-nav.is-open,
    body.vlg-theme.vlg-menu-open .vlg-nav.is-open {
      height: min(86dvh, 680px) !important;
    }
  }
}