/*
 * ╔══════════════════════════════════════════════════════════════╗
 * ║   STEALTH MINIMALIST — custom.css                           ║
 * ║   Matte Black · Hairline White · Matte Gold (sparingly)     ║
 * ╚══════════════════════════════════════════════════════════════╝
*/

/* ─────────────────────────────────────────────────────────────
   §0  GOOGLE FONTS — Inter + Montserrat
   ───────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Montserrat:wght@500;600;700&display=swap');

/* ─────────────────────────────────────────────────────────────
   §1  DESIGN TOKENS
   ───────────────────────────────────────────────────────────── */
:root {
  /* Tonal ladder — L0 (darkest) → L4 */
  --st-l0:          #0A0A0A;   /* body / void */
  --st-l1:          #111111;   /* card surface */
  --st-l2:          #171717;   /* card hover */
  --st-l3:          #1E1E1E;   /* all borders (hairline) */
  --st-l4:          #2A2A2A;   /* disabled / divider */

  /* Text */
  --st-text:        #FFFFFF;
  --st-text-sec:    rgba(255, 255, 255, 0.45);
  --st-text-dim:    rgba(255, 255, 255, 0.25);

  /* Warm accent — used in ≤3 places only */
  --st-gold:        #C9974C;
  --st-gold-dim:    rgba(201, 151, 76, 0.15);

  /* Transitions */
  --st-ease:        cubic-bezier(0.25, 0.1, 0.25, 1);
  --st-t:           0.18s;
  --st-t-mid:       0.24s;
}

/* ─────────────────────────────────────────────────────────────
   §2  GLOBAL TYPOGRAPHY — Inter everywhere
   ───────────────────────────────────────────────────────────── */
body,
input, select, textarea, button {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.005em;
}

/* Prices — tighter tracking, heavier */
.text-accent-500.font-semibold,
.text-accent-500.font-bold {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

/* Stat numbers */
.text-3xl.text-accent-500.font-bold,
.text-4xl.text-accent-500.font-bold,
.text-5xl.text-accent-500.font-bold {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  color: var(--st-text) !important;
}

/* ─────────────────────────────────────────────────────────────
   §3  NAVBAR — Opaque Matte Strip
   ───────────────────────────────────────────────────────────── */
nav.component > div {
  background: rgba(10, 10, 10, 0.97) !important;
  border: none !important;
  border-bottom: 1px solid var(--st-l3) !important;
  backdrop-filter: none !important;       /* no blur — stealth = opacity only */
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

/* Shop name */
nav.component h1 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  color: var(--st-text) !important;
  transition: opacity var(--st-t) var(--st-ease);
}
nav.component a:hover h1 {
  opacity: 0.7;
}

/* Nav links — ghost at rest, full white on hover */
nav.component a.px-4.py-2,
nav.component button.px-4.py-2 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  color: var(--st-text-sec) !important;
  letter-spacing: 0.02em;
  position: relative;
  transition: color var(--st-t) var(--st-ease) !important;
}
nav.component a.px-4.py-2:hover,
nav.component button.px-4.py-2:hover {
  color: var(--st-text) !important;
}

/* Active nav link — matte gold 2px underline */
nav.component a.px-4.py-2.text-t-primary {
  color: var(--st-text) !important;
}
nav.component a.px-4.py-2.text-t-primary::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 8px;
  right: 8px;
  height: 2px;
  background: var(--st-gold);
  border-radius: 0;
}

/* Cart icon — clean, no hover glow */
nav.component a[href*="cart"] {
  border-radius: 0 !important;
  border-color: var(--st-l3) !important;
  transition: border-color var(--st-t) var(--st-ease),
              color var(--st-t) var(--st-ease) !important;
}
nav.component a[href*="cart"]:hover {
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: var(--st-text) !important;
  background: transparent !important;
}

/* Cart badge — MATTE GOLD (only warm color on the page) */
nav.component span.bg-accent-500 {
  background-color: var(--st-gold) !important;
  color: #0A0A0A !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  border-radius: 0 !important;
}

