/* ============================================================
   RepTools brand layer — streetwear/cargo "techwear" UI
   on the cyan + purple palette. Single source of truth:
   tokens, fonts, wordmark, shared chrome (nav/footer),
   favorites, and global element styles.
   Linked into every template <head> BEFORE its inline <style>.
   Back-compat aliases flip old inline tokens to these so existing
   var(--accent-primary)/etc. references re-skin for free.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@400;500;600;700;800;900&family=Space+Mono:wght@400;700&display=swap');

/* dark canvas from the very first paint — kills the white flash during page navigation.
   (Cross-document @view-transition was removed — on a dark MPA it snapshots a white frame
   mid-navigation, which is exactly the flash. A plain navigation on a dark canvas is clean.) */
html{ background:#0a0a0b; color-scheme:dark; }
body{ background:#0a0a0b; }
/* kill stray horizontal scroll on phones (carousel / decorative bleed on the home page).
   The product carousels keep their own overflow-x:auto, so they still swipe internally. */
@media (max-width:640px){ html, body{ overflow-x:hidden; } }

/* category icons — flat 2D emoji-style PNGs (transparent), sized inline with the label */
.cat-ico{ width:1.5em; height:1.5em; object-fit:contain; display:inline-block; vertical-align:middle; flex:none; }

:root{
  /* base */
  --ink:        #0a0a0b;
  --ink-raised: #18181b;
  --ink-line:   #27272a;
  --bone:       #fafafa;
  --bone-dim:   #a1a1aa;

  /* the loud triad */
  --hazard:     #22d3ee;   /* PRIMARY — cyan */
  --hazard-deep:#06b6d4;
  --acid:       #a855f7;   /* secondary — purple */
  --stamp:      #a855f7;

  /* status */
  --gl:         #22c55e;
  --rl:         #ef4444;
  --pending:    #f59e0b;

  --on-hazard:  #06141c;
  --on-bone:    #0a0a0b;

  /* type */
  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-body:    'Archivo', system-ui, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, monospace;
  --step-hero: clamp(3.25rem, 11vw, 8.5rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* glow rings — CYAN (fixed: designer source had this as orange) */
  --glow-cyan:   rgba(34,211,238,0.18);
  --glow-purple: rgba(168,85,247,0.15);

  /* ---- back-compat aliases (old inline tokens -> brand layer) ---- */
  --bg-primary:      var(--ink);
  --bg-secondary:    var(--ink-raised);
  --bg-card:         var(--ink-raised);
  --bg-elevated:     var(--ink-raised);
  --border-color:    var(--ink-line);
  --text-primary:    var(--bone);
  --text-secondary:  var(--bone-dim);
  --text-muted:      #8b8b99;
  --accent-primary:  var(--hazard);
  --accent-secondary:var(--acid);
  --accent-success:  var(--gl);
  --accent-tertiary: var(--pending);
  --accent-warning:  var(--pending);
  --accent-error:    var(--rl);
  --on-accent:       var(--on-hazard);
  --cy:              var(--hazard);
  --accent-gradient: var(--hazard);
}

/* ============================================================
   GLOBAL ELEMENT LAYER (was missing from the shipped file)
   Pages' inline <style> loads AFTER this and can override.
   ============================================================ */
*{ box-sizing:border-box; }
body{
  font-family:var(--font-body);
  background:var(--ink);
  color:var(--bone);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:var(--font-display); text-transform:uppercase;
  line-height:.9; letter-spacing:.01em; font-weight:400;
}
a{ color:var(--hazard); }
::selection{ background:var(--hazard); color:var(--on-hazard); }
::placeholder{ color:var(--text-muted); opacity:1; }

/* base form controls — squared, mono, cyan focus glow */
input,select,textarea{
  font-family:var(--font-mono); background:var(--ink);
  border:2px solid var(--ink-line); border-radius:2px; color:var(--bone);
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--hazard);
  box-shadow:0 0 0 3px var(--glow-cyan);
}

/* status helpers (drive feedback off the traffic-light triad) */
.status--gl{ color:var(--gl); border-color:var(--gl); }
.status--rl{ color:var(--rl); border-color:var(--rl); }
.status--pending{ color:var(--pending); border-color:var(--pending); }

/* spinner fallback (had no CSS anywhere -> rendered invisible) */
.spinner{
  width:28px; height:28px; border:3px solid var(--ink-line);
  border-top-color:var(--hazard); border-radius:50%;
  animation:cc-spin .8s linear infinite; display:inline-block;
}
@keyframes cc-spin{ to{ transform:rotate(360deg); } }

/* hide horizontal scrollbars on chip/scroll rows */
.scroll-x{ scrollbar-width:none; }
.scroll-x::-webkit-scrollbar{ display:none; }

/* themed global scrollbar */
*{ scrollbar-color:var(--ink-line) var(--ink); }
::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-track{ background:var(--ink); }
::-webkit-scrollbar-thumb{ background:var(--ink-line); border:3px solid var(--ink); }
::-webkit-scrollbar-thumb:hover{ background:var(--hazard); }

/* ---------------- wordmark: [REP]TOOLS lockup ---------------- */
.cc-wordmark{
  display:inline-flex; align-items:center; gap:.4ch;
  font-family:var(--font-display); text-transform:uppercase;
  letter-spacing:.02em; line-height:.8; text-decoration:none;
  color:var(--bone);
}
.cc-wordmark .cc-rep{
  background:var(--hazard); color:var(--on-hazard);
  padding:.1em .32em .04em; transform:skewX(-6deg);
}
.cc-wordmark .cc-tools{ color:var(--bone); }
.cc-wordmark--lg{ font-size:clamp(1.6rem,3.4vw,2.4rem); }

/* ---------------- display heading utility ------------------- */
.cc-display{ font-family:var(--font-display); text-transform:uppercase; line-height:.86; letter-spacing:.005em; font-weight:400; }
.cc-display--outline{ color:transparent; -webkit-text-stroke:2px var(--bone); }

/* ---------------- hard-edged button ------------------------- */
.cc-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6ch;
  font-family:var(--font-body); font-weight:800; text-transform:uppercase;
  letter-spacing:.04em; font-size:1rem; line-height:1;
  padding:1.1em 1.7em; border:2px solid var(--ink);
  background:var(--hazard); color:var(--on-hazard); cursor:pointer;
  box-shadow:4px 4px 0 var(--ink); text-decoration:none;
  transition:transform .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);
}
.cc-btn:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }
.cc-btn:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
.cc-btn[disabled],.cc-btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:2px 2px 0 var(--ink); }
.cc-btn--ghost{ background:transparent; color:var(--bone); border-color:var(--bone); box-shadow:4px 4px 0 var(--hazard); }
.cc-btn--ghost:hover{ background:var(--bone); color:var(--on-bone); }

