/* Taylor Tire retail — "Sidewall" design system, brand edition.
   White + Taylor Tire blue (#0057A6, sampled from the logo), with the old
   site's yellow kept only as a micro-accent (title strokes), echoing the
   yellow slashes on the legacy cards. Display type = condensed uppercase like
   sidewall/DOT stamping; every tire size code renders in mono. */

:root {
  --blue: #0057a6;
  --blue-deep: #004585;
  --blue-ink: #0b2c4f;
  --blue-tint: #eaf1f8;
  --paper: #ffffff;
  --porcelain: #f4f6f9;
  --ink: #1a2430;
  --ink-soft: #55616e;
  --line: #dfe5eb;
  --line-blue: #b9cde2;
  --accent: #ffd200;
  --ok: #2e8b57;
  --warn: #946e00;
  --danger: #c0392b;

  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Barlow", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --wrap: 1120px;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(11, 44, 79, .06), 0 8px 24px rgba(11, 44, 79, .08);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--porcelain);
}
/* Chinese: system CJK faces want a touch more air */
body[data-lang="zh"] { line-height: 1.7; }
body[data-lang="zh"] h1, body[data-lang="zh"] h2, body[data-lang="zh"] h3 { letter-spacing: 0; }
body[data-lang="zh"] .hero h1 { max-width: 24ch; font-size: clamp(30px, 5vw, 50px); line-height: 1.18; }
/* the mono face + .12em tracking is for Latin caps; on CJK it reads as gappy */
body[data-lang="zh"] .hero-kicker { font-family: var(--font-display); letter-spacing: .05em; font-size: 14px; }
body[data-lang="zh"] .trust-chip { letter-spacing: .02em; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

.skip-link {
  position: absolute; left: -999px; top: 8px; z-index: 100;
  background: var(--blue); color: #fff;
  padding: 8px 14px; border-radius: 6px; font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 8px; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---------- Header (white, logo + prominent appointment button) ---------- */
.site-header {
  background: var(--paper);
  position: sticky; top: 0; z-index: 50;
  border-bottom: 3px solid var(--blue);
  box-shadow: 0 1px 6px rgba(11, 44, 79, .07);
}
.header-row { display: flex; align-items: center; gap: 16px; height: 66px; max-width: 1320px; }

.logo-link { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
.logo-link img { height: 30px; width: auto; }

.site-nav { display: flex; gap: 2px; margin-left: 4px; }
.site-nav a {
  font-family: var(--font-display); font-weight: 600; font-size: 17px;
  letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
  color: var(--ink-soft); text-decoration: none; padding: 8px 10px; border-radius: 6px;
}
body[data-lang="zh"] .site-nav a { letter-spacing: 0; font-size: 16px; }
.site-nav a:hover { color: var(--blue); }
.site-nav a[aria-current="page"] { color: var(--blue); }
.site-nav a.nav-hot { position: relative; padding-right: 15px; }
.nav-hot-badge {
  position: absolute; top: -6px; right: -1px;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 27px; height: 15px; padding: 0 5px; border-radius: 999px;
  background: #ef3f34; color: #fff; box-shadow: 0 2px 5px rgba(161, 24, 17, .24);
  font-family: var(--font-body); font-size: 9px; font-weight: 800;
  line-height: 1; letter-spacing: .05em; transform: rotate(4deg);
}

.header-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.header-actions > * { flex: none; white-space: nowrap; }
.header-utility {
  display: flex; align-items: center; gap: 9px; padding-right: 14px;
  border-right: 1px solid var(--line);
}
.header-phone {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--blue-ink); text-decoration: none; font-weight: 700; font-size: 15.5px;
  padding: 6px 2px;
}
.header-phone:hover { color: var(--blue); }
.btn-appt {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  background: var(--blue); color: #fff; text-decoration: none;
  font-family: var(--font-display); font-weight: 600; font-size: 17px;
  letter-spacing: .05em; text-transform: uppercase;
  min-height: 42px; padding: 10px 17px; border-radius: 9px;
  box-shadow: 0 5px 14px rgba(0, 95, 168, .22), inset 0 -2px 0 rgba(5, 49, 89, .18);
  transition: transform .14s ease, background .14s ease, box-shadow .14s ease;
}
.btn-appt:hover {
  background: var(--blue-deep); transform: translateY(-1px);
  box-shadow: 0 7px 18px rgba(0, 71, 128, .27), inset 0 -2px 0 rgba(5, 49, 89, .2);
}
.btn-appt:active { transform: translateY(0); }
.btn-appt-label-short { display: none; }
/* Floating quote tab — right edge, legacy "VIEW QUOTES" style. Appears only
   when the localStorage list has items (site.js toggles [hidden]). */
.quote-float {
  position: fixed; right: 0; top: 55%; z-index: 70;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: var(--accent); color: #4a3b00; text-decoration: none;
  padding: 12px 10px; border-radius: 12px 0 0 12px;
  box-shadow: -4px 6px 18px rgba(11, 44, 79, .25);
  font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em;
  transition: transform .12s ease;
}
.quote-float:hover { transform: translateX(-3px); }
.quote-float[hidden] { display: none; }
.quote-float-count {
  background: var(--blue-ink); color: #fff; border-radius: 999px;
  min-width: 21px; height: 21px; padding: 0 5px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px;
}
.lang-toggle {
  color: var(--ink-soft); text-decoration: none; font-weight: 700; font-size: 15px;
  padding: 6px 8px; border-radius: 6px;
}
.lang-toggle:hover { color: var(--blue); background: var(--blue-tint); }

.nav-burger { display: none; background: none; border: 0; padding: 10px 6px; }
.nav-burger span { display: block; width: 22px; height: 2px; background: var(--blue-ink); margin: 5px 0; border-radius: 2px; }

.mobile-nav { display: none; background: var(--paper); }
.mobile-nav[hidden] { display: none; }
.mobile-nav a {
  display: block; padding: 14px 20px; text-decoration: none;
  font-family: var(--font-display); font-weight: 600; font-size: 20px;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink);
  border-top: 1px solid var(--line);
}
.mobile-nav a[aria-current="page"] { color: var(--blue); }
.mobile-nav a.nav-hot { position: relative; }
.mobile-nav .nav-hot-badge {
  position: static; margin-left: 8px; vertical-align: top;
  transform: translateY(-5px) rotate(4deg);
}
.mobile-nav[data-open] { display: block; }

/* ---------- Tire brand marquee ---------- */
.brand-marquee {
  overflow: hidden; background: var(--blue-ink); padding: 12px 0;
  border-top: 1px solid #1b4066; border-bottom: 1px solid #1b4066;
}
.brand-marquee-track {
  display: flex; width: max-content; will-change: transform;
  animation: brand-marquee-roll 55s linear infinite;
}
.brand-marquee-group {
  display: flex; align-items: center; flex-shrink: 0; gap: 16px; padding-right: 16px;
}
.brand-marquee-item {
  width: 142px; height: 48px; flex: 0 0 142px;
  display: flex; align-items: center; justify-content: center;
  padding: 8px 13px; border-radius: 999px; background: #fff;
  border: 1px solid rgba(255,255,255,.2); box-shadow: 0 3px 10px rgba(0,12,28,.18);
}
.brand-marquee-item img { display: block; max-width: 116px; max-height: 28px; width: auto; height: auto; object-fit: contain; }
.brand-marquee-fallback {
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  color: var(--blue-ink); text-transform: uppercase; text-align: center;
}
@keyframes brand-marquee-roll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .brand-marquee-track { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Hero (brand blue) ---------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    repeating-linear-gradient(115deg, transparent 0 26px, rgba(255,255,255,.025) 26px 52px),
    radial-gradient(120% 90% at 50% 0%, var(--blue) 0%, var(--blue-deep) 70%);
  color: #fff;
  padding: 52px 0 60px;
}
.hero-kicker {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 14px;
}
.hero h1 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(36px, 6vw, 60px); line-height: 1.04; letter-spacing: .015em;
  margin: 0 0 16px; max-width: 22ch; /* 22ch keeps the two authored lines unwrapped */
}
.hero-sub { font-size: 18px; color: #cfe0f2; max-width: 52ch; margin: 0 0 28px; }
.hero-grid {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 30px; align-items: center;
  min-height: 500px;
}
.hero-copy { position: relative; z-index: 2; }
.hero-visual {
  position: absolute; z-index: 1; inset: 0 0 0 34%;
}
.hero-media {
  position: relative; width: 100%; height: 100%; margin: 0; overflow: hidden;
  background: #092f55; isolation: isolate;
}
.hero-media::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, var(--blue-deep) 0%, rgba(0,75,139,.96) 18%, rgba(0,75,139,.78) 36%, rgba(0,75,139,.42) 52%, rgba(0,35,70,.12) 68%, rgba(0,20,42,.06) 100%),
    linear-gradient(180deg, rgba(0,20,42,.14) 0%, transparent 48%, rgba(0,20,42,.34) 100%);
}
.hero-shop-video {
  width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 68%;
  background: #092f55; filter: contrast(1.03) saturate(1.04); transform: translateZ(0);
}
.hero-video-toggle {
  position: absolute; right: 20px; bottom: 18px; z-index: 3;
  width: 22px; height: 22px; padding: 0; border: 1px solid rgba(255,255,255,.9);
  border-radius: 50%; color: #fff; background: rgba(0,31,64,.86);
  display: grid; place-items: center; line-height: 1;
  box-shadow: 0 2px 7px rgba(0,20,42,.32); backdrop-filter: blur(5px);
}
.hero-video-toggle:hover { background: rgba(0,75,139,.94); }
.hero-video-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hero-video-toggle[hidden] { display: none; }
.hero-video-toggle > span { position: relative; display: block; width: 8px; height: 9px; font-size: 0; }
.hero-video-icon--pause::before,
.hero-video-icon--pause::after {
  content: ""; position: absolute; top: .5px; width: 2px; height: 8px;
  border-radius: 1px; background: currentColor;
}
.hero-video-icon--pause::before { left: .5px; }
.hero-video-icon--pause::after { right: .5px; }
.hero-video-icon--play::before {
  content: ""; position: absolute; top: .5px; left: 2px;
  width: 0; height: 0; border-top: 4px solid transparent;
  border-bottom: 4px solid transparent; border-left: 6px solid currentColor;
}

/* finder popup (home TIRES card) */
.finder-modal {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 5vh 16px 24px; overflow-y: auto;
  background: rgba(11, 44, 79, .55); backdrop-filter: blur(2px);
}
.finder-modal[hidden] { display: none; }
.finder-modal-box { position: relative; width: min(940px, 100%); }
.finder-modal-box .finder { max-width: none; }
.finder-modal-close {
  position: absolute; top: -13px; right: -13px; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%; border: 0;
  background: var(--blue-ink); color: #fff; font-size: 17px; line-height: 1;
  box-shadow: var(--shadow);
}
.finder-modal-close:hover { background: var(--blue); }
body.finder-modal-open { overflow: hidden; }

/* hero trust chips — four certainty promises under the CTA */
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 28px; }
.trust-row { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 30px; }
/* hero badges sit in a 2×2 block; collapses to one column on narrow screens */
.hero .trust-row {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 26px; max-width: 520px;
}
.trust-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600; font-size: 16.5px;
  letter-spacing: .07em; text-transform: uppercase; color: #dce9f6;
}
.trust-chip svg { width: 15px; height: 15px; color: var(--accent); flex: none; }

/* why section — proof screen under the hero */
.why-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 36px; align-items: center; }
.why-photo { margin: 0; }
.why-photo img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); }
.why-list { display: grid; gap: 18px; }
.why-item { padding-left: 16px; border-left: 3px solid var(--accent); }
.why-item h3 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; font-size: 20px; color: var(--blue-ink); margin: 0 0 3px;
}
.why-item p { margin: 0; color: var(--ink-soft); font-size: 15px; }
.why-reviews-line { margin: 20px 0 0; }
.why-reviews { color: var(--blue); font-weight: 600; text-decoration: none; }
.why-reviews:hover { text-decoration: underline; }