/* Hamburger button */
nav.component button.size-10 {
  border-radius: 0 !important;
  border-color: var(--st-l3) !important;
  transition: border-color var(--st-t) var(--st-ease) !important;
}
nav.component button.size-10:hover {
  border-color: rgba(255, 255, 255, 0.25) !important;
  background: transparent !important;
}

/* ─────────────────────────────────────────────────────────────
   §4  HERO SECTION — Stark & Typographic
   ───────────────────────────────────────────────────────────── */
.component h1.text-3xl,
.component h1.text-4xl,
.component h1.text-5xl {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  color: var(--st-text) !important;
  text-shadow: none !important;         /* zero decoration — pure type */
  line-height: 1.05 !important;
}

.component p.text-t-primary\/75,
.component p.text-base.text-t-primary\/75,
.component p.text-lg {
  color: var(--st-text-sec) !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em;
  line-height: 1.7;
}

/* Section title underlines — single hairline, no gradient */
hr.border-accent-500,
.border-accent-500.mt-1 {
  border: none !important;
  height: 1px !important;
  background: var(--st-l3) !important;
  width: 100% !important;
  margin-top: 8px !important;
  border-radius: 0 !important;
  opacity: 1;
}

/* ─────────────────────────────────────────────────────────────
   §5  PRODUCT CARDS — Flat, Sharp, Zero-Radius
   ───────────────────────────────────────────────────────────── */
a.block.h-full.bg-card\/75 {
  background: var(--st-l1) !important;
  border: 1px solid var(--st-l3) !important;
  border-radius: 0 !important;           /* ZERO radius — architectural */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;           /* ZERO shadow — flatness is the luxury */
  transition:
    background-color var(--st-t) var(--st-ease),
    border-color var(--st-t) var(--st-ease) !important;
  position: relative;
}

a.block.h-full.bg-card\/75:hover {
  background: var(--st-l2) !important;  /* +6 tonal step — whisper shift */
  border-color: var(--st-l4) !important;
  transform: none !important;           /* no lift — stays flat */
  box-shadow: none !important;
}

/* Inner hover layer — transparent always */
a.block.h-full.bg-card\/75 .transform.transition-colors {
  background: transparent !important;
  border-radius: 0 !important;
}
a.block.h-full.bg-card\/75:hover .transform.transition-colors {
  background: transparent !important;
}

/* Card internal dividers — hairline */
a.block.h-full.bg-card\/75 .border-b {
  border-color: var(--st-l3) !important;
}

/* ── Card header area ── */
a.block.h-full.bg-card\/75 .text-center.px-4.py-2 {
  padding: 1rem 1.25rem !important;
}

/* ── Product name ── */
a.block.h-full.bg-card\/75 h3 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  color: var(--st-text) !important;
  font-size: 0.9375rem !important;
  transition: opacity var(--st-t) var(--st-ease);
}
a.block.h-full.bg-card\/75:hover h3 {
  opacity: 0.75;                        /* dims instead of coloring — cleaner */
}

/* ── Image area — drops to void black ── */
a.block.h-full.bg-card\/75 .relative.overflow-hidden.p-2 {
  background: var(--st-l0) !important;  /* void black — logos appear to float */
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 1rem !important;
}

/* No image zoom — stealth stays still */
a.block.h-full.bg-card\/75 .relative.overflow-hidden.p-2 img {
  transition: none;
}

/* ── Card body padding ── */
a.block.h-full.bg-card\/75 .text-left.px-4.pb-4 {
  padding: 1.125rem 1.25rem 1.5rem !important;
}

/* ── Price — white, bold, no color ── */
a.block.h-full.bg-card\/75 .text-accent-500 {
  color: var(--st-text) !important;     /* pure white — accent color stripped */
  font-weight: 700 !important;
  font-family: 'Inter', sans-serif !important;
  letter-spacing: -0.01em !important;
}

/* ── Secondary text ── */
a.block.h-full.bg-card\/75 .text-t-primary\/50 {
  color: var(--st-text-sec) !important;
  font-weight: 400;
  font-size: 0.8125rem !important;
}

