/* ================= HEADER ================= */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@200;300;400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@100;200;300&display=swap');
/* Put this near the top of your main CSS */
@font-face{
  font-family: "Benzin";
  src: url("/assets/fonts/benzin-bold.woff2") format("woff2"),
       url("/assets/fonts/benzin-bold.ttf") format("truetype"); /* TTF here */
  font-weight: 700;            /* most “Bold” fonts are 700 */
  font-style: normal;
  font-display: swap;
}

/* === Poptein (single weight) === */
@font-face{
  font-family: "Poptein";
  src: url("/assets/fonts/Poptein-Regular.otf") format("opentype");
  font-weight: 400;   /* change if your file is actually 500/600/700 */
  font-style: normal;
  font-display: swap;
}


/* If you have a VARIABLE font instead, use this one block instead of the two above:
@font-face{
  font-family: "MyNewFont";
  src: url("/assets/fonts/MyNewFont-VF.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
*/



/* Chrome wrapper (topbar + nav) */
.chrome{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transform: translateY(0);
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.chrome.is-hidden{ transform: translateY(calc(-1 * var(--chrome-h))); }

/* Topbar (announcement) */
.topbar{ background:#1C1C1C; color:#fff; border-bottom:1px solid #e5e7eb; }
.topbar__inner{
  display:flex; align-items:center; justify-content:center;
  height:var(--topbar-h); padding:0 24px;

  /* match the menu font */
  font-family: "Instrument Sans", Inter, system-ui, sans-serif;
  font-weight: 100;                 /* thinnest Instrument Sans */
  font-size:14px;
  letter-spacing:.06em;             /* a bit more airy for thin weights */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


/* Nav wrapper */
.nav{
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(140%) blur(6px);
  background:rgba(255,255,255,.75);
}

/* Make only the header's container full-width so edges can align */
.nav > .container{
  max-width:100%;
  padding-left:24px;
  padding-right:24px;
}

/* Layout: brand LEFT, links CENTER, icons RIGHT */
.nav__row{
  display:grid !important;                   /* override any flex in base CSS */
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);  /* left | center | right */
  align-items:center;
  gap:24px;
}

/* Left (brand) */
.nav__left{ justify-self:start; padding-left: clamp(16px, 2vw, 48px); }
.brand{
  display:flex; align-items:center; gap:10px;
  color:var(--text); text-decoration:none; font-weight:800;
}
.brand__logo{
  width:36px; height:36px; display:inline-grid; place-items:center;
  border-radius:10px; color:#fff;
  background:linear-gradient(135deg,var(--accent1),var(--accent2));
  font-family:Orbitron, Inter, sans-serif; font-weight:700;
  box-shadow:0 8px 24px rgba(37,99,235,.25), 0 12px 28px rgba(147,51,234,.18);
}
.brand--sm .brand__logo{ width:28px; height:28px; font-size:14px; }
.brand__text{
  font-family: "Benzin", "Manrope", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  letter-spacing: .02em;   /* tweak if needed */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* Center (nav links) */
.nav__center{
  justify-self:center;
  display:flex; gap:20px;
}
.nav__center a,
.nav__links a{
  position:relative;
  color:var(--text);
  text-decoration:none;
  font-family: "Poptein", system-ui, -apple-system, "Segoe UI", Inter, sans-serif;
  font-weight: 400;          /* match the @font-face weight */
  letter-spacing: .02em;
  opacity:.95;
  transition:opacity .2s ease;
}



.nav__center a:hover,
.nav__links a:hover{ opacity:1; }

/* Animated underline */
.nav__center a::after,
.nav__links a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-4px;
  height:2px; background:currentColor;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .25s ease;
}
.nav__center a:hover::after,
.nav__center a:focus-visible::after,
.nav__links a:hover::after,
.nav__links a:focus-visible::after{
  transform:scaleX(1);
}
.nav__center a[aria-current="page"]::after,
.nav__links a[aria-current="page"]::after{ transform:scaleX(1); }
@media (prefers-reduced-motion:reduce){
  .nav__center a::after, .nav__links a::after{ transition:none; }
}

/* Right (icons) */
.nav__right{
  justify-self:end;
  display:flex; align-items:center; gap:16px;
}

/* Bigger icon hit-area + larger SVG */
.nav__icon{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px;            /* bigger click target */
  color:var(--text);
  transition:opacity .2s ease;
}
.nav__icon:hover{ opacity:.7; }
.nav__icon svg{ width:28px; height:28px; }  /* bigger glyph */



/* --- Fully hide header when scrolling --- */
.chrome {
  will-change: transform;
}

/* Move the entire chrome off-screen by its own height */
.chrome.is-hidden {
  transform: translateY(-100%);
}

/* While hidden, remove any visual seams from nav/topbar */
.chrome.is-hidden .nav,
.chrome.is-hidden .topbar {
  border-bottom-color: transparent;
  background: transparent;
  backdrop-filter: none;
}

/* (Optional) if you still see a hairline on some GPUs, uncomment: */
/* .chrome { backface-visibility: hidden; transform: translateZ(0); } */


/* ================= ACCOUNT MODAL ================= */

:root{
  --modal-shadow: 0 24px 70px rgba(0,0,0,.25);
  --modal-line: rgba(0,0,0,.08);
}

.has-modal { overflow: hidden; }

.account-overlay{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
  z-index: 1000;
}
.account-overlay.is-open{ opacity:1; pointer-events:auto; }

.account-modal{
  position: fixed; inset:0; display:grid; place-items:center;
  pointer-events:none; z-index:1001;
}
.account-modal.is-open{ pointer-events:auto; }

.account-modal__dialog{
  width: min(520px, 92vw);
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--modal-shadow);
  transform: translateY(8px) scale(.98);
  opacity: 0;
  transition: transform .28s cubic-bezier(.22,.61,.36,1), opacity .2s ease;
}
.account-modal.is-open .account-modal__dialog{
  transform: none; opacity: 1;
}

/* Header */
.account-modal__head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 18px 0 18px;
}
.account-modal__title{
  font-size: 18px; font-weight: 800; letter-spacing:.2px;
  margin: 0 8px 0 2px;
}
.account-modal__close{
  appearance:none; border:0; background:transparent; cursor:pointer;
  width: 36px; height: 36px; border-radius: 10px;
  display:grid; place-items:center; color:#111;
}
.account-modal__close:hover{ background: rgba(0,0,0,.04); }

