/* Huddz Tyres theme — UI UX Pro Max "Brutalism" direction, DARK variant (13 Oct):
   dark navy-slate base (distinct from M8's neutral black), slate cards, action red (#DC2626) for CTAs only,
   sharp 0px corners, visible 2px borders, offset block shadows, Outfit + Rubik. */
:root {
  --hz-bg: #0F172A; --hz-card: #1E293B; --hz-ink: #F1F5F9; --hz-slate: #020617; --hz-slate2: #334155;
  --hz-muted: #94A3B8; --hz-line: #334155; --hz-soft: #334155; --hz-red: #DC2626; --hz-red-text: #F87171;
}

/* typography */
body, .font-body { font-family: 'Rubik', system-ui, sans-serif; }
.font-display { font-family: 'Outfit', system-ui, sans-serif; letter-spacing: -0.01em; }
/* the template's italic serif "flourish" words become heavy uppercase Outfit in red */
.font-serif { font-family: 'Outfit', system-ui, sans-serif !important; font-style: normal !important; font-weight: 800 !important;
  text-transform: uppercase; letter-spacing: -0.02em; }
.font-serif.text-primary-light, .text-primary-light.font-serif { color: var(--hz-red-text) !important; }

/* base surfaces (dark): remap the template's light tokens */
body, .bg-background, .hover\:bg-background:hover { background-color: var(--hz-bg); color: var(--hz-ink); }
::-webkit-scrollbar-track { background: var(--hz-bg); }
.from-background { --tw-gradient-from: var(--hz-bg) var(--tw-gradient-from-position); --tw-gradient-to: rgb(15 23 42 / 0) var(--tw-gradient-to-position); }
.to-background { --tw-gradient-to: var(--hz-bg) var(--tw-gradient-to-position); }
.bg-surface, .bg-white:not(.text-deep), .bg-white\/95:not(.text-deep), .bg-white\/90:not(.text-deep), .bg-white\/70:not(.text-deep) { background-color: var(--hz-card) !important; }
.from-surface { --tw-gradient-from: var(--hz-card) var(--tw-gradient-from-position); --tw-gradient-to: rgb(30 41 59 / 0) var(--tw-gradient-to-position); }
.glass { background: rgb(30 41 59 / .8); border-color: rgb(220 38 38 / .3); }
.bg-divider { background-color: var(--hz-line); }
.bg-divider\/40, .bg-divider\/50 { background-color: rgb(51 65 85 / .5); }
.divide-divider > :not([hidden]) ~ :not([hidden]) { border-color: var(--hz-line); }
.border-ink\/15 { border-color: rgb(241 245 249 / .15); }
.text-ink, .hover\:text-ink:hover, .\[\&_strong\]\:text-ink strong, .prose-template strong { color: var(--hz-ink); }
.text-ink\/30 { color: rgb(241 245 249 / .3); } .text-ink\/75 { color: rgb(241 245 249 / .75); } .text-ink\/85 { color: rgb(241 245 249 / .85); }
.text-muted, .prose-template p, .prose-template em { color: var(--hz-muted); }
.text-muted\/70 { color: rgb(148 163 184 / .75); }
.placeholder-muted\/50::placeholder { color: rgb(148 163 184 / .7); }
.text-primary-dark, .prose-template a, .\[\&_a\]\:text-primary-dark a { color: var(--hz-red-text) !important; }
.bg-white.text-deep .text-muted, .bg-white\/90.text-deep .text-muted, .bg-white\/95.text-deep .text-muted { color: #475569; }
.hover\:bg-ink:hover { background-color: var(--hz-red); }

/* sharp corners everywhere (brutalism), except tiny decorative dots */
.rounded-xl, .rounded-2xl, .rounded-3xl, .rounded-4xl, .rounded-5xl, .rounded-t-6xl,
a.rounded-full, button.rounded-full, input, select, textarea, img { border-radius: 0 !important; }
.rounded-full:not(a):not(button) { border-radius: 2px; }

/* visible borders + offset block shadows on cards */
.bg-surface, .bg-white:not(.text-deep), .feature-card, figure.bg-surface {
  border: 2px solid var(--hz-line) !important; box-shadow: 6px 6px 0 var(--hz-slate) !important; }
input.bg-background, textarea.bg-background, select.bg-background { background-color: #0B1222 !important; }
.bg-surface:hover, .feature-card:hover { box-shadow: 8px 8px 0 var(--hz-red) !important; transition: box-shadow .2s ease, transform .2s ease; transform: translate(-2px, -2px); }
.border-divider { border-color: var(--hz-soft); }

/* buttons: square, heavy, offset shadow; red reserved for the main CTA */
.magnetic-btn, a.rounded-full, button.rounded-full { font-family: 'Outfit', system-ui, sans-serif; font-weight: 700; letter-spacing: .02em; }
.bg-primary, a.bg-primary, button.bg-primary { background-color: var(--hz-red) !important; color: #fff !important;
  box-shadow: 4px 4px 0 var(--hz-slate) !important; }
.bg-primary:hover { box-shadow: 2px 2px 0 var(--hz-slate) !important; transform: translate(2px, 2px); transition: transform .15s ease, box-shadow .15s ease; }

/* hero: dark slate overlay on the photo, big uppercase Outfit lines */
section:has(.hero-line-2) img.object-center { filter: grayscale(.35) brightness(.5) contrast(1.1); }
.hero-line-1 { font-family: 'Outfit', system-ui, sans-serif !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: -0.02em; }
.hero-line-2 { font-family: 'Outfit', system-ui, sans-serif !important; font-weight: 900 !important; font-style: normal !important;
  text-transform: uppercase; color: #fff !important; line-height: 1 !important; letter-spacing: -0.02em;
  font-size: clamp(2.4rem, 7.5vw, 5.6rem) !important; }
.hero-line-2.font-serif, .hero-line-2.font-serif * { color: #fff !important; }
.hero-line-2 { background: var(--hz-red); display: inline-block !important; padding: .08em .25em .12em; margin-top: .25em;
  box-shadow: 8px 8px 0 #020617; }
.shadow-glow { box-shadow: 8px 8px 0 var(--hz-red) !important; }

/* header bar: slate, square, border once scrolled */
header .bg-white\/90, header .bg-white\/95, header .bg-white\/70 { border: 2px solid var(--hz-line); }

/* eyebrow labels in the monospaced style get a red bar instead of the slash */
.font-mono.uppercase { letter-spacing: .2em; }

/* section rhythm: alternate light sections get a faint engineering grid */
section.relative:not(:has(.hero-line-2)) { background-image:
  linear-gradient(rgba(148,163,184,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,.05) 1px, transparent 1px);
  background-size: 48px 48px; }

/* footer: slate block with a red top rule */
footer { border-top: 6px solid var(--hz-red); }

/* floating tools button + panel (garage-tools.js injects its own styles later, hence !important) */
#gt-btn { border-radius: 0 !important; background: var(--hz-red) !important; box-shadow: 4px 4px 0 #020617 !important;
  font-family: 'Outfit', system-ui, sans-serif !important; letter-spacing: .02em; }
#gt-box { border-radius: 0 !important; border: 2px solid #DC2626; box-shadow: 8px 8px 0 #020617; font-family: 'Rubik', system-ui, sans-serif !important; }
#gt-box h3, .gt-tabs button, .gt-go, .gt-wa { font-family: 'Outfit', system-ui, sans-serif !important; }
.gt-tabs, .gt-tabs button, .gt-go, .gt-wa, .gt-card, .gt-due, .gt-plate, .gt-fields input, .gt-fields select, .gt-okmsg, .gt-demo { border-radius: 0 !important; }
.gt-go { background: var(--hz-red) !important; box-shadow: 3px 3px 0 #020617; }
.gt-wa { background: #0F172A !important; }

/* accessibility: visible focus + reduced motion */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--hz-red) !important; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ===== Huddz layout pieces (car-guy home page) ===== */
.hz-kicker { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .25em; text-transform: uppercase; color: var(--hz-red-text); margin: 0 0 .6rem; }
.hz-kicker::before { content: ''; display: inline-block; width: 22px; height: 3px; background: var(--hz-red); vertical-align: middle; margin-right: 10px; }

/* hero tyre finder card */
.hz-finder { background: var(--hz-card); border: 2px solid var(--hz-line); box-shadow: 10px 10px 0 var(--hz-red); padding: 28px; color: var(--hz-ink); }
.hz-finder-title { font-family: 'Outfit', system-ui, sans-serif; font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.05; text-transform: uppercase; margin: 0; }
.hz-finder-sub { color: var(--hz-muted); margin: .6rem 0 1.2rem; font-size: 15px; line-height: 1.5; }
.hz-plate { display: flex; flex-wrap: wrap; gap: 0; }
.hz-plate-uk { background: #1D4ED8; color: #fff; font: 800 14px 'Outfit', system-ui, sans-serif; display: flex; align-items: center; justify-content: center;
  width: 46px; min-height: 68px; border: 3px solid #0B0B0B; border-right: 0; }
.hz-plate input { flex: 1 1 200px; min-width: 0; min-height: 68px; background: #F9D71C; color: #0B0B0B; border: 3px solid #0B0B0B; border-left: 0;
  font: 800 clamp(1.8rem, 4vw, 2.4rem) 'Outfit', system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; padding: 0 14px; outline: none; }
.hz-plate input::placeholder { color: rgba(11,11,11,.45); }
.hz-plate input:focus-visible { box-shadow: inset 0 0 0 3px var(--hz-red); }
.hz-finder-btn { flex: 1 1 100%; margin-top: 14px; min-height: 52px; background: var(--hz-red); color: #fff; border: 2px solid #0B0B0B; cursor: pointer;
  font: 800 18px 'Outfit', system-ui, sans-serif; text-transform: uppercase; letter-spacing: .04em; box-shadow: 4px 4px 0 #020617; transition: transform .15s ease, box-shadow .15s ease; }
.hz-finder-btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #020617; }
.hz-finder-links { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; font-size: 15px; }
.hz-finder-links button, .hz-finder-links a { background: none; border: 0; color: var(--hz-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; min-height: 44px; padding: 0; }

/* stats strip */
.hz-stats { background: var(--hz-red); color: #fff; border-top: 2px solid #020617; border-bottom: 2px solid #020617; }
.hz-stats-grid { max-width: 80rem; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .hz-stats-grid { grid-template-columns: repeat(4, 1fr); } }
.hz-stat { padding: 22px 24px; border-right: 2px solid rgba(2,6,23,.35); display: flex; flex-direction: column; gap: 2px; }
.hz-stat strong { font: 900 clamp(1.5rem, 3.2vw, 2.3rem) 'Outfit', system-ui, sans-serif; line-height: 1; text-transform: uppercase; }
.hz-stat span { font-size: 14px; font-weight: 500; opacity: .95; text-transform: uppercase; letter-spacing: .08em; }

/* sidewall decoder */
.hz-decoder { background: #020617; color: var(--hz-ink); border-top: 2px solid var(--hz-line); border-bottom: 2px solid var(--hz-line); }
.hz-decoder-title { font: 900 clamp(2rem, 5vw, 3.6rem) 'Outfit', system-ui, sans-serif; text-transform: uppercase; line-height: 1; margin: 0; }
.hz-decoder-title span { color: var(--hz-red-text); }
.hz-decoder-sub { color: var(--hz-muted); margin: .9rem 0 1.6rem; max-width: 40rem; }
.hz-spec { font: 900 clamp(2.6rem, 10vw, 7.5rem) 'Outfit', system-ui, sans-serif; letter-spacing: .02em; line-height: 1; color: #F1F5F9;
  -webkit-text-stroke: 0; text-shadow: 6px 6px 0 var(--hz-red); margin-bottom: 2rem; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.hz-parts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 900px) { .hz-parts { grid-template-columns: repeat(6, 1fr); } }
.hz-part { background: var(--hz-card); border: 2px solid var(--hz-line); padding: 16px; display: flex; flex-direction: column; gap: 6px; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.hz-part:hover, .hz-part:focus-visible { border-color: var(--hz-red); box-shadow: 5px 5px 0 var(--hz-red); transform: translate(-2px, -2px); outline: none; }
.hz-part strong { font: 900 2.2rem 'Outfit', system-ui, sans-serif; color: var(--hz-red-text); line-height: 1; }
.hz-part b { font: 700 14px 'Outfit', system-ui, sans-serif; text-transform: uppercase; letter-spacing: .08em; }
.hz-part span { font-size: 14px; color: var(--hz-muted); line-height: 1.45; }
.hz-decoder-cta { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; font-size: 16px; color: var(--hz-muted); }
.hz-decoder-cta button { min-height: 48px; padding: 0 20px; background: var(--hz-red); color: #fff; border: 2px solid #020617; cursor: pointer;
  font: 800 16px 'Outfit', system-ui, sans-serif; text-transform: uppercase; box-shadow: 4px 4px 0 #F1F5F9; }
/* mobile safety for the finder card */
.hero-form { min-width: 0; }
.hz-finder { box-sizing: border-box; width: 100%; max-width: 100%; }
.hz-finder-links { flex-wrap: wrap; }
@media (max-width: 640px) { .hz-finder { padding: 20px; box-shadow: 6px 6px 0 var(--hz-red); } .hz-plate input { flex-basis: 140px; } }