/* ============================================================
   muayfitness.com — design system
   "Voltage" direction: electric lime + charcoal, Space Grotesk
   ============================================================ */

:root{
  --bg:#1c1e1a;          /* charcoal base            */
  --bg-deep:#141613;     /* footer / deepest         */
  --panel:#24261f;       /* raised card hover        */
  --panel-2:#2a2d24;     /* placeholder stripe hi    */
  --lime:#d8ff3e;        /* volt accent              */
  --lime-dim:#bfe22f;
  --ink:#f4f5f0;         /* primary text on dark     */
  --ink-70:rgba(244,245,240,.72);
  --ink-55:rgba(244,245,240,.68);   /* raised for WCAG AA body/caption text */
  --ink-45:rgba(244,245,240,.60);
  --ink-30:rgba(244,245,240,.30);   /* borders only — not text */
  --line:rgba(244,245,240,.12);
  --sand:#f4f5f0;        /* light section bg         */
  --ease:cubic-bezier(.2,.8,.2,1);
  --pad:clamp(20px,5vw,40px);   /* horizontal gutter */
  --maxw:1400px;                /* max content width  */
  --gut:max(var(--pad), calc((100% - var(--maxw)) / 2)); /* gutter that caps + centers content */
}

/* skip link + screen-reader-only text */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--lime);color:var(--bg);
  padding:12px 18px;font:700 12px 'Space Grotesk',sans-serif;letter-spacing:.1em}
