/* NASHTY storefront preview — palette sampled from the supplied brand marks */
:root {
  --cream: #F6EACC;        /* tri-star stars / badge field */
  --cream-light: #FCF6DB;  /* lightning wordmark fill */
  --cream-deep: #EBDDB8;   /* darker cream for tiles (derived) */
  --tan: #F6DEBD;          /* badge parchment */
  --navy: #000F24;         /* tri-star field */
  --navy-2: #00122A;       /* heritage wordmark outline */
  --royal: #0058CC;        /* heritage swash blue */
  --orange: #F95100;       /* lightning bolt underline */
  --burnt: #D85A00;        /* tri-star ring */
  --copper: #C03F00;       /* badge bolts */
  --black: #000000;
  --charcoal: #121212;     /* dark backgrounds (contact sheet) */
  --charcoal-2: #222222;
  --ink: #000F24;
  --muted: #5b5547;
  --line: rgba(0, 15, 36, .14);
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0, 15, 36, .12);
  --font-display: 'Ultra', 'Rockwell Extra Bold', Georgia, serif;
  --font-ui: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Barlow', system-ui, sans-serif;
  --wrap: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream-light);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
.wrap { width: min(var(--wrap), 100% - 40px); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- type ---------- */
h1, h2, h3, .display { font-family: var(--font-display); font-weight: 400; line-height: 1.02; letter-spacing: .5px; margin: 0 0 .4em; }
h1 { font-size: clamp(2.6rem, 6.4vw, 5.4rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.3rem); }
h3 { font-size: 1.4rem; }
.eyebrow {
  font-family: var(--font-ui); font-weight: 700; text-transform: uppercase;
  letter-spacing: .22em; font-size: .85rem; color: var(--burnt);
  display: inline-flex; align-items: center; gap: .6em; margin-bottom: 1rem;
}
.eyebrow::before, .eyebrow::after { content: '\2605'; font-size: .8em; }
.lead { font-size: 1.15rem; color: var(--muted); max-width: 46ch; }
.ui { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: .12em; font-weight: 600; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--font-ui); font-weight: 700; text-transform: uppercase; letter-spacing: .14em;
  font-size: 1rem; padding: .95em 1.7em; border-radius: 999px; border: 2px solid var(--ink);
  background: var(--ink); color: var(--cream-light); text-decoration: none; transition: transform .15s, background .15s, color .15s;
}
.btn:hover { transform: translateY(-2px); }
.btn--orange { background: var(--orange); border-color: var(--orange); color: var(--black); }
.btn--orange:hover { background: var(--burnt); border-color: var(--burnt); }
.btn--ghost { background: transparent; color: inherit; border-color: currentColor; }
.btn--cream { background: var(--cream); border-color: var(--cream); color: var(--navy); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

/* ---------- announcement + header ---------- */
.announce {
  background: var(--navy); color: var(--cream);
  font-family: var(--font-ui); text-transform: uppercase; letter-spacing: .2em; font-size: .78rem; font-weight: 600;
  text-align: center; padding: .55rem 1rem;
}
.announce b { color: var(--orange); font-weight: 700; }
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(252, 246, 219, .94); backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--navy);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 76px; }
.logo img { height: 58px; width: auto; }
.nav { display: flex; gap: 2rem; }
.nav a {
  font-family: var(--font-ui); font-weight: 700; text-transform: uppercase; letter-spacing: .16em; font-size: .95rem;
  text-decoration: none; position: relative; padding: .3rem 0;
}
.nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; background: var(--orange); transform: scaleX(0); transition: transform .2s; transform-origin: left; }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: .5rem; }
.icon-btn {
  position: relative; width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--navy);
  background: transparent; display: grid; place-items: center; color: var(--navy);
}
.icon-btn:hover { background: var(--navy); color: var(--cream); }
.icon-btn svg { width: 22px; height: 22px; }
.cart-count {
  position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; border-radius: 11px; padding: 0 6px;
  background: var(--orange); color: var(--black); font-family: var(--font-ui); font-weight: 700; font-size: .8rem;
  display: grid; place-items: center; border: 2px solid var(--cream-light);
}
.cart-count[data-count="0"] { display: none; }
.menu-btn { display: none; }
.mobile-nav { display: none; }

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden; color: var(--cream);
  background:
    radial-gradient(circle at 78% 45%, rgba(249, 81, 0, .22), transparent 42%),
    radial-gradient(circle at 10% 110%, rgba(0, 88, 204, .25), transparent 45%),
    var(--charcoal);
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: var(--pattern); background-size: var(--pattern-size); background-repeat: repeat; background-position: center top;
}
.hero .wrap { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center; padding: 4.5rem 0 4.5rem; }
.hero h1 { color: var(--cream-light); text-shadow: 4px 4px 0 var(--black); }
.hero h1 .accent { color: var(--orange); }
.hero .lead { color: rgba(246, 234, 204, .82); font-size: 1.25rem; }
.hero-sub { font-family: var(--font-ui); font-size: 1.35rem; letter-spacing: .26em; text-transform: uppercase; color: var(--tan); margin: 0 0 1.4rem; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.hero-badge { position: relative; justify-self: center; width: min(380px, 100%); }
.hero-badge img { width: 100%; filter: drop-shadow(0 20px 40px rgba(0,0,0,.55)); animation: float 7s ease-in-out infinite; }
.hero-badge .spin {
  position: absolute; width: 104px; right: -64px; top: -2%; animation: spin 26s linear infinite; filter: none;
}
.hero-meta { display: flex; gap: 2rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(246,234,204,.18); flex-wrap: wrap; }
.hero-meta div { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: .14em; font-size: .85rem; color: rgba(246,234,204,.7); }
.hero-meta strong { display: block; font-family: var(--font-display); font-weight: 400; color: var(--cream); font-size: 1.5rem; letter-spacing: 0; text-transform: none; }
@keyframes float { 50% { transform: translateY(-12px) rotate(-1deg); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- marquee ---------- */
.marquee { background: var(--orange); color: var(--black); overflow: hidden; border-block: 2px solid var(--black); }
.marquee-track { display: flex; width: max-content; animation: marquee 32s linear infinite; }
.marquee span { font-family: var(--font-display); font-size: 1.35rem; padding: .7rem 1.4rem; white-space: nowrap; }
.marquee span::after { content: '\2605'; margin-left: 2.8rem; font-size: .9em; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- sections ---------- */
.section { padding: 5.5rem 0; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 2.5rem; flex-wrap: wrap; }
.section-head h2 { margin: 0; }
.section-head .link { font-family: var(--font-ui); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; border-bottom: 3px solid var(--orange); padding-bottom: 2px; }
.section--cream { background: var(--cream); }
.section--navy { background: var(--navy); color: var(--cream); }
.section--dark { background: var(--charcoal); color: var(--cream); }
.divider-stars { text-align: center; color: var(--burnt); letter-spacing: 1em; font-size: .9rem; margin: 0; }

/* ---------- product grid + cards ---------- */
.grid { display: grid; gap: 1.6rem; grid-template-columns: repeat(4, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.card { position: relative; display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.card .mock { border-radius: var(--radius); transition: transform .25s, box-shadow .25s; }
.card:hover .mock { transform: translateY(-4px); box-shadow: var(--shadow); }
.card-body { padding: 1rem .2rem 0; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.card-title { font-family: var(--font-ui); font-weight: 700; font-size: 1.2rem; letter-spacing: .04em; text-transform: uppercase; line-height: 1.15; margin: 0; }
.card-tag { color: var(--muted); font-size: .95rem; margin: 0; }
.card-row { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: .5rem; }
.price { font-family: var(--font-display); font-size: 1.25rem; }
.swatches { display: flex; gap: 6px; }
.swatch { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--cream-light); box-shadow: 0 0 0 1px rgba(0,15,36,.35); }
.badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-family: var(--font-ui); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .75rem;
  background: var(--navy); color: var(--cream); padding: .3rem .7rem; border-radius: 999px;
}
.badge--orange { background: var(--orange); color: var(--black); }
.quick-add {
  position: absolute; right: 12px; top: 12px; z-index: 2; width: 42px; height: 42px; border-radius: 50%;
  border: 2px solid var(--navy); background: var(--cream-light); color: var(--navy); display: grid; place-items: center;
  opacity: 0; transform: scale(.85); transition: .2s;
}
.card:hover .quick-add, .quick-add:focus { opacity: 1; transform: none; }
.quick-add:hover { background: var(--orange); border-color: var(--orange); }

/* ---------- mockup tile ---------- */
.mock {
  position: relative; aspect-ratio: 1 / 1.1; overflow: hidden; display: grid; place-items: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.55), transparent 60%),
    var(--cream-deep);
}
.mock.on-dark { background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.08), transparent 60%), var(--charcoal-2); }
.mock svg.garment { width: 86%; height: auto; filter: drop-shadow(0 14px 18px rgba(0,0,0,.18)); }
.mock .mark { position: absolute; left: 50%; transform: translateX(-50%); pointer-events: none; }
.mock[data-type="tee"] .mark { top: 31%; width: 30%; }
.mock[data-type="tee"] .mark.round { width: 22%; top: 30%; }
.mock[data-type="tee"] .mark.tall { width: 20%; top: 29%; }
.mock[data-type="tank"] .mark { top: 36%; width: 28%; }
.mock[data-type="tank"] .mark.round { width: 22%; top: 38%; }
.mock[data-type="tank"] .mark.tall { width: 25%; top: 31%; }
.mock[data-type="cap"] .mark, .mock[data-type="trucker"] .mark { top: 33%; width: 36%; }
.mock-note { position: absolute; bottom: 10px; right: 12px; font-family: var(--font-ui); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(0,15,36,.45); }
.mock.on-dark .mock-note { color: rgba(246,234,204,.4); }

/* ---------- category tiles ---------- */
.cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.cat { position: relative; border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--cream); background: var(--navy); }
.cat .mock { aspect-ratio: 1 / 1; background: radial-gradient(circle at 50% 40%, rgba(249,81,0,.25), transparent 60%), var(--navy); }
.cat:nth-child(2) .mock { background: radial-gradient(circle at 50% 40%, rgba(249,81,0,.3), transparent 60%), var(--charcoal); }
.cat:nth-child(3) .mock { background: radial-gradient(circle at 50% 40%, rgba(0,88,204,.35), transparent 60%), var(--navy-2); }
.cat-label { position: absolute; left: 1.4rem; bottom: 1.2rem; right: 1.4rem; display: flex; justify-content: space-between; align-items: end; }
.cat-label h3 { margin: 0; font-size: 2rem; color: var(--cream-light); text-shadow: 3px 3px 0 var(--black); }
.cat-label span { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: .16em; font-weight: 700; font-size: .85rem; color: var(--orange); }
.cat .mock-note { display: none; }

/* ---------- story ---------- */
.story { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.story-art { position: relative; background: var(--charcoal); border-radius: 24px; padding: 3rem 2rem; display: grid; place-items: center; min-height: 420px; overflow: hidden; }
.story-art .heritage { width: 88%; position: relative; z-index: 1; }
.story-art .tri { position: absolute; width: 140px; bottom: -30px; right: -30px; opacity: .9; }
.story-art .sb { position: absolute; width: 110px; top: 22px; left: 22px; }
.story p { color: var(--muted); }
.story blockquote { margin: 1.6rem 0 0; padding-left: 1.2rem; border-left: 4px solid var(--orange); font-family: var(--font-ui); font-size: 1.3rem; text-transform: uppercase; letter-spacing: .08em; color: var(--navy); }

/* ---------- today beats someday ---------- */
.tbs { text-align: center; position: relative; overflow: hidden; }
.tbs .tri-bg { position: absolute; width: 640px; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: .08; }
.tbs h2 { font-size: clamp(2.6rem, 8vw, 6.4rem); color: var(--cream-light); position: relative; }
.tbs h2 span { display: block; color: var(--orange); }
.tbs p { position: relative; max-width: 54ch; margin: 1rem auto 2rem; color: rgba(246,234,204,.8); font-size: 1.15rem; }
.tbs .sub { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: .3em; color: var(--tan); font-size: 1.1rem; }
.pillars { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 3rem; text-align: left; }
.pillar { border: 1px solid rgba(246,234,204,.2); border-radius: var(--radius); padding: 1.6rem; background: rgba(0,0,0,.18); }
.pillar h3 { color: var(--cream-light); font-size: 1.3rem; }
.pillar p { margin: 0; text-align: left; font-size: 1rem; }
.pillar .num { font-family: var(--font-ui); color: var(--orange); font-weight: 700; letter-spacing: .2em; }

/* ---------- social ---------- */
.social-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .8rem; }
.social-tile { aspect-ratio: 1; border-radius: 12px; display: grid; place-items: center; position: relative; overflow: hidden; text-decoration: none; }
.social-tile img { width: 72%; transition: transform .3s; }
.social-tile:hover img { transform: scale(1.06) rotate(-2deg); }
.social-tile::after { content: ''; position: absolute; inset: 0; background: rgba(249,81,0,.0); transition: background .2s; }
.social-tile:hover::after { background: rgba(249,81,0,.12); }
.t-navy { background: var(--navy); } .t-char { background: var(--charcoal); } .t-orange { background: var(--orange); }
.t-cream { background: var(--cream); } .t-tan { background: var(--tan); } .t-royal { background: var(--royal); }

/* ---------- signup ---------- */
.signup { background: var(--orange); color: var(--black); position: relative; overflow: hidden; }
.signup .wrap { display: grid; grid-template-columns: auto 1fr 1fr; gap: 2.5rem; align-items: center; padding: 4rem 0; }
.signup img { width: 150px; }
.signup h2 { margin: 0 0 .3rem; font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.signup p { margin: 0; font-weight: 500; }
.form-row { display: flex; gap: .6rem; }
.input {
  flex: 1; min-width: 0; font: inherit; padding: .95em 1.2em; border-radius: 999px; border: 2px solid var(--black);
  background: var(--cream-light); color: var(--ink);
}
.input:focus { outline: 3px solid var(--navy); outline-offset: 2px; }
.form-msg { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; margin-top: .6rem; min-height: 1.4em; }

/* ---------- footer ---------- */
.site-footer { background: var(--charcoal); color: rgba(246,234,204,.75); padding: 4.5rem 0 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; }
.footer-brand img { width: 210px; margin-bottom: 1rem; }
.site-footer h4 { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: .2em; color: var(--cream); margin: 0 0 1rem; font-size: .95rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--orange); }
.footer-bottom { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(246,234,204,.14); display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; font-family: var(--font-ui); letter-spacing: .14em; text-transform: uppercase; font-size: .8rem; }
.footer-bottom img { width: 44px; }

/* ---------- page header (inner pages) ---------- */
.page-hero { background: var(--navy); color: var(--cream); padding: 4rem 0 3.4rem; position: relative; overflow: hidden; }
.page-hero h1 { font-size: clamp(2.4rem, 5vw, 4rem); color: var(--cream-light); margin: 0; }
.page-hero p { color: rgba(246,234,204,.78); margin: .6rem 0 0; max-width: 56ch; }
.page-hero .ph-mark { position: absolute; right: 4%; top: 50%; transform: translateY(-50%); width: 180px; opacity: .95; }
.crumbs { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: .16em; font-size: .8rem; color: var(--muted); padding: 1.2rem 0; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--burnt); }

