/* ─────────────────────────────────────────────────────────────────
   Bricks & Blooms — Products mega menu + Services + standard dropdowns
  Single source of truth: child theme asset.
   ───────────────────────────────────────────────────────────────── */

/* 1. Static positioning lets the absolutely positioned dropdown anchor to
      its nearest positioned ancestor (the fixed full-width
      .navbar.navbar-default) instead of the LI. With the navbar as offset
      parent, the dropdown's left:50% + translateX(-50%) centers on the
      viewport rather than on the Products link, which prevents left-edge
      clipping when the menu is wider than the distance from Products to
      the viewport edge. */
#main-menu .navbar-nav .bb-dynamic-products-mega-menu {
  position: static !important;
}

/* 2. Constrain width and center below Products.
      - width:max-content lets the dropdown size to the columns' preferred
        width, so 4–7 columns get the room they need instead of being
        squashed to min-content (which produces single-letter-per-line
        wrapping in the column titles and product names).
      - left:50% + translateX(-50%) centers it on the Products link.
      - max-width caps the spread on ultra-wide displays and prevents
        viewport overflow on smaller ones; the column flex wraps to
        a second row when there isn't enough horizontal room.

      Width budget: with 2 base columns (Floral + Landscaping) and up to
      BB_SEASONAL_MAX_ACTIVE (default 5) seasonal columns, the menu can
      hold up to 7 columns. At ~210px per column + 20px gaps that's
      roughly 1590px when fully horizontal. On narrower viewports the
      flex layout wraps to 2 rows automatically. */
#main-menu .navbar-nav .mega-menu.bb-dynamic-products-mega-menu > .dropdown-menu,
.full-width #main-menu .navbar-nav .mega-menu.bb-dynamic-products-mega-menu > .dropdown-menu {
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: max-content !important;
  min-width: 480px !important;
  max-width: min(1640px, 96vw) !important;
  padding: 32px 28px 28px !important;
  margin: 0 !important;

  /* Brand Soft Ivory — warm, theme-consistent background */
  background-color: #FBF8F6 !important;

  /* Brand Primary Pink border (1px top, 2px sides + bottom) */
  border-left: 2px solid #E9477A !important;
  border-right: 2px solid #E9477A !important;
  border-bottom: 2px solid #E9477A !important;
  border-top: 1px solid #E9477A !important;
  border-radius: 0 0 8px 8px !important;
  box-shadow: 0 8px 32px rgba(233, 71, 122, 0.10), 0 2px 8px rgba(58, 58, 58, 0.08) !important;

  overflow: visible !important;

  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 20px !important;
}

/* Remove theme-added inner white blocks in mega submenus */
#main-menu .navbar-nav .mega-menu.bb-dynamic-products-mega-menu > .dropdown-menu .dropdown-menu,
#main-menu .navbar-nav .mega-menu.bb-dynamic-products-mega-menu > .dropdown-menu .dropdown {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* 6. Standard dropdown menus: 1px top border, 2px sides + bottom,
      rounded bottom corners only. */
#main-menu .navbar-nav > li:not(.bb-dynamic-products-mega-menu) > .dropdown-menu {
  border-left: 2px solid #E9477A !important;
  border-right: 2px solid #E9477A !important;
  border-bottom: 2px solid #E9477A !important;
  border-top: 1px solid #E9477A !important;
  border-radius: 0 0 8px 8px !important;
}

/* 3. Remove the theme's full-viewport-width ::before overlay —
      background is now on the dropdown itself. */
#main-menu .navbar-nav .bb-dynamic-products-mega-menu > .dropdown-menu::before {
  display: none !important;
}

/* 3b. Hide Sway's ::before overlay on standard dropdowns (About etc.) */
#main-menu .navbar-nav > li.menu-item-has-children:not(.bb-dynamic-products-mega-menu):not(.bb-dynamic-services-dropdown) > .dropdown-menu::before,
#main-menu .navbar-nav > li.dropdown:not(.bb-dynamic-products-mega-menu):not(.bb-dynamic-services-dropdown) > .dropdown-menu::before {
  display: none !important;
}