/* ---------------- hard box / tag / stamp -------------------- */
.cc-box{ background:var(--ink-raised); border:2px solid var(--ink-line); box-shadow:6px 6px 0 rgba(0,0,0,.55); }
.cc-box--hazard{ border-color:var(--hazard); box-shadow:6px 6px 0 var(--hazard); }
.cc-tag{ display:inline-flex; align-items:center; gap:.5ch; font-family:var(--font-mono); font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:.3em .6em; border:1.5px solid currentColor; color:var(--hazard); }
.cc-tag--gl{ color:var(--gl); } .cc-tag--rl{ color:var(--rl); } .cc-tag--pending{ color:var(--pending); }
.cc-stamp{ display:inline-grid; place-items:center; text-align:center; font-family:var(--font-display); text-transform:uppercase; color:var(--stamp); border:3px solid var(--stamp); border-radius:6px; padding:.4em .7em; transform:rotate(-8deg); letter-spacing:.04em; line-height:.9; opacity:.92; }
.cc-barcode{ height:34px; width:100%; background:repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 7px, transparent 7px 8px, var(--ink) 8px 9px, transparent 9px 13px); opacity:.5; }

/* ---------------- tracking ticker / marquee ------------------ */
.cc-ticker{ overflow:hidden; white-space:nowrap; border-block:2px solid var(--ink-line); background:var(--ink); padding-block:.55rem; }
.cc-ticker__track{ display:inline-block; will-change:transform; animation:cc-marquee 38s linear infinite; font-family:var(--font-mono); font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--bone-dim); }
.cc-ticker__track span{ color:var(--hazard); }
.cc-ticker:hover .cc-ticker__track{ animation-play-state:paused; }
@keyframes cc-marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ============================================================
   SHARED NAV  (one bar, identical on every page — no shift)
   ============================================================ */
