/* Super Stubborn — Header
   GEGENEREERD uit de mockup (sectie `nav`) door port_to_wp.py.
   Gedeelde componenten en tokens staan in assets/css/superstubborn.css. */

/* ===================== NAV SECTION — scoped .ssx-nav- ===================== */

/* Keep account icon (an <a>) sizing consistent with icon buttons */
.ssx-nav-account{ text-decoration:none; }

/* ---------- Mega-menu (Shop hover / focus) ---------- */
.ssx-nav-has-mega{ position:relative; }

.ssx-nav-mega{
  position:absolute;
  top:calc(100% + var(--ss-sp-4));
  left:0;
  width:min(860px, 90vw);
  max-width:calc(100vw - 2 * var(--ss-gutter));
  display:grid;
  grid-template-columns:1.6fr 0.9fr;
  gap:var(--ss-sp-7);
  padding:var(--ss-sp-6);
  background:color-mix(in srgb, var(--ss-ground) 94%, transparent);
  backdrop-filter:blur(16px) saturate(1.2);
  border:1px solid var(--ss-hairline);
  border-radius:var(--ss-r-lg);
  box-shadow:var(--ss-shadow-lg);
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity var(--ss-dur-2) var(--ss-ease),
             transform var(--ss-dur-2) var(--ss-ease),
             visibility var(--ss-dur-2) var(--ss-ease);
  z-index:5;
}
/* Reveal on hover of the item or keyboard focus within it */
.ssx-nav-has-mega:hover > .ssx-nav-mega,
.ssx-nav-has-mega:focus-within > .ssx-nav-mega{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
/* invisible hover bridge so the gap doesn't drop the menu */
.ssx-nav-mega::before{
  content:"";
  position:absolute;
  top:calc(-1 * var(--ss-sp-4));
  left:0; right:0;
  height:var(--ss-sp-4);
}

.ssx-nav-mega__cols{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:var(--ss-sp-6) var(--ss-sp-5);
  min-width:0;
}
.ssx-nav-mega__col{ min-width:0; }
.ssx-nav-mega__col .ss-eyebrow{ margin-bottom:var(--ss-sp-4); }
.ssx-nav-mega__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:var(--ss-sp-3);
}
.ssx-nav-mega__list a{
  font-size:var(--ss-fs-small);
  letter-spacing:0.04em;
  color:var(--ss-text-muted);
  transition:color var(--ss-dur-1) var(--ss-ease);
}
.ssx-nav-mega__list a:hover{ color:var(--ss-beige); }

.ssx-nav-mega__feature{
  display:flex;
  flex-direction:column;
  gap:var(--ss-sp-4);
  border-left:1px solid var(--ss-hairline);
  padding-left:var(--ss-sp-6);
  min-width:0;
}
.ssx-nav-mega__photo{
  border-radius:var(--ss-r-md);
  transition:transform var(--ss-dur-3) var(--ss-ease);
}
.ssx-nav-mega__feature:hover .ssx-nav-mega__photo{ --_scale:1.05; }
.ssx-nav-mega__feature-meta{
  display:flex;
  flex-direction:column;
  gap:var(--ss-sp-2);
}
.ssx-nav-mega__feature-kick{
  font-size:var(--ss-fs-label);
  text-transform:uppercase;
  letter-spacing:0.28em;
  color:var(--ss-copper);
  font-weight:700;
}
.ssx-nav-mega__feature-title{
  font-family:var(--ss-display);
  text-transform:uppercase;
  letter-spacing:-0.01em;
  font-size:var(--ss-fs-h3);
  line-height:1;
  color:var(--ss-beige);
}

/* Hide mega-menu on smaller screens (mobile uses full menu) */
@media (max-width:960px){ .ssx-nav-mega{ display:none; } }