/* ---------- shop ---------- */
.shop-layout { display: grid; grid-template-columns: 240px 1fr; gap: 2.5rem; padding: 2.5rem 0 5rem; }
.filters { position: sticky; top: 100px; align-self: start; display: grid; gap: 1.8rem; }
.filter-group h4 { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: .18em; font-size: .9rem; margin: 0 0 .7rem; color: var(--navy); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  font-family: var(--font-ui); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: .85rem;
  border: 2px solid var(--navy); background: transparent; color: var(--navy); border-radius: 999px; padding: .4rem .9rem;
}
.chip[aria-pressed="true"] { background: var(--navy); color: var(--cream); }
.chip-swatch { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--cream-light); box-shadow: 0 0 0 1px rgba(0,15,36,.35); padding: 0; }
.chip-swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--orange); }
.select { font: inherit; font-family: var(--font-ui); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; padding: .6rem 1rem; border-radius: 10px; border: 2px solid var(--navy); background: var(--cream-light); color: var(--navy); width: 100%; }
.shop-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.6rem; gap: 1rem; flex-wrap: wrap; }
.shop-toolbar .count { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.shop-toolbar .select { width: auto; }
.empty { padding: 3rem; text-align: center; border: 2px dashed var(--line); border-radius: var(--radius); }
.filter-toggle { display: none; }

/* ---------- product detail ---------- */
.pdp { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3.5rem; padding: 1rem 0 5rem; align-items: start; }
.pdp-gallery { display: grid; gap: 1rem; position: sticky; top: 100px; }
.pdp-gallery .mock { border-radius: 20px; }
.thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
.thumb { border: 2px solid transparent; border-radius: 12px; padding: 0; overflow: hidden; background: none; }
.thumb[aria-pressed="true"] { border-color: var(--orange); }
.thumb .mock { aspect-ratio: 1; }
.thumb .mock-note { display: none; }
.pdp-info h1 { font-size: clamp(2rem, 3.6vw, 3rem); }
.pdp-tagline { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: .16em; color: var(--burnt); font-weight: 700; margin: 0 0 .6rem; }
.pdp-price { font-family: var(--font-display); font-size: 2rem; margin: .4rem 0 1.2rem; }
.opt { margin: 1.4rem 0; }
.opt-label { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: .16em; font-weight: 700; font-size: .9rem; margin-bottom: .6rem; display: flex; justify-content: space-between; }
.opt-label span { color: var(--muted); font-weight: 600; }
.size-btn { min-width: 54px; }
.qty { display: inline-flex; align-items: center; border: 2px solid var(--navy); border-radius: 999px; overflow: hidden; }
.qty button { width: 44px; height: 46px; border: 0; background: transparent; font-size: 1.2rem; color: var(--navy); }
.qty input { width: 44px; text-align: center; border: 0; background: transparent; font: inherit; font-weight: 700; color: var(--navy); }
.buy-row { display: flex; gap: .8rem; align-items: center; margin-top: 1.4rem; }
.buy-row .btn { flex: 1; }
.pdp-perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin: 2rem 0; }
.perk { background: var(--cream); border-radius: 12px; padding: 1rem; text-align: center; font-family: var(--font-ui); text-transform: uppercase; letter-spacing: .1em; font-size: .82rem; font-weight: 600; }
.perk strong { display: block; color: var(--burnt); font-size: 1.2rem; }
details.acc { border-top: 1px solid var(--line); padding: 1rem 0; }
details.acc:last-of-type { border-bottom: 1px solid var(--line); }
details.acc summary { cursor: pointer; list-style: none; font-family: var(--font-ui); text-transform: uppercase; letter-spacing: .14em; font-weight: 700; display: flex; justify-content: space-between; }
details.acc summary::-webkit-details-marker { display: none; }
details.acc summary::after { content: '+'; font-size: 1.3rem; line-height: 1; color: var(--burnt); }
details.acc[open] summary::after { content: '\2212'; }
details.acc p, details.acc ul { color: var(--muted); margin: .8rem 0 0; }
.mock-disclaimer { font-size: .85rem; color: var(--muted); margin-top: .4rem; }