/* ── Infinite stock icon — MATTE GOLD (2nd of 3 gold placements) ── */
a.block.h-full.bg-card\/75 .inline-flex.items-center.gap-1 {
  color: var(--st-gold) !important;
}
a.block.h-full.bg-card\/75 .inline-flex.items-center.gap-1 svg {
  color: var(--st-gold) !important;
}

/* ── "View Details" Button — The Inversion System ── */
a.block.h-full.bg-card\/75 .border.border-accent-500 {
  border-radius: 0 !important;          /* flat / sharp — no rounding ever */
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.65) !important;
  font-family: 'Montserrat', 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 0.6rem 1rem !important;
  transition:
    background-color var(--st-t) var(--st-ease),
    color var(--st-t) var(--st-ease),
    border-color var(--st-t) var(--st-ease) !important;
}

/* THE INVERSION — white fill, black text on hover */
a.block.h-full.bg-card\/75:hover .border.border-accent-500 {
  background: var(--st-text) !important;
  color: var(--st-l0) !important;       /* #0A0A0A — maximum contrast */
  border-color: var(--st-text) !important;
  box-shadow: none !important;
}

/* ── Product badges ── */
a.block.h-full.bg-card\/75 .badges .flex.items-center.gap-2 {
  border-radius: 0 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* ─────────────────────────────────────────────────────────────
   §6  FEEDBACK / REVIEW CARDS
   ───────────────────────────────────────────────────────────── */
.h-full.bg-card\/75.border.border-white\/5.text-t-primary {
  background: var(--st-l1) !important;
  border: 1px solid var(--st-l3) !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  transition:
    background-color var(--st-t) var(--st-ease),
    border-color var(--st-t) var(--st-ease) !important;
}

.cursor-pointer:hover .h-full.bg-card\/75.border.border-white\/5.text-t-primary {
  background: var(--st-l2) !important;
  border-color: var(--st-l4) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Review text */
.h-full.bg-card\/75 .text-sm.text-t-primary\/90 {
  color: var(--st-text-sec) !important;
  font-weight: 400;
  line-height: 1.65;
  font-size: 0.8125rem !important;
}

/* Timestamp */
.h-full.bg-card\/75 .text-xs.text-t-primary\/80 {
  color: var(--st-text-dim) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.03em;
}

/* Store reply */
.h-full.bg-card\/75 .mt-4.bg-\[rgba\(255\,255\,255\,0\.05\)\] {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--st-l3);
  border-radius: 0;
}

/* Bottom label */
.h-full.bg-card\/75 .px-4.py-2.text-xs.text-t-primary\/70 {
  color: var(--st-text-dim) !important;
  border-color: var(--st-l3) !important;
  letter-spacing: 0.04em;
  font-size: 0.7rem !important;
}

/* ─────────────────────────────────────────────────────────────
   §7  VOUCHES CARDS
   ───────────────────────────────────────────────────────────── */
#vouchesContainer .vouches-card {
  background: var(--st-l1) !important;
  border: 1px solid var(--st-l3) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition:
    background-color var(--st-t) var(--st-ease),
    border-color var(--st-t) var(--st-ease) !important;
  padding: 1.5rem !important;
}

#vouchesContainer .vouches-card:hover {
  background: var(--st-l2) !important;
  border-color: var(--st-l4) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Override accent color on vouches names */
#vouchesContainer .vouches-card .username,
#vouchesContainer .vouches-card .proof-link,
.vouches-title .vouches-profile {
  color: var(--st-text) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--st-l4);
}

/* ─────────────────────────────────────────────────────────────
   §8  STATS SECTION — Data Terminal / Type-Driven
   ───────────────────────────────────────────────────────────── */