/* 4. Prevent overflow on small viewports */
#main-menu .navbar-nav .bb-dynamic-products-mega-menu > .dropdown-menu {
  overflow-x: hidden;
}

/* 5. Each column is sized to a comfortable fixed width (no shrinking)
      so titles like "Christmas" and "Father's Day" don't wrap mid-word.
      The parent dropdown is flex-wrap:wrap, so when there isn't enough
      horizontal room for all columns to fit on one row they break to a
      second row at the same fixed width — a tidy 2-row layout, not a
      squashed single row. */
#main-menu .navbar-nav .bb-dynamic-products-mega-menu > .dropdown-menu > li.dropdown.bb-dynamic-products-column {
  float: none !important;
  width: 210px !important;
  min-width: 210px !important;
  max-width: 210px !important;
  flex: 0 0 210px !important;
}

/* Keep nested lists in-flow instead of absolutely positioned flyouts. */
#main-menu .navbar-nav .bb-dynamic-products-mega-menu > .dropdown-menu > li.dropdown.bb-dynamic-products-column > .dropdown-menu {
  position: static !important;
  display: block !important;
  float: none !important;
  min-width: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  transform: none !important;
}

/* ── Column headings ─────────────────────────────────────────── */

/* The walker adds .dropdown to column items (depth-1 children with children).
   Sway already sets pointer-events:none on .dropdown > a inside mega menus. */
#main-menu .navbar-nav .bb-dynamic-products-mega-menu .dropdown.bb-dynamic-products-column > a {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #E9477A !important;
  padding: 0 0 8px 0 !important;
  margin-bottom: 8px !important;
  display: block !important;
  border-bottom: 2px solid rgba(233, 71, 122, 0.18) !important;
  pointer-events: none !important;
  background: none !important;
}

/* ── Product links ───────────────────────────────────────────── */

#main-menu .navbar-nav .bb-dynamic-products-mega-menu .bb-dynamic-product > a {
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #3A3A3A !important;
  padding: 2px 0 !important;
  display: flex !important;
  align-items: center !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  pointer-events: auto !important;
}

#main-menu .navbar-nav .bb-dynamic-products-mega-menu .bb-dynamic-product > a:hover {
  color: #E9477A !important;
  background: none !important;
}

/* ── View All links ──────────────────────────────────────────── */

#main-menu .navbar-nav .bb-dynamic-products-mega-menu .bb-dynamic-view-all > a {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #82372E !important;
  margin-top: 12px !important;
  padding: 0 !important;
  display: block !important;
  letter-spacing: 0.02em !important;
  font-style: normal !important;
  pointer-events: auto !important;
}

#main-menu .navbar-nav .bb-dynamic-products-mega-menu .bb-dynamic-view-all > a em {
  font-style: italic;
}

#main-menu .navbar-nav .bb-dynamic-products-mega-menu .bb-dynamic-view-all > a:hover {
  color: #E9477A !important;
  background: none !important;
}

/* ── Icon alignment (Font Awesome <i> tags) ──────────────────── */

#main-menu .navbar-nav .bb-dynamic-products-mega-menu .bb-dynamic-product > a i {
  flex-shrink: 0;
}

/* ── Services dropdown ───────────────────────────────────────── */

#main-menu .navbar-nav .menu-item-has-children.bb-dynamic-services-dropdown {
  position: relative !important;
}

