/**
 * Compact site header — all breakpoints.
 * Top utility stripe is off (filter: isarva_show_top_header).
 */

/* Default sticky offset guess; JS (isarva-sticky-header.js) overwrites live. */
:root {
  --isarva-header-offset: 112px;
}

@media (min-width: 1200px) {
  :root {
    --isarva-header-offset: 128px;
  }
}

/* Logo + search band */
#masthead #nav-main.navbar {
  padding-top: 0.95rem;
  padding-bottom: 0.95rem;
}

#masthead .site-logo img,
#masthead .navbar-brand img,
#masthead .logo.md,
#masthead .logo.xs {
  max-height: 56px;
  width: auto;
  height: auto;
}

#masthead .custom-search-input {
  padding: 8px 14px;
  font-size: 14px;
}

#masthead .custom-search-btn {
  padding: 8px 18px;
  margin: 4px;
  font-size: 14px;
}

/* Phone moved into main actions — soft mint chip */
#masthead .isarva-header-phone {
  gap: 0.45rem;
  color: #12301f;
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
  padding: 0.42rem 0.85rem;
  border-radius: 999px;
  background: #eef6f1;
  border: 1px solid rgba(0, 108, 52, 0.14);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

#masthead .isarva-header-phone svg {
  color: #006c34;
  flex-shrink: 0;
  transition: color 0.2s ease;
}

#masthead .isarva-header-phone:hover {
  color: #ffffff;
  background: #006c34;
  border-color: #006c34;
  text-decoration: none;
}

#masthead .isarva-header-phone:hover svg {
  color: #ffffff;
}

#masthead .isarva-header-phone--icon {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(0, 108, 52, 0.28);
  color: #006c34;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#masthead .isarva-header-phone--icon:hover {
  background: #eef6f1;
}

/* Header action icons — keep circles; never squash in flex row */
#masthead .ayur-header-actions {
  flex-wrap: nowrap;
  gap: 0.4rem;
  min-width: 0;
}

#masthead .ayur-header-actions .action-btn,
#masthead .ayur-header-actions .isarva-header-phone--icon,
#masthead .ayur-header-actions .isarva-header-cart-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  padding: 0 !important;
  margin: 0;
  line-height: 1;
  border-radius: 999px !important;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  overflow: visible;
}

#masthead .ayur-header-actions .action-btn img,
#masthead .ayur-header-actions .isarva-header-cart-btn img {
  display: block;
  width: 18px;
  height: 18px;
  max-width: 18px;
  max-height: 18px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Modern inline-SVG icon buttons */
#masthead .ayur-header-actions .isarva-icon-btn {
  border: 1px solid rgba(0, 108, 52, 0.22) !important;
  background: #ffffff !important;
  color: #12301f !important;
  box-shadow: none !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

#masthead .ayur-header-actions .isarva-icon-btn:hover,
#masthead .ayur-header-actions .isarva-icon-btn:focus-visible {
  background: #006c34 !important;
  border-color: #006c34 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  outline: none;
}

#masthead .ayur-header-actions .isarva-icon-btn:active {
  transform: translateY(0);
}

#masthead .ayur-header-actions .isarva-icon {
  display: block;
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  pointer-events: none;
}

/* Cart icon: badge only — hide overlapping subtotal that broke the circle */
#masthead .isarva-header-cart-btn,
#masthead .ayur-header-actions .action-btn[data-bs-target="#offcanvas-cart"] {
  position: relative;
}

#masthead .cart-content {
  position: static;
  display: contents;
}

#masthead .cart-content .cart-total,
#masthead .cart-total {
  display: none !important;
}

#masthead .cart-content-count {
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  transform: translate(35%, -35%);
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.28rem;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1.1rem;
  z-index: 2;
  /* !important because the add-to-cart fragment re-renders this badge through
     Bootstrap's .bg-* utilities, whose background-color is itself !important. */
  background: linear-gradient(140deg, #d3b169, #bd9a4d) !important;
  color: #12301f !important;
  border: 1.5px solid #ffffff;
  box-shadow: 0 2px 5px rgba(18, 37, 29, 0.24);
}

/* Green main nav */
#masthead .isarva-main-nav.navbar,
#masthead .bg-dark-green.navbar {
  /* Also used to drop the dropdown panel to the bar's bottom edge */
  --isarva-nav-pad-y: 0.55rem;
  padding-top: var(--isarva-nav-pad-y) !important;
  padding-bottom: var(--isarva-nav-pad-y) !important;
}

#masthead .isarva-main-nav .nav-link,
#masthead .bg-dark-green .nav-link {
  position: relative;
  padding-top: 0.55rem !important;
  padding-bottom: 0.55rem !important;
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88) !important;
  transition: color 0.2s ease;
}