.text-center.border-b-2.border-white\/5.py-4 {
  background: var(--st-l1) !important;
  border: 1px solid var(--st-l3) !important;
  border-top: 2px solid rgba(255, 255, 255, 0.06) !important; /* "shelf" top */
  border-radius: 0 !important;
  padding: 2rem 1.5rem !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition:
    background-color var(--st-t) var(--st-ease),
    border-color var(--st-t) var(--st-ease);
  position: relative;
  overflow: hidden;
}

.text-center.border-b-2.border-white\/5.py-4:hover {
  background: var(--st-l2) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Stat numbers — white, Inter, tight tracking */
.text-center.border-b-2.border-white\/5.py-4 .text-accent-500 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  color: var(--st-text) !important;
  letter-spacing: -0.025em !important;
  text-shadow: none !important;
}

/* Stat labels — Montserrat, uppercase, very muted */
.text-center.border-b-2.border-white\/5.py-4 .text-t-primary\/80,
.text-center.border-b-2.border-white\/5.py-4 p.text-sm {
  font-family: 'Montserrat', 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--st-text-dim) !important;
}

/* Stats grid gap — flush "data table" feel */
.w-full.grid.grid-cols-1.gap-4 {
  gap: 1px !important;
}

/* ─────────────────────────────────────────────────────────────
   §9  FOOTER
   ───────────────────────────────────────────────────────────── */
footer {
  background: var(--st-l0) !important;  /* same as body — nearly invisible */
  border: none !important;
  border-top: 1px solid var(--st-l3) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

footer .border-b {
  border-color: var(--st-l3) !important;
}

footer .bg-card\/25 {
  background: rgba(255, 255, 255, 0.02) !important;
}

footer p,
footer p.text-t-primary\/80 {
  color: var(--st-text-dim) !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.04em;
}

footer a {
  color: var(--st-text-dim) !important;
  transition: color var(--st-t) var(--st-ease) !important;
}
footer a:hover {
  color: var(--st-text) !important;
}

/* ─────────────────────────────────────────────────────────────
   §10  GLOBAL ACCENT COLOR OVERRIDE
        (strip any coloured accent, force white or gold)
   ───────────────────────────────────────────────────────────── */

/* Accent-colored text → white */
.text-accent-500 {
  color: var(--st-text) !important;
}

/* Accent-colored icon fills → white */
.fill-accent-500,
svg.fill-accent-500 {
  fill: var(--st-text) !important;
}

/* Star rating icons → matte gold (3rd of 3 gold placements) */
.text-accent-500 svg path[fill-rule="evenodd"],
span.text-accent-500 svg {
  color: var(--st-gold) !important;
}

/* Accent bg buttons → white bg + dark text */
.bg-accent-500 {
  background-color: var(--st-text) !important;
  color: var(--st-l0) !important;
}
.bg-accent-500:hover {
  background-color: rgba(255, 255, 255, 0.88) !important;
  box-shadow: none !important;
}

/* Accent borders → hairline grey */
.border-accent-500 {
  border-color: var(--st-l3) !important;
}

/* ─────────────────────────────────────────────────────────────
   §11  INPUTS & FORMS
   ───────────────────────────────────────────────────────────── */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
textarea {
  background: var(--st-l1) !important;
  border: 1px solid var(--st-l3) !important;
  border-radius: 0 !important;
  color: var(--st-text) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.875rem !important;
  transition:
    border-color var(--st-t) var(--st-ease),
    background-color var(--st-t) var(--st-ease) !important;
}

input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus {
  border-color: rgba(255, 255, 255, 0.3) !important;
  background: var(--st-l2) !important;
  box-shadow: none !important;
  outline: none !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--st-text-dim) !important;
  font-weight: 400;
}

/* ─────────────────────────────────────────────────────────────
   §12  SCROLLBAR — matte, barely visible
   ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-track {
  background: var(--st-l0);
}
::-webkit-scrollbar-thumb {
  background: var(--st-l3);
  border-radius: 0;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--st-l4);
}

/* ─────────────────────────────────────────────────────────────
   §13  TEXT SELECTION
   ───────────────────────────────────────────────────────────── */
::selection {
  background: rgba(255, 255, 255, 0.15);
  color: var(--st-text);
}