.rt-nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; height:84px; padding:0 clamp(1.25rem,4vw,3.5rem);
  background:var(--ink); border-bottom:2px solid var(--ink-line);
}
.rt-nav.scrolled{ border-bottom-color:var(--hazard); }
.rt-nav__links{ display:flex; align-items:center; gap:2.1rem; }
.rt-nav__link{
  font-family:var(--font-body); font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; font-size:1rem; color:var(--bone-dim);
  text-decoration:none; transition:color .15s var(--ease); white-space:nowrap;
}
.rt-nav__link:hover{ color:var(--bone); }
.rt-nav__link.active{ color:var(--hazard); }
/* favorites — heart icon only (count badge), like repsloot/auralinks */
.rt-fav{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:50px; height:50px; border:2px solid var(--ink-line); border-radius:2px;
  color:var(--bone); text-decoration:none;
  transition:border-color .15s var(--ease), color .15s var(--ease), transform .15s var(--ease);
}
.rt-fav:hover{ border-color:var(--hazard); color:var(--hazard); transform:translateY(-1px); }
/* pin the heart's font so the ♥ glyph renders identically on every page (products.html's
   monospace cascade was giving it an uglier Space-Mono heart than the rest of the site) */
.rt-fav__heart{ font-size:1.5rem; line-height:1; font-family:Archivo, system-ui, sans-serif; }
.rt-fav__count{
  position:absolute; top:-9px; right:-9px; min-width:20px; height:20px; box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center; padding:0 5px;
  background:var(--hazard); color:var(--on-hazard); border:2px solid var(--ink);
  border-radius:11px; font-family:var(--font-mono); font-weight:700; font-size:.7rem;
}
.rt-fav__count[data-count="0"]{ display:none; }
/* mobile */
.rt-nav__toggle{ display:none; width:50px; height:50px; border:2px solid var(--ink-line); background:transparent; color:var(--bone); font-size:1.5rem; cursor:pointer; border-radius:2px; }
.rt-mobile{ display:none; position:fixed; top:84px; left:0; right:0; z-index:199; background:var(--ink); border-bottom:2px solid var(--ink-line); flex-direction:column; padding:.5rem 0; }
.rt-mobile.open{ display:flex; }
.rt-mobile a{ padding:.9rem clamp(1rem,4vw,3rem); text-align:center; color:var(--bone-dim); text-decoration:none; font-family:var(--font-body); font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:.9rem; }
.rt-mobile a:hover,.rt-mobile a.active{ color:var(--hazard); }
@media(max-width:760px){
  .rt-nav__links{ display:none; }
  .rt-nav__toggle{ display:inline-flex; align-items:center; justify-content:center; }
}
/* pages add padding-top:84px on their first section so content clears the fixed bar */
body.has-rt-nav{ padding-top:84px; }

/* ============================================================
   SHARED FOOTER
   ============================================================ */
.rt-footer{
  border-top:2px solid var(--ink-line); background:var(--ink);
  padding:2.5rem clamp(1rem,4vw,3rem); margin-top:4rem;
  display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; justify-content:space-between;
}
.rt-footer__links{ display:flex; flex-wrap:wrap; gap:1.2rem; }
.rt-footer a{ font-family:var(--font-mono); font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:var(--bone-dim); text-decoration:none; }
.rt-footer a:hover{ color:var(--hazard); }
.rt-footer__copy{ font-family:var(--font-mono); font-size:.72rem; color:var(--text-muted); }

/* ============================================================
   FAVORITES — heart toggle on product cards
   ============================================================ */