/* review strip — real Google quotes right under the why section */
.reviews-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap; }
.reviews-score { margin: 0 0 28px; color: var(--ink-soft); font-weight: 600; }
.reviews-score .reviews-stars { color: #f5a623; letter-spacing: 2px; margin-right: 8px; }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.review-card {
  margin: 0; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 22px;
  display: flex; flex-direction: column; gap: 10px;
}
.review-card .review-stars { color: #f5a623; letter-spacing: 2px; font-size: 15px; }
.review-card blockquote { margin: 0; font-size: 15px; color: var(--ink); flex: 1; }
.review-card figcaption { color: var(--ink-soft); font-size: 13.5px; font-weight: 600; }
.reviews-cta-line { margin: 18px 0 0; }

/* yellow crayon stroke under titles — echo of the legacy cards' yellow slash */
.chalk-stroke { position: relative; display: inline-block; }
.chalk-stroke::after {
  content: ""; position: absolute; left: 2px; right: -6px; bottom: -6px; height: 6px;
  background: var(--accent);
  border-radius: 3px 5px 4px 6px / 5px 3px 6px 4px;
  transform: rotate(-.6deg);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600; font-size: 19px;
  letter-spacing: .05em; text-transform: uppercase;
  padding: 12px 26px; border-radius: 8px; border: 0; text-decoration: none;
  transition: transform .06s ease, background .12s ease, border-color .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-deep); }
/* on the blue hero a blue button disappears — invert it */
.hero .btn-primary { background: #fff; color: var(--blue); }
.hero .btn-primary:hover { background: var(--blue-tint); }
.btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.55); }
.btn-ghost:hover { border-color: #fff; }
.btn-ink { background: var(--paper); color: var(--blue); border: 1.5px solid var(--blue); }
.btn-ink:hover { background: var(--blue-tint); }
.btn-ghost-light { background: transparent; color: var(--ink); border: 1px solid var(--line-blue); }
.btn-ghost-light:hover { border-color: var(--blue); color: var(--blue); }
.btn[disabled] { opacity: .55; cursor: default; }

/* ---------- Sections / cards ---------- */
.section { padding: 56px 0; }
.section-tight { padding-top: 0; }

/* product category cards (tires / wheels / winter / tpms) */
.pcard-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.pcard {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-rows: minmax(180px, 1fr) auto; min-width: 0; min-height: 356px;
  background: #005aa8; border: 1px solid rgba(0, 75, 139, .22); border-radius: 22px;
  box-shadow: 0 12px 28px rgba(11, 44, 79, .16); text-decoration: none; color: #fff;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.pcard:hover {
  transform: translateY(-5px); border-color: rgba(0, 75, 139, .52);
  box-shadow: 0 18px 34px rgba(11, 44, 79, .24);
}
/* Fixed 5:4 media box. Without it the row height is set by whichever photo has
   the tallest natural aspect (a portrait shot pushed the cards to 500px+). */
.pcard-media {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center;
  min-height: 180px; aspect-ratio: 5 / 4; background: #e9eff5;
}
.pcard-media > img:not(.pcard-product) {
  width: 100%; height: 100%; display: block; object-fit: cover;
  transition: transform .45s ease;
}
.pcard:hover .pcard-media > img:not(.pcard-product) { transform: scale(1.035); }
/* Seamless white studio backdrop — no stripes, no halo ring: a soft wall-to-floor
   sweep plus a grounded shadow, so the cut-out reads as a shot product. */
.pcard-media--product {
  align-items: flex-end; padding-bottom: 5%;
  background:
    radial-gradient(72% 55% at 50% 28%, #ffffff 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #fcfdfe 0%, #f5f8fb 50%, #e6ecf3 100%);
}
/* The shadow rides on the image's own alpha (drop-shadow), so it stays glued to
   the tire whatever the card size — no hand-placed ellipse to drift out of line. */
.pcard-product {
  position: relative; z-index: 1; display: block; width: auto; max-width: 91%; height: 92%; object-fit: contain;
  filter: drop-shadow(0 3px 2px rgba(16, 38, 62, .22)) drop-shadow(0 14px 11px rgba(16, 38, 62, .26));
  transform-origin: 50% 54%; will-change: transform;
}
/* ambient pool on the floor */
.pcard-media--product::before {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: 1%; height: 20%;
  background: radial-gradient(50% 52% at 50% 72%, rgba(16, 38, 62, .18), rgba(16, 38, 62, 0) 74%);
}
.pcard-media--winter { background: #dbe9f4; }
.pcard-media--winter::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 31, 54, .04), transparent 52%, rgba(7, 31, 54, .12));
}
.pcard-scene--winter-package { object-position: center 76%; }
.pcard-copy {
  position: relative; z-index: 4; display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 160px;
  padding: 24px 20px 20px; background: linear-gradient(145deg, #004b8b 0%, #0067b8 100%); color: #fff;
}
.pcard-copy::before {
  content: ""; position: absolute; left: -5%; right: -5%; top: -5px; height: 9px;
  background: var(--accent); transform: rotate(1.7deg); transform-origin: center;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .28);
}
.pcard--copy-top { grid-template-rows: auto minmax(180px, 1fr); }
.pcard--copy-top .pcard-copy { order: -1; padding-top: 20px; padding-bottom: 24px; }
.pcard--copy-top .pcard-copy::before { top: auto; bottom: -5px; transform: rotate(1.7deg); }
.pcard h3 {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em;
  font-size: clamp(21px, 1.7vw, 27px); line-height: 1.02; margin: 0; color: #fff;
  text-wrap: balance; text-shadow: 0 1px 3px rgba(0, 22, 43, .28);
}
.pcard p { margin: 0; color: rgba(255, 255, 255, .82); font-size: 13.5px; line-height: 1.45; }
.pcard-kicker {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  line-height: 1.2; text-transform: uppercase; color: var(--accent);
}
.pcard-cta {
  display: inline-flex; align-items: center; gap: 6px; margin-top: auto;
  font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: .045em;
  text-transform: uppercase; color: #fff;
}
.pcard-cta b { color: var(--accent); font-size: 18px; line-height: 1; transition: transform .16s ease; }
.pcard:hover .pcard-cta b { transform: translateX(4px); }

/* Homepage rebates: compact, evergreen previews backed by the live rebate
   catalog. The full eligibility rules stay on /rebates. */
.home-rebates-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px 30px; margin-bottom: 22px;
}
.home-rebates-head .section-title { margin-bottom: 16px; }
.home-rebates-head p { margin: 0; color: var(--ink-soft); font-size: 16px; }
.home-rebates-all {
  flex: none; color: var(--blue); font-family: var(--font-display);
  font-size: 17px; font-weight: 700; letter-spacing: .045em;
  text-transform: uppercase; text-decoration: none;
}
.home-rebates-all:hover { text-decoration: underline; }
.home-rebate-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.home-rebate-card {
  min-width: 0; min-height: 214px; padding: 20px 22px;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--accent);
  border-radius: 16px; box-shadow: var(--shadow); color: var(--ink); text-decoration: none;
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.home-rebate-card:hover {
  transform: translateY(-4px); border-color: var(--line-blue); border-top-color: var(--accent);
  box-shadow: 0 2px 4px rgba(11, 44, 79, .08), 0 14px 30px rgba(11, 44, 79, .13);
}
.home-rebate-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-height: 38px; }
.home-rebate-brand {
  display: flex; align-items: center; min-width: 0; min-height: 36px;
  color: var(--blue-ink); font-family: var(--font-display); font-size: 21px;
  font-weight: 700; letter-spacing: .035em; text-transform: uppercase;
}
.home-rebate-brand img { width: auto; max-width: 150px; max-height: 34px; object-fit: contain; }
.home-rebate-status {
  flex: none; padding: 4px 8px; border-radius: 999px;
  background: var(--blue-tint); color: var(--blue); font-size: 11px;
  font-weight: 800; letter-spacing: .045em; line-height: 1.2; text-transform: uppercase;
}
.home-rebate-status--active { background: #e6f5ec; color: #217148; }
.home-rebate-amount {
  color: var(--blue); font-family: var(--font-display); font-size: 30px;
  letter-spacing: .025em; line-height: 1.05; text-transform: uppercase;
}
.home-rebate-window { color: var(--ink-soft); font-size: 13.5px; line-height: 1.45; }
.home-rebate-cta {
  display: inline-flex; align-items: center; gap: 6px; margin-top: auto;
  color: var(--blue-ink); font-family: var(--font-display); font-size: 15px;
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.home-rebate-cta b { color: var(--blue); font-size: 18px; transition: transform .14s ease; }
.home-rebate-card:hover .home-rebate-cta b { transform: translateX(4px); }
/* Featured tire: one-shot roll-in when the card first scrolls into view.
   Hidden state only applies once JS has armed the observer ([data-enter]),
   so the tire stays visible if JS never runs. */
@media (prefers-reduced-motion: no-preference) {
  .pcard[data-enter] .pcard-product { opacity: 0; }
  .pcard[data-enter="in"] .pcard-product {
    animation: pcard-product-roll-in .9s cubic-bezier(.22, .72, .24, 1) both;
  }
  @keyframes pcard-product-roll-in {
    0%   { opacity: 0; transform: translate(-36%, 6px) rotate(-52deg); }
    55%  { opacity: 1; }
    72%  { transform: translate(2.5%, -2px) rotate(7deg); }
    88%  { transform: translate(-.8%, 1px) rotate(-2.5deg); }
    100% { opacity: 1; transform: none; }
  }
}
.section-title {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(26px, 3.6vw, 36px); letter-spacing: .03em; margin: 0 0 28px;
}
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow);
  border-top: 3px solid var(--blue);
}
.card h3 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em; font-size: 21px; margin: 0 0 8px; color: var(--blue-ink); }
.card p { margin: 0; color: var(--ink-soft); }

/* steps strip */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 32px; }
.step { display: flex; gap: 12px; align-items: baseline; }
.step-num {
  font-family: var(--font-mono); font-weight: 500; font-size: 14px;
  color: var(--accent); border: 1px solid rgba(255,255,255,.4); border-radius: 999px;
  padding: 3px 9px; flex: none;
}
.step b { display: block; font-size: 16px; color: #fff; }
.step small { color: #b7cee6; font-size: 13.5px; }

/* ---------- Spec chip (mono tire codes) ---------- */
.spec {
  font-family: var(--font-mono); font-weight: 500; font-size: .92em;
  background: var(--blue-tint); border: 1px solid var(--line-blue); border-radius: 5px;
  padding: 1px 7px; white-space: nowrap; color: var(--blue-ink);
}
.hero .spec, .on-dark .spec, .spec.on-dark {
  background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.35); color: #fff;
}
.sku-chip {
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft);
  letter-spacing: .04em;
}

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field[hidden] { display: none; }   /* .field's display would otherwise win over [hidden] */
.field label { font-weight: 600; font-size: 14px; color: var(--ink-soft); }
.field select, .field input, .field textarea {
  font: inherit; color: var(--ink);
  background: var(--paper); border: 1px solid #c6d0da; border-radius: 8px;
  padding: 11px 12px; width: 100%;
}
.field select:focus, .field input:focus, .field textarea:focus {
  outline: 2px solid var(--blue); outline-offset: 0; border-color: var(--blue);
}
.field select[disabled] { background: var(--porcelain); color: #98a3ae; }

/* ---------- Static page shell ---------- */
.page-head { background: linear-gradient(120deg, var(--blue) 0%, var(--blue-deep) 100%); color: #fff; padding: 40px 0 34px; }
.page-head h1 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(30px, 4.6vw, 46px); letter-spacing: .02em; margin: 0;
}
.page-body { padding: 40px 0 64px; }
.page-body .prose { max-width: 720px; }
.prose h2 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .03em; font-size: 26px; margin: 34px 0 10px; color: var(--blue-ink); }
.prose p { margin: 0 0 14px; color: #33404d; }
.prose ul { margin: 0 0 14px; padding-left: 22px; color: #33404d; }
.prose li { margin: 4px 0; }
.prose a { color: var(--blue); }
/* .prose a outranks .btn-primary (class+element vs class) — restate button colors */
.prose a.btn-primary { color: #fff; }
.prose a.btn-ink, .prose a.btn-ghost-light { color: var(--blue); }

/* service list cards */
.svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 880px; }
.svc {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 22px; box-shadow: var(--shadow); border-left: 3px solid var(--blue);
}
.svc h3 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em; font-size: 20px; margin: 0 0 6px; color: var(--blue-ink); }
.svc p { margin: 0; color: var(--ink-soft); font-size: 15px; }
.svc a { color: var(--blue); }

/* about page — legacy-site layout: lede → week hours strip → copy | photo */
.about-intro { display: flex; align-items: center; gap: 28px; margin-bottom: 24px; flex-wrap: wrap; }
.about-lede { margin: 0; font-size: 19px; font-weight: 600; color: var(--blue-ink); max-width: 56ch; }
.about-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 34px; align-items: center; margin-top: 34px; }
.about-photo { margin: 0; }
.about-photo img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); }

