/* AFTERTOUGE — Header mobile overrides (≤480px) */

/* --- layout: [menu button] [brand centered] [icons] --- */
@media (max-width: 480px){
  .nav > .container{ padding-left: 12px; padding-right: 12px; }
  .nav__row{
    display: grid !important;
    grid-template-columns: 44px 1fr 92px !important; /* btn | title | icons */
    align-items: center;
    gap: 8px !important;
    min-height: 56px;
  }

  /* keep desktop brand hidden; show mobile brand dead center */
  .nav__left .brand.brand--desktop{ display: none !important; }

  .nav__brand{
    display: block !important;
    justify-self: center !important;
    text-align: center;
    pointer-events: none; /* so taps pass through title area */
  }
  .nav__brand .brand{
    pointer-events: auto; /* links still clickable */
  }

  /* tiny, responsive wordmark */
  .nav__brand .brand__text{
    font-weight: 800;
    letter-spacing: .01em;
    font-size: clamp(14px, 5.2vw, 18px);
    line-height: 1;
  }

  /* right icons tighter */
  .nav__right{ gap: 8px !important; }
  .nav__icon{ width: 36px; height: 36px; }
  .nav__icon svg{ width: 22px; height: 22px; }

  /* hide center desktop links on phones */
  .nav__center.nav__links{ display: none !important; }

  /* --- hamburger button --- */
  .mobile-menu-btn{
    appearance: none;
    width: 36px; height: 36px;
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 8px;
    display: grid; place-items: center;
    color: #111;
  }
  .mobile-menu-btn:active{ transform: translateY(1px); }

  /* --- drawer + overlay --- */
  .mobile-menu-overlay{
    position: fixed; inset: 0;
    background: rgba(0,0,0,.4);
    backdrop-filter: blur(1.5px);
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
    z-index: 1200;
  }
  .mobile-menu-overlay.is-open{
    opacity: 1; pointer-events: auto;
  }

  .mobile-menu{
    position: fixed; top: 0; left: 0;
    height: 100dvh; width: 70vw; max-width: 360px;
    background: #fff;
    border-right: 1px solid #eee;
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
    transform: translateX(-100%);
    transition: transform .32s cubic-bezier(.22,.61,.36,1);
    z-index: 1201;
    display: flex; flex-direction: column;
  }
  .mobile-menu.is-open{ transform: translateX(0); }

  .mobile-menu__head{
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px; border-bottom: 1px solid #f1f5f9;
  }
  .mobile-menu__title{
    margin: 0; font-size: 14px; font-weight: 800; letter-spacing: .02em;
  }
  .mobile-menu__close{
    appearance: none; width: 34px; height: 34px;
    border: 1px solid #e5e7eb; background: #fff; border-radius: 8px;
    display: grid; place-items: center; color: #111;
  }

  .mobile-menu__nav{ padding: 8px 8px 14px; }
  .mobile-menu__nav a{
    display: block; padding: 12px 10px; border-radius: 10px;
    color: #111; text-decoration: none; font-weight: 700;
  }
  .mobile-menu__nav a:hover{ background: #f8fafc; }

  .mobile-menu__foot{
    margin-top: auto; padding: 10px; border-top: 1px solid #f1f5f9;
    display: grid; gap: 8px;
  }
  .mobile-menu__btn{
    appearance: none; border: 1px solid #111; background: #111; color: #fff;
    height: 42px; border-radius: 10px; font-weight: 800;
  }
  .mobile-menu__btn--ghost{
    background: #fff; color: #111; border-color: #e5e7eb;
  }

  /* lock scroll when drawer open */
  html.has-mobile-menu{ overflow: hidden; }
}



/* Remove border from the mobile menu icon (≤480px) */
@media (max-width: 480px){
  .mobile-menu-btn{
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .mobile-menu-btn:hover,
  .mobile-menu-btn:active{
    background: transparent !important;
  }
  /* keep an accessible focus ring without a border */
  .mobile-menu-btn:focus-visible{
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }
}




/* =========================================================
   AFTERTOUGE — header fixes for ≤480px
   File: /styles/header-480.css
   ========================================================= */

/* Keep header paddings tight so icons never push out */
.nav > .container{
  padding-left: clamp(8px, 3vw, 12px);
  padding-right: clamp(8px, 3vw, 12px);
}

/* Three columns on phones: [menu] [brand centered] [icons]  */
.nav .nav__row{
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center;
  gap: clamp(6px, 2.2vw, 12px);
}

/* Left: hamburger (no border) */
.mobile-menu-btn{
  border: 0 !important;
  background: transparent !important;
  padding: 6px;
  width: clamp(32px, 8vw, 40px);
  height: clamp(32px, 8vw, 40px);
  display: inline-flex; align-items: center; justify-content: center;
}
.mobile-menu-icon{
  width: clamp(18px, 6vw, 24px);
  height: clamp(18px, 6vw, 24px);
}

/* Center: brand — keep truly centered, shrink as space tightens */
.nav__center--brandonly{ justify-self: center; min-width: 0; }
.nav__center--brandonly .brand{ text-decoration: none; }
.nav__center--brandonly .brand__text{
  display: block;
  font-weight: 800;
  font-size: clamp(14px, 5.2vw, 18px);
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 68vw; /* leaves room for icons on both sides */
  text-align: center;
}

/* Right: account + cart — scale down instead of overflowing */
.nav__right{
  justify-self: end;
  display: inline-flex; align-items: center;
  gap: clamp(8px, 2.6vw, 12px);
  min-width: auto;
}
.nav__icon{
  width: clamp(28px, 9vw, 40px);
  height: clamp(28px, 9vw, 40px);
  display: inline-flex; align-items: center; justify-content: center;
}
.nav__icon svg{
  width: clamp(18px, 5.5vw, 24px);
  height: clamp(18px, 5.5vw, 24px);
}

/* Keep the whole header content clipped inside on tiny widths */
.nav{ overflow: hidden; }




/* =========================================================
   ULTRA-NARROW HEADER GUARDRAILS
   Keep order: [menu] [AFTERTOUGE] [account | cart]
   ========================================================= */

/* Baseline from earlier: 3 columns */
@media (max-width: 480px){
  .nav .nav__row{
    grid-template-columns: auto 1fr auto !important;
    align-items: center;
  }
  /* Let the center truly shrink */
  .nav__center--brandonly,
  .nav__center--brandonly .brand,
  .nav__center--brandonly .brand__text{ min-width: 0; }
}

/* < 320px — start tightening spacing/sizes */
@media (max-width: 320px){
  .nav > .container{ padding-left: 8px; padding-right: 8px; }
  .nav .nav__row{ gap: 8px; }

  .mobile-menu-btn{ width: 30px; height: 30px; padding: 4px; }
  .mobile-menu-icon{ width: 18px; height: 18px; }

  .nav__right{ gap: 8px; }
  .nav__icon{ width: 30px; height: 30px; }
  .nav__icon svg{ width: 18px; height: 18px; }

  /* Centered brand: shrink and cap width so sides fit */
  .nav__center--brandonly .brand__text{
    font-size: 14px;
    max-width: 56vw;           /* reserve space for left + right */
    letter-spacing: .02em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-align: center;
  }
}

/* < 260px — smaller icons + smaller brand cap */
@media (max-width: 260px){
  .nav > .container{ padding-left: 6px; padding-right: 6px; }
  .nav .nav__row{ gap: 6px; }

  .mobile-menu-btn{ width: 26px; height: 26px; padding: 3px; }
  .mobile-menu-icon{ width: 16px; height: 16px; }

  .nav__right{ gap: 6px; }
  .nav__icon{ width: 26px; height: 26px; }
  .nav__icon svg{ width: 16px; height: 16px; }

  .nav__center--brandonly .brand__text{
    font-size: 12px;
    max-width: 52vw;           /* give more room to the sides */
  }
}

/* < 230px — final squeeze; still no overlap */
@media (max-width: 230px){
  .nav .nav__row{ gap: 4px; }

  .mobile-menu-btn{ width: 24px; height: 24px; padding: 2px; }
  .mobile-menu-icon{ width: 14px; height: 14px; }

  .nav__icon{ width: 24px; height: 24px; }
  .nav__icon svg{ width: 14px; height: 14px; }

  .nav__center--brandonly .brand__text{
    font-size: 11px;
    max-width: 48vw;           /* reserve ~half for icons */
    letter-spacing: .01em;
  }
}

/* Always keep content clipped inside the header at tiny widths */
@media (max-width: 480px){
  .nav{ overflow: hidden; }
  .nav__right{ flex-wrap: nowrap; }
}



.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%); }
}