/* ---------- cart drawer ---------- */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(0, 15, 36, .55); opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 90; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: var(--cream-light); z-index: 100;
  transform: translateX(100%); transition: transform .3s ease; display: flex; flex-direction: column; box-shadow: -10px 0 40px rgba(0,0,0,.25);
}
.drawer { visibility: hidden; }
body.cart-open .drawer { transform: none; visibility: visible; }
body.cart-open .drawer-backdrop { opacity: 1; pointer-events: auto; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 1.2rem 1.4rem; border-bottom: 2px solid var(--navy); }
.drawer-head h3 { margin: 0; font-size: 1.6rem; }
.drawer-body { flex: 1; overflow-y: auto; padding: 1rem 1.4rem; }
.drawer-foot { padding: 1.2rem 1.4rem 1.6rem; border-top: 2px solid var(--navy); background: var(--cream); }
.line { display: grid; grid-template-columns: 84px 1fr auto; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); align-items: center; }
.line .mock { aspect-ratio: 1; border-radius: 10px; }
.line .mock-note { display: none; }
.line h5 { margin: 0; font-family: var(--font-ui); text-transform: uppercase; letter-spacing: .06em; font-size: 1rem; line-height: 1.2; }
.line small { color: var(--muted); display: block; }
.line .qty { transform: scale(.82); transform-origin: left; margin-top: .2rem; }
.line .qty button { height: 36px; width: 36px; }
.line-right { text-align: right; display: grid; gap: .3rem; justify-items: end; }
.remove { background: none; border: 0; color: var(--muted); text-decoration: underline; font-size: .85rem; padding: 0; }
.subtotal { display: flex; justify-content: space-between; font-family: var(--font-ui); text-transform: uppercase; letter-spacing: .14em; font-weight: 700; font-size: 1.1rem; margin-bottom: .4rem; }
.drawer-note { font-size: .85rem; color: var(--muted); margin: 0 0 1rem; }
.checkout-wrap { position: relative; }
.checkout-wrap .btn[disabled] { opacity: .7; cursor: progress; }
.checkout-msg { display: none; margin: .75rem 0 0; padding: .7rem .85rem; border-left: 3px solid #F95100; background: rgba(249,81,0,.08); font-size: .9rem; line-height: 1.45; }
.checkout-msg.show { display: block; }
.checkout-msg a { color: inherit; text-decoration: underline; }
.checkout-secure {
  display: block; text-align: center; margin-top: .6rem; font-family: var(--font-ui); text-transform: uppercase; letter-spacing: .14em;
  font-size: .72rem; opacity: .65; font-weight: 700;
}
.cart-empty { text-align: center; padding: 3rem 1rem; }
.cart-empty img { width: 120px; margin: 0 auto 1rem; }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 140%); background: var(--navy); color: var(--cream); padding: .9rem 1.4rem; border-radius: 999px; font-family: var(--font-ui); text-transform: uppercase; letter-spacing: .12em; font-weight: 700; z-index: 120; transition: transform .3s; box-shadow: var(--shadow); }
.toast { visibility: hidden; opacity: 0; }
.toast.show { transform: translate(-50%, 0); visibility: visible; opacity: 1; }
.toast b { color: var(--orange); }