.hours-strip {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: var(--paper); box-shadow: var(--shadow);
}
.hours-cell {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 14px 6px; border-left: 1px solid var(--line);
}
.hours-cell:first-child { border-left: 0; }
.hours-day {
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
  letter-spacing: .08em; color: var(--ink-soft);
}
.hours-time { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.hours-closed { color: var(--ink-soft); letter-spacing: .05em; }
.hours-cell.is-today { background: var(--blue); }
.hours-cell.is-today .hours-day, .hours-cell.is-today .hours-time { color: #fff; }

.since-badge {
  display: flex; align-items: baseline; gap: 12px; margin: 0;
  border-bottom: 3px solid var(--accent); padding-bottom: 10px; flex: none;
}
.since-word {
  font-family: var(--font-display); font-weight: 600; font-size: 20px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft);
}
.since-year {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(48px, 6vw, 72px);
  line-height: 1; color: var(--blue); letter-spacing: .02em;
}

/* wheels page */
.wheels-intro { margin-top: 0; margin-bottom: 38px; }
.wheels-section-title { font-size: clamp(24px, 3.2vw, 30px); margin-bottom: 20px; }
.wpartner-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 980px; }
.wpartner {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 22px; box-shadow: var(--shadow); text-decoration: none; color: var(--ink);
  transition: transform .12s ease, border-color .12s ease;
}
.wpartner:hover { transform: translateY(-3px); border-color: var(--blue); }
.wpartner-logo {
  display: flex; align-items: center; height: 44px;
}
.wpartner-logo img { max-height: 40px; width: auto; max-width: 100%; }
.wpartner p { margin: 0; color: var(--ink-soft); font-size: 14.5px; flex: 1 1 auto; }
.wpartner-cta {
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
  letter-spacing: .05em; text-transform: uppercase; color: var(--blue);
}
.wpartner-cta b { font-weight: 600; transition: transform .12s ease; display: inline-block; }
.wpartner:hover .wpartner-cta b { transform: translateX(3px); }
.wheels-flow {
  margin: 26px 0 40px; padding: 22px 26px; max-width: 980px;
  background: var(--blue-tint); border: 1px solid var(--line-blue); border-radius: var(--radius);
}
.wheels-flow-text { margin: 0 0 14px; font-size: 16.5px; font-weight: 600; color: var(--blue-ink); max-width: 62ch; }
.wheels-flow-ctas { margin: 0; display: flex; gap: 12px; flex-wrap: wrap; }
.wheels-guide h2 { margin-top: 26px; }

/* rebate cards */
.rebate-section-title { font-size: clamp(22px, 3vw, 28px); margin: 34px 0 18px; color: var(--blue-ink); }
.rebate-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.rebate-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 22px; box-shadow: var(--shadow); border-top: 3px solid var(--accent);
  display: flex; flex-direction: column; gap: 10px;
}
.rebate-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rebate-logo { max-height: 30px; width: auto; max-width: 140px; }
.rebate-brand { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 20px; color: var(--blue-ink); }
.rebate-amt {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: 21px; color: var(--blue); white-space: nowrap;
}
.rebate-window { margin: 0; font-weight: 600; font-size: 14px; color: var(--ink-soft); }
.rebate-levels { margin: 0; padding-left: 18px; font-size: 14px; color: #33404d; }
.rebate-levels li { margin: 4px 0; }
.rebate-method { margin: 0; font-size: 13px; color: var(--ink-soft); }
.rebate-links { margin: auto 0 0; display: flex; gap: 16px; font-size: 14px; }
.rebate-links a { color: var(--blue); font-weight: 600; }

/* contact blocks */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.contact-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); }
.contact-card h3 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em; font-size: 19px; margin: 0 0 6px; color: var(--ink-soft); }
.contact-card p { margin: 0 0 18px; font-size: 17px; }
.contact-card a { color: inherit; }
.contact-card .contact-hint { color: var(--ink-soft); font-size: 14px; margin-top: -10px; }

/* LT explainer + LT/passenger filter chips (size landing pages).
   The explainer is a side note next to the results, sized as reference material
   rather than a headline — see .results-aside for the column it sits in. */
.landing-note { background: var(--blue-tint); border: 1px solid var(--line-blue); border-radius: var(--radius); padding: 14px 15px; margin: 0; }
.landing-note p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.55; color: var(--ink); }
.landing-note p:last-child { margin-bottom: 0; }
.landing-note-details summary {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em;
  font-size: 13px; color: var(--blue-ink); cursor: pointer; list-style: none;
  display: flex; align-items: flex-start; gap: 7px; line-height: 1.35;
}
.landing-note-details summary::-webkit-details-marker { display: none; }
/* Own chevron rather than the UA triangle, so it can sit on the first line of a
   title that wraps to two. */
.landing-note-details summary::before {
  content: ""; flex: none; width: 6px; height: 6px; margin-top: 5px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform .18s ease;
}
.landing-note-details[open] summary::before { transform: rotate(45deg); margin-top: 3px; }
.landing-note-details summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 3px; }
.landing-note-details > p { margin: 9px 0 0; }
@media (prefers-reduced-motion: reduce) {
  .landing-note-details summary::before { transition: none; }
}
/* Sentence case, not the display face: set in uppercase this label wrapped to
   three heavy lines and outweighed the note it belongs to. */
.landing-note-loads-label {
  font-size: 12px; font-weight: 600; color: var(--blue-ink); margin: 12px 0 5px !important;
}
/* One load index per line: "109 = 1,030 kg / 2,271 lb" does not fit twice across
   a 210px column, and wrapped pills read as broken rather than dense. */
.load-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.load-list li {
  display: flex; gap: 8px; align-items: baseline;
  background: var(--paper); border: 1px solid var(--line-blue); border-radius: 6px;
  padding: 3px 8px; font-family: var(--font-mono); font-size: 12px;
}
.load-list b { color: var(--blue-ink); font-weight: 600; }
.load-list span { color: var(--ink-soft); }
.lt-filter-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.lt-filter-label { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em; font-size: 15px; color: var(--ink-soft); }
.lt-filter-chip { border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 7px 16px; font: inherit; font-size: 14px; cursor: pointer; }
.lt-filter-chip[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.lt-filter-chip small { color: inherit; opacity: .75; }
.map-frame { border: 0; width: 100%; height: 380px; border-radius: var(--radius); box-shadow: var(--shadow); }

/* ---------- Finder (tires.php) ---------- */
.finder {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; max-width: 940px;
}
.finder-tabs { display: flex; border-bottom: 1px solid var(--line); background: var(--blue-tint); }
.finder-tabs [role="tab"] {
  flex: 1; border: 0; background: transparent; padding: 15px 10px;
  font-family: var(--font-display); font-weight: 600; font-size: 18px;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft);
  border-bottom: 3px solid transparent;
}
.finder-tabs [role="tab"][aria-selected="true"] {
  background: var(--paper); color: var(--blue); border-bottom-color: var(--blue);
}
.finder-panel { padding: 24px; }
.finder-grid { display: grid; gap: 14px; margin-bottom: 18px; }
.finder-grid-vehicle { grid-template-columns: repeat(5, 1fr); }
.finder-grid-size { grid-template-columns: repeat(3, 1fr); max-width: 560px; }
.finder-note { color: var(--ink-soft); font-size: 14px; margin: 14px 0 0; }
.finder-hint { color: var(--ink-soft); font-size: 14px; margin: 0 0 18px; }
.stagger-toggle {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px;
  font-weight: 600; font-size: 14.5px; color: var(--ink-soft); cursor: pointer;
}
.stagger-group-label {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em;
  font-size: 15px; color: var(--blue-ink); margin: 0 0 8px;
}
.stagger-rear { margin-top: 4px; }
.stagger-rear[hidden] { display: none; }

/* size panel: size fields on the left, season block to their right (DT layout) */
.finder-row { display: flex; align-items: flex-start; gap: 30px; flex-wrap: wrap; }
.finder-sizes { flex: 1 1 330px; min-width: 0; }
.finder-sizes .finder-grid:last-of-type { margin-bottom: 0; }
.finder-row .season-pick { flex: 0 1 300px; margin-bottom: 0; }

/* ---------- Season picker (4-way, DT parity) ---------- */
.season-pick { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
.season-pick legend {
  display: block; padding: 0; margin: 0 0 9px;
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; font-size: 15px; color: var(--blue-ink);
}
.season-opts { display: grid; gap: 9px; }
.season-opts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.season-opts-row { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 660px; }
.season-opt { display: block; }
/* the radio itself stays in the a11y tree — only its box is hidden */
.season-opt input {
  position: absolute; width: 1px; height: 1px; margin: 0;
  opacity: 0; pointer-events: none;
}
.season-opt span {
  display: flex; align-items: center; gap: 9px; height: 100%;
  border: 1px solid #c6d0da; border-radius: 8px; background: var(--paper);
  padding: 11px 12px; cursor: pointer; color: var(--ink-soft);
  transition: border-color .12s ease, color .12s ease, background-color .12s ease;
}
.season-opt em {
  font-style: normal; font-weight: 600; font-size: 14.5px; line-height: 1.2;
}
.season-opt svg {
  width: 19px; height: 19px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; opacity: .85;
}
.season-opt:hover span { border-color: var(--line-blue); color: var(--blue); background: var(--blue-tint); }
.season-opt input:checked + span {
  background: var(--blue); border-color: var(--blue); color: #fff;
  box-shadow: inset 0 -3px 0 var(--accent);   /* yellow underline = the brand's chalk stroke */
}
.season-opt input:checked + span svg { opacity: 1; }
.season-opt input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }

/* results header chip echoing the chosen season */
.season-chip {
  display: inline-block; margin-left: 8px; vertical-align: middle;
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; font-size: 14px; line-height: 1;
  background: var(--accent); color: var(--blue-ink);
  border-radius: 5px; padding: 5px 9px 4px;
}

