:root{
  --brand:#369694;
  --brand-rgb:54,150,148;
  --header-h:78px;
  --mega-h:clamp(250px, 36vh, 380px);
  --ink:#122222;
  --line:rgba(18,34,34,.10);
  --shadow:0 16px 40px rgba(0,0,0,.12);
}


:root{
  --menu-ease: cubic-bezier(.22, 1, .36, 1);
  --menu-ease-soft: cubic-bezier(.2, .8, .2, 1);
  --menu-open-dur: .34s;
  --menu-close-dur: .26s;
}


html, body{
  margin:0;
}

/* =========================================================
   HEADER / NAVBAR
========================================================= */
.site-header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:100;
  border-bottom:1px solid transparent;
  background:transparent;
  isolation:isolate;
  overflow:visible;
  transition:border-color .22s ease;
}

/* full-bleed header background layer (always true viewport width) */
.site-header::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;                  /* better than 100vw here */
  background:transparent;
  backdrop-filter:none;
  transition:background .22s ease, backdrop-filter .22s ease;
  z-index:-1;
  pointer-events:none;
}

.site-header::after{
  content:"";
  position:fixed;           /* viewport anchored */
  left:0;
  right:0;
  top:calc(var(--header-h) - 1px);
  height:18px;
  background:transparent;
  pointer-events:none;
  z-index:105;              /* below dropdown, above page */
}

.site-header:hover::after,
.site-header:focus-within::after,
.site-header:has(.nav-item:hover)::after,
.site-header:has(.nav-item:focus-within)::after,
.site-header:has(.mega-dropdown:hover)::after,
.site-header:has(.mega-dropdown:focus-within)::after{
  pointer-events:auto;
}

/* default scrolled state (white) */
.site-header.scrolled{
  border-bottom-color:var(--line);
}
.site-header.scrolled::before{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);
}

/* ACTIVE / OPEN visual state:
   keep active on header hover, nav item hover, dropdown hover, keyboard focus */
.site-header:hover,
.site-header:focus-within,
.site-header:has(.nav-item:hover),
.site-header:has(.nav-item:focus-within),
.site-header:has(.mega-dropdown:hover),
.site-header:has(.mega-dropdown:focus-within){
  border-bottom-color:rgba(255,255,255,.22);
}

.site-header:hover::before,
.site-header:focus-within::before,
.site-header:has(.nav-item:hover)::before,
.site-header:has(.nav-item:focus-within)::before,
.site-header:has(.mega-dropdown:hover)::before,
.site-header:has(.mega-dropdown:focus-within)::before{
  background:var(--brand);
  backdrop-filter:blur(12px);
}

.header-inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:1rem;
  min-height:var(--header-h);
}

/* =========================================================
   BRAND / LOGO SWAP
========================================================= */
.brand{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  width:clamp(120px, 12vw, 180px);
  height:46px;
  text-decoration:none;
}

.brand-logo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:left center;
  transition:opacity .18s ease;
  pointer-events:none;
}

.brand-logo--default{ opacity:1; }
.brand-logo--active{ opacity:0; }

/* swap logo when header becomes active (teal) */
.site-header:hover .brand-logo--default,
.site-header:focus-within .brand-logo--default,
.site-header:has(.nav-item:hover) .brand-logo--default,
.site-header:has(.nav-item:focus-within) .brand-logo--default,
.site-header:has(.mega-dropdown:hover) .brand-logo--default,
.site-header:has(.mega-dropdown:focus-within) .brand-logo--default{
  opacity:0;
}

.site-header:hover .brand-logo--active,
.site-header:focus-within .brand-logo--active,
.site-header:has(.nav-item:hover) .brand-logo--active,
.site-header:has(.nav-item:focus-within) .brand-logo--active,
.site-header:has(.mega-dropdown:hover) .brand-logo--active,
.site-header:has(.mega-dropdown:focus-within) .brand-logo--active{
  opacity:1;
}

/* =========================================================
   NAV
========================================================= */
.main-nav{
  display:flex;
  justify-content:center;
  position:static;
}

.nav-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  gap:.35rem;
  position:static;
}

/* Desktop: make dropdown positioning independent of nav item */
.nav-item{
  position:static;
}
.nav-item::after{
  display:none;
}

