/* ========================================================================
   828 Mega Mums — global navigation header v1.3.1
   Isolated from homepage, product page, RedNao, and product wizard styles.
   ======================================================================== */
:root {
  --mm-header-pink: rgba(255, 247, 250, 0.84);
  --mm-header-pink-scrolled: rgba(255, 250, 252, 0.90);
  --mm-header-rose: #dc6496;
  --mm-header-rose-deep: #9f3f69;
  /* Change this value whenever you want a different social icon color. */
  --mm-social-icon-color: #d94f91;
  --mm-social-icon-hover: #ffffff;
  --mm-header-ink: #2c1a1d;
  --mm-header-muted: #6f565d;
  --mm-header-border: rgba(220, 100, 150, 0.22);
  --mm-header-shadow: 0 8px 28px rgba(114, 54, 78, 0.10);
  --mm-header-radius: 24px;
  --mm-header-desktop-height: 84px;
  /* Gap between the bottom of the floating header and the first content.
     Consumed by .mm-site-header-spacer and by the announcement bar wrapper. */
  --mm-header-gap: 24px;
  /* Live header height, published by header.js via ResizeObserver. The value
     here is the unwrapped fallback used before JS runs. */
  --mm-header-height: 84px;
}

.mm-skip-link {
  position: fixed;
  top: 8px;
  left: 16px;
  z-index: 100002;
  padding: 10px 14px;
  border-radius: 8px;
  background: #fff;
  color: var(--mm-header-ink);
  transform: translateY(-160%);
  transition: transform 160ms ease;
}
.mm-skip-link:focus { transform: translateY(0); }

.mm-site-header {
  position: fixed;
  z-index: 10000;
  top: 12px;
  left: max(32px, calc((100vw - 1744px) / 2));
  right: max(32px, calc((100vw - 1744px) / 2));
  width: auto !important;
  margin: 0 !important;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--mm-header-ink);
  font-family: var(--font-body, 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
}
.admin-bar .mm-site-header { top: 44px; }

.mm-header-shell {
  position: relative;
  z-index: 2;
  min-height: var(--mm-header-desktop-height);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 7px 12px 7px 16px;
  border: 1px solid var(--mm-header-border);
  border-radius: var(--mm-header-radius);
  background: var(--mm-header-pink);
  box-shadow: var(--mm-header-shadow);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  backdrop-filter: blur(16px) saturate(135%);
  transition: min-height 220ms ease, background 220ms ease, box-shadow 220ms ease;
}
.mm-site-header.is-scrolled .mm-header-shell {
  min-height: 76px;
  background: var(--mm-header-pink-scrolled);
  box-shadow: 0 10px 30px rgba(114, 54, 78, 0.15);
}

.mm-brand {
  display: inline-flex;
  width: 118px;
  height: 68px;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 auto;
  border-radius: 12px;
  overflow: hidden;
}
/* Keep the real WordPress logo inside its header box.
   The six `!important` flags that used to be here were a band-aid against the
   unscoped global `img` rule in footer.css / homepage.css. That rule was removed
   (footer.css) and scoped to the hero grid (homepage.css) on 2026-08-02, so the
   flags are no longer needed - these are now normal declarations. */
.mm-site-header .mm-brand-logo,
.mm-site-header .mm-brand img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.mm-desktop-nav { min-width: 0; justify-self: center; }
.mm-primary-menu,
.mm-primary-menu ul,
.mm-mobile-menu,
.mm-mobile-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mm-primary-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  /* The middle grid track is minmax(0,1fr) and every link is nowrap, so
     without flex-wrap this row simply overflowed its track -- and because it
     is centre-justified it spilled over the logo AND the social icons at the
     same time. Wrapping is the fix; the squeeze tiers below keep it on one
     line for as long as possible so wrapping stays rare. */
  flex-wrap: wrap;
  row-gap: 4px;
  gap: clamp(2px, 0.45vw, 9px);
}

