h1, h2, h3, .wordmark { font-family: var(--font-heading); text-transform: var(--heading-transform); letter-spacing: var(--heading-spacing); }
  :root[data-skin="racing"] { font-size: calc(var(--pico-font-size) * var(--font-scale)); }
  :root[data-skin="racing"] { --pico-spacing: calc(1rem * var(--space)); --pico-typography-spacing-vertical: calc(1rem * var(--space)); --pico-block-spacing-vertical: calc(1rem * var(--space)); --pico-block-spacing-horizontal: calc(1rem * var(--space)); --pico-grid-row-gap: calc(1rem * var(--space)); }
  h1 { --pico-typography-spacing-top: calc(3rem * var(--space)); } h2 { --pico-typography-spacing-top: calc(2.625rem * var(--space)); } h3 { --pico-typography-spacing-top: calc(2.25rem * var(--space)); }
  h1, h2, h3, h4, h5, h6 { font-size: calc(var(--pico-font-size) * var(--heading-scale)); }
  a { color: var(--accent-ink); }
  .wordmark { font-weight: 700; font-size: 1.4rem; color: var(--pico-h1-color); text-decoration: none; }
  .wordmark b { color: var(--accent-ink); }
  nav.top { border-bottom: 1px solid var(--pico-muted-border-color); position: sticky; top: 0; z-index: 10;
            background: color-mix(in srgb, var(--pico-background-color) 88%, transparent); backdrop-filter: blur(8px); }
  nav.top ul li a { font-weight: 600; }
  button, [role=button] { box-shadow: none; transition: transform .15s, box-shadow .15s, background .15s; }
  button:hover:not(.secondary):not(.outline), a[role=button]:hover:not(.secondary):not(.outline) { transform: translateY(-1px); box-shadow: var(--glow); }

  /* hero */
  .hero { min-height: 72vh; display: grid; align-items: end; color: var(--hero-text);
          background: linear-gradient(180deg, var(--hero-shade-top) 0%, var(--hero-shade-bottom) 100%),
                      var(--hero-image) center/cover; }
  .hero .container { padding-block: calc(4rem * var(--space)); }
  .hero h1 { font-size: calc(clamp(2.4rem, 7vw, 5rem) * var(--heading-scale)); line-height: 1; margin-bottom: calc(.5rem * var(--space)); color: var(--hero-text); }
  .hero h1 em { font-style: normal; color: var(--pico-primary); }
  .hero p { max-width: 38rem; font-size: 1.15rem; color: var(--hero-text-soft); }
  .hero .cta { display: flex; gap: calc(.75rem * var(--space)); flex-wrap: wrap; margin-top: calc(1.5rem * var(--space)); }
  .hero .cta a { margin: 0; }
  .hero a.outline { color: var(--hero-text); border-color: var(--hero-text); }

  /* fitment finder */
  .finder { margin-top: calc(1.5rem * var(--space)); position: relative; z-index: 2; box-shadow: var(--finder-shadow); }
  .hero + .container .finder { margin-top: calc(-2.5rem * var(--space)); }
  .finder form { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: calc(.75rem * var(--space)); align-items: end; margin: 0; }
  .finder label { margin: 0; }
  .finder select, .finder input, .finder button { margin: 0; }

  /* sections */
  section.block { padding-block: calc(4rem * var(--space)); }
  .eyebrow { color: var(--accent-ink); font-weight: 700; letter-spacing: .15em; text-transform: uppercase; font-size: .8rem; }
  .grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: calc(1.25rem * var(--space)); }
  .grid-cards article { margin: 0; padding: 0; overflow: hidden; transition: transform .2s, border-color .2s; border: 1px solid var(--pico-muted-border-color); }
  .grid-cards article:hover { transform: translateY(-3px); border-color: var(--pico-primary); }
  /* hover: one pulse of light runs once around the red border, then stops */
  @property --lap { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
  .grid-cards article { position: relative; }
  .grid-cards article::after, .stages article:has(a.stretch)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none; opacity: 0;
    background: conic-gradient(from var(--lap), transparent 0deg, transparent 250deg, var(--pico-primary) 320deg, var(--accent-ink) 358deg, transparent 360deg);
    -webkit-mask: linear-gradient(var(--mask-ink) 0 0) content-box, linear-gradient(var(--mask-ink) 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(var(--mask-ink) 0 0) content-box exclude, linear-gradient(var(--mask-ink) 0 0); }
  .grid-cards article:hover::after, .stages article:has(a.stretch):hover::after { animation: border-lap 1.1s cubic-bezier(.45,0,.35,1) 1 both; }
  @keyframes border-lap { 0% { --lap: 0deg; opacity: 0; } 8% { opacity: 1; } 90% { opacity: 1; } 100% { --lap: 360deg; opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .grid-cards article:hover::after, .stages article:has(a.stretch):hover::after { animation: none; } }
  .ph { aspect-ratio: 4/3; background: linear-gradient(135deg, var(--pico-card-sectioning-background-color), var(--pico-muted-border-color));
        display: grid; place-items: center; color: var(--pico-muted-color); font-size: .85rem; }
  .card-body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding: calc(1rem * var(--space)) calc(1.1rem * var(--space)) calc(1.2rem * var(--space)); }
  .card-body h3 { font-size: calc(1.05rem * var(--heading-scale)); margin-bottom: calc(.25rem * var(--space)); }
  .card-body small { color: var(--pico-muted-color); }
  .price { font-size: 1.25rem; font-weight: 700; margin: auto 0 0; padding-top: calc(.75rem * var(--space)); }
  .badge { display: inline-block; margin-bottom: calc(.6rem * var(--space)); font-size: .7rem; font-weight: 700; padding: .15rem .5rem; border-radius: 999px;
           background: var(--pico-primary); color: var(--on-accent); text-transform: uppercase; letter-spacing: .06em; }
  .badge.ok { background: var(--success); color: var(--on-success); }
  .stages { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: calc(1.25rem * var(--space)); }
  .stages article { display: flex; flex-direction: column; margin: 0; border-top: 3px solid var(--pico-primary); }
  .stage-img { width: 100%; height: auto; border-radius: var(--pico-border-radius); margin: 0 0 calc(1rem * var(--space)); }
  .stages article { position: relative; }
  .stages a.stretch { color: inherit; text-decoration: none; }
  .stages a.stretch::after { content: ""; position: absolute; inset: 0; }
  .stages article:has(a.stretch) { transition: transform .2s, border-color .2s; }
  .stages article:has(a.stretch):hover { transform: translateY(-3px); border-color: var(--pico-primary); }
  .stages ul { padding-left: 1.1rem; }
  .stats { display: flex; gap: calc(2.5rem * var(--space)); flex-wrap: wrap; }
  .stats div strong { display: block; font-family: var(--font-heading); font-size: calc(2.4rem * var(--heading-scale)); color: var(--pico-primary); line-height: 1; }
  footer.site { border-top: 1px solid var(--pico-muted-border-color); padding-block: calc(2.5rem * var(--space)); color: var(--pico-muted-color); }
  .wordmark { display: inline-flex; align-items: center; gap: .5rem; }
  .logo { height: 2.2rem; width: auto; }
  @media (max-width: 768px) {
    nav.top { flex-wrap: wrap; }
    nav.top ul { flex-wrap: wrap; }
    section.block { padding-block: calc(2.5rem * var(--space)); }
  }
  .article img { max-width: 100%; height: auto; border-radius: var(--pico-border-radius); }
  .article { max-width: 760px; margin-inline: auto; }

/* language switch */
nav.top ul li.lang { display: flex; align-items: center; margin: 0; }
nav.top ul li.lang > span { display: flex; align-items: center; }
nav .lang a { padding: 0 .35rem; margin: 0; line-height: 1; font-size: .8rem; font-weight: 700; letter-spacing: .05em; }
nav .lang a[aria-current="true"] { color: var(--accent-ink); text-decoration: underline; }

/* header: keep the cart button on one line and compact */
nav.top ul { align-items: center; }
nav.top [role=button] { white-space: nowrap; padding: .4rem .8rem; margin: 0; }
@media (max-width: 1100px) {
  .wordmark { font-size: 1.15rem; }
  nav.top ul li { padding: .5rem .4rem; }
}
.finder form { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
.finder button { white-space: nowrap; padding-inline: 1rem; }
.finder select { padding-inline: .75rem 2rem; background-position: right .6rem center; }
@media (max-width: 700px) { .finder form { grid-template-columns: 1fr; } }
.finder select { font-size: .95rem; padding-inline: .6rem 1.8rem; }
nav .lang { justify-content: flex-start; width: auto; }

/* cards, galleries, cart forms (were inline styles) */
.card-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.card-img, .card-link .ph { flex: none; width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: calc(.75rem * var(--space)); margin-bottom: calc(1.5rem * var(--space)); }
.gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.ph-tall { min-height: 260px; margin-bottom: calc(1.5rem * var(--space)); }
.qty-form { display: flex; gap: .5rem; margin: 0; }
.qty-form input[type=number] { width: 5rem; margin: 0; }
.qty-form button { margin: 0; }
.hp { position: absolute; left: -9999px; }

/* header: never let the wordmark and the links overlap; the links wrap below the wordmark when space runs out */
nav.top { flex-wrap: wrap; column-gap: 1rem; }
nav.top ul { flex-wrap: wrap; }
nav.top > ul:first-child { flex-shrink: 0; }
.wordmark { white-space: nowrap; }

/* ---- polish: quiet motion. Each block below is independent; delete one to drop that effect. All of it is off for visitors who ask for reduced motion. ---- */
@media (prefers-reduced-motion: no-preference) {

  /* 1. cards, stages and stats rise and fade in as they scroll into view (browsers without scroll timelines just show them) */
  @supports (animation-timeline: view()) {
    @keyframes rise-in { from { opacity: 0; translate: 0 28px; } }
    .grid-cards article, .stages article, .stats div { animation: rise-in linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
  }

  /* 2. product photos zoom slowly inside their card on hover */
  .card-img, .card-link .ph { transition: transform .7s cubic-bezier(.2,.6,.2,1); }
  .grid-cards article:hover .card-img, .grid-cards article:hover .ph { transform: scale(1.05); }

  /* 3. top menu links: a hairline appears under the hovered link and one pulse of light runs along it once */
  nav.top ul li:not(.lang) a:not(.wordmark):not([role=button]) { position: relative; text-decoration: none; }
  nav.top ul li:not(.lang) a:not(.wordmark):not([role=button])::after {
    content: ""; position: absolute; left: .6rem; right: .6rem; bottom: .3rem; height: 1px; pointer-events: none; opacity: 0; transition: opacity .3s;
    background: linear-gradient(90deg, transparent, var(--accent-ink), transparent) -70% 0 / 40% 100% no-repeat, var(--pico-primary); }
  nav.top ul li:not(.lang) a:not(.wordmark):not([role=button]):hover::after { opacity: .85; animation: line-pulse .9s ease-out 1 both; }
  nav.top ul li:not(.lang) a:not(.wordmark):not([role=button]):is(:hover,:focus,:active,[aria-current="page"]) { text-decoration: none; }
  nav.top ul li a[aria-current="page"]::after { opacity: .5; }
  @keyframes line-pulse { to { background-position: 170% 0, 0 0; } }

  /* 4. the price warms up a shade when its card is hovered */
  .price { transition: color .3s; }
  .grid-cards article:hover .price { color: color-mix(in srgb, var(--pico-primary), var(--accent-ink) 22%); }

}