/*
 * Sepahan 2.2.4 - desktop mega menu four-column and viewport scroll fix.
 * Theme version intentionally remains unchanged.
 */
@media (min-width: 1280px) {
  #mega-menu-fire-target.sepahan-shop-mega-panel {
    width: min(1240px, calc(100vw - 24px)) !important;
    min-width: min(1180px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
  }

  #mega-menu-fire-target > .sepahan-mega-box {
    width: 100% !important;
    max-width: none !important;
  }

  #mega-menu-fire-target > .sepahan-mega-box > .flex {
    width: 100% !important;
    min-height: 0 !important;
    height: min(560px, var(--sepahan-mega-available-height, 560px)) !important;
    max-height: var(--sepahan-mega-available-height, 560px) !important;
    align-items: stretch !important;
  }

  #mega-menu-fire-target .sepahan-mega-tabs {
    flex: 0 0 240px !important;
    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scroll-behavior: smooth !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 139, .48) transparent;
  }

  #mega-menu-fire-target .sepahan-mega-contents {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scroll-behavior: smooth !important;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(59, 130, 246, .55) transparent;
    -webkit-overflow-scrolling: touch;
  }

  #mega-menu-fire-target .sepahan-mega-content {
    padding: 28px 30px 40px !important;
  }

  #mega-menu-fire-target .sepahan-mega-categories-grid,
  #mega-menu-fire-target .sepahan-mega-content > .grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    column-gap: clamp(22px, 2.35vw, 38px) !important;
    row-gap: 48px !important;
    align-items: start !important;
    width: 100% !important;
  }

  #mega-menu-fire-target .sepahan-mega-categories-grid > *,
  #mega-menu-fire-target .sepahan-mega-content > .grid > * {
    min-width: 0 !important;
  }

  /* The fifth category starts the second row; keep it clearly separated. */
  #mega-menu-fire-target .sepahan-mega-categories-grid > :nth-child(n + 5),
  #mega-menu-fire-target .sepahan-mega-content > .grid > :nth-child(n + 5) {
    padding-top: 8px !important;
  }

  #mega-menu-fire-target .sepahan-mega-categories-grid a,
  #mega-menu-fire-target .sepahan-mega-content > .grid a {
    overflow-wrap: anywhere;
  }

  #mega-menu-fire-target .sepahan-mega-tabs::-webkit-scrollbar,
  #mega-menu-fire-target .sepahan-mega-contents::-webkit-scrollbar {
    width: 7px;
  }

  #mega-menu-fire-target .sepahan-mega-tabs::-webkit-scrollbar-track,
  #mega-menu-fire-target .sepahan-mega-contents::-webkit-scrollbar-track {
    background: transparent;
  }

  #mega-menu-fire-target .sepahan-mega-tabs::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, .42);
    border-radius: 999px;
  }

  #mega-menu-fire-target .sepahan-mega-contents::-webkit-scrollbar-thumb {
    background: rgba(59, 130, 246, .5);
    border-radius: 999px;
  }

  html.dark #mega-menu-fire-target .sepahan-mega-tabs,
  body.dark #mega-menu-fire-target .sepahan-mega-tabs,
  html.dark #mega-menu-fire-target .sepahan-mega-contents,
  body.dark #mega-menu-fire-target .sepahan-mega-contents {
    scrollbar-color: rgba(96, 165, 250, .58) transparent;
  }
}

@media (min-width: 1280px) and (max-width: 1399px) {
  #mega-menu-fire-target .sepahan-mega-tabs {
    flex-basis: 225px !important;
    width: 225px !important;
    min-width: 225px !important;
    max-width: 225px !important;
  }

  #mega-menu-fire-target .sepahan-mega-content {
    padding-inline: 24px !important;
  }

  #mega-menu-fire-target .sepahan-mega-categories-grid,
  #mega-menu-fire-target .sepahan-mega-content > .grid {
    column-gap: 20px !important;
  }
}