/* ============================================================
   STREETLAB — LAYOUT WIREFRAME (shared neutral palette)
   Page: #ededed · Surfaces: #e2e2e2/#dcdcdc · Lines: #c6c6c6
   Text: #333333 / #777777 · Brand accent mapped to #9a9a9a
   Fonts: Archivo (display) + Space Mono (labels/part numbers)
   ============================================================ */

:root {
  --bg: #ededed;
  --ink: #333333;
  --volt: #9a9a9a; /* brand accent neutralised to grey */
  --volt-dim: #9a9a9a;
  --line: 2px solid #c6c6c6;
  --line-thin: 1px solid #c6c6c6;
  --font-display: 'Archivo', sans-serif;
  --font-mono: 'Space Mono', monospace;
  --pad: clamp(20px, 4vw, 56px);
  --header-h: 72px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--pop); color: var(--pop-ink); }

a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--pop);
}

.mono { font-family: var(--font-mono); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}

/* ---------- Announcement bar ---------- */
.announce {
  background: var(--ink);
  color: var(--pop);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  padding: 8px 16px;
  text-transform: uppercase;
  flex-wrap: wrap;
}
.announce-dot {
  width: 6px; height: 6px;
  background: var(--pop);
  display: inline-block;
  transform: rotate(45deg);
  flex: none;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  border-bottom: var(--line);
  transition: box-shadow 0.25s ease;
}
.site-header.scrolled { box-shadow: 0 6px 0 rgba(10, 10, 10, 0.08); }

.header-inner {
  max-width: 1440px;
  margin: 0 auto;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 var(--pad);
  transition: height 0.25s ease;
}
.site-header.scrolled .header-inner { height: 60px; }

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.02em;
}
.logo sup { font-size: 9px; font-family: var(--font-mono); margin-left: 2px; }
.logo-mark {
  width: 18px; height: 18px;
  background: var(--pop);
  border: var(--line);
  transform: rotate(45deg);
  flex: none;
}

.site-nav { display: flex; align-items: center; gap: 28px; }
.nav-link {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  position: relative;
  padding: 4px 0;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 3px;
  background: var(--pop);
  transition: width 0.2s ease;
}
.nav-link:hover::after { width: 100%; }
.nav-cta-mobile { display: none; }

.header-actions { display: flex; align-items: center; gap: 12px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 12px 20px;
  border: var(--line);
  background: var(--pop);
  color: var(--pop-ink);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  box-shadow: 4px 4px 0 var(--pop);
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--pop); }
.btn:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--pop); }