/* Applied by header.js only when the menu has actually wrapped.
   While everything fits on one line the menu stays centred in its track.
   Once it wraps, centring each row separately looks broken -- the second row
   floats in the middle under the first. Switching to flex-start makes every
   row begin at the same left edge, directly under the first menu item.
   CSS has no ":wrapped" selector, which is why this is class-driven. */
.mm-primary-menu.is-wrapped {
  justify-content: flex-start;
}
.mm-primary-menu > li { position: relative; }
.mm-primary-menu > li > a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px clamp(8px, 0.72vw, 13px);
  border-radius: 12px;
  color: var(--mm-header-ink);
  font-size: clamp(0.82rem, 0.84vw, 0.94rem);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: color 160ms ease, background 160ms ease;
}
.mm-primary-menu > li > a:hover,
.mm-primary-menu > li > a:focus-visible,
.mm-primary-menu > li.current-menu-item > a,
.mm-primary-menu > li.current-menu-ancestor > a {
  color: var(--mm-header-rose-deep);
  background: rgba(255, 255, 255, 0.68);
}
.mm-primary-menu .menu-item-has-children > a::after {
  content: '';
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.mm-primary-menu .sub-menu {
  position: absolute;
  top: calc(100% + 13px);
  left: 0;
  width: min(310px, 78vw);
  padding: 12px;
  border: 1px solid var(--mm-header-border);
  border-radius: 18px;
  background: rgba(255, 252, 253, 0.98);
  box-shadow: 0 18px 44px rgba(84, 38, 58, 0.17);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
}
.mm-primary-menu > li:last-child > .sub-menu,
.mm-primary-menu > li:nth-last-child(2) > .sub-menu { right: 0; left: auto; }
.mm-primary-menu li:hover > .sub-menu,
.mm-primary-menu li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.mm-primary-menu .sub-menu::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}
.mm-primary-menu .sub-menu a {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 9px 11px;
  border-radius: 10px;
  color: var(--mm-header-ink);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
}
.mm-primary-menu .sub-menu a:hover,
.mm-primary-menu .sub-menu a:focus-visible {
  color: var(--mm-header-rose-deep);
  background: #fff1f6;
}
.mm-primary-menu .mm-menu--mega > .sub-menu {
  width: min(640px, 82vw);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 12px;
}
.mm-primary-menu .sub-menu .sub-menu {
  top: -12px;
  left: calc(100% + 8px);
}

.mm-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  /* Never let this cluster be squeezed narrower than its contents; that is
     what pushed the hamburger button out through the side of the header. */
  flex-shrink: 0;
  min-width: 0;
}
.mm-desktop-socials,
.mm-social-links,
.mm-mobile-socials {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mm-social-link {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(220, 100, 150, 0.24);
  border-radius: 50%;
  background: rgba(255,255,255,0.56);
  color: var(--mm-social-icon-color);
  text-decoration: none;
  transition: transform 160ms ease, color 160ms ease, background 160ms ease, border-color 160ms ease;
}
.mm-social-link svg {
  width: 30px;
  height: 30px;
  display: block;
  fill: currentColor;
  stroke: none;
}
.mm-social-link--instagram svg,
.mm-social-link--website svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mm-social-link--instagram .mm-social-icon-dot {
  fill: currentColor;
  stroke: none;
}
.mm-social-link:hover,
.mm-social-link:focus-visible {
  transform: translateY(-2px);
  color: var(--mm-social-icon-hover);
  background: var(--mm-header-rose);
  border-color: var(--mm-header-rose);
}

/* The "Start Your Order" button was removed from both the desktop header and
   the mobile panel (it is being replaced by a Design Consultation button once
   that bot exists). Its styles are removed with it so no dead CSS is left
   behind. Removing it also freed ~130px of header width, which is what lets
   the social icons stay visible at every desktop size. */

.mm-cart-link {
  position: relative;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--mm-header-border);
  border-radius: 14px;
  background: rgba(255,255,255,0.62);
  color: var(--mm-header-ink);
  text-decoration: none;
}
.mm-cart-link svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mm-cart-count {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--mm-header-rose);
  color: #fff;
  font-size: 0.67rem;
  font-weight: 800;
}