.nav-link{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.78rem .95rem;
  border-radius:999px;
  color:var(--brand-strong);
  font-weight:600;
  font-size:.95rem;
  text-decoration:none;
  white-space:nowrap;
  transition:background .18s ease, color .18s ease, transform .18s ease;
}

.nav-link i{
  font-size:.68rem;
  opacity:.85;
  transition:transform .18s ease, opacity .18s ease;
}

/* scrolled white state text */
.site-header.scrolled .nav-link{
  color:var(--brand);
}

/* active (teal) state text always white */
.site-header:hover .nav-link,
.site-header:focus-within .nav-link,
.site-header:has(.nav-item:hover) .nav-link,
.site-header:has(.nav-item:focus-within) .nav-link,
.site-header:has(.mega-dropdown:hover) .nav-link,
.site-header:has(.mega-dropdown:focus-within) .nav-link{
  color:#fff;
}

.nav-item:hover > .nav-link,
.nav-item:focus-within > .nav-link{
  background:rgba(255,255,255,.14);
  color:#fff;
}

.nav-item:hover > .nav-link i,
.nav-item:focus-within > .nav-link i{
  transform:rotate(180deg);
  opacity:1;
}

/* =========================================================
   MEGA DROPDOWN (desktop)
   - full viewport width background
   - centered inner content
   - stable hover behavior
========================================================= */
.mega-dropdown{
  position:fixed;                         /* <- critical */
  top:calc(var(--header-h) - 1px);        /* sits right below navbar */
  left:0;
  right:0;                                /* true viewport width */
  width:auto;
  transform:none;                         /* no item-based centering */
  z-index:110;

  background:var(--brand);
  color:#fff;
  border-top:1px solid rgba(255,255,255,.16);

  min-height:var(--mega-h);
  padding:1rem 0 1.25rem;                 /* inner wrapper handles side padding */
  overflow-x:clip;                        /* prevents 1px bleed on some browsers */

  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:
    opacity .18s ease,
    visibility 0s linear .18s;

  border-radius: 0px 0px 50px 50px;

}

/* tiny safety bridge inside dropdown (sub-pixel hover gaps) */
.mega-dropdown::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-14px;
  height:14px;
  background:transparent;
}

/* show dropdown */
.nav-item:hover > .mega-dropdown,
.nav-item:focus-within > .mega-dropdown{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:
    opacity .18s ease,
    visibility 0s linear 0s;
}

/* centered content wrapper */
.mega-dropdown-inner{
  box-sizing:border-box;
  width:100%;
  max-width:1200px;
  margin-inline:auto;
  padding-inline:1rem;

  display:grid;
  grid-template-columns:minmax(260px, 400px) minmax(0, 1fr);
  align-items:start;
  gap:1rem 1.25rem;}

/* left feature image */
.mega-photo{
  position:relative;
  display:block;
  min-height:220px;
  border-radius:18px;
  overflow:hidden;
  text-decoration:none;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}

.mega-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .35s ease;
}

.mega-photo::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.52), rgba(0,0,0,.08));
}

.mega-photo span{
  position:absolute;
  left:1rem;
  bottom:.9rem;
  z-index:1;
  color:#fff;
  font-weight:700;
  font-size:1rem;
  letter-spacing:.01em;
}

.mega-photo:hover img{
  transform:scale(1.045);
}

/* right links */
.mega-links{
  display:grid;
  grid-template-columns:repeat(2, minmax(210px, 1fr));
  gap:.7rem;
  align-content:start;
}

.mega-links a{
  display:flex;
  align-items:center;
  min-height:50px;
  padding:.8rem .95rem;
  border-radius:14px;
  color:#fff;
  text-decoration:none;
  font-weight:600;
  transition:
    transform .15s ease,
    background .15s ease,
    border-color .15s ease,
    box-shadow .15s ease;
}

.mega-links a:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.28);
  box-shadow:0 8px 18px rgba(0,0,0,.10);
}


/* prevent grid overflow */
.mega-photo,
.mega-links{
  min-width:0;
}

.mega-links{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr)); /* <- prevents overflow */
  gap:.7rem;
  align-content:start;
}


/* =========================================================
   CART
========================================================= */
.cart-button{
  position:relative;
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  text-decoration:none;
  color:var(--brand);
  border:1px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.12);
  transition:transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
}