/* Tabs */
.account-tabs{
  display:flex; gap:8px; padding: 12px 18px 0 18px;
  border-bottom: 1px solid var(--modal-line);
}
.account-tab{
  appearance:none; border:0; background:transparent; cursor:pointer;
  padding: 10px 14px; border-radius: 10px;
  font-weight: 700; opacity:.75;
}
.account-tab[aria-selected="true"]{
  background: rgba(0,0,0,.06); opacity:1;
}

/* Body */
.account-modal__body{ padding: 18px; }
.auth-form{ display:none; }
.auth-form.is-active{ display:block; }

.form-grid{ display:grid; gap:12px; }
.field{ display:grid; gap:6px; }
.field label{ font-size: 13px; font-weight: 700; color:#111; }
.input{
  height: 44px; padding: 0 12px;
  border: 1px solid var(--modal-line); border-radius: 12px;
  background:#fff; outline: none;
}
.input:focus{ border-color:#111; box-shadow: 0 0 0 3px rgba(0,0,0,.08); }

.password-wrap{ position: relative; }
.password-toggle{
  position:absolute; right:6px; top:6px; height:32px; padding:0 10px;
  border:0; background:transparent; border-radius:8px; cursor:pointer;
}
.password-toggle:hover{ background:rgba(0,0,0,.06); }

.actions{
  display:flex; align-items:center; justify-content:space-between;
  margin-top: 6px;
}
.link{ color:#111; text-decoration: underline; text-underline-offset: 3px; font-weight:600; }
.btn{
  appearance:none; border:1px solid transparent; background:#111; color:#fff;
  height: 44px; padding: 0 16px; border-radius: 12px; font-weight:800;
  cursor:pointer;
}
.btn:hover{ filter: brightness(.96); }
.btn--ghost{ background:#fff; border-color: var(--modal-line); color:#111; }

.policy{
  font-size:12px; color:#555; line-height:1.45; margin-top: 6px;
}



.topbar__inner{
  display:flex; align-items:center; justify-content:center;
  height:var(--topbar-h); padding:0 24px;

  font-family: "Inter Tight", "Instrument Sans", Inter, system-ui, sans-serif;
  font-weight: 100;                 /* hairline */
  font-size:12px;
  letter-spacing:.04em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}




/* Bigger brand text without changing header height */
:root{
  --brand-scale: 1.35;         /* tweak to taste */
  --brand-nudge-y: -1px;       /* tiny vertical alignment tweak */
}

.nav__left .brand__text{
  display: inline-block;        /* so transform doesn't affect siblings */
  transform: scale(var(--brand-scale)) translateY(var(--brand-nudge-y));
  transform-origin: left center;/* grow from the left */
  line-height: 1;               /* prevent extra vertical metrics */
  will-change: transform;
}

/* (optional) dial it back on small screens */
@media (max-width: 480px){
  :root{ --brand-scale: 1.2; --brand-nudge-y: 0; }
}




/* Put this at the END of /styles/header.css */
.topbar__inner{
  font-family: "Poptein", system-ui, -apple-system, "Segoe UI", Inter, sans-serif;
  font-weight: 200;     /* use 400/700 to match your Poptein file */
  letter-spacing: .02em;/* Poptein usually needs less tracking than Instrument Sans */
  line-height: 1;       /* keeps the bar height tidy */
}





/* ===== Mobile header fixes (≤480px) ===== */
@media (max-width: 480px){
  /* Make sure the center nav is visible on phones */
  .nav__center,
  .nav__links{
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  /* Keep only SHOP visible to avoid crowding */
  .nav__links a:not(.cta){
    display: none !important;
  }

  /* Ensure SHOP looks like a compact button */
  .nav__links .cta{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 12px;
    border: 1px solid #111;
    border-radius: 8px;
    background: #fff;
    color: #111;
    font-weight: 800;
    letter-spacing: .02em;
    line-height: 1;
  }

  /* Shrink AFTERTOUGE wordmark */
  :root{
    --brand-scale: 0.9;   /* try 0.85 if you want even smaller */
    --brand-nudge-y: 0;
  }

  /* Tighten header spacing */
  .nav__row{ grid-template-columns: 1fr auto 1fr; gap: 12px; }
  .nav__left{ padding-left: 12px; }
  .nav__right{ gap: 10px; }
  .nav__icon{ width: 34px; height: 34px; }
  .nav__icon svg{ width: 22px; height: 22px; }
}





/* ===== Desktop safety reset (≥481px) ===== */
@media (min-width: 481px){
  /* restore 3-column layout */
  .nav__row{
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) !important;
  }

  /* show the center nav links on desktop */
  .nav__center{
    display: flex !important;
  }

  /* brand back to normal size/position */
  .nav__left{ justify-self: start; }
  .brand__text{
    transform: none !important;
    font-size: 22px; /* or whatever you had originally */
    line-height: 1;
  }

  /* hide mobile-only controls + drawer on desktop */
  .mobile-menu-btn{ display: none !important; }
  .mobile-drawer,
  .mobile-drawer__overlay{ display: none !important; }
}



.chrome {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transform: translateY(0);
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}

/* Use either var height or fallback -100% (keep both if you have them) */
.chrome.is-hidden { transform: translateY(calc(-1 * var(--chrome-h))); }
/* fallback for older CSS where --chrome-h isn't set */
@supports not (transform: translateY(calc(-1 * var(--chrome-h)))) {
  .chrome.is-hidden { transform: translateY(-100%); }
}



/* GPU hint to keep the slide-away crisp on mobile */
.chrome { backface-visibility: hidden; transform: translateZ(0); }




/* === Cart badge === */
.nav__icon{ position: relative; }               /* allow absolute badge */
.cart-badge[hidden]{ display:none !important; } /* hard hide */
.cart-badge{
  position: absolute; top: 2px; right: 2px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9999px;
  background: #ef4444; color: #fff;
  font-size: 11px; font-weight: 800; line-height: 18px;
  display: inline-grid; place-items: center;
  box-shadow: 0 0 0 2px #fff;                   /* crisp ring against header */
  transform: translate(20%, -20%);              /* nudge outward a bit */
}
@media (max-width: 480px){
  .cart-badge{
    min-width: 16px; height: 16px; line-height: 16px; font-size: 10px;
    top: 0; right: 0; transform: translate(35%, -35%);
  }
}



/* GPU hint so the slide-away stays crisp on mobile */
.chrome{ backface-visibility: hidden; transform: translateZ(0); }

/* Fallback already in your CSS, but keep this for safety */
.chrome.is-hidden { transform: translateY(calc(-1 * var(--chrome-h))); }
@supports not (transform: translateY(calc(-1 * var(--chrome-h)))) {
  .chrome.is-hidden { transform: translateY(-100%); }
}

/* === Cart badge === */
.nav__icon{ position: relative; }
.cart-badge[hidden]{ display:none !important; }
.cart-badge{
  position: absolute; top: 2px; right: 2px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9999px;
  background: #ef4444; color: #fff;
  font-size: 11px; font-weight: 800; line-height: 18px;
  display: inline-grid; place-items: center;
  box-shadow: 0 0 0 2px #fff;
  transform: translate(20%, -20%);
}
@media (max-width: 480px){
  .cart-badge{
    min-width: 16px; height: 16px; line-height: 16px; font-size: 10px;
    top: 0; right: 0; transform: translate(35%, -35%);
  }
}




/* Header slide-away tuning */
.chrome{
  transition: transform .26s cubic-bezier(.2,.7,.3,1); /* faster & springier */
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Keep your existing hidden transform – just leaving here for clarity */
.chrome.is-hidden { transform: translateY(calc(-1 * var(--chrome-h))); }
@supports not (transform: translateY(calc(-1 * var(--chrome-h)))) {
  .chrome.is-hidden { transform: translateY(-100%); }
}



/* ===== Home-only transparent header (index.html) ===== */
.is-home .nav{
  background: transparent !important;
  border-bottom-color: transparent !important;
  backdrop-filter: none !important;
  /* flip all header UI that uses var(--text) to white */
  --text: #fff;
}

/* Make sure all header content renders white on the hero */
.is-home .brand,
.is-home .brand__text,
.is-home .nav__links a,
.is-home .nav__icon{
  color: #fff !important;
  opacity: 1 !important;
}


/* Keep it transparent even while sliding/hiding */
.is-home .chrome.is-hidden .nav{
  background: transparent !important;
  border-bottom-color: transparent !important;
  backdrop-filter: none !important;
}

/* If you also want the announcement bar transparent on home, keep this.
   Remove it if you prefer the dark bar to stay. */
.is-home .topbar{
  background: transparent !important;
  color: #fff !important;
  border-bottom-color: transparent !important;
}
/* ===== Home hairline fix: remove borders & seams ===== */
.is-home .nav,
.is-home .topbar,
.is-home .hero{
  border: 0 !important;                 /* don't just make it transparent */
}

/* Make sure nothing draws a seam */
.is-home .nav,
.is-home .topbar,
.is-home .chrome{
  box-shadow: none !important;
  outline: 0 !important;
  backdrop-filter: none !important;
}

/* Safari/rounding guard: keep layers on whole pixels */
.is-home .chrome,
.is-home .hero{
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* If a device still shows a hairline, nudge the hero up by 1px */
@supports (margin-top: -1px){
  .is-home .hero{ margin-top: -1px; }    /* last-resort guard */
}
/* --- FIX: let the header slide away again on home --- */

/* Don't set a transform on the visible state; keep the GPU hint without overriding */
.is-home .chrome{
  backface-visibility: hidden;   /* keep the seam fix */
  transform: none !important;    /* ← stop clobbering .is-hidden */
}

/* Ensure the hidden-state transform always wins */
.chrome.is-hidden{
  transform: translateY(calc(-1 * var(--chrome-h))) translateZ(0) !important;
}
@supports not (transform: translateY(calc(-1 * var(--chrome-h)))) {
  .chrome.is-hidden{ transform: translateY(-100%) translateZ(0) !important; }
}

/* Keep the hero’s GPU hint (safe to leave here) */
.is-home .hero{
  backface-visibility: hidden;
  transform: translateZ(0);
}
/* Header links — text only + animated underline */
.nav__center a,
.nav__links a{
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: var(--text);
  font-family: "Poptein", "Manrope", Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1;
  opacity: .95;
  transition: opacity .2s ease;
  padding: 0;           /* no pill spacing */
  border: 0;            /* safety */
  box-shadow: none;
}

/* animated underline (grows left → right) */
.nav__center a::after,
.nav__links a::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;         /* gap under text */
  height: 2px;
  width: 100%;
  background: currentColor;     /* white on home, var(--text) elsewhere */
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s ease;
}

.nav__center a:hover,
.nav__links a:hover{ opacity: 1; }

.nav__center a:hover::after,
.nav__center a:focus-visible::after,
.nav__links a:hover::after,
.nav__links a:focus-visible::after{
  transform: scaleX(1);
}

/* keep underline for current page */
.nav__center a[aria-current="page"]::after,
.nav__links a[aria-current="page"]::after{
  transform: scaleX(1);
}

/* Make SHOP look like the others */
.nav__links a.cta{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  height: auto !important;
  border-radius: 0 !important;
  color: inherit !important;
  font-weight: inherit;
}
/* Unify header link color via a variable so underline always matches */
.nav { --link-color: var(--text); }
.is-home .nav { --link-color: #fff; } /* white over the hero */

/* Apply everywhere, including .cta */
.nav__center a,
.nav__links a {
  color: var(--link-color) !important;
  position: relative;
  display: inline-block;
}

.nav__center a::after,
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background: var(--link-color) !important; /* ← no more black */
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s ease;
}

.nav__center a:hover::after,
.nav__center a:focus-visible::after,
.nav__links a:hover::after,
.nav__links a:focus-visible::after {
  transform: scaleX(1);
}

/* Keep underline visible for current page (HOME on index) */
.nav__center a[aria-current="page"]::after,
.nav__links a[aria-current="page"]::after {
  transform: scaleX(1);
}

/* Make SHOP look like the others on desktop too */
@media (min-width:481px){
  .nav__links a.cta{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    height: auto !important;
    border-radius: 0 !important;
    color: var(--link-color) !important;
  }
}



/* ——— NAV HOVER UNDERLINE (bullet-proof) ——— */

/* Drive link/underline color from one var */
.nav { --link-color: var(--text); }
html.is-home .nav { --link-color: #fff; }  /* white over the hero */

/* Make sure the links are positioned elements (so ::after has a box) */
html.is-home .nav__center a,
html.is-home .nav__links a,
.nav__center a,
.nav__links a{
  display: inline-block !important;
  position: relative !important;
  color: var(--link-color) !important;
  text-decoration: none !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  font-family: "Poptein","Manrope",Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: .02em !important;
  line-height: 1 !important;
}

/* animated underline (left → right) */
html.is-home .nav__center a::after,
html.is-home .nav__links a::after,
.nav__center a::after,
.nav__links a::after{
  content: "" !important;
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background: var(--link-color) !important;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s ease;
}

html.is-home .nav__center a:hover::after,
html.is-home .nav__center a:focus-visible::after,
html.is-home .nav__links a:hover::after,
html.is-home .nav__links a:focus-visible::after,
.nav__center a:hover::after,
.nav__center a:focus-visible::after,
.nav__links a:hover::after,
.nav__links a:focus-visible::after{
  transform: scaleX(1);
}

/* keep underline visible for current page (optional) */
.nav__center a[aria-current="page"]::after,
.nav__links a[aria-current="page"]::after{
  transform: scaleX(1);
}
/* Desktop: add a little space between HOME, DROPS, ABOUT, SHOP */
@media (min-width: 481px){
  .nav__center,
  .nav__links{
    column-gap: 14px !important; /* tweak: 12–20px */
    gap: 24px !important;
  }
}