/* Overrides/additions on top of theme.scss.css for the merged header+nav
   (single DOM tree instead of separate desktop meganav + mobile drawer, no
   theme.js). Reuses the theme's own classes/values wherever they already
   give the right geometry (site-header__upper, grid/grid--table, site-nav,
   site-nav__link, meganav__link, meganav__title colors, nav-bar border)
   instead of re-declaring them. */

/* ---------- icon-swap on the mobile burger button (theme has no CSS for
   this pair by itself -- visibility was fully theme.js/drawer-state driven) ---------- */

.nav-toggle-close { display: none; }
#NavToggle[aria-expanded="true"] .nav-toggle-open { display: none; }
#NavToggle[aria-expanded="true"] .nav-toggle-close { display: inline-block; }

/* ---------- caret: inline inside the link, not its own row ---------- */

.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 5px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  vertical-align: middle;
}

.site-nav__item.is-open > a .caret {
  transform: rotate(180deg);
}

/* ---------- dropdown panel: fixed width, sits under its own trigger ---------- */

.site-nav__item {
  /* the dropdown below is position:absolute; without this, it has no
     positioned ancestor of its own and anchors to .nav-bar instead (the
     nearest element that actually has position:relative, from
     theme.scss.css) -- meaning every dropdown, regardless of which item
     triggered it, rendered pinned to the left edge of the whole nav bar
     instead of under its own trigger. */
  position: relative;
}

.site-nav__dropdown.meganav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 820px;
  background: #fff;
  /* theme.scss.css sets .site-nav{white-space:nowrap} for the horizontal
     top-level bar, and white-space is inherited -- without resetting it
     here, a category with long link labels (e.g. Plants: "Buy Aquarium
     Plants Online in Bangalore at the Best Price") renders on one unbroken
     line and spills out of its 190px column, past the panel edge and even
     off the viewport. */
  white-space: normal;
  /* theme.scss.css's real .meganav rule resolves to box-shadow:none /
     border:0 on the live site -- but that panel spans the FULL page width
     there, so it reads as part of the page. Ours is a fixed-width box
     floating over live page content (per spec), which needs a visible edge
     or it looks like a rendering glitch rather than a deliberate panel --
     added a shadow for that reason, a deliberate deviation from the
     measured original value. */
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
  border: 1px solid #f0f0f0;
  z-index: 20;
  padding-top: 20px;
  padding-bottom: 20px;
  /* theme.scss.css's own bare ".meganav" rules default this to opacity:0 /
     visibility:hidden, only lifted by a JS-added ".meganav--active" class we
     don't use -- override explicitly with the more specific compound
     selector so our display:none/block toggle isn't silently masked. */
  opacity: 1;
  visibility: visible;
  transform: none;
}

.site-nav__dropdown > .meganav__title {
  margin: 0 24px 6px;
}

/* ---------- product preview cards (real products/prices from the original
   mega-menu, resolved via binary/ hash lookup) -- sit beside the text
   columns, matching the reference layout, not stacked below them ---------- */

.meganav__products {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  flex: 1 1 auto;
  align-content: flex-start;
}

.meganav__product-card {
  flex: 0 0 110px;
  text-decoration: none;
  color: #444;
}

.meganav__product-card img {
  display: block;
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 6px;
  background: #f5f5f5;
}

.meganav__product-name {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #222;
  line-height: 1.3;
  margin-bottom: 2px;
}

.meganav__product-price {
  display: block;
  font-size: 12px;
  color: #666;
}

.meganav__product-price s {
  color: #999;
  margin-right: 4px;
}

/* Right-edge overflow correction for items near the end of the bar is done
   in JS (header.html), not here: a fixed nth-last-child(-n+2) guess broke
   as soon as .site-nav__item became the positioning context -- right:0
   then aligns the panel's right edge to the narrow trigger LI's own right
   edge, which for a wide 820px panel can push it off the LEFT edge of the
   viewport entirely. JS measures actual overflow against the viewport at
   open time and shifts left only by exactly however much is needed. */

.meganav__panel-body {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 0 24px;
}

.meganav__cols {
  display: flex;
  gap: 24px;
  flex: 0 0 auto;
}

.meganav__col {
  flex: 0 0 190px;
}

.meganav__col-item {
  margin-bottom: 14px;
}

.meganav__list--indent {
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
}

.meganav__list--indent li {
  display: block; /* override theme's blanket ".site-nav li{display:inline-block}" */
}

.meganav__list--indent .meganav__link--third-level {
  padding-left: 20px;
  font-size: 0.9em;
}

/* ---------- desktop (>= 768px): hover opens the dropdown ---------- */

@media (min-width: 768px) {
  .site-nav__item:hover > .site-nav__dropdown,
  .site-nav__item:focus-within > .site-nav__dropdown,
  .site-nav__item.is-open > .site-nav__dropdown {
    display: block;
  }
}

/* ---------- mobile (< 768px): burger-toggled bar, click-to-expand, no
   floating panel -- stacked and indented in place instead ---------- */

@media (max-width: 767px) {
  .nav-bar {
    display: none;
  }

  .nav-bar.is-open {
    display: block;
  }

  .site-nav.list--inline {
    margin-left: 0;
    white-space: normal;
  }

  .site-nav.list--inline > li {
    display: block;
    border-bottom: 1px solid #f2f2f2;
  }

  .site-nav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* matches .drawer__nav-link--top-level in theme.scss.css -- the mobile
       drawer used a visibly larger Cabin-family link, not the small bold
       gray desktop nav style. */
    font-family: Cabin, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 1.52941em;
    color: #262626;
    padding: 13.33333px 20px;
  }

  /* on mobile the caret becomes a plain +/- , matching the drawer's
     icon-plus / icon-minus toggle rather than the desktop down-arrow */
  .caret {
    width: 14px;
    height: 14px;
    border: 0;
    position: relative;
  }
  .caret::before, .caret::after {
    content: "";
    position: absolute;
    background: currentColor;
  }
  .caret::before { top: 6px; left: 0; width: 14px; height: 2px; }
  .caret::after { top: 0; left: 6px; width: 2px; height: 14px; transition: transform .15s ease; }
  .site-nav__item.is-open > a .caret { transform: none; } /* cancel the desktop rotate() */
  .site-nav__item.is-open > a .caret::after { transform: scaleY(0); }

  .site-nav__dropdown.meganav {
    display: none;
    /* NOT position:static -- confirmed by isolated testing that Chromium
       fails to paint (not just a headless quirk -- reproduced in headed mode
       too) statically-positioned content that's toggled from display:none to
       block deep in this layout, despite correct layout/hit-testing.
       position:relative keeps it in-flow (same visual result) but paints
       correctly. */
    position: relative;
    width: auto;
    border: 0;
    border-top: 1px solid #f2f2f2;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .site-nav__item.is-open > .site-nav__dropdown.meganav {
    display: block;
  }

  .meganav__panel-body {
    flex-direction: column;
    padding: 10px 20px;
    gap: 12px;
  }

  .meganav__cols {
    flex-direction: column;
    gap: 4px;
  }

  .meganav__col {
    flex-basis: auto;
  }

  .meganav__products {
    padding-top: 10px;
    border-top: 1px solid #f2f2f2;
  }
}