/* Shared luxury mobile navigation. Loaded after all page-specific styles. */
@media (max-width: 1024px) {
  body.sepid-solar-shell .mobile-menu {
    --mm-gold: #eeb94c;
    --mm-gold-soft: #d6ae69;
    --mm-cream: #f3eee4;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;
    width: min(340px, calc(100vw - 28px)) !important;
    height: 100dvh !important;
    inline-size: min(340px, calc(100vw - 28px)) !important;
    block-size: 100dvh !important;
    z-index: 1000001 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-left: 1px solid rgba(238, 185, 76, .34) !important;
    border-radius: 0 !important;
    background:
      radial-gradient(circle at 82% -4%, rgba(238, 185, 76, .14), transparent 31%),
      linear-gradient(165deg, #121720 0%, #0b0e14 48%, #07090d 100%) !important;
    box-shadow: -24px 0 72px rgba(0, 0, 0, .62), inset 1px 0 rgba(255, 255, 255, .025) !important;
    transform: translate3d(105%, 0, 0) !important;
    transition: transform .36s cubic-bezier(.22, .72, .2, 1) !important;
    isolation: isolate;
  }

  body.sepid-solar-shell .mobile-menu::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    opacity: .42;
    background:
      linear-gradient(115deg, transparent 0 47%, rgba(238, 185, 76, .035) 47.2% 47.6%, transparent 47.8%),
      radial-gradient(circle at 18% 76%, rgba(238, 185, 76, .075), transparent 28%);
  }

  body.sepid-solar-shell .mobile-menu.active {
    right: 0 !important;
    left: auto !important;
    transform: translate3d(0, 0, 0) !important;
  }

  body.sepid-solar-shell.mobile-menu-open .sepidsolar-shadow {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1000000 !important;
    background: rgba(2, 3, 5, .62) !important;
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-backdrop-filter: blur(8px) saturate(75%) !important;
    backdrop-filter: blur(8px) saturate(75%) !important;
  }

  body.sepid-solar-shell .mobile-menu-wrapper {
    position: relative;
    display: flex !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    block-size: 100dvh !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: transparent !important;
    font-family: inherit !important;
  }

  body.sepid-solar-shell .mobile-menu-wrapper .top {
    position: relative;
    display: flex !important;
    height: 88px !important;
    min-height: 88px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 58px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(238, 185, 76, .16) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012)) !important;
  }

  body.sepid-solar-shell .mobile-menu-close {
    position: absolute !important;
    top: 50% !important;
    left: 16px !important;
    z-index: 2;
    display: grid !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    place-items: center;
    overflow: visible !important;
    clip: auto !important;
    border: 1px solid rgba(238, 185, 76, .24) !important;
    border-radius: 11px !important;
    background: rgba(238, 185, 76, .055) !important;
    color: rgba(243, 238, 228, .72) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .04);
    transform: translateY(-50%);
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
  }

  body.sepid-solar-shell .mobile-menu-close:hover,
  body.sepid-solar-shell .mobile-menu-close:focus-visible {
    border-color: rgba(238, 185, 76, .58) !important;
    background: rgba(238, 185, 76, .12) !important;
    color: var(--mm-gold) !important;
    transform: translateY(-50%) rotate(90deg);
  }

  body.sepid-solar-shell .mobile-menu-wrapper .top.mobile-menu-brand-only .site-logo,
  body.sepid-solar-shell .mobile-menu-wrapper .top .site-logo {
    position: relative !important;
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
    height: 56px !important;
    inline-size: auto !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--mm-cream) !important;
    text-decoration: none !important;
  }

  body.sepid-solar-shell .mobile-menu-wrapper .top .site-logo::after {
    content: none !important;
    display: none !important;
  }

  body.sepid-solar-shell .mobile-menu-wrapper .top .site-logo img,
  body.sepid-solar-shell .mobile-menu-wrapper .top .site-logo .custom-logo {
    display: block !important;
    width: auto !important;
    max-width: 132px !important;
    height: 54px !important;
    object-fit: contain !important;
  }

  body.sepid-solar-shell .mobile-menu-brand__mark {
    width: 39px !important;
    height: 39px !important;
    flex: 0 0 39px !important;
    color: var(--mm-gold) !important;
    filter: drop-shadow(0 0 8px rgba(238, 185, 76, .13));
  }

  body.sepid-solar-shell .mobile-menu-brand__text b {
    color: var(--mm-cream) !important;
    font-size: 19px !important;
  }

  body.sepid-solar-shell .mobile-menu-brand__text small {
    color: var(--mm-gold) !important;
  }

  body.sepid-solar-shell .mobile-menu-wrapper .main {
    display: flex !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  body.sepid-solar-shell .mobile-menu-wrapper .main > nav.menu {
    position: relative;
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    inline-size: 100% !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 18px 16px 12px !important;
    overflow: hidden !important;
  }

  body.sepid-solar-shell .mobile-menu-wrapper .main > nav.menu > div {
    width: 100% !important;
    min-height: 0 !important;
    inline-size: 100% !important;
  }

  body.sepid-solar-shell .mobile-menu-wrapper ul.menu {
    display: flex !important;
    width: 100% !important;
    max-height: calc(100dvh - 250px) !important;
    height: auto !important;
    min-height: 0 !important;
    inline-size: 100% !important;
    block-size: auto !important;
    flex-direction: column !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 2px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    list-style: none !important;
    scrollbar-color: rgba(238, 185, 76, .42) transparent;
    scrollbar-width: thin;
  }

  body.sepid-solar-shell .mobile-menu-wrapper ul,
  body.sepid-solar-shell .mobile-menu-wrapper li {
    margin: 0 !important;
    list-style: none !important;
  }

  body.sepid-solar-shell .mobile-menu-wrapper ul.menu > li {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
  }

  body.sepid-solar-shell .mobile-menu-wrapper ul.menu > li > a {
    position: relative;
    display: flex !important;
    width: 100% !important;
    min-height: 46px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 10px 14px !important;
    border: 1px solid rgba(255, 255, 255, .045) !important;
    border-radius: 13px !important;
    background: rgba(255, 255, 255, .018) !important;
    color: rgba(243, 238, 228, .84) !important;
    font-family: inherit !important;
    font-size: 13.5px !important;
    font-weight: 750 !important;
    line-height: 1.55 !important;
    text-align: right !important;
    text-decoration: none !important;
    transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
  }

  body.sepid-solar-shell .mobile-menu-wrapper ul.menu > li.menu-item-has-children > a {
    padding-left: 42px !important;
  }

  body.sepid-solar-shell .mobile-menu-wrapper ul.menu > li > a::before,
  body.sepid-solar-shell .mobile-menu-wrapper ul.menu > li > a::after,
  body.sepid-solar-shell .mobile-menu-wrapper ul.menu > li:not(.menu-item-has-children)::before,
  body.sepid-solar-shell .mobile-menu-wrapper ul.menu > li::after {
    content: none !important;
    display: none !important;
  }

  body.sepid-solar-shell .mobile-menu-wrapper ul.menu > li.current-menu-item > a,
  body.sepid-solar-shell .mobile-menu-wrapper ul.menu > li.current-menu-ancestor > a,
  body.sepid-solar-shell .mobile-menu-wrapper ul.menu > li.active > a {
    border-color: rgba(238, 185, 76, .34) !important;
    background: linear-gradient(90deg, rgba(238, 185, 76, .035), rgba(238, 185, 76, .13)) !important;
    color: var(--mm-gold) !important;
    box-shadow: inset -2px 0 var(--mm-gold), 0 7px 18px rgba(0, 0, 0, .14) !important;
    transform: translateX(-2px);
  }

  body.sepid-solar-shell .mobile-menu-wrapper ul.menu > li > a:focus-visible {
    outline: 1px solid rgba(238, 185, 76, .55) !important;
    outline-offset: 2px;
  }

  body.sepid-solar-shell .mobile-menu-wrapper ul.menu > li.menu-item-has-children::before {
    content: "" !important;
    position: absolute !important;
    top: 18px !important;
    right: auto !important;
    left: 18px !important;
    z-index: 2;
    display: block !important;
    width: 7px !important;
    height: 7px !important;
    border: solid var(--mm-gold-soft) !important;
    border-width: 0 1.5px 1.5px 0 !important;
    background: transparent !important;
    transform: rotate(45deg) !important;
    transition: top .2s ease, transform .2s ease;
    pointer-events: none;
  }

  body.sepid-solar-shell .mobile-menu-wrapper ul.menu > li.menu-item-has-children.active::before {
    top: 21px !important;
    transform: rotate(225deg) !important;
  }

  body.sepid-solar-shell .mobile-menu-wrapper ul.menu li > ul.sub-menu {
    display: none !important;
    width: calc(100% - 12px) !important;
    margin: 7px 6px 2px !important;
    padding: 7px !important;
    border: 1px solid rgba(238, 185, 76, .13) !important;
    border-radius: 12px !important;
    background: rgba(0, 0, 0, .2) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .025) !important;
    list-style: none !important;
  }

  body.sepid-solar-shell .mobile-menu-wrapper ul.menu li.active > ul.sub-menu {
    display: grid !important;
    gap: 2px !important;
  }

  body.sepid-solar-shell .mobile-menu-wrapper ul.menu li ul.sub-menu li {
    display: block !important;
    padding: 0 !important;
  }

  body.sepid-solar-shell .mobile-menu-wrapper ul.menu li ul.sub-menu a {
    display: flex !important;
    width: 100% !important;
    min-height: 34px !important;
    align-items: center !important;
    padding: 6px 10px !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: rgba(243, 238, 228, .66) !important;
    font-size: 12.5px !important;
    font-weight: 650 !important;
    text-decoration: none !important;
  }

  body.sepid-solar-shell .mobile-menu-wrapper ul.menu li ul.sub-menu a:hover,
  body.sepid-solar-shell .mobile-menu-wrapper ul.menu li ul.sub-menu a:focus-visible {
    background: rgba(238, 185, 76, .075) !important;
    color: var(--mm-gold) !important;
  }

  body.sepid-solar-shell .mobile-menu-wrapper .shipping-costs {
    display: flex !important;
    width: 100% !important;
    min-height: 54px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    margin: auto 0 0 !important;
    padding: 9px 11px !important;
    border: 1px solid rgba(238, 185, 76, .16) !important;
    border-radius: 13px !important;
    background: linear-gradient(90deg, rgba(255, 255, 255, .018), rgba(238, 185, 76, .045)) !important;
    color: rgba(243, 238, 228, .74) !important;
    font-family: inherit !important;
    font-size: 11.5px !important;
    font-weight: 650 !important;
    line-height: 1.6 !important;
    text-align: right !important;
    text-decoration: none !important;
  }

  body.sepid-solar-shell .mobile-menu-wrapper .shipping-costs:hover {
    border-color: rgba(238, 185, 76, .34) !important;
    color: var(--mm-gold) !important;
  }

  body.sepid-solar-shell .mobile-menu-wrapper .shipping-costs svg {
    box-sizing: content-box;
    width: 19px !important;
    height: 19px !important;
    flex: 0 0 19px !important;
    padding: 6px;
    border: 1px solid rgba(238, 185, 76, .22);
    border-radius: 10px;
    color: var(--mm-gold) !important;
    stroke: currentColor !important;
  }

  body.sepid-solar-shell .mobile-menu-wrapper .bottom {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    block-size: auto !important;
    margin: 0 !important;
    padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.sepid-solar-shell .mobile-menu-wrapper .bottom a.my-account {
    display: flex !important;
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    block-size: 48px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 8px 14px !important;
    border: 1px solid rgba(238, 185, 76, .38) !important;
    border-radius: 13px !important;
    background: linear-gradient(100deg, rgba(238, 185, 76, .07), rgba(255, 255, 255, .025)) !important;
    color: var(--mm-cream) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .04), 0 8px 22px rgba(0, 0, 0, .16) !important;
    font-family: inherit !important;
    font-size: 13.5px !important;
    font-weight: 750 !important;
    text-decoration: none !important;
    transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
  }

  body.sepid-solar-shell .mobile-menu-wrapper .bottom a.my-account:hover,
  body.sepid-solar-shell .mobile-menu-wrapper .bottom a.my-account:focus-visible,
  body.sepid-solar-shell .mobile-menu-wrapper .bottom a.my-account.is-active {
    border-color: rgba(238, 185, 76, .72) !important;
    background: linear-gradient(135deg, #f2c45e, #c98e24) !important;
    color: #17120a !important;
    transform: translateY(-1px);
  }

  body.sepid-solar-shell .mobile-menu-wrapper .bottom svg {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
  }
}