/* ---------- Cart drawer ---------- */
.ssx-nav-cart-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:var(--ss-sp-5);
}
.ssx-nav-cart-item{
  display:grid;
  grid-template-columns:72px minmax(0, 1fr);
  gap:var(--ss-sp-4);
  padding-bottom:var(--ss-sp-5);
  border-bottom:1px solid var(--ss-hairline);
}
.ssx-nav-cart-item:last-child{ border-bottom:0; padding-bottom:0; }
.ssx-nav-cart-thumb{ border-radius:var(--ss-r-sm); }
.ssx-nav-cart-meta{
  display:flex;
  flex-direction:column;
  gap:var(--ss-sp-2);
  min-width:0;
}
.ssx-nav-cart-name{
  font-family:var(--ss-display);
  text-transform:uppercase;
  letter-spacing:-0.01em;
  font-size:1rem;
  line-height:1.1;
  margin:0;
  color:var(--ss-beige);
}
.ssx-nav-cart-attr{
  font-size:var(--ss-fs-small);
  color:var(--ss-text-muted);
  letter-spacing:0.04em;
  margin:0;
}
.ssx-nav-cart-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--ss-sp-4);
  margin-top:var(--ss-sp-1);
}
.ssx-nav-cart-price{
  font-size:var(--ss-fs-small);
  letter-spacing:0.1em;
  color:var(--ss-beige);
}
.ssx-nav-cart-remove{ font-size:0.66rem; color:var(--ss-text-faint); }

.ssx-nav-cart-sub{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--ss-sp-4);
  margin-bottom:var(--ss-sp-4);
}
.ssx-nav-cart-sub-val{
  font-family:var(--ss-display);
  font-size:var(--ss-fs-h3);
  letter-spacing:-0.01em;
  color:var(--ss-beige);
}
.ssx-nav-cart-note{
  font-size:var(--ss-fs-small);
  line-height:1.5;
  margin-bottom:var(--ss-sp-5);
}
.ssx-nav-cart-checkout{ width:100%; margin-bottom:var(--ss-sp-3); }
.ssx-nav-cart-continue{ width:100%; }

/* ---------- Search overlay ---------- */
.ssx-nav-search-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--ss-sp-4);
  margin-bottom:var(--ss-sp-6);
}
.ssx-nav-search-label{
  position:absolute;
  width:1px; height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}
.ssx-nav-search-pop{ margin-top:var(--ss-sp-6); }
.ssx-nav-search-pop-head{ margin-bottom:var(--ss-sp-4); }
.ssx-nav-search-tags{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:var(--ss-sp-3);
}
.ssx-nav-search-tag{
  display:inline-flex;
  align-items:center;
  padding:0.5rem 1rem;
  border:1px solid var(--ss-hairline);
  border-radius:var(--ss-r-pill);
  font-size:var(--ss-fs-small);
  letter-spacing:0.04em;
  color:var(--ss-text-muted);
  transition:border-color var(--ss-dur-1) var(--ss-ease),
             color var(--ss-dur-1) var(--ss-ease);
}
.ssx-nav-search-tag:hover{
  border-color:var(--ss-hairline-accent);
  color:var(--ss-beige);
}

/* ---------- Mobile menu ---------- */
.ssx-nav-menu-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--ss-sp-4);
  margin-bottom:var(--ss-sp-8);
}
.ssx-nav-menu-links{
  display:flex;
  flex-direction:column;
}
.ssx-nav-menu-links a{
  font-family:var(--ss-display);
  font-size:var(--ss-fs-h1);
  text-transform:uppercase;
  letter-spacing:-0.02em;
  color:var(--ss-beige);
  padding-block:var(--ss-sp-3);
  border-bottom:1px solid var(--ss-hairline);
  transition:color var(--ss-dur-1) var(--ss-ease);
  overflow-wrap:break-word;
}
.ssx-nav-menu-links a:hover{ color:var(--ss-orange); }
.ssx-nav-menu-foot{ margin-top:auto; padding-top:var(--ss-sp-8); }
/* Confident display tagline — italic accent intentionally NOT used here */
.ssx-nav-menu-tag{
  font-family:var(--ss-display);
  text-transform:uppercase;
  letter-spacing:-0.015em;
  line-height:1;
  font-size:var(--ss-fs-h3);
  font-weight:700;
  color:var(--ss-orange);
  margin:0 0 var(--ss-sp-5);
  display:block;
}
.ssx-nav-menu-mini{
  display:flex;
  flex-wrap:wrap;
  gap:var(--ss-sp-5);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .ssx-nav-mega{ transition:none; }
  .ssx-nav-mega__feature:hover .ssx-nav-mega__photo{ --_scale:1; }
}