.btn-cart { position: relative; padding: 10px 16px; background: var(--ink); color: var(--bg); }
.cart-count {
  background: var(--pop);
  color: var(--pop-ink);
  border: 2px solid var(--bg);
  min-width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  padding: 0 4px;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cart-count.bump { transform: scale(1.45); }

.menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  border: var(--line);
  padding: 10px;
  background: var(--bg);
}
.menu-btn span {
  display: block;
  height: 3px;
  background: var(--ink);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(32px, 6vw, 88px) var(--pad) clamp(48px, 7vw, 96px);
  overflow: hidden;
}
.hero-index {
  position: absolute;
  top: -0.16em;
  right: var(--pad);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(140px, 22vw, 320px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px var(--ink);
  opacity: 0.16;
  pointer-events: none;
  user-select: none;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
  position: relative;
}

.hero-title {
  font-weight: 900;
  font-size: clamp(44px, 6.4vw, 96px);
  line-height: 0.94;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: 18px 0 22px;
}
.hero-title .hl {
  background: var(--pop);
  padding: 0 0.08em;
  box-shadow: 6px 6px 0 var(--ink);
  display: inline-block;
}
.hero-sub {
  max-width: 46ch;
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 500;
  margin-bottom: 28px;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; }
.btn-ghost { background: var(--bg); color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.btn-ghost:hover { box-shadow: 6px 6px 0 var(--ink); background: var(--pop); color: var(--pop-ink); }
.btn-ghost:active { box-shadow: 2px 2px 0 var(--ink); }

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border: var(--line);
  width: fit-content;
  background: var(--bg);
}
.hero-meta li {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 10px 16px;
}
.hero-meta li + li { border-left: var(--line); }

.hero-visual { position: relative; }
.hero-card {
  background: var(--bg);
  border: var(--line);
  box-shadow: 10px 10px 0 var(--ink);
  padding: 18px 18px 12px;
  transform: rotate(-1.2deg);
  margin-top: clamp(-40px, -3vw, -16px);
  position: relative;
  z-index: 2;
}
.hero-card-tag {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}
.car-svg { display: block; width: 100%; height: auto; }
.hero-card-foot, .build-card-foot {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-top: var(--line-thin);
  margin-top: 10px;
  padding-top: 8px;
}
.hero-sticker {
  position: absolute;
  top: -34px;
  left: -28px;
  z-index: 3;
  width: 96px; height: 96px;
  background: var(--pop);
  color: var(--pop-ink);
  border: var(--line);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.15;
  transform: rotate(-10deg);
  animation: sticker-spin 9s ease-in-out infinite;
}
@keyframes sticker-spin {
  0%, 100% { transform: rotate(-10deg); }
  50% { transform: rotate(8deg); }
}

/* ---------- Marquee ---------- */
.marquee {
  background: var(--ink);
  color: var(--bg);
  border-top: var(--line);
  border-bottom: var(--line);
  overflow: hidden;
  padding: 14px 0;
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 28s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-group {
  display: flex;
  align-items: center;
  gap: 34px;
  padding-right: 34px;
  white-space: nowrap;
}
.marquee-group span {
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.marquee-group i {
  font-style: normal;
  color: var(--pop);
  font-family: var(--font-mono);
  font-size: 14px;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Sections ---------- */
.section {
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 110px) var(--pad);
}
.section-head {
  display: grid;
  grid-template-columns: auto 1fr minmax(0, 340px);
  gap: clamp(20px, 3vw, 48px);
  align-items: start;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.section-index {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(48px, 6vw, 92px);
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 2px var(--ink);
}
.section-title {
  font-weight: 900;
  font-size: clamp(36px, 4.6vw, 68px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-top: 10px;
}
.section-note {
  font-size: 14px;
  font-weight: 500;
  max-width: 34ch;
  border-left: 4px solid var(--pop);
  padding-left: 16px;
  align-self: end;
}

/* ---------- Tabs ---------- */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border: var(--line);
  width: fit-content;
  max-width: 100%;
  background: var(--bg);
  margin-bottom: 14px;
}
.tab {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 12px 22px;
  border-right: var(--line);
  transition: background 0.15s ease, color 0.15s ease;
}
.tab:last-child { border-right: none; }
.tab:hover { background: var(--pop); }
.tab.is-active { background: var(--pop); color: var(--pop-ink); }
.result-count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 26px;
  opacity: 0.7;
}

/* ---------- Product grid ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 22px;
}
.product-card {
  border: var(--line);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  position: relative;
}
.product-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 7px 7px 0 var(--ink);
}
.product-card.flash { animation: card-flash 1.4s ease; }
@keyframes card-flash {
  0%, 100% { box-shadow: 7px 7px 0 var(--ink); }
  30% { box-shadow: 7px 7px 0 var(--pop), 0 0 0 4px var(--pop); }
}

.pc-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: var(--line-thin);
}
.pc-partno {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.pc-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border: var(--line-thin);
  flex: none;
}
.pc-badge--stock { background: var(--pop); color: var(--pop-ink); }
.pc-badge--low { background: var(--pop); color: var(--pop-ink); }
.pc-badge--ship { background: var(--bg); }
.pc-badge--new { background: var(--pop); color: var(--pop-ink); box-shadow: 2px 2px 0 var(--ink); }

.pc-illus {
  background: repeating-linear-gradient(
    -45deg,
    transparent 0 10px,
    rgba(10, 10, 10, 0.045) 10px 12px
  );
  border-bottom: var(--line-thin);
  padding: 26px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 168px;
}
.pc-illus svg { width: 100%; max-width: 190px; height: auto; display: block; }

.pc-body { padding: 16px 16px 14px; flex: 1; display: flex; flex-direction: column; }
.pc-brand {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.65;
  margin-bottom: 6px;
}
.pc-name {
  font-weight: 800;
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.pc-fit {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  opacity: 0.75;
  margin-bottom: 12px;
}
.pc-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  margin-bottom: 14px;
}
.pc-stars { display: inline-flex; gap: 2px; }
.pc-stars svg { width: 14px; height: 14px; }
.pc-reviews { font-family: var(--font-mono); font-size: 10px; opacity: 0.65; }

.pc-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border-top: var(--line-thin);
  padding: 12px 16px;
}
.pc-price { font-weight: 900; font-size: 20px; letter-spacing: -0.01em; }
.pc-price small {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 10px;
  display: block;
  opacity: 0.6;
}
.pc-add {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: var(--line);
  background: var(--pop);
  color: var(--pop-ink);
  padding: 9px 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.pc-add:hover { background: var(--pop); color: var(--pop-ink); }
.pc-add:active { transform: scale(0.95); }

/* ---------- Build of the month ---------- */
.build { background: var(--ink); color: var(--bg); max-width: none; }
.build > * { max-width: 1440px; margin-left: auto; margin-right: auto; }
.build .section-index { -webkit-text-stroke: 2px var(--pop); }
.build .section-note { border-left-color: var(--pop); }
.build .eyebrow { color: var(--pop); }

.build-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.build-card {
  border: 2px solid var(--bg);
  box-shadow: 10px 10px 0 var(--pop);
  padding: 18px 18px 12px;
  background: var(--ink);
}
.build-card-foot { border-top-color: var(--bg); }

.build-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 2px solid var(--bg);
  margin-top: 26px;
}
.build-specs > div {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(242, 241, 237, 0.35);
}
.build-specs > div:nth-child(odd) { border-right: 1px solid rgba(242, 241, 237, 0.35); }
.build-specs > div:nth-last-child(-n+2) { border-bottom: none; }
.build-specs dt {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--pop);
  margin-bottom: 4px;
}
.build-specs dd { font-size: 14px; font-weight: 700; }

.build-parts-title {
  font-weight: 900;
  font-size: clamp(22px, 2.4vw, 30px);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
}
.build-parts-title span { color: var(--pop); }

.build-parts-list li + li { border-top: 1px solid rgba(242, 241, 237, 0.35); }
.build-part {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 6px;
  transition: background 0.15s ease, padding-left 0.15s ease;
}
.build-part:hover { background: rgba(215, 245, 46, 0.08); padding-left: 14px; }
.bp-num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 26px;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--pop);
  flex: none;
}
.bp-body { flex: 1; min-width: 0; }
.bp-name { display: block; font-weight: 800; font-size: 16px; text-transform: uppercase; }
.bp-partno {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  opacity: 0.65;
  margin-top: 2px;
}
.bp-price {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  color: var(--pop);
  flex: none;
}
.build-parts-note {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  opacity: 0.7;
  margin-top: 18px;
  border-left: 4px solid var(--pop);
  padding-left: 14px;
}