#masthead .isarva-main-nav .nav-link:hover,
#masthead .isarva-main-nav .nav-link:focus,
#masthead .bg-dark-green .nav-link:hover,
#masthead .bg-dark-green .nav-link:focus {
  color: #ffffff !important;
}

/* Active menu highlight: white text + underline bar.
   Walker outputs the state as class="nav-link active" on the link itself. */
#masthead .isarva-main-nav .navbar-nav .nav-link.active,
#masthead .isarva-main-nav .navbar-nav .nav-link[aria-current="page"],
#masthead .isarva-main-nav .navbar-nav .current-menu-item > .nav-link,
#masthead .isarva-main-nav .navbar-nav .current_page_item > .nav-link,
#masthead .isarva-main-nav .navbar-nav .current-menu-parent > .nav-link,
#masthead .isarva-main-nav .navbar-nav .current-menu-ancestor > .nav-link,
#masthead .bg-dark-green .navbar-nav .nav-link.active,
#masthead .bg-dark-green .navbar-nav .current-menu-item > .nav-link,
#masthead .bg-dark-green .navbar-nav .current_page_item > .nav-link {
  color: #ffffff !important;
  font-weight: 700 !important;
}

#masthead .isarva-main-nav .navbar-nav .nav-link.active::after,
#masthead .isarva-main-nav .navbar-nav .nav-link[aria-current="page"]::after,
#masthead .isarva-main-nav .navbar-nav .current-menu-item > .nav-link::after,
#masthead .isarva-main-nav .navbar-nav .current_page_item > .nav-link::after,
#masthead .isarva-main-nav .navbar-nav .current-menu-parent > .nav-link::after,
#masthead .isarva-main-nav .navbar-nav .current-menu-ancestor > .nav-link::after,
#masthead .bg-dark-green .navbar-nav .nav-link.active::after,
#masthead .bg-dark-green .navbar-nav .current-menu-item > .nav-link::after,
#masthead .bg-dark-green .navbar-nav .current_page_item > .nav-link::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.1rem;
  height: 3px;
  border-radius: 3px;
  background: #f5a623;
  pointer-events: none;
}

/* Mega menu row height on desktop */
@media (min-width: 1024px) {
  #mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item > a.mega-menu-link {
    line-height: 34px !important;
    height: 34px !important;
    padding-right: 28px !important;
    font-size: 15px !important;
  }
}

/* Main menu (Max Mega Menu) — readable links + clear current-page marker */
#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item > a.mega-menu-link {
  position: relative;
  color: rgba(255, 255, 255, 0.88) !important;
  font-weight: 500 !important;
  transition: color 0.2s ease;
}

#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item > a.mega-menu-link:hover,
#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item > a.mega-menu-link:focus {
  color: #ffffff !important;
}

#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item.mega-current_page_item > a.mega-menu-link,
#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item.mega-current-menu-parent > a.mega-menu-link,
#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link,
#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link {
  color: #ffffff !important;
  font-weight: 700 !important;
}

#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link::after,
#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item.mega-current_page_item > a.mega-menu-link::after,
#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item.mega-current-menu-parent > a.mega-menu-link::after,
#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link::after,
#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 28px;
  bottom: 2px;
  height: 3px;
  border-radius: 3px;
  background: #f5a623;
  pointer-events: none;
}

