/* 97 Service homepage: the design mockup (hero, vehicle fitment, OEM search,
   category tiles on brushed metal, product row) plus the parts catalog views.
   Loaded only on the homepage. Global header/footer/shop theme live in
   ../css/vehicle_website.css. */
.s97-catalog [hidden]{display:none!important}
.s97-catalog{
  --black:#080808; --ink:#17120b; --text:#25211b; --muted:#6a6356;
  --line:#e2ddd2; --line-2:#cfc7b6; --paper:#f4f4f2; --white:#fff;
  --gold:#c99a43; --gold-deep:#8f6827; --gold-hi:#efd17a; --gold-soft:#fbf4e3;
  --btn-grad:linear-gradient(180deg,#e6c577 0%,#c99a43 48%,#a87b30 100%);
  --field-grad:linear-gradient(180deg,#f0d48a,#d1a34d);
  --display:'Roboto Condensed','Arial Narrow',sans-serif;
  --head:'Montserrat','Arial Black',sans-serif;
  --body:'Roboto Condensed','Segoe UI',Roboto,sans-serif;
  --gutter:clamp(16px,3vw,32px); --maxw:1240px;
  font:16px/1.5 var(--body); color:var(--text); background:var(--paper);
}
:where(.s97-catalog) *,:where(.s97-catalog) *::before,:where(.s97-catalog) *::after{box-sizing:border-box}
:where(.s97-catalog) img{max-width:100%}
:where(.s97-catalog) :is(button,input,select){font:inherit}
.s97-catalog :focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.s97-catalog .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.s97-catalog h1,.s97-catalog h2,.s97-catalog h3{text-wrap:balance}
.s97-catalog .btn-gold{background:var(--btn-grad);border:1px solid #8f6827;color:#1a1208;font-weight:700;border-radius:4px;cursor:pointer;box-shadow:0 2px 4px rgba(0,0,0,.2)}
.s97-catalog .btn-gold:hover{filter:brightness(1.06)}
.s97-catalog .btn-gold:disabled{opacity:.6;cursor:wait}
.s97-catalog .btn-line{background:#fff;border:1px solid var(--line-2);color:#2b2419;font-weight:600;border-radius:4px;cursor:pointer;padding:8px 14px}
.s97-catalog .btn-line:hover{border-color:var(--gold)}

/* ---------- hero (sizes are mockup px * --u, see vehicle_website.css) ---------- */
.s97-hero{direction:ltr;position:relative;height:calc(335 * var(--u));background:#0b0a09;color:#eee;isolation:isolate;z-index:1}
.s97-slides{position:absolute;inset:0;z-index:-2;overflow:hidden}
.s97-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease-in-out;container-type:size;overflow:hidden}

/* ---- animated hero scene: the photo plus light layers placed in % of the
   photo, so they stay on the headlight / tunnel at every screen size ---- */
.s97-scene{--ar:3.6145;--sw:max(100cqw,calc(100cqh * var(--ar)));--sh:max(100cqh,calc(100cqw / var(--ar)));
  position:absolute;width:var(--sw);height:var(--sh);left:calc((100cqw - var(--sw)) * var(--sx,.5));top:calc((100cqh - var(--sh)) * .5);
  transform-origin:76% 44%}
.s97-bg{position:absolute;inset:0;width:100%;height:100%;display:block;max-width:none}
.s97-scene .fx{position:absolute;pointer-events:none;mix-blend-mode:screen}
.fx-head{left:78.3%;top:45.6%;width:8.5%;height:15%;transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center,rgba(255,255,255,.95) 0 5%,rgba(214,232,255,.7) 13%,rgba(255,214,140,.32) 32%,transparent 64%)}
.fx-head::before{content:"";position:absolute;left:-74%;top:28%;width:34%;height:44%;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.7) 0 6%,rgba(214,232,255,.35) 18%,transparent 62%)}
.fx-flare{left:78.3%;top:45.6%;width:34%;height:3.2%;transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center,rgba(255,244,220,.75),rgba(255,214,140,.2) 45%,transparent 72%)}
.fx-glow{left:88.3%;top:17%;width:32%;height:60%;transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center,rgba(255,221,150,.55),rgba(214,160,70,.18) 45%,transparent 70%)}
.fx-floor{left:84%;top:66%;width:30%;height:12%;transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center,rgba(255,210,130,.45),transparent 70%)}
.fx-tunnel{inset:0;
  -webkit-mask-image:linear-gradient(to bottom,#000 0 15%,transparent 23%),linear-gradient(to right,transparent 91%,#000 95%);
  mask-image:linear-gradient(to bottom,#000 0 15%,transparent 23%),linear-gradient(to right,transparent 91%,#000 95%);
  -webkit-mask-composite:source-over;mask-composite:add}
.fx-ring{position:absolute;left:88.3%;top:17%;width:9%;aspect-ratio:1.9;border:2px solid rgba(255,220,150,.95);border-radius:5%;
  box-shadow:0 0 10px rgba(255,200,110,.9),inset 0 0 10px rgba(255,200,110,.6);transform:translate(-50%,-50%) scale(.2);opacity:0}
.fx-dust{inset:0}
.fx-dust i{position:absolute;width:3px;height:3px;border-radius:50%;background:#ffe3a3;box-shadow:0 0 6px #ffd27a;opacity:0}
.fx-dust i:nth-child(1){left:82%;top:62%;--d:7s;--dl:.2s}
.fx-dust i:nth-child(2){left:86%;top:70%;--d:9s;--dl:1.4s}
.fx-dust i:nth-child(3){left:90%;top:58%;--d:8s;--dl:2.6s}
.fx-dust i:nth-child(4){left:94%;top:66%;--d:10s;--dl:.9s}
.fx-dust i:nth-child(5){left:97%;top:52%;--d:7.5s;--dl:3.4s}
.fx-dust i:nth-child(6){left:84%;top:40%;--d:9.5s;--dl:4.1s}
.fx-dust i:nth-child(7){left:92%;top:36%;--d:8.5s;--dl:5s}
.fx-dust i:nth-child(8){left:88%;top:78%;--d:11s;--dl:2s}
.fx-dust i:nth-child(9){left:80%;top:30%;--d:10s;--dl:6s}
.fx-dust i:nth-child(10){left:95%;top:80%;--d:9s;--dl:3s}

/* timing: lights switch on (0-2 s), headlight blinks on (1.6-2.6 s), then
   the tunnel pulses, dust drifts and the camera slowly pushes in */
.s97-slide.on .s97-bg{animation:s97lights 2.2s ease-out both}
.s97-slide.on .fx-glow{animation:s97fade 1.4s ease-out .9s both,s97breath 3.6s ease-in-out 2.3s infinite alternate}
.s97-slide.on .fx-floor{animation:s97fade 1.4s ease-out 1.2s both,s97breath 4.4s ease-in-out 2.6s infinite alternate}
.s97-slide.on .fx-head{animation:s97headon 1s linear 1.6s both,s97breath 4s ease-in-out 2.6s infinite alternate}
.s97-slide.on .fx-flare{animation:s97flare 1s ease-out 1.6s both,s97breath 4s ease-in-out 2.6s infinite alternate}
.s97-slide.on .fx-ring{animation:s97ring 3.6s linear infinite}
.s97-slide.on .fx-ring:nth-child(1){animation-delay:2s}
.s97-slide.on .fx-ring:nth-child(2){animation-delay:3.2s}
.s97-slide.on .fx-ring:nth-child(3){animation-delay:4.4s}
.s97-slide.on .fx-dust i{animation:s97dust var(--d) linear var(--dl) infinite}
@keyframes s97lights{0%{filter:brightness(.22) saturate(.5)}30%{filter:brightness(.4) saturate(.7)}34%{filter:brightness(.85)}38%{filter:brightness(.45)}46%{filter:brightness(.95)}52%{filter:brightness(.7)}100%{filter:brightness(1) saturate(1)}}
@keyframes s97fade{from{opacity:0}to{opacity:1}}
@keyframes s97breath{from{opacity:1}to{opacity:.62}}
@keyframes s97headon{0%{opacity:0}18%{opacity:.95}26%{opacity:.1}40%{opacity:1}48%{opacity:.35}62%{opacity:1}100%{opacity:1}}
@keyframes s97flare{0%{opacity:0;transform:translate(-50%,-50%) scaleX(.2)}40%{opacity:1}100%{opacity:1;transform:translate(-50%,-50%) scaleX(1)}}
@keyframes s97ring{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}12%{opacity:.95}100%{opacity:0;transform:translate(-50%,-50%) scale(3.4)}}
@keyframes s97dust{0%{opacity:0;transform:translate(0,0)}15%{opacity:.9}85%{opacity:.6}100%{opacity:0;transform:translate(-18px,-70px)}}
@keyframes s97push{from{transform:scale(1)}to{transform:scale(1.06)}}
.s97-scene .fx-badge{left:72.6%;top:43.6%;width:2.2%;aspect-ratio:1;transform:translate(-50%,-50%) scale(0);
  background:radial-gradient(circle,rgba(255,255,255,.95) 0 8%,rgba(255,226,160,.6) 22%,transparent 60%)}
.s97-scene .fx-badge::before,.s97-scene .fx-badge::after{content:"";position:absolute;left:50%;top:50%;width:260%;height:6%;transform:translate(-50%,-50%);
  background:linear-gradient(90deg,transparent,rgba(255,240,205,.95),transparent)}
.s97-scene .fx-badge::after{transform:translate(-50%,-50%) rotate(90deg)}
.s97-slide.on .fx-badge{animation:s97glint 5s ease-in-out 3s infinite}
@keyframes s97glint{0%,70%,100%{transform:translate(-50%,-50%) scale(0) rotate(0)}80%{transform:translate(-50%,-50%) scale(1) rotate(45deg)}90%{transform:translate(-50%,-50%) scale(.2) rotate(90deg)}}
.s97-slide.on{opacity:1}
.s97-slide.flip{transform:scaleX(-1)}
.s97-hero-inner{position:relative;width:calc(1200 * var(--u));height:100%;margin:0 auto}
.s97-headline{position:absolute;left:calc(40 * var(--u));right:0;top:calc(18 * var(--u));margin:0;text-align:center;font-family:var(--head);font-weight:700;text-transform:uppercase;line-height:1.12;letter-spacing:-.015em}
.s97-headline span{display:block;background:linear-gradient(180deg,#f3dfae 0%,#dcb877 45%,#b88d4a 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 2px rgba(0,0,0,.85))}
.s97-headline .l1{font-size:calc(40 * var(--u))}
.s97-headline .l2{font-size:calc(34 * var(--u))}
.s97-headline .l3{font-size:calc(42 * var(--u))}
.s97-arrow{position:absolute;top:calc(137 * var(--u));z-index:2;width:calc(52 * var(--u));height:calc(71 * var(--u));display:grid;place-items:center;border:0;padding:0;cursor:pointer;color:#f3e2b4;background:linear-gradient(180deg,#b38a47,#8a6630);box-shadow:0 3px 10px rgba(0,0,0,.5)}
.s97-arrow svg{width:calc(30 * var(--u));height:calc(30 * var(--u));stroke-width:1.6}
.s97-arrow.prev{left:0;border-radius:0 calc(4 * var(--u)) calc(4 * var(--u)) 0}
.s97-arrow.next{right:0;border-radius:calc(4 * var(--u)) 0 0 calc(4 * var(--u))}
.s97-arrow:hover{filter:brightness(1.12)}

/* fitment + OEM search */
.s97-fitment{position:absolute;left:calc(216 * var(--u));top:calc(166 * var(--u));width:calc(770 * var(--u))}
.s97-fit-head{position:relative;height:calc(28 * var(--u));margin:0 0 calc(3 * var(--u)) calc(27 * var(--u))}
.s97-fit-head h2{position:absolute;left:0;bottom:calc(3 * var(--u));margin:0;font:400 calc(20 * var(--u))/1 var(--display);color:#f4f1ea;text-shadow:0 1px 3px rgba(0,0,0,.9)}
.s97-fit-head p{position:absolute;left:calc(185 * var(--u));bottom:calc(5 * var(--u));margin:0;font:500 calc(15.5 * var(--u))/1 var(--head);text-transform:uppercase;color:#b9ae98;letter-spacing:.005em;text-shadow:0 1px 3px rgba(0,0,0,.9)}
.s97-fit-row{display:grid;grid-template-columns:1.06fr 1fr 1fr 1fr 1fr;gap:calc(10 * var(--u));width:calc(722 * var(--u));margin-left:calc(27 * var(--u))}
.s97-sel{position:relative;display:block;margin:0}
.s97-sel select,.s97-fit-go{appearance:none;-webkit-appearance:none;width:100%;height:calc(34 * var(--u));border-radius:calc(5 * var(--u));border:1px solid #9c7a3e;background:linear-gradient(180deg,rgba(62,55,44,.92),rgba(34,31,27,.92));color:#e9e4d8;padding:0 calc(26 * var(--u)) 0 calc(10 * var(--u));font:400 calc(18 * var(--u))/1 var(--display);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 2px 5px rgba(0,0,0,.45);cursor:pointer;text-align:left}
.s97-sel select option{color:#111;background:#fff;font-size:16px}
.s97-sel select:disabled{cursor:not-allowed}
.s97-sel .chev,.s97-fit-go .chev{position:absolute;right:calc(10 * var(--u));top:50%;width:calc(11 * var(--u));height:calc(8 * var(--u));margin-top:calc(-4 * var(--u));color:#d8b56c;pointer-events:none}
.s97-sel select.step{background:linear-gradient(180deg,#f0d593,#d3ab5f);color:#1e150a;border-color:#e9cc86}
.s97-sel select.step+.chev{color:#2a1d0c}
.s97-fit-go{position:relative}
.s97-fit-go:disabled{cursor:not-allowed}
.s97-fit-go.ready{background:linear-gradient(180deg,#f0d593,#d3ab5f);color:#1e150a;border-color:#e9cc86}
.s97-fit-go.ready .chev{color:#2a1d0c}
.s97-oem{display:flex;gap:calc(5 * var(--u));width:calc(770 * var(--u));margin:calc(6 * var(--u)) 0 0;padding:calc(7 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u)) calc(5 * var(--u));background:#0d0c0b;border-top:1px solid #6d5427;box-shadow:0 6px 14px rgba(0,0,0,.45)}
.s97-oem input{flex:1;min-width:0;height:calc(36 * var(--u));border:1px solid #9a9a96;border-radius:calc(3 * var(--u));background:linear-gradient(180deg,#efefed,#d9d9d6);color:#222;padding:0 calc(12 * var(--u));font:400 calc(18 * var(--u))/1 var(--display)}
.s97-oem input::placeholder{color:#6d6d69}
.s97-oem input::-webkit-search-cancel-button{display:none}
.s97-oem button{flex:0 0 calc(110 * var(--u));height:calc(36 * var(--u));border:1px solid #8f6827;border-radius:calc(3 * var(--u));background:linear-gradient(180deg,#e8c983,#c89d52 55%,#a87c33);color:#1a1208;font:400 calc(20 * var(--u))/1 var(--display);cursor:pointer;box-shadow:0 2px 4px rgba(0,0,0,.4)}
.s97-oem button:hover,.s97-shop:hover{filter:brightness(1.07)}
.s97-fit-msg{margin:calc(8 * var(--u)) 0 0;padding:6px 12px;border-left:3px solid var(--gold);background:rgba(13,12,11,.92);color:#f1e6cc;font-size:15px}
.s97-fit-msg{position:absolute;left:0;right:0;top:100%;z-index:3;box-shadow:0 6px 14px rgba(0,0,0,.4)}
.s97-garage-line{display:none}
.s97-garage-line button{background:none;border:0;padding:0 0 0 8px;color:#7a5718;text-decoration:underline;cursor:pointer;font-size:14px}

/* ---------- categories + product row on brushed metal ---------- */
.s97-cats{position:relative;padding:calc(36 * var(--u)) 0 calc(22 * var(--u));
  background-color:#cfcfcb;
  background-image:
    radial-gradient(ellipse 60% 70% at 50% 35%,rgba(255,255,255,.55),transparent 70%),
    linear-gradient(180deg,#d9d9d6 0%,#c9c9c5 55%,#b9b9b5 100%)}
.s97-cat-grid{display:grid;grid-template-columns:repeat(3,calc(300 * var(--u)));justify-content:center;margin-left:calc(20 * var(--u))}
.s97-cat{display:grid;justify-items:center;text-align:center}
.s97-cat-img{display:block;width:calc(230 * var(--u));height:calc(180 * var(--u));border:0;padding:0;background:none;cursor:pointer}
.s97-cat-img img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(0,0,0,.28));transition:transform .25s ease}
.s97-cat-img:hover img{transform:scale(1.04)}
.s97-cat h3{margin:calc(6 * var(--u)) 0 0;white-space:nowrap;font:400 calc(29 * var(--u))/1.1 var(--display);color:#141414}
.s97-shop{margin-top:calc(7 * var(--u));height:calc(28 * var(--u));padding:0 calc(14 * var(--u));border:1px solid #8f6827;border-radius:calc(3 * var(--u));background:linear-gradient(180deg,#e8c983,#c89d52 55%,#a87c33);color:#1a1208;font:400 calc(16 * var(--u))/1 var(--display);cursor:pointer;box-shadow:0 2px 4px rgba(0,0,0,.25)}

/* 12 part-category tiles: 2 rows of 6 */
.s97-cat-grid.s97-grid12{grid-template-columns:repeat(6,calc(190 * var(--u)));column-gap:calc(10 * var(--u));row-gap:calc(26 * var(--u));margin-left:0}
.s97-grid12 .s97-cat-img{width:calc(176 * var(--u));height:calc(137 * var(--u))}
.s97-grid12 .s97-cat h3{white-space:normal;min-height:2.2em;display:flex;align-items:center;justify-content:center;font-size:calc(21 * var(--u));line-height:1.08;margin-top:calc(4 * var(--u))}
.s97-grid12 .s97-shop{margin-top:calc(5 * var(--u))}

.s97-products{position:relative;width:calc(807 * var(--u));margin:calc(20 * var(--u)) auto 0}
.s97-track{display:flex;gap:calc(13 * var(--u));overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.s97-track::-webkit-scrollbar{display:none}
.s97-pcard{flex:0 0 calc(195 * var(--u));scroll-snap-align:start;display:grid;grid-template-rows:calc(118 * var(--u)) auto;border:1px solid #a98740;border-radius:calc(8 * var(--u));overflow:hidden;background:radial-gradient(ellipse 80% 70% at 50% 35%,#3a3833,#161513 70%,#0c0c0b);color:#eee;text-decoration:none!important;box-shadow:0 4px 10px rgba(0,0,0,.35);transition:transform .2s ease}
.s97-pcard:hover{transform:translateY(-2px);color:#fff}
.s97-pcard .pimg{display:grid;place-items:center;padding:calc(7 * var(--u));overflow:hidden}
.s97-pcard .pimg img{width:100%;height:calc(104 * var(--u));object-fit:contain;border-radius:calc(4 * var(--u));filter:drop-shadow(0 6px 8px rgba(0,0,0,.6))}
.s97-pcard .pbody{padding:calc(6 * var(--u)) calc(10 * var(--u)) calc(9 * var(--u));border-top:1px solid rgba(169,135,64,.4);display:grid;gap:2px;min-width:0}
.s97-pcard .pbody b{font:400 calc(15 * var(--u))/1.2 var(--display);color:#efe7d6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s97-pcard .pbody span{font:700 calc(15 * var(--u))/1.2 var(--display);color:#e8c983}
.s97-pnav{position:absolute;top:calc(44 * var(--u));width:calc(30 * var(--u));height:calc(30 * var(--u));border-radius:50%;border:1px solid #a47c37;background:linear-gradient(180deg,#e8cf95,#c9a15a);color:#3a2a10;display:grid;place-items:center;cursor:pointer;padding:0;box-shadow:0 2px 5px rgba(0,0,0,.3)}
.s97-pnav svg{width:60%;height:60%}
.s97-pnav.prev{left:calc(-36 * var(--u))}
.s97-pnav.next{right:calc(-36 * var(--u))}

/* ---------- toast ---------- */
.s97-toast a{color:var(--gold-hi,#efd17a);font-weight:700;margin-left:8px}

/* ---------- catalog / parts / search views (kept from the catalog build) ---------- */
.s97-catalog .page{padding-block:18px 56px}
.s97-catalog .crumbs{font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 14px}
.s97-catalog .crumbs a,.s97-catalog .crumbs button{color:var(--gold-deep);font-weight:600;text-decoration:none;background:none;border:0;padding:0;cursor:pointer;font-size:13px}
.s97-catalog .crumbs a:hover,.s97-catalog .crumbs button:hover{text-decoration:underline}
.s97-catalog .layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:28px;align-items:start}
.s97-catalog .side{display:grid;gap:16px}
.s97-catalog .side-card{background:#fff;border:1px solid var(--line);padding:16px 18px}
.s97-catalog .garage h2{display:flex;align-items:center;gap:10px;font:500 19px var(--display);margin:0 0 10px;color:#111}
.s97-catalog .garage h2 svg{width:26px;height:26px;color:#17120b}
.s97-catalog .garage .veh{font-weight:700;color:var(--gold-deep);font-size:16px}
.s97-catalog .garage .veh-sub{color:var(--muted);font-size:14px}
.s97-catalog .garage .change{margin-top:10px;background:none;border:0;padding:0;color:var(--gold-deep);font-weight:600;cursor:pointer;font-size:14px}
.s97-catalog .side-card h3{font:500 19px var(--display);margin:0 0 8px;color:#111}
.s97-catalog .side-cats{list-style:none;margin:0;padding:0}
.s97-catalog .side-cats>li>button{width:100%;text-align:left;background:none;border:0;border-left:2px solid transparent;padding:6px 10px;cursor:pointer;color:#2b2419;font-size:14px}
.s97-catalog .side-cats>li>button:hover{color:var(--gold-deep)}
.s97-catalog .side-cats>li>button.on{border-left-color:var(--gold);font-weight:700}
.s97-catalog .side-cats ul{list-style:none;margin:2px 0 8px;padding:0 0 0 22px}
.s97-catalog .side-cats ul button{background:none;border:0;padding:4px 0;cursor:pointer;color:#4a4235;font-size:13.5px;text-align:left}
.s97-catalog .side-cats ul button.d{color:#2b2419;font-weight:600}
.s97-catalog .side-cats ul button.cur{color:var(--gold-deep);font-weight:700}
.s97-catalog .main h1{font:600 clamp(24px,3vw,30px)/1.15 var(--display);margin:0 0 4px;color:#111}
.s97-catalog .lede{color:var(--muted);margin:0 0 18px;max-width:70ch}
.s97-catalog .main h2.sub{font:500 20px var(--display);margin:0 0 12px;color:#111}
.s97-catalog .cat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.s97-catalog .cat-tile{background:#fff;border:1px solid var(--line);padding:16px 10px 12px;display:grid;justify-items:center;gap:8px;cursor:pointer;color:#2b2419;font-weight:600;font-size:14px;text-align:center}
.s97-catalog .cat-tile svg{width:56px;height:56px}
.s97-catalog .cat-tile:hover{border-color:var(--gold)}
.s97-catalog .cat-tile[aria-expanded="true"]{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.s97-catalog .cat-tile small{font-weight:500;color:var(--muted);font-size:12px;min-height:1.5em}
.s97-catalog .subpanel{grid-column:1/-1;position:relative;background:#fff;border:1px solid var(--gold);border-top-width:3px;padding:18px 22px 20px;margin-block:4px}
.s97-catalog .subpanel::before{content:"";position:absolute;top:-12px;left:var(--px,50%);transform:translateX(-50%);border:10px solid transparent;border-top:0;border-bottom-color:var(--gold)}
.s97-catalog .subpanel h3{font:500 20px var(--display);margin:0 0 12px;color:#111}
.s97-catalog .sub-links{columns:3 190px;column-gap:28px;margin:0;padding:0;list-style:none}
.s97-catalog .sub-links li{break-inside:avoid;padding:3px 0}
.s97-catalog .sub-links button{background:none;border:0;padding:0;cursor:pointer;text-align:left;font-size:14px;color:#5e5647;display:inline-flex;align-items:center;gap:8px}
.s97-catalog .sub-links button.d{color:var(--gold-deep);font-weight:700}
.s97-catalog .sub-links button.d:hover{text-decoration:underline}
.s97-catalog .sub-links button svg{width:16px;height:16px;flex:0 0 auto}
.s97-catalog .sub-note{margin:14px 0 0;font-size:13.5px;color:#5e5647;background:var(--paper);padding:8px 12px;border-left:3px solid var(--gold)}
.s97-catalog .dcard{background:#fff;border:1px solid var(--line);margin-top:14px}
.s97-catalog .dcard-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line);gap:12px;flex-wrap:wrap}
.s97-catalog .dcard-head h2{font:600 19px var(--display);margin:0;color:#111;display:flex;align-items:center;gap:10px}
.s97-catalog .count{border:1px solid var(--line-2);border-radius:999px;padding:0 9px;font:600 13px var(--body);color:#3b352b}
.s97-catalog .phead,.s97-catalog .prow{display:grid;grid-template-columns:48px 108px minmax(0,1fr) 210px;gap:16px;padding:14px 16px;border-bottom:1px solid var(--line);align-items:start}
.s97-catalog .phead{font-weight:700;font-size:13px;color:#3a3328;padding-block:10px;background:#faf9f6}
.s97-catalog .prow{transition:background .15s}
.s97-catalog .prow.hl{background:#fbf5e6}
.s97-catalog .prow.flash{animation:flash 1.4s ease}
.s97-catalog .pthumb{width:108px;height:80px;border:1px solid #efece5;padding:4px;background:#fff;overflow:hidden}
.s97-catalog .pthumb svg{display:block;width:100%;height:100%}
.s97-catalog .pname{font-weight:600;font-size:17px;line-height:1.25;color:#6b4c1a;background:none;border:0;padding:0;cursor:pointer;text-align:left}
.s97-catalog .pname:hover{text-decoration:underline}
.s97-catalog .ppn{font-weight:600;font-size:14px;color:var(--gold-deep);letter-spacing:.02em;font-variant-numeric:tabular-nums;margin-top:3px}
.s97-catalog .brand{display:inline-block;font-size:12px;font-weight:700;padding:2px 8px;background:#17120b;color:var(--gold-hi);margin-top:7px;letter-spacing:.02em}
.s97-catalog .brand.oe{background:#ece6d8;color:#4a3d24}
.s97-catalog .meta{font-size:13px;color:#4b453b;margin-top:5px}
.s97-catalog .meta b{color:#221d15;font-weight:600}
.s97-catalog .price .list{text-decoration:line-through;color:#000;font-size:13px}
.s97-catalog .price .now{font-weight:700;font-size:21px;color:#e0201b;font-variant-numeric:tabular-nums}
.s97-catalog .qty{display:inline-grid;grid-template-columns:34px 46px 34px;border:1px solid var(--line-2);height:36px;margin-top:10px;background:#fff}
.s97-catalog .qty button{border:0;background:#f6f5f1;cursor:pointer;font-size:18px;color:#2b2419}
.s97-catalog .qty input{border:0;border-inline:1px solid var(--line-2);text-align:center;font-weight:600;font-size:15px;width:100%;min-width:0;padding:0}
.s97-catalog .add{display:block;margin-top:10px;width:100%;height:40px;font-size:15px}
.s97-catalog .empty{padding:24px 16px;color:var(--muted)}
.s97-catalog .results{background:#fff;border:1px solid var(--line)}
.s97-catalog .srow{display:grid;grid-template-columns:minmax(0,1fr) 200px 130px auto;gap:16px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)}
.s97-catalog .srow:last-child{border-bottom:0}
.s97-catalog .srow .fits{font-size:13px;color:#4b453b}
.s97-catalog .srow .fits b{display:block;color:#221d15}
.s97-catalog .srow .now{font-weight:700;font-size:17px;font-variant-numeric:tabular-nums}
.s97-catalog .vcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-bottom:22px}
.s97-catalog .vcard{background:#fff;border:1px solid var(--line);padding:14px 16px;display:grid;gap:4px}
.s97-catalog .vcard b{font-size:16px}
.s97-catalog .vcard span{font-size:13px;color:var(--muted)}
.s97-catalog .vcard button{justify-self:start;margin-top:8px}
.s97-catalog .rhead{font:500 20px var(--display);margin:0 0 10px;color:#111}
.s97-toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:#17120b;color:#f4ead3;border:1px solid var(--gold);padding:10px 16px;font-size:14px;z-index:70;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:calc(100vw - 32px)}
.s97-toast.show{opacity:1;transform:translate(-50%,0)}
.s97-catalog .ic .g{fill:url(#gg);stroke:#4a3712;stroke-width:1.4}
.s97-catalog .ic .o{fill:none;stroke:#2a2216;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.s97-catalog .ic .d{fill:#2a2216;stroke:#2a2216;stroke-width:1.4}
.s97-catalog .ic .w{fill:#fff;stroke:#2a2216;stroke-width:1.6}
.s97-catalog .ic .gs{fill:none;stroke:url(#gg);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round}
.s97-catalog .cnt{display:inline-block;min-width:20px;padding:0 6px;border-radius:999px;background:var(--gold-soft);border:1px solid #ead9b0;color:#6a5424;font:600 11.5px/18px var(--body);text-align:center;margin-left:4px}
.s97-catalog .side-cats>li>button .cnt{float:right;margin-top:1px}
.s97-catalog .side-cats ul button.none,.s97-catalog .sub-links button.none{color:#a39b8c}
.s97-catalog .sub-links button.none:hover{text-decoration:none}
.s97-catalog .cat-tile.none{opacity:.62}
.s97-catalog .cat-tile.none:hover{opacity:1}
.s97-catalog .phead.np,.s97-catalog .prow.np{grid-template-columns:108px minmax(0,1fr) 210px}
.s97-catalog .pthumb{display:grid;place-items:center}
.s97-catalog .pthumb img{width:100%;height:100%;object-fit:contain}
.s97-catalog .pthumb .ic{width:56px;height:56px}
.s97-catalog a.pname{display:inline-block;text-decoration:none}
.s97-catalog a.pname:hover{text-decoration:underline}
.s97-catalog .lede a,.s97-catalog .empty a,.s97-catalog .sub-note a{color:var(--gold-deep);font-weight:600}
.s97-catalog .dcard .empty{margin:0}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .s97-catalog .layout{grid-template-columns:minmax(0,1fr)}
  .s97-catalog .layout>.side{order:2;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
  .s97-catalog .cat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .s97-catalog .srow{grid-template-columns:minmax(0,1fr) auto}
  .s97-catalog .srow .fits{grid-column:1/-1;grid-row:2}
}
/* phone and small tablet: stack the hero instead of the mockup's fixed positions */
@media (max-width:959.98px){
  .s97-hero{height:auto;padding:26px 16px 18px}
  .s97-hero-inner{width:auto;height:auto}
  .s97-scene{--sx:.78}
  .s97-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(0,0,0,.35)}
  .s97-headline{position:static;margin:0 0 18px;left:auto}
  .s97-headline .l1{font-size:6.6vw}.s97-headline .l2{font-size:5.6vw}.s97-headline .l3{font-size:6.9vw}
  .s97-arrow{display:none}
  .s97-fitment{position:static;width:auto}
  .s97-fit-head{height:auto;margin:0 0 8px;display:grid;gap:4px;text-align:center}
  .s97-fit-head h2,.s97-fit-head p{position:static}
  .s97-fit-head h2{font-size:20px}.s97-fit-head p{font-size:12px}
  .s97-fit-row{width:auto;margin:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .s97-fit-go{grid-column:1/-1}
  .s97-sel select,.s97-fit-go{height:44px;font-size:17px;padding:0 30px 0 12px;border-radius:5px}
  .s97-sel .chev,.s97-fit-go .chev{width:12px;height:8px;right:12px;margin-top:-4px}
  .s97-oem{width:auto;margin-top:12px;padding:8px}
  .s97-oem input{height:44px;font-size:16px;padding:0 12px}
  .s97-oem button{flex-basis:96px;height:44px;font-size:18px}
  .s97-fit-msg{position:static}
  .s97-garage-line button{color:#f2d58c}
  .s97-cats{padding:26px 16px 24px}
  .s97-cat-grid{grid-template-columns:1fr;gap:18px;margin:0}
  .s97-cat-grid.s97-grid12{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px;max-width:none}
  .s97-grid12 .s97-cat-img{width:100%;height:auto;aspect-ratio:9/7}
  .s97-grid12 .s97-cat h3{font-size:19px}
  .s97-cat-img{width:min(300px,80vw);height:auto;aspect-ratio:23/18}
  .s97-cat h3{font-size:26px;margin-top:6px}
  .s97-shop{height:34px;font-size:16px;margin-top:8px;padding:0 18px}
  .s97-products{width:auto;margin-top:24px}
  .s97-pnav{display:none}
  .s97-track{gap:12px}
  .s97-pcard{flex-basis:62%;grid-template-rows:150px auto;border-radius:8px}
  .s97-pcard .pimg img{height:136px}
  .s97-pcard .pbody b,.s97-pcard .pbody span{font-size:15px}
}
@media (max-width:760px){
  .s97-catalog .phead{display:none}
  .s97-catalog .prow{grid-template-columns:84px minmax(0,1fr);gap:12px}
  .s97-catalog .pthumb{width:84px;height:64px}
  .s97-catalog .prow .price{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 12px;padding-top:4px;border-top:1px dashed var(--line)}
  .s97-catalog .prow .price .qty{margin:0;grid-row:1/3;grid-column:2}
  .s97-catalog .prow .price .add{grid-column:1/-1;margin-top:6px}
  .s97-catalog .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .s97-catalog .pthumb .ic{width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){
  .s97-slide,.s97-pcard,.s97-cat-img img{transition:none}
  .s97-slide.on .s97-scene,.s97-slide.on .s97-bg,.s97-slide.on .fx,.s97-slide.on .fx-ring,.s97-slide.on .fx-dust i{animation:none!important}
  .fx-ring,.fx-dust,.fx-badge{display:none}
}



.s97-catalog .cnt:empty{display:none}

/* 16 part-category tiles, same as the BMW Parts Store: photo, name below, no box */
.s97-t16-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:calc(30 * var(--u)) calc(20 * var(--u));max-width:calc(1160 * var(--u));margin:0 auto}
.s97-t16{display:flex;flex-direction:column;align-items:center;text-align:center;text-decoration:none!important;color:#8f6827!important}
.s97-t16-img{width:100%;height:calc(150 * var(--u));display:flex;align-items:center;justify-content:center}
.s97-t16-img img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .2s}
.s97-t16:hover .s97-t16-img img{transform:scale(1.06)}
.s97-t16-n{margin-top:calc(10 * var(--u));font:700 calc(19 * var(--u))/1.25 'Roboto Condensed','Arial Narrow',sans-serif}
.s97-t16:hover .s97-t16-n{color:#5e4316;text-decoration:underline}
@media (max-width:959.98px){
  .s97-t16-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px;max-width:none}
  .s97-t16-img{height:120px}
  .s97-t16-n{font-size:17px;margin-top:8px}
}

/* ---------- product sections under the categories (owner, 2026-09-28 22:41;
   europarts360.com as the example, in our gold and black) ---------- */
.s97-psecs{width:calc(1160 * var(--u));margin:calc(34 * var(--u)) auto 0}
.s97-psec{margin-bottom:calc(40 * var(--u))}
.psec-head{display:flex;align-items:center;gap:calc(22 * var(--u));padding-bottom:calc(10 * var(--u));margin-bottom:calc(18 * var(--u));border-bottom:1px solid rgba(143,104,39,.35)}
.psec-head h2{margin:0;flex:0 0 auto;font:700 calc(24 * var(--u))/1.1 var(--display);text-transform:uppercase;letter-spacing:.02em;color:#1c140a}
.psec-tabs{display:flex;gap:calc(22 * var(--u));margin-left:auto;overflow-x:auto;scrollbar-width:none}
.psec-tabs::-webkit-scrollbar{display:none}
.psec-tabs button{flex:0 0 auto;padding:4px 0;border:0;border-bottom:2px solid transparent;background:none;cursor:pointer;
  font:700 calc(13.5 * var(--u))/1.2 var(--display);text-transform:uppercase;letter-spacing:.04em;color:#7a6a4d}
.psec-tabs button:hover{color:#1c140a}
.psec-tabs button[aria-selected="true"]{color:#1c140a;border-bottom-color:#b8913f}
.psec-arrows{display:flex;gap:8px;flex:0 0 auto}
.psec-tabs + .psec-arrows{margin-left:0}
.psec-head h2 + .psec-arrows{margin-left:auto}
.psec-arrows button{width:calc(34 * var(--u));height:calc(34 * var(--u));min-width:30px;min-height:30px;display:grid;place-items:center;padding:0;cursor:pointer;
  border:1px solid #b8913f;border-radius:50%;background:linear-gradient(180deg,#1d1b17,#0e0d0b);color:#e4c47f}
.psec-arrows button:hover{color:#f6e3a8;border-color:#e4c47f}
.s97-psec[data-product-nav] .psec-arrows button:disabled{opacity:.4;cursor:default}
.psec-arrows svg{width:55%;height:55%}
.psec-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 4 * var(--pgap)) / 5);--pgap:calc(20 * var(--u));column-gap:var(--pgap);
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 2px 10px}
.psec-track::-webkit-scrollbar{display:none}
.s97-pc{scroll-snap-align:start;display:flex;flex-direction:column;min-width:0;border:1px solid #a98740;border-radius:calc(8 * var(--u));overflow:hidden;
  background:#fbfaf6;box-shadow:0 4px 12px rgba(0,0,0,.18);
  opacity:0;transform:translateY(22px);transition:opacity .5s ease,transform .5s ease,box-shadow .2s ease;transition-delay:calc(var(--i,0) * 80ms)}
.s97-pc.in{opacity:1;transform:none}
.s97-pc:hover{box-shadow:0 8px 20px rgba(0,0,0,.28)}
.pc-img{position:relative;display:block;flex:0 0 auto;aspect-ratio:1/1;overflow:hidden;background:radial-gradient(ellipse 80% 70% at 50% 40%,#3a3833,#161513 70%,#0c0c0b)}
.pc-img img{position:absolute;inset:calc(10 * var(--u));width:calc(100% - 20 * var(--u));height:calc(100% - 20 * var(--u));object-fit:contain;border-radius:calc(6 * var(--u));background:#fff;transition:transform .25s ease}
.pc-noimg{position:absolute;inset:0}
.s97-pc:hover .pc-img img{transform:scale(1.04)}
.pc-noimg{display:grid;place-items:center;color:#6b5a38}
.pc-noimg svg{width:36%;height:36%}
.pc-body{display:flex;flex-direction:column;gap:3px;padding:calc(10 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u));border-top:2px solid #b8913f;flex:1 1 auto}
.pc-brand{font:600 calc(11.5 * var(--u))/1.2 var(--display);text-transform:uppercase;letter-spacing:.06em;color:#8f7d5b}
.pc-name{font:400 calc(15 * var(--u))/1.25 var(--display);color:#1c1a16!important;text-decoration:none!important;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em}
.pc-name:hover{color:#8f6827!important}
.pc-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-top:auto;padding-top:4px}
/* new price in red, old price crossed out beside it (owner, 2026-10-05 17:59) */
.pc-price{display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font:700 calc(18 * var(--u))/1.2 var(--display);color:#e0201b}
.pc-price s{font:400 calc(13 * var(--u))/1.2 var(--display);color:#000;text-decoration-thickness:1px}
.pc-cart{flex:0 0 auto;width:calc(34 * var(--u));height:calc(34 * var(--u));min-width:30px;min-height:30px;display:grid;place-items:center;padding:0;cursor:pointer;
  border:1px solid #b8913f;border-radius:50%;background:linear-gradient(180deg,#1d1b17,#0e0d0b);color:#e4c47f}
.pc-cart:hover{color:#f6e3a8}
.pc-cart svg{width:56%;height:56%}
@media (prefers-reduced-motion: reduce){.s97-pc{opacity:1;transform:none;transition:none}}
@media (max-width:1100px){.psec-track{grid-auto-columns:calc((100% - 3 * var(--pgap)) / 4)}}
@media (max-width:959.98px){
  .s97-psecs{width:auto;margin:26px 16px 0}
  .psec-head{flex-wrap:wrap;gap:10px 14px}
  .psec-head h2{font-size:21px}
  .psec-tabs{order:3;flex:1 1 100%;margin-left:0;gap:18px}
  .psec-tabs button{font-size:13px}
  .psec-arrows{margin-left:auto}
  .psec-track{grid-auto-columns:calc((100% - 2 * var(--pgap)) / 3);--pgap:12px}
  .pc-name{font-size:14px}.pc-price{font-size:16px}.pc-price s{font-size:12px}.pc-brand{font-size:11px}
}
@media (max-width:600px){.psec-track{grid-auto-columns:calc((100% - var(--pgap)) / 2)}}

.pc-ask{font:700 calc(14 * var(--u))/1.2 var(--display);color:#8f6827;text-transform:uppercase;letter-spacing:.03em}
a.pc-cart{text-decoration:none!important}
.psec-head h2 a{color:inherit!important;text-decoration:none!important}
.psec-head h2 a:hover{color:#8f6827!important}

/* black banner between the product sections */
.s97-promo{background:#0b0b0a;border-top:3px solid #c9a052;border-bottom:3px solid #c9a052;color:#e8dcc3}
.s97-promo-in{width:calc(1160 * var(--u));margin:0 auto;padding:calc(40 * var(--u)) 0;display:grid;grid-template-columns:calc(420 * var(--u)) 1fr;gap:calc(56 * var(--u));align-items:center}
.s97-promo-img{display:grid;grid-template-columns:1fr 1fr;gap:calc(12 * var(--u))}
.s97-promo-img img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#fff;border-radius:calc(8 * var(--u));padding:calc(10 * var(--u));border:1px solid #a98740;box-shadow:0 6px 16px rgba(0,0,0,.5)}
.s97-promo-car{display:grid;place-items:center;overflow:hidden;border:1px solid #a98740;border-radius:calc(10 * var(--u));background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.7)}
.s97-promo-car img{display:block;width:100%;max-width:393px;height:auto}
.s97-promo-txt h2{margin:0 0 calc(16 * var(--u));font:700 calc(30 * var(--u))/1.2 var(--display);color:#f2d58c;text-transform:none}
.s97-promo-txt p{margin:0 0 calc(24 * var(--u));font:400 calc(16 * var(--u))/1.6 var(--display);color:#d8ceb9}
.s97-promo-btn{display:inline-block;padding:calc(12 * var(--u)) calc(28 * var(--u));border-radius:calc(6 * var(--u));
  background:linear-gradient(180deg,#e8c983 0%,#cfa55a 50%,#a97d34 100%);color:#1c140a!important;text-decoration:none!important;
  font:700 calc(15 * var(--u))/1 var(--display);text-transform:uppercase;letter-spacing:.06em;box-shadow:0 4px 12px rgba(0,0,0,.4)}
.s97-promo-btn:hover{filter:brightness(1.08)}
.s97-cats-more{padding-top:calc(6 * var(--u))}
.s97-cats-more .s97-psecs{margin-top:calc(34 * var(--u))}
@media (max-width:959.98px){
  .s97-promo-in{width:auto;margin:0 16px;padding:30px 0;grid-template-columns:1fr;gap:24px}
  .s97-promo-txt h2{font-size:23px}.s97-promo-txt p{font-size:15px}.s97-promo-btn{font-size:14px;padding:12px 24px}
}

/* hero tidy-up (owner, 2026-09-28 23:43): a soft dark panel behind the
   headline and the search keeps them clear of the lit tunnel and engine,
   and the vehicle search is a little smaller */
.s97-slides::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 34% 62% at 51% 52%,rgba(9,8,7,.78) 0%,rgba(9,8,7,.55) 55%,rgba(9,8,7,0) 100%)}
.s97-fitment{transform:scale(.86);transform-origin:50% 0;top:calc(170 * var(--u))}
.s97-headline{top:calc(22 * var(--u))}
@media (max-width:959.98px){.s97-fitment{transform:none}}

/* the hero grows with very wide screens instead of stopping at 1440 px
   (owner's reference, 2026-09-28 22:41): above ~2000 px its unit follows the
   screen width, so the photo, headline and search scale up together */
.s97-hero{--u:max(calc(clamp(960px, 100vw, 1440px) / 1200), calc(100vw / 1655))}

/* no category tiles on the home page any more (owner, 2026-09-28 23:16),
   also if an older copy of them was saved in the website builder */
.s97-cats .s97-t16-grid{display:none}
.s97-cats > .s97-psecs:first-of-type, #s97-psecs-a{margin-top:calc(6 * var(--u))}

/* right-to-left (Arabic): the scroll arrows point the way the row moves */
html[dir="rtl"] .psec-arrows svg,html[dir="rtl"] .s97-pnav svg,html[dir="rtl"] .pc-cart svg{transform:scaleX(-1)}
/* head and tail lights of the photo slides go off and on (owner, 2026-09-29 15:36) */
.s97-lights{position:absolute;inset:0;width:100%;height:100%;display:block;max-width:none;opacity:0;pointer-events:none}
.s97-slide.on .s97-lights{animation:s97blink 3s ease-out both}
@keyframes s97blink{0%{opacity:0}14%{opacity:1}22%{opacity:.1}30%{opacity:1}38%{opacity:.25}48%,100%{opacity:1}}
@media (prefers-reduced-motion: reduce){.s97-slide.on .s97-lights{animation:none;opacity:1}}

/* hero without the black header band (owner, 2026-10-01 11:28): the
   pictures get the band's height, no headline, and no dark panel or
   shadow behind the vehicle search */
.s97-hero{height:calc(412 * var(--u))}
.s97-headline{display:none}
.s97-slides::after{display:none}
.s97-fitment{top:calc(168 * var(--u))}
.s97-arrow{top:calc(170 * var(--u))}
.s97-oem{background:none;border-top:0;box-shadow:none;padding-left:0;padding-right:0}
@media (max-width:959.98px){.s97-hero{height:auto}}

/* full-photo slides (owner, 2026-10-01 11:46): the picture fills the hero,
   slow zoom while it is shown, only a light shade at the bottom edge */
.s97-photo{position:absolute;inset:0;width:100%;height:100%;max-width:none;display:block;object-fit:cover;transform-origin:50% 50%}
.s97-slide.on .s97-photo{animation:s97zoom 11s ease-out both}
@keyframes s97zoom{from{transform:scale(1)}to{transform:scale(1.07)}}
.s97-slides::after{display:block;content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(8,7,6,.45) 0%,rgba(8,7,6,0) 30%)}
@media (prefers-reduced-motion:reduce){.s97-slide.on .s97-photo{animation:none}}
/* OEM search bar exactly as wide as the Vehicle Fitment row above it, same
   left and right edges (owner, 2026-10-01 23:54) */
@media (min-width:960px){.s97-oem{width:calc(722 * var(--u));margin-left:calc(27 * var(--u))}}

/* =====================================================================
   Home sections from the owner's mock-up (2026-10-02 00:24, after
   europarts360.com), in our black and gold: Search by Collections under the
   slides; dark banners, customer reviews and the FAQ at the bottom.
   ===================================================================== */
.s97-sec-in{width:min(calc(1200 * var(--u)),calc(100% - 32px));margin:0 auto}
.s97-colls{background:#fff;padding:calc(26 * var(--u)) 0 calc(30 * var(--u));border-bottom:1px solid #e6dfcf}
.s97-colls-h{margin:0 0 calc(14 * var(--u));font:700 calc(19 * var(--u))/1.2 var(--s97-head,Montserrat,Arial,sans-serif);color:#141414}
.s97-colls-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(12 * var(--u))}
#wrapwrap .s97-coll{display:flex;align-items:center;gap:calc(12 * var(--u));padding:calc(10 * var(--u)) calc(14 * var(--u));border:1px solid #ddd3bd;border-radius:4px;background:#fff;color:#1c1a16;font:600 calc(15.5 * var(--u))/1.2 var(--s97-cond,Arial,sans-serif);text-decoration:none;transition:border-color .2s,box-shadow .2s,background .2s}
#wrapwrap .s97-coll:hover{border-color:#c99a43;background:#fbf7ee;box-shadow:0 4px 12px rgba(0,0,0,.08);color:#000}
.s97-coll svg{flex:0 0 auto;width:calc(38 * var(--u));height:calc(38 * var(--u));padding:calc(5 * var(--u));border-radius:4px;background:#111;color:#e4c47f}

.s97-band{position:relative;overflow:hidden;background:#0c0b09;color:#e9e1d0;padding:calc(64 * var(--u)) 0}
.s97-band-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.38}
.s97-band::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,7,6,.92) 0%,rgba(8,7,6,.6) 55%,rgba(8,7,6,.25) 100%)}
.s97-band-in{position:relative;z-index:1;max-width:calc(1200 * var(--u))}
.s97-band h2{max-width:calc(620 * var(--u));margin:0 0 calc(16 * var(--u));font:800 calc(32 * var(--u))/1.2 var(--s97-head,Montserrat,Arial,sans-serif);color:#f2d58c}
.s97-band p{max-width:calc(600 * var(--u));margin:0 0 calc(24 * var(--u));font-size:calc(16 * var(--u));line-height:1.6;color:#d8cfbd}
#wrapwrap .s97-band-btn{display:inline-flex;align-items:center;height:calc(42 * var(--u));padding:0 calc(22 * var(--u));border-radius:3px;background:linear-gradient(180deg,#e9c97e,#c99a43);color:#1a1208;font:700 calc(14 * var(--u)) var(--s97-cond,Arial,sans-serif);text-transform:uppercase;letter-spacing:.05em;text-decoration:none}
#wrapwrap .s97-band-btn:hover{filter:brightness(1.08)}

.s97-reviews{background:#fff;padding:calc(40 * var(--u)) 0}
.s97-reviews-h{margin:0 0 calc(18 * var(--u));text-align:center;font:800 calc(24 * var(--u))/1.2 var(--s97-head,Montserrat,Arial,sans-serif);color:#141414}
.s97-reviews-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(calc(230 * var(--u)),1fr);gap:calc(14 * var(--u));overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
.s97-review{scroll-snap-align:start;margin:0;padding:calc(16 * var(--u));border:1px solid #e3dccb;border-radius:4px;background:#fdfcf9;display:flex;flex-direction:column;gap:10px}
.s97-stars span{color:#d9d2c2;font-size:18px}
.s97-stars span.on{color:#c99a43}
.s97-review blockquote{margin:0;flex:1;font-size:15px;line-height:1.5;color:#2b2620}
.s97-review figcaption{font-size:13.5px;font-weight:700;color:#3a3226}
.s97-verified{margin-left:6px;font-weight:600;color:#2e7d32}

.s97-faq{background:#fff;padding:calc(44 * var(--u)) 0 calc(54 * var(--u))}
.s97-faq h2{margin:0;text-align:center;font:800 calc(24 * var(--u))/1.2 var(--s97-head,Montserrat,Arial,sans-serif);color:#141414}
.s97-faq-sub{margin:6px 0 calc(22 * var(--u));text-align:center;color:#6f6758;font-size:15px}
.s97-faq-list{max-width:calc(760 * var(--u));margin:0 auto}
.s97-faq details{border:1px solid #e3dccb;border-radius:4px;margin-bottom:10px;background:#fdfcf9}
.s97-faq summary{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;cursor:pointer;list-style:none;font-weight:700;font-size:15.5px;color:#1c1a16}
.s97-faq summary::-webkit-details-marker{display:none}
.s97-faq summary::after{content:"";flex:0 0 auto;width:9px;height:9px;border-right:2px solid #c99a43;border-bottom:2px solid #c99a43;transform:rotate(45deg);transition:transform .2s}
.s97-faq details[open] summary::after{transform:rotate(-135deg)}
.s97-faq details[open] summary{border-bottom:1px solid #eee6d4}
.s97-faq details p{margin:0;padding:12px 18px 16px;font-size:15px;line-height:1.6;color:#3f392e}
#wrapwrap .s97-faq details a{color:#8f6827;font-weight:700}

@media (max-width:959.98px){
  .s97-colls-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #wrapwrap .s97-coll{font-size:14px;padding:8px 10px;gap:8px}
  .s97-coll svg{width:32px;height:32px}
  .s97-colls-h{font-size:17px}
  .s97-band{padding:44px 0}
  .s97-band h2{font-size:24px}
  .s97-band p{font-size:15px}
  #wrapwrap .s97-band-btn{height:40px;font-size:14px;padding:0 18px}
  .s97-reviews-h,.s97-faq h2{font-size:21px}
  .s97-reviews-row{grid-auto-columns:80%}
}
/* banner photos: the owner's M4 studio photos (2026-10-02 00:33); the car
   sits on the right, the text on the dark left side */
.s97-band-bg{opacity:.7;object-position:70% 50%}
.s97-band::after{background:linear-gradient(90deg,rgba(8,7,6,.94) 0%,rgba(8,7,6,.78) 38%,rgba(8,7,6,.25) 70%,rgba(8,7,6,.1) 100%)}
@media (max-width:959.98px){.s97-band-bg{opacity:.45}.s97-band::after{background:rgba(8,7,6,.6)}}
/* every banner the same height for its width (owner, 2026-10-02 01:52), so
   the photos show the whole car on wide screens too instead of a zoomed
   strip; the text stays in the middle of the banner's height */
.s97-band{display:flex;align-items:center;min-height:clamp(380px,34vw,660px);padding:calc(40 * var(--u)) 0}
.s97-band-in{width:min(calc(1200 * var(--u)),calc(100% - 32px))}
/* the BMW picture has its own white background: it sits on the right at the
   banner's full height, the banner around it is white, text on the left */
.s97-band-mid{background:#fff;color:#2b2620}
.s97-band-mid::after{display:none}
.s97-band-mid .s97-band-bg{left:auto;right:4%;width:auto;max-width:55%;height:100%;object-fit:contain;object-position:right center;opacity:1}
.s97-band-mid h2{color:#141414}
.s97-band-mid p{color:#3f392e}
@media (max-width:959.98px){
  .s97-band{min-height:0}
  .s97-band-mid .s97-band-bg{position:relative;display:block;right:auto;max-width:70%;height:auto;margin:0 auto 18px}
  .s97-band-mid{flex-direction:column}
}
/* all three banners alike (owner, 2026-10-02 01:55): black on the left with
   the text, the picture fixed on the right half at the same width, fading
   into the black */
.s97-band,.s97-band-mid{background:#0b0a08;color:#e9e1d0}
.s97-band .s97-band-bg,.s97-band-mid .s97-band-bg{left:auto;right:0;top:0;width:56%;max-width:none;height:100%;object-fit:cover;object-position:center;opacity:1;margin:0;position:absolute;display:block}
.s97-band-mid .s97-band-bg{object-position:center 78%}
.s97-band::after,.s97-band-mid::after{display:block;content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0b0a08 0%,#0b0a08 44%,rgba(11,10,8,.75) 52%,rgba(11,10,8,0) 68%)}
.s97-band-mid h2{color:#f2d58c}
.s97-band-mid p{color:#d8cfbd}
.s97-band-in{position:relative;z-index:1}
.s97-band h2,.s97-band p{max-width:min(calc(560 * var(--u)),44vw)}
@media (max-width:959.98px){
  .s97-band,.s97-band-mid{flex-direction:column;align-items:stretch;padding:0 0 32px;min-height:0}
  .s97-band .s97-band-bg,.s97-band-mid .s97-band-bg{position:relative;width:100%;height:220px;right:auto}
  .s97-band::after,.s97-band-mid::after{top:0;height:220px;bottom:auto;background:linear-gradient(0deg,#0b0a08 0%,rgba(11,10,8,0) 45%)}
  .s97-band-in{margin-top:16px}
  .s97-band h2,.s97-band p{max-width:none}
}
/* banner pictures in the owner's order (2026-10-02 12:43): 1 the M interior
   (new), 2 the M4 from the front, 3 the M4 from behind */
.s97-band-mid .s97-band-bg{object-position:center}
/* banners scale with the page (owner, 2026-10-02 12:46): when the page is
   zoomed in or out the banner keeps the same shape, so the picture shows
   the same part of the car at every size (no upper limit any more) */
@media (min-width:960px){.s97-band{min-height:34vw}}
/* banner height as the owner framed it in red (2026-10-02 13:21): about
   21.5% of the page width; nothing else changes */
@media (min-width:960px){.s97-band{min-height:21.5vw;padding:calc(20 * var(--u)) 0}}

/* =====================================================================
   hero slides, owner 2026-10-02 14:18
   1. every photo whole: a frame with the photo's own proportions, centred,
      full height; a dark blurred copy of the photo fills the sides
   2. the slides slide in from the side (no fade)
   3. small light effects on the photo
   ===================================================================== */
@media (min-width:960px){.s97-hero{height:max(calc(412 * var(--u)),36vw)}}
.s97-slide{opacity:1;transform:translateX(100%);transition:transform 1.2s cubic-bezier(.65,0,.35,1)}
.s97-slide.on{opacity:1;transform:translateX(0)}
.s97-slide.out{transform:translateX(-100%)}
.s97-slide.out-r,.s97-slide.in-r{transform:translateX(100%)}
.s97-slide.in-l{transform:translateX(-100%)}
.s97-blurbg{position:absolute;inset:-30px;width:calc(100% + 60px);height:calc(100% + 60px);max-width:none;object-fit:cover;filter:blur(22px) brightness(.5) saturate(.9)}
.s97-frame{position:absolute;top:0;bottom:0;left:50%;height:100%;aspect-ratio:var(--ar);transform:translateX(-50%);overflow:hidden;box-shadow:0 0 60px 30px rgba(8,7,6,.55)}
.s97-frame .s97-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:none!important;transform:none}
.s97-slide.on .s97-photo{animation:none!important}
/* light effects: a soft round light at a spot of the photo */
.s97-fx{position:absolute;left:var(--x);top:var(--y);width:var(--w);aspect-ratio:var(--r);transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;mix-blend-mode:screen;opacity:0;
  background:radial-gradient(closest-side,var(--c) 0%,var(--c) 18%,transparent 100%)}
.s97-slide.on .s97-fx.glow{animation:s97on .9s ease-out calc(.9s + var(--d)) forwards,s97breathe 3.2s ease-in-out calc(1.8s + var(--d)) infinite alternate}
.s97-slide.on .s97-fx.blink{animation:s97blk 1s steps(1,end) calc(1s + var(--d)) infinite}
.s97-fx.smoke{mix-blend-mode:normal;filter:blur(18px);background:radial-gradient(closest-side,var(--c),transparent)}
.s97-slide.on .s97-fx.smoke{animation:s97smoke 7s ease-in-out .6s infinite}
@keyframes s97on{0%{opacity:0}35%{opacity:1}55%{opacity:.35}100%{opacity:.9}}
@keyframes s97breathe{from{opacity:.9}to{opacity:.6}}
@keyframes s97blk{0%{opacity:.95}50%{opacity:0}}
@keyframes s97smoke{0%{opacity:0;transform:translate(-50%,-50%) scale(.9)}30%{opacity:.7}100%{opacity:0;transform:translate(-62%,-56%) scale(1.25)}}
@media (max-width:959.98px){.s97-frame{box-shadow:none}}
@media (prefers-reduced-motion:reduce){.s97-slide{transition:none}.s97-fx{animation:none!important;opacity:.8}}
/* hero photo fills the whole screen (owner, 2026-10-02 14:37): the slider is
   the screen height under the header, the photo covers it edge to edge (no
   blurred sides) and is placed so the car stays whole; it is never cropped
   at the sides more than needed (height at most width / photo ratio) */
@media (min-width:960px){.s97-hero{height:clamp(480px, calc(100vh - 60 * var(--u)), 57vw)}}
.s97-blurbg{display:none}
.s97-frame{box-shadow:none;transform:none;aspect-ratio:auto;
  width:max(100cqw, calc(100cqh * var(--ar)));
  height:max(100cqh, calc(100cqw / var(--ar)));
  left:calc((100cqw - max(100cqw, calc(100cqh * var(--ar)))) / 2);
  top:calc((100cqh - max(100cqh, calc(100cqw / var(--ar)))) * var(--py, .5));
  bottom:auto}
/* phones and tablets (owner, 2026-10-02 14:38: right on every screen): the
   photo sits whole across the top at its own proportions, the search form
   under it on the dark background, so the car is never hidden behind the form */
@media (max-width:959.98px){
  .s97-hero{padding-top:calc(100vw / 1.78 + 14px)}
  .s97-slides{inset:0 0 auto 0;height:calc(100vw / 1.78)}
  .s97-slides::after{background:linear-gradient(0deg,rgba(11,10,9,.9) 0%,rgba(11,10,9,0) 35%)}
}

/* Fitment box: semi-transparent black panel behind heading + search (desktop only) */
@media (min-width:960px){
  .s97-fitment{background:rgba(0,0,0,.55);box-shadow:0 0 0 calc(14 * var(--u)) rgba(0,0,0,.55);border-radius:2px}
}


/* Mobile homepage: give the fitment controls more room in the first screen
   by using a shorter, centered car image. Desktop layout stays untouched. */
@media (max-width:959.98px){
  .s97-catalog .s97-hero{padding:calc(clamp(160px,37vw,240px) + 10px) 14px 14px}
  .s97-catalog .s97-slides{height:clamp(160px,37vw,240px)}
  .s97-catalog .s97-frame{
    width:min(100cqw,calc(100cqh * var(--ar)));
    height:100%;left:50%;right:auto;top:0;bottom:auto;
    transform:translateX(-50%);aspect-ratio:auto
  }
  .s97-catalog .s97-fit-head{margin-bottom:6px}
  .s97-catalog .s97-fit-row{gap:8px}
  .s97-catalog .s97-oem{margin-top:8px}
}

/* phones only (owner, 2026-10-11 11:25): the photo fills its own frame at the top
   of the hero and never goes outside it; "Vehicle Fitment" with
   "Search Your Performance Parts" under it on the left; under Make / Model /
   Year / Trim a Search button and a VIN Search button of the same size (the
   VIN button opens the VIN box). catalog.js adds the line and the button. */
.s97-fit-sub-m,.s97-vin-go{display:none}
@media (max-width:959.98px){
  #wrapwrap .s97-hero{height:auto;padding:0 0 18px;background:#0b0a09}
  #wrapwrap .s97-hero::after{display:none}
  #wrapwrap .s97-slides{position:relative;inset:auto;z-index:0;width:100%;height:auto;aspect-ratio:9/4;overflow:hidden}
  #wrapwrap .s97-frame{left:50%;top:50%;bottom:auto;width:max(100cqw,calc(100cqh * var(--ar)));height:auto;aspect-ratio:var(--ar);transform:translate(-50%,-50%)}
  #wrapwrap .s97-hero-inner{width:auto;height:auto;padding:14px 16px 0}
  #wrapwrap .s97-fit-head{display:block;height:auto;margin:0 0 12px;text-align:left}
  #wrapwrap .s97-fit-head h2{position:static;margin:0;font:400 21px/1.2 var(--display);color:#f4f1ea}
  #wrapwrap .s97-fit-head p{display:none}
  #wrapwrap .s97-fit-head p.s97-fit-sub-m{display:block;position:static;margin:3px 0 0;font:700 16px/1.25 var(--display);text-transform:none;letter-spacing:0;color:#fff}
  #wrapwrap .s97-fit-go,#wrapwrap .s97-vin-go{display:flex;align-items:center;justify-content:center;grid-column:1/-1;width:100%;height:46px;padding:0 12px;
    border:1px solid #8f6827;border-radius:5px;background:linear-gradient(180deg,#e8c983,#c89d52 55%,#a87c33);color:#1a1208;
    font:600 19px/1 var(--display);letter-spacing:.04em;text-align:center;box-shadow:0 2px 5px rgba(0,0,0,.45);cursor:pointer}
  #wrapwrap .s97-fit-go .chev{display:none}
  #wrapwrap .s97-fit-go:disabled{opacity:.75}
  /* Search and VIN Search side by side, same size (owner, 2026-10-11 12:06) */
  #wrapwrap .s97-fit-go,#wrapwrap .s97-vin-go{grid-column:auto;margin:0}
  #wrapwrap .s97-oem{display:none}
  #wrapwrap .s97-fitment.vin-open .s97-oem{display:flex}
}

/* Phones (owner, 2026-10-11 14:41, redone to his red frame at 15:12): search
   result rows like the store list rows: price, old price under it, quantity
   and a small Add to cart in a narrow column on the right, all centred. */
@media (max-width:959.98px){
  .s97-catalog .prow.np{grid-template-columns:84px minmax(0,1fr) 68px;gap:8px;align-items:center}
  .s97-catalog .prow.np .price{grid-column:3;grid-row:1;display:flex;flex-direction:column;align-items:center;gap:5px;width:68px;padding:0;border-top:0;text-align:center}
  .s97-catalog .prow.np .price .now{order:1;font-size:14px;white-space:nowrap}
  .s97-catalog .prow.np .price .list{order:2;font-size:11px;margin-top:-5px;white-space:nowrap}
  .s97-catalog .prow.np .price .qty{order:3;margin:0;width:66px;grid-template-columns:18px minmax(0,1fr) 18px;height:22px}
  .s97-catalog .prow.np .price .qty button{font-size:12px;padding:0}
  .s97-catalog .prow.np .price .qty input{font-size:12px}
  .s97-catalog .prow.np .price .add{order:4;margin:0;width:66px;padding:5px 2px;font-size:9.5px;line-height:1.2;white-space:nowrap}
  .s97-catalog .prow.np .price .btn-line.add{white-space:normal;line-height:1.25!important;font-size:11px}
}

/* Desktop homepage search heading; the mobile heading stays unchanged. */
.s97-catalog .s97-fit-title-desktop{display:none}
@media (min-width:960px){
  .s97-catalog .s97-fit-title-desktop{display:inline}
  .s97-catalog .s97-fit-title-mobile{display:none}
  .s97-catalog .s97-fit-head{height:auto}
  .s97-catalog .s97-fit-head h2.s97-fit-title{
    position:static;font-size:clamp(24px,calc(30 * var(--u)),36px);font-weight:700;line-height:1.15
  }
  .s97-catalog .s97-fit-head p:not(.s97-fit-sub-m){
    position:static;margin:calc(5 * var(--u)) 0 calc(7 * var(--u))
  }
  .s97-catalog .s97-fitment{box-shadow:0 0 0 calc(20 * var(--u)) rgba(0,0,0,.55)}
}

/* Correct only the two desktop search labels; retain the existing geometry. */
.s97-catalog .s97-fit-tagline-desktop{display:none}
@media (min-width:960px){
  .s97-catalog .s97-fit-tagline-desktop{display:inline}
  .s97-catalog .s97-fit-tagline-mobile{display:none}
  .s97-catalog .s97-fit-head p:not(.s97-fit-sub-m){text-transform:none}
}

/* Search result rows, desktop (owner, 2026-10-13 08:52): narrow column on the right, new
   price, old price under it, quantity and Add to cart at the same width. */
@media (min-width: 960px) {
  .s97-catalog .phead.np,.s97-catalog .prow.np{grid-template-columns:108px minmax(0,1fr) 104px}
  .s97-catalog .prow.np{align-items:center}
  .s97-catalog .prow.np .price{display:flex;flex-direction:column;align-items:center;gap:6px;width:104px;text-align:center}
  .s97-catalog .prow.np .price .now{order:1;font-size:17px;line-height:1.2;white-space:nowrap}
  .s97-catalog .prow.np .price .list{order:2;margin-top:-6px;font-size:11px;white-space:nowrap}
  .s97-catalog .prow.np .price .qty{order:3;margin:0;width:104px;grid-template-columns:28px minmax(0,1fr) 28px;height:26px}
  .s97-catalog .prow.np .price .qty button{font-size:14px;padding:0}
  .s97-catalog .prow.np .price .qty input{font-size:13px}
  .s97-catalog .prow.np .price .add{order:4;margin:0;width:104px;height:30px;padding:0 4px;font-size:11px;line-height:30px;white-space:nowrap}
  .s97-catalog .prow.np .price .btn-line.add{height:auto;white-space:normal;line-height:1.25!important;padding:5px 4px}
}

/* Old price (search rows and home cards): the line through the middle of the number in
   every browser font (owner, 2026-10-13 09:14) */
.s97-catalog .price .list,.pc-price s{position:relative;display:inline-block;width:max-content;text-decoration:none;white-space:nowrap}
.s97-catalog .price .list::after,.pc-price s::after{content:"";position:absolute;inset-inline:0;top:50%;height:1px;background:currentColor;transform:translateY(-50%);pointer-events:none}