/* scrolled white default */
.site-header.scrolled .cart-button{
  color:var(--brand);
  border-color:var(--line);
  background:#fff;
}

/* active teal state override */
.site-header:hover .cart-button,
.site-header:focus-within .cart-button,
.site-header:has(.nav-item:hover) .cart-button,
.site-header:has(.nav-item:focus-within) .cart-button,
.site-header:has(.mega-dropdown:hover) .cart-button,
.site-header:has(.mega-dropdown:focus-within) .cart-button{
  color:#fff;
  border-color:rgba(255,255,255,.24);
  background:rgba(255,255,255,.12);
}

.cart-button:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.34);
}

.cart-count{
  position:absolute;
  top:-7px;
  right:-7px;
  min-width:20px;
  height:20px;
  border-radius:999px;
  display:grid;
  place-items:center;
  padding:0 .35rem;
  font-size:.7rem;
  font-weight:700;
  line-height:1;
  background:#fff;
  color:var(--brand);
  border:2px solid var(--brand);
}

/* =========================================================
   MOBILE TOGGLE
========================================================= */
.nav-toggle{
  display:none;
  width:42px;
  height:42px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.12);
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:4px;
  cursor:pointer;
  transition:background .16s ease, border-color .16s ease;
}

.nav-toggle span{
  width:18px;
  height:2px;
  border-radius:999px;
  background:#fff;
  transition:background .16s ease;
}

.site-header.scrolled .nav-toggle{
  border-color:var(--brand);
  background:#fff;
}
.site-header.scrolled .nav-toggle span{
  background:var(--brand);
}

/* active teal override */
.site-header:hover .nav-toggle,
.site-header:focus-within .nav-toggle,
.site-header:has(.nav-item:hover) .nav-toggle,
.site-header:has(.nav-item:focus-within) .nav-toggle,
.site-header:has(.mega-dropdown:hover) .nav-toggle,
.site-header:has(.mega-dropdown:focus-within) .nav-toggle{
  border-color:rgba(255,255,255,.24);
  background:rgba(255,255,255,.12);
}
.site-header:hover .nav-toggle span,
.site-header:focus-within .nav-toggle span,
.site-header:has(.nav-item:hover) .nav-toggle span,
.site-header:has(.nav-item:focus-within) .nav-toggle span,
.site-header:has(.mega-dropdown:hover) .nav-toggle span,
.site-header:has(.mega-dropdown:focus-within) .nav-toggle span{
  background:#fff;
}



@media (min-width: 981px) and (max-width: 1160px){
  .mega-dropdown-inner{
    grid-template-columns:minmax(230px, 320px) minmax(0, 1fr);
    gap:.9rem 1rem;
  }

  .mega-links{
    grid-template-columns:1fr; /* stack links to avoid overflow */
  }
}

/* =========================================================
   MOBILE (works with your JS: .main-nav.is-open, .nav-item.open)
========================================================= */
@media (max-width: 980px){
  .header-inner{
    grid-template-columns:auto auto auto;
    justify-content:space-between;
  }

  .nav-toggle{
    display:flex;
  }

  .main-nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    display:none;
    z-index:120;
    padding:.75rem 1rem 1rem;
    background:var(--brand);
    border-top:1px solid rgba(255,255,255,.16);
    box-shadow:0 18px 40px rgba(0,0,0,.12);
  }

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

  .nav-list{
    flex-direction:column;
    align-items:stretch;
    gap:.4rem;
  }

  .nav-item{
    position:relative;
  }

  .nav-item::after{
    display:none; /* no bridge on mobile */
  }

  .nav-link{
    width:100%;
    justify-content:space-between;
    border-radius:14px;
    color:#fff !important;
    background:rgba(255,255,255,.08);
    padding:.85rem .95rem;
  }

  .nav-item.open > .nav-link{
    background:rgba(255,255,255,.16);
  }

  .nav-item.open > .nav-link i{
    transform:rotate(180deg);
    opacity:1;
  }

  .mega-dropdown{
    position:static;
    width:100%;
    left:auto;
    top:auto;
    transform:none;

    min-height:0;
    margin-top:.45rem;
    padding:.8rem;

    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.16);
    border-radius:16px;

    opacity:1;
    visibility:visible;
    pointer-events:auto;
    display:none;
    transition:none;
  }

  .mega-dropdown::before{
    display:none;
  }

  .nav-item.open > .mega-dropdown{
    display:block;
  }

  .mega-dropdown-inner{
    width:100%;
    margin:0;
    display:grid;
    grid-template-columns:1fr;
    gap:.8rem;
  }

  .mega-photo{
    min-height:180px;
  }

  .mega-links{
    grid-template-columns:1fr;
    gap:.55rem;
  }

  .mega-links a{
    min-height:46px;
    background:rgba(255,255,255,.10);
  }
}