#main-menu .navbar-nav .menu-item-has-children.bb-dynamic-services-dropdown > .dropdown-menu,
.full-width #main-menu .navbar-nav .menu-item-has-children.bb-dynamic-services-dropdown > .dropdown-menu {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  min-width: 360px !important;
  max-width: min(640px, 92vw) !important;
  background-color: #FBF8F6 !important;
  border-top: 1px solid #E9477A !important;
  border-left: 2px solid #E9477A !important;
  border-right: 2px solid #E9477A !important;
  border-bottom: 2px solid #E9477A !important;
  border-radius: 0 0 8px 8px !important;
  box-shadow: 0 8px 32px rgba(233, 71, 122, 0.12) !important;
  padding: 18px 20px !important;
  margin: 0 !important;
}

#main-menu .navbar-nav .menu-item-has-children.bb-dynamic-services-dropdown > .dropdown-menu::before {
  display: none !important;
}

#main-menu .navbar-nav .menu-item-has-children.bb-dynamic-services-dropdown > .dropdown-menu .menu-item > a {
  background: none !important;
  border-left: 2px solid transparent !important;
  padding: 7px 0 7px 10px !important;
  line-height: 1.45 !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
}

#main-menu .navbar-nav .menu-item-has-children.bb-dynamic-services-dropdown > .dropdown-menu .menu-item > a:hover {
  color: #E9477A !important;
  background: none !important;
  border-left-color: #E9477A !important;
}

#main-menu .navbar-nav .menu-item-has-children.bb-dynamic-services-dropdown > .dropdown-menu .menu-item.current-menu-item > a,
#main-menu .navbar-nav .menu-item-has-children.bb-dynamic-services-dropdown > .dropdown-menu .menu-item.current-menu-ancestor > a {
  border-left-color: #E9477A !important;
}

#main-menu .navbar-nav .menu-item-has-children.bb-dynamic-services-dropdown > .dropdown-menu .menu-item > a i {
  width: 14px;
  text-align: center;
  flex-shrink: 0;
}

#main-menu .navbar-nav .menu-item-has-children.bb-dynamic-services-dropdown > .dropdown-menu .menu-item.bb-services-floral > a i {
  color: #64BD45 !important;
}

#main-menu .navbar-nav .menu-item-has-children.bb-dynamic-services-dropdown > .dropdown-menu .menu-item.bb-services-landscaping > a i {
  color: #82372E !important;
}

/* ── Hard Override Layer (theme-agnostic) ──────────────────────
   Some Sway builds use .sub-menu instead of .dropdown-menu and may
   re-apply full borders later in the cascade. Keep this at file end. */

/* Products mega dropdown: 1px top, 2px sides + bottom, rounded bottom only. */
#main-menu .navbar-nav li.bb-dynamic-products-mega-menu > ul.dropdown-menu,
#main-menu .navbar-nav li.bb-dynamic-products-mega-menu > ul.sub-menu {
  border-top: 1px solid #E9477A !important;
  border-left: 2px solid #E9477A !important;
  border-right: 2px solid #E9477A !important;
  border-bottom: 2px solid #E9477A !important;
  border-radius: 0 0 8px 8px !important;
  background-clip: padding-box !important;
  clip-path: inset(0 round 0 0 8px 8px) !important;
}

/* Standard top-level dropdowns (About, Services, etc.). */
#main-menu .navbar-nav > li.menu-item-has-children:not(.bb-dynamic-products-mega-menu) > ul.dropdown-menu,
#main-menu .navbar-nav > li.menu-item-has-children:not(.bb-dynamic-products-mega-menu) > ul.sub-menu,
#main-menu .navbar-nav > li.dropdown:not(.bb-dynamic-products-mega-menu) > ul.dropdown-menu,
#main-menu .navbar-nav > li.dropdown:not(.bb-dynamic-products-mega-menu) > ul.sub-menu {
  border-top: 1px solid #E9477A !important;
  border-left: 2px solid #E9477A !important;
  border-right: 2px solid #E9477A !important;
  border-bottom: 2px solid #E9477A !important;
  border-radius: 0 0 8px 8px !important;
  background-clip: padding-box !important;
}

/* Services dropdown has its own explicit style block in custom CSS.
   Re-assert requested edge/radius treatment here so this always wins. */