/* ---------- Lookbook ---------- */
.lookbook {
  position: relative;
  overflow: hidden;
  border-top: var(--line);
  border-bottom: var(--line);
  max-width: none;
  background:
    repeating-linear-gradient(90deg, transparent 0 119px, rgba(10,10,10,0.06) 119px 120px),
    var(--bg);
}
.lookbook-index {
  position: absolute;
  top: 18px;
  right: var(--pad);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(90px, 14vw, 200px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px var(--ink);
  opacity: 0.14;
  pointer-events: none;
}
.lookbook-inner { max-width: 1440px; margin: 0 auto; }
.lookbook-line {
  font-weight: 900;
  font-size: clamp(34px, 6vw, 88px);
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.lookbook-line--accent { color: transparent; -webkit-text-stroke: 2.5px var(--ink); }
.lookbook-line--accent span {
  color: var(--pop-ink);
  -webkit-text-stroke: 0;
  background: var(--pop);
  padding: 0 0.1em;
}
.lookbook-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: var(--line);
  background: var(--bg);
  margin-top: clamp(32px, 4vw, 56px);
}
.fact {
  padding: 22px 20px;
  border-right: var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fact:last-child { border-right: none; }
.fact-num { font-weight: 900; font-size: clamp(28px, 3vw, 44px); letter-spacing: -0.02em; }
.fact-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
}

/* ---------- Reviews ---------- */
.review-nav { display: flex; align-items: center; gap: 14px; align-self: end; }
.review-btn {
  width: 46px; height: 46px;
  border: var(--line);
  background: var(--bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, transform 0.1s ease;
  box-shadow: 3px 3px 0 var(--ink);
}
.review-btn:hover { background: var(--pop); }
.review-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.review-index { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; }

.review-box {
  border: var(--line);
  background: var(--bg);
  box-shadow: 10px 10px 0 var(--pop);
  padding: clamp(24px, 4vw, 48px);
  max-width: 860px;
}
.review-stars { display: flex; gap: 4px; margin-bottom: 18px; color: var(--pop); }
.review-stars svg { width: 20px; height: 20px; }
.review-text {
  font-weight: 800;
  font-size: clamp(19px, 2.4vw, 28px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
}
.review-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.review-meta::before {
  content: "";
  display: inline-block;
  width: 28px; height: 3px;
  background: var(--pop);
  margin-right: 10px;
  vertical-align: middle;
  border: 1px solid var(--ink);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: var(--bg);
  border-top: 6px solid var(--pop);
}
.footer-grid {
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(48px, 6vw, 80px) var(--pad) 40px;
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
}
.logo--footer { color: var(--bg); margin-bottom: 16px; }
.logo--footer .logo-mark { border-color: var(--bg); }
.footer-tag { font-size: 14px; opacity: 0.8; max-width: 34ch; margin-bottom: 16px; }
.footer-reg { font-size: 10px; opacity: 0.5; letter-spacing: 0.04em; }

.footer-head {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--pop);
  margin-bottom: 16px;
}
.footer-col ul li { margin-bottom: 10px; }
.footer-col a { font-size: 14px; opacity: 0.85; transition: opacity 0.15s ease, color 0.15s ease; }
.footer-col a:hover { opacity: 1; color: var(--pop); }
.footer-col address { font-style: normal; font-size: 14px; line-height: 1.8; opacity: 0.85; }

.hours li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  margin-bottom: 10px;
  border-bottom: 1px dashed rgba(242, 241, 237, 0.3);
  padding-bottom: 8px;
}
.footer-ship { font-size: 11px; opacity: 0.6; margin-top: 14px; line-height: 1.6; }

.footer-bar {
  max-width: 1440px;
  margin: 0 auto;
  padding: 18px var(--pad);
  border-top: 1px solid rgba(242, 241, 237, 0.25);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  opacity: 0.75;
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 120px);
  background: var(--ink);
  color: var(--pop);
  border: 2px solid var(--pop);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 12px 22px;
  z-index: 200;
  transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1);
  pointer-events: none;
  max-width: calc(100vw - 32px);
  text-align: center;
}
.toast.show { transform: translate(-50%, 0); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .section-head { grid-template-columns: auto 1fr; }
  .section-note, .review-nav { grid-column: 1 / -1; }
  .build-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
  .menu-btn { display: flex; }
  .cart-label { display: none; }
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--bg);
    border-bottom: var(--line);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    display: none;
  }
  .site-nav.open { display: flex; }
  .nav-link {
    padding: 16px var(--pad);
    border-top: var(--line-thin);
    font-size: 14px;
  }
  .nav-link::after { display: none; }
  .nav-link:hover { background: var(--pop); }
  .nav-cta-mobile {
    display: block;
    padding: 16px var(--pad);
    border-top: var(--line);
    background: var(--pop);
    color: var(--pop-ink);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
  }
  .hero-grid { grid-template-columns: 1fr; align-items: start; }
  .hero-card { margin-top: 0; transform: rotate(0); }
  .hero-sticker { top: -24px; left: auto; right: -10px; width: 80px; height: 80px; font-size: 11px; }
  .lookbook-facts { grid-template-columns: 1fr 1fr; }
  .fact:nth-child(2) { border-right: none; }
  .fact:nth-child(1), .fact:nth-child(2) { border-bottom: var(--line); }
}

