/* Parts brand campaign, with a separate car panel on small screens. */
.ticker { display:flex; align-items:center; justify-content:center; gap:28px; }
.ticker span { margin:0; }
.brand-hero { min-height:590px; background:#071423; color:#fff; isolation:isolate; }
.brand-hero-media { position:absolute; inset:0; z-index:-2; }
.brand-hero .hero-car { inset:0; width:100%; height:100%; object-fit:cover; object-position:100% 55%; mix-blend-mode:normal; opacity:1; }
.brand-hero:after { z-index:-1; background:linear-gradient(90deg,#071423 0%,#071423ee 23%,#07142385 43%,#07142300 64%); }
.brand-hero .hero-copy { padding-top:85px; padding-bottom:80px; }
.brand-hero .eyebrow { color:#a7c3d9; font-size:10px; letter-spacing:.19em; margin-bottom:24px; }
.brand-hero .eyebrow:before { background:#63c0ed; }
.brand-hero h1 { font-size:clamp(48px,4.8vw,68px); line-height:1.08; max-width:570px; }
.brand-hero h1 span { color:#8cd4f8; font-size:1.2em; }
.brand-hero .hero-description { color:#ccd5e1; font-size:15px; max-width:35ch; margin-top:24px; }
.brand-hero .button.solid { background:#fff; border-color:#fff; color:#102a41; }
.brand-hero .button.secondary { background:#172b4099; border-color:#648096; color:#fff; }
.brand-hero .button:hover { box-shadow:0 8px 25px #0003; }
@media(min-width:781px){
 .brand-hero-media{inset:0 0 0 33%;overflow:hidden}
 .brand-hero .hero-car{object-fit:contain;object-position:right center}
 .brand-hero:after{background:linear-gradient(90deg,#071423 0%,#071423ed 28%,#07142355 47%,transparent 61%)}
 .brand-hero h1{max-width:47%;font-size:clamp(42px,4.25vw,62px)}
 .brand-hero .hero-description{max-width:34ch}
}
.category-special { grid-column:1/-1; display:flex; align-items:center; gap:20px; padding:22px 26px; background:linear-gradient(110deg,#112b42,#1d4966); border-color:#22465e; color:#fff; }
.category-special .special-mark { flex:none; display:grid; place-items:center; width:56px; height:56px; border:1px solid #77bad050; border-radius:16px; background:#ffffff0a; color:#a3def5; }
.category-special h3 { margin:0 0 6px; font-size:23px; }
.category-special p { margin:0; color:#b6ccde; font-size:13px; }
.special-arrow { margin-left:auto; font-size:25px; color:#9ed6ef; transition:translate .25s ease; }
.category-special:hover .special-arrow { translate:3px -3px; }
.installation-location { border-top:1px solid #e1e8ef; }
.installation-location h2 { margin-bottom:20px; }
.installation-location p:not(.eyebrow) { margin-top:9px; }
.installation-location .button { margin-top:24px; }
#brand-hero-heading { scroll-margin-top:125px; }
@media(max-width:780px) {
  .ticker { gap:0; letter-spacing:.16em; font-size:10px; padding-block:8px; }
  .ticker span { display:none; }
  .brand-hero { min-height:0; display:flex; flex-direction:column; }
  .brand-hero .hero-copy { order:0; width:100%; padding:35px 24px 22px; }
  .brand-hero .eyebrow { font-size:9px; margin-bottom:19px; letter-spacing:.14em; }
  .brand-hero h1 { font-size:clamp(29px,9.2vw,40px); max-width:none; line-height:1.13; }
  .brand-hero h1 span { font-size:1.58em; }
  .brand-hero .hero-description { font-size:13px; line-height:1.65; max-width:34ch; margin-top:18px; }
  .brand-hero .button-row { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:23px; }
  .brand-hero .button { min-height:44px; padding:12px 8px; font-size:10px; letter-spacing:.04em; }
  .brand-hero-media { order:1; position:relative; inset:auto; height:245px; z-index:0; overflow:hidden; }
  .brand-hero .hero-car { position:relative; inset:auto; width:100%; height:100%; object-fit:contain; object-position:100% 58%; }
  .brand-hero:after { display:none; }
  .brand-hero-media:after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,#071423 0%,#07142300 22%,#07142300 85%,#071423 100%); pointer-events:none; }
  .category-special { gap:15px; padding:19px 18px; border-radius:12px; }
  .category-special .special-mark { width:47px; height:47px; border-radius:12px; }
  .category-special h3 { font-size:22px; }
  .category-special p { font-size:11px; }
}
@media(prefers-reduced-motion:reduce) { .special-arrow { transition:none; } }

.fitment-title-row { display:flex; justify-content:space-between; align-items:center; gap:14px; }
.fitment-intro .fitment-title-row h2 { min-width:0; flex:1; margin:0; }
.fitment-clear {
  display:inline-flex; align-items:center; justify-content:center; flex:none; gap:7px;
  min-height:44px; padding:8px 13px; border:1px solid #c9d8e8; border-radius:9px;
  background:#fff; color:#315e87; font:600 12px var(--font-body); cursor:pointer;
  transition:background-color .2s,border-color .2s,color .2s;
}
.fitment-clear:hover { background:#e9f1fc; border-color:#9fb9d6; }
.fitment-clear:focus-visible { outline:2px solid #3b79c1; outline-offset:3px; }
.fitment-clear:disabled { opacity:.55; cursor:wait; }
.build-ideas-section .related-products-heading{align-items:center;margin-bottom:10px}
.build-ideas-section h2{font-size:32px;color:#173754}
.build-ideas-all{display:inline-block;color:#245ba7;font-size:12px;margin-top:10px}
.build-ideas-card.related-product-card{flex:0 0 calc((100% - 36px)/3);max-width:none;padding:0;border:1px solid #d7e3f0;border-radius:16px;background:#fff;overflow:hidden;scroll-margin-top:100px}
.build-ideas-media{position:relative;background:#152239;overflow:hidden}
.build-ideas-media img{width:100%;height:185px;object-fit:cover;object-position:center}
.build-reference-label{position:absolute;left:12px;bottom:10px;padding:4px 7px;border-radius:4px;background:#09182bc9;color:#d8e7f6;font-size:9px;line-height:1.5}
.build-ideas-copy{padding:20px}
.build-ideas-make{color:#557ba5;font-size:10px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:9px}
.build-ideas-copy h3{font-size:20px;color:#173b67;line-height:1.3;min-height:52px}
.build-ideas-link{display:flex;justify-content:space-between;align-items:center;margin-top:18px;padding-top:13px;border-top:1px solid #e3ebf5;color:#1f5a9e;font-size:12px;font-weight:600}
.build-ideas-mark{height:185px;display:flex;flex-direction:column;justify-content:center;align-items:center;background:radial-gradient(ellipse at 70% 30%,#21466e,transparent 70%),#0c1e34;color:#fff}
.build-ideas-mark span{font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:#adc7e0}
.build-ideas-mark strong{font:600 58px/1.3 var(--font-display);letter-spacing:-.03em}
.build-ideas-mark b{font-size:11px;letter-spacing:.3em;color:#9cdaee}
.build-ideas-gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding-top:20px}
.build-ideas-gallery-grid .build-ideas-card{width:100%;min-width:0}
@media(max-width:780px){.build-ideas-section h2{font-size:26px}.build-ideas-section .related-products-heading{gap:12px}.build-ideas-card.related-product-card{flex-basis:82%;border-radius:13px}.build-ideas-media img,.build-ideas-mark{height:165px}.build-ideas-copy{padding:17px}.build-ideas-copy h3{font-size:18px;min-height:47px}.build-ideas-gallery-grid{grid-template-columns:1fr;gap:18px}}
@media(prefers-reduced-motion:reduce) { .fitment-clear { transition:none; } }

/* Desktop colour direction. Phone styling remains independent of these rules. */
@media (min-width:781px) {
  body:has(.brand-hero) { background:#f4f7fc; }
  body:has(.brand-hero) .site-header {
    background:#ffffffed; border-bottom:2px solid #d4e5fa; box-shadow:0 6px 24px #10345d08;
  }
  body:has(.brand-hero) .site-header #primary-nav a { color:#183759; }
  body:has(.brand-hero) .site-header #primary-nav .nav-preview {
    color:#fff!important; background:linear-gradient(120deg,#154dc6,#2273e3); border-radius:8px;
  }
  main:has(.brand-hero) .fitment-section {
    background:radial-gradient(ellipse at 95% 0%,#12698580,transparent 50%),linear-gradient(120deg,#091b35,#123b63);
    border-color:#25496d; box-shadow:inset 0 1px 0 #ffffff15;
  }
  main:has(.brand-hero) .fitment-bar { padding-block:18px; gap:10px; }
  main:has(.brand-hero) .fitment-intro h2 { color:#fff; font-size:26px; }
  main:has(.brand-hero) .fitment-intro .eyebrow { color:#79d6ef; font-size:9px; margin-bottom:0; }
  main:has(.brand-hero) .fitment-subtitle { display:none; }
  main:has(.brand-hero) .vehicle-browse-link { margin-top:2px; }
  main:has(.brand-hero) .fitment-clear { background:#ffffff0a; color:#d0e9ff; border-color:#7a9abb60; }
  main:has(.brand-hero) .fitment-clear:hover { background:#e9f3ff; color:#254f7b; border-color:#afcff2; }
  main:has(.brand-hero) .fitment-status { font-size:11px; line-height:1.5; }
  main:has(.brand-hero) .fitment-subtitle,
  main:has(.brand-hero) .fitment-actions span { color:#c7d7e9; }
  main:has(.brand-hero) .vehicle-browse-link,
  main:has(.brand-hero) .fitment-status { color:#96e7ff; }
  main:has(.brand-hero) .vehicle-step {
    background:linear-gradient(140deg,#fff,#edf5ff); border-color:#ffffff80;
    border-radius:12px; padding:9px 12px; box-shadow:0 12px 24px #020f2526;
  }
  main:has(.brand-hero) .vehicle-step label { gap:5px; }
  main:has(.brand-hero) .fitment-bar .vehicle-step select { min-height:44px; margin-top:0; padding:8px 10px; }
  main:has(.brand-hero) .vehicle-step-label { color:#183a5e; }
  main:has(.brand-hero) .vehicle-step:focus-within {
    border-color:#74d6ff; box-shadow:0 12px 24px #020f2526,inset 0 0 0 1px #74d6ff;
  }
  main:has(.brand-hero) .button.solid {
    background:linear-gradient(120deg,#144dc4,#1b70db); border-color:#2c74df;
    color:#fff; border-radius:9px; box-shadow:0 6px 18px #1559c329;
  }
  .brand-hero h1 span {
    color:#82d5ff; background:linear-gradient(100deg,#53baff,#a9ecff);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  }
  .brand-hero .button.solid { background:linear-gradient(120deg,#175be0,#1b70db); border-color:#438feb; color:#fff; }
  .brand-hero .button.secondary { background:#132e4ac9; border-color:#709fca; color:#dfefff; border-radius:9px; }
  main:has(.brand-hero) .studio-home-strip {
    background:radial-gradient(ellipse at 80% 100%,#155786,transparent 60%),#0c2342;
    border-color:#254769; color:#fff;
  }
  main:has(.brand-hero) .studio-home-strip>.container { padding-block:30px; }
  main:has(.brand-hero) .studio-home-strip h2 { color:#f0f8ff; font-size:27px; }
  main:has(.brand-hero) .studio-home-strip p { color:#b9d2eb; }
  main:has(.brand-hero) .studio-home-strip .free-badge { background:#153e54; color:#a3eee9; border-color:#31867f; }
  main:has(.brand-hero) .studio-home-strip .free-badge:before { background:#65d4c7; }
  main:has(.brand-hero) .section-heading h2 { color:#102b4e; }
  main:has(.brand-hero) .section-heading>a {
    color:#174ba8; border:1px solid #d3e1f6; background:#eaf2ff; padding:10px 14px; border-radius:8px;
  }
  main:has(.brand-hero) .category-grid { gap:20px; }
  main:has(.brand-hero) .category-card:not(.category-special) {
    --tile-colour:#2666be; --tile-surface:#e8f1ff;
    position:relative; background:linear-gradient(145deg,#fff,var(--tile-surface));
    border-color:#d7e2f0; border-radius:18px; box-shadow:0 8px 24px #16365708;
  }
  main:has(.brand-hero) .category-card:not(.category-special):before {
    content:''; position:absolute; inset:0 0 auto; height:4px; background:var(--tile-colour);
  }
  main:has(.brand-hero) .category-card[href*="spoilers"] { --tile-colour:#126f7b; --tile-surface:#e4f5f4; }
  main:has(.brand-hero) .category-card[href*="grilles"] { --tile-colour:#505aab; --tile-surface:#eceefa; }
  main:has(.brand-hero) .category-card[href*="diffusers"] { --tile-colour:#306989; --tile-surface:#e5f1f7; }
  main:has(.brand-hero) .category-card[href*="side-skirts"] { --tile-colour:#32649f; --tile-surface:#e5effa; }
  main:has(.brand-hero) .category-card[href*="exhausts"] { --tile-colour:#7b5d32; --tile-surface:#f6efe4; }
  main:has(.brand-hero) .category-card:not(.category-special) h3 { color:var(--tile-colour); }
  main:has(.brand-hero) .category-card:not(.category-special) p { color:#52667b; }
  main:has(.brand-hero) .category-special {
    background:radial-gradient(ellipse at 80% 100%,#3a4770,transparent 55%),linear-gradient(120deg,#122342,#203e62);
    border-color:#536680; border-radius:18px; box-shadow:0 12px 30px #12274712;
  }
  main:has(.brand-hero) .category-special h3 { color:#f6d797; }
  main:has(.brand-hero) .category-special p { color:#d4e0ef; }
  main:has(.brand-hero) .category-special .special-mark { color:#f8d994; background:#b5832924; border-color:#c4a16066; }
  main:has(.brand-hero) .category-special .special-arrow { color:#f6d797; }
  main:has(.brand-hero) .featured {
    margin-block:0 36px; padding-top:34px; padding-bottom:38px; border-radius:24px;
    background:linear-gradient(140deg,#eaf2ff,#f2f6fb); border:1px solid #dce6f6;
  }
  main:has(.brand-hero) .product-card { border-radius:16px; border-color:#dbe4f2; }
  main:has(.brand-hero) .product-image { background:linear-gradient(145deg,#f8fbff,#eaf2ff); }
  main:has(.brand-hero) .product-copy .eyebrow { color:#1a59b3; }
  main:has(.brand-hero) .product-bottom strong { color:#164fab; }
  main:has(.brand-hero) .product-bottom .button { background:#195ecb; color:#fff; border-color:#195ecb; border-radius:7px; }
  main:has(.brand-hero) .installation-feature {
    background:radial-gradient(ellipse at 0% 100%,#ddeeff,transparent 65%),linear-gradient(135deg,#fff,#e6f2f8);
    border-color:#bfd9ee; box-shadow:0 16px 45px #153c5b10;
  }
  main:has(.brand-hero) .installation-feature:before { background:linear-gradient(90deg,#1455c9,#38b9db,#1455c9); }
  main:has(.brand-hero) .inspiration-grid>a {
    background:#fff; border:1px solid #d4e2f3; border-radius:18px; overflow:hidden; box-shadow:0 10px 24px #14335408;
  }
  main:has(.brand-hero) .inspiration-grid h3 { color:#173b67; margin:22px 24px 8px; }
  main:has(.brand-hero) .inspiration-grid p { color:#5c7188; margin:0 24px 22px; }
  body:has(.brand-hero) footer {
    background:radial-gradient(ellipse at 90% 0%,#174872,transparent 65%),#0a1c35; border-top:3px solid #2c72ba;
  }
}
@media (min-width:781px) and (hover:hover) and (pointer:fine) {
  main:has(.brand-hero) .button.solid:hover { background:linear-gradient(120deg,#1746ae,#146dcf); box-shadow:0 10px 25px #1559c343; }
  main:has(.brand-hero) .category-card:not(.category-special):hover { border-color:var(--tile-colour); box-shadow:0 14px 30px #16365715; }
  main:has(.brand-hero) .product-bottom .button:hover { background:#124da9; }
}