/* Services: all four selector variants including .full-width context */
#main-menu .navbar-nav .menu-item-has-children.bb-dynamic-services-dropdown > .dropdown-menu,
#main-menu .navbar-nav .menu-item-has-children.bb-dynamic-services-dropdown > .sub-menu,
.full-width #main-menu .navbar-nav .menu-item-has-children.bb-dynamic-services-dropdown > .dropdown-menu,
.full-width #main-menu .navbar-nav .menu-item-has-children.bb-dynamic-services-dropdown > .sub-menu {
  border-top: 1px solid #E9477A !important;
  border-left: 2px solid #E9477A !important;
  border-right: 2px solid #E9477A !important;
  border-bottom: 2px solid #E9477A !important;
  border-radius: 0 0 8px 8px !important;
  background-clip: padding-box !important;
}

/* About dropdown: match requested edge/radius treatment exactly. */
#main-menu .navbar-nav .menu-item-has-children.bb-dynamic-about-dropdown > .dropdown-menu,
#main-menu .navbar-nav .menu-item-has-children.bb-dynamic-about-dropdown > .sub-menu,
.full-width #main-menu .navbar-nav .menu-item-has-children.bb-dynamic-about-dropdown > .dropdown-menu,
.full-width #main-menu .navbar-nav .menu-item-has-children.bb-dynamic-about-dropdown > .sub-menu {
  border-top: 1px solid #E9477A !important;
  border-left: 2px solid #E9477A !important;
  border-right: 2px solid #E9477A !important;
  border-bottom: 2px solid #E9477A !important;
  border-radius: 0 0 8px 8px !important;
  background-clip: padding-box !important;
}

#main-menu .navbar-nav .menu-item-has-children.bb-dynamic-about-dropdown > .dropdown-menu::before,
#main-menu .navbar-nav .menu-item-has-children.bb-dynamic-about-dropdown > .sub-menu::before {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────────────
   MOBILE / TABLET RESPONSIVE OVERRIDES  (≤ 1269px — Sway breakpoint)

   Sway resets .dropdown-menu to position:relative at this breakpoint
   so its JS-driven .mobile-visible expand/collapse works on touch.
   Our desktop absolute-positioning rules carry !important and override
   that reset, breaking three things on mobile:
     1. Mega/services menus render absolutely, obscuring parent links
        and making the "back" collapse gesture impossible.
     2. The products mega menu is clipped on the left (translateX -50%
        pushes it off-screen) and the clip-path crops the content.
     3. Standard dropdowns can't expand/collapse (stacking context).
   These rules restore Sway's relative-flow behaviour on small screens.
   ───────────────────────────────────────────────────────────────── */