/* ---------- Results ---------- */
.results-context { margin: 10px 0 0; }
.results-filters {
  margin-bottom: 22px; padding: 14px 16px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
}
.results-filters[hidden] { display: none; }
.results-filter-head {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 24px; margin-bottom: 10px;
}
.results-filter-title {
  font-family: var(--font-display); font-size: 17px; font-weight: 700;
  letter-spacing: .07em; line-height: 1; text-transform: uppercase; color: var(--blue-ink);
}
.results-filter-clear {
  appearance: none; border: 0; background: transparent; padding: 2px 4px;
  color: var(--blue); font-size: 14px; font-weight: 700; text-decoration: underline;
  text-underline-offset: 3px;
}
.results-filter-clear[hidden] { display: none; }
.season-filter-row {
  display: flex; align-items: stretch; gap: 26px;
}
.season-filter-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
  flex: 0 1 820px; max-width: 820px; min-width: 0;
}
.runflat-filter-slot {
  display: flex; flex: 0 0 300px; min-width: 0;
  padding-left: 24px; border-left: 1px solid var(--line);
}
.runflat-filter-slot .season-filter-card { width: 100%; }
.season-filter-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 10px; min-width: 0; min-height: 94px;
  padding: 14px 12px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 10px;
  background-color: #17324d;
  background-image:
    var(--season-overlay, linear-gradient(90deg, rgba(4, 16, 29, .86) 0%, rgba(4, 16, 29, .62) 52%, rgba(4, 16, 29, .2) 100%)),
    var(--season-photo);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff; text-align: left;
  box-shadow: 0 5px 14px rgba(11, 44, 79, .16);
  transition: transform .14s ease, box-shadow .14s ease, opacity .14s ease, filter .14s ease;
}
.season-filter-card::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  height: 4px; inset: auto 0 0;
  background: var(--season-accent, var(--accent));
}
.season-filter-card--allseason {
  --season-photo: url("img/season/all-season.webp?v=20260802");
  --season-overlay: linear-gradient(90deg, rgba(3, 29, 21, .65) 0%, rgba(3, 29, 21, .38) 54%, rgba(3, 29, 21, .1) 100%);
  --season-accent: #52b788;
}
.season-filter-card--allweather {
  --season-photo: url("img/season/all-weather.webp?v=20260802");
  --season-accent: #f4a340;
}
.season-filter-card--summer {
  --season-photo: url("img/season/summer.webp?v=20260802");
  --season-accent: #ffd166;
}
.season-filter-card--winter {
  --season-photo: url("img/season/winter.webp?v=20260802");
  --season-accent: #7dd3fc;
}
.season-filter-card--runflat {
  --season-accent: #ffd200;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 6px; padding: 10px 9px 10px 12px;
  background-color: #0d3559;
  background-image: linear-gradient(135deg, #102d49 0%, #0c4f7c 100%);
}
.runflat-filter-copy {
  display: grid; align-content: center; gap: 10px; min-width: 0;
}
.runflat-filter-copy strong { font-size: 17px; }
.runflat-filter-limits {
  display: flex; flex-wrap: wrap; gap: 5px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; line-height: 1;
}
.runflat-filter-limits > span {
  display: inline-flex; align-items: baseline; gap: 2px;
  padding: 4px 6px; border: 1px solid rgba(255, 255, 255, .32); border-radius: 5px;
  background: rgba(3, 17, 31, .48); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.runflat-filter-limits small { font-size: 9px; font-weight: 700; }
.runflat-filter-limits .runflat-limit-prefix {
  font-size: 8px; letter-spacing: .025em; color: #d9ebf8;
}
.runflat-filter-diagram {
  display: flex; align-items: center; justify-content: center; width: 96px; height: 68px;
}
.runflat-filter-diagram svg { display: block; width: 96px; height: 64px; overflow: visible; }
.runflat-speed-lines {
  fill: none; stroke: #7dd3fc; stroke-width: 3; stroke-linecap: round; opacity: .82;
}
.runflat-fender {
  fill: none; stroke: #c8d8e6; stroke-width: 2.5; stroke-linecap: round;
}
.runflat-tire-depth { fill: #0a1a28; stroke: #7892aa; stroke-width: 2; }
.runflat-tire { fill: #071522; stroke: #7892aa; stroke-width: 2.5; }
.runflat-wheel { fill: #647f98; stroke: #edf6fd; stroke-width: 2.5; }
.runflat-spokes {
  fill: none; stroke: #f7fbff; stroke-width: 4; stroke-linecap: round;
}
.runflat-hub { fill: #dce8f2; stroke: #183b59; stroke-width: 1.5; }
.runflat-lugs { fill: #173b59; stroke: #edf6fd; stroke-width: .45; }
.runflat-tread {
  fill: none; stroke: #95aabd; stroke-width: 2.4; stroke-linecap: round;
}
.runflat-nail {
  fill: none; stroke: #ff6b4a; stroke-width: 5; stroke-linecap: square; stroke-linejoin: round;
}
.runflat-puncture { fill: #ffd200; stroke: #fff; stroke-width: 2; }
.runflat-tpms {
  fill: none; stroke: #ffd200; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round;
}
@media (prefers-reduced-motion: no-preference) {
  .runflat-speed-lines { animation: runflat-speed-lines .42s ease-in-out infinite alternate; }
  @keyframes runflat-speed-lines { to { opacity: .38; transform: translateX(4px); } }
}
.season-filter-card--runflat .season-filter-count {
  position: absolute; top: 6px; right: 6px; z-index: 2;
}
.season-filter-art {
  display: none;
}
.season-filter-art svg {
  width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.season-filter-card strong {
  min-width: 0; font-family: var(--font-display); font-size: 18px; font-weight: 700;
  letter-spacing: .035em; line-height: 1.05; text-transform: uppercase;
  text-wrap: balance; text-shadow: 0 1px 4px rgba(0, 0, 0, .72);
}
body[data-lang="zh"] .season-filter-card strong { letter-spacing: 0; }
.season-filter-count {
  align-self: start; min-width: 25px; padding: 2px 6px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(3, 14, 27, .62); color: currentColor;
  font-size: 12px; font-weight: 700; line-height: 1.4; text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
.season-filter-card:hover:not(:disabled) {
  transform: translateY(-2px); box-shadow: 0 8px 18px rgba(11, 44, 79, .24);
}
.season-filter-card[aria-pressed="true"] {
  transform: translateY(-2px);
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--blue-ink), 0 9px 20px rgba(11, 44, 79, .28);
}
.season-filter-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.season-filter-card:disabled {
  cursor: not-allowed; opacity: .36; filter: grayscale(.72); box-shadow: none;
}

.results-layout.has-brand-sidebar {
  display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 24px; align-items: start;
}
.results-content { min-width: 0; }
/* The whole side column sticks and scrolls as ONE unit. Giving the brand list
   its own inner scroller as well produced two nested scrollbars once the LT
   note joined it. */
.results-aside {
  position: sticky; top: 92px; max-height: calc(100vh - 116px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px;
  scrollbar-width: thin; scrollbar-color: var(--line-blue) transparent;
}
.results-aside .brand-sidebar {
  position: static; top: auto; max-height: none; overflow: visible; flex: none;
}
.results-aside .landing-note { flex: none; }
.brand-sidebar {
  position: sticky; top: 92px; max-height: calc(100vh - 116px); overflow-y: auto;
  padding: 18px 16px; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  scrollbar-width: thin; scrollbar-color: var(--line-blue) transparent;
}
.brand-sidebar[hidden] { display: none; }
.brand-sidebar h2 {
  margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-size: 17px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft);
}
.brand-filter-options { display: flex; flex-direction: column; gap: 4px; }
.brand-filter-option {
  display: grid; grid-template-columns: 21px minmax(0, 1fr) auto; align-items: center; gap: 8px;
  min-height: 34px; padding: 3px 2px; color: var(--blue-ink); cursor: pointer;
}
.brand-filter-option:hover { color: var(--blue); }
.brand-filter-option input { width: 19px; height: 19px; margin: 0; accent-color: var(--blue); }
.brand-filter-option span { min-width: 0; font-size: 15px; line-height: 1.2; }
.brand-filter-option small { color: var(--ink-soft); font-size: 13px; }
.brand-filter-option:has(input:checked) span { color: var(--blue); font-weight: 600; }

.results-section { margin-bottom: 34px; }
.results-section-title {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em;
  font-size: 24px; margin: 0 0 16px; color: var(--blue-ink);
}
.results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }

/* staggered matched sets — one card, front + rear rows (DAI-card style) */
.results-grid-sets { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.tire-card-set .set-rows { display: grid; gap: 8px; margin: 6px 0 8px; }
.set-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: 14px;
  cursor: pointer; border-radius: 6px; padding: 3px 5px; margin: -3px -5px;
}
.set-row:hover { background: var(--blue-tint); }
.set-pos {
  font-family: var(--font-display); font-weight: 700; font-size: 12.5px;
  letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: var(--blue); border-radius: 4px; padding: 1px 8px; flex: none;
}
.set-row .sku-chip { font-size: 11.5px; }
.set-row .tire-avail { margin: 0; font-size: 13px; flex-basis: 100%; padding-left: 2px; }
/* staggered: front & rear side by side on wide screens */
.results-staggered { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
.results-staggered .results-grid { grid-template-columns: 1fr; }
.results-loading, .results-none { color: var(--ink-soft); font-size: 17px; }

.tire-card {
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px; gap: 10px;
}
/* The inset is load-bearing, not decoration. Supplier tire photos are squares
   with wildly uneven internal framing — measured across this catalogue the gap
   under the tire runs from 9.7% of the frame down to 0.3%, so the tightest ones
   rendered flush against the bottom of the panel and read as broken. Padding the
   panel guarantees every tire clears the edge no matter how its source is cropped. */
.tire-media {
  position: relative;
  height: 150px; display: flex; align-items: center; justify-content: center;
  background: var(--porcelain); border-radius: 7px; overflow: hidden;
  padding: 10px 14px;
}
.tire-media img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; }
/* Factory-approval marks, stuck on the photo like a seal.
   They live HERE and not in .tire-tags on purpose: that row is capped at two
   fixed lines (see the note on .tire-specs), and a third and fourth chip made
   it wrap on the cards that had them — which pushed the availability line out
   of alignment with every neighbouring card. Absolutely positioned, they cost
   the layout nothing, and a card with no markings looks exactly as it does now.
   The tooltip is the native title attribute: a CSS one would be clipped by this
   block's overflow:hidden, and the same information is spelled out in full on
   the detail view for anyone on a touch screen with no hover. */
.tire-oe-marks {
  position: absolute; top: 6px; right: 6px; z-index: 1;
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  max-width: calc(100% - 12px);
}
.oe-mark, .oe-badge {
  font-size: 11.5px; font-weight: 600; line-height: 1.6;
  padding: 0 7px; border-radius: 999px; white-space: nowrap; cursor: help;
}
/* Outlined = an objective property of the tire, same language as .badge. */
.oe-mark { background: var(--paper); border: 1px solid var(--line-blue); color: var(--blue-ink); }
/* Filled = something we are actively telling the shopper, same language as
   .badge-rf. "This is what your car came on" is the stronger claim of the two. */
.oe-badge { background: var(--blue); border: 1px solid var(--blue); color: #fff; letter-spacing: .04em; }
.tire-brand {
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--blue);
}
/* Brand mark instead of the wordmark, sized exactly as the dealer rebates page
   sizes .rb-logo (rebates.php) — that page is the reference for how these marks
   are meant to read, and it is the same artwork. Keep the two in step.

   The mark sits ABOVE the photo and the card body is centred. Centring is doing
   real work here, not decoration: these wordmarks run 64–132px wide, and on a
   shared left edge that width difference shows up as a ragged right end. Centred,
   the difference splits evenly to both sides and the column reads level. */
.tire-brand-logo { display: flex; align-items: center; justify-content: center; height: 26px; }
.tire-brand-logo img {
  height: 26px; max-width: 132px; object-fit: contain;
}
.tire-card > .tire-card-open > .tire-brand { text-align: center; }
.tire-info { text-align: center; }
.tire-specs, .tire-tags { justify-content: center; }
/* Set cards carry a FRONT/REAR label per row, so those rows stay left-reading —
   a positional label centred over its own data is just harder to parse. */
.tire-card-set .set-rows { text-align: left; }
/* balance kills the orphan last word. "ASSURANCE WEATHERREADY 2" was breaking
   as "ASSURANCE WEATHERREADY / 2" — a lone digit on its own line, which reads
   as a mistake, and worse once the card is centred. Balanced it splits
   "ASSURANCE / WEATHERREADY 2". Same for DWS 06 PLUS and TS 860 S SSR.
   Unsupported browsers just wrap normally, so there is nothing to fall back to. */
.tire-model { font-size: 17.5px; font-weight: 600; margin: 2px 0 8px; line-height: 1.25; text-wrap: balance; }
/* Card chips live in two fixed rows — size/service on top, season + RF below.
   Sharing one wrapping row let a long size or an "XL" service description push
   the season badge onto a second line on SOME cards only, which knocked the SKU
   and availability lines out of alignment across the grid. min-height keeps the
   tag row occupying space even when a tire has no season label. */
.tire-specs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.tire-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; min-height: 25px; }
.badge {
  font-size: 12.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-soft); white-space: nowrap;
}
/* Season badge carries DT's mark. inline-flex (not the default inline) so the
   glyph and the word share a baseline-independent centre line — the marks are
   square art, not text, and would otherwise sit low. */
.badge-season { display: inline-flex; align-items: center; gap: 5px; padding-left: 6px; }
.season-mark { width: 19px; height: 19px; object-fit: contain; flex: none; }
/* Run-flat is a capability, not a season — filled so it does not read as
   another season chip sitting next to it. */
.badge-rf {
  background: var(--blue-tint); border-color: var(--line-blue);
  color: var(--blue-ink); cursor: help;
}
/* Availability is not a warning system. The old ramp ran green -> blue ->
   amber -> grey, and amber reads as "something is wrong with this tire" when
   all it ever meant was "here in a couple of days". Our own shelf and the
   Concord warehouse are the same thing to a customer — both are green. A
   ships-in tire is blue: dependable, not degraded. */
.tire-avail { font-weight: 600; font-size: 14.5px; margin-top: auto; }
.avail-in_stock { color: var(--ok); }
.avail-in_stock::before { content: "● "; }
.avail-local { color: var(--ok); }
.avail-local::before { content: "● "; }
.avail-quick { color: var(--blue); }
.avail-quick::before { content: "● "; }
.avail-order { color: var(--ink-soft); }
/* When it is on the car — the line customers actually read. Quiet on purpose:
   it supports the label above it rather than competing with it. */
.tire-avail-note { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
.tire-avail + .tire-avail-note { margin-top: 3px; }
.btn-add { font-size: 16px; padding: 10px 14px; }
.btn-add.is-added { background: var(--ok); color: #fff; border-color: var(--ok); opacity: 1; }

.quote-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; justify-content: center; padding: 12px 16px;
  background: rgba(11, 44, 79, .96); border-top: 1px solid var(--blue-deep);
}
.quote-bar[hidden] { display: none; }
.quote-bar .btn { width: min(480px, 100%); }

/* ---------- Quote page ---------- */
.quote-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: start; }
.quote-layout[hidden] { display: none; }
.quote-empty p { font-size: 17px; color: var(--ink-soft); max-width: 46ch; }
.quote-vehicle {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
  font-weight: 600; color: var(--ink-soft); font-size: 15px;
}
.quote-vehicle[hidden] { display: none; }   /* display:flex would otherwise beat [hidden] — empty "Vehicle:" showed on size-search visits */
.quote-item {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 18px; margin-bottom: 10px; box-shadow: var(--shadow);
}
.quote-item-name { font-weight: 600; font-size: 16.5px; margin: 2px 0 6px; }
.quote-item-controls { display: flex; align-items: center; gap: 14px; flex: none; }
.quote-item-controls label { display: flex; align-items: center; gap: 7px; font-size: 14px; color: var(--ink-soft); font-weight: 600; }
.quote-item-controls select { padding: 7px 9px; border: 1px solid #c6d0da; border-radius: 7px; font: inherit; }
.quote-item-remove {
  background: none; border: 0; color: var(--danger); font-size: 14px; font-weight: 600;
  padding: 6px 4px; text-decoration: underline;
}
.quote-form {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow); border-top: 3px solid var(--blue);
  display: flex; flex-direction: column; gap: 15px;
}
.quote-form h2 {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em;
  font-size: 23px; margin: 0 0 4px; color: var(--blue-ink);
}
.hp-field { position: absolute; left: -9999px; top: -9999px; height: 0; overflow: hidden; }
.quote-disclaimer { color: var(--ink-soft); font-size: 13.5px; margin: 0; }
.quote-submit { width: 100%; }
.quote-error { color: var(--danger); font-weight: 600; margin: 0; }
.quote-success { text-align: center; padding: 40px 0 20px; }
.quote-success h2 {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .03em;
  font-size: clamp(30px, 4vw, 42px); margin: 0 0 10px; color: var(--blue-ink);
}
.quote-success p { color: var(--ink-soft); font-size: 17px; max-width: 46ch; margin: 0 auto 18px; }

/* ---------- Service rate card (services.php) ---------- */
.price-lede-main { margin: 0 0 14px; color: #33404d; font-size: 17px; max-width: 68ch; }
.price-action-hint {
  display: flex; align-items: center; gap: 11px; max-width: 980px; margin: 0 0 22px;
  padding: 11px 14px; border: 1px solid var(--line-blue); border-radius: 9px;
  background: var(--blue-tint); color: #234363; font-size: 14px; line-height: 1.45;
}
.price-action-hint strong { color: var(--blue-ink); }
.price-action-hint-icon {
  display: grid; place-items: center; flex: none; width: 26px; height: 26px;
  border-radius: 50%; background: var(--blue); color: #fff; font-size: 22px;
  font-weight: 700; line-height: 1;
}
.price-menu { display: grid; grid-template-columns: 1.02fr .98fr; gap: 18px; align-items: stretch; max-width: 980px; }
.price-stack { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.price-stack .price-col { flex: 1 1 auto; }
.price-foot {
  margin: 0; padding: 12px 20px 16px; border-top: 1px dashed var(--line);
  font-size: 13px; color: var(--ink-soft);
}
.price-col {
  min-width: 0;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
.price-col-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  background: var(--blue-ink); color: #fff; padding: 13px 20px 12px;
}
.price-col-head h3 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; font-size: 21px; margin: 0;
}
.price-col-alt {
  font-family: var(--font-display); font-weight: 600; font-size: 13.5px;
  letter-spacing: .1em; text-transform: uppercase; color: #7f9cbc; white-space: nowrap;
}
.price-col-note {
  display: block; padding: 12px 20px 0;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft);
}
.price-group { padding: 4px 20px 14px; }
.price-group + .price-group { border-top: 1px solid var(--line); }
.price-group-label {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; font-size: 16.5px; color: var(--blue); margin: 14px 0 2px;
}
.price-group-label span { color: var(--ink-soft); font-size: 14px; letter-spacing: .04em; margin-left: 6px; }
.price-group-note { margin: 0 0 2px; font-size: 12.5px; color: var(--ink-soft); }

.price-row {
  display: flex; align-items: baseline; gap: 12px; width: 100%; padding: 8px 6px 7px;
  border: 0; border-radius: 7px; background: transparent; color: inherit;
  font: inherit; text-align: left; cursor: pointer;
}
.price-row:hover { background: var(--blue-tint); }
.price-row:focus-visible { outline: 3px solid rgba(0, 95, 168, .28); outline-offset: 1px; }
.price-name { min-width: 0; }
.price-name b { font-weight: 600; font-size: 15.5px; color: var(--ink); }
.price-name small { display: block; font-size: 12.5px; color: var(--ink-soft); margin-top: 1px; }
.price-dots { flex: 1 1 auto; min-width: 28px; border-bottom: 2px dotted var(--line-blue); transform: translateY(-4px); }
.price-val { font-family: var(--font-mono); font-weight: 600; font-size: 18px; color: var(--blue); white-space: nowrap; }
.price-val small {
  font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft); margin-left: 2px;
}
.price-row-chevron {
  flex: none; color: var(--blue); font-size: 22px; font-weight: 700;
  line-height: .8; transform: translateY(2px);
}

.price-storage {
  background:
    repeating-linear-gradient(115deg, transparent 0 26px, rgba(255,255,255,.03) 26px 52px),
    linear-gradient(120deg, var(--blue) 0%, var(--blue-deep) 100%);
  color: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 24px;
}
.price-storage-trigger {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 0;
  border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer;
}
.price-storage-trigger:focus-visible { outline: 3px solid rgba(255, 216, 46, .65); outline-offset: 5px; border-radius: 5px; }
.price-storage-name {
  flex: none; white-space: nowrap;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; font-size: 21px; margin: 0;
}
.price-storage-val { margin-left: auto; white-space: nowrap; font-family: var(--font-mono); font-weight: 600; font-size: 28px; color: var(--accent); line-height: 1.1; }
.price-storage-val small { font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: #cfe0f2; margin-left: 4px; }
.price-storage-chevron { flex: none; color: #fff; font-size: 28px; line-height: 1; }
.price-storage p { margin: 8px 0 0; font-size: 13px; color: #b7cee6; }
/* ---------- Road force balance explainer (services) ----------
   Deep-navy block: the rate card above it is all white, so the one piece of
   the page that explains rather than prices reads as its own thing. */
.rfb {
  margin-top: 22px; padding: 30px 32px; border-radius: var(--radius);
  color: #fff; box-shadow: var(--shadow); max-width: 980px;
  background:
    repeating-linear-gradient(115deg, transparent 0 26px, rgba(255, 255, 255, .03) 26px 52px),
    linear-gradient(120deg, var(--blue-ink) 0%, #16385f 100%);
}
.rfb-eyebrow {
  font-family: var(--font-mono); font-weight: 600; font-size: 11.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 0 0 10px;
}
.rfb-title {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.08; margin: 0 0 12px;
}
/* Equipment credit — Hunter is the name customers recognise, so it gets a
   plate of its own rather than being buried in the paragraph. */
.rfb-kit {
  display: inline-flex; align-items: center; gap: 14px; margin: 0 0 16px;
  padding: 9px 16px; border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 10px; background: rgba(255, 255, 255, .05);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: #cfe0f2;
}
/* Official Hunter artwork, used as supplied — never recolour or stretch it. */
.rfb-kit-mark {
  display: block; height: 22px; width: auto; flex: none;
  border-right: 1px solid rgba(255, 255, 255, .18); padding-right: 14px;
}
body[data-lang="zh"] .rfb-kit { letter-spacing: .02em; }
.rfb-lede { margin: 0 0 22px; font-size: 16px; line-height: 1.7; color: #cfe0f2; max-width: 68ch; }
/* Copy left, our own machine right — the photo is the proof the copy claims. */
.rfb-top { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 28px; align-items: start; }
.rfb-shot { margin: 0; }
.rfb-shot img {
  display: block; width: 100%; height: auto; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 12px 30px rgba(0, 12, 28, .3);
}
.rfb-shot figcaption {
  margin-top: 9px; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase; color: #9fc3e8; line-height: 1.5;
}
@media (max-width: 860px) {
  .rfb-top { grid-template-columns: 1fr; gap: 20px; }
  .rfb-shot img { max-height: 420px; object-fit: cover; object-position: center 40%; }
}
.rfb-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: 18px; align-items: start; }
.rfb-compare { display: grid; gap: 12px; }
.rfb-card {
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px; padding: 16px 18px;
}
.rfb-card--force { border-left: 3px solid var(--accent); }
.rfb-card-head {
  font-family: var(--font-mono); font-weight: 600; font-size: 11.5px;
  letter-spacing: .12em; text-transform: uppercase; color: #9fc3e8; margin: 0 0 10px;
}
.rfb-card--force .rfb-card-head { color: var(--accent); }
.rfb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.rfb-list li { position: relative; padding-left: 16px; font-size: 15px; line-height: 1.55; color: #e2ecf7; }
.rfb-list li::before {
  content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 1.5px;
  background: var(--accent); opacity: .8;
}
.rfb-note { margin: 20px 0 0; font-size: 14.5px; line-height: 1.7; color: #b7cee6; max-width: 68ch; }
.rfb-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 0; }
body[data-lang="zh"] .rfb-title { letter-spacing: 0; }
@media (max-width: 720px) {
  .rfb { padding: 24px 20px; }
  .rfb-grid { grid-template-columns: 1fr; }
  .rfb-ctas .btn { flex: 1 1 100%; }
}

.price-notice {
  background: #fffae6; border: 1px solid #f0e2a8; border-left: 4px solid var(--accent);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 22px;
  max-width: 980px; margin-top: 18px;
}
.price-closing { margin-top: 30px; }
.price-notice-eyebrow {
  font-family: var(--font-mono); font-weight: 600; font-size: 11.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--warn); margin: 0 0 8px;
}
.price-notice p:not(.price-notice-eyebrow) { margin: 0; font-size: 15px; font-weight: 600; color: #33404d; }
.price-notice small { display: block; margin-top: 5px; font-size: 13px; font-weight: 400; color: var(--ink-soft); }

/* ---------- Service enquiry form (contact.php) ---------- */
.svc-enquiry {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start;
  max-width: 980px; margin-top: 34px;
}
.svc-ask-copy { position: sticky; top: 90px; }
.svc-ask-copy h2 {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .03em;
  font-size: clamp(26px, 3vw, 34px); margin: 0 0 12px; color: var(--blue-ink);
}
.svc-ask-copy p { margin: 0 0 16px; font-size: 16.5px; color: #33404d; max-width: 46ch; }
.svc-contact-walkin { padding-left: 14px; border-left: 3px solid var(--blue); }
.svc-enquiry--contact { scroll-margin-top: 90px; }
.svc-hours {
  list-style: none; margin: 0; padding: 14px 18px; border-left: 3px solid var(--blue);
  background: var(--porcelain); border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--font-mono); font-size: 13.5px; color: #33404d;
}
.svc-hours li + li { margin-top: 4px; }
.svc-picks { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.svc-picks legend {
  padding: 0; margin: 0 0 8px; font-weight: 600; font-size: 14px; color: var(--ink-soft);
}
.svc-pick {
  display: flex; align-items: baseline; gap: 9px; padding: 6px 8px;
  border-radius: 6px; cursor: pointer; font-size: 15px;
}
.svc-pick:hover { background: var(--porcelain); }
.svc-pick input { flex: 0 0 auto; }
.svc-pick-name { flex: 1 1 auto; }
.svc-pick-price { font-family: var(--font-mono); font-size: 13.5px; color: var(--ink-soft); white-space: nowrap; }
.svc-pick-price small { font-size: 11.5px; margin-left: 2px; }
.svc-sent {
  grid-column: 1 / -1; text-align: center; padding: 30px 20px;
  background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--blue);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.svc-sent h2 {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .03em;
  font-size: clamp(24px, 3vw, 32px); margin: 0 0 8px; color: var(--blue-ink);
}
.svc-sent p { margin: 0 auto; max-width: 48ch; color: var(--ink-soft); font-size: 16px; }
@media (max-width: 860px) {
  .svc-enquiry { grid-template-columns: 1fr; }
  .svc-ask-copy { position: static; }
}

/* A price-row click opens this chooser only; no navigation or booking happens
   until the customer makes a second, explicit choice. */
.svc-action-dialog {
  width: min(680px, calc(100vw - 32px)); max-height: min(780px, calc(100dvh - 32px));
  margin: auto; padding: 28px; overflow-y: auto; border: 0; border-top: 5px solid var(--blue);
  border-radius: 14px; box-shadow: 0 24px 70px rgba(5, 31, 58, .34); color: var(--ink);
}
.svc-action-dialog::backdrop { background: rgba(11, 44, 79, .58); }
.svc-action-close {
  position: absolute; top: 12px; right: 14px; width: 38px; height: 38px; padding: 0;
  border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink-soft);
  font-size: 25px; line-height: 1; cursor: pointer;
}
.svc-action-close:hover { color: var(--blue); background: var(--blue-tint); }
.svc-action-summary {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(235px, .9fr);
  gap: 24px; align-items: center; margin-bottom: 13px;
}
.svc-action-heading { min-width: 0; }
.svc-action-eyebrow {
  margin: 0 0 6px; font-family: var(--font-mono); font-size: 11.5px;
  font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--blue);
}
.svc-action-dialog h2 {
  margin: 0 0 3px; font-family: var(--font-display); font-size: 28px;
  line-height: 1.15; color: var(--blue-ink); text-transform: uppercase; letter-spacing: .025em;
}
.svc-action-price { margin: 0; font-family: var(--font-mono); font-size: 18px; font-weight: 600; color: var(--blue); }
.svc-action-visual {
  min-width: 0; margin: 7px 0 0; padding: 8px 9px 7px;
  border: 1px solid var(--line-blue); border-radius: 12px; background: #f6fbff;
}
.svc-action-visual svg { display: block; width: 100%; height: auto; overflow: visible; }
.svc-action-visual figcaption {
  min-height: 18px; margin: 3px 3px 0; text-align: center;
  color: #315474; font-size: 12px; font-weight: 650; line-height: 1.35;
}
.svc-v-bg { fill: url(#svc-visual-bg); stroke: #c1d9ef; stroke-width: 2; }
.svc-v-floor { fill: none; stroke: #b8d0e7; stroke-width: 3; stroke-linecap: round; }
.svc-v-scene { display: none; }
.svc-action-visual[data-visual="wheel-swap"] .svc-v-scene--wheel-swap,
.svc-action-visual[data-visual="tire-mount"] .svc-v-scene--tire-mount,
.svc-action-visual[data-visual="balance"] .svc-v-scene--balance,
.svc-action-visual[data-visual="road-force"] .svc-v-scene--road-force,
.svc-action-visual[data-visual="rotation"] .svc-v-scene--rotation,
.svc-action-visual[data-visual="plug"] .svc-v-scene--plug,
.svc-action-visual[data-visual="patch"] .svc-v-scene--patch,
.svc-action-visual[data-visual="bead-valve"] .svc-v-scene--bead-valve,
.svc-action-visual[data-visual="dismount"] .svc-v-scene--dismount,
.svc-action-visual[data-visual="tpms"] .svc-v-scene--tpms,
.svc-action-visual[data-visual="storage"] .svc-v-scene--storage { display: block; }
.svc-v-tire { fill: none; stroke: #163b60; stroke-width: 13; }
.svc-v-tire--loose { stroke-width: 16; }
.svc-v-rim { fill: #f8fbff; stroke: #1680c5; stroke-width: 4; }
.svc-v-rim-alone { fill: #f8fbff; stroke: #1680c5; stroke-width: 7; }
.svc-v-spokes { fill: none; stroke: #79a7ce; stroke-width: 3; stroke-linecap: round; }
.svc-v-hub { fill: var(--accent); stroke: #9b7900; stroke-width: 1.5; }
.svc-v-open-hub { fill: #d4e7f6; stroke: #47779f; stroke-width: 5; }
.svc-v-machine { fill: #123b63; stroke: #0c2d4d; stroke-width: 2.5; stroke-linejoin: round; }
.svc-v-window { fill: #9fccec; stroke: #4f83ac; stroke-width: 2; stroke-linejoin: round; }
.svc-v-screen { fill: #d9f1ff; stroke: #73a8cd; stroke-width: 2; }
.svc-v-screen + * { vector-effect: non-scaling-stroke; }
.svc-v-tool,
.svc-v-valve { fill: none; stroke: #375f82; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.svc-v-arrow,
.svc-v-motion,
.svc-v-force-arrow { fill: none; stroke: #f0b900; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.svc-v-arrow { stroke-width: 3.5; }
.svc-v-accent { fill: var(--accent); stroke: #9b7900; stroke-width: 1.5; }
.svc-v-accent-line { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; }
.svc-v-roller-body { fill: #7ea7c7; stroke: #31597b; stroke-width: 4; }
.svc-v-roller-mark { stroke: #d9e9f5; stroke-width: 4; stroke-linecap: round; }
.svc-v-car-top { fill: rgba(255, 255, 255, .65); stroke: #42759d; stroke-width: 3; stroke-linejoin: round; }
.svc-v-tread,
.svc-v-cut-tire { fill: none; stroke: #163b60; stroke-width: 23; stroke-linecap: round; }
.svc-v-tread-line { fill: none; stroke: #c3dcef; stroke-width: 3; stroke-linecap: round; }
.svc-v-puncture { fill: none; stroke: #d23c3c; stroke-width: 4; stroke-linecap: round; }
.svc-v-plug { fill: none; stroke: var(--accent); stroke-width: 7; stroke-linecap: round; }
.svc-v-patch { transform-box: fill-box; transform-origin: center; }
.svc-action-visual[data-visual="bead-valve"] .svc-v-floor { display: none; }
.svc-v-panel-divider { fill: none; stroke: #b8d0e7; stroke-width: 2; stroke-dasharray: 3 5; }
.svc-v-step-label {
  fill: #315474; font-family: var(--font-mono); font-size: 9px; font-weight: 600;
  letter-spacing: .08em;
}
.svc-v-bead-tire { fill: none; stroke: #163b60; stroke-width: 19; stroke-linecap: round; }
.svc-v-bead-rim { fill: none; stroke: #1680c5; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.svc-v-brush-handle { fill: none; stroke: #375f82; stroke-width: 7; stroke-linecap: round; }
.svc-v-brush-ferrule { fill: none; stroke: #7ea7c7; stroke-width: 10; stroke-linecap: square; }
.svc-v-brush-bristles { fill: none; stroke: var(--accent); stroke-width: 8; stroke-linecap: round; }
.svc-v-old-valve-cap,
.svc-v-old-valve-base { fill: #8aa8c0; stroke: #536f87; stroke-width: 2; }
.svc-v-old-valve-stem { fill: none; stroke: #718da5; stroke-width: 7; stroke-linecap: round; }
.svc-v-damage { fill: none; stroke: #d23c3c; stroke-width: 4; stroke-linecap: round; }
.svc-v-valve-rim { fill: #f8fbff; stroke: #1680c5; stroke-width: 4; stroke-linejoin: round; }
.svc-v-new-valve-cap { fill: var(--accent); stroke: #9b7900; stroke-width: 1.5; }
.svc-v-new-valve-stem { fill: none; stroke: #163b60; stroke-width: 8; stroke-linecap: round; }
.svc-v-new-valve-collar,
.svc-v-new-valve-base { fill: #163b60; stroke: #0c2d4d; stroke-width: 2; }
.svc-v-sensor { fill: #0d6fab; stroke: #0a4f7c; stroke-width: 2; }
.svc-v-sensor-dot { fill: var(--accent); }
.svc-v-rack { fill: none; stroke: #47779f; stroke-width: 5; stroke-linecap: round; }
.svc-v-tag { fill: var(--accent); stroke: #9b7900; stroke-width: 2; transform-box: fill-box; transform-origin: 50% 0; }
.svc-v-tag-hole { fill: #fff6bd; }
.svc-v-wheel-old,
.svc-v-wheel-new,
.svc-v-tire-old,
.svc-v-tire-new,
.svc-v-tire-out-arrow,
.svc-v-tire-in-arrow,
.svc-v-wheel-spin,
.svc-v-arrow-pulse,
.svc-v-roller,
.svc-v-plug-in,
.svc-v-bead-pulse,
.svc-v-bead-brush,
.svc-v-old-valve,
.svc-v-new-valve,
.svc-v-valve-replace-arrow,
.svc-v-part-left,
.svc-v-part-right,
.svc-v-sensor-pulse { transform-box: fill-box; transform-origin: center; }
.svc-action-visual.is-active .svc-v-wheel-old--left { animation: svc-wheel-old-left 4s ease-in-out infinite; }
.svc-action-visual.is-active .svc-v-wheel-old--right { animation: svc-wheel-old-right 4s ease-in-out infinite; }
.svc-action-visual.is-active .svc-v-wheel-new--left { animation: svc-wheel-new-left 4s ease-in-out infinite; }
.svc-action-visual.is-active .svc-v-wheel-new--right { animation: svc-wheel-new-right 4s ease-in-out infinite; }
.svc-action-visual.is-active .svc-v-tire-old { animation: svc-tire-old-out 4s ease-in-out infinite; }
.svc-action-visual.is-active .svc-v-tire-new { animation: svc-tire-new-in 4s ease-in-out infinite; }
.svc-action-visual.is-active .svc-v-tire-out-arrow { animation: svc-tire-out-arrow 4s ease-in-out infinite; }
.svc-action-visual.is-active .svc-v-tire-in-arrow { animation: svc-tire-in-arrow 4s ease-in-out infinite; }
.svc-action-visual.is-active .svc-v-wheel-spin { animation: svc-wheel-spin 2.2s linear infinite; }
.svc-action-visual.is-active .svc-v-arrow-pulse { animation: svc-arrow-pulse 1.25s ease-in-out infinite; }
.svc-action-visual.is-active .svc-v-weight { animation: svc-weight-pulse 1.1s ease-in-out infinite; }
.svc-action-visual.is-active .svc-v-roller { animation: svc-roller-load 1.8s ease-in-out infinite; }
.svc-action-visual.is-active .svc-v-force-arrow { animation: svc-force-pulse 1.8s ease-in-out infinite; }
.svc-action-visual.is-active .svc-v-rotate-path,
.svc-action-visual.is-active .svc-v-radio { animation: svc-dash-flow 1.8s linear infinite; stroke-dasharray: 9 8; }
.svc-action-visual.is-active .svc-v-plug-in { animation: svc-plug-in 1.7s ease-in-out infinite; }
.svc-action-visual.is-active .svc-v-patch { animation: svc-patch-pulse 1.6s ease-in-out infinite; }
.svc-action-visual.is-active .svc-v-bead-pulse { animation: svc-bead-scan 1.7s ease-in-out infinite; stroke-dasharray: 26 60; }
.svc-action-visual.is-active .svc-v-bead-brush { animation: svc-bead-brush 1.8s ease-in-out infinite; }
.svc-action-visual.is-active .svc-v-old-valve { animation: svc-old-valve-out 2.2s ease-in-out infinite; }
.svc-action-visual.is-active .svc-v-new-valve { animation: svc-new-valve-in 2.2s ease-in-out infinite; }
.svc-action-visual.is-active .svc-v-valve-replace-arrow { animation: svc-arrow-pulse 1.1s ease-in-out infinite; }
.svc-action-visual.is-active .svc-v-part-left { animation: svc-part-left 2s ease-in-out infinite; }
.svc-action-visual.is-active .svc-v-part-right { animation: svc-part-right 2s ease-in-out infinite; }
.svc-action-visual.is-active .svc-v-sensor-pulse { animation: svc-sensor-pulse 1.35s ease-in-out infinite; }
.svc-action-visual.is-active .svc-v-tag-swing { animation: svc-tag-swing 2s ease-in-out infinite; }
@keyframes svc-wheel-old-left {
  0%, 12% { transform: translateX(0) rotate(0); opacity: 1; }
  36%, 100% { transform: translateX(-45px) rotate(-180deg); opacity: 0; }
}
@keyframes svc-wheel-old-right {
  0%, 12% { transform: translateX(0) rotate(0); opacity: 1; }
  36%, 100% { transform: translateX(45px) rotate(180deg); opacity: 0; }
}
@keyframes svc-wheel-new-left {
  0%, 43% { transform: translateX(-45px) rotate(-180deg); opacity: 0; }
  51% { opacity: .35; }
  74%, 90% { transform: translateX(0) rotate(0); opacity: 1; }
  100% { transform: translateX(0) rotate(0); opacity: 0; }
}
@keyframes svc-wheel-new-right {
  0%, 43% { transform: translateX(45px) rotate(180deg); opacity: 0; }
  51% { opacity: .35; }
  74%, 90% { transform: translateX(0) rotate(0); opacity: 1; }
  100% { transform: translateX(0) rotate(0); opacity: 0; }
}
@keyframes svc-tire-old-out {
  0%, 12% { transform: translateX(0) rotate(0); opacity: 1; }
  36%, 100% { transform: translateX(62px) rotate(180deg); opacity: 0; }
}
@keyframes svc-tire-new-in {
  0%, 43% { transform: translateX(-22px) rotate(-90deg); opacity: 0; }
  51% { opacity: .35; }
  74%, 90% { transform: translateX(109px) rotate(0); opacity: 1; }
  100% { transform: translateX(109px) rotate(0); opacity: 0; }
}
@keyframes svc-tire-out-arrow {
  0%, 8%, 38%, 100% { opacity: 0; }
  15%, 28% { opacity: 1; }
}
@keyframes svc-tire-in-arrow {
  0%, 43%, 77%, 100% { opacity: 0; }
  51%, 68% { opacity: 1; }
}
@keyframes svc-wheel-spin { to { transform: rotate(360deg); } }
@keyframes svc-arrow-pulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes svc-weight-pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes svc-roller-load { 0%, 100% { transform: translateY(-5px); } 50% { transform: translateY(7px); } }
@keyframes svc-force-pulse { 0%, 100% { opacity: .35; transform: translateY(-2px); } 50% { opacity: 1; transform: translateY(4px); } }
@keyframes svc-dash-flow { to { stroke-dashoffset: -34; } }
@keyframes svc-plug-in { 0%, 100% { transform: translateY(-8px); } 55%, 80% { transform: translateY(8px); } }
@keyframes svc-patch-pulse { 0%, 100% { transform: scale(.9); opacity: .6; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes svc-bead-scan { 0% { stroke-dashoffset: 42; opacity: .45; } 60%, 100% { stroke-dashoffset: -42; opacity: 1; } }
@keyframes svc-bead-brush { 0%, 100% { transform: translate(-4px, -4px); } 45%, 72% { transform: translate(1px, 1px); } }
@keyframes svc-old-valve-out { 0%, 22% { opacity: 1; } 48%, 82% { opacity: .25; transform: translate(-5px, -6px); } 100% { opacity: 1; } }
@keyframes svc-new-valve-in { 0%, 28% { transform: translateY(-9px); opacity: .45; } 58%, 88% { transform: translateY(0); opacity: 1; } 100% { opacity: .45; } }
@keyframes svc-part-left { 0%, 100% { transform: translateX(13px); } 50% { transform: translateX(-7px); } }
@keyframes svc-part-right { 0%, 100% { transform: translateX(-13px); } 50% { transform: translateX(7px); } }
@keyframes svc-sensor-pulse { 0%, 100% { transform: scale(.92); opacity: .72; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes svc-tag-swing { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(4deg); } }
.svc-action-note { margin: 0 0 18px; color: var(--ink-soft); line-height: 1.55; }
.svc-action-choices { display: grid; gap: 10px; }
.svc-action-choice {
  display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 14px 16px;
  border: 1px solid var(--line-blue); border-radius: 9px; background: #fff; color: var(--blue-ink);
  font: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.svc-action-choice:hover { border-color: var(--blue); background: var(--blue-tint); }
.svc-action-choice:focus-visible { outline: 3px solid rgba(0, 95, 168, .25); outline-offset: 2px; }
.svc-action-choice[hidden] { display: none; }
.svc-action-choice span { font-family: var(--font-display); font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.svc-action-choice small { color: var(--ink-soft); font-size: 13.5px; }
.svc-walkin-panel {
  margin-top: 14px; padding: 16px; border: 1px solid var(--line-blue);
  border-radius: 10px; background: var(--porcelain);
}
.svc-walkin-panel[hidden] { display: none; }
.svc-walkin-title { margin: 0 0 10px; font-family: var(--font-display); font-size: 18px; font-weight: 700; text-transform: uppercase; color: var(--blue-ink); }
.svc-walkin-address { margin: 13px 0; color: #33404d; line-height: 1.55; }
.svc-walkin-links { display: flex; flex-wrap: wrap; gap: 9px; margin: 0; }
.svc-walkin-links .btn { flex: 1 1 190px; text-align: center; }
.svc-action-cancel {
  display: block; margin: 18px auto 0; padding: 7px 14px; border: 0; background: transparent;
  color: var(--ink-soft); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer;
}
body.svc-action-open { overflow: hidden; }
@media (max-width: 560px) {
  .svc-action-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); padding: 24px 18px; }
  .svc-action-dialog h2 { font-size: 24px; }
  .svc-action-summary { grid-template-columns: 1fr; gap: 10px; }
  .svc-action-heading { padding-right: 42px; }
  .svc-action-visual {
    display: grid; grid-template-columns: minmax(116px, 140px) minmax(0, 1fr);
    gap: 10px; align-items: center; margin-top: 0; padding: 5px 10px 5px 5px;
  }
  .svc-action-visual figcaption { margin: 0; text-align: left; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-action-visual * { animation: none !important; }
}

/* ---------- Footer (deep navy) ---------- */
.site-footer { background: var(--blue-ink); color: #b7cee6; margin-top: 40px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; padding: 40px 20px 28px; }
.footer-col h3 {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .08em;
  font-size: 15px; color: #7f9cbc; margin: 0 0 10px;
}
.footer-col p { margin: 0 0 10px; font-size: 15px; line-height: 1.7; }
.footer-col a { color: #e8f0f8; text-decoration: none; }
.footer-col a:hover { color: var(--accent); }
.footer-brand p { color: #9fb6cf; max-width: 30ch; }
.footer-logo { background: #fff; border-radius: 8px; padding: 8px 12px; display: inline-block; margin-bottom: 12px; }
.footer-logo img { height: 22px; width: auto; }
.footer-legal {
  border-top: 1px solid #1b4066; padding-top: 16px; padding-bottom: 22px;
  font-size: 13px; color: #6f8cab;
}

/* ---------- Tire detail: card link, modal, /tire/<sku> page ---------- */

/* The card body is an <a> to /tire/<sku>. It mirrors .tire-card's own flex
   column (same gap) so wrapping the children in a link changed no spacing. */
.tire-card-open {
  display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto;
  min-width: 0; text-decoration: none; color: inherit;
}
.tire-card { transition: border-color .12s ease, box-shadow .12s ease; }
.tire-card:hover { border-color: var(--line-blue); box-shadow: 0 2px 4px rgba(11,44,79,.08), 0 12px 30px rgba(11,44,79,.12); }
.tire-card-open:hover .tire-model { color: var(--blue); }
.tire-card-cue {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; font-size: 13.5px; color: var(--blue);
  opacity: .55; transition: opacity .12s ease; text-align: center;
}
.tire-card-cue::after { content: " →"; }
.tire-card-open:hover .tire-card-cue,
.tire-card-open:focus-visible .tire-card-cue { opacity: 1; }

/* Booking modal — native <dialog>, iframes the booking app in ?embed=1 mode */
.appt-modal {
  width: min(1180px, calc(100vw - 32px)); height: min(88vh, 920px);
  padding: 0; border: 0; border-radius: 18px; overflow: hidden;
  background: #fff; box-shadow: 0 32px 80px rgba(11, 44, 79, .34);
}
.appt-modal::backdrop { background: rgba(11, 44, 79, .58); }
.appt-modal-frame { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.appt-modal-close {
  position: absolute; top: 12px; right: 14px; z-index: 2;
  width: 40px; height: 40px; border: 0; border-radius: 999px;
  background: #fff; color: var(--blue-ink);
  border: 1px solid var(--line); box-shadow: 0 2px 10px rgba(11, 44, 79, .22);
  font-size: 27px; line-height: 1; cursor: pointer;
}
.appt-modal-close:hover { background: var(--blue-tint); border-color: var(--blue); }
body.appt-modal-open { overflow: hidden; }
@media (max-width: 767px) {
  .appt-modal { width: 100vw; height: 100dvh; max-height: none; border-radius: 0; }
  .appt-modal-close { top: 8px; right: 8px; }
}

/* Modal — native <dialog>: ESC + focus trap for free. */
.tire-modal {
  width: min(940px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
  padding: 0; border: 0; border-radius: var(--radius);
  background: var(--paper); color: var(--ink);
  box-shadow: 0 18px 60px rgba(11, 44, 79, .35);
  overflow: hidden;
}
.tire-modal::backdrop { background: rgba(11, 44, 79, .55); }
.tire-modal-body { padding: 26px; overflow-y: auto; max-height: calc(100vh - 48px); }
.tire-modal-close {
  position: absolute; top: 8px; right: 10px; z-index: 2;
  background: none; border: 0; line-height: 1;
  font-size: 30px; color: var(--ink-soft); padding: 4px 10px; border-radius: 6px;
}
.tire-modal-close:hover { color: var(--blue); background: var(--blue-tint); }
.tire-modal-title { font-size: 24px; font-weight: 600; margin: 2px 0 10px; line-height: 1.2; }

/* Two-column detail body — shared by the modal and tire.php. */
.tire-detail { display: grid; grid-template-columns: 1.05fr .95fr; gap: 30px; align-items: start; }
.tire-detail-media { min-width: 0; }
.tire-detail-buy { min-width: 0; }
.tire-detail-logo { max-height: 34px; max-width: 100%; width: auto; margin-bottom: 10px; }
/* The modal reuses the card's brand mark, with the detail page's headroom. */
.tire-detail-buy .tire-brand-logo { height: 34px; margin-bottom: 10px; }
.tire-detail-buy .tire-brand-logo img { height: 34px; max-width: 180px; }

.tire-gallery-main {
  background: var(--porcelain); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; min-height: 260px;
}
.tire-gallery-main img { max-height: 340px; width: auto; object-fit: contain; }
.tire-gallery-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tire-thumb {
  width: 66px; height: 66px; padding: 4px; background: var(--paper);
  border: 1px solid var(--line); border-radius: 8px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.tire-thumb img { max-height: 100%; width: auto; object-fit: contain; }
.tire-thumb:hover { border-color: var(--line-blue); }
.tire-thumb.is-active { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }

.spec-table { width: 100%; border-collapse: collapse; margin: 14px 0; }
.spec-table th, .spec-table td {
  text-align: left; padding: 8px 0; border-bottom: 1px solid var(--line);
  font-size: 15px; vertical-align: top;
}
.spec-table th { font-weight: 600; color: var(--ink-soft); width: 42%; padding-right: 12px; }
.spec-table td { color: var(--ink); }
.spec-table-wide th { width: 32%; }

.btn-add-detail { width: 100%; margin-top: 4px; }
.btn-add-detail.is-added { background: var(--ok); border-color: var(--ok); }
.tire-detail-note { margin: 10px 0 0; font-size: 14px; color: var(--ink-soft); }
.tire-detail-full {
  display: inline-block; margin-top: 12px; font-weight: 600; color: var(--blue);
}
.tire-detail-call {
  display: block; margin-top: 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 22px;
  letter-spacing: .03em; color: var(--blue-ink); text-decoration: none;
}
.tire-detail-call:hover { color: var(--blue); }

.tire-section { margin-top: 30px; }
.tire-section h2, .tire-section h3 {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em;
  font-size: 21px; margin: 0 0 6px; color: var(--blue-ink);
}
.tire-oe-count { margin: 0 0 10px; color: var(--ink-soft); font-size: 15px; }
/* One row per vehicle, replacing the year/make/model/option table.
   The table was honest to the feed and useless to a reader: DT emits a row per
   model-year, so a tire that ran six seasons on one car filled six rows that
   differed only in the year column, and the Make cell said "Mercedes-Benz" over
   and over. Grouped, that is one line. The year range leads because it is what
   a shopper checks first — "is my model year in there" — and it is set in the
   mono face so the ranges line up down the column. Long lists still scroll
   inside their own box; the page never scrolls sideways. */
.tire-oe-scroll { max-height: 420px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.oe-list { list-style: none; margin: 0; padding: 0; font-size: 15px; }
.oe-list li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  padding: 9px 0; border-bottom: 1px solid var(--line);
}
.oe-list li:last-child { border-bottom: 0; }
.oe-list-years {
  font-family: var(--font-mono); font-size: 13.5px; color: var(--blue-ink);
  background: var(--blue-tint); border-radius: 5px; padding: 1px 7px;
  flex: none; min-width: 92px; text-align: center;
}
.oe-list-vehicle { font-weight: 600; }
/* The trim is a qualifier, not the vehicle — quiet enough to skim past. */
.oe-list-option { color: var(--ink-soft); font-size: 14px; }

.crumbs { font-size: 14px; margin: 0 0 10px; color: #cfe0f2; display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.4); }
.crumbs a:hover { border-bottom-color: #fff; }
.tire-detail-more { margin-top: 30px; font-weight: 600; }
.tire-detail-more a { color: var(--blue); }

/* ---------- Responsive ---------- */
@media (max-width: 1320px) {
  .site-nav { display: none; }
  .nav-burger { display: block; }
  .header-utility .header-phone span { display: none; }
  .header-phone { padding: 8px 9px; }
  .btn-appt { font-size: 15px; padding: 9px 12px; }
}
@media (max-width: 960px) {
  .season-filter-row { flex-wrap: wrap; gap: 16px; }
  .season-filter-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    flex: 1 1 100%; max-width: 820px;
  }
  .runflat-filter-slot {
    flex: 0 1 310px; padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--line);
  }
  .finder-grid-vehicle { grid-template-columns: 1fr 1fr; }
  .finder-grid-size { grid-template-columns: 1fr; }
  .season-opts-row { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 420px; }
  .finder-row .season-pick { flex: 1 1 100%; }
  .card-grid { grid-template-columns: 1fr; }
  .pcard-grid { grid-template-columns: 1fr 1fr; }
  .hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .hero-visual {
    position: relative; inset: auto; width: calc(100% + 40px); height: 360px;
    margin: 30px -20px -60px; z-index: 1;
  }
  .hero-media::after {
    background:
      linear-gradient(180deg, var(--blue-deep) 0%, rgba(0,75,139,.72) 14%, transparent 45%, rgba(0,20,42,.32) 100%);
  }
  .steps { grid-template-columns: 1fr; gap: 10px; }
  .trust-row { gap: 8px 16px; }
  .hero .trust-row { gap: 10px 18px; }
  .trust-chip { font-size: 14.5px; }
  .why-grid { grid-template-columns: 1fr; }
  .why-grid .why-photo { order: -1; }
  .reviews-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .svc-grid { grid-template-columns: 1fr; }
  .price-menu { grid-template-columns: 1fr; }
  .rebate-grid { grid-template-columns: 1fr; }
  .wpartner-grid { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; }
  .about-grid .about-photo { order: -1; }
  .hours-strip { grid-template-columns: repeat(4, 1fr); }
  .hours-cell { border-top: 1px solid var(--line); }
  .quote-layout { grid-template-columns: 1fr; }
  .tire-detail { grid-template-columns: 1fr; gap: 22px; }
  .tire-modal-body { padding: 20px 16px; }
  .tire-gallery-main { min-height: 200px; }
  .tire-gallery-main img { max-height: 240px; }
  .results-staggered { grid-template-columns: 1fr; }
  .results-staggered .results-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
  .results-layout.has-brand-sidebar { grid-template-columns: 180px minmax(0, 1fr); gap: 18px; }
}
@media (max-width: 720px) {
  .home-rebates-head { align-items: flex-start; flex-direction: column; }
  .home-rebate-grid { grid-template-columns: 1fr; }
  .season-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .runflat-filter-slot { flex-basis: 100%; max-width: 310px; }
  .results-layout.has-brand-sidebar { display: block; }
  /* No side to put a side note on: the column unsticks and stacks above the
     grid, so the LT note has to stay short enough not to bury the tires. */
  .results-aside {
    position: static; max-height: none; overflow: visible;
    margin-bottom: 20px; gap: 12px;
  }
  .results-aside .brand-sidebar { margin-bottom: 0; }
  .brand-sidebar {
    position: static; max-height: 250px; margin-bottom: 20px; padding: 14px 16px;
  }
  .brand-filter-options {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px;
  }
  .load-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Small phones: phone and language move into the burger menu while the
   appointment CTA stays visible beside it; the logo scales with the viewport. */
@media (max-width: 600px) {
  .hero .trust-row { grid-template-columns: 1fr; gap: 9px; }
  .hero-ctas .btn { flex: 1 1 100%; }
  .pcard-grid { grid-template-columns: 1fr; gap: 16px; }
  .pcard { grid-template-rows: minmax(210px, 1fr) auto; min-height: 382px; }
  .pcard--copy-top { grid-template-rows: auto minmax(210px, 1fr); }
  .pcard-copy { min-height: 150px; }
  .pcard h3 { font-size: 25px; }
  .results-filters { padding: 12px; }
  .season-filter-grid { gap: 8px; }
  .season-filter-card {
    grid-template-columns: minmax(0, 1fr); min-height: 88px;
    padding: 11px 10px; gap: 8px;
  }
  .season-filter-card strong { font-size: 16px; }
  .season-filter-card--runflat {
    grid-template-columns: minmax(0, 1fr) 90px; min-height: 96px;
  }
  .runflat-filter-copy strong { font-size: 17px; }
  .runflat-filter-diagram { width: 90px; }
  .runflat-filter-diagram svg { width: 90px; }
  .season-filter-count { position: absolute; top: 7px; right: 7px; }
  .header-row { gap: 10px; height: 58px; }
  .logo-link img { height: auto; width: clamp(118px, 34vw, 200px); }
  .header-utility { display: none; }
  .btn-appt { font-size: 14px; padding: 8px 11px; gap: 6px; }
  .price-storage-trigger {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 12px; align-items: center;
  }
  .price-storage-name { grid-column: 1; grid-row: 1; white-space: normal; }
  .price-storage-val { grid-column: 1; grid-row: 2; margin-left: 0; font-size: 26px; }
  .price-storage-chevron { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .hero { padding: 38px 0 0; }
  .hero-visual { height: 300px; margin-top: 26px; margin-bottom: 0; }
  .hero-video-toggle { right: 11px; bottom: 10px; width: 20px; height: 20px; }
  .quote-float { padding: 10px 8px; font-size: 11.5px; }
}
@media (max-width: 380px) {
  .btn-appt-label { display: none; }
  .btn-appt-label-short { display: inline; }
}

/* ---------- Size / brand landing pages ---------------------------------- */
/* Server-rendered catalogue pages (/tires/225-65r17, /tires/brand/michelin).
   The tire cards reuse .results-grid/.tire-card, so only the surrounding
   blocks need styling here. */
.results-empty {
  margin: 24px 0;
  color: var(--ink-muted, #55606b);
  font-size: 15px;
}
.landing-related {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(0, 0, 0, .1);
}
.landing-related h2 {
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 20px;
  margin: 0 0 12px;
}
.landing-related h3 {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-muted, #55606b);
  margin: 18px 0 8px;
}
.landing-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.landing-links a {
  display: inline-block;
  padding: 6px 11px;
  border: 1px solid rgba(0, 0, 0, .14);
  border-radius: 999px;
  font-size: 13.5px;
  text-decoration: none;
  color: inherit;
  background: #fff;
}
.landing-links a:hover,
.landing-links a:focus-visible {
  border-color: var(--brand, #0057A6);
  color: var(--brand, #0057A6);
}
/* The sizes Taylor actually sells, by 2025 unit volume. Marked with a doubled
   blue ring and bold blue type rather than a fill: the grid stays one calm
   field of chips and weight alone does the surfacing. No accent stroke — the
   yellow underline means "selected" everywhere else in this system (see
   .season-opt), and these are editorial marks, not a chosen state.
   The ring's second pass is an inset shadow, not a thicker border, so the
   chips keep the exact height of their neighbours and rows stay aligned.
   Hovering fills them in, which a plain chip's hover never does — otherwise
   the two states would be indistinguishable. No visible legend: the ring's
   meaning rides on the link's own title and aria-label. */
.landing-links a.is-popular {
  border-color: var(--blue);
  box-shadow: inset 0 0 0 1px var(--blue);
  color: var(--blue);
  font-weight: 700;
}
.landing-links a.is-popular:hover,
.landing-links a.is-popular:focus-visible {
  background: var(--blue); border-color: var(--blue); color: #fff;
}

/* ---------- Per-service landing pages (/services/<slug>) + the hub grid that
   links to them from /services. Deliberately built out of the same tokens as
   the rate card: these pages are the same shop, one job at a time. ---------- */
.svcp-lede {
  max-width: 780px; margin: 0 0 28px;
  font-size: 19px; line-height: 1.6; color: #33404d;
}
.svcp-lede strong { color: var(--blue-ink); }

.svcp-main { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 26px; align-items: start; }
.svcp-rates, .svcp-side {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 24px;
}
.svcp-rates h2, .svcp-side h2, .svcp-faq h2, .svcp-related h2, .svc-detail-links h2 {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em;
  font-size: 22px; margin: 0 0 14px; color: var(--blue-ink);
}
.svcp-rate-group {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .03em;
  font-size: 16px; margin: 18px 0 2px; color: var(--blue);
}
.svcp-rate-group:first-of-type { margin-top: 0; }
.svcp-rate-note { margin: 0 0 6px; font-size: 14px; color: var(--ink-soft); }
.svcp-rate-list { list-style: none; margin: 0; padding: 0; }
.svcp-rate-list li {
  display: flex; align-items: baseline; gap: 8px;
  padding: 9px 0; border-bottom: 1px dashed var(--line);
}
.svcp-rate-list li:last-child { border-bottom: 0; }
.svcp-rate-name { font-weight: 600; }
.svcp-rate-dots { flex: 1 1 auto; border-bottom: 1px dotted var(--line-blue); transform: translateY(-3px); }
.svcp-rate-val { font-family: var(--font-display); font-size: 22px; color: var(--blue); white-space: nowrap; }
.svcp-rate-val small { font-size: 12px; color: var(--ink-soft); margin-left: 3px; }
.svcp-rate-foot { margin: 16px 0 0; font-size: 14px; color: var(--ink-soft); }
.svcp-rate-foot a { color: var(--blue); white-space: nowrap; }

.svcp-included { list-style: none; margin: 0; padding: 0; }
.svcp-included li { position: relative; padding: 0 0 0 24px; margin: 0 0 10px; color: #33404d; }
.svcp-included li::before {
  content: ""; position: absolute; left: 2px; top: 8px;
  width: 9px; height: 5px; border-left: 2px solid var(--blue); border-bottom: 2px solid var(--blue);
  transform: rotate(-45deg);
}

.svcp-how { max-width: 780px; margin-top: 34px; }
.svcp-how p { font-size: 17px; }
.svcp-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 12px; }
.svcp-where { font-size: 14px; color: var(--ink-soft); }

.svcp-faq { margin-top: 34px; max-width: 780px; }
.svcp-qa {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  margin: 0 0 10px; padding: 0 18px;
}
.svcp-qa summary {
  cursor: pointer; padding: 14px 0; font-weight: 600; color: var(--blue-ink);
  list-style: none;
}
.svcp-qa summary::-webkit-details-marker { display: none; }
.svcp-qa summary::after { content: "+"; float: right; color: var(--blue); font-size: 20px; line-height: 1; }
.svcp-qa[open] summary::after { content: "–"; }
.svcp-qa p { margin: 0 0 16px; color: #33404d; }

.svcp-related { margin-top: 40px; }
.svcp-related-grid, .svc-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.svcp-related-card, .svc-detail-card {
  display: block; text-decoration: none; padding: 16px 18px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .15s, transform .15s;
}
.svcp-related-card:hover, .svc-detail-card:hover { border-color: var(--blue); transform: translateY(-2px); }
.svcp-related-card strong, .svc-detail-card strong {
  display: block; font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: .03em; font-size: 19px; color: var(--blue-ink); margin-bottom: 4px;
}
.svcp-related-card span, .svc-detail-card span { display: block; font-size: 14px; color: var(--ink-soft); }

.svc-detail-links { margin: 40px 0 8px; }
.svc-detail-lede { margin: 0 0 16px; color: var(--ink-soft); max-width: 720px; }

@media (max-width: 900px) {
  .svcp-main { grid-template-columns: 1fr; }
  .svcp-related-grid, .svc-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .svcp-lede { font-size: 17px; }
  .svcp-related-grid, .svc-detail-grid { grid-template-columns: 1fr; }
}