/* 1:1 re-derivation of ww-header.css design tokens, retargeted at the real
   Ollie/WooCommerce block markup. Exact colors/values pulled directly from
   the original ww-header.css :root block. */
:root{
  --ww-bg-void: linear-gradient(90deg, #E94B9C 0%, #7B3FF2 100%);
  --ww-bg-deep: #0d0b22;
  --ww-bg-mid: #1a1535;
  --ww-pink: #FF2D78;
  --ww-cyan: #00E5FF;
  --ww-purple: #9B5DE5;
  --ww-gold: #FFD166;
  --ww-text: #F0F0FF;
  --ww-text-dim: #8892A4;
  --ww-border: rgba(255,255,255,.07);
  --ww-glow-pink: rgba(255,45,120,.35);
}

/* ===== Header shell =====
   Ticker sits above the nav row and is NOT sticky (scrolls away normally,
   matching the original); only the nav row itself sticks to the top. */
/* Removes .site-header's own box from the containing-block chain so
   .ww-nav-row's sticky positioning is constrained by the full page height
   (via wp-site-blocks) instead of .site-header's own short content box —
   otherwise sticky stops working the instant .site-header scrolls out of view. */
.site-header{
  display: contents;
}
.site-header .wp-block-group{
  border-bottom-color: transparent !important;
}
.site-header .ww-nav-row{
  background: var(--ww-bg-void) !important;
  border-bottom: 1px solid var(--ww-border) !important;
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Logo */
.site-header .wp-block-site-logo{
  flex-shrink: 0;
}
.site-header .wp-block-site-logo img{
  height: 40px;
  width: auto;
  display: block;
}

/* ===== Nav links (top-level + mega-menu triggers) ===== */
.site-header .wp-block-navigation-item__content,
.site-header .wp-block-ollie-mega-menu__link,
.site-header .wp-block-ollie-mega-menu__toggle{
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--ww-text) !important;
  padding: 9px 13px;
  border-radius: 5px;
  transition: color .2s, background .2s;
}
.site-header .wp-block-navigation-item__content:hover,
.site-header .wp-block-ollie-mega-menu__link:hover,
.site-header .wp-block-ollie-mega-menu__toggle:hover{
  background: rgba(255,255,255,.12);
}
.site-header .wp-block-ollie-mega-menu__toggle-icon{
  opacity: .5;
  transition: transform .2s, opacity .2s;
}
.site-header .wp-block-ollie-mega-menu__toggle-icon svg{
  stroke: currentColor;
  color: var(--ww-text);
}
.site-header .wp-block-ollie-mega-menu[aria-expanded="true"] .wp-block-ollie-mega-menu__toggle-icon,
.site-header .wp-block-ollie-mega-menu__toggle[aria-expanded="true"] .wp-block-ollie-mega-menu__toggle-icon{
  opacity: 1;
  transform: rotate(180deg);
}

/* ===== Mega-menu dropdown panel (DARK, matching original — not a white card) ===== */
.site-header .wp-block-ollie-mega-menu__menu-container{
  background: var(--ww-bg-deep) !important;
  border: 1px solid rgba(0,229,255,.18);
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(0,0,0,.75), 0 0 0 1px rgba(0,229,255,.06);
  padding: 8px;
}
.site-header .wp-block-ollie-mega-menu__menu-container .wp-block-heading{
  font-family: Montserrat, sans-serif;
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--ww-text-dim) !important;
  margin-bottom: 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--ww-border);
}
.site-header .wp-block-ollie-mega-menu__menu-container .wp-block-group{
  background: transparent !important;
}
.site-header .ww-mega-menu-list{
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.site-header .ww-mega-menu-list a{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 7px;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--ww-text-dim) !important;
  text-decoration: none;
  transition: color .15s, background .15s;
}
.site-header .ww-mega-menu-list a:hover{
  color: var(--ww-text) !important;
  background: rgba(255,255,255,.06);
}
.site-header .ww-mega-menu-list a:hover .ww-dd-icon{
  color: var(--ww-cyan);
}