.fav-btn{
  position:absolute; top:.5rem; right:.5rem; z-index:5;
  width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center;
  background:rgba(10,10,11,.7); border:2px solid var(--ink-line); border-radius:2px;
  color:var(--bone-dim); cursor:pointer; font-size:1rem; line-height:1;
  /* pin the heart font so the glyph renders identically + centers like the nav heart */
  font-family:Archivo, system-ui, sans-serif;
  transition:border-color .15s var(--ease), color .15s var(--ease), transform .15s var(--ease);
}
.fav-btn:hover{ border-color:var(--hazard); color:var(--hazard); transform:translate(-1px,-1px); }
.fav-btn.is-fav{ color:var(--hazard); border-color:var(--hazard); }
/* the ♥/♡ glyph sits optically high in its em-box — nudge down a hair so it reads centered */
.fav-btn::before{ content:"\2661"; display:block; line-height:1; transform:translateY(.045em); }  /* ♡ outline */
.fav-btn.is-fav::before{ content:"\2665"; } /* ♥ filled */
/* favorite pop + burst ring animation */
.fav-btn.just-faved::before{ animation:fav-pop .42s var(--ease); }
.fav-btn.just-faved::after{
  content:""; position:absolute; inset:-3px; border:2px solid var(--hazard); border-radius:4px;
  animation:fav-ring .5s var(--ease) forwards; pointer-events:none;
}
@keyframes fav-pop{ 0%{transform:scale(1);} 35%{transform:scale(1.45);} 65%{transform:scale(.85);} 100%{transform:scale(1);} }
@keyframes fav-ring{ 0%{opacity:.85; transform:scale(.6);} 100%{opacity:0; transform:scale(1.7);} }
/* nav heart badge pulse when count changes */
.rt-fav__count.bump{ animation:fav-pop .4s var(--ease); }

/* corner Undo toast (e.g. after un-saving an item) */
.rt-toast{ position:fixed; right:20px; bottom:20px; z-index:600; display:flex; align-items:center; gap:1rem;
  background:var(--ink-raised); border:2px solid var(--hazard); box-shadow:5px 5px 0 var(--ink);
  padding:.8rem .8rem .8rem 1.1rem; opacity:0; transform:translateY(140%); pointer-events:none;
  transition:transform .32s var(--ease), opacity .32s var(--ease); }
.rt-toast.show{ opacity:1; transform:translateY(0); pointer-events:auto; }
.rt-toast__msg{ font-family:var(--font-body); font-weight:800; font-size:.86rem; text-transform:uppercase; letter-spacing:.03em; color:var(--bone); }
.rt-toast__undo{ background:var(--hazard); color:var(--on-hazard); border:2px solid var(--ink); border-radius:2px; box-shadow:2px 2px 0 var(--ink);
  font-family:var(--font-body); font-weight:800; text-transform:uppercase; letter-spacing:.04em; font-size:.8rem; padding:.45rem .9rem; cursor:pointer;
  transition:transform .12s var(--ease); }
.rt-toast__undo:hover{ transform:translate(-1px,-1px); }
@media (max-width:560px){ .rt-toast{ left:14px; right:14px; bottom:14px; justify-content:space-between; } }

/* ============================================================
   PRODUCT FEED — shared cards/sections/chips (home, products, product)
   ============================================================ */
