/* ═══ PRODUCT LAYOUT ROUND (10-17) · shared base for fxp-1/2/3 ═══════════════════════════════
   One rule for every product picture on the homepage (Best sellers, Goes with your tuner, Packages,
   Shop by category): the photo is trimmed to the part (prep.py), sits in a frame ("well") of a fixed
   shape, with the same margin all round, dead centre. Each design only changes the skin.
   --wt/--wx/--wb = top / side / bottom margin inside the well.                                    */

main.fxp{--wt:11%;--wx:11%;--wb:11%}
main.fxp :is(#best .lx-rim,#addons .lx-aim,#packages .lx-pc .im,#cats .cat .im){
  position:relative!important;display:block!important;overflow:hidden!important;inset:auto!important;
  height:auto!important;min-height:0!important;max-height:none!important;width:100%!important;padding:0!important;margin:0!important;isolation:isolate}
main.fxp :is(#best .lx-rim,#addons .lx-aim,#packages .lx-pc .im,#cats .cat .im) img{
  position:absolute!important;z-index:1;top:var(--wt)!important;left:var(--wx)!important;right:auto!important;bottom:auto!important;
  width:calc(100% - 2 * var(--wx))!important;height:calc(100% - var(--wt) - var(--wb))!important;
  max-width:none!important;max-height:none!important;object-fit:contain!important;object-position:50% 50%!important;
  padding:0!important;margin:0!important;mix-blend-mode:multiply!important;transform:none;
  transition:transform .5s cubic-bezier(.2,.7,.2,1)!important}
main.fxp :is(#best .lx-rim,#addons .lx-aim,#packages .lx-pc .im,#cats .cat .im) img[data-fxp="ph"]{
  top:0!important;left:0!important;width:100%!important;height:100%!important;object-fit:cover!important;mix-blend-mode:normal!important}