@media (max-width: 980px){
  .site-header::after{
    display:none; /* no hover bridge on mobile */
  }

  .nav-item{
    position:relative;
  }

  .mega-dropdown{
    position:static;
    left:auto;
    right:auto;
    top:auto;
    width:100%;
    transform:none;
    z-index:auto;
    overflow-x:visible;
  }

  .mega-dropdown-inner{
    max-width:none;
    padding-inline:0;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce){
  .site-header,
  .site-header::before,
  .brand-logo,
  .nav-link,
  .nav-link i,
  .mega-dropdown,
  .mega-photo img,
  .mega-links a,
  .cart-button,
  .nav-toggle,
  .nav-toggle span{
    transition:none !important;
  }
}


/* =========================================================
   DESKTOP: keep mega menu open while hovering site-header
   Uses JS classes:
   - .site-header.menu-open
   - .nav-item.active
========================================================= */
@media (min-width: 981px){

  /* force header active visuals while menu is pinned open */
  .site-header.menu-open{
    border-bottom-color: rgba(255,255,255,.22);
  }
  .site-header.menu-open::before{
    background: var(--brand);
    backdrop-filter: blur(12px);
  }
  .site-header.menu-open::after{
    pointer-events: auto; /* keep bridge active */
  }

  /* logo swap while menu pinned open */
  .site-header.menu-open .brand-logo--default{ opacity:0; }
  .site-header.menu-open .brand-logo--active{ opacity:1; }

  /* nav text + controls stay in active state */
  .site-header.menu-open .nav-link{ color:#fff; }
  .site-header.menu-open .cart-button{
    color:#fff;
    border-color:rgba(255,255,255,.24);
    background:rgba(255,255,255,.12);
  }

  /* highlight active nav item */
  .site-header.menu-open .nav-item.active > .nav-link{
    background:rgba(255,255,255,.14);
    color:#fff;
  }
  .site-header.menu-open .nav-item.active > .nav-link i{
    transform:rotate(180deg);
    opacity:1;
  }

  /* IMPORTANT: open only the active dropdown (not all dropdowns) */
  .site-header.menu-open .nav-item.active > .mega-dropdown{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition:
      opacity .18s ease,
      visibility 0s linear 0s;
  }

  /* keep hover behavior too (works as fallback / instant switch) */
  .nav-item:hover > .mega-dropdown,
  .nav-item:focus-within > .mega-dropdown{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition:
      opacity .18s ease,
      visibility 0s linear 0s;
  }
}



.mega-links a{
  display:flex;
  align-items:center;
  gap:.65rem;
}

.mega-links a > i{
  width:1rem;
  flex:0 0 1rem;
  text-align:center;
  opacity:.95;
}


@media (min-width: 981px){

  /* Smooth overall header background state */
  .site-header{
    transition: border-color .28s var(--menu-ease-soft);
  }
  .site-header::before{
    transition:
      background .34s var(--menu-ease-soft),
      backdrop-filter .34s var(--menu-ease-soft);
  }

  /* Slightly smoother nav controls */
  .nav-link{
    transition:
      background .22s var(--menu-ease-soft),
      color .22s var(--menu-ease-soft),
      transform .22s var(--menu-ease-soft);
  }

  .nav-link i{
    transition:
      transform .24s var(--menu-ease-soft),
      opacity .22s var(--menu-ease-soft);
  }

  .brand-logo{
    transition: opacity .24s var(--menu-ease-soft);
  }

  .cart-button,
  .nav-toggle,
  .nav-toggle span{
    transition:
      transform .2s var(--menu-ease-soft),
      background .22s var(--menu-ease-soft),
      border-color .22s var(--menu-ease-soft),
      color .22s var(--menu-ease-soft);
  }


  
}