.mm-menu-toggle,
.mm-menu-close {
  display: none;
  width: 46px;
  height: 46px;
  border: 1px solid var(--mm-header-border);
  border-radius: 14px;
  background: rgba(255,255,255,0.64);
  color: var(--mm-header-ink);
  cursor: pointer;
}
.mm-menu-toggle { flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.mm-menu-toggle span { width: 21px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 180ms ease, opacity 180ms ease; }
.mm-site-header.menu-is-open .mm-menu-toggle span:first-child { transform: translateY(7px) rotate(45deg); }
.mm-site-header.menu-is-open .mm-menu-toggle span:nth-child(2) { opacity: 0; }
.mm-site-header.menu-is-open .mm-menu-toggle span:last-child { transform: translateY(-7px) rotate(-45deg); }

.mm-mobile-panel {
  position: fixed;
  z-index: 1;
  inset: 0;
  display: none;
  background: rgba(44, 26, 29, 0.23);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 220ms ease;
}
.mm-mobile-panel-inner {
  width: min(100%, 560px);
  min-height: 100%;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  padding: calc(20px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));
  background: linear-gradient(165deg, rgba(255, 250, 253, 0.90) 0%, rgba(255, 241, 246, 0.86) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
  backdrop-filter: blur(22px) saturate(130%);
  box-shadow: -18px 0 48px rgba(76, 34, 51, 0.18);
  transform: translateX(100%);
  transition: transform 300ms cubic-bezier(.22,.8,.3,1);
  overflow-y: auto;
}
.mm-site-header.menu-is-open .mm-mobile-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.mm-site-header.menu-is-open .mm-mobile-panel-inner { transform: translateX(0); }
body.mm-menu-open { overflow: hidden; }

.mm-mobile-panel-heading {
  display: flex;
  /* flex-start, not center: the heading is now two lines and the close button
     must stay pinned to the top-right instead of floating to its midpoint. */
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--mm-header-border);
}
.mm-mobile-panel-heading p {
  margin: 0;
  /* Sized to fit "EXPLORE 828 MEGA MUMS BY STARLA" across two lines without
     colliding with the 46px close button. */
  max-width: calc(100% - 60px);
  padding-top: 4px;
  color: var(--mm-header-rose-deep);
  /* Scales with the screen instead of being pinned to one guessed value.
     Floor 0.74rem keeps it legible on a 320px phone, ceiling 0.95rem stops
     it ballooning on a large tablet. The middle 2.9vw term does the work. */
  font-size: clamp(0.74rem, 2.9vw, 0.95rem);
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.4;
  text-transform: uppercase;
}
.mm-menu-close { position: relative; flex: 0 0 auto; }
.mm-menu-close span { position: absolute; top: 50%; left: 50%; width: 21px; height: 2px; border-radius: 2px; background: currentColor; }
.mm-menu-close span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.mm-menu-close span:last-child { transform: translate(-50%, -50%) rotate(-45deg); }

.mm-mobile-nav { padding: 12px 0 24px; }
.mm-mobile-menu > li { border-bottom: 1px solid rgba(220,100,150,0.15); }
.mm-mobile-menu li { position: relative; }
.mm-mobile-menu a {
  min-height: 54px;
  display: flex;
  align-items: center;
  padding: 12px 54px 12px 4px;
  color: var(--mm-header-ink);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.25;
  text-decoration: none;
}
.mm-mobile-menu .sub-menu {
  display: none;
  padding: 0 0 10px 14px;
}
.mm-mobile-menu .sub-menu.is-open { display: block; }
.mm-mobile-menu .sub-menu a {
  min-height: 46px;
  padding-top: 9px;
  padding-bottom: 9px;
  color: var(--mm-header-muted);
  font-size: 0.91rem;
  font-weight: 550;
}
.mm-submenu-toggle {
  position: absolute;
  top: 5px;
  right: 0;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--mm-header-rose-deep);
  cursor: pointer;
}
.mm-submenu-toggle::before,
.mm-submenu-toggle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 160ms ease;
}
.mm-submenu-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.mm-submenu-toggle[aria-expanded='true']::after { transform: translate(-50%, -50%) rotate(0deg); }