.rt-feed{ max-width:1280px; margin:0 auto; padding:0 clamp(1rem,4vw,3rem); }
.rt-chips{ display:flex; flex-wrap:wrap; gap:.6rem; padding:.4rem 0 1.4rem; }
.rt-chip{
  flex:none; display:inline-flex; align-items:center; gap:.5ch; white-space:nowrap;
  font-family:var(--font-body); font-size:1rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em;
  padding:.75em 1.2em; border:2px solid var(--ink-line); border-radius:2px; background:var(--ink-raised);
  color:var(--bone-dim); text-decoration:none; transition:border-color .15s var(--ease), color .15s var(--ease), transform .15s var(--ease);
}
.rt-chip:hover{ border-color:var(--hazard); color:var(--bone); transform:translateY(-2px); }
.rt-chip.active{ background:var(--hazard); color:var(--on-hazard); border-color:var(--hazard); }
.rt-sec{ margin:2.4rem 0; }
.rt-sec__h{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1rem; padding-bottom:.55rem; border-bottom:2px solid var(--ink-line); }
.rt-sec__h h2{ font-size:clamp(1.3rem,3vw,1.9rem); display:flex; align-items:center; gap:.5ch; }
.rt-sec__all{ font-family:var(--font-mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; color:var(--hazard); text-decoration:none; white-space:nowrap; }
.rt-sec__all:hover{ text-decoration:underline; }
/* horizontal scroll row (Latest Drops / per-category) */
.rt-row{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(220px,230px); gap:1.5rem; overflow-x:auto; padding-bottom:.6rem; scroll-snap-type:x mandatory; scrollbar-width:none; scroll-behavior:smooth; }
.rt-row::-webkit-scrollbar{ display:none; }
.rt-row>.pcard{ scroll-snap-align:start; }
/* carousel arrows — click through left AND right on each row */
.rt-carousel{ position:relative; }
.rt-arrow{ position:absolute; top:38%; transform:translateY(-50%); z-index:7; width:44px; height:44px; display:flex; align-items:center; justify-content:center; padding-bottom:.18em;
  background:var(--ink-raised); border:2px solid var(--ink-line); color:var(--bone); font-family:var(--font-body); font-weight:800; font-size:1.7rem; line-height:1; cursor:pointer; border-radius:2px; box-shadow:3px 3px 0 rgba(0,0,0,.55);
  transition:border-color .15s var(--ease), color .15s var(--ease), background .15s var(--ease), opacity .2s var(--ease); }
.rt-arrow:hover{ border-color:var(--hazard); color:var(--hazard); background:var(--ink); }
.rt-arrow--prev{ left:-10px; }
.rt-arrow--next{ right:-10px; }
.rt-arrow[hidden]{ display:none; }
/* disabled end — stays visible (so the row never looks one-directional) but dimmed + inert */
.rt-arrow.is-disabled{ opacity:.3; box-shadow:none; cursor:default; }
.rt-arrow.is-disabled:hover{ border-color:var(--ink-line); color:var(--bone); background:var(--ink-raised); }
@media (max-width:640px){ .rt-arrow{ width:38px; height:38px; font-size:1.45rem; } .rt-arrow--prev{ left:-4px; } .rt-arrow--next{ right:-4px; } }
/* static grid */
.rt-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:1rem; }
/* product card (canonical — used everywhere) */
/* pcard matches the products-page .product-card exactly (so home & catalog look identical) */
.pcard{
  position:relative; display:flex; flex-direction:column; height:100%; border:2px solid var(--ink-line); border-radius:2px; background:var(--ink-raised);
  text-decoration:none; color:var(--bone); box-shadow:4px 4px 0 rgba(0,0,0,.5); overflow:hidden;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.pcard:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--hazard); border-color:var(--hazard); }
.pcard__img{ width:100%; aspect-ratio:1; object-fit:cover; display:block; background:#e0e0e0; border-bottom:2px solid var(--ink-line); }
.pcard__b{ padding:1.25rem; display:flex; flex-direction:column; flex:1 1 auto; }
.pcard__name{ font-size:1rem; font-weight:600; line-height:1.5; min-height:3em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pcard__price{ font-family:var(--font-mono); color:var(--hazard); font-weight:700; font-size:1.25rem; margin-top:.5rem; }
.pcard__actions{ margin-top:auto; padding-top:.75rem; }
.pcard__view{ display:block; width:100%; text-align:center; padding:.65rem 1rem; font-family:var(--font-body); font-weight:800; text-transform:uppercase; letter-spacing:.04em; font-size:.8rem; border:2px solid var(--ink); border-radius:0; background:var(--hazard); color:var(--on-hazard); transition:background .15s var(--ease); }
.pcard:hover .pcard__view{ background:var(--hazard-deep,#0891b2); }

/* ---------------- global focus ring ------------------------- */
:where(a,button,input,select,textarea,[tabindex],[role="button"]):focus-visible{
  outline:3px solid var(--hazard); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  .cc-btn,.rt-nav__link,.fav-btn{ transition:none; }
  .spinner{ animation:none; }
}