@media (max-width: 520px) {
  .announce { font-size: 9px; gap: 8px; }
  .hero-meta { width: 100%; }
  .hero-meta li { flex: 1; text-align: center; padding: 10px 6px; font-size: 9px; }
  .tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .tab { flex: none; }
  .section-head { grid-template-columns: 1fr; }
  .section-index { font-size: 44px; }
  .build-specs { grid-template-columns: 1fr; }
  .build-specs > div:nth-child(odd) { border-right: none; }
  .build-specs > div:nth-last-child(2) { border-bottom: 1px solid rgba(242, 241, 237, 0.35); }
  .footer-grid { grid-template-columns: 1fr; }
  .lookbook-facts { grid-template-columns: 1fr; }
  .fact { border-right: none; border-bottom: var(--line); }
  .fact:last-child { border-bottom: none; }
  .bp-num { font-size: 20px; }
  .hero-ctas .btn { width: 100%; justify-content: center; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track { animation: none; }
  .hero-sticker { animation: none; }
  * { transition-duration: 0.01ms !important; }
}


/* ============================================================
   LAYOUT WIREFRAME OVERRIDES
   Neutralises what the root variables can't reach: inverted
   (dark) sections, hard-coded rgba borders, shadows, gradient
   textures, and the image placeholder boxes. Structure,
   spacing and interactions are unchanged.
   ============================================================ */

/* --- No shadows, no glows --- */
.site-header.scrolled,
.btn, .btn:hover, .btn:active,
.btn-ghost, .btn-ghost:hover, .btn-ghost:active,
.hero-card, .hero-title .hl,
.product-card:hover, .pc-badge--new,
.build-card, .review-box,
.review-btn, .review-btn:active,
:focus-visible {
  box-shadow: none;
}

/* --- Inverted (dark) sections become light surfaces --- */
.announce { background: #e2e2e2; color: #333333; }
.marquee { background: #e2e2e2; color: #333333; }
.build { background: #dcdcdc; color: #333333; }
.site-footer { background: #dcdcdc; color: #333333; border-top-color: #c6c6c6; }

/* --- Build section internals (were light-on-dark) --- */
.build .eyebrow { color: #777777; }
.build .section-index { -webkit-text-stroke: 2px var(--pop); }
.build-card { background: #e2e2e2; border-color: #c6c6c6; }
.build-card-foot { border-top-color: #c6c6c6; }
.build-specs { border-color: #c6c6c6; }
.build-specs > div { border-bottom-color: #c6c6c6; }
.build-specs > div:nth-child(odd) { border-right-color: #c6c6c6; }
.build-specs dt { color: #777777; }
.build-parts-title span { color: #777777; }
.build-parts-list li + li { border-top-color: #c6c6c6; }
.build-part:hover { background: rgba(0, 0, 0, 0.04); }
.bp-price { color: #777777; }

/* --- Footer internals (were light-on-dark) --- */
.logo--footer { color: #333333; }
.logo--footer .logo-mark { border-color: #c6c6c6; }
.footer-head { color: #777777; }
.footer-col a:hover { color: #333333; }
.hours li { border-bottom-color: #c6c6c6; }
.footer-bar { border-top-color: #c6c6c6; }

/* --- Component colour fixes --- */
.tab:hover { background: #dcdcdc; }
.tab.is-active { color: var(--pop-ink); }
.pc-badge--low { color: var(--pop-ink); }
.review-btn:hover { background: #dcdcdc; }
.cart-count { border-color: #c6c6c6; }
.toast { color: #ededed; }
.nav-cta-mobile { color: var(--pop-ink); }

/* --- Gradient textures removed --- */
.lookbook { background: #e2e2e2; }
.pc-illus { background: #dcdcdc; }

/* --- Deep-link flash highlight without shadows --- */
@keyframes card-flash {
  0%, 100% { outline: 2px solid transparent; outline-offset: 2px; }
  30% { outline: 2px solid var(--pop); outline-offset: 2px; }
}

/* --- Image placeholder boxes --- */
.img-ph {
  background: #dcdcdc;
  border: 1px dashed #a8a8a8;
  display: flex;
  align-items: center;
  justify-content: center;
}
.img-ph > span {
  font-family: ui-monospace, 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: #777777;
  text-transform: uppercase;
}
.hero-ph, .build-ph { width: 100%; aspect-ratio: 620 / 240; }

/* --- Small-screen fixes --- */
@media (max-width: 820px) {
  .nav-link:hover { background: #dcdcdc; }
}
@media (max-width: 520px) {
  .build-specs > div:nth-last-child(2) { border-bottom-color: #c6c6c6; }
}

/* ============================================================
   STREET CHARACTER PASS — primer-grey graffiti, brick & tape
   All character comes from texture, type, shape and motion.
   Colour is untouched apart from the accent surfaces, which
   route through var(--pop) (default #9a9a9a); every other
   value below is one of the wireframe greys (#ededed #e2e2e2
   #dcdcdc #c6c6c6 #a8a8a8 #777777 #333333) or black/grey at
   low alpha.
   ------------------------------------------------------------
   1. Concrete grain film over the whole page (SVG turbulence)
   2. Hero: brick-wall panel with torn bottom edge, overspray
      speckle, ghost tag, marker-swipe headline, spray
      underline with drips, scribble arrow, amplified sticker
   3. Marquee: torn tape edges, slowly spinning ✕ marks
   4. Section heads: tag-style numbers + slapped "SG" stickers
   5. Featured project: concrete backdrop, taped photo corners
   6. Manifesto: wheatpaste poster slabs, stencil offset,
      torn section edges, ghost tag
   7. Stock badges: slightly rotated slaps
   All motion is gated by prefers-reduced-motion at the end.
   ============================================================ */

:root {
  --font-tag: 'Sedgwick Ave Display', 'Archivo', sans-serif;
  /* fine concrete grain — black specks baked at ~32% alpha */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.32 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
  /* same grain, baked softer — for flat concrete sections */
  --grain-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.13 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
  /* running-bond brick tile — mortar #c6c6c6, bricks #e2e2e2/#ededed */
  --brick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='60' viewBox='0 0 192 60'%3E%3Crect width='192' height='60' fill='%23c6c6c6'/%3E%3Crect y='3' width='93' height='27' fill='%23e2e2e2'/%3E%3Crect x='96' y='3' width='93' height='27' fill='%23ededed'/%3E%3Crect y='33' width='45' height='27' fill='%23ededed'/%3E%3Crect x='48' y='33' width='93' height='27' fill='%23e2e2e2'/%3E%3Crect x='144' y='33' width='48' height='27' fill='%23ededed'/%3E%3C/svg%3E");
  /* hand-drawn spray underline with drips — dark strokes only; the
     accent stroke lives in --spray-pop so it can track var(--pop) */
  --spray: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 30' preserveAspectRatio='none'%3E%3Cpath d='M6 13C58 4 108 18 160 10S272 15 314 7' fill='none' stroke='%23333333' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M84 21v8M212 20v6M270 18v9' fill='none' stroke='%23333333' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
  /* accent stroke of the spray underline, used as a mask over var(--pop) */
  --spray-pop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 30' preserveAspectRatio='none'%3E%3Cpath d='M26 19C96 12 190 21 296 14' fill='none' stroke='%23000000' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E");
  /* hand-drawn scribble arrow */
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 76'%3E%3Cpath d='M8 8C30 24 52 36 66 60' fill='none' stroke='%23333333' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M50 55L68 62L70 44' fill='none' stroke='%23333333' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* --- 1. Concrete grain film (sits under the wireframe badge) --- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background-image: var(--grain);
  opacity: 0.05;
}

/* --- 2. Hero wall: brick panel, torn bottom edge, fades into page --- */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #dcdcdc;
  background-image: var(--grain), var(--brick);
  background-size: 260px 260px, 192px 60px;
  clip-path: polygon(
    0% 0%, 100% 0%,
    100% 99.2%, 96% 97.2%, 92% 99.6%, 88% 97.6%, 84% 99.8%, 80% 97.2%,
    76% 99.4%, 72% 97.8%, 68% 99.7%, 64% 97.3%, 60% 99.5%, 56% 97.6%,
    52% 99.8%, 48% 97.4%, 44% 99.3%, 40% 97.7%, 36% 99.6%, 32% 97.2%,
    28% 99.5%, 24% 97.8%, 20% 99.7%, 16% 97.3%, 12% 99.4%, 8% 97.6%,
    4% 99.8%, 0% 97.5%
  );
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent);
  pointer-events: none;
}

/* overspray speckle scattered around the headline block */
.hero-copy { position: relative; }
.hero-copy::before {
  content: "";
  position: absolute;
  inset: -24px;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(51, 51, 51, 0.34) 1.5px, rgba(51, 51, 51, 0) 2.6px),
    radial-gradient(rgba(51, 51, 51, 0.26) 1px, rgba(51, 51, 51, 0) 2px),
    radial-gradient(rgba(51, 51, 51, 0.3) 2px, rgba(51, 51, 51, 0) 3px),
    radial-gradient(rgba(51, 51, 51, 0.2) 1px, rgba(51, 51, 51, 0) 2px),
    radial-gradient(rgba(51, 51, 51, 0.32) 1.5px, rgba(51, 51, 51, 0) 2.6px),
    radial-gradient(rgba(51, 51, 51, 0.24) 1px, rgba(51, 51, 51, 0) 2px),
    radial-gradient(rgba(51, 51, 51, 0.28) 2px, rgba(51, 51, 51, 0) 3px),
    radial-gradient(rgba(51, 51, 51, 0.18) 1px, rgba(51, 51, 51, 0) 2px);
  background-size: 9px 9px;
  background-repeat: no-repeat;
  background-position: 3% 5%, 91% 2%, 97% 26%, 12% 92%, 55% 101%, 76% 45%, 33% -4%, 64% 84%;
}

/* ghost tag above the eyebrow */
.hero-copy::after {
  content: "SG";
  font-family: var(--font-tag);
  position: absolute;
  top: -32px;
  right: 10%;
  font-size: clamp(40px, 4vw, 58px);
  line-height: 1;
  color: var(--pop);
  opacity: 0.5;
  transform: rotate(8deg);
  pointer-events: none;
}

/* marker swipe on the highlighted line + neon-sign flicker */
.hero-title .hl {
  position: relative;
  color: var(--pop-ink);
  background-color: transparent;
  background-image: linear-gradient(var(--pop), var(--pop));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  animation:
    hl-swipe 0.75s cubic-bezier(0.2, 0.75, 0.25, 1) 0.35s both,
    hl-flicker 9s linear 2.2s infinite;
}
@keyframes hl-swipe {
  from { background-size: 0 100%; }
  to { background-size: 100% 100%; }
}
@keyframes hl-flicker {
  0%, 91% { opacity: 1; }
  92% { opacity: 0.72; }
  93% { opacity: 0.96; }
  95% { opacity: 0.78; }
  96%, 100% { opacity: 1; }
}

/* spray underline wipes in under the highlighted line — ::before carries
   the dark hand-drawn strokes, ::after is the accent stroke masked out of
   var(--pop) so the wipe animation and colour stay in sync */
.hero-title .hl::before,
.hero-title .hl::after {
  content: "";
  position: absolute;
  left: -1%;
  bottom: -0.2em;
  width: 102%;
  height: 0.3em;
  clip-path: inset(0 100% 0 0);
  animation: spray-wipe 0.6s ease-out 1.1s forwards;
  pointer-events: none;
}
.hero-title .hl::before {
  background: var(--spray) no-repeat 0 0 / 100% 100%;
}
.hero-title .hl::after {
  background: var(--pop);
  -webkit-mask: var(--spray-pop) no-repeat 0 0 / 100% 100%;
  mask: var(--spray-pop) no-repeat 0 0 / 100% 100%;
}
@keyframes spray-wipe {
  to { clip-path: inset(0 0 0 0); }
}

/* scribble arrow pointing at the hero actions */
.hero-ctas { position: relative; }
.hero-ctas::after {
  content: "";
  position: absolute;
  right: -84px;
  bottom: -4px;
  width: 76px;
  height: 63px;
  background: var(--arrow) no-repeat 0 0 / contain;
  transform: scaleX(-1) rotate(-10deg);
  opacity: 0.8;
  pointer-events: none;
}
@media (max-width: 1100px) {
  .hero-ctas::after { display: none; }
}

/* amplified sticker: slow full spin, peeled corner, pauses on hover */
.hero-sticker { animation: sticker-spin 16s linear infinite; }
@keyframes sticker-spin {
  from { transform: rotate(-10deg); }
  to { transform: rotate(350deg); }
}
.hero-sticker:hover { animation-play-state: paused; }
.hero-sticker::after {
  content: "";
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 20px;
  height: 20px;
  border-radius: 0 0 60% 0;
  background: linear-gradient(135deg, transparent 49%, #a8a8a8 49% 51%, #c6c6c6 51%);
  transform: rotate(4deg);
}

/* --- 3. Marquee: torn tape edges, spinning ✕ marks --- */
.marquee {
  border: none;
  clip-path: polygon(
    0% 10%, 3% 3%, 6% 12%, 9% 4%, 12% 13%, 15% 2%, 18% 11%, 21% 4%,
    24% 13%, 27% 3%, 30% 10%, 33% 2%, 36% 12%, 39% 4%, 42% 13%, 45% 3%,
    48% 11%, 51% 2%, 54% 12%, 57% 4%, 60% 13%, 63% 3%, 66% 10%, 69% 2%,
    72% 12%, 75% 4%, 78% 13%, 81% 3%, 84% 11%, 87% 2%, 90% 12%, 93% 4%,
    96% 11%, 100% 3%,
    100% 94%, 97% 99%, 94% 90%, 91% 98%, 88% 89%, 85% 97%, 82% 90%,
    79% 99%, 76% 91%, 73% 97%, 70% 89%, 67% 98%, 64% 90%, 61% 99%,
    58% 91%, 55% 96%, 52% 89%, 49% 98%, 46% 90%, 43% 99%, 40% 91%,
    37% 97%, 34% 89%, 31% 98%, 28% 90%, 25% 99%, 22% 91%, 19% 96%,
    16% 89%, 13% 98%, 10% 90%, 7% 99%, 4% 91%, 0% 97%
  );
}
.marquee-group i {
  display: inline-block;
  animation: x-spin 8s linear infinite;
}
.marquee-group i:nth-child(4n) { animation-duration: 11s; animation-delay: -3s; }
@keyframes x-spin {
  to { transform: rotate(1turn); }
}

/* --- 4. Section heads: tag numbers + slapped "SG" stickers --- */
.section-index {
  font-family: var(--font-tag);
  font-weight: 400;
  color: var(--pop);
  -webkit-text-stroke: 0;
  transform: rotate(-6deg) translateY(0.06em);
}
.build .section-index {
  color: var(--pop);
  -webkit-text-stroke: 0;
}

.section-head-text { position: relative; }
.section-head-text::after {
  content: "SG";
  font-family: var(--font-tag);
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1;
  color: #333333;
  background: #ededed;
  border: 2px solid #333333;
  border-radius: 2px;
  padding: 1px 9px 5px;
  position: absolute;
  top: -16px;
  right: 2px;
  --r: -6deg;
  transform: rotate(var(--r));
  pointer-events: none;
}
.build .section-head-text::after { --r: 5deg; background: #e2e2e2; }
.reviews .section-head-text::after { --r: -3deg; right: 26px; }
.section-head-text:hover::after { animation: sticker-jiggle 0.45s ease-in-out; }
@keyframes sticker-jiggle {
  0%, 100% { transform: rotate(var(--r)); }
  30% { transform: rotate(calc(var(--r) + 5deg)) scale(1.06); }
  60% { transform: rotate(calc(var(--r) - 4deg)) scale(0.98); }
}

/* --- 5. Featured project: concrete backdrop, taped corners --- */
.build {
  background-color: #dcdcdc;
  background-image:
    var(--grain-soft),
    radial-gradient(rgba(51, 51, 51, 0.16) 1.5px, rgba(51, 51, 51, 0) 2.6px),
    radial-gradient(rgba(51, 51, 51, 0.13) 2px, rgba(51, 51, 51, 0) 3px);
  background-size: 260px 260px, 9px 9px, 11px 11px;
  background-repeat: repeat, no-repeat, no-repeat;
  background-position: 0 0, 12% 18%, 88% 76%;
}
.build-card { position: relative; }
.build-card::before,
.build-card::after {
  content: "";
  position: absolute;
  top: -13px;
  width: 92px;
  height: 24px;
  background: repeating-linear-gradient(
    45deg,
    rgba(154, 154, 154, 0.38) 0 7px,
    rgba(154, 154, 154, 0.26) 7px 14px
  );
  border: 1px solid rgba(51, 51, 51, 0.18);
  clip-path: polygon(3% 0, 97% 0, 100% 50%, 97% 100%, 3% 100%, 0 50%);
}
.build-card::before { left: -30px; transform: rotate(-42deg); }
.build-card::after { right: -30px; transform: rotate(42deg); }

/* --- 6. Manifesto: torn edges, wheatpaste slabs, stencil offset --- */
.lookbook {
  border: none;
  background-color: #e2e2e2;
  background-image: var(--grain-soft);
  background-size: 260px 260px;
  clip-path: polygon(
    0% 0.6%, 2% 1.5%, 4% 0.4%, 6% 1.8%, 8% 0.7%, 10% 0.2%, 12% 1.6%,
    14% 0.5%, 16% 1.9%, 18% 0.4%, 20% 1.2%, 22% 0.2%, 24% 1.7%, 26% 0.8%,
    28% 0.3%, 30% 1.8%, 32% 0.5%, 34% 1.3%, 36% 0.3%, 38% 1.7%, 40% 0.6%,
    42% 0.2%, 44% 1.5%, 46% 0.9%, 48% 0.4%, 50% 1.8%, 52% 0.5%, 54% 1.2%,
    56% 0.3%, 58% 1.6%, 60% 0.7%, 62% 0.2%, 64% 1.7%, 66% 0.5%, 68% 1.4%,
    70% 0.4%, 72% 1.8%, 74% 0.6%, 76% 0.3%, 78% 1.5%, 80% 0.8%, 82% 0.2%,
    84% 1.7%, 86% 0.5%, 88% 1.3%, 90% 0.4%, 92% 1.8%, 94% 0.7%, 96% 0.3%,
    98% 1.4%, 100% 0.5%,
    100% 99.4%, 98% 98.6%, 96% 99.6%, 94% 98.3%, 92% 99.3%, 90% 98.8%,
    88% 99.5%, 86% 98.4%, 84% 99.2%, 82% 98.6%, 80% 99.6%, 78% 98.9%,
    76% 99.3%, 74% 98.4%, 72% 99.1%, 70% 98.7%, 68% 99.5%, 66% 98.5%,
    64% 99.4%, 62% 98.8%, 60% 99.2%, 58% 98.4%, 56% 99.6%, 54% 98.9%,
    52% 99.3%, 50% 98.5%, 48% 99.1%, 46% 98.7%, 44% 99.5%, 42% 98.4%,
    40% 99.2%, 38% 98.8%, 36% 99.6%, 34% 98.5%, 32% 99.4%, 30% 98.7%,
    28% 99.3%, 26% 98.4%, 24% 99.1%, 22% 98.8%, 20% 99.5%, 18% 98.5%,
    16% 99.2%, 14% 98.9%, 12% 99.4%, 10% 98.4%, 8% 99.3%, 6% 98.7%,
    4% 99.5%, 2% 98.8%, 0% 99.4%
  );
}
.lookbook-inner { position: relative; }
.lookbook-line {
  position: relative;
  z-index: 1;
  width: fit-content;
  background: #dcdcdc;
  border: 1px solid #c6c6c6;
  padding: 0.02em 0.14em 0.05em;
  letter-spacing: 0.005em;
  text-shadow: 0.04em 0.04em 0 rgba(51, 51, 51, 0.12);
  transform: rotate(-0.55deg);
}
.lookbook-line + .lookbook-line { margin-top: 0.16em; }
.lookbook-line:nth-of-type(2) {
  transform: rotate(0.4deg);
  background: #e2e2e2;
  margin-left: 0.4em;
}
.lookbook-line--accent { transform: rotate(-0.3deg); margin-left: 0.9em; }

/* --- 7. Rotated slap badges on product cards --- */
.pc-badge--new { transform: rotate(-4deg); }
.pc-badge--low { transform: rotate(3deg); }

/* --- Reduced motion: street animations off, final states shown --- */
@media (prefers-reduced-motion: reduce) {
  .hero-title .hl { animation: none; background-size: 100% 100%; }
  .hero-title .hl::before, .hero-title .hl::after { animation: none; clip-path: inset(0 0 0 0); }
  .marquee-group i { animation: none; }
  .hero-sticker { animation: none; transform: rotate(-10deg); }
  .section-head-text:hover::after { animation: none; }
}


/* ============================================================
   COLOUR OPTION
   --pop is the single brand colour a viewer can splash onto
   the wireframe's accent surfaces (CTAs, ADD buttons, active
   tabs, badges, stars, highlights, sticker, spray underline);
   --pop-ink is the text colour paired with it wherever text
   sits on the accent. Defaults reproduce the neutral grey
   accent, so the template stays a grey wireframe until the
   COLOUR widget (bottom-right) sets these vars on <html>.
   Everything structural — borders, surfaces, textures,
   placeholder boxes — never references --pop and stays grey.
   ============================================================ */
:root {
  --pop: #9a9a9a;
  --pop-ink: #ffffff;
}