.mm-mobile-panel-footer {
  margin-top: auto;
  display: grid;
  gap: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--mm-header-border);
}
.mm-social-label {
  margin: 0 0 10px;
  color: var(--mm-header-muted);
  /* Back to its original weight and tracking -- it never actually needed to
     shrink. Same viewport scaling as the panel heading above. */
  font-size: clamp(0.78rem, 2.8vw, 0.95rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}
.mm-mobile-socials .mm-social-link { width: 44px; height: 44px; }

.mm-site-header-spacer { height: calc(var(--mm-header-height, 84px) + var(--mm-header-gap, 24px)); }
.home .mm-site-header-spacer { display: none; }
/* The sitewide announcement bar carries its own top padding to clear the
   floating fixed header, so the spacer would double the gap. Suppress it
   whenever the bar is rendering. See includes/announcement-bar.php. */
body.has-mm-announcement .mm-site-header-spacer { display: none; }

.mm-site-header a:focus-visible,
.mm-site-header button:focus-visible {
  outline: 3px solid rgba(159, 63, 105, 0.36);
  outline-offset: 3px;
}

/* Graduated squeeze. The menu keeps to one line as long as it can; only after
   these tiers are exhausted does flex-wrap take it to a second row. */
@media (max-width: 1500px) {
  .mm-primary-menu { gap: 3px; }
  .mm-primary-menu > li > a { padding-inline: 8px; font-size: 0.83rem; }
}

@media (max-width: 1280px) {
  /* The social icons used to be display:none here, which left a dead zone from
     1101px to 1280px where they vanished with no hamburger to hold them --
     that hits 1152x864 laptops and any Windows laptop at 125% scaling. They
     stay visible for every width that uses the desktop menu, and only
     disappear at <=1100px where the hamburger panel takes them over. */
  .mm-primary-menu > li > a { padding-inline: 7px; }
  .mm-desktop-socials .mm-social-link { width: 32px; height: 32px; }
  .mm-desktop-socials .mm-social-link svg { width: 22px; height: 22px; }
  .mm-desktop-socials,
  .mm-desktop-socials .mm-social-links { gap: 4px; }
}

@media (max-width: 1100px) {
  :root { --mm-header-desktop-height: 72px; --mm-header-gap: 16px; --mm-header-height: 72px; }

  /* Below this width the hamburger takes over, and the mobile panel already
     shows the social icons under its "Follow" heading. Repeating them beside
     the menu button was duplicate content and pushed the hamburger past the
     edge of the header shell. This is the correct place to hide them --
     tied to the hamburger, not to an arbitrary 1280px. */
  .mm-desktop-socials { display: none; }
  .mm-site-header { top: 8px; left: 16px; right: 16px; }
  .admin-bar .mm-site-header { top: 54px; }
  .mm-header-shell {
    grid-template-columns: auto 1fr;
    min-height: 72px;
    padding: 6px 8px 6px 12px;
    border-radius: 24px;
  }
  .mm-brand { width: 92px; height: 58px; }
  .mm-desktop-nav { display: none; }
  .mm-header-actions { justify-self: end; }
  .mm-menu-toggle,
  .mm-menu-close { display: flex; }
  .mm-mobile-panel {
    top: 88px;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
  }
  .mm-mobile-panel-inner {
    height: 100%;
    min-height: 0;
  }
  .admin-bar .mm-mobile-panel { top: 134px; }
  .mm-site-header.menu-is-open .mm-header-shell { background: rgba(255,250,252,0.90); }
  /* spacer height now derives from --mm-header-height + --mm-header-gap */
}

@media (max-width: 782px) {
  .admin-bar .mm-site-header { top: 54px; }
}

@media (max-width: 520px) {
  .mm-header-shell { gap: 8px; }
  .mm-brand { width: 84px; height: 56px; }
  .mm-cart-link,
  .mm-menu-toggle { width: 44px; height: 44px; }
  .mm-mobile-panel-inner { width: 100%; padding-left: 18px; padding-right: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .mm-site-header *,
  .mm-site-header *::before,
  .mm-site-header *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}