@media (max-width: 1269px) {

  /* Sway's mobile menu logic depends on all submenus being hidden by
     default, then revealed only when their parent gets .mobile-visible.
     Our desktop mega-menu display:flex !important was still winning on
     mobile, leaving the Products submenu in normal flow while "closed". */
  #main-menu .navbar-nav > li > .dropdown-menu,
  #main-menu .navbar-nav > li > .sub-menu {
    display: none !important;
  }

  #main-menu .navbar-nav > li.mobile-visible > .dropdown-menu,
  #main-menu .navbar-nav > li.mobile-visible > .sub-menu {
    display: block !important;
  }

  /* ── Products mega menu ─────────────────────────────────────── */

  #main-menu .navbar-nav .mega-menu.bb-dynamic-products-mega-menu > .dropdown-menu,
  .full-width #main-menu .navbar-nav .mega-menu.bb-dynamic-products-mega-menu > .dropdown-menu {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 8px 0 8px 15px !important;
    display: none !important;
    flex-direction: column !important;
    overflow: visible !important;
    clip-path: none !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    gap: 4px !important;
  }

  #main-menu .navbar-nav .mega-menu.bb-dynamic-products-mega-menu.mobile-visible > .dropdown-menu,
  .full-width #main-menu .navbar-nav .mega-menu.bb-dynamic-products-mega-menu.mobile-visible > .dropdown-menu {
    display: flex !important;
  }

  /* Stack mega menu product columns vertically */
  #main-menu .navbar-nav .bb-dynamic-products-mega-menu > .dropdown-menu > li.dropdown.bb-dynamic-products-column {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: none !important;
  }

  /* ── Services dropdown ──────────────────────────────────────── */

  #main-menu .navbar-nav .menu-item-has-children.bb-dynamic-services-dropdown > .dropdown-menu,
  .full-width #main-menu .navbar-nav .menu-item-has-children.bb-dynamic-services-dropdown > .dropdown-menu {
    display: none !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 0 0 15px !important;
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    border-radius: 0 !important;
  }

  #main-menu .navbar-nav .menu-item-has-children.bb-dynamic-services-dropdown.mobile-visible > .dropdown-menu,
  .full-width #main-menu .navbar-nav .menu-item-has-children.bb-dynamic-services-dropdown.mobile-visible > .dropdown-menu {
    display: block !important;
  }

  /* Mirror Services mobile behavior for About so the parent row stays
     visible and the close caret remains available after expansion. */
  #main-menu .navbar-nav .menu-item-has-children.bb-dynamic-about-dropdown > .dropdown-menu,
  #main-menu .navbar-nav .menu-item-has-children.bb-dynamic-about-dropdown > .sub-menu,
  .full-width #main-menu .navbar-nav .menu-item-has-children.bb-dynamic-about-dropdown > .dropdown-menu,
  .full-width #main-menu .navbar-nav .menu-item-has-children.bb-dynamic-about-dropdown > .sub-menu {
    display: none !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 0 0 15px !important;
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    border-radius: 0 !important;
  }

  #main-menu .navbar-nav .menu-item-has-children.bb-dynamic-about-dropdown.mobile-visible > .dropdown-menu,
  #main-menu .navbar-nav .menu-item-has-children.bb-dynamic-about-dropdown.mobile-visible > .sub-menu,
  .full-width #main-menu .navbar-nav .menu-item-has-children.bb-dynamic-about-dropdown.mobile-visible > .dropdown-menu,
  .full-width #main-menu .navbar-nav .menu-item-has-children.bb-dynamic-about-dropdown.mobile-visible > .sub-menu {
    display: block !important;
  }

  /* ── Hard override layer — also reset on mobile ─────────────── */

  #main-menu .navbar-nav li.bb-dynamic-products-mega-menu > ul.dropdown-menu,
  #main-menu .navbar-nav li.bb-dynamic-products-mega-menu > ul.sub-menu {
    border: none !important;
    border-radius: 0 !important;
    clip-path: none !important;
  }

  #main-menu .navbar-nav .menu-item-has-children.bb-dynamic-services-dropdown > .dropdown-menu,
  #main-menu .navbar-nav .menu-item-has-children.bb-dynamic-services-dropdown > .sub-menu,
  .full-width #main-menu .navbar-nav .menu-item-has-children.bb-dynamic-services-dropdown > .dropdown-menu,
  .full-width #main-menu .navbar-nav .menu-item-has-children.bb-dynamic-services-dropdown > .sub-menu {
    border: none !important;
    border-radius: 0 !important;
  }

  #main-menu .navbar-nav .menu-item-has-children.bb-dynamic-about-dropdown > .dropdown-menu,
  #main-menu .navbar-nav .menu-item-has-children.bb-dynamic-about-dropdown > .sub-menu,
  .full-width #main-menu .navbar-nav .menu-item-has-children.bb-dynamic-about-dropdown > .dropdown-menu,
  .full-width #main-menu .navbar-nav .menu-item-has-children.bb-dynamic-about-dropdown > .sub-menu {
    border: none !important;
    border-radius: 0 !important;
  }

}