main.fxp :is(#best .lx-row,#addons .lx-ac,#packages .lx-pc,#cats .cat):hover img{transform:scale(1.045)}
main.fxp :is(#best .lx-row,#addons .lx-ac,#packages .lx-pc,#cats .cat):hover img[data-fxp="ph"]{transform:scale(1.06)}
@media (prefers-reduced-motion:reduce){main.fxp :is(#best,#addons,#packages,#cats) img{transition:none!important;transform:none!important}}

/* best sellers: the three beside the tuner = square picture + words */
main.fxp #best .lx-rim{aspect-ratio:1/1;align-self:center}
main.fxp #best .lx-rim img.lx-dev{mix-blend-mode:normal!important;filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}

/* goes with your tuner: picture on top, words under (was a tiny picture in a tall box) */
main.fxp #addons .lx-ac{display:flex!important;flex-direction:column!important;grid-template-columns:none!important;padding:10px!important;gap:0!important}
main.fxp #addons .lx-aim{aspect-ratio:1/1;flex:none!important;align-self:stretch!important}
main.fxp #addons .lx-atx{padding:14px 6px 4px!important;display:flex!important;flex-direction:column;flex:1}
main.fxp #addons .lx-atx h3{font-size:17px!important;line-height:1.12}
main.fxp #addons .lx-buy{margin-top:auto!important;padding-top:12px;display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap!important}
main.fxp #addons .lx-buy>b{margin-right:0!important}

/* packages: picture, then words; the earlier "gain under the photo" rules undone here */
main.fxp #packages .lx-pc{display:flex!important;flex-direction:column!important}
main.fxp #packages .lx-pc .im{aspect-ratio:4/3;order:0;margin:0!important;border-radius:0}
main.fxp #packages .lx-pc .gain{margin:0!important;white-space:nowrap}
main.fxp #packages .lx-pc:not(:has(.gain)) .im{margin-bottom:0!important}
main.fxp #packages .lx-ptx{order:2}

/* shop by category: picture tile on top, name under */
main.fxp #cats .cat{display:flex!important;flex-direction:column!important;grid-template-columns:none!important;padding:10px!important;gap:0!important;align-items:stretch!important}
main.fxp #cats .cat .im{aspect-ratio:4/3!important;flex:none!important}
main.fxp #cats .cat .lb{position:static!important;padding:12px 4px 2px!important;background:none!important;border:0!important}

@media (min-width:1100px){
  main.fxp #best .lx-row{grid-template-columns:150px minmax(0,1fr)!important;gap:16px;padding:14px!important}
  main.fxp #best .lx-rtx{padding:4px 4px 4px 0!important}
}
@media (max-width:900px){
  main.fxp{--wt:10%;--wx:10%;--wb:10%}
  main.fxp #best .lx-side>*{grid-template-columns:104px minmax(0,1fr)!important;gap:14px;align-items:start!important}
  main.fxp #best .lx-side .lx-rim{align-self:start!important}
  main.fxp #best .lx-side .lx-rtx{padding:0!important}
  main.fxp #best .lx-side .lx-buy{flex-wrap:wrap!important;gap:8px}
  main.fxp #best .lx-side .lx-buy>b{flex-basis:100%}
  main.fxp #best .lx-side .lx-buy .btn{padding:11px 14px!important;flex:1 1 auto;justify-content:center;text-align:center}
  main.fxp #addons .lx-ag>*{flex-basis:58%!important;display:flex!important;flex-direction:column!important;grid-template-columns:none!important}
  main.fxp #addons .lx-aim{width:100%!important;height:auto!important;align-self:stretch!important}
  main.fxp #addons .lx-atx h3{font-size:15.5px!important}
  main.fxp #addons .lx-buy>b{font-size:18px!important}
  main.fxp #packages .lx-pg>*{flex-basis:80%!important}
  main.fxp #cats .cats{grid-auto-columns:44%!important}
  main.fxp #cats .cat .lb b{font-size:12.5px!important}
}

/* ═══ 3 · SPEC PLATE (Leica, Teenage Engineering, stamped equipment plates) ══════════════════════
   Each card is a machined data plate: square corners, a white photo window with registration marks
   and a stamped number, the part number in the window's corner, and the facts in boxed cells
   (gain | price) like the plate on an engine block.                                                */

main.fxp-3{--wt:13%;--wx:12%;--wb:11%;--ink-plate:#5c6678;--cell:rgba(140,170,230,.16)}
main.fxp-3 :is(#best .lx-row,#addons .lx-ac,#packages .lx-pc,#cats .cat){
  border-radius:6px!important;background:#0a0e15!important;border:1px solid rgba(255,255,255,.1)!important;box-shadow:none!important}
main.fxp-3 :is(#best .lx-rim,#addons .lx-aim,#packages .lx-pc .im,#cats .cat .im){
  border-radius:3px!important;border:0!important;box-shadow:none!important;
  background:
    linear-gradient(#8b95a6,#8b95a6) 10px 10px/12px 1.5px no-repeat,linear-gradient(#8b95a6,#8b95a6) 10px 10px/1.5px 12px no-repeat,
    linear-gradient(#8b95a6,#8b95a6) calc(100% - 10px) 10px/12px 1.5px no-repeat,linear-gradient(#8b95a6,#8b95a6) calc(100% - 10px) 10px/1.5px 12px no-repeat,
    linear-gradient(#8b95a6,#8b95a6) 10px calc(100% - 10px)/12px 1.5px no-repeat,linear-gradient(#8b95a6,#8b95a6) 10px calc(100% - 10px)/1.5px 12px no-repeat,
    linear-gradient(#8b95a6,#8b95a6) calc(100% - 10px) calc(100% - 10px)/12px 1.5px no-repeat,linear-gradient(#8b95a6,#8b95a6) calc(100% - 10px) calc(100% - 10px)/1.5px 12px no-repeat,
    #f3f4f6!important}
main.fxp-3 #cats .cat .im:has(img[data-fxp="ph"]){background:#0c121c!important}

/* stamped numbers: No. 01, 02 ... in each window */
main.fxp-3 :is(#addons .lx-ag,#packages .lx-pg,#cats .cats){counter-reset:fxn}
main.fxp-3 :is(#addons .lx-ac,#packages .lx-pc,#cats .cat){counter-increment:fxn}
main.fxp-3 :is(#addons .lx-aim,#packages .lx-pc .im,#cats .cat .im)::before{content:"No." counter(fxn,decimal-leading-zero);content:"No." counter(fxn,decimal-leading-zero) / "";position:absolute;z-index:3;
  left:30px;top:13px;font:600 10px/1 var(--mono);letter-spacing:.14em;color:var(--ink-plate)}
main.fxp-3 #cats .cat .im:has(img[data-fxp="ph"])::before{color:#e6ebf3;text-shadow:0 1px 3px rgba(0,0,0,.6)}

main.fxp-3 :is(#addons,#packages) h3,main.fxp-3 #packages h3 a{color:#f4f6fa!important;font-family:var(--osw)!important;text-transform:uppercase}
main.fxp-3 :is(#addons .lx-ac,#packages .lx-pc){position:relative}

/* the part number sits in the window's top right, like a stamp */
main.fxp-3 :is(#addons,#packages) .lx-pn{position:absolute!important;z-index:3;top:23px;right:38px;margin:0!important;
  font:600 9.5px/1 var(--mono)!important;letter-spacing:.12em;color:var(--ink-plate)!important}
main.fxp-3 :is(#addons,#packages) .lx-pn b{color:#1d5fd8!important}

/* packages: a grid plate; facts in two boxed cells */
main.fxp-3 #packages .lx-pc{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:"im im" "veh veh" "h3 h3" "sp sp" "gain buy";grid-template-rows:auto auto auto 1fr auto;padding:10px!important;row-gap:0}
main.fxp-3 #packages .lx-ptx{display:contents!important}
main.fxp-3 #packages .lx-pc .im{grid-area:im}
main.fxp-3 #packages .lx-veh{grid-area:veh;margin:14px 4px 0!important;font:600 10px/1.4 var(--mono)!important;letter-spacing:.12em;text-transform:uppercase;color:#7d8aa0!important}
main.fxp-3 #packages h3{grid-area:h3;margin:6px 4px 0!important;font-size:21px!important}
main.fxp-3 #packages .lx-sp{grid-area:sp;margin:4px 4px 14px!important;color:#b8c2d2!important}
main.fxp-3 #packages .lx-pc .gain,main.fxp-3 #packages .lx-buy{align-self:stretch!important;min-height:78px;box-sizing:border-box;border:1px solid var(--cell)!important;border-radius:0!important;margin:0!important;padding:10px 12px 11px!important}
main.fxp-3 #packages .lx-pc .gain{grid-area:gain;position:relative!important;top:auto!important;left:auto!important;display:flex!important;flex-direction:column;justify-content:flex-end;gap:4px;
  background:rgba(29,95,216,.12)!important;box-shadow:none!important;font:700 26px/1 var(--osw)!important;color:#fff!important;border-right:0!important}
main.fxp-3 #packages .lx-pc .gain small{display:block!important;font:600 10px/1.2 var(--mono)!important;letter-spacing:.04em;color:#9fb8e8}
main.fxp-3 #packages .lx-pc .gain::before{content:"Dyno gain";font:600 9px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#7d9bd6;margin-bottom:4px}
main.fxp-3 #packages .lx-buy{grid-area:buy;display:flex!important;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:6px;flex-wrap:nowrap!important}
main.fxp-3 #packages .lx-pc:not(:has(.gain)) .lx-buy{grid-column:1/-1}
main.fxp-3 :is(#packages,#addons) .lx-buy::before{content:"Price";font:600 9px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#7d8aa0}
main.fxp-3 #packages .lx-buy>b{font-size:24px!important;margin:0!important}
main.fxp-3 #packages .lx-buy .btn{position:absolute;inset:0;opacity:0;padding:0!important;border:0!important}   /* the whole price cell is the Details link */
main.fxp-3 #packages .lx-buy{position:relative}
main.fxp-3 #packages .lx-buy::after{content:"Details →";content:"Details →" / "";position:absolute;right:12px;top:10px;font:700 10px/1 var(--osw);letter-spacing:.14em;text-transform:uppercase;color:#6aa0ff}
main.fxp-3 #packages .lx-pc:hover{border-color:rgba(106,160,255,.45)!important}

/* addons: window, name, then a two-cell plate: price | add */
main.fxp-3 #addons .lx-atx{padding:14px 4px 0!important}
main.fxp-3 #addons .lx-buy{margin:12px -4px 0!important;padding:0!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto;border:1px solid var(--cell)}
main.fxp-3 #addons .lx-buy::before{display:none}
main.fxp-3 #addons .lx-buy>b{padding:10px 12px!important;font-size:19px!important;margin:0!important;border-right:1px solid var(--cell)}
main.fxp-3 #addons .lx-buy .btn{border-radius:0!important;margin:0!important;padding:0 16px!important;height:100%;display:flex;align-items:center}

/* best sellers beside the tuner: window + words */
main.fxp-3 #best .lx-rim{border-radius:3px!important}

/* categories: window, name, count stamped */
main.fxp-3 #cats .cat .lb{display:flex!important;flex-direction:row!important;justify-content:space-between;align-items:baseline;gap:10px;padding:12px 4px 4px!important}
main.fxp-3 #cats .cat .lb b{font-size:13.5px!important}
main.fxp-3 #cats .cat .lb small{font-size:10px!important;color:#6aa0ff!important;white-space:nowrap}
main.fxp-3 #cats .cat .lb::after{display:none}
main.fxp-3 #cats .cat:hover{border-color:rgba(106,160,255,.45)!important}

@media (min-width:1100px){
  main.fxp-3 #cats .cats{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:var(--c-gap)!important}
  main.fxp-3 #addons .lx-ag{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
@media (max-width:900px){
  main.fxp-3 :is(#addons,#packages) .lx-pn{top:20px;right:20px;font-size:8.5px!important}
  main.fxp-3 #addons .lx-pn{display:none!important}
  main.fxp-3 :is(#addons .lx-aim,#packages .lx-pc .im,#cats .cat .im)::before{left:26px;top:12px;font-size:9px}
  main.fxp-3 #packages .lx-pc .gain{font-size:22px!important}
  main.fxp-3 #packages .lx-buy>b{font-size:20px!important}
  main.fxp-3 #packages .lx-buy::after{display:none}
  main.fxp-3 #cats .cat .lb{flex-direction:column!important;gap:2px}
  main.fxp-3 #cats .cat .im::before{display:none}
}

/* ═══ SPEC PLATE, WHOLE PAGE (10-18) · shared base for fxs-1/2/3 ═══════════════════════════════
   Curtis picked product layout 3 (Spec Plate). This carries its language over the rest of the page:
   square machined plates instead of rounded glass tiles, hairline cells instead of pills, mono
   stamps for labels, registration marks on every photo / film window, section heads as a ruled
   strip of cells. Each skin (sp-1/2/3) only sets the variables + its own extras.
   Loaded after fx-c.css + fxp-base.css + fxp-3.css; everything scoped to main.fxs.            */

main.lms.fx-c.fxs{
  --c-r:4px;--c-r2:2px;--c-gap:12px;
  --s-bg:#04060a;--s-tile:#0a0e15;--s-tile2:#0a0e15;--s-edge:rgba(255,255,255,.1);--s-cell:rgba(140,170,230,.16);
  --s-ink:#f4f6fa;--s-ink2:#b8c2d2;--s-lab:#7d8aa0;--s-mark:#8b95a6;--s-acc:#1d5fd8;--s-acclt:#6aa0ff;
  --s-btn2:transparent;
  --c-edge:var(--s-edge);--c-edge2:var(--s-cell);--c-tile:var(--s-tile);--c-tile2:var(--s-tile2);--c-glow:none;
  /* four L-shaped registration marks, drawn by a ::before laid over a window */
  --s-marks:
    linear-gradient(var(--s-mark),var(--s-mark)) 0 0/12px 1.5px no-repeat,linear-gradient(var(--s-mark),var(--s-mark)) 0 0/1.5px 12px no-repeat,
    linear-gradient(var(--s-mark),var(--s-mark)) 100% 0/12px 1.5px no-repeat,linear-gradient(var(--s-mark),var(--s-mark)) 100% 0/1.5px 12px no-repeat,
    linear-gradient(var(--s-mark),var(--s-mark)) 0 100%/12px 1.5px no-repeat,linear-gradient(var(--s-mark),var(--s-mark)) 0 100%/1.5px 12px no-repeat,
    linear-gradient(var(--s-mark),var(--s-mark)) 100% 100%/12px 1.5px no-repeat,linear-gradient(var(--s-mark),var(--s-mark)) 100% 100%/1.5px 12px no-repeat;
  background:var(--s-bg)!important;
}
body:has(main.fxs){background:var(--s-bg)!important}
main.fxs .btn{border-radius:2px!important}
main.fxs .btn:not(.p){background:var(--s-btn2)!important}
main.fxs :is(.lx-q,.lx-rc a,.pchip,.c-chips a,.lx-tfq button){border-radius:0!important}
main.fxs :is(input,select,textarea){border-radius:2px!important}

/* every tile: a machined plate, square, hairline, no glow */
main.fxs :is(.c-garage .lx-hw,.c-find,.facts .fx>*,.lx-lead,.lx-row,.lx-rail .wrap,.lx-ac,#shop .lx-stx,.lx-rf,.lx-rp,#dyno .film,#dyno .txt,
  #stroker .lx-stx,#stroker .lx-pic,.lx-pc,.lx-yt,.cats .cat,.pcard,.cf,.mapcard,.lg .le){
  border-radius:var(--c-r)!important;border:1px solid var(--s-edge)!important;box-shadow:none!important}
main.fxs :is(.c-garage .lx-hw,.facts .fx>div,.lx-row,.lx-rail .wrap,.lx-ac,.lx-pc,.lx-yt,.cats .cat,.cf,#dyno .txt){background:var(--s-tile)!important}
main.fxs #best .lx-rim,main.fxs .lx-yim,main.fxs #tv .lx-yim{border-radius:var(--c-r2)!important}

/* registration marks on the photo + film windows */
main.fxs :is(.c-garage .lx-hw,.lx-rp,.lg .le,.mapcard,#stroker .lx-pic,.pcard,.lx-yim,#dyno .film){position:relative}
main.fxs :is(.c-garage .lx-hw,.lx-rp,.lg .le,.mapcard,#stroker .lx-pic,.pcard,.lx-yim,#dyno .film)::before{
  content:"";position:absolute;inset:10px;z-index:6;pointer-events:none;background:var(--s-marks);opacity:.9}
main.fxs :is(.c-garage .lx-hw,.lx-rp,.lg .le,.mapcard,#stroker .lx-pic,.pcard,#dyno .film){--s-mark:rgba(255,255,255,.55)}
main.fxs .lx-yim::before{inset:8px}

/* ── section heads: one ruled strip of cells ─ [SEC 01] [title / note] [link →] ── */
main.fxs .sh{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:stretch!important;gap:0!important;
  border-top:1px solid var(--s-edge)!important;border-bottom:1px solid var(--s-edge)!important;padding:0!important;margin-bottom:var(--c-gap)!important;position:relative}
main.fxs .sh::before{content:"";position:absolute;left:0;top:-1px;width:78px;height:2px;background:var(--s-acc)!important}
main.fxs .sh::after{display:none!important}
main.fxs .sh h2{display:grid!important;grid-template-columns:78px minmax(0,1fr);column-gap:20px;align-items:end;margin:0!important;padding:18px 0 16px!important;line-height:.95!important}
main.fxs .sh h2::before{content:"Sec " attr(data-n)!important;content:"Sec " attr(data-n) / ""!important;grid-row:1/3;grid-column:1;align-self:stretch;display:flex!important;flex-direction:column;justify-content:flex-start;
  margin:-18px 0 -16px!important;padding:20px 0 0 0;border-right:1px solid var(--s-edge);
  font:600 10px/1.5 var(--mono)!important;letter-spacing:.2em!important;text-transform:uppercase;color:var(--s-acclt)!important}
main.fxs .sh h2 small{grid-column:2;margin-top:10px!important;font:600 10px/1.4 var(--mono)!important;letter-spacing:.18em!important;text-transform:uppercase;color:var(--s-lab)!important}
main.fxs .sh h2 small:empty{display:none}
main.fxs .sh .lnk{display:flex!important;align-items:center;gap:10px;padding:0 0 0 22px!important;margin:0!important;border-left:1px solid var(--s-edge);
  font:700 11px/1 var(--osw)!important;letter-spacing:.16em!important;text-transform:uppercase;color:var(--s-acclt)!important;white-space:nowrap}
main.fxs .sh .lnk:hover{color:var(--s-ink)!important}

/* mono stamps everywhere a small label sits */
main.fxs .mn{font:600 10.5px/1.4 var(--mono)!important;letter-spacing:.18em!important;color:var(--s-acclt)!important}
main.fxs .mn b{color:var(--s-lab)!important}

/* ── garage: slideshow window, finder plate, facts as data cells ── */
main.fxs .c-garage .hero .lab{border-radius:0!important;font-family:var(--mono)!important;letter-spacing:.16em!important}
main.fxs .c-garage .hero .ctl{border-top:1px solid rgba(255,255,255,.14)!important}
main.fxs .c-garage .hero .ctl .dots button{border-radius:0!important}
main.fxs .c-garage .hero .ctl .dots button+button{border-left:1px solid rgba(255,255,255,.1)!important}
main.fxs .c-garage .hero .ctl .arr button{border-radius:0!important}
main.fxs .c-find{background:var(--s-tile)!important;border-top:2px solid var(--s-acc)!important}
main.fxs .c-find .lx-tfq{gap:0!important}
main.fxs .c-find .lx-tfq button{margin:0 0 0 -1px!important}
main.fxs .c-find .lx-tfq>span{margin-right:12px}
main.fxs .c-find .lx-tfs label>span,main.fxs .c-find .lx-tfq>span{font:600 9.5px/1.4 var(--mono)!important;letter-spacing:.18em!important;color:var(--s-lab)!important}
main.fxs .facts .fx>*{position:relative}
main.fxs .facts .fx>* b{font-family:var(--osw)!important}
main.fxs .facts .fx>* span{font-family:var(--mono)!important;letter-spacing:.12em!important;color:var(--s-lab)!important}
main.fxs .facts .fx>a,main.fxs .facts .fx>a:nth-child(5){background:var(--s-acc)!important;border-color:var(--s-acc)!important}
main.fxs .facts .fx>a b,main.fxs .facts .fx>a span{color:#fff!important}

/* ── best sellers ── */
main.fxs #best .lx-lead{background:var(--s-tile)!important}
main.fxs #best .lx-rank{border-radius:0!important}
main.fxs #best .lx-row{position:relative}
main.fxs #best .lx-row h3{font-family:var(--osw)!important;text-transform:uppercase}
main.fxs #best .lx-yr{border-radius:0!important}
main.fxs #best .lx-pn{font-family:var(--mono)!important;letter-spacing:.12em!important}

/* ── popular tuners: one strip of joined cells ── */
main.fxs #rail .lx-rc{gap:0!important}
main.fxs #rail .lx-rc a{border-radius:0!important;margin-left:-1px!important;border-color:var(--s-cell)!important}
main.fxs #rail .lx-rc a:hover{border-color:var(--s-acc)!important;position:relative;z-index:1}
main.fxs #rail .lx-rl{font:600 10px/1.3 var(--mono)!important;letter-spacing:.2em!important;color:var(--s-acclt)!important}

/* ── machine shop, dyno, stroker ── */
main.fxs #shop .lx-stx,main.fxs #stroker .lx-stx{background:var(--s-tile)!important}
main.fxs .lx-rf::before{border-radius:0!important}
main.fxs :is(.lx-rf,.lx-rp) figcaption b,main.fxs #log .le span b,main.fxs #log .lx-lvc b{font-family:var(--osw)!important;text-transform:uppercase;letter-spacing:.04em}
main.fxs :is(.lx-rf,.lx-rp) figcaption small,main.fxs #log .le span small,main.fxs #log .lx-lvc small,main.fxs #dyno .fc small{font-family:var(--mono)!important;letter-spacing:.16em!important}
main.fxs #dyno .snd,main.fxs #dyno .pp,main.fxs .hero .snd{border-radius:0!important}
main.fxs #dyno .svc{gap:0!important;counter-reset:svc;border:1px solid var(--s-cell)!important}
main.fxs #dyno .svc li{counter-increment:svc;border-radius:0!important;border:0!important;background:none!important;margin:0!important;position:relative;padding:30px 14px 14px!important}
main.fxs #dyno .svc li::before{content:counter(svc,decimal-leading-zero);content:counter(svc,decimal-leading-zero) / "";position:absolute;left:14px;top:12px;font:600 9.5px/1 var(--mono);letter-spacing:.18em;color:var(--s-acclt)}
main.fxs #dyno .svc li b{font-family:var(--osw)!important;text-transform:uppercase;letter-spacing:.06em}
main.fxs #dyno .ph{font-family:var(--mono)!important;letter-spacing:.14em}
main.fxs #stroker .lx-nums{gap:0!important;border:1px solid var(--s-cell)!important}
main.fxs #stroker .lx-nums>div{border-radius:0!important;border:0!important;background:none!important;padding:14px 16px!important}
main.fxs #stroker .lx-nums>div+div{border-left:1px solid var(--s-cell)!important}
main.fxs #stroker .lx-nums span{font-family:var(--mono)!important;letter-spacing:.14em!important;color:var(--s-lab)!important}
main.fxs #stroker .c-bars i{border-radius:0!important}

/* ── behind the builds / tv ── */
main.fxs #log .le span{border-top:1px solid rgba(255,255,255,.12)}
main.fxs #tv .lx-yt{counter-increment:tv;position:relative}
main.fxs #tv .lx-yg{counter-reset:tv}
main.fxs #tv .lx-yt>b{font-family:var(--osw)!important;text-transform:uppercase;letter-spacing:.03em;font-weight:500!important;line-height:1.2!important}
main.fxs #tv .lx-yim i{border-radius:0!important}

/* ── platforms: chips as cells ── */
main.fxs #platforms .pchips{gap:0!important}
main.fxs #platforms .pchip{margin:0 0 -1px -1px!important}
main.fxs #platforms .pchip:first-child{margin-left:0!important}
main.fxs #platforms .pc-line{font-family:var(--mono)!important;letter-spacing:.18em!important}

/* ── ask: the questions as numbered rows on one ruled list ── */
main.fxs #ask .lx-qs{counter-reset:q;gap:0!important}
main.fxs #ask .lx-q{counter-increment:q;border:0!important;border-top:1px solid var(--s-cell)!important;background:none!important;padding:16px 4px!important;display:flex;align-items:baseline;gap:16px}
main.fxs #ask .lx-q:last-of-type{border-bottom:1px solid var(--s-cell)!important}
main.fxs #ask .lx-q::before{content:"Q." counter(q,decimal-leading-zero)!important;content:"Q." counter(q,decimal-leading-zero) / ""!important;flex:none;margin:0!important;font:600 10px/1 var(--mono)!important;letter-spacing:.16em;color:var(--s-acclt)!important}
main.fxs #ask .lx-q:hover{color:var(--s-acclt)!important;background:none!important}
main.fxs #ask .lx-qs .btn{margin-top:18px!important;align-self:flex-start}

/* ── visit: form plate + map window ── */
main.fxs #visit .cf .fh b{font-family:var(--osw)!important;text-transform:uppercase}
main.fxs #visit .cf .fh span,main.fxs #visit .cf label{font-family:var(--mono)!important;letter-spacing:.16em!important}
main.fxs #visit .mapcard .lb{border-radius:0!important}
main.fxs #visit .mapcard .addr{border-top:1px solid var(--s-edge)}

/* ── brands strip ── */
main.fxs #brands .lhd span{font:600 10px/1.3 var(--mono)!important;letter-spacing:.2em!important}

/* ── phone ── */
@media (max-width:900px){
  main.lms.fx-c.fxs{--c-r:4px;--c-r2:2px;--c-gap:10px}
  main.fxs .c-chips{background:color-mix(in srgb,var(--s-bg) 92%,transparent)!important;gap:0!important}
  main.fxs .c-chips a{margin-left:-1px;border-color:var(--s-cell)!important}
  main.fxs .sh h2{grid-template-columns:54px minmax(0,1fr);column-gap:14px;padding:14px 0 12px!important}
  main.fxs .sh h2::before{margin:-14px 0 -12px!important;padding-top:16px;font-size:9px!important;letter-spacing:.14em!important}
  main.fxs .sh::before{width:54px}
  main.fxs .sh{grid-template-columns:minmax(0,1fr)}
  main.fxs .sh .lnk{border-left:0!important;border-top:1px solid var(--s-edge);padding:11px 0 11px 68px!important;font-size:10px!important;letter-spacing:.14em!important}
  main.fxs .sh h2 small{font-size:9px!important;letter-spacing:.12em!important}
  main.fxs #dyno .svc{border:0!important}
  main.fxs #dyno .svc li{border:1px solid var(--s-cell)!important}
  main.fxs #stroker .lx-nums>div{padding:12px 10px!important}
}

/* ── 10-19 (Curtis): captions clear the corner marks. The marks use the outer 18 px of every photo / film window;
   captions sat 14–21 px in, so some text touched a mark and the spacing looked uneven. One inset for all: 28 px
   (24 on phones), so every caption lines up the same distance from its frame. ── */
main.fxs{--s-capx:28px;--s-capy:24px}
main.fxs #shop .lx-rp figcaption{padding-left:var(--s-capx)!important;padding-right:var(--s-capx)!important;padding-bottom:var(--s-capy)!important}
main.fxs #log .lg .le>span{padding-left:var(--s-capx)!important;padding-right:var(--s-capx)!important;padding-bottom:var(--s-capy)!important}
main.fxs #log .lg .lx-lvc{left:0!important;right:0!important;bottom:0!important;padding:40px var(--s-capx) var(--s-capy)!important}
main.fxs #dyno .film .fc{left:var(--s-capx)!important;bottom:var(--s-capy)!important}
main.fxs #stroker .lx-pic.c-show .lx-pn{left:var(--s-capx)!important;bottom:var(--s-capy)!important}
main.fxs #visit .mapcard .addr{padding-left:var(--s-capx)!important;padding-right:var(--s-capx)!important;padding-bottom:var(--s-capy)!important}
@media (max-width:900px){main.fxs{--s-capx:26px;--s-capy:24px}}

/* ═══ 2 · BLUEPRINT ═════════════════════════════════════════════════════════════════════════════
   The page as an engineering drawing: a navy sheet with a fine grid, plates drawn in blue line,
   crosshair marks at every window, section heads as drawing title blocks with a dimension line. */
main.lms.fx-c.fxs-2{--s-bg:#06101f;--s-tile:rgba(8,20,42,.74);--s-tile2:rgba(8,20,42,.74);--s-edge:rgba(106,160,255,.26);--s-cell:rgba(106,160,255,.24);
  --s-lab:#7f96bf;--s-mark:#6aa0ff;--s-ink2:#b9c8e2;--line:rgba(106,160,255,.2);--line2:rgba(106,160,255,.3)}
main.fxs-2{--s-marks:
    linear-gradient(var(--s-mark),var(--s-mark)) 0 6.5px/14px 1px no-repeat,linear-gradient(var(--s-mark),var(--s-mark)) 6.5px 0/1px 14px no-repeat,
    linear-gradient(var(--s-mark),var(--s-mark)) 100% 6.5px/14px 1px no-repeat,linear-gradient(var(--s-mark),var(--s-mark)) calc(100% - 6.5px) 0/1px 14px no-repeat,
    linear-gradient(var(--s-mark),var(--s-mark)) 0 calc(100% - 6.5px)/14px 1px no-repeat,linear-gradient(var(--s-mark),var(--s-mark)) 6.5px 100%/1px 14px no-repeat,
    linear-gradient(var(--s-mark),var(--s-mark)) 100% calc(100% - 6.5px)/14px 1px no-repeat,linear-gradient(var(--s-mark),var(--s-mark)) calc(100% - 6.5px) 100%/1px 14px no-repeat}
main.fxs-2{background:
    linear-gradient(rgba(106,160,255,.11) 1px,transparent 1px) 0 0/120px 120px,
    linear-gradient(90deg,rgba(106,160,255,.11) 1px,transparent 1px) 0 0/120px 120px,
    linear-gradient(rgba(106,160,255,.05) 1px,transparent 1px) 0 0/24px 24px,
    linear-gradient(90deg,rgba(106,160,255,.05) 1px,transparent 1px) 0 0/24px 24px,
    radial-gradient(1400px 700px at 50% 0%,#0b1d3c,transparent 70%),var(--s-bg)!important}
body:has(main.fxs-2){background:#06101f!important}
main.fxs-2 :is(.c-garage .lx-hw,.lx-rp,.lg .le,.mapcard,#stroker .lx-pic,.pcard,#dyno .film){--s-mark:#9cc0ff}
main.fxs-2 :is(.c-garage .lx-hw,.lx-rp,.lg .le,.mapcard,#stroker .lx-pic,.pcard,.lx-yim,#dyno .film)::before{inset:4px}

/* plates are drawn, not filled: thin blue line, a little glass */
main.fxs-2 :is(.c-find,#shop .lx-stx,#dyno .txt,#stroker .lx-stx,.cf,#best .lx-lead){
  background:linear-gradient(180deg,rgba(13,32,66,.92),rgba(7,18,38,.92))!important}
main.fxs-2 .c-find{border-top:2px solid var(--s-acclt)!important}
main.fxs-2 .btn:not(.p){border-color:rgba(106,160,255,.45)!important;color:#dce8ff!important}
main.fxs-2 .btn.p{box-shadow:0 0 0 1px rgba(106,160,255,.5),0 10px 30px -12px rgba(29,95,216,.9)!important}

/* section heads: a drawing title block, boxed on all four sides, with a dimension line under it */
main.fxs-2 .sh{border:1px solid var(--s-edge)!important;background:rgba(8,20,42,.7);margin-bottom:calc(var(--c-gap) + 14px)!important}
main.fxs-2 .sh::before{left:-1px;top:-1px;width:79px}
main.fxs-2 .sh h2{padding-left:0!important}
main.fxs-2 .sh h2{grid-template-columns:104px minmax(0,1fr)!important}
main.fxs-2 .sh::before{width:105px!important}
main.fxs-2 .sh h2::before{content:"Sheet " attr(data-n)!important;content:"Sheet " attr(data-n) / ""!important;padding-left:14px;border-right-color:var(--s-edge);white-space:nowrap}
main.fxs-2 .sh::after{content:""!important;display:block!important;position:absolute;left:0;right:0;top:auto!important;bottom:-12px;height:7px;width:auto!important;
  background:linear-gradient(var(--s-mark),var(--s-mark)) 0 0/1px 7px no-repeat,linear-gradient(var(--s-mark),var(--s-mark)) 100% 0/1px 7px no-repeat,
    linear-gradient(rgba(106,160,255,.55),rgba(106,160,255,.55)) 0 3px/100% 1px no-repeat!important;opacity:.7}
main.fxs-2 .sh .lnk{padding-right:18px!important}

/* stamps and numbers in drawing blue */
main.fxs-2 .lx-pn b,main.fxs-2 #packages .lx-buy::after{color:#8db8ff!important}
main.fxs-2 #rail .lx-rc a{background:rgba(8,20,42,.6)}
main.fxs-2 .facts .fx>a{background:linear-gradient(135deg,#1d5fd8,#1546a8)!important}

/* the hero window: drawing callout in the top right */
main.fxs-2 .c-garage .lx-hw::after{content:"Sheet 00 · Dearborn Heights, Michigan";content:"Sheet 00 · Dearborn Heights, Michigan" / "";position:absolute;z-index:7;top:20px;right:28px;
  font:600 9.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#cfe0ff;padding:7px 10px;
  border:1px solid rgba(156,192,255,.55);background:rgba(6,16,31,.55);pointer-events:none}
@media (max-width:1099px){main.fxs-2 .c-garage .lx-hw::after{display:none}}
@media (max-width:900px){
  main.fxs-2{background:
    linear-gradient(rgba(106,160,255,.04) 1px,transparent 1px) 0 0/20px 20px,
    linear-gradient(90deg,rgba(106,160,255,.04) 1px,transparent 1px) 0 0/20px 20px,var(--s-bg)!important}
  main.fxs-2 .sh h2{grid-template-columns:76px minmax(0,1fr)!important}
  main.fxs-2 .sh::before{width:77px!important}
  main.fxs-2 .sh h2::before{padding-left:9px}
  main.fxs-2 .sh .lnk{padding-left:90px!important}
}

/* ═══ BEST SELLERS ON SMALLER COMPUTER SCREENS (10-19) · shared ═══════════════════════════════════
   Bug fixed in all three: between 1100 and 1199 px the theme's tablet rule (three side cards in a row)
   met the desktop split, so each card got ~140 px and the section grew to ~6,400 px tall.       */
@media (min-width:1100px){
  main.lms.fx-c.bsx #best .lx-lead,main.lms.fx-c.bsx #best .lx-plate{min-height:0!important}
  main.lms.fx-c.bsx #best .lx-ltx h3{font-size:clamp(30px,2.7vw,50px)!important}
}

/* 1 · TIGHT LIST: all three stay beside the tuner as one ruled list of compact rows (photo | name, fit | years + price + buttons).
   The tuner tile shrinks to the list's height, so nothing is empty. */
@media (min-width:1100px){
  main.lms.fx-c.bsx-1 #best .lx-stage{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)!important}
  main.lms.fx-c.bsx-1 #best .lx-side{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:repeat(3,1fr)!important;gap:0!important;
    border:1px solid var(--s-edge);background:var(--s-tile)}
  main.lms.fx-c.bsx-1 #best .lx-side .lx-row{border:0!important;border-radius:0!important;background:none!important;
    grid-template-columns:104px minmax(0,1fr)!important;gap:16px!important;padding:14px 16px!important;align-items:center!important}
  main.lms.fx-c.bsx-1 #best .lx-side .lx-row+.lx-row{border-top:1px solid var(--s-edge)!important}
  main.lms.fx-c.bsx-1 #best .lx-side .lx-rtx{display:grid!important;grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:2px;align-items:center;padding:0!important}
  main.lms.fx-c.bsx-1 #best .lx-side .lx-rtx>*{grid-column:1/-1;margin:0!important}
  main.lms.fx-c.bsx-1 #best .lx-lead .lx-buy{flex-wrap:nowrap!important}
  main.lms.fx-c.bsx-1 #best .lx-side .lx-rtx h3{font-size:18px!important;line-height:1.1!important}
  main.lms.fx-c.bsx-1 #best .lx-side .lx-veh{font-size:13px!important}
  main.lms.fx-c.bsx-1 #best .lx-side .lx-sp{font-size:12.5px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  main.lms.fx-c.bsx-1 #best .lx-side .lx-pn{display:none!important}
  main.lms.fx-c.bsx-1 #best .lx-side .lx-yr{grid-column:1/-1!important;justify-self:start;margin-top:6px!important}
  main.lms.fx-c.bsx-1 #best .lx-side .lx-yr button{min-height:34px!important;padding:8px 10px!important}
  main.lms.fx-c.bsx-1 #best .lx-side .lx-buy{grid-column:1/-1!important;margin-top:8px!important;display:flex!important;flex-wrap:nowrap!important;gap:8px!important;align-items:center}
  main.lms.fx-c.bsx-1 #best .lx-side .lx-buy>b{font-size:20px!important;margin-right:auto!important}
  main.lms.fx-c.bsx-1 #best .lx-side .lx-buy .btn{padding:9px 12px!important;min-height:36px}
}