/* 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);
}
/* Seven nav items plus phone, language and the CTA only just clear 1320px, so
   the header runs on tight gaps — anything looser and the Book button hangs
   past the wrap and off the right edge of a 1366-wide laptop. */
.header-row { display: flex; align-items: center; gap: 14px; 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: 0; margin-left: 0; }
.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; 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: #c92f27; 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);
  text-decoration: none;
}
/* Items are links (brand guide / shop landing); pause the roll so they can be aimed at. */
.brand-marquee-item:hover { border-color: var(--accent); }
.brand-marquee:hover .brand-marquee-track,
.brand-marquee:focus-within .brand-marquee-track { animation-play-state: paused; }
.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); }

/* about page photo band — 3x3 grid, first shot spans 2x2 */
.about-gallery { margin-top: 42px; }
.about-gallery h2 {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .03em;
  font-size: 26px; margin: 0 0 16px; color: var(--blue-ink);
}
.photo-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.photo-band__item { margin: 0; display: flex; flex-direction: column; }
.photo-band__zoom { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; cursor: zoom-in; }
.photo-band__item img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  border-radius: var(--radius); box-shadow: var(--shadow);
}
/* Spanning items drop the fixed ratio and fill the rows their neighbours set. */
.photo-band__item.is-feature { grid-column: span 2; grid-row: span 2; }
.photo-band__item.is-tall { grid-row: span 2; }
.photo-band__item.is-wide { grid-column: span 2; }
.photo-band__item.is-feature img,
.photo-band__item.is-tall img,
.photo-band__item.is-wide img { aspect-ratio: auto; flex: 1 1 auto; min-height: 0; }

/* Lightbox for the photo band — native <dialog>, click anywhere to dismiss. */
.photo-lightbox {
  padding: 0; border: 0; background: transparent; overflow: visible;
  max-width: calc(100vw - 32px); max-height: calc(100vh - 32px);
}
.photo-lightbox::backdrop { background: rgba(11, 44, 79, .82); }
.photo-lightbox img {
  display: block; max-width: calc(100vw - 32px); max-height: calc(100vh - 48px);
  width: auto; height: auto; border-radius: var(--radius);
  box-shadow: 0 32px 80px rgba(0, 0, 0, .5); cursor: zoom-out;
}
.photo-lightbox .appt-modal-close { position: absolute; top: 10px; right: 10px; }

.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; }

/* Wheel warranty. Numbers here are transcribed from the manufacturers' own
   policies (see the comment in wheels.php) and every card carries the source
   link, so the block is deliberately plain — no badge that reads like a Taylor
   Tire promise. The card chip wraps to its own line rather than squeezing the
   "browse catalog" CTA: the English terms are long and a 3-up card is narrow. */
.wpartner-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; }
.wpartner-warr {
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--blue-ink); background: var(--blue-tint);
  border: 1px solid var(--line-blue); border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
