/* Template C · Dark Athletic — near-black, electric lime, condensed italic headlines */
:root {
  --bg: #0e0f11; --fg: #f2f2f2; --muted: #a3a7ad; --line: #2a2d31; --surface: #17191c;
  --accent: #c8f031; --accent-fg: #0e0f11; --sale: #ff6b6b; --ph-bg: #26292e;
  --radius: 14px; --btn-radius: 999px; --max: 1360px;
  --font-body: 'Barlow', system-ui, sans-serif; --font-head: 'Barlow Condensed', system-ui, sans-serif;
  --head-weight: 900; --head-transform: uppercase; --head-style: italic; --head-spacing: 0;
}
.announce { background: var(--accent); color: var(--accent-fg); font-family: var(--font-head); font-weight: 800; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; }
.logo { font-size: 34px; }
.slash { color: var(--accent); }
.nav { font-family: var(--font-head); font-weight: 700; font-size: 18px; letter-spacing: .04em; text-transform: uppercase; }
.search { border-color: #3a3e44; }
.search button { background: transparent; color: var(--fg); }
.cart-link { background: var(--accent); color: var(--accent-fg); border-radius: 999px; font-family: var(--font-head); font-weight: 800; font-size: 17px; text-transform: uppercase; }
.cart-count { background: var(--accent-fg); color: var(--accent); }
.btn { font-family: var(--font-head); font-weight: 800; font-size: 19px; text-transform: uppercase; letter-spacing: .04em; }
.btn-outline { color: var(--accent); }
a:hover { opacity: 1; color: var(--accent); }
.card { background: var(--surface); border-radius: var(--radius); padding: 12px; }
.card-body { flex: 1; }
.quick-add { margin-top: auto; }
.nav { gap: 6px 22px; }
.search input { width: 130px; }
.card-media .ph { aspect-ratio: 1 / 1; border-radius: 10px; }
.card-title { font-family: var(--font-head); font-weight: 800; font-size: 21px; text-transform: uppercase; }
.badge { border-radius: 999px; font-family: var(--font-head); font-size: 14px; letter-spacing: .02em; }
.size, .qty, .ship, .sort select, .size-chip span { border-radius: 10px; border-color: #33373c; background: var(--surface); }
.size[aria-pressed="true"] { background: var(--accent); }
.swatch { border-color: var(--bg); }
.stock { color: var(--accent); }
.stock.low { color: #ffb347; }
.line, .summary, .steps { border: 1px solid var(--line); }
.overlay-box { background: #17191c; color: #f2f2f2; }
.overlay-box .muted { color: #a3a7ad; }

.c-hero-wrap { padding-top: 28px; }
.c-hero { position: relative; min-height: 620px; border-radius: 18px; background: #26292e; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; padding: 48px; }
.c-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.c-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(14,15,17,.85), rgba(14,15,17,.1) 70%); }
.c-hero > *:not(img) { position: relative; z-index: 1; }
.c-kicker { font-family: var(--font-head); font-weight: 800; font-size: 18px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.c-hero h1 { font-size: clamp(72px, 11vw, 150px); line-height: .85; }
.c-hero p { margin: 0; max-width: 520px; font-size: 19px; color: #d4d6da; }
.c-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.c-actions .btn-outline { color: var(--fg); }
.c-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; padding-top: 24px; padding-bottom: 24px; }
.c-stats div { background: var(--surface); border-radius: 12px; padding: 18px 22px; }
.c-stats b { display: block; font-family: var(--font-head); font-style: italic; font-weight: 900; font-size: 38px; color: var(--accent); text-transform: uppercase; }
.c-stats span { color: var(--muted); font-size: 14px; }
.c-section { padding-top: 40px; padding-bottom: 40px; }
.c-section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 22px; }
.c-section-head h2 { font-size: 56px; }
.c-section-head a { font-family: var(--font-head); font-weight: 800; font-size: 18px; text-transform: uppercase; color: var(--accent); }
.c-fits { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.c-fits a { position: relative; height: 360px; border-radius: 14px; background: #2a2d32; overflow: hidden; display: flex; align-items: flex-end; justify-content: space-between; padding: 22px; }
.c-fits a:nth-child(2) { background: #25282d; } .c-fits a:nth-child(3) { background: #2c2f34; } .c-fits a:nth-child(4) { background: #232629; }
.c-fits img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.c-fits strong, .c-fits i { position: relative; }
.c-fits strong { font-family: var(--font-head); font-style: italic; font-weight: 900; font-size: 40px; text-transform: uppercase; line-height: .9; }
.c-fits i { width: 48px; height: 48px; border-radius: 999px; background: var(--accent); color: var(--accent-fg); display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 900; font-size: 22px; }
.c-news { background: var(--accent); color: var(--accent-fg); margin-top: 40px; }
.c-news .container { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; padding-top: 56px; padding-bottom: 56px; }
.c-news h2 { font-size: 58px; line-height: .9; flex: 1 1 380px; }
.c-news form { display: flex; flex-wrap: wrap; gap: 10px; flex: 1 1 420px; }
.c-news input { flex: 1 1 220px; height: 56px; border-radius: 999px; border: 0; padding: 0 22px; color: #111; background: #fff; }
.c-news .btn { background: var(--accent-fg); color: var(--accent); }
.site-footer { margin-top: 0; }
@media (max-width: 800px) {
  .c-hero { padding: 28px; min-height: 520px; }
  .card { padding: 8px; }
  .card-title { font-size: 18px; }
}