/* Icon badges (exact original: 36x36, rounded-7, tinted per variant) */
.site-header .ww-dd-icon{
  width: 36px;
  height: 36px;
  border-radius: 7px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.site-header .ww-dd-icon svg{ stroke: currentColor; }
.site-header .ww-dd-icon--cyan{ background: rgba(0,229,255,.1); color: var(--ww-cyan); }
.site-header .ww-dd-icon--purple{ background: rgba(155,93,229,.1); color: var(--ww-purple); }
.site-header .ww-dd-icon--pink{ background: rgba(255,45,120,.1); color: var(--ww-pink); }
.site-header .ww-dd-icon--gold{ background: rgba(255,209,102,.1); color: var(--ww-gold); }

/* Mega-menu category banner images */
.site-header .wp-block-ollie-mega-menu__menu-container .wp-block-image.ww-mega-img{
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 14px;
  aspect-ratio: 16/9;
  border: 1px solid var(--ww-border);
}
.site-header .wp-block-ollie-mega-menu__menu-container .wp-block-image.ww-mega-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
}

/* Divider between mega-menu columns */
.site-header .wp-block-ollie-mega-menu__menu-container .wp-block-columns > .wp-block-column{
  padding: 0 20px;
}
.site-header .wp-block-ollie-mega-menu__menu-container .wp-block-columns > .wp-block-column:first-child{
  padding-left: 0;
  border-right: 1px solid var(--ww-border);
}
.site-header .wp-block-ollie-mega-menu__menu-container .wp-block-columns > .wp-block-column:last-child{
  padding-right: 0;
}

/* ===== Right-side actions: search / account / cart ===== */
.site-header .wp-block-search__button,
.site-header .wc-block-customer-account__link,
.site-header .wc-block-mini-cart__button{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 7px !important;
  color: var(--ww-text) !important;
  background: rgba(5,5,24,.26) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 4px 14px rgba(0,0,0,.12);
  transition: color .2s, background .2s;
}
.site-header .wp-block-search__button:hover,
.site-header .wc-block-customer-account__link:hover,
.site-header .wc-block-mini-cart__button:hover{
  background: rgba(255,255,255,.18) !important;
}
.site-header .wp-block-search__button svg,
.site-header .wc-block-customer-account__visual svg,
.site-header .wc-block-mini-cart__icon{
  fill: currentColor;
  color: var(--ww-text);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}

/* Expanding search field (button-only variant: field is hidden until toggled open) */
.site-header .wp-block-search__inside-wrapper{
  background: transparent;
}
.site-header.wp-block-search__searchfield-hidden .wp-block-search__input,
.site-header .wp-block-search__input{
  background: var(--ww-bg-deep);
  border: 1px solid rgba(0,229,255,.2);
  border-radius: 5px;
  color: var(--ww-text);
  font-family: Inter, sans-serif;
  padding: 10px 12px;
}
.site-header .wp-block-search__input::placeholder{
  color: var(--ww-text-dim);
}

/* Cart quantity badge — solid pink circle w/ glow, matches original */
.site-header .wc-block-mini-cart__badge,
.site-header .wc-block-mini-cart__quantity-badge .wc-block-mini-cart__badge{
  background: var(--ww-pink) !important;
  color: #fff !important;
  font-family: Montserrat, sans-serif;
  font-size: 9px;
  font-weight: 800;
  box-shadow: 0 0 8px var(--ww-glow-pink);
}

/* ===== Mobile responsive nav overlay: keep it on-brand, not stark white ===== */
.site-header .wp-block-navigation__responsive-container.is-menu-open{
  background: var(--ww-bg-deep) !important;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-ollie-mega-menu__link,
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-ollie-mega-menu__toggle{
  color: var(--ww-text) !important;
}
.site-header .wp-block-navigation__responsive-container-open svg,
.site-header .wp-block-navigation__responsive-container-close svg{
  fill: var(--ww-text);
}