.skip-link:focus{left:8px;top:8px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* headings reuse display classes; strip UA margins */
h1,h2,h3{margin:0;font-weight:inherit}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Space Grotesk',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:var(--lime);text-decoration:none;transition:color .2s var(--ease)}
a:hover{color:var(--ink)}
img{max-width:100%;display:block}
::selection{background:var(--lime);color:var(--bg)}
/* dual-ring focus stays visible on dark, light AND lime surfaces */
:focus-visible{outline:2px solid var(--lime);outline-offset:2px;
  box-shadow:0 0 0 2px rgba(10,11,9,.85);border-radius:2px}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* ---------- type scale ---------- */
.eyebrow{font:700 11px 'Space Grotesk',sans-serif;color:var(--lime);letter-spacing:.25em}
.display{font-weight:700;letter-spacing:-.03em;line-height:.95}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font:700 12px 'Space Grotesk',sans-serif;letter-spacing:.08em;
  padding:13px 22px;border-radius:2px;cursor:pointer;
  transition:transform .18s var(--ease),background .2s var(--ease),color .2s var(--ease);
  white-space:nowrap;
}
.btn--solid{background:var(--lime);color:var(--bg)}
.btn--solid:hover{background:#e6ff5c;color:var(--bg);transform:translateY(-2px)}
.btn--ghost{color:var(--lime);border:1px solid var(--lime)}
.btn--ghost:hover{background:var(--lime);color:var(--bg)}
/* solid-dark secondary — stays readable over BOTH charcoal and the lime panel */
.btn--dark{background:var(--bg);color:var(--lime);border:1px solid var(--lime)}
.btn--dark:hover{background:var(--lime);color:var(--bg);transform:translateY(-2px)}
.btn--block{width:100%;justify-content:center;padding:17px}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;justify-content:space-between;align-items:center;
  padding:18px var(--pad);transition:background .3s var(--ease);
}
.nav--blend{mix-blend-mode:difference}                 /* home hero */
.nav--solid{
  position:sticky;mix-blend-mode:normal;
  background:rgba(28,30,26,.88);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
/* blend nav becomes solid once past the hero, for legibility over lime/sand */
.nav--blend.nav--scrolled{mix-blend-mode:normal;background:rgba(28,30,26,.9);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav--blend.nav--scrolled .nav__logo,
.nav--blend.nav--scrolled .nav__links a,
.nav--blend.nav--scrolled .nav__bag,
.nav--blend.nav--scrolled .nav__burger{color:var(--ink)}
.nav__logo{font:700 18px 'Space Grotesk',sans-serif;color:var(--ink);letter-spacing:-.3px}
.nav__links{display:flex;gap:26px;align-items:center;
  font:600 12px 'Space Grotesk',sans-serif;letter-spacing:.15em}
.nav__links a{color:var(--ink)}
.nav--blend .nav__links a{color:#fff}
.nav__link--active{color:var(--lime);border-bottom:2px solid var(--lime);padding-bottom:2px}
.nav__bag{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid currentColor;padding:8px 15px;border-radius:2px;
  color:var(--ink);font:600 12px 'Space Grotesk',sans-serif;letter-spacing:.1em;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.nav--blend .nav__bag{color:#fff}
.nav__bag:hover{background:var(--lime);color:var(--bg);border-color:var(--lime)}
.nav__bag.bump{animation:bagBump .4s var(--ease)}
@keyframes bagBump{0%{transform:scale(1)}35%{transform:scale(1.18)}100%{transform:scale(1)}}
.nav__count{min-width:16px;text-align:center}

.nav__burger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  width:44px;height:44px;margin:-8px;z-index:2}
.nav__burger span{width:22px;height:2px;background:currentColor;transition:.25s var(--ease)}
.nav--blend .nav__burger{color:#fff}

/* mobile menu */
.mobile-menu{
  position:fixed;inset:0;z-index:59;background:var(--bg);
  display:flex;flex-direction:column;justify-content:center;gap:8px;
  padding:0 var(--pad);
  transform:translateX(100%);transition:transform .38s var(--ease);
  visibility:hidden;
}
.mobile-menu.open{transform:translateX(0);visibility:visible}
.mobile-menu a{
  color:var(--ink);font:700 clamp(34px,9vw,60px)/1 'Space Grotesk',sans-serif;
  letter-spacing:-2px;padding:10px 0;border-bottom:1px solid var(--line);
}
.mobile-menu a:hover{color:var(--lime)}

@media (max-width:720px){
  .nav__links{display:none}
  .nav__burger{display:flex}
}

/* ============================================================
   BRANDED PHOTO PLACEHOLDER (stands in for product photography)
   ============================================================ */
.ph{
  position:absolute;inset:0;overflow:hidden;
  background:
    repeating-linear-gradient(45deg,var(--panel) 0 11px,var(--panel-2) 11px 22px);
  display:grid;place-items:center;
}
.ph::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 40%,rgba(216,255,62,.05),transparent 70%)}
.ph__inner{
  position:relative;z-index:1;text-align:center;padding:16px;
  display:flex;flex-direction:column;gap:8px;align-items:center;
}
.ph__tag{font:700 9px 'Space Grotesk',sans-serif;letter-spacing:.22em;color:var(--lime);opacity:.8}
.ph__label{font:500 12px/1.35 ui-monospace,Menlo,monospace;color:var(--ink-45);max-width:80%}
.ph--light{background:repeating-linear-gradient(45deg,#e7e8e1 0 11px,#dedfd7 11px 22px)}
.ph--light .ph__label{color:rgba(28,30,26,.5)}
.ph--light .ph__tag{color:#1c1e1a;opacity:.55}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{background:var(--lime);overflow:hidden;padding:16px 0;white-space:nowrap}
.marquee__row{display:inline-flex;gap:48px;padding-left:48px;
  font:700 20px 'Space Grotesk',sans-serif;color:var(--bg);letter-spacing:.05em;
  animation:marquee 22s linear infinite;will-change:transform}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee__row{animation:none}}

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
.rv{opacity:0;transform:translateY(34px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ============================================================
   SECTION HELPERS
   ============================================================ */
/* content is gutter-padded but capped to --maxw and centered on wide screens */
.section{padding-block:clamp(70px,10vw,110px);padding-inline:var(--gut)}
.section--sand{background:var(--sand);color:var(--bg)}
.section--lime{background:var(--lime);color:var(--bg)}
.section--deep{background:var(--bg-deep)}
.grid{display:grid;gap:22px}

/* card hover lift */
.lift{transition:transform .2s var(--ease)}
.lift:hover{transform:translateY(-6px)}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--bg-deep);padding-block:clamp(28px,6vw,40px);padding-inline:var(--gut)}
.footer__row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;
  border-top:1px solid var(--line);padding-top:28px;margin-top:0}
.footer__brand{font:700 14px 'Space Grotesk',sans-serif;color:var(--ink)}
.footer__links{display:flex;gap:22px;flex-wrap:wrap;
  font:500 11px 'Space Grotesk',sans-serif;color:var(--ink-45);letter-spacing:.1em}
.footer__links a{color:var(--ink-45)}
.footer__links a:hover{color:var(--lime)}

/* ============================================================
   BAG DRAWER (cross-page cart, localStorage)
   ============================================================ */
.drawer-overlay{
  position:fixed;inset:0;z-index:80;background:rgba(10,11,9,.6);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease);backdrop-filter:blur(2px);
}
.drawer-overlay.open{opacity:1;visibility:visible}
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:81;width:min(400px,92vw);
  background:var(--bg);border-left:1px solid var(--line);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .38s var(--ease),visibility .38s;
  visibility:hidden;   /* keep contents out of the tab order while closed */
}
.drawer.open{transform:translateX(0);visibility:visible}
.drawer__head{display:flex;justify-content:space-between;align-items:center;
  padding:24px var(--pad);border-bottom:1px solid var(--line)}
.drawer__title{font:700 16px 'Space Grotesk',sans-serif;letter-spacing:.12em}
.drawer__close{font-size:24px;line-height:1;color:var(--ink-55);
  width:44px;height:44px;display:grid;place-items:center;margin:-8px -8px -8px 0}
.drawer__close:hover{color:var(--lime)}
.drawer__body{flex:1;overflow-y:auto;padding:12px var(--pad)}
.drawer__empty{padding:60px 0;text-align:center;color:var(--ink-45);
  font:400 14px 'Space Grotesk',sans-serif;display:flex;flex-direction:column;gap:18px;align-items:center}

.cart-item{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
.cart-item__thumb{width:64px;height:80px;flex:none;position:relative;border-radius:2px;overflow:hidden}
.cart-item__info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.cart-item__name{font:600 14px 'Space Grotesk',sans-serif;color:var(--ink)}
.cart-item__meta{font:400 11px 'Space Grotesk',sans-serif;color:var(--ink-45);letter-spacing:.05em}
.cart-item__price{font:600 14px 'Space Grotesk',sans-serif;color:var(--lime);margin-top:auto}
.cart-item__qty{display:flex;align-items:center;gap:10px;margin-top:6px}
.cart-item__qty button{width:30px;height:30px;border:1px solid var(--line);border-radius:2px;
  color:var(--ink);font-size:15px;display:grid;place-items:center;transition:.15s var(--ease)}
.cart-item__qty button:hover{border-color:var(--lime);color:var(--lime)}
.cart-item__qty span{font:600 13px 'Space Grotesk',sans-serif;min-width:18px;text-align:center}
.cart-item__remove{font:500 10px 'Space Grotesk',sans-serif;color:var(--ink-55);
  letter-spacing:.1em;align-self:flex-start;margin-top:2px}
.cart-item__remove:hover{color:#e06a6a}

.drawer__foot{padding:20px var(--pad);border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:14px}
.drawer__subtotal{display:flex;justify-content:space-between;align-items:baseline}
.drawer__subtotal span:first-child{font:600 12px 'Space Grotesk',sans-serif;
  color:var(--ink-55);letter-spacing:.15em}
.drawer__subtotal span:last-child{font:700 22px 'Space Grotesk',sans-serif;color:var(--ink)}
.drawer__note{font:400 11px 'Space Grotesk',sans-serif;color:var(--ink-45);text-align:center}

/* toast */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);
  z-index:90;background:var(--lime);color:var(--bg);
  font:700 12px 'Space Grotesk',sans-serif;letter-spacing:.1em;
  padding:14px 22px;border-radius:3px;opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease);
  box-shadow:0 8px 30px rgba(0,0,0,.4);
}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  .nav__bag.bump{animation:none}
  .toast,.toast.show{transform:translate(-50%,0);transition:opacity .2s linear}
}