/* Tablet / below XL (uses mobile header template) */
@media (max-width: 1199.98px) {
  #masthead #nav-main.navbar {
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
  }

  #masthead .site-logo img,
  #masthead .navbar-brand img,
  #masthead .logo.md,
  #masthead .logo.xs {
    max-height: 48px;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  #masthead .ayur-logo-wrapper,
  #masthead .site-logo {
    max-width: 100%;
    overflow: hidden;
  }

  #masthead #nav-main .row > [class*="col-"] {
    position: relative;
    z-index: 1;
  }

  #masthead #nav-main .ayur-header-actions {
    position: relative;
    z-index: 2;
  }

  /* main.css zeroes this container's padding, so the row's negative gutters end up
     uncancelled and drag the header content half a gutter past the viewport edge.
     Restore the padding and flatten the row margins, so the header's left and
     right edges land exactly on the .container edges every section below uses
     (the hero banner card in particular). */
  #masthead #nav-main > .container,
  #masthead #nav-main > .container-fluid {
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5) !important;
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5) !important;
  }

  /* Reorder the header: logo hard left, then the action icons, with the menu
     toggle last on the right edge after the cart. The template markup order is
     toggle / logo / actions, so this is done with flex `order` rather than
     touching the template. The offcanvas already slides in from the right, which
     now matches the toggle's position. */
  #masthead #nav-main .row {
    flex-wrap: nowrap;
    align-items: center;
    margin-left: 0;
    margin-right: 0;
  }

  /* Toggle -> far right, sitting in the icon row's own 0.5rem rhythm. The column
     keeps .ps-0 but its gutter padding-right would push it off the container
     edge, and main.css gives the button a 32px left margin from when it was the
     first thing in the header — both have to go. */
  #masthead #nav-main .row > div:nth-child(1) {
    order: 3;
    flex: 0 0 auto;
    width: auto;
    margin-left: 0.5rem;
    padding-right: 0 !important;
  }

  #masthead #nav-main .mobile-menu-hand-barger {
    margin-left: 0 !important;
  }

  /* Logo -> far left, taking up the slack so the icons stay right-aligned */
  #masthead #nav-main .row > div:nth-child(2) {
    order: 1;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }

  /* The column carries .p-0 and the logo carries .text-center, both of which
     Bootstrap declares !important — hence the !important here. */
  #masthead #nav-main .row > div:nth-child(2) .site-logo,
  #masthead #nav-main .row > div:nth-child(2) .ayur-logo-wrapper {
    text-align: left !important;
  }

  /* Actions shrink to their icons instead of holding a 5-column block */
  #masthead #nav-main .row > div:nth-child(3) {
    order: 2;
    flex: 0 0 auto;
    width: auto;
  }
}

/* Phones */
@media (max-width: 575.98px) {
  #masthead #nav-main.navbar {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
  }

  #masthead .site-logo img,
  #masthead .navbar-brand img,
  #masthead .logo.md,
  #masthead .logo.xs {
    max-height: 42px;
  }

  #masthead .ayur-header-actions {
    gap: 0.28rem;
  }

  /* Phone hidden on small phones via template; keep 3 icons only */
  #masthead .ayur-header-actions .isarva-header-phone--icon {
    display: none !important;
  }

  #masthead .ayur-header-actions .action-btn,
  #masthead .ayur-header-actions .isarva-header-phone--icon,
  #masthead .ayur-header-actions .isarva-header-cart-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
  }

  #masthead .ayur-header-actions .action-btn img,
  #masthead .ayur-header-actions .isarva-header-cart-btn img {
    width: 16px;
    height: 16px;
    max-width: 16px;
    max-height: 16px;
  }

  #masthead .site-logo img,
  #masthead .navbar-brand img,
  #masthead .logo.md,
  #masthead .logo.xs {
    max-height: 40px;
  }
}

/* ==========================================================================
   Offcanvas drawer nav (mobile)
   Rendered with the theme walker, so submenus arrive as Bootstrap dropdowns.
   Force them to expand inline instead of floating as popovers.
   ========================================================================== */
#offcanvas-navbar .offcanvas-body {
  padding-top: 0.25rem;
}

#offcanvas-navbar .isarva-offcanvas-nav {
  flex-direction: column;
  width: 100%;
  gap: 0;
}

#offcanvas-navbar .isarva-offcanvas-nav > li.nav-item {
  width: 100%;
  border-bottom: 1px solid #eef3ef;
}

#offcanvas-navbar .isarva-offcanvas-nav > li.nav-item > .nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 0.35rem;
  color: #173328;
  font-size: 1rem;
  font-weight: 600;
}

#offcanvas-navbar .isarva-offcanvas-nav > li.nav-item > .nav-link.active,
#offcanvas-navbar .isarva-offcanvas-nav > li.nav-item.current-menu-item > .nav-link,
#offcanvas-navbar .isarva-offcanvas-nav > li.nav-item.current_page_item > .nav-link {
  color: #006c34;
  font-weight: 700;
}

/* Popper positions dropdowns absolutely; neutralise that inside the drawer */
#offcanvas-navbar .isarva-offcanvas-nav .dropdown-menu {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  float: none;
  width: 100%;
  margin: 0 0 0.6rem;
  padding: 0.35rem;
  border: 0;
  border-radius: 12px;
  background: #f4f9f6;
  box-shadow: none;
  max-height: 46vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

#offcanvas-navbar .isarva-offcanvas-nav .dropdown-menu .dropdown-item {
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  color: #2d4b3d;
  font-size: 0.9rem;
  font-weight: 500;
  white-space: normal;
}

#offcanvas-navbar .isarva-offcanvas-nav .dropdown-menu .dropdown-item:hover,
#offcanvas-navbar .isarva-offcanvas-nav .dropdown-menu .dropdown-item:focus,
#offcanvas-navbar .isarva-offcanvas-nav .dropdown-menu .dropdown-item.active {
  background: #e4f2e9;
  color: #006c34;
}

