/* ZooMag final responsive menu + mobile category fix
   2026-04-25
   Purpose:
   - desktop menu width matches the wider site;
   - desktop dropdowns are always fully visible in viewport;
   - mobile menu/submenu becomes a real full-height drawer;
   - category pages on phones do not start with a giant vertical gap / left sidebar list.
*/

:root {
  --zm-wide-site-max: 1720px;
  --zm-wide-site-pad: 18px;
  --zm-menu-dropdown-width: 680px;
}

/* ==============================
   Desktop menu width
   ============================== */
.main-menu,
body.zoomag-2026 .main-menu {
  width: 100% !important;
  max-width: none !important;
  overflow: visible !important;
}

.main-menu .menu-list,
body.zoomag-2026 .main-menu .menu-list {
  width: min(calc(100vw - (var(--zm-wide-site-pad) * 2)), var(--zm-wide-site-max)) !important;
  max-width: var(--zm-wide-site-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  gap: 12px !important;
  align-items: stretch !important;
}

@media (min-width: 1680px) {
  :root { --zm-wide-site-max: 1820px; --zm-menu-dropdown-width: 760px; }

  .main-menu .menu-list,
  body.zoomag-2026 .main-menu .menu-list {
    gap: 14px !important;
  }
}

/* keep item text readable after widening */
.main-menu .menu-link,
body.zoomag-2026 .main-menu .menu-link {
  min-height: 78px !important;
  padding: 13px 13px 14px !important;
}

.main-menu .menu-text,
body.zoomag-2026 .main-menu .menu-text {
  font-size: clamp(14px, .88vw, 16px) !important;
  white-space: nowrap !important;
}

.main-menu .menu-link-promo,
body.zoomag-2026 .main-menu .menu-link-promo {
  font-size: clamp(9px, .62vw, 11px) !important;
}

/* ==============================
   Desktop dropdowns: viewport-fixed, never clipped
   ============================== */
@media (min-width: 992px) {
  .main-menu .submenu-container,
  body.zoomag-2026 .main-menu .submenu-container {
    position: fixed !important;
    top: var(--zm-submenu-top, 150px) !important;
    left: var(--zm-submenu-left, 16px) !important;
    right: auto !important;
    width: min(var(--zm-menu-dropdown-width), calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    transform: translateY(10px) !important;
    z-index: 2147483621 !important;
  }

  .main-menu .menu-item.is-open > .submenu-container,
  .main-menu .menu-item:focus-within > .submenu-container,
  body.zoomag-2026 .main-menu .menu-item.is-open > .submenu-container,
  body.zoomag-2026 .main-menu .menu-item:focus-within > .submenu-container {
    transform: translateY(0) !important;
  }

  .main-menu .menu-item--start > .submenu-container,
  .main-menu .menu-item--center > .submenu-container,
  .main-menu .menu-item--end > .submenu-container,
  body.zoomag-2026 .main-menu .menu-item--start > .submenu-container,
  body.zoomag-2026 .main-menu .menu-item--center > .submenu-container,
  body.zoomag-2026 .main-menu .menu-item--end > .submenu-container {
    transform: translateY(10px) !important;
  }

  .main-menu .submenu-content,
  body.zoomag-2026 .main-menu .submenu-content {
    max-height: calc(100dvh - var(--zm-submenu-top, 150px) - 16px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  .main-menu .submenu-grid,
  body.zoomag-2026 .main-menu .submenu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .main-menu .submenu-link,
  body.zoomag-2026 .main-menu .submenu-link {
    min-height: 54px !important;
  }
}

@media (max-width: 1360px) and (min-width: 992px) {
  .main-menu .menu-list,
  body.zoomag-2026 .main-menu .menu-list {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* ==============================
   Mobile menu: real drawer, fully visible
   ============================== */
@media (max-width: 991px) {
  html.zm-mobile-menu-open,
  body.zm-mobile-menu-open,
  body.navbar-menu-active {
    overflow: hidden !important;
    touch-action: none;
  }

  .main-menu .menu-overlay,
  body.zoomag-2026 .main-menu .menu-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483640 !important;
    background: rgba(32, 22, 14, 0.42) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }

  .main-menu .menu-overlay.active,
  body.zoomag-2026 .main-menu .menu-overlay.active {
    display: block !important;
  }

  .main-menu .menu-container,
  body.zoomag-2026 .main-menu .menu-container {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: min(430px, 94vw) !important;
    max-width: 94vw !important;
    height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: #fffaf4 !important;
    border-radius: 0 24px 24px 0 !important;
    z-index: 2147483641 !important;
  }

  .main-menu .mobile-menu-header,
  body.zoomag-2026 .main-menu .mobile-menu-header {
    flex: 0 0 auto !important;
    min-height: 68px !important;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px !important;
  }

  .main-menu .mobile-menu-list,
  body.zoomag-2026 .main-menu .mobile-menu-list {
    flex: 1 1 auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 12px 14px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    overscroll-behavior: contain !important;
  }

  .main-menu .mobile-menu-link,
  .main-menu .mobile-submenu-link,
  body.zoomag-2026 .main-menu .mobile-menu-link,
  body.zoomag-2026 .main-menu .mobile-submenu-link {
    min-height: 52px !important;
    padding: 11px 12px !important;
  }

  .main-menu .mobile-submenu,
  body.zoomag-2026 .main-menu .mobile-submenu {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    background: #fffaf4 !important;
    transform: translateX(104%) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    transition: transform .24s ease !important;
    padding: 0 !important;
    border-radius: 0 24px 24px 0 !important;
    z-index: 2 !important;
  }

  .main-menu .mobile-submenu.active,
  body.zoomag-2026 .main-menu .mobile-submenu.active {
    transform: translateX(0) !important;
    pointer-events: auto !important;
  }

  .main-menu .mobile-submenu-header,
  body.zoomag-2026 .main-menu .mobile-submenu-header {
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 68px !important;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 14px 12px !important;
    background: rgba(255,250,244,.98) !important;
    border-bottom: 1px solid #eadcc9 !important;
  }

  .main-menu .mobile-submenu-title,
  body.zoomag-2026 .main-menu .mobile-submenu-title {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    color: #5a4534 !important;
  }

  .main-menu .mobile-submenu-content,
  body.zoomag-2026 .main-menu .mobile-submenu-content {
    flex: 1 1 auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 12px 14px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    display: grid !important;
    align-content: start !important;
    gap: 9px !important;
    overscroll-behavior: contain !important;
  }
}

/* ==============================
   Category mobile: remove giant vertical gap
   ============================== */
@media (max-width: 991px) {
  body[class*="product-category"] .main-menu,
  body[class*="product-category"] #product-category,
  body[class*="product-category"] .zoomag-category-page,
  body[class*="product-category"] .zm-category-native-layout {
    margin-top: 0 !important;
  }

  #product-category.zoomag-category-page,
  .zoomag-category-page,
  .zm-category-native-layout {
    padding-top: 8px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .zoomag-animated-background,
  .zoomag-title-decoration,
  .zoomag-divider,
  .zoomag-paw-divider {
    display: none !important;
  }

  .zm-category-native-grid,
  #product-category .row.g-4,
  #product-category .row {
    display: block !important;
    margin-top: 0 !important;
    row-gap: 0 !important;
  }

  /* The left desktop category rail becomes a huge wall on phones — hide it. */
  #product-category #column-left,
  #product-category .column-left,
  #product-category .zm-category-left,
  #product-category .zm-left-category-menu,
  #product-category .zm-side-categories,
  #product-category aside[class*="left"] {
    display: none !important;
  }

  #product-category #content,
  #product-category .zoomag-category-content {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 0 !important;
  }

  .zoomag-category-header {
    margin: 8px 0 12px !important;
    padding: 14px 14px !important;
    min-height: 0 !important;
    border-radius: 18px !important;
  }

  .zoomag-category-title {
    font-size: clamp(22px, 7vw, 34px) !important;
    line-height: 1.08 !important;
    margin: 0 !important;
  }

  .zoomag-category-title-wrapper {
    min-height: 0 !important;
    gap: 10px !important;
  }

  .zoomag-category-stats,
  .zoomag-category-icon,
  .zoomag-category-thumb {
    display: none !important;
  }

  .zoomag-category-accordion,
  .zoomag-subcategories-section,
  .zoomag-controls-panel,
  .zoomag-products-container,
  .zoomag-products-footer {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
  }

  .zoomag-controls-panel {
    padding: 12px !important;
    border-radius: 18px !important;
  }

  .zoomag-controls-panel .row,
  .zoomag-controls-panel [class*="col-"] {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .zoomag-controls-panel .row.g-3 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  #column-right,
  .zm-category-right,
  .zm-filter-rail,
  #zm-filter-rail,
  [data-zm-filter-role="main"] {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    margin: 12px 0 !important;
  }

  .zoomag-products-container,
  #product-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

@media (max-width: 575px) {
  .main-menu .menu-container,
  body.zoomag-2026 .main-menu .menu-container {
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
  }

  .main-menu .mobile-submenu,
  body.zoomag-2026 .main-menu .mobile-submenu {
    border-radius: 0 !important;
  }
}