/* =========================================================
   TOXICOTRIBE — DESIGN SYSTEM
   Sports x Streetwear x Pop Culture x Customization
   ========================================================= */

/* ---------------------------------------------------------
   BRAND TYPEFACES — self-hosted, no third-party request.

   Moon Walk  → the wordmark only. One weight, display-only letterforms.
   Goodly     → everything that carries information: headings, nav,
                buttons, body copy, prices. It's the only one of the three
                with a real weight range (400/500/600/700), which is what
                makes hierarchy possible.
   Agency     → accent voice: the announcement bar and small caps labels.
                Single weight, so it's kept to places that need exactly one.

   font-display:swap so text paints immediately in the fallback and
   re-renders when the face arrives — never an invisible page.

   IMPORTANT: every stack below keeps system fallbacks after the brand face.
   These typefaces have no rupee glyph (U+20A8), so that character — and
   anything else outside their coverage — renders from the fallback instead
   of turning into a blank box. See the currency note in inc/setup.php.
   --------------------------------------------------------- */
@font-face{
  font-family:"Moon Walk";
  src:url("../fonts/moonwalk-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Agency";
  src:url("../fonts/agency-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Goodly";
  src:url("../fonts/goodly-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Goodly";
  src:url("../fonts/goodly-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Goodly";
  src:url("../fonts/goodly-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  /* 700 also answers for 800 — Goodly has no heavier cut, and letting the
     browser synthesise one smears these rounded geometric letterforms. */
  font-family:"Goodly";
  src:url("../fonts/goodly-700.woff2") format("woff2");
  font-weight:700 900; font-style:normal; font-display:swap;
}

:root{
  /* ---- Color: brand ---- */
  --tt-red:            #C8102E;
  --tt-red-dark:       #9C0C24;
  --tt-red-tint:       #FDEAEC;

  --tt-black:          #0A0A0A;
  --tt-charcoal:       #1B1B1D;
  --tt-charcoal-2:     #2B2B2E;

  --tt-white:          #FFFFFF;
  --tt-off-white:      #F3F1EC;

  --tt-gray-100:       #F1F1F0;
  --tt-gray-200:       #E4E3E1;
  --tt-gray-300:       #C9C8C5;
  --tt-gray-400:       #9C9B98;
  --tt-gray-500:       #706F6C;
  --tt-gray-600:       #4A4A48;
  --tt-gray-700:       #2E2E2C;

  /* ---- Color: semantic ---- */
  --c-bg:              var(--tt-white);
  --c-bg-inverse:      var(--tt-black);
  --c-surface:         var(--tt-off-white);
  --c-text:            var(--tt-black);
  --c-text-muted:      var(--tt-gray-500);
  --c-text-inverse:    var(--tt-white);
  --c-border:          var(--tt-gray-200);
  --c-border-strong:   var(--tt-black);
  --c-accent:          var(--tt-red);
  --c-accent-dark:     var(--tt-red-dark);
  --c-sale:            var(--tt-red);
  --c-success:         #1F5F3A;

  /* ---- Typography ---- */
  --font-display: "Goodly", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Goodly", "Segoe UI", system-ui, sans-serif;
  --font-logo:    "Moon Walk", "Goodly", system-ui, sans-serif;
  --font-accent:  "Agency", "Goodly", system-ui, sans-serif;

  --fs-hero:      clamp(3.2rem, 8vw, 7.5rem);
  --fs-display:   clamp(2.4rem, 5vw, 4.2rem);
  --fs-h1:        clamp(2rem, 3.6vw, 3rem);
  --fs-h2:        clamp(1.6rem, 2.6vw, 2.25rem);
  --fs-h3:        1.375rem;
  --fs-h4:        1.05rem;
  --fs-body-lg:   1.125rem;
  --fs-body:      1rem;
  --fs-body-sm:   0.875rem;
  --fs-label:     0.75rem;
  --fs-micro:     0.6875rem;

  --lh-tight:  1.02;
  --lh-snug:   1.15;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7; /* long-form editorial copy (page.php) */

  --ls-tight:  -0.01em;
  --ls-cap:    0.08em;
  --ls-wide:   0.16em;

  /* ---- Spacing (4px base) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* ---- Radius: sharp by default ---- */
  --r-0: 0;
  --r-sm: 2px;
  --r-md: 4px;
  --r-full: 999px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(.4,0,.2,1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 380ms;

  /* ---- Layout ---- */
  --container-max: 1440px;
  --gutter: clamp(16px, 4vw, 48px);
  --header-h: 64px;
  --announce-h: 36px;
}

/* ---------------------------------------------------------
   RESET
   --------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body{ max-width: 100%; overflow-x: hidden; }
body{
  margin:0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}
img, svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font: inherit; color: inherit; background:none; border:0; cursor:pointer; padding:0; }
ul, ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5,p{ margin:0; }
input, select, textarea{ font: inherit; color: inherit; }
:focus-visible{ outline: 2px solid var(--tt-black); outline-offset: 2px; }
::selection{ background: var(--tt-red); color: var(--tt-white); }

/* ---------------------------------------------------------
   TYPE SCALE
   --------------------------------------------------------- */
.t-hero{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
}
.t-display{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
}
.t-h1{ font-family: var(--font-display); font-weight:700; font-size: var(--fs-h1); line-height: var(--lh-snug); text-transform:uppercase; letter-spacing: var(--ls-tight); }
.t-h2{ font-family: var(--font-display); font-weight:700; font-size: var(--fs-h2); line-height: var(--lh-snug); text-transform:uppercase; letter-spacing: var(--ls-tight); }
.t-h3{ font-family: var(--font-display); font-weight:600; font-size: var(--fs-h3); line-height: var(--lh-snug); text-transform:uppercase; letter-spacing: 0.01em; }
.t-h4{ font-family: var(--font-display); font-weight:600; font-size: var(--fs-h4); line-height: var(--lh-snug); text-transform:uppercase; letter-spacing: var(--ls-cap); }
.t-product-title{ font-family: var(--font-body); font-weight:500; font-size: var(--fs-body-sm); line-height: var(--lh-normal); }
.t-body-lg{ font-family: var(--font-body); font-size: var(--fs-body-lg); line-height: var(--lh-normal); }
.t-body{ font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-normal); }
.t-body-sm{ font-family: var(--font-body); font-size: var(--fs-body-sm); line-height: var(--lh-normal); }
.t-label{
  font-family: var(--font-display); font-weight:600; font-size: var(--fs-label);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
}
.t-nav{
  font-family: var(--font-display); font-weight:600; font-size: 0.95rem;
  letter-spacing: var(--ls-cap); text-transform: uppercase;
}
.t-price{ font-family: var(--font-body); font-weight:600; font-size: var(--fs-body); font-variant-numeric: tabular-nums; }
.t-price-lg{ font-family: var(--font-body); font-weight:700; font-size: 1.375rem; font-variant-numeric: tabular-nums; }
.t-meta{ font-family: var(--font-accent); font-size: var(--fs-micro); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--c-text-muted); }

/* ---------------------------------------------------------
   LAYOUT
   --------------------------------------------------------- */
.container{ max-width: var(--container-max); margin-inline:auto; padding-inline: var(--gutter); }
.section{ padding-block: var(--sp-9); }
.section--tight{ padding-block: var(--sp-7); }
.grid{ display:grid; gap: var(--sp-5); }
/* Visibility utilities.
   IMPORTANT: `display:none` always wins, but the "shown" state must match
   each component's own display type (flex/block/inline/...) — a bare
   `display:block` utility silently breaks flex/aside/nav components. So
   the "show" rules below are written per host-selector, not as one
   generic class. When you add hide-mobile/hide-desktop to a NEW kind of
   element, add its matching pair here too. */
.hide-mobile{ display:none !important; }
.hide-desktop{ display:none !important; }

/* --- shown states, keyed by component --- */
.icon-btn.hide-mobile, .icon-btn.hide-desktop{ display:none !important; }
@media(min-width:1024px){ .icon-btn.hide-mobile{ display:inline-flex !important; } }
@media(max-width:1023.98px){ .icon-btn.hide-desktop{ display:inline-flex !important; } }

.main-nav.hide-mobile{ display:none !important; }
@media(min-width:1024px){ .main-nav.hide-mobile{ display:flex !important; } }

/* (.filters no longer uses hide-mobile — it's one form that becomes the
   mobile drawer rather than a desktop-only sidebar; see collection.css.) */

/* Visually hidden but still focusable and readable by screen readers.
   Used for the filter checkboxes that sit behind styled size/colour labels
   — display:none would take them out of the tab order and out of the
   accessibility tree, which is why this uses clipping instead. */
.u-sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path: inset(50%); white-space:nowrap; border:0;
}

.btn.hide-desktop{ display:none !important; }
@media(max-width:1023.98px){ .btn.hide-desktop{ display:inline-flex !important; } }

.t-meta.hide-mobile{ display:none !important; }
@media(min-width:1024px){ .t-meta.hide-mobile{ display:inline !important; } }

/* ---------------------------------------------------------
   BUTTONS
   --------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap: var(--sp-2);
  font-family: var(--font-display); font-weight:600; font-size:0.95rem;
  letter-spacing: var(--ls-cap); text-transform: uppercase;
  padding: 15px 28px;
  border: 1.5px solid transparent;
  border-radius: var(--r-0);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.btn--primary{ background: var(--tt-black); color: var(--tt-white); border-color: var(--tt-black); }
.btn--primary:hover{ background: var(--tt-red); border-color: var(--tt-red); }
.btn--accent{ background: var(--tt-red); color:var(--tt-white); border-color: var(--tt-red); }
.btn--accent:hover{ background: var(--tt-red-dark); border-color: var(--tt-red-dark); }
.btn--outline{ background: transparent; color: var(--tt-white); border-color: var(--tt-white); }
.btn--outline:hover{ background: var(--tt-white); color: var(--tt-black); }
.btn--outline-dark{ background:transparent; color:var(--tt-black); border-color: var(--tt-black); }
.btn--outline-dark:hover{ background: var(--tt-black); color: var(--tt-white); }
.btn--ghost{ background:transparent; color: var(--tt-black); padding: 15px 4px; border-bottom:1.5px solid var(--tt-black); }
.btn--sm{ padding: 10px 18px; font-size: 0.8rem; }
.btn--block{ width:100%; }
.btn:disabled{ opacity:.4; cursor:not-allowed; }

/* ---------------------------------------------------------
   BADGES / LABELS
   --------------------------------------------------------- */
.badge{
  display:inline-block; font-family: var(--font-display); font-weight:600;
  font-size: var(--fs-micro); letter-spacing: var(--ls-wide); text-transform:uppercase;
  padding: 4px 8px; background: var(--tt-black); color: var(--tt-white);
}
.badge--sale{ background: var(--tt-red); }
.badge--new{ background: var(--tt-black); }
.badge--limited{ background: var(--tt-white); color: var(--tt-black); border:1px solid var(--tt-black); }
.badge--drop{ background: var(--tt-off-white); color: var(--tt-black); border:1px solid var(--tt-black); }

/* ---------------------------------------------------------
   FORM CONTROLS
   --------------------------------------------------------- */
.input{
  width:100%; padding: 13px 14px; background: var(--tt-white);
  border: 1.5px solid var(--tt-gray-300); border-radius: var(--r-0);
  font-family: var(--font-body); font-size: var(--fs-body);
}
.input:focus{ border-color: var(--tt-black); }

/* ---------------------------------------------------------
   SWATCH / SIZE SELECTORS
   --------------------------------------------------------- */
.swatch{
  width:32px; height:32px; border:1.5px solid var(--c-border); cursor:pointer;
  display:inline-flex; padding:2px;
}
.swatch__fill{ width:100%; height:100%; }
.swatch[aria-checked="true"]{ border-color: var(--tt-black); }
/* Filter facets use a hidden checkbox + styled label rather than a button,
   so they're real form controls (keyboard, screen reader, and they submit
   without JS). The PDP's aria-checked buttons above still work unchanged. */
.u-sr-only:checked + .swatch{ border-color: var(--tt-black); box-shadow: 0 0 0 1px var(--tt-black) inset; }
.u-sr-only:focus-visible + .swatch{ outline:2px solid var(--tt-red); outline-offset:2px; }

.size-btn{
  min-width:48px; height:48px; padding: 0 12px; border:1.5px solid var(--c-border);
  font-family: var(--font-display); font-weight:600; font-size:0.9rem;
  display:inline-flex; align-items:center; justify-content:center;
}
.size-btn[aria-checked="true"]{ border-color: var(--tt-black); background: var(--tt-black); color: var(--tt-white); }
.size-btn:disabled{ color: var(--c-border); border-color: var(--c-border); text-decoration: line-through; cursor:not-allowed; }
label.size-btn{ cursor:pointer; }
.u-sr-only:checked + .size-btn{ border-color: var(--tt-black); background: var(--tt-black); color: var(--tt-white); }
.u-sr-only:focus-visible + .size-btn{ outline:2px solid var(--tt-red); outline-offset:2px; }

/* ---------------------------------------------------------
   ICON BUTTON (utility row: search / account / wishlist / cart)
   --------------------------------------------------------- */
.icon-btn{
  position:relative; width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
}
.icon-btn svg{ width:20px; height:20px; }
.icon-btn__count{
  position:absolute; top:2px; right:2px; min-width:15px; height:15px; padding:0 3px;
  background: var(--tt-red); color:var(--tt-white); border-radius:var(--r-full);
  font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center;
  font-family: var(--font-body);
}
/* The wishlist count badge is toggled via the `hidden` attribute when the
   count hits 0 (assets/js/site.js) — without this, the `display:flex`
   above silently wins over the browser's default `[hidden]{display:none}`
   rule (same bug class fixed in .lab-price-bar and .drop-card). */
.icon-btn__count[hidden]{ display:none; }

/* ---------------------------------------------------------
   RATING
   --------------------------------------------------------- */
.rating{ display:inline-flex; align-items:center; gap:4px; }
.rating svg{ width:13px; height:13px; }
.rating__count{ font-size: var(--fs-micro); color: var(--c-text-muted); }

/* ---------------------------------------------------------
   DIVIDERS
   --------------------------------------------------------- */
.rule{ height:1px; background: var(--c-border); border:0; }
.rule--strong{ height:2px; background: var(--tt-black); border:0; }

/* ---------------------------------------------------------
   SKIP LINK / A11Y
   --------------------------------------------------------- */
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--tt-black); color:var(--tt-white);
  padding:12px 20px; z-index:999;
}
.skip-link:focus{ left:0; }