/* ==========================================================================
   Main menu dropdown panel
   Max Mega Menu renders sub menus as a 250px single-column flyout. Below the
   plugin breakpoint (768px) it becomes a mobile accordion, so every rule here
   is desktop-only. Long category lists get laid out as a multi-column card.
   ========================================================================== */
@media only screen and (min-width: 769px) {
  #mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-flyout > ul.mega-sub-menu {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-content: start;
    gap: 2px 8px;
    width: min(600px, calc(100vw - 40px));
    max-width: none;
    /* Panel is anchored to the bottom of the menu link; the bar adds its own
       padding below that, so shift down by the same amount to sit flush. */
    margin-top: var(--isarva-nav-pad-y, 0.55rem);
    max-height: min(66vh, 540px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 14px 16px 18px !important;
    background: #ffffff !important;
    border: 1px solid #e2ede7 !important;
    border-top: 3px solid #f5a623 !important;
    border-radius: 0 0 16px 16px !important;
    box-shadow:
      0 26px 60px rgba(15, 32, 26, 0.18),
      0 6px 18px rgba(15, 32, 26, 0.07);
    scrollbar-width: thin;
    scrollbar-color: #cfe0d6 transparent;
  }

  #mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-flyout > ul.mega-sub-menu::-webkit-scrollbar {
    width: 8px;
  }

  #mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-flyout > ul.mega-sub-menu::-webkit-scrollbar-thumb {
    background: #d7e6dd;
    border-radius: 8px;
  }

  /* Decorative eyebrow spanning the full panel width */
  #mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-flyout > ul.mega-sub-menu::before {
    content: "Shop by category";
    grid-column: 1 / -1;
    position: sticky;
    top: 0;
    z-index: 1;
    background: #ffffff;
    margin-bottom: 5px;
    padding: 2px 10px 9px;
    border-bottom: 1px solid #edf4f0;
    color: #8ba299;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }

  #mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-flyout > ul.mega-sub-menu > li.mega-menu-item {
    width: auto;
    clear: none;
    float: none;
    min-width: 0;
  }

  #mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link {
    display: flex !important;
    align-items: center;
    gap: 9px;
    padding: 8px 10px !important;
    border-radius: 10px;
    background: transparent !important;
    color: #27453a !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
  }

  /* Leading bullet grows into a solid brand dot on hover */
  #mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link::before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #cbdfd4;
    transition: background 0.18s ease, transform 0.18s ease;
  }

  /* Chevron revealed on hover */
  #mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link::after {
    content: "";
    flex: 0 0 auto;
    width: 5px;
    height: 5px;
    margin-left: auto;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    opacity: 0;
    transform: rotate(45deg) translateX(-3px);
    transition: opacity 0.18s ease, transform 0.18s ease;
  }

  #mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:hover,
  #mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:focus {
    background: #f1f8f4 !important;
    color: #006c34 !important;
    transform: translateX(2px);
  }

  #mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:hover::before,
  #mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:focus::before {
    background: #006c34;
    transform: scale(1.4);
  }

  #mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:hover::after,
  #mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:focus::after {
    opacity: 0.7;
    transform: rotate(45deg) translateX(0);
  }

  /* Category the visitor is currently browsing */
  #mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
  #mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item.mega-current_page_item > a.mega-menu-link {
    background: #eaf5ee !important;
    color: #006c34 !important;
    font-weight: 700 !important;
  }

  #mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item.mega-current-menu-item > a.mega-menu-link::before,
  #mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item.mega-current_page_item > a.mega-menu-link::before {
    background: #006c34;
  }

  /* Parent item reads as the open tab */
  #mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-flyout.mega-toggle-on > a.mega-menu-link {
    color: #ffffff !important;
  }

  /* Keeps the bar padding between link and panel hoverable, so the panel does
     not close while the cursor travels across it. */
  #mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-flyout.mega-menu-item-has-children > a.mega-menu-link::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: var(--isarva-nav-pad-y, 0.55rem);
  }

  #mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item > a.mega-menu-link > span.mega-indicator {
    transition: transform 0.2s ease;
  }

  #mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item.mega-toggle-on > a.mega-menu-link > span.mega-indicator {
    transform: rotate(180deg);
  }
}

@media only screen and (min-width: 1100px) {
  #mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-flyout > ul.mega-sub-menu {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: min(780px, calc(100vw - 48px));
  }
}

@media (prefers-reduced-motion: reduce) {
  #mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link,
  #mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link::before,
  #mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link::after,
  #mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item > a.mega-menu-link > span.mega-indicator {
    transition: none;
  }
}