.wheel-warranty { margin: 0 0 6px; }
.wwarr-intro { max-width: 68ch; margin: 0 0 18px; line-height: 1.6; color: var(--ink-soft); }
.wwarr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; max-width: 980px; }
.wwarr-card {
  padding: 18px 20px; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.wwarr-card h3 {
  margin: 0 0 12px; font-family: var(--font-display); font-size: 18px;
  text-transform: uppercase; letter-spacing: .03em; color: var(--blue-ink);
}
.wwarr-terms { margin: 0 0 12px; }
.wwarr-terms dt {
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft);
}
.wwarr-terms dd { margin: 2px 0 10px; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.wwarr-terms dd:last-child { margin-bottom: 0; }
.wwarr-note {
  margin: 0; padding-left: 12px; border-left: 3px solid var(--accent);
  font-size: 13.5px; line-height: 1.6; color: #33404d;
}
.wwarr-source { margin: 12px 0 0; }
.wwarr-source a { font-size: 13px; font-weight: 700; color: var(--blue); text-decoration: none; }
.wwarr-source a:hover { text-decoration: underline; }
.wwarr-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 980px; margin-top: 14px; }
.wwarr-col {
  padding: 18px 20px; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.wwarr-col-title {
  display: flex; align-items: center; gap: 8px; margin: 0 0 10px;
  font-family: var(--font-display); font-size: 17px; text-transform: uppercase; letter-spacing: .03em; color: var(--blue-ink);
}
.wwarr-col-title::before {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-size: 13px; font-weight: 700; line-height: 1;
}
.wwarr-yes::before { content: "✓"; background: #e6f4ea; color: #1e7a3c; }
.wwarr-no::before { content: "✕"; background: #fdecec; color: #b3261e; }
.wwarr-cols ul { margin: 0; padding-left: 18px; }
.wwarr-cols li { font-size: 14px; line-height: 1.55; margin-bottom: 6px; color: #33404d; }
.wwarr-cols li:last-child { margin-bottom: 0; }
.wwarr-claim {
  max-width: 980px; margin: 14px 0 0; padding: 22px 26px;
  background: var(--blue-tint); border: 1px solid var(--line-blue); border-radius: var(--radius);
}
.wwarr-claim .wwarr-col-title::before { content: none; }
.wwarr-claim ol { margin: 0; padding-left: 20px; }
.wwarr-claim li { line-height: 1.6; margin-bottom: 6px; color: #33404d; }
.wwarr-fineprint { margin: 14px 0 0; font-size: 13px; line-height: 1.55; color: var(--ink-soft); }
.wwarr-more { margin: 16px 0 0; }

/* /wheel-warranty — the full terms page. Reuses the .wwarr-* pieces above for
   the covered/excluded columns and the claim block; everything below is the
   per-brand chapter layout that only exists here. */
.wwp-lede { max-width: 70ch; margin: 12px 0 0; line-height: 1.65; color: #dbe9f6; }
.wwp-jump {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 30px;
  padding: 12px 18px; background: var(--blue-tint); border: 1px solid var(--line-blue); border-radius: var(--radius);
}
.wwp-jump-label { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.wwp-jump a { font-weight: 700; font-size: 14.5px; color: var(--blue); text-decoration: none; }
.wwp-jump a:hover { text-decoration: underline; }
/* Anchor targets: the sticky header would otherwise land on the section title. */
.wwp-brand { scroll-margin-top: 90px; margin: 0 0 42px; padding: 0 0 38px; border-bottom: 1px solid var(--line); }
.wwp-brand:last-of-type { border-bottom: 0; }
.wwp-brand-head { display: flex; align-items: flex-start; gap: 20px; margin: 0 0 18px; }
.wwp-brand-logo {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 150px; min-height: 68px; padding: 12px 16px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
}
.wwp-brand-logo img { max-width: 100%; max-height: 38px; width: auto; height: auto; object-fit: contain; }
.wwp-brand-head h2 {
  margin: 0 0 8px; font-family: var(--font-display); font-size: 27px;
  text-transform: uppercase; letter-spacing: .02em; color: var(--blue-ink);
}
.wwp-blurb { margin: 0; max-width: 72ch; line-height: 1.6; color: #33404d; }
.wwp-terms { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin: 0 0 16px; }
.wwp-term {
  display: flex; flex-direction: column; gap: 5px; padding: 14px 16px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
}
.wwp-term-label { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.wwp-term-value { font-size: 15px; line-height: 1.45; color: var(--blue-ink); }
.wwp-note { max-width: 90ch; margin: 0 0 18px; }
.wwp-cols { margin-top: 0; }
.wwp-claim { max-width: 90ch; margin: 16px 0 0; }
.wwp-claim p { margin: 0; line-height: 1.65; color: #33404d; }
.wwp-sub {
  margin: 0 0 8px; font-family: var(--font-display); font-size: 17px;
  text-transform: uppercase; letter-spacing: .03em; color: var(--blue-ink);
}
.wwp-section { margin: 34px 0 0; }
.wwp-lede-body { max-width: 74ch; margin: 0 0 16px; line-height: 1.65; color: #33404d; }
.wwp-care { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 980px; }
.wwp-care-col { padding: 18px 20px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.wwp-care-col ul { margin: 0; padding-left: 18px; }
.wwp-care-col li { font-size: 14px; line-height: 1.6; margin-bottom: 8px; color: #33404d; }
.wwp-care-col li:last-child { margin-bottom: 0; }
.wwp-ctas { margin: 16px 0 0; display: flex; gap: 12px; flex-wrap: wrap; }
/* The receipts, deliberately last on the page and deliberately plain. */
.wwp-sources { max-width: 980px; margin: 34px 0 0; padding-top: 20px; border-top: 1px dashed var(--line-blue); }
.wwp-sources h2 {
  margin: 0 0 10px; font-family: var(--font-display); font-size: 20px;
  text-transform: uppercase; letter-spacing: .03em; color: var(--blue-ink);
}
.wwp-sources p { max-width: 74ch; margin: 0 0 12px; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
.wwp-sources ul { margin: 0; padding-left: 18px; }
.wwp-sources li { font-size: 14px; line-height: 1.6; margin-bottom: 6px; color: #33404d; }
.wwp-sources a { color: var(--blue); font-weight: 700; text-decoration: none; }
.wwp-sources a:hover { text-decoration: underline; }
.wwp-verified { margin-top: 12px; font-size: 12.5px; color: var(--ink-soft); }

/* OEP catalogue (/wheel-catalog/oep) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* The search hides elements with the `hidden` attribute, but a class that
   sets `display: flex/grid` outranks the user-agent's `[hidden]` rule — so
   without this the index and the thumbnail wall stayed on screen while
   filtering. Scoped to this page rather than a global [hidden] override. */
.oep-index[hidden], .oep-grid[hidden], .oep-section[hidden],
.oep-product[hidden], .oep-tools [hidden] { display: none; }

.oep-intro { margin-bottom: 26px; }
.oep-tools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.oep-search { flex: 1 1 380px; max-width: 520px; }
.oep-search input {
  width: 100%; padding: 12px 16px; font-family: var(--font-body); font-size: 16px;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.oep-search input:focus { outline: 2px solid var(--blue); outline-offset: -1px; border-color: var(--blue); }
.oep-count { margin: 0; color: var(--ink-soft); font-size: 14.5px; }
.oep-index { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.oep-index a {
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
  color: var(--blue-ink); background: var(--porcelain);
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px;
}
.oep-index a:hover { background: var(--blue-tint); border-color: var(--line-blue); color: var(--blue); }

.oep-section { margin-bottom: 44px; scroll-margin-top: 90px; }
.oep-make {
  font-size: clamp(22px, 3vw, 28px); color: var(--blue-ink);
  margin: 0 0 16px; padding-bottom: 8px; border-bottom: 2px solid var(--accent);
}
.oep-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px; margin-bottom: 26px;
}
.oep-thumb {
  position: relative; display: block; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; background: var(--paper);
  box-shadow: var(--shadow); transition: transform .12s ease, border-color .12s ease;
}
.oep-thumb:hover { transform: translateY(-3px); border-color: var(--blue); }
.oep-thumb img { display: block; width: 100%; height: auto; }
.oep-thumb-n {
  position: absolute; right: 8px; bottom: 8px;
  font-family: var(--font-mono); font-size: 12px; line-height: 1;
  color: #fff; background: rgba(11, 44, 79, .78);
  padding: 4px 7px; border-radius: 4px;
}

/* minmax(0, 1fr) + min-width:0, not the default `auto`: a grid item refuses to
   shrink below its content's intrinsic width, so the spec table's min-width
   propagated up and pushed the card 196px past a 390px phone column — taking
   the whole page sideways with it. The table-wrap's overflow-x never engaged
   because the wrap itself was being stretched. */
.oep-products { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.oep-product {
  min-width: 0;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow);
}
.oep-product-head { margin-bottom: 12px; }
.oep-product h3 { margin: 0 0 6px; font-size: 20px; display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.oep-model { font-family: var(--font-display); letter-spacing: .04em; text-transform: uppercase; color: var(--blue-ink); }
.oep-finish { font-weight: 500; font-size: 16px; color: var(--ink-soft); }
.oep-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 14px; align-items: baseline; font-size: 14.5px; }
.oep-tier {
  font-family: var(--font-display); font-size: 13px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--blue); background: var(--blue-tint);
  border-radius: 4px; padding: 3px 8px;
}
.oep-sizes { color: var(--ink-soft); }
.oep-openpage { color: var(--blue); text-decoration: none; font-weight: 600; }
.oep-openpage:hover { text-decoration: underline; }

/* The spec table is the reason this page renders HTML instead of only page
   images: at 10pt baked into a 1456pt-wide spread it is unreadable on a
   phone. It scrolls inside its own box so the page body never does. */
.oep-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.oep-table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 520px; }
.oep-table th, .oep-table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.oep-table th {
  font-family: var(--font-display); font-size: 13px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); background: var(--porcelain);
  border-bottom: 1px solid var(--line-blue);
}
.oep-table tbody tr:last-child td { border-bottom: 0; }
.oep-table tbody tr:hover { background: var(--blue-tint); }
.oep-sku { font-family: var(--font-mono); font-size: 13px; color: var(--blue-ink); }
.oep-noresults, .oep-empty { color: var(--ink-soft); font-size: 16px; padding: 20px 0; }
.oep-flow { margin-top: 34px; }

.oep-lightbox {
  border: 0; padding: 0; background: transparent;
  max-width: 96vw; max-height: 96vh; width: 96vw; overflow: visible;
}
.oep-lightbox::backdrop { background: rgba(11, 44, 79, .82); }
.oep-lb-figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.oep-lb-figure img {
  display: block; max-width: 96vw; max-height: 86vh; width: auto; height: auto;
  border-radius: 6px; background: #fff; cursor: zoom-in;
}
.oep-lightbox.is-zoomed { overflow: auto; }
.oep-lightbox.is-zoomed .oep-lb-figure img { max-width: none; max-height: none; cursor: zoom-out; }
.oep-lb-figure figcaption {
  font-family: var(--font-mono); font-size: 13px; color: #fff; opacity: .85;
}
.oep-lb-close, .oep-lb-nav {
  position: fixed; z-index: 2; cursor: pointer; color: #fff;
  background: rgba(11, 44, 79, .6); border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 50%; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.oep-lb-close { top: 16px; right: 16px; width: 42px; height: 42px; font-size: 26px; }
.oep-lb-nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 32px; }
.oep-lb-prev { left: 12px; }
.oep-lb-next { right: 12px; }
.oep-lb-close:hover, .oep-lb-nav:hover:not(:disabled) { background: var(--blue); }
.oep-lb-nav:disabled { opacity: .3; cursor: default; }

/* Phone: keep the table a table, and make it fit.
   The spec block is pulled out to the card's edges so it lines up exactly with
   the thumbnail grid above it, then the type and padding tighten until six
   columns fit that width — no side-scrolling, no stray horizontal gutter.
   Only the headers wrap ("BOLT / PATTERN"); the values stay on one line so a
   part number never breaks mid-string. */
@media (max-width: 640px) {
  .oep-grid { gap: 10px; }
  .oep-product { padding: 16px 14px; }
  .oep-lb-nav { width: 40px; height: 40px; font-size: 26px; }

  .oep-table-wrap { margin: 0 -14px; }
  .oep-table { min-width: 0; width: 100%; font-size: 11.5px; table-layout: auto; }
  .oep-table th, .oep-table td { padding: 7px 3px; }
  .oep-table th { font-size: 10.5px; letter-spacing: .02em; white-space: normal; }
  .oep-table th:first-child, .oep-table td:first-child { padding-left: 12px; }
  .oep-table th:last-child, .oep-table td:last-child { padding-right: 12px; }
  /* 10.5px, not 11: the widest part numbers ("TT01S 17080156139SB", 19 chars)
     still have to clear six columns inside 334px. */
  .oep-sku { font-size: 10.5px; }
}

@media (max-width: 420px) {
  .oep-grid { grid-template-columns: repeat(2, 1fr); }
}

/* 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: 1 1 auto; min-width: 0;
}
.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-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; }
.filter-group[hidden] { display: none; }
.filter-sidebar .filter-group + .filter-group {
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line);
}
.runflat-filter-option {
  display: grid; grid-template-columns: 21px minmax(0, 1fr) auto;
  align-items: start; gap: 8px; padding: 3px 2px;
  color: var(--blue-ink); cursor: pointer;
}
.runflat-filter-option:hover { color: var(--blue); }
.runflat-filter-option input {
  width: 19px; height: 19px; margin: 1px 0 0; accent-color: var(--blue);
}
.runflat-filter-text { display: grid; gap: 3px; min-width: 0; }
.runflat-filter-text strong { font-size: 15px; line-height: 1.2; }
.runflat-filter-text small {
  color: var(--ink-soft); font-size: 12px; font-weight: 400; line-height: 1.25;
}
.runflat-filter-count { color: var(--ink-soft); font-size: 13px; line-height: 1.4; }
.runflat-filter-option:has(input:checked) .runflat-filter-text strong { color: var(--blue); }
.runflat-filter-option.is-disabled { cursor: not-allowed; opacity: .45; }

/* No .brand-switch rail any more: a brand landing's left column is the filter
   sidebar or nothing. The other brands are chips at the foot (.landing-links). */

/* Finder band on a landing page: the size question comes before the grid. */
.landing-finder { padding: 22px 0 4px; background: var(--blue-tint); border-bottom: 1px solid var(--line-blue); }
.landing-finder-title {
  margin: 0 0 14px; font-family: var(--font-display); font-size: 22px;
  text-transform: uppercase; color: var(--blue-ink);
}

.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: var(--svc-wheel-fill, #f8fbff); stroke: var(--svc-wheel-color, #1680c5); stroke-width: 4; }
.svc-v-rim-alone { fill: #f8fbff; stroke: #1680c5; stroke-width: 7; }
.svc-v-spokes { fill: none; stroke: var(--svc-wheel-spokes, #79a7ce); stroke-width: 3; stroke-linecap: round; }
.svc-v-hub { fill: var(--svc-wheel-hub, var(--accent)); stroke: var(--svc-wheel-hub-edge, #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-car-direction {
  fill: #315474; font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .08em;
}
.svc-v-car-direction-arrow { fill: none; stroke: #315474; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.svc-v-rotation-wheel--front {
  --svc-wheel-fill: #fff2f2; --svc-wheel-color: #d33b3b; --svc-wheel-spokes: #ef8686;
  --svc-wheel-hub: #e14a4a; --svc-wheel-hub-edge: #9e2525;
}
.svc-v-rotation-wheel--rear {
  --svc-wheel-fill: #eef7ff; --svc-wheel-color: #1678bf; --svc-wheel-spokes: #72add7;
  --svc-wheel-hub: #1680c5; --svc-wheel-hub-edge: #0c578c;
}
.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,
.svc-v-rotation-wheel { 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; }
.svc-action-visual.is-active .svc-v-rotation-wheel--front.svc-v-rotation-wheel--left { animation: svc-rotation-front-left 4s ease-in-out infinite; }
.svc-action-visual.is-active .svc-v-rotation-wheel--front.svc-v-rotation-wheel--right { animation: svc-rotation-front-right 4s ease-in-out infinite; }
.svc-action-visual.is-active .svc-v-rotation-wheel--rear.svc-v-rotation-wheel--left { animation: svc-rotation-rear-left 4s ease-in-out infinite; }
.svc-action-visual.is-active .svc-v-rotation-wheel--rear.svc-v-rotation-wheel--right { animation: svc-rotation-rear-right 4s ease-in-out infinite; }
@keyframes svc-rotation-front-left {
  0%, 12%, 100% { transform: translate(0, 0); }
  31% { transform: translate(-17px, 26px); }
  47%, 64% { transform: translate(0, 52px); }
  82% { transform: translate(-17px, 26px); }
}
@keyframes svc-rotation-front-right {
  0%, 12%, 100% { transform: translate(0, 0); }
  31% { transform: translate(17px, 26px); }
  47%, 64% { transform: translate(0, 52px); }
  82% { transform: translate(17px, 26px); }
}
@keyframes svc-rotation-rear-left {
  0%, 12%, 100% { transform: translate(0, 0); }
  31% { transform: translate(17px, -26px); }
  47%, 64% { transform: translate(0, -52px); }
  82% { transform: translate(17px, -26px); }
}
@keyframes svc-rotation-rear-right {
  0%, 12%, 100% { transform: translate(0, 0); }
  31% { transform: translate(-17px, -26px); }
  47%, 64% { transform: translate(0, -52px); }
  82% { transform: translate(-17px, -26px); }
}
@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 { display: block; width: 148px; height: auto; }
.footer-legal {
  border-top: 1px solid #1b4066; padding-top: 16px; padding-bottom: 22px;
  font-size: 13px; color: #9fb6cf;
}

/* ---------- 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 ---------- */
/* The header used to drop straight to the burger at 1320px, which hid the whole
   nav from anyone on a 1280 laptop or a half-screen window. It now compresses in
   three steps first — measured against the real header, which needs 1366px at
   full size, 1152 at step one, 984 at step two and 904 at step three — so every
   link stays on screen down to ~940px. */
@media (max-width: 1320px) {
  .header-row { gap: 12px; }
  .site-nav a { font-size: 15.5px; }
  body[data-lang="zh"] .site-nav a { font-size: 15px; }
  /* Number collapses to the handset icon; it is still a tel: link. */
  .header-utility .header-phone span { display: none; }
  .header-phone { padding: 8px 9px; }
  .btn-appt { font-size: 15px; padding: 9px 12px; }
}
@media (max-width: 1180px) {
  .header-row { gap: 10px; }
  .logo-link img { height: 26px; }
  .site-nav a { font-size: 14px; letter-spacing: .02em; padding: 7px 5px; }
  body[data-lang="zh"] .site-nav a { font-size: 14px; }
  .nav-hot-badge { min-width: 23px; height: 13px; padding: 0 4px; font-size: 8px; top: -5px; }
  .header-utility { gap: 6px; padding-right: 9px; }
  .btn-appt { font-size: 14px; padding: 8px 10px; gap: 6px; }
}
/* Last stop before the burger: the CTA gives up its long label so the links
   don't have to. */
@media (max-width: 1010px) {
  .btn-appt-label { display: none; }
  .btn-appt-label-short { display: inline; }
}
@media (max-width: 940px) {
  .site-nav { display: none; }
  .nav-burger { display: block; }
  /* Room comes back once the links are in the burger, so undo the squeeze. */
  .logo-link img { height: 30px; }
  .btn-appt { font-size: 15px; padding: 9px 12px; }
  .btn-appt-label { display: inline; }
  .btn-appt-label-short { display: none; }
}
@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%;
  }
  .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; }
  .wwarr-cols { grid-template-columns: 1fr; }
  .wwarr-claim { padding: 18px 20px; }
  .wwp-care { grid-template-columns: 1fr; }
  .wwp-brand-head { flex-direction: column; gap: 14px; }
  .wwp-brand-logo { width: 100%; }
  .about-grid { grid-template-columns: 1fr; }
  .about-grid .about-photo { order: -1; }
  .photo-band { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .photo-band__item.is-feature { grid-column: span 2; grid-row: auto; }
  .photo-band__item.is-tall { grid-row: auto; }
  .photo-band__item.is-wide { grid-column: span 2; }
  .photo-band__item.is-feature img,
  .photo-band__item.is-tall img,
  .photo-band__item.is-wide img { aspect-ratio: 4 / 3; flex: 0 0 auto; }
  .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)); }
  .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-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; }

/* -- TPMS page extras -----------------------------------------------------
   The signals section speaks the dashboard's own language: each symptom row
   carries a little instrument-cluster chip with the ISO TPMS telltale glowing
   amber in the state the row describes — solid, blinking, or pulsing. The
   blink IS the diagnosis ("flashes 60–90s = sensor fault"), so the animation
   encodes information; it is stilled under prefers-reduced-motion. */
.svcp-signals { margin: 26px 0 30px; }
.svcp-signals h2 {
  margin: 0 0 14px; font-family: var(--font-display); font-size: 24px;
  text-transform: uppercase; letter-spacing: .02em; color: var(--blue-ink);
}
.svcp-signal-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
.svcp-signal-list li {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
}
.svcp-signal-list strong { display: block; color: var(--blue-ink); margin-bottom: 3px; }
.svcp-signal-list li > div > span { display: block; font-size: 14.5px; line-height: 1.5; color: #33404d; }
.svcp-tpms-chip {
  flex: 0 0 auto; display: grid; place-items: center; width: 46px; height: 40px; margin-top: 2px;
  background: #161b22; border-radius: 9px; border: 1px solid #2c333d;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.6);
  color: #ffb000;
}
.svcp-tpms-chip svg { width: 24px; height: 24px; filter: drop-shadow(0 0 3px rgba(255, 176, 0, .55)); }
.svcp-tpms-chip.is-blink svg { animation: tpms-blink 1s steps(1) infinite; }
.svcp-tpms-chip.is-pulse svg { animation: tpms-pulse 2.6s ease-in-out infinite; }
@keyframes tpms-blink { 0%, 54% { opacity: 1; } 55%, 100% { opacity: .12; } }
@keyframes tpms-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) {
  .svcp-tpms-chip.is-blink svg, .svcp-tpms-chip.is-pulse svg { animation: none; }
}

/* Specialist callout — earns the claim with the actual failure modes we test,
   without promising a repair before the vehicle has been diagnosed. */
.svcp-specialist {
  max-width: 900px; margin: 0 0 30px; padding: 20px 24px 22px;
  background: var(--blue-tint); border: 1px solid var(--line-blue);
  border-left: 5px solid var(--blue); border-radius: var(--radius); box-shadow: var(--shadow);
}
.svcp-specialist-kicker {
  display: block; margin-bottom: 5px; color: var(--blue); font-size: 12px;
  font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
}
.svcp-specialist h2 {
  margin: 0 0 8px; color: var(--blue-ink); font-family: var(--font-display);
  font-size: 26px; letter-spacing: .02em; text-transform: uppercase;
}
.svcp-specialist p { margin: 0; color: #33404d; font-size: 16px; line-height: 1.62; }
.svcp-specialist strong { color: var(--blue-ink); }

/* Sensor product cards — on this page the price IS a physical product, so the
   rate rows give way to the two sensors themselves, photographed like parts. */
.svcp-product-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.svcp-product-card {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.svcp-product-card img { display: block; width: 100%; max-width: 210px; height: auto; margin: 6px auto 0; }
.svcp-product-info { display: flex; flex-direction: column; gap: 3px; padding: 4px 14px 14px; border-top: 1px solid var(--line); }
.svcp-product-info > strong { font-size: 14.5px; line-height: 1.3; color: var(--blue-ink); padding-top: 9px; }
.svcp-product-price { font-family: var(--font-display); font-size: 30px; line-height: 1; color: var(--blue); }
.svcp-product-price small { font-family: var(--font-body, inherit); font-size: 12px; color: var(--ink-soft); margin-left: 5px; }
.svcp-product-note { font-size: 13px; line-height: 1.45; color: var(--ink-soft); }

.svcp-related { margin-top: 40px; }
.svcp-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.svcp-related-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 { border-color: var(--blue); transform: translateY(-2px); }
.svcp-related-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 { display: block; font-size: 14px; color: var(--ink-soft); }

.svc-detail-links {
  display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 18px; align-items: center;
  margin: 26px 0 8px; padding: 17px 18px; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.svc-detail-links h2 { margin-bottom: 4px; }
.svc-detail-head p { margin: 0; color: var(--ink-soft); font-size: 13.5px; line-height: 1.4; }
.svc-detail-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.svc-detail-quick-link {
  min-width: 0; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 11px; color: var(--blue-ink); background: var(--porcelain); border: 1px solid var(--line);
  border-radius: 7px; text-decoration: none; transition: border-color .15s, background .15s;
}
.svc-detail-quick-link:hover { border-color: var(--blue); background: var(--blue-tint); }
.svc-detail-quick-link > span { min-width: 0; }
.svc-detail-quick-link strong {
  display: block; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-display);
  font-size: 16px; line-height: 1.05; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap;
}
.svc-detail-quick-link small { display: block; margin-top: 3px; color: var(--blue); font-size: 11px; font-weight: 700; white-space: nowrap; }
.svc-detail-quick-link b { flex: none; color: var(--blue); font-size: 17px; }
.svc-detail-quick-link.is-walkin { background: var(--blue-tint); border-color: var(--line-blue); box-shadow: inset 3px 0 0 var(--blue); }

@media (max-width: 900px) {
  .svcp-main { grid-template-columns: 1fr; }
  .svcp-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-detail-links { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .svcp-lede { font-size: 17px; }
  .svcp-related-grid, .svc-detail-quick { grid-template-columns: 1fr; }
  .svc-detail-links { padding: 16px; }
  .svcp-signal-list { grid-template-columns: 1fr; }
  .svcp-product-cards { grid-template-columns: 1fr; }
  .svcp-specialist { padding: 18px; }
}

/* ---------- Tire brand guide (/tire-brands) + compact home/hub entrances ---------- */
.brand-guide-intro { max-width: 850px; margin: 14px 0 0; color: #dbe9f6; font-size: 17px; line-height: 1.6; }
.brand-guide { max-width: 1080px; }
/* auto-fit, not a fixed 4: the lead-brand row is five wide and the "every other
   brand" index below it is ten, so a hard column count stranded the remainder on
   a half-empty row. */
.brand-guide-jump { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 12px; margin-bottom: 18px; }
.brand-guide-jump-card {
  min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 112px; padding: 16px; text-decoration: none; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); transition: transform .15s, border-color .15s;
}
.brand-guide-jump-card:hover { transform: translateY(-2px); border-color: var(--blue); }
.brand-guide-jump-card img { display: block; max-width: 150px; max-height: 44px; width: auto; height: auto; object-fit: contain; }
.brand-guide-jump-card span { color: var(--blue); font-size: 13px; font-weight: 700; }
.brand-guide-scope { margin: 0 0 26px; padding: 12px 15px; border-left: 4px solid var(--blue); background: var(--blue-tint); color: #33404d; font-size: 14px; }
.brand-guide-brand {
  scroll-margin-top: 96px; margin: 0 0 26px; padding: 28px; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.brand-guide-brand-head { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: center; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.brand-guide-brand-logo { min-height: 104px; display: grid; place-items: center; padding: 20px; border-radius: 12px; background: #fff; border: 1px solid var(--line); }
.brand-guide-brand-logo img { display: block; max-width: 190px; max-height: 62px; width: auto; height: auto; object-fit: contain; }
.brand-guide-eyebrow { margin: 0 0 5px; font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--blue); }
.brand-guide-brand-head h2, .brand-guide-bottom h2 {
  margin: 0 0 8px; font-family: var(--font-display); font-size: clamp(28px, 4vw, 40px); line-height: 1; text-transform: uppercase; color: var(--blue-ink);
}
.brand-guide-brand-head p:last-child { margin: 0; color: #33404d; line-height: 1.6; }
.brand-guide-columns { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); gap: 24px; margin-top: 24px; align-items: start; }
.brand-guide-columns h3 { margin: 0 0 12px; font-family: var(--font-display); font-size: 20px; text-transform: uppercase; color: var(--blue-ink); }
.brand-family-list, .brand-related ul { list-style: none; margin: 0; padding: 0; }
.brand-family-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.brand-family-list li, .brand-related li { padding: 11px 13px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.brand-family-list strong, .brand-family-list span, .brand-related strong, .brand-related span { display: block; }
.brand-family-list strong, .brand-related strong { color: var(--blue-ink); }
.brand-family-list span, .brand-related span { margin-top: 3px; color: var(--ink-soft); font-size: 13.5px; line-height: 1.4; }
.brand-related { padding: 18px; border-radius: 12px; background: var(--blue-tint); border: 1px solid var(--line-blue); }
.brand-related-note { margin: 0; color: #33404d; font-size: 13px; line-height: 1.5; }
.brand-official { color: var(--ink-soft); font-size: 13px; }
/* The "every other brand" index. Same card furniture as the lead-brand jump row,
   on the page's tint so it reads as a separate shelf rather than more of the
   comparison above it. */
.brand-guide-more { margin-top: 32px; padding: 26px 28px 20px; background: var(--blue-tint); border: 1px solid var(--line-blue); border-radius: var(--radius); }
.brand-guide-more h2 { margin: 0 0 8px; font-family: var(--font-display); font-size: clamp(22px, 3vw, 30px); line-height: 1.05; text-transform: uppercase; color: var(--blue-ink); }
.brand-guide-more > p { margin: 0 0 18px; max-width: 760px; color: #33404d; line-height: 1.6; }
.brand-guide-more .brand-guide-jump { margin-bottom: 0; }

.brand-guide-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 28px; margin-top: 32px; padding: 28px;
  color: #fff; background: var(--blue-ink); border-radius: var(--radius); box-shadow: var(--shadow);
}
.brand-guide-bottom h2 { color: #fff; }
.brand-guide-bottom p:last-child { max-width: 760px; margin: 0; color: #dbe9f6; line-height: 1.55; }
/* Everything on this dark block needs inverting: the default blue eyebrow and a
   blue button both vanish into the navy. Yellow on the CTA matches the warranty
   button on the hub, so "the yellow one is the thing to press" holds site-wide. */
.brand-guide-bottom .brand-guide-eyebrow { color: #fff; }
.brand-guide-bottom .btn-primary { background: var(--accent); color: var(--blue-ink); }
.brand-guide-bottom .btn-primary:hover { background: #ffdf40; }
/* The button is a flex item next to a paragraph, so it shrank and its label
   wrapped — "SHOP MICHELIN TIRES" was 9px short of fitting. The prose is what
   should reflow, not the CTA. text-align covers the narrow-screen wrap too,
   where a left-aligned second line looked like a mistake. */
.brand-guide-bottom .btn, .tires-brand-guide-cta .btn { flex: none; text-align: center; }

.home-brand-guide { background: var(--blue-tint); border-top: 1px solid var(--line-blue); border-bottom: 1px solid var(--line-blue); }
.home-brand-guide-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 18px; }
.home-brand-guide-head .section-title { margin-bottom: 7px; }
.home-brand-guide-head p:last-child { margin: 0; color: var(--ink-soft); }
.home-brand-guide-all { flex: none; color: var(--blue); font-family: var(--font-display); font-weight: 700; text-transform: uppercase; text-decoration: none; }
.home-brand-guide-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.home-brand-guide-card {
  min-width: 0; min-height: 108px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 16px; text-decoration: none; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  transition: transform .15s, border-color .15s;
}
.home-brand-guide-card:hover { transform: translateY(-2px); border-color: var(--blue); }
.home-brand-guide-card img { display: block; max-width: 150px; max-height: 42px; width: auto; height: auto; object-fit: contain; }
.home-brand-guide-card span { color: var(--blue); font-size: 13.5px; font-weight: 700; text-align: center; }
/* About-page reuse of the block: boxed inside .wrap instead of a full-bleed band. */
.about-brand-guide { margin: 36px 0 8px; padding: 24px 22px; border: 1px solid var(--line-blue); border-radius: var(--radius); }
.about-brand-guide h2 { margin: 0 0 7px; font-family: var(--font-display); font-size: 26px; text-transform: uppercase; color: var(--blue-ink); }

/* Related group brands as marks rather than text links — on a page comparing
   four tire makers, the logo is what a reader recognises. Shared by the hub
   aside (narrow column) and the guide page (--wide, full-width row). */
.brand-related-cards { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.brand-related-cards--wide { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); max-width: 860px; }
.brand-related-card {
  display: block; padding: 12px 14px; text-decoration: none;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .15s, transform .15s;
}
a.brand-related-card:hover { border-color: var(--blue); transform: translateY(-1px); }
.brand-related-logo { display: flex; align-items: center; height: 28px; margin-bottom: 8px; }
.brand-related-logo img { max-width: 130px; max-height: 26px; width: auto; height: auto; object-fit: contain; }
.brand-related-wordmark {
  display: flex; align-items: center; height: 28px; margin-bottom: 8px;
  font-family: var(--font-display); font-size: 17px; text-transform: uppercase; color: var(--blue-ink);
}
.brand-related-desc { display: block; font-size: 13px; line-height: 1.45; color: var(--ink-soft); }

/* Card foot on the SAME grid as the card body, so the figures land under the
   product families and the button under the related brands. The gap between
   them is then the card's own gutter, not an accidental hole. */
.brand-card-foot {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); gap: 24px;
  align-items: center; margin: 24px 0 0; padding: 20px 0 0; border-top: 1px solid var(--line);
}
.brand-warranty-peek-title {
  margin: 0 0 9px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft);
}
.brand-warranty-figures { display: flex; flex-wrap: wrap; gap: 12px 30px; margin: 0; min-width: 0; }
.brand-warranty-figure { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* Sized against the two-line figure beside it (value + label), not against the
   label text, so the icon reads as the block's marker rather than a bullet. */
.brand-warranty-figure .wicon { flex: none; width: 34px; height: 34px; color: var(--blue); }
.brand-warranty-figure b {
  display: block; font-family: var(--font-display); font-size: 19px; line-height: 1.2; color: var(--blue-ink);
}
.brand-warranty-figure i {
  display: block; margin-top: 1px; font-style: normal;
  font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft);
}
/* Button over reference, not beside it: the outbound link is a footnote to the
   action, so it sits under it and smaller rather than competing on the line. */
/* Column two: the button starts on the same left edge as the related-brands
   box above it, so the two form one vertical line down the card. */
.brand-card-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; margin: 0; }
.btn-warranty { background: var(--accent); color: var(--blue-ink); font-size: 17px; padding: 11px 22px; }
.btn-warranty:hover { background: #ffdf40; }
.brand-card-actions .brand-official { font-size: 12px; }
@media (max-width: 900px) {
  .brand-card-foot { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 700px) {
  .brand-card-actions { align-items: stretch; }
  .btn-warranty { width: 100%; }
  .brand-card-actions .brand-official { text-align: center; }
}

/* ---------- Per-brand guide page (/tire-brands/<slug>) ---------- */
.bgd-head { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 26px; align-items: center; margin-top: 14px; }
/* The eyebrow class was designed for light backgrounds; the page-head is brand blue. */
.bgd-head .brand-guide-eyebrow { color: var(--accent); }
.bgd-head .brand-guide-intro { color: #dbe9f6; }
.bgd-head-logo {
  display: flex; align-items: center; justify-content: center; min-height: 110px; padding: 18px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.bgd-head-logo img { max-width: 200px; max-height: 66px; width: auto; height: auto; object-fit: contain; }
.bgd-head-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; }
.bgd-section { margin: 0 0 34px; }
.bgd-section > h2 { font-family: var(--font-display); font-size: 26px; text-transform: uppercase; color: var(--blue-ink); margin: 0 0 14px; }
.bgd-about-grid { display: grid; gap: 26px; align-items: start; }
.bgd-about-grid.has-tire { grid-template-columns: minmax(0, 1fr) 240px; }
.bgd-prose p { line-height: 1.6; margin: 0 0 12px; }
.bgd-tire-shot { margin: 0; text-align: center; }
.bgd-tire-shot img {
  width: 100%; max-width: 220px; height: auto; aspect-ratio: 3 / 4; object-fit: contain;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px;
}
.bgd-tire-shot figcaption { margin-top: 8px; font-size: 12.5px; line-height: 1.4; color: var(--ink-soft); }
.bgd-family-list { max-width: 860px; }
/* Only the summary rides the tint. The tables, lists and FAQ below run on white
   with real space between them — one continuous tinted block read as a wall. */
.bgd-warranty-summary { padding: 22px; border: 1px solid var(--line-blue); border-radius: var(--radius); background: var(--blue-tint); }
.bgd-warranty-intro { max-width: 860px; line-height: 1.6; margin: 0 0 18px; }
.bgd-sub { font-family: var(--font-display); font-size: 19px; text-transform: uppercase; color: var(--blue-ink); margin: 38px 0 12px; }
.wicon { flex: none; vertical-align: -4px; }
.wicon-lg { width: 26px; height: 26px; margin-right: 8px; color: var(--blue); }
.bgd-glance { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 0 0 18px; }
.bgd-glance-card {
  display: flex; flex-direction: column; gap: 4px; padding: 14px 16px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
}
.bgd-glance-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft);
}
.bgd-glance-label .wicon { width: 22px; height: 22px; color: var(--blue); }
.bgd-glance-value { font-family: var(--font-display); font-size: 21px; color: var(--blue-ink); }
.bgd-glance-note { font-size: 13px; color: var(--ink-soft); }
.bgd-programs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.bgd-program { padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.bgd-program h3 { display: flex; align-items: flex-start; margin: 0 0 8px; font-size: 15.5px; line-height: 1.35; color: var(--blue-ink); }
.bgd-program p { margin: 0; font-size: 14px; line-height: 1.55; color: #33404d; }
/* Plain-language callout: used above the mileage table and the claim steps to
   clear up the two things customers reliably get wrong about tire warranties. */
.bgd-callout {
  max-width: 900px; margin: 0 0 12px; padding: 12px 16px; font-size: 14px; line-height: 1.6; color: #33404d;
  background: #fff; border-left: 4px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0;
}
.bgd-table-scroll { overflow-x: auto; }
.bgd-mileage { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.bgd-mileage th, .bgd-mileage td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: left; font-size: 14px; vertical-align: top; }
.bgd-mileage th { background: var(--blue-ink); color: #fff; font-family: var(--font-display); text-transform: uppercase; font-size: 13.5px; letter-spacing: .03em; }
.bgd-mileage tr:last-child td { border-bottom: 0; }
.bgd-km { white-space: nowrap; font-weight: 700; color: var(--blue-ink); }
.bgd-fineprint { margin: 10px 0 0; padding-left: 18px; }
.bgd-fineprint li { font-size: 13px; color: var(--ink-soft); line-height: 1.55; margin-bottom: 4px; }
.bgd-excluded { columns: 2; column-gap: 28px; max-width: 900px; margin: 0; padding-left: 18px; }
.bgd-excluded li { break-inside: avoid; font-size: 14px; line-height: 1.55; margin-bottom: 6px; }
.bgd-claim ol { max-width: 860px; margin: 0; padding-left: 20px; }
.bgd-claim li { line-height: 1.6; margin-bottom: 6px; }
.bgd-claim-cta { margin: 14px 0 0; }
.bgd-faq { max-width: 860px; }
.bgd-faq-item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 0 16px; margin-bottom: 8px; }
.bgd-faq-item summary { cursor: pointer; padding: 12px 0; font-weight: 700; color: var(--blue-ink); }
.bgd-faq-item p { margin: 0 0 12px; line-height: 1.6; color: #33404d; }
.bgd-sources { margin-top: 22px; padding-top: 14px; border-top: 1px dashed var(--line-blue); }
.bgd-sources p { font-size: 13px; color: var(--ink-soft); max-width: 860px; }
.bgd-sources ul { margin: 6px 0 0; padding-left: 18px; }
.bgd-sources li { font-size: 13px; margin-bottom: 3px; }
@media (max-width: 720px) {
  .bgd-head { grid-template-columns: 1fr; gap: 16px; }
  .bgd-head-logo { min-height: 90px; }
  .bgd-excluded { columns: 1; }
  .bgd-head-ctas .btn { width: 100%; text-align: center; }
  .bgd-about-grid.has-tire { grid-template-columns: 1fr; }
  .bgd-warranty-summary { padding: 16px; }
}
/* This link lives inside .page-head, which is a blue gradient — a blue link on
   it is invisible, the same trap as the CTA button on the dark closing block. */
.landing-guide-link a { color: var(--accent); font-weight: 700; text-decoration: none; }
.landing-guide-link a:hover { text-decoration: underline; }
.tires-brand-guide-cta {
  display: flex; justify-content: space-between; align-items: center; gap: 24px; margin: 30px 0 20px; padding: 20px 22px;
  border: 1px solid var(--line-blue); border-radius: var(--radius); background: var(--blue-tint);
}
.tires-brand-guide-cta h2 { margin: 0 0 5px; font-family: var(--font-display); font-size: 24px; text-transform: uppercase; color: var(--blue-ink); }
.tires-brand-guide-cta p:last-child { margin: 0; color: #33404d; }

@media (max-width: 900px) {
  .brand-guide-jump, .home-brand-guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The index carries ten logos, so two columns turns it into a long scroll —
     it keeps three where the lead-brand row drops to two. */
  .brand-guide-more .brand-guide-jump { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brand-guide-more { padding: 22px 18px 18px; }
  .brand-guide-brand-head { grid-template-columns: 170px minmax(0, 1fr); }
  .brand-guide-columns { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .brand-guide-intro { font-size: 15px; }
  .brand-guide-jump, .home-brand-guide-grid, .brand-family-list { grid-template-columns: 1fr; }
  .brand-guide-more .brand-guide-jump { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-guide-jump-card, .home-brand-guide-card { min-height: 92px; }
  .brand-guide-brand { padding: 20px 16px; }
  .brand-guide-brand-head { grid-template-columns: 1fr; gap: 18px; }
  .brand-guide-brand-logo { min-height: 88px; }
  .brand-guide-bottom, .home-brand-guide-head, .tires-brand-guide-cta { align-items: stretch; flex-direction: column; }
  .brand-guide-bottom .btn, .tires-brand-guide-cta .btn { width: 100%; text-align: center; }
}

/* /winter-tires — long-form seasonal page; reuses the service-page furniture. */
.wt-prose { max-width: 780px; }
.svcp-rates.wt-prose { margin: 6px 0 18px; }

/* /tires/vehicle/<make>/<model>/<year> — OE fitment table (vehicle.php). */
.vehicle-oe { margin: 0 0 28px; }
.vehicle-oe h2 {
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 20px;
  margin: 0 0 12px;
}
.vehicle-oe-table {
  border-collapse: collapse;
  width: 100%;
  max-width: 780px;
  font-size: 14.5px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .12);
}
.vehicle-oe-table th, .vehicle-oe-table td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
  vertical-align: top;
}
.vehicle-oe-table th {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-muted, #55606b);
  background: rgba(0, 0, 0, .03);
}
.vehicle-oe-table td[rowspan] { font-weight: 600; }
.vehicle-oe-staggered {
  display: block;
  color: var(--ink-muted, #55606b);
  font-size: 12px;
}
.vehicle-oe-note {
  max-width: 780px;
  font-size: 13px;
  color: var(--ink-muted, #55606b);
  margin: 10px 0 0;
}

/* /guides — the resource centre (guide.php). Signature element = the quick
   answer card: mono eyebrow + the answer set large in the display face over a
   blue-tint panel with the site's yellow as a 4px chalk rule. Everything else
   stays quiet: standard prose, details-FAQ, landing-links chips. */
.guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}
.guide-group { margin: 0 0 42px; }
.guide-group > h2 {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: clamp(25px, 3vw, 34px);
  line-height: 1.1;
  color: var(--blue-ink);
}
.guide-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 22px 18px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow);
}
.guide-card:hover h2, .guide-card:hover h3,
.guide-card:focus-visible h2, .guide-card:focus-visible h3 { color: var(--blue); }
.guide-card-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.guide-card h2, .guide-card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.15;
  margin: 0;
}
.guide-card p { margin: 0; font-size: 14.5px; color: var(--ink-soft); flex: 1; }
.guide-card-more { font-weight: 700; font-size: 14px; color: var(--blue); }

.guide-article { max-width: 780px; }
.guide-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 18px;
  margin: 0 0 18px;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
}
.guide-meta a { color: var(--blue); font-weight: 700; }
.guide-quick {
  background: var(--blue-tint);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 18px 22px;
  margin: 0 0 30px;
}
.guide-quick-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue-deep);
  margin-bottom: 8px;
}
.guide-quick p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 23px;
  line-height: 1.3;
  color: var(--blue-ink);
}
body[data-lang="zh"] .guide-quick p { font-size: 20px; line-height: 1.45; }

.guide-visual {
  margin: 0 0 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--porcelain);
  box-shadow: var(--shadow);
}
.guide-visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
}
.guide-visual figcaption {
  margin: 0;
  padding: 11px 15px 13px;
  border-top: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.5;
}

.guide-section { margin: 0 0 26px; }
.guide-section h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: .03em;
  margin: 0 0 10px;
}
.guide-section p, .guide-section li { font-size: 15.5px; line-height: 1.65; }
.guide-section ul, .guide-section ol { padding-left: 22px; }
.guide-section li { margin: 0 0 6px; }

.guide-section ol.guide-step-list {
  list-style: none;
  counter-reset: guide-step;
  padding: 0;
  margin: 0;
}
.guide-step-list li {
  counter-increment: guide-step;
  position: relative;
  padding: 0 0 14px 46px;
}
.guide-step-list li::before {
  content: counter(guide-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
}
.guide-step-list li::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 24px;
  bottom: 4px;
  border-left: 1px solid var(--line-blue);
}
.guide-step-list li:last-child::after { display: none; }

.guide-faq-item {
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
}
.guide-faq-item summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 15.5px;
}
.guide-faq-item p { margin: 10px 0 4px; color: var(--ink-soft); font-size: 15px; line-height: 1.6; }

.guide-sources {
  border-top: 1px solid var(--line);
  margin: 34px 0 0;
  padding: 26px 0 0;
}
.guide-sources h2 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.guide-sources ul { margin: 0; padding-left: 20px; }
.guide-sources li { margin: 0 0 9px; font-size: 14px; line-height: 1.5; }
.guide-source-publisher { color: var(--ink-soft); }
.guide-sources small { display: block; color: var(--ink-soft); font-size: 12px; }

.guide-cta {
  background: var(--porcelain);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin: 32px 0 8px;
}
.guide-cta p { margin: 0 0 14px; font-weight: 600; }
.guide-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.guide-updated {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-soft);
  margin: 26px 0 0;
}
@media (max-width: 620px) {
  .guide-quick p { font-size: 20px; }
  .guide-cta-actions .btn { width: 100%; text-align: center; }
}

/* Guide-body tables.

   Earlier pass used filled verdict badges, three pill styles for the source
   grade, a blue header band and zebra rows — six colours inside one small
   block, on a page whose whole palette is white, one blue, ink, and a single
   yellow stroke. It read as an admin dashboard dropped into an article.

   This pass spends nothing on chrome and everything on the answer:
     - verdicts are typographic (glyph + word), not badges;
     - red appears only on a genuine "no", so it means something;
     - the source grade collapsed from three tiers to the two that matter to a
       reader — can I go check this myself, or is it a broker's word — and is
       carried by a hairline rule instead of a filled pill;
     - no zebra, no tinted band. Rules and weight do the work.

   .t-verdict = answers (cells carry v-yes / v-no / v-ask)
   .t-data    = figures. */
.guide-section table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  margin: 20px 0 18px;
  font-size: 14.5px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (min-width: 1100px) {
  /* Prose is 780, wrap is 1120 — the source column earns some of the slack. */
  .guide-section table.t-verdict { width: calc(100% + 150px); }
}
.guide-section thead th {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-soft);
  background: var(--porcelain);
  text-align: left;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
}
.guide-section tbody td {
  padding: 13px 16px;
  border-top: 1px solid var(--line);
  vertical-align: baseline;
}
.guide-section tbody tr:first-child td { border-top: 0; }
.guide-section tbody td:first-child {
  font-weight: 600;
  color: var(--ink);
}

/* Verdicts. The glyph is CSS, so the data files stay plain text. */
.t-verdict tbody td:nth-child(2) { white-space: nowrap; font-weight: 600; }
.t-verdict td.v-yes { color: var(--ink); }
.t-verdict td.v-no  { color: var(--danger); }
.t-verdict td.v-ask { color: var(--ink-soft); font-weight: 500; }
.t-verdict td.v-yes::before,
.t-verdict td.v-no::before,
.t-verdict td.v-ask::before {
  display: inline-block;
  width: 1.05em;
  margin-right: .12em;
  font-weight: 700;
}
.t-verdict td.v-yes::before { content: "\2713"; color: var(--blue); }
.t-verdict td.v-no::before  { content: "\2715"; color: var(--danger); }
.t-verdict td.v-ask::before { content: "?"; color: var(--ink-soft); }
.t-verdict tbody td:last-child {
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.55;
}

/* Source grade: two tiers, one device. A published source you can go and
   read gets the brand rule; a broker's word gets a grey one. */
.guide-section .tier {
  display: inline-block;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 0 0 0 8px;
  margin-right: 9px;
  border-left: 2px solid var(--line);
  color: var(--ink-soft);
  white-space: nowrap;
}
.guide-section .tier-pub { border-left-color: var(--blue); color: var(--blue-deep); }

/* An underwriting line quoted verbatim from a broker's quoting system:
   styled like the system row it was lifted from — mono, flagged red. */
.guide-section blockquote {
  margin: 16px 0;
  padding: 11px 16px;
  border-left: 3px solid var(--danger);
  background: rgba(192, 57, 43, .05);
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink);
}

/* Fixed measure for the answer columns, so the source column takes the
   slack instead of the headers wrapping three deep. */
.t-verdict thead th:nth-child(1) { width: 18%; }
.t-verdict thead th:nth-child(2) { width: 16%; }

/* The mono utility face carries no CJK: the fallback plus wide tracking made
   Chinese labels look gappy. Chinese gets the body face at label size. */
body[data-lang="zh"] .guide-section thead th {
  font-family: var(--font-body);
  font-size: 11.5px;
  letter-spacing: .02em;
}
body[data-lang="zh"] .guide-section .tier {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: .02em;
}

.guide-section table.t-data { max-width: 640px; }
.t-data tbody td:not(:first-child) {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The insurer comparison keeps the information-dense table on larger
   screens and switches to stacked, labelled records where columns would be
   too narrow to read. Both views are generated from the same PHP rows. */
.guide-insurer-cards { display: none; }
.tier-official,
.tier-site { border-left-color: var(--blue) !important; color: var(--blue-deep) !important; }

@media (max-width: 620px) {
  .guide-section:has(.guide-insurer-table) { overflow-x: visible; }
  .guide-insurer-table { display: none; }
  .guide-insurer-cards {
    display: grid;
    gap: 12px;
    margin: 18px 0;
  }
  .guide-insurer-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    padding: 16px;
    box-shadow: 0 5px 18px rgba(18, 42, 68, .06);
  }
  .guide-insurer-card h3 {
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-size: 22px;
    line-height: 1.15;
  }
  .guide-insurer-card dl { margin: 0; }
  .guide-insurer-card dl > div {
    display: grid;
    grid-template-columns: minmax(100px, 38%) 1fr;
    gap: 10px;
    padding: 9px 0;
    border-top: 1px solid var(--line);
  }
  .guide-insurer-card dt {
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 700;
  }
  .guide-insurer-card dd {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.45;
  }
  .guide-insurer-card dd.v-yes,
  .guide-insurer-card dd.v-no,
  .guide-insurer-card dd.v-ask { font-weight: 700; }
  .guide-insurer-card dd.v-yes::before { content: "\2713"; color: var(--blue); margin-right: .35em; }
  .guide-insurer-card dd.v-no::before { content: "\2715"; color: var(--danger); margin-right: .35em; }
  .guide-insurer-card dd.v-ask::before { content: "?"; color: var(--ink-soft); margin-right: .35em; }
}

@media (max-width: 900px) {
  /* Only the sections that actually hold a table become scrollers. */
  .guide-section:has(table):not(:has(.guide-insurer-table)) { overflow-x: auto; }
  .guide-section table { min-width: 560px; font-size: 13.5px; }
  .guide-section thead th, .guide-section tbody td { padding: 10px 12px; }
}

/* Guide prose rhythm: the h2 rule echoes the H1 chalk stroke one size down,
   and bullets become the site's square blue tick instead of browser discs. */
.guide-section h2 {
  position: relative;
  padding-bottom: 9px;
  margin-bottom: 14px;
}
.guide-section h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 36px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
}
.guide-section ul {
  list-style: none;
  padding-left: 0;
}
.guide-section ul > li {
  position: relative;
  padding-left: 19px;
  margin-bottom: 8px;
}
.guide-section ul > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--blue);
}
.guide-section p > a, .guide-section li > a {
  color: var(--blue);
  text-decoration-color: var(--line-blue);
  text-underline-offset: 3px;
}
.guide-section p > a:hover, .guide-section li > a:hover { text-decoration-color: var(--blue); }

/* --- Dealer standing board (/tire-brands/<slug>) --------------------------
   Two faces of one card. Default styling stacks them as two static plaques,
   which is what a visitor with JS off or reduced-motion on sees; site.js adds
   .is-flip to collapse the stack into a single 3D card that turns over on a
   calendar axis. The claim is legible in both states — the flip never becomes
   the only route to the second standing. */
.award-board {
  margin: 22px 0 0;
  max-width: 520px;
}
.award-scene { perspective: 1200px; }
.award-card { position: relative; }
.award-face {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 24px;
  border-radius: var(--radius);
  /* Deliberately NOT --blue: this board sits on the blue page head, where a
     same-blue plaque dissolves into the background. The ink shade reads as a
     stamped plate there and still holds up on a white page. */
  background: var(--blue-ink);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #fff;
}
.award-board:not(.is-flip) .award-face + .award-face { margin-top: 10px; }

.award-board.is-flip .award-scene { height: 138px; }
.award-board.is-flip .award-card {
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .75s cubic-bezier(.45, .05, .2, 1);
}
.award-board.is-flip .award-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}
.award-board.is-flip .award-face-b { transform: rotateX(180deg); }

.award-year {
  flex: none;
  min-width: 96px;
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .5px;
  color: var(--accent);
}
.award-lines { display: block; }
.award-headline {
  display: block;
  font-family: var(--font-display);
  font-size: 25px;
  line-height: 1.15;
  letter-spacing: .4px;
}
/* Condensed uppercase is the display idiom of this site, but it is an idiom
   for Latin text only — the Chinese board keeps its normal casing. */
.award-board:not(.is-zh) .award-headline { text-transform: uppercase; }
.award-program {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--line-blue);
}
.award-note {
  display: block;
  margin-top: 7px;
  font-size: 13px;
  color: rgba(255, 255, 255, .72);
}

@media (max-width: 560px) {
  .award-board.is-flip .award-scene { height: 168px; }
  .award-face { gap: 14px; padding: 16px 18px; }
  .award-year { min-width: 74px; font-size: 36px; }
  .award-headline { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .award-board.is-flip .award-card { transition: none; }
}

/* --- Hero standing plate ------------------------------------------------
   The Michelin standing, presented as a spec rather than a badge: the mono
   face on this site is reserved for tire codes, so setting the figures in it
   reads as "this is a measurement" — which against a discounter is the whole
   argument. The accent colour marks the rank and does nothing else here.
   No motion: the hero already plays a video, and a claim the visitor has to
   wait for is a claim half of them never see. */
.standing {
  /* No box. Everything else in this hero — kicker, headline, chips — is bare
     type on the gradient; both the solid plate and its frosted successor read
     as a foreign slab stuck over the video. The yellow edge rule alone marks
     it as evidence (same device as .why-item), and the type does the rest.
     Width stays inside the text column so it never rides onto the video. */
  max-width: 560px;
  margin-top: 26px;
  padding: 2px 0 2px 20px;
  border-left: 4px solid var(--accent);
}

/* The authority line carries the year and the territory the claim is scoped to,
   so it is part of the claim rather than a caption over it — it reads at the
   weight and the accent colour of the trust chips above, not as grey fine
   print. Size and tracking stay where they were: this line sits under the
   headline and must not compete with it. */
.standing-auth {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent);
}
.standing-claim {
  /* Uncapped on purpose: at the top of the clamp the English claim measures
     445px against 548px of plate, so it lands as one undivided line. Below
     that the clamp shrinks it rather than splitting the brand off the noun,
     and balance keeps any wrap that does happen even. */
  margin: 0;
  text-wrap: balance;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(27px, 3.4vw, 39px);
  line-height: .97;
  letter-spacing: .015em;
  text-transform: uppercase;
  color: #fff;
}
.standing-claim em { font-style: normal; color: var(--accent); }
.standing-row {
  display: flex;
  gap: 24px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.standing-cell { flex: 1; }
.standing-cell + .standing-cell {
  padding-left: 24px;
  border-left: 1px solid rgba(255, 255, 255, .14);
}
.standing-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}
.standing-value {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
}
/* Condensed caps is a Latin idiom; the Chinese claim takes weight and size
   instead, and its labels keep normal casing. */
html[lang^="zh"] .standing-claim {
  max-width: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(22px, 2.6vw, 29px);
  line-height: 1.18;
  letter-spacing: .01em;
  text-transform: none;
}
/* The mono face has no CJK, so Chinese falls back to a monospaced system face
   that sets every glyph on a full-width em — the data lines came out airy and
   wrong. Chinese takes the body face; the small size and the labels above the
   values still read as a spec block. */
html[lang^="zh"] .standing-auth,
html[lang^="zh"] .standing-label,
html[lang^="zh"] .standing-value {
  font-family: var(--font-body);
  letter-spacing: .04em;
  text-transform: none;
}

/* The hero trust chips are three service facts now, so they sit on one line
   rather than in the old 2x2 block. */
.hero .trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  max-width: 620px;
}

@media (max-width: 620px) {
  .standing { padding-left: 16px; }
  .standing-row { display: block; }
  .standing-cell + .standing-cell {
    margin-top: 11px;
    padding-top: 11px;
    padding-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .14);
    border-left: 0;
  }
}