@media (max-width: 380px) {
  body.sepid-solar-shell .mobile-menu {
    width: calc(100vw - 18px) !important;
    inline-size: calc(100vw - 18px) !important;
  }

  body.sepid-solar-shell .mobile-menu-wrapper .top {
    height: 82px !important;
    min-height: 82px !important;
  }

  body.sepid-solar-shell .mobile-menu-wrapper .main > nav.menu {
    padding-inline: 12px !important;
  }

  body.sepid-solar-shell .mobile-menu-wrapper .bottom {
    padding-inline: 12px !important;
  }
}

/* Keep the shared four-item mobile navigation visible on the homepage too. */
@media (max-width: 768px) {
  body.sepid-solar-home.solardev-bottom-menu {
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.sepid-solar-home .site-mobile-navbar {
    position: fixed !important;
    right: 14px !important;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    left: 14px !important;
    z-index: 999998 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0);
    transition: opacity .2s ease, transform .25s ease, visibility .2s ease;
  }

  body.sepid-solar-home .site-mobile-navbar .site-mobile-navbar-inner {
    min-height: 60px !important;
    padding: 6px !important;
    border: 1px solid rgba(238, 185, 76, .34) !important;
    border-radius: 20px !important;
    background:
      radial-gradient(circle at 50% 0, rgba(238, 185, 76, .08), transparent 54%),
      rgba(10, 13, 19, .94) !important;
    box-shadow: 0 15px 36px rgba(0, 0, 0, .46), inset 0 1px rgba(255, 255, 255, .045) !important;
    -webkit-backdrop-filter: blur(16px) saturate(80%) !important;
    backdrop-filter: blur(16px) saturate(80%) !important;
  }

  body.sepid-solar-home .site-mobile-navbar .site-menu {
    gap: 4px !important;
  }

  body.sepid-solar-home .site-mobile-navbar .site-menu li > a {
    min-height: 48px !important;
    padding: 4px 2px !important;
    border-radius: 14px !important;
    color: rgba(243, 238, 228, .68) !important;
  }

  body.sepid-solar-home .site-mobile-navbar .site-menu li > a.active,
  body.sepid-solar-home .site-mobile-navbar .site-menu li > a.is-active {
    background: linear-gradient(180deg, rgba(238, 185, 76, .14), rgba(238, 185, 76, .045)) !important;
    color: #f3cb75 !important;
    box-shadow: inset 0 0 0 1px rgba(238, 185, 76, .2) !important;
  }

  body.sepid-solar-home .site-mobile-navbar .site-menu li > a:focus-visible {
    outline: 1px solid rgba(238, 185, 76, .55) !important;
    outline-offset: -2px;
  }

  body.sepid-solar-home .site-mobile-navbar .site-menu li svg {
    width: 21px !important;
    height: 21px !important;
  }

  body.sepid-solar-home .site-mobile-navbar .site-menu li a > span:not(.mobile-nav-cart-count) {
    color: currentColor !important;
    font-size: 9.5px !important;
    font-weight: 750 !important;
  }

  body.sepid-solar-home .site-mobile-navbar .mobile-nav-cart-count {
    color: #17120a !important;
    background: #eeb94c !important;
    box-shadow: 0 0 0 2px #0a0d13 !important;
  }

  body.sepid-solar-shell.mobile-menu-open .site-mobile-navbar,
  body.sepid-solar-shell.mobile-menu-open .solardev-mobile-bottom,
  body.sepid-solar-home.mobile-menu-open .site-mobile-navbar {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(calc(100% + 24px));
  }
}

@media (max-width: 1024px) and (hover: hover) and (pointer: fine) {
  body.sepid-solar-shell .mobile-menu-wrapper ul.menu > li > a:hover {
    border-color: rgba(238, 185, 76, .22) !important;
    color: var(--mm-gold) !important;
  }
}