/* 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%); }
}




/* Anchor the badge to the icon box */
.nav__icon{ position: relative; }

/* Mobile: place the badge half-in / half-out of the top-right corner */
@media (max-width: 480px){
  .nav__icon .cart-badge{
    position: absolute;
    top: 0 !important;
    right: 0 !important;
    transform: translate(50%, -50%) !important; /* nudge: 45–48% if you want slightly more inside */
  }
}
/* anchor for absolute positioning */
.nav__icon { position: relative; }

/* Mobile: align badge to the SVG's top-right corner (not the 36×36 box) */
@media (max-width: 480px){
  .nav__icon .cart-badge{
    position: absolute;
    /* half of (icon box - svg glyph) vertically + horizontally */
    top:  calc((clamp(28px, 9vw, 40px) - clamp(18px, 5.5vw, 24px)) / 2) !important;
    right: calc((clamp(28px, 9vw, 40px) - clamp(18px, 5.5vw, 24px)) / 2) !important;
    transform: translate(50%, -50%) !important; /* keep the same overlap look */
  }
}
/* Remove white ring around cart badge (desktop + mobile) */
.nav__icon .cart-badge{
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;       /* in case an outline was used */
}




/* Home only (index): make the hamburger icon white on mobile */
@media (max-width: 480px){
  html.is-home .mobile-menu-btn{
    color:#fff !important;                 /* sets 'currentColor' for the SVG */
    -webkit-tap-highlight-color: transparent;
  }
  html.is-home .mobile-menu-btn .mobile-menu-icon,
  html.is-home .mobile-menu-icon{
    color:#fff !important;                 /* belt & suspenders */
    stroke: currentColor !important;       /* Safari: ensure stroke uses it */
  }

  /* Optional: white focus ring for accessibility */
  html.is-home .mobile-menu-btn:focus-visible{
    outline: 2px solid rgba(255,255,255,.9) !important;
    outline-offset: 2px;
  }
}
/* ===== Kill borders/boxes on header links (≤480px) ===== */
@media (max-width:480px){
  /* Header nav links (HOME/DROPS/ABOUT/SHOP) */
  .nav__links a,
  .nav__center a{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    height: auto !important;
    color: inherit !important;
    font: inherit !important;
    line-height: inherit !important;
  }

  /* Remove any underline animation that could look like a box */
  .nav__links a::before,
  .nav__links a::after,
  .nav__center a::before,
  .nav__center a::after{
    content: none !important;
  }

  /* Keep an accessible focus style without a box */
  .nav__links a:focus,
  .nav__links a:focus-visible,
  .nav__center a:focus,
  .nav__center a:focus-visible{
    outline: none !important;
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  /* Drawer links (just in case) */
  .mobile-menu__nav a{
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
  }
}