/* ---------- content pages ---------- */
.prose { max-width: 760px; }
.prose p, .prose li { color: var(--muted); }
.prose h2 { font-size: 2rem; margin-top: 2.4rem; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.value { background: var(--cream); border-radius: var(--radius); padding: 1.8rem; }
.value img { width: 64px; margin-bottom: 1rem; }
.value h3 { font-size: 1.25rem; }
.value p { margin: 0; color: var(--muted); }
.contact-card { background: var(--navy); color: var(--cream); border-radius: 20px; padding: 2.4rem; }
.contact-card a { color: var(--orange); font-weight: 700; }
.contact-card img { width: 120px; margin-bottom: 1rem; }
.field { display: grid; gap: .4rem; margin-bottom: 1.1rem; }
.field label { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: .14em; font-weight: 700; font-size: .85rem; }
.field .input, .field textarea { border-radius: 12px; }
textarea.input { min-height: 150px; resize: vertical; font: inherit; }
.notice { background: var(--tan); border-left: 5px solid var(--orange); padding: 1rem 1.2rem; border-radius: 8px; font-size: .95rem; }
.faq-nav { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 2rem; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
  .nav { gap: 1.3rem; }
  .signup .wrap { grid-template-columns: 1fr 1fr; }
  .signup img { display: none; }
  .social-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  body { font-size: 16px; }
  .nav { display: none; }
  .menu-btn { display: grid; }
  .mobile-nav { display: block; max-height: 0; overflow: hidden; transition: max-height .3s; background: var(--cream-light); border-bottom: 2px solid transparent; }
  body.menu-open .mobile-nav { max-height: 420px; border-bottom-color: var(--navy); }
  .mobile-nav a { display: block; padding: .9rem 20px; font-family: var(--font-ui); text-transform: uppercase; letter-spacing: .16em; font-weight: 700; text-decoration: none; border-top: 1px solid var(--line); }
  .site-header .wrap { height: 66px; }
  .logo img { height: 44px; }
  .hero .wrap { grid-template-columns: 1fr; padding: 3rem 0 3.5rem; gap: 2rem; text-align: center; }
  .hero .lead { margin-inline: auto; }
  .hero-ctas, .hero-meta { justify-content: center; }
  .hero-badge { width: min(260px, 72%); order: -1; }
  .announce .hide-sm { display: none; }
  .grid, .grid--3 { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .cats { grid-template-columns: 1fr; }
  .cat .mock { aspect-ratio: 16 / 10; }
  .cat .mock svg.garment { width: 50%; }
  .story, .two-col, .pdp { grid-template-columns: 1fr; gap: 2rem; }
  .story-art { min-height: 300px; }
  .pillars, .values { grid-template-columns: 1fr; }
  .signup .wrap { grid-template-columns: 1fr; padding: 3rem 0; gap: 1.2rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .section { padding: 3.8rem 0; }
  .shop-layout { grid-template-columns: 1fr; gap: 1rem; padding-top: 1.2rem; }
  .filters { position: static; display: none; background: var(--cream); padding: 1.2rem; border-radius: var(--radius); }
  .filters.open { display: grid; }
  .filter-toggle { display: inline-flex; }
  .pdp-gallery { position: static; }
  .page-hero .ph-mark { display: none; }
  .quick-add { opacity: 1; transform: none; width: 38px; height: 38px; }
}
@media (max-width: 480px) {
  .card-title { font-size: 1rem; }
  .card-tag { display: none; }
  .price { font-size: 1.05rem; }
  .swatch { width: 13px; height: 13px; }
  .form-row { flex-direction: column; }
  .pdp-perks { grid-template-columns: 1fr; }
  .marquee span { font-size: 1.05rem; }
  .badge { font-size: .65rem; padding: .25rem .55rem; top: 8px; left: 8px; }
  .quick-add { top: 8px; right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body.cart-open .toast { display: none; }

/* =====================================================================
   v2 — founder requests: tri-star + star-bolt pattern background,
   wordmark-circle emblem in header, lightning wordmark above hero title
   ===================================================================== */
:root {
  --pattern: url('../../public/brand/pattern-tristar-bolt.png');
  --pattern-size: 440px 360px;
}
@supports (background-image: image-set(url('x.webp') type('image/webp'))) {
  :root { --pattern: image-set(url('../../public/brand/pattern-tristar-bolt.webp') type('image/webp'), url('../../public/brand/pattern-tristar-bolt.png') type('image/png')); }
}

/* Site-wide dark patterned base. Sections with their own solid fill sit on top of it. */
body {
  color: var(--cream);
  background-color: var(--charcoal);
  background-image: var(--pattern);
  background-size: var(--pattern-size);
  background-repeat: repeat;
  background-position: center top;
  --muted: rgba(246, 234, 204, .84);
  --line: rgba(246, 234, 204, .22);
}
/* v3: no light surfaces any more; only the product mockup tiles keep their pale backdrop (see v3 block at the end) */

/* Inner-page heroes + creed band let the pattern show through their colour */
.page-hero { background: var(--pattern) center top / var(--pattern-size) repeat, var(--navy); }
.section--navy { background: var(--pattern) center top / var(--pattern-size) repeat, var(--navy); }
.tbs .tri-bg { opacity: .06; }

/* Dark-context contrast fixes (default sections now sit on charcoal) */
.eyebrow { color: var(--orange); }
.btn { background: var(--cream); border-color: var(--cream); color: var(--navy); }
.btn:hover { background: var(--cream-light); }
.btn--orange, .section--cream .btn--orange, .drawer .btn--orange { background: var(--orange); border-color: var(--orange); color: var(--black); }
.btn--orange:hover, .section--cream .btn--orange:hover, .drawer .btn--orange:hover { background: var(--burnt); border-color: var(--burnt); }
.btn--ghost, .section--cream .btn--ghost, .drawer .btn--ghost { background: transparent; color: inherit; border-color: currentColor; }
.signup .btn { background: var(--ink); border-color: var(--ink); color: var(--cream-light); }
.story blockquote { color: var(--cream); }
.filter-group h4 { color: var(--cream); }
.chip { border-color: rgba(246, 234, 204, .55); color: var(--cream); }
.chip:hover { border-color: var(--cream); }
.chip[aria-pressed="true"] { background: var(--cream); border-color: var(--cream); color: var(--navy); }
.chip-swatch { border-color: var(--charcoal); box-shadow: 0 0 0 1px rgba(246, 234, 204, .45); }
.chip-swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--orange); }
.qty { border-color: rgba(246, 234, 204, .55); }
.qty button, .qty input { color: var(--cream); }
.swatch { border-color: var(--charcoal); box-shadow: 0 0 0 1px rgba(246, 234, 204, .4); }
.crumbs a:hover { color: var(--orange); }
.perk strong { color: var(--orange); }
.empty { border-color: var(--line); }
details.acc summary::after { color: var(--orange); }
.prose a:not(.chip):not(.btn), details.acc a { color: var(--orange); }
.mock-disclaimer { color: var(--muted); }

/* Header: NASHTY wordmark-circle emblem */
.site-header .wrap { height: 84px; }
.logo { display: block; line-height: 0; }
.logo img { height: 70px; width: 70px; filter: drop-shadow(0 2px 3px rgba(0, 15, 36, .25)); transition: transform .2s; }
.logo:hover img { transform: rotate(-6deg) scale(1.04); }

/* Homepage hero: lightning wordmark above the title, Est. 2026 directly below it */
.hero-mark { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 1rem; }
.hero-wordmark { width: clamp(172px, 20vw, 280px); height: auto; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .5)); margin-left: -6px; }
.hero-est { margin: -.2rem 0 1rem; color: var(--cream); letter-spacing: .32em; font-size: .8rem; padding-left: .2rem; }
/* star-bolt emblem: parked in the hero's top-right corner, clear of the badge art */
/* v3: the emblem sits exactly over a star-bolt icon of the hero's pattern.
   Pattern tile is 440x360 CSS px; one star-bolt icon is centred at (330px, 90px) in the tile, i.e. 110px in from the tile's right edge.
   The hero's pattern layer is anchored to the same right edge the emblem uses (extended 3 tiles past it so it always fills the hero),
   so the grid follows the emblem at every width.  --cw = emblem width, --ct = emblem top, --cr = emblem right inset. */
.hero { --cw: 87px; --ct: 21px; --cr: max(20px, calc((100% - var(--wrap)) / 2)); }
.hero::before {
  inset: 0 calc(var(--cr) - 1320px) 0 -440px;
  background-position: right calc(var(--cw) / 2 - 110px) top calc(var(--ct) + var(--cw) * .49125 - 90px);
}
.hero-corner { position: absolute; z-index: 1; top: var(--ct); right: var(--cr); width: var(--cw); height: auto; animation: spin 26s linear infinite; }
.hero-est::before, .hero-est::after { color: var(--orange); }

/* Charcoal cards on the charcoal base get an edge so they still read as cards */
.story-art, .t-char, .mock.on-dark { box-shadow: inset 0 0 0 1px rgba(246, 234, 204, .1); }
.site-footer { border-top: 1px solid rgba(246, 234, 204, .12); }

@media (max-width: 860px) {
  .site-header .wrap { height: 70px; }
  .hero-badge { width: min(210px, 58%); }
  .logo img { height: 56px; width: 56px; }
  .mobile-nav { background: var(--charcoal-2); }
  body.menu-open .mobile-nav { border-bottom-color: rgba(246, 234, 204, .22); }
  .filters { background: var(--charcoal-2); border: 1px solid var(--line); }
  .hero-mark { align-items: center; }
  .hero-wordmark { width: min(200px, 54vw); margin-left: 0; }
  .hero { --cw: 87px; --ct: 12px; --cr: 12px; }
  .hero .wrap { padding-top: 8.4rem; }
  .hero-est { font-size: .72rem; letter-spacing: .26em; }
}
@media (min-width: 861px) and (max-width: 1100px) {
  .hero .wrap { padding-top: 6.5rem; }
}

/* =====================================================================
   v3 — whole site dark: every former cream surface sits on the charcoal
   pattern, text is brand cream, orange/burnt stay as accents + buttons
   ===================================================================== */
/* header + mobile nav */
.site-header { background: rgba(18, 18, 18, .94); border-bottom: 2px solid rgba(246, 234, 204, .18); color: var(--cream); }
.logo img { filter: drop-shadow(0 0 1px rgba(246, 234, 204, .35)) drop-shadow(0 3px 8px rgba(0, 0, 0, .6)); }
.icon-btn { border-color: rgba(246, 234, 204, .7); color: var(--cream); }
.icon-btn:hover { background: var(--cream); border-color: var(--cream); color: var(--navy); }
.cart-count { border-color: var(--charcoal); }
.mobile-nav { color: var(--cream); }
/* former cream sections now show the dark patterned base */
.section--cream { background: transparent; color: var(--cream); border-block: 1px solid rgba(246, 234, 204, .1); }
/* cards / tiles that used to be cream */
.value, .perk { background: rgba(34, 34, 34, .92); color: var(--cream); box-shadow: inset 0 0 0 1px rgba(246, 234, 204, .14); }
.value p { color: var(--muted); }
.notice { background: rgba(249, 81, 0, .1); color: var(--cream); }
.contact-card { box-shadow: inset 0 0 0 1px rgba(246, 234, 204, .14); }
.empty { color: var(--cream); }
/* form controls */
.input, .select { background: #1B1B1B; color: var(--cream); border-color: rgba(246, 234, 204, .5); }
.input::placeholder { color: rgba(246, 234, 204, .62); opacity: 1; }
.input:focus, .select:focus { outline: 3px solid var(--orange); outline-offset: 2px; border-color: var(--cream); }
.select option { background: #1B1B1B; color: var(--cream); }
.signup .input { border-color: var(--black); }
.signup .input:focus { outline-color: var(--black); }
/* cart drawer */
.drawer { background: var(--charcoal) var(--pattern) center top / var(--pattern-size) repeat; color: var(--cream); border-left: 1px solid rgba(246, 234, 204, .14); }
.drawer-head { border-bottom-color: rgba(246, 234, 204, .22); }
.drawer-foot { background: #1A1A1A; border-top-color: rgba(246, 234, 204, .22); }
.drawer-backdrop { background: rgba(0, 0, 0, .65); }
.checkout-msg { background: rgba(249, 81, 0, .12); }
/* toast */
.toast { box-shadow: 0 0 0 1px rgba(246, 234, 204, .2), 0 10px 30px rgba(0, 0, 0, .5); }
/* product mockup tiles keep their pale backdrop so black and navy garments stay visible */
.card:hover .mock { box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.mock-note { color: rgba(0, 15, 36, .72); }
.mock.on-dark .mock-note { color: rgba(246, 234, 204, .72); }

/* =====================================================================
   v4 — mobile QA (Android Chrome / Razr Ultra main + cover screens)
   ===================================================================== */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { -webkit-tap-highlight-color: rgba(249, 81, 0, .18); }

/* legibility: nothing functional below 14px */
.announce { font-size: .875rem; }
.eyebrow, .hero-meta div, .cat-label span, .chip, .crumbs, .footer-bottom,
.mock-disclaimer, .remove, .drawer-note, .field label, .perk { font-size: .875rem; }
.cart-count { font-size: .875rem; }
.checkout-secure { font-size: .875rem; letter-spacing: .1em; opacity: .78; }
.hero-est { font-size: .875rem; }

/* tap targets: 44px minimum */
.section-head .link { display: inline-flex; align-items: center; min-height: 44px; padding-bottom: 0; border-bottom-width: 3px; }
.chip { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.chip-swatch { width: 44px; height: 44px; min-height: 44px; }
.qty button { width: 44px; height: 44px; }
.qty input { height: 44px; }
details.acc { padding: .35rem 0; }
details.acc summary { min-height: 44px; align-items: center; }
details.acc[open] { padding-bottom: 1rem; }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.crumbs { padding: .3rem 0; }
.site-footer ul { gap: 0; }
.site-footer li a { display: inline-flex; align-items: center; min-height: 44px; }
.remove { min-height: 44px; padding: 0 0 0 .6rem; }
.line .qty { transform: none; margin-top: .35rem; }
.line .qty button { width: 44px; height: 44px; }
.line .qty input { width: 40px; }
.badge { font-size: .875rem; letter-spacing: .08em; }
.mock-note { font-size: .75rem; }
@media (pointer: coarse) { .nav a { padding: .7rem 0; min-width: 44px; text-align: center; } }
/* touch screens have no hover: the quick-add button must always be visible */
@media (hover: none) { .quick-add { opacity: 1; transform: none; width: 44px; height: 44px; } }
.site-footer li a, .crumbs a { min-width: 44px; }
.line small { font-size: .875rem; }

/* drawer follows the dynamic viewport (Android URL bar) */
.drawer { bottom: auto; height: 100%; height: 100dvh; }

@media (max-width: 860px) {
  /* menu never taller than the screen below the header; scrolls inside */
  body.menu-open .mobile-nav { max-height: calc(100vh - 112px); max-height: calc(100dvh - 112px); overflow-y: auto; overscroll-behavior: contain; }
  .mobile-nav a { min-height: 48px; display: flex; align-items: center; padding-block: .55rem; }
  .quick-add { width: 44px; height: 44px; }
  .hero .wrap { padding-top: 6.4rem; }
  .hero-est { letter-spacing: .2em; }
}
@media (max-width: 480px) {
  /* narrow 2-up cards: badge keeps the top edge, quick-add + note share the bottom edge */
  .badge { font-size: .875rem; letter-spacing: .05em; padding: .25rem .55rem; }
  .card { container-type: inline-size; }
  .card .quick-add { top: calc(110cqw - 52px); right: 8px; }
  .card .mock-note { right: auto; left: 10px; bottom: 10px; max-width: calc(100% - 66px); font-size: .75rem; line-height: 1.15; letter-spacing: .1em; }
  .line { grid-template-columns: 64px 1fr auto; gap: .8rem; }
  .announce { letter-spacing: .12em; padding-inline: .6rem; }
}

/* short screens: Razr cover screen (490x335) and phones in landscape */
@media (max-height: 520px) {
  .site-header .wrap { height: 60px; }
  .logo img { height: 48px; width: 48px; }
  .icon-btn { width: 44px; height: 44px; }
  .announce { padding-block: .4rem; }
  body.menu-open .mobile-nav { max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); }
  .filters, .pdp-gallery { position: static; }
  /* whole drawer scrolls so cart lines never collapse behind the footer */
  .drawer { overflow-y: auto; overscroll-behavior: contain; }
  .drawer-body { flex: none; overflow: visible; }
  .drawer-head { padding-block: .7rem; }
  .drawer-foot { padding-block: .9rem 1rem; }
}
@media (max-height: 520px) and (min-width: 861px) {
  .hero-badge { width: min(300px, 100%); }
  .page-hero { padding: 2.6rem 0 2.4rem; }
  .page-hero .ph-mark { width: 130px; }
}
@media (min-width: 861px) and (max-width: 1400px) {
  .page-hero h1, .page-hero p { max-width: calc(100% - 230px); }
}