/* =========================================================================
   UrbWellness desktop hover mega-menu
   Panels anchor to .header (the sticky positioning context) so they span the
   full header width regardless of which nav item is hovered. Desktop only —
   hidden below 900px, where the existing hamburger + .mobile-menu takes over.
   Depends on tokens/classes defined in main.css (--olive, .wrap, .pcard, etc.)
   ========================================================================= */

/* The header is the positioning context for the full-width panels.
   main.css sets .header{position:sticky}, which is itself a valid positioned
   context for the mega panel's top:100% anchor — no override needed here
   (a plain position:relative here would defeat the sticky header on scroll). */

/* Nav items sit in the flex row exactly like the old .nav > a links.
   Each item is a static-positioned inline-flex box; the panel it owns is
   positioned against .header, not against the item, so it never offsets. */
.uw-meganav { position: static; }

.uw-nav-item {
  position: static;
  display: inline-flex;
  align-items: center;
}

.uw-nav-item > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 0;
  letter-spacing: .01em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  transition: color .2s ease;
}

.uw-nav-item > a:hover,
.uw-has-mega:hover > a,
.uw-has-mega:focus-within > a {
  color: var(--olive);
}

.uw-nav-item .caret {
  width: 9px;
  height: 9px;
  transition: transform .2s ease;
}
.uw-has-mega:hover > a .caret,
.uw-has-mega:focus-within > a .caret {
  transform: rotate(180deg);
}

/* ---- The full-width dropdown panel ---------------------------------------
   Absolute, anchored to .header. left/right:0 => spans the full header width.
   top:100% => sits flush under the header (no gap, so no hover flicker). */
.uw-mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 45; /* above page content, below the sticky header shadow/modals */
  background: #fff;
  border-radius: 0 0 18px 18px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .10), 0 2px 0 rgba(0, 0, 0, .04);
  border-top: 1px solid rgba(0, 0, 0, .06);

  /* Closed state: invisible, non-interactive, nudged up 4px for the rise-in. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease, visibility 0s linear .12s;
}

/* Open on hover of the item OR keyboard focus inside it (accessibility). */
.uw-has-mega:hover > .uw-mega,
.uw-has-mega:focus-within > .uw-mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity .12s ease, transform .12s ease, visibility 0s linear 0s;
}

/* Inner container centers content to the site container width.
   NOTE: intentionally does NOT reuse the shared .wrap class — a nested .wrap
   inside <header> also matched main.css's ".header .wrap{height:78px}" (meant
   for the header's own top bar), which clamped this panel to 78px tall and
   clipped its tile images/labels. max-width/margin are inlined here instead so
   this container can never collide with that rule again. */
.uw-mega-inner {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  padding-top: 28px;
  padding-bottom: 32px;
  max-width: var(--container);
  margin: 0 auto;
}

/* Left side: subcategory links + "Shop all" CTA. */
.uw-mega-cols {
  flex: 0 0 auto;
  min-width: 220px;
  max-width: 320px;
}

.uw-sublist {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
  columns: 2;
  column-gap: 40px;
}
/* Single-column when there are few links reads cleaner; browsers balance
   automatically, but keep list items from splitting across columns. */
.uw-sublist li {
  break-inside: avoid;
  margin: 0 0 2px;
}

.uw-sublist a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  transition: color .15s ease;
}
.uw-sublist a:hover .uw-sub-name,
.uw-sublist a:focus .uw-sub-name {
  color: var(--olive);
}

.uw-sub-count {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}

/* "Shop all X →" link under the sublist. */
.uw-shop-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  color: var(--olive);
}
.uw-shop-all:hover,
.uw-shop-all:focus {
  color: var(--olive-dark);
}
.uw-shop-all .uw-arrow {
  transition: transform .15s ease;
}
.uw-shop-all:hover .uw-arrow {
  transform: translateX(3px);
}

/* Right side: up to 3 product tiles, styled like .pcard from main.css. */
.uw-mega-tiles {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 560px;
  margin-left: auto;
}

.uw-tile {
  display: block;
}
.uw-tile .pimg {
  background: #fff;
  border: 1px solid #f0eee9;
  border-radius: var(--prod-radius, 10px);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 10px;
}
.uw-tile .pimg img {
  max-width: 92%;
  max-height: 92%;
  object-fit: contain;
}
.uw-tile .pt {
  font-size: 13px;
  line-height: 1.35;
  margin-bottom: 5px;
  color: var(--text);
  transition: color .15s ease;
}
.uw-tile:hover .pt {
  color: var(--olive);
}
.uw-tile .pp {
  font-size: 14px;
  font-weight: 700;
}
.uw-tile .pp del {
  color: var(--muted);
  font-weight: 400;
  margin-right: 6px;
}
.uw-tile .pp ins {
  text-decoration: none;
  color: var(--sold);
}

/* Narrower desktops: drop tiles to 2-up so the panel stays reasonable. */
@media (max-width: 1150px) {
  .uw-mega-inner { gap: 32px; }
  .uw-mega-tiles { grid-template-columns: repeat(2, 1fr); max-width: 420px; }
}

/* ---- Mobile / tablet: mega-menu OFF. Hamburger handles nav. -------------- */
@media (max-width: 900px) {
  .uw-meganav,
  .uw-mega {
    display: none !important;
  }
}

/* ===== Shopify-pattern image tiles (centered row) ===== */
.uw-mega-tilerow { display: flex; justify-content: center; gap: 22px; padding: 26px 24px 30px; }
.uw-mm-tile { display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; }
.uw-mm-thumb { width: 96px; height: 96px; border-radius: 10px; background: #f4f2ee; display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.08); transition: transform .15s ease; }
.uw-mm-thumb img { max-width: 86%; max-height: 86%; object-fit: contain; width: auto; height: auto; }
.uw-mm-tile:hover .uw-mm-thumb { transform: translateY(-2px); }
.uw-mm-label { font-family: var(--font-body); font-weight: 700; font-size: 13px; color: #111; }
.uw-mm-tile:hover .uw-mm-label { color: var(--olive); }