/* ════════════════════════════════════════
   V10 · PREMIUM CONFIGURATOR
   Tesla/Rivian feel · airy · confident · sleek light
   ════════════════════════════════════════ */
:root{
  --bg:#ffffff;
  --bg-2:#f5f7fa;
  --bg-3:#e9edf3;
  --ink:#0d1424;
  --ink-2:#32405a;
  --muted:#6b7797;
  --line:#e1e5ed;
  --line-soft:#eef1f6;
  --blue:#1d4ed8;
  --blue-2:#1e40af;
  --navy:#0d1424;
  --orange:#ff7a1a;
  --orange-2:#e66a0f;
  --yellow:#fbbf24;
  --green:#10b981;
  --shadow:0 2px 4px rgba(13,20,36,.04), 0 12px 28px -12px rgba(13,20,36,.1);
  --shadow-lg:0 30px 80px -30px rgba(13,20,36,.2);
  --radius:8px;
  --radius-lg:16px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);color:var(--ink);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;font-weight:400;letter-spacing:-0.005em;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}
h1,h2,h3,h4{color:var(--ink);letter-spacing:-0.03em;font-weight:700;line-height:1.05}
.mono{font-variant-numeric:tabular-nums}

.utility{background:var(--ink);color:rgba(255,255,255,.85);font-size:13px}
.utility .wrap{display:flex;justify-content:space-between;align-items:center;height:40px;padding:0 32px}
.utility a{color:rgba(255,255,255,.85);margin-right:24px;font-weight:500}
.utility a:hover{color:#fff}
.utility .right{display:flex;gap:0}
.ticker{color:var(--yellow);font-weight:600}
.ticker::before{content:"";display:inline-block;width:6px;height:6px;background:var(--green);border-radius:50%;margin-right:8px;vertical-align:middle;animation:none}

.masthead{background:var(--bg);border-bottom:1px solid var(--line-soft);position:sticky;top:0;z-index:50}
.masthead::after{display:none}
.masthead .wrap{display:grid;grid-template-columns:auto 1fr auto;gap:36px;align-items:center;padding:20px 32px}
.wordmark{display:flex;align-items:center;gap:12px}
.wordmark .logo-img{height:44px;width:auto}
.wordmark .est{display:none}

.search{display:flex;align-items:center;background:var(--bg-2);border:1px solid transparent;border-radius:8px;height:46px;overflow:hidden;transition:all .2s}
.search:focus-within{background:var(--bg);border-color:var(--blue);box-shadow:0 0 0 3px rgba(29,78,216,.1)}
.search .browse{padding:0 16px;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;height:100%;display:flex;align-items:center;gap:6px}
.search .divider{width:1px;height:22px;background:var(--line)}
.search input{flex:1;border:0;outline:0;padding:0 18px;font-family:inherit;font-size:15px;color:var(--ink);background:transparent}
.search input::placeholder{color:var(--muted)}
.search button.submit{background:var(--ink);color:#fff;border:0;padding:0 22px;height:100%;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer}
.search button.submit:hover{background:var(--blue)}

.head-right{display:flex;gap:12px;align-items:center}
.flag-chip{display:flex;gap:10px;align-items:center;padding:8px 14px;background:var(--bg-2);border-radius:8px}
.flag-chip .stars{width:22px;height:14px;background:linear-gradient(180deg,#c4152b 0 33%,#fff 33% 66%,#c4152b 66%);border-radius:2px;position:relative;overflow:hidden}
.flag-chip .stars::before{content:"";position:absolute;inset:0 60% 55% 0;background:#1a3478}
.flag-chip .txt{font-size:11px;color:var(--muted);line-height:1.2}
.flag-chip .txt b{color:var(--ink);font-weight:700;display:block;font-size:12px}
.cart-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;background:var(--ink);color:#fff;border-radius:8px;font-size:14px;font-weight:600;font-family:inherit}
.cart-btn:hover{background:var(--blue)}
.cart-btn .count{background:var(--orange);color:#fff;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700}

.crumbs{background:var(--bg);border-bottom:1px solid var(--line-soft)}
.crumbs .wrap{display:flex;align-items:center;gap:10px;height:48px;font-size:13px;color:var(--muted);font-weight:500}
.crumbs a:hover{color:var(--ink)}
.crumbs .sep{opacity:.4}
.crumbs .here{color:var(--ink);font-weight:600}

.hero{padding:56px 0 80px;background:linear-gradient(180deg,var(--bg-2) 0%,var(--bg) 60%)}
.hero-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:72px;align-items:start}
.gallery{position:sticky;top:100px;align-self:start}

/* At-a-Glance card under thumbs */
.at-glance{margin-top:28px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px 28px;box-shadow:var(--shadow)}
.at-glance-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.at-glance-head h4{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-0.015em}
.at-glance-head .brand-chip{display:inline-flex;align-items:center;gap:6px;background:var(--bg-2);padding:4px 10px;border-radius:6px;font-size:11px;font-weight:700;color:var(--ink)}
.at-glance-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.glance-item{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line-soft)}
.glance-item:nth-child(-n+2){border-top:0;padding-top:0}
.glance-item svg{color:var(--blue);flex:none;margin-top:2px}
.glance-item .k{font-size:11px;color:var(--muted);font-weight:500;line-height:1.2}
.glance-item .v{font-size:13px;font-weight:700;color:var(--ink);margin-top:2px;line-height:1.2}

/* Sticky gallery gracefully disables on narrow screens */
@media(max-width:960px){.gallery{position:static}}

.gallery .frame{position:relative;background:var(--bg);border:0;border-radius:var(--radius-lg);aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden;box-shadow:var(--shadow-lg)}
.gallery .frame::before,.gallery .frame::after,.gallery .corner,.gallery .stamp,.gallery .ref{display:none}
.gallery .frame img{max-width:82%;max-height:82%}
.gallery .zoom{position:absolute;bottom:18px;right:18px;display:flex;gap:8px}
.gallery .zoom button{background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border:1px solid var(--line);width:40px;height:40px;border-radius:8px;cursor:pointer;display:grid;place-items:center;color:var(--ink);transition:all .15s}
.gallery .zoom button:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

.thumbs{display:grid;grid-template-columns:repeat(8,1fr);gap:10px;margin-top:14px}
.thumb{position:relative;aspect-ratio:1;background:var(--bg);border:2px solid transparent;border-radius:10px;display:grid;place-items:center;cursor:pointer;transition:all .15s;box-shadow:var(--shadow)}
.thumb img{max-width:80%;max-height:80%}
.thumb.active{border-color:var(--blue)}
.thumb:hover:not(.active){transform:translateY(-2px)}
.thumb .idx{display:none}

.summary{padding-top:8px}
.summary .eyebrow{display:flex;gap:8px;margin-bottom:18px;align-items:center}
.summary .eyebrow .line{display:none}
.summary .eyebrow .tag{font-size:12px;color:var(--blue);font-weight:700;letter-spacing:0.06em;text-transform:uppercase;padding:0}

.title{font-size:48px;font-weight:800;letter-spacing:-0.035em;line-height:1.05;color:var(--ink)}
.title em{font-style:normal;color:var(--ink);font-weight:800}
.title em::after{content:"";display:inline-block;width:8px;height:8px;background:var(--orange);border-radius:50%;vertical-align:super;margin-left:6px;margin-top:12px}
.title .sub{display:block;font-size:17px;color:var(--muted);margin-top:20px;font-weight:400;line-height:1.6;letter-spacing:-0.005em}

.meta-row{display:flex;gap:28px;margin:24px 0 0;padding:20px 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.meta-item{display:flex;gap:8px;align-items:baseline}
.meta-item .label{font-size:13px;color:var(--muted);font-weight:500;letter-spacing:0;text-transform:none}
.meta-item .val{font-size:14px;color:var(--ink);font-weight:700;font-family:inherit}
.stars-row{display:flex;gap:8px;align-items:center}
.stars{color:var(--yellow);font-size:14px}
.stars-row .num{font-weight:700;color:var(--ink)}
.stars-row .cnt{color:var(--muted);font-size:13px}

.price-card{background:var(--bg);border:0;border-radius:0;padding:32px 0 0;margin-top:0;box-shadow:none;position:relative}
.price-card::before,.price-card::after{display:none}
.save-pill{display:inline-flex;align-items:center;gap:6px;background:var(--orange);color:#fff;padding:5px 11px;border-radius:980px;font-size:11px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;margin-bottom:12px;font-family:inherit}
.save-pill .dot{display:none}
.price-main{display:flex;align-items:baseline;font-family:inherit;line-height:1}
.price-main .cur{font-size:26px;font-weight:600;color:var(--ink);margin-right:2px}
.price-main .dol{font-size:72px;font-weight:800;letter-spacing:-0.04em;color:var(--ink)}
.price-main .cts{font-size:26px;font-weight:600;color:var(--ink);font-family:inherit;margin-top:8px}
.affirm{display:flex;align-items:center;gap:8px;padding-top:16px;margin-top:18px;border-top:1px solid var(--line-soft);font-size:14px;color:var(--muted)}
.affirm b{color:var(--ink);font-weight:700}
.affirm-logo{color:var(--blue);font-weight:700;font-style:normal;border-bottom:0;padding:0}
.affirm a{color:var(--blue);font-weight:600}

.buy-row{display:grid;grid-template-columns:auto 1fr 1fr;gap:10px;margin-top:24px}
.qty{display:flex;align-items:center;background:var(--bg-2);border:1px solid var(--line);border-radius:8px;height:56px;width:130px;overflow:hidden}
.qty button{width:42px;height:100%;background:transparent;border:0;font-size:18px;cursor:pointer;color:var(--ink);font-weight:600}
.qty input{flex:1;text-align:center;border:0;outline:0;background:transparent;font-family:inherit;font-size:16px;font-weight:700;color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:56px;border:0;border-radius:8px;cursor:pointer;font-family:inherit;font-size:15px;font-weight:700;transition:all .15s;padding:0 24px;text-transform:none;letter-spacing:-0.005em}
.btn.primary{background:var(--ink);color:#fff}
.btn.primary:hover{background:var(--blue)}
.btn.secondary{background:var(--orange);color:#fff}
.btn.secondary:hover{background:var(--orange-2)}
.btn .arrow{display:none}

.bullets{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;margin-top:28px}
.bullet{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--ink-2)}
.bullet svg{color:var(--green);width:18px;height:18px;flex:none}
.bullet b{color:var(--ink);font-weight:700}
.bullet span{color:var(--muted)}

.warranty{display:flex;gap:16px;align-items:center;background:var(--ink);padding:22px 26px;border-radius:var(--radius-lg);margin-top:22px;color:#fff}
.warranty::before{display:none}
.warranty .seal{width:52px;height:52px;border:2px solid var(--yellow);background:transparent;color:var(--yellow);border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:700;text-align:center;line-height:1}
.warranty .txt .tt{font-size:17px;font-weight:700;color:#fff;letter-spacing:-0.01em}
.warranty .txt .ss{font-size:14.5px;color:rgba(255,255,255,.78);margin-top:3px;line-height:1.45}

.trust-strip{display:grid;grid-template-columns:repeat(3,1fr);margin-top:14px;background:var(--bg-2);border:0;border-radius:var(--radius-lg)}
.trust-strip > div{padding:16px 18px;display:flex;gap:12px;align-items:center}
.trust-strip > div + div{border-left:1px solid var(--bg-3)}
.trust-strip .ico{width:36px;height:36px;border-radius:10px;background:var(--bg);color:var(--blue);display:grid;place-items:center;flex:none;box-shadow:var(--shadow)}
.trust-strip .tt{font-size:13px;font-weight:700;color:var(--ink);line-height:1.25}
.trust-strip .ss{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.3}
.trust-strip .txt{min-width:0;flex:1}

.sec-ctas{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.sec-ctas .link-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border:1px solid var(--line);background:var(--bg);border-radius:8px;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;font-family:inherit;letter-spacing:0;text-transform:none}
.sec-ctas .link-btn:hover{border-color:var(--ink);background:var(--bg-2)}
.sec-ctas .link-btn.wrenchy{background:var(--blue);color:#fff;border-color:var(--blue)}
.sec-ctas .link-btn.wrenchy:hover{background:var(--blue-2);border-color:var(--blue-2)}

.notes{margin-top:24px;background:var(--bg-2);border:0;border-radius:var(--radius-lg);padding:28px 32px}
.notes::before{display:none}
.notes h4{font-size:20px;font-weight:700;color:var(--ink);margin-bottom:12px;display:flex;gap:8px;letter-spacing:-0.02em}
.notes h4 em{font-style:normal;color:var(--blue)}
.notes p{font-size:15px;color:var(--ink-2);line-height:1.65;margin-bottom:10px}
.notes .brand-line{display:flex;gap:24px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.notes .brand-line span{font-size:13px;color:var(--muted);font-family:inherit;letter-spacing:0}
.notes .brand-line span b{color:var(--ink);font-weight:700;margin-left:6px}

.wrenchy-band{margin:24px 0 20px;background:var(--ink);border-radius:var(--radius-lg);padding:48px 56px;display:grid;grid-template-columns:auto 1fr auto;gap:36px;align-items:center;color:#fff;position:relative;overflow:hidden}
.wrenchy-band::before{content:"";position:absolute;right:-100px;bottom:-100px;width:500px;height:500px;background:radial-gradient(circle,rgba(255,122,26,.3),transparent 60%);pointer-events:none}
.wrenchy-robot{width:92px;height:92px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--blue-2));display:grid;place-items:center;font-size:42px;position:relative;z-index:1;box-shadow:0 0 40px rgba(29,78,216,.4)}
.wrenchy-band h3{font-size:34px;font-weight:800;letter-spacing:-0.03em;line-height:1.15;color:#fff;position:relative;z-index:1;white-space:nowrap}
.wrenchy-band h3 em{font-style:normal;color:var(--orange);font-weight:800}
.wrenchy-band h3 u{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:3px;text-underline-offset:5px;font-style:italic;color:#fff}
.wrenchy-band p{font-size:17px;opacity:.75;margin-top:8px;color:#fff;position:relative;z-index:1;font-weight:400}
.wrenchy-band .ask-btn{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--ink);padding:16px 28px;border-radius:8px;font-size:15px;font-weight:700;cursor:pointer;border:0;font-family:inherit;position:relative;z-index:1;letter-spacing:-0.005em;text-transform:none}
.wrenchy-band .ask-btn:hover{background:var(--bg-2)}

.tabs-wrap{margin-top:80px}
.tabs{display:flex;gap:0;border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:81px;z-index:5}
.tab{padding:22px 32px;cursor:pointer;font-size:15px;font-weight:600;color:var(--muted);position:relative;letter-spacing:-0.005em;text-transform:none}
.tab .num{display:none}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--ink)}
.tab.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink)}

.tab-panel{padding:56px 0 20px;display:none}
.tab-panel.active{display:block}

.fitment-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:36px}
.fitment-head h2{font-size:42px;font-weight:800;letter-spacing:-0.035em;color:var(--ink)}
.fitment-head h2 em{font-style:normal;color:var(--blue)}
.fitment-head .desc{color:var(--muted);font-size:16px;margin-top:10px;max-width:480px;line-height:1.55}
.fitment-head .filter-btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;background:var(--ink);color:#fff;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;border:0;letter-spacing:0;text-transform:none;font-family:inherit}

.fitment-table{background:var(--bg);border:1px solid var(--line-soft);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)}
.fitment-maker{display:block;border-bottom:1px solid var(--line-soft)}
.fitment-maker:last-child{border-bottom:0}
/* Full-width header strip above the model rows (replaces the old left column) */
.maker-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:14px 28px;background:var(--bg-2);border-bottom:1px solid var(--line-soft);
}
.maker-head-left{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.maker-head-kicker{
  font-size:11px;font-weight:700;color:var(--muted);letter-spacing:0.12em;text-transform:uppercase;
}
.maker-head h3{font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-0.02em;line-height:1;margin:0}
.maker-head-count{font-size:12.5px;color:var(--muted);font-weight:500;white-space:nowrap}
.fit-row{display:grid;grid-template-columns:minmax(180px,1.2fr) 2fr auto;align-items:center;gap:18px;padding:18px 28px;border-bottom:1px solid var(--line-soft);cursor:pointer;transition:background .15s}
.fit-row:hover{background:var(--bg-2)}
.fit-row .model{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.fit-row .model b{font-size:19px;font-weight:700;color:var(--ink);letter-spacing:-0.01em;font-family:inherit}
.fit-row .model span{font-size:12px;color:var(--muted);font-family:inherit;letter-spacing:0;text-transform:none}
.year-range{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink);font-weight:600;font-family:inherit}
.year-range .bar{width:14px;height:2px;background:var(--muted);border-radius:1px;position:relative;flex:none}
.year-range .bar::before{content:"";position:absolute;inset:0;background:currentColor;border-radius:1px;opacity:.9}
.fit-row .expand{width:34px;height:34px;border-radius:50%;background:var(--bg-2);border:0;display:grid;place-items:center;color:var(--ink);font-size:16px}
.fit-row:hover .expand{background:var(--ink);color:#fff}
.fit-notice{margin-top:24px;padding:18px 24px;background:var(--bg-2);border:0;border-left:3px solid var(--orange);border-radius:8px;display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--ink-2)}
.fit-notice b{color:var(--ink);font-weight:700}

.specs-grid{display:grid;grid-template-columns:1fr 1fr;background:var(--bg);border:1px solid var(--line-soft);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)}
.spec-row{display:grid;grid-template-columns:180px 1fr;padding:16px 24px;border-bottom:1px solid var(--line-soft);align-items:center}
.spec-row:nth-last-child(-n+2){border-bottom:0}
.spec-row:nth-child(odd){border-right:1px solid var(--line-soft)}
.spec-row .k{font-size:13px;color:var(--muted);font-family:inherit;letter-spacing:0;text-transform:none;font-weight:500}
.spec-row .v{font-size:15px;color:var(--ink);font-weight:600}
.spec-row.highlight{background:var(--bg-2)}
.spec-row.highlight .v{color:var(--blue)}

.interchange{margin-top:56px}
.interchange h3{font-size:28px;font-weight:800;letter-spacing:-0.025em;margin-bottom:6px}
.interchange .lead{color:var(--muted);font-size:15px;margin-bottom:22px}
.ic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ic-card{background:var(--bg);border:1px solid var(--line-soft);padding:14px 18px;border-radius:8px;display:flex;justify-content:space-between;align-items:center;transition:all .15s;box-shadow:var(--shadow)}
.ic-card:hover{border-color:var(--ink);transform:translateY(-1px)}
.ic-card .brand{font-size:14px;font-weight:700;color:var(--ink)}
.ic-card .pn{font-size:13px;color:var(--blue);font-weight:600;font-family:inherit}
.ic-card.hl{background:var(--ink);border-color:var(--ink)}
.ic-card.hl .brand{color:#fff}
.ic-card.hl .pn{color:var(--yellow)}

.policies{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.policy-card{background:var(--bg);border:1px solid var(--line-soft);padding:32px 34px;border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.policy-card::before{display:none}
.policy-card h4{font-size:20px;font-weight:800;color:var(--ink);margin-bottom:10px;display:flex;align-items:center;gap:12px;letter-spacing:-0.02em}
.policy-card h4 .ch{width:34px;height:34px;background:var(--ink);color:#fff;display:grid;place-items:center;border-radius:50%;font-weight:700;font-size:14px}
.policy-card p{font-size:14px;color:var(--ink-2);line-height:1.6}

.why{margin-top:100px;padding:100px 0;background:var(--ink);color:#fff;border-radius:var(--radius-lg);position:relative;overflow:hidden}
.why::before{content:"";position:absolute;top:-200px;right:-200px;width:600px;height:600px;background:radial-gradient(circle,rgba(29,78,216,.25),transparent 60%);pointer-events:none}
.why .inner{max-width:1120px;margin:0 auto;padding:0 56px;position:relative}
.why .kicker{display:flex;gap:10px;margin-bottom:22px;font-size:22px;color:var(--orange);font-weight:800;letter-spacing:-0.01em;text-transform:none}
.why .kicker .dash{display:none}
.why h2{font-size:68px;font-weight:800;letter-spacing:-0.04em;line-height:1.02;color:#fff;max-width:820px}
.why h2 em{font-style:normal;color:var(--orange)}
.why .sub{font-size:19px;color:rgba(255,255,255,.7);margin-top:18px;max-width:560px;font-weight:400}
.why-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:56px;background:transparent;padding:0}
.why-card{background:rgba(255,255,255,.05);padding:40px 36px;border-radius:var(--radius-lg);border:0;position:relative}
.why-card .num{font-size:60px;font-weight:800;color:#fff;letter-spacing:-0.04em;line-height:1;font-family:inherit}
.why-card .unit{font-size:16px;color:rgba(255,255,255,.75);margin-top:12px;letter-spacing:0;text-transform:none;font-weight:600}
.why-card h3{font-size:24px;font-weight:700;margin-top:24px;color:#fff;letter-spacing:-0.02em}
.why-card p{font-size:14px;color:rgba(255,255,255,.7);margin-top:10px;line-height:1.55}
.why-card .icon{display:none}
.why-strip{margin-top:48px;padding:20px 32px;background:rgba(255,255,255,.05);border:0;border-radius:10px;display:flex;justify-content:center;gap:48px;align-items:center;flex-wrap:wrap}
.why-strip span{font-size:15px;font-weight:600;color:#fff;display:flex;align-items:center;gap:10px;font-family:inherit;letter-spacing:0;text-transform:none}
.why-strip span .dot{color:var(--orange)}

.reviews{padding-top:100px;padding-bottom:100px}
.reviews h2{font-size:52px;font-weight:800;letter-spacing:-0.035em;color:var(--ink)}
.reviews h2 em{font-style:normal;color:var(--blue)}
.reviews .score .num{font-size:76px;font-weight:800;letter-spacing:-0.04em;color:var(--ink);font-family:inherit}
.reviews .score .num-small{font-size:28px;color:var(--muted);font-weight:600}
.reviews .score .detail b{color:var(--ink);font-weight:700;font-family:inherit;letter-spacing:0}
.reviews .score .detail span{color:var(--muted);font-size:13px;display:block}
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.review-card{background:var(--bg-2);border:0;padding:30px 32px;border-radius:var(--radius-lg);position:relative}
.review-card::before{display:none}
.review-card .who{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.review-card .avatar{width:42px;height:42px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:700;font-size:15px;font-family:inherit}
.review-card .name{font-weight:700;color:var(--ink);font-size:15px}
.review-card .stars{margin-bottom:12px}
.review-card .quote{font-size:15px;line-height:1.6;color:var(--ink-2);font-family:inherit;font-style:normal;font-weight:400}
.review-card .date{font-size:12px;color:var(--muted);margin-top:16px;padding-top:16px;border-top:1px solid var(--line);letter-spacing:0;text-transform:none;font-family:inherit}

.racing{padding-top:88px;padding-bottom:88px;border-top:1px solid var(--line-soft)}
.racing-head{text-align:center;margin-bottom:48px}
.racing-head .kicker{font-size:13px;color:var(--orange);font-weight:700;letter-spacing:0;text-transform:none}
.racing h2{font-size:52px;font-weight:800;letter-spacing:-0.035em;margin-top:12px;color:var(--ink)}
.racing h2 em{font-style:normal;color:var(--blue)}
.video-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.video-card{aspect-ratio:16/9;background:var(--ink);border-radius:var(--radius-lg);position:relative;overflow:hidden;cursor:pointer;border:0;box-shadow:var(--shadow);display:block;text-decoration:none}
.video-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.video-card .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;width:64px;height:64px;background:rgba(255,255,255,.95);border-radius:50%;display:grid;place-items:center;backdrop-filter:blur(10px);transition:all .2s}
.video-card .play svg{color:var(--ink);margin-left:4px}
.video-card:hover .play{transform:translate(-50%,-50%) scale(1.1);background:var(--orange);color:#fff}
.video-card:hover .play svg{color:#fff}
.video-card .label{position:absolute;bottom:18px;left:20px;right:20px;z-index:3;color:#fff}
.video-card .label b{display:block;font-size:16px;font-weight:700;letter-spacing:-0.01em}
.video-card .label span{font-size:11px;color:rgba(255,255,255,.75);font-family:inherit;letter-spacing:0;text-transform:none;margin-top:2px;display:block}

footer{background:var(--bg-2);color:var(--ink);padding:72px 0 32px;border-top:1px solid var(--line-soft)}
footer::before{display:none}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:56px;align-items:start}
.foot-brand .mark img{height:44px;filter:none !important}
.foot-brand .tag{font-size:16px;color:var(--ink);font-weight:500;margin:18px 0;font-style:normal}
.foot-brand .email{color:var(--blue);font-weight:600;border-bottom:0;font-family:inherit}
.foot-brand .meta{margin-top:22px;font-size:12px;color:var(--muted);font-family:inherit;letter-spacing:0;text-transform:none;opacity:1;line-height:1.7}
.foot-col h4{font-size:14px;color:var(--ink);font-weight:700;letter-spacing:0;text-transform:none;margin-bottom:18px;padding-bottom:0;border-bottom:0;font-family:inherit}
.foot-col a{color:var(--muted);font-size:14px;padding:5px 0;opacity:1;font-weight:500}
.foot-col a:hover{color:var(--ink);padding-left:0}
.foot-social{display:flex;gap:8px;margin-top:22px}
.foot-social a{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--ink);padding:0;background:var(--bg)}
.foot-social a:hover{background:var(--ink);color:#fff;border-color:var(--ink);padding:0}
.foot-bottom{margin-top:56px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:var(--muted);font-size:13px;letter-spacing:0;text-transform:none;font-family:inherit;opacity:1}
.foot-bottom .heart{color:var(--orange)}

@media(max-width:960px){.hero-grid,.why-cards,.review-grid,.video-grid,.specs-grid,.ic-grid,.policies,.foot-grid{grid-template-columns:1fr}}

.reveal{opacity:0;transform:translateY(12px);animation:reveal .5s ease forwards}
.reveal.d1{animation-delay:.04s}.reveal.d2{animation-delay:.1s}.reveal.d3{animation-delay:.16s}.reveal.d4{animation-delay:.22s}.reveal.d5{animation-delay:.28s}
@keyframes reveal{to{opacity:1;transform:translateY(0)}}

/* ════════════════════════════════════════
   V10b OVERRIDE · NAVY HEADER & FOOTER
   Like the live go-parts.com masthead: navy base,
   logo tucked into a white rounded card.
   ════════════════════════════════════════ */
:root{
  --navy:#1a3db0;
  --navy-2:#12307f;
  --navy-3:#0a1a5e;
}

/* Utility bar — deeper navy stripe above the masthead */
.utility{background:var(--navy-3);color:rgba(255,255,255,.88)}
.utility a{color:rgba(255,255,255,.88)}
.utility a:hover{color:#fff}

/* Masthead — royal navy gradient, thin accent line at bottom */
.masthead{
  background:linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 100%);
  border-bottom:0;
  position:sticky;top:0;z-index:50;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 6px 24px -12px rgba(10,26,94,.4);
}
.masthead::after{
  display:block;content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--orange) 0 20%,var(--yellow) 20% 32%,transparent 32%);
}
.masthead .wrap{padding:14px 32px}

/* Logo — white rounded card (like live site) */
.wordmark{
  background:#fff;border-radius:12px;padding:10px 18px;
  box-shadow:0 4px 12px rgba(10,26,94,.2);
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .4s cubic-bezier(.25,.9,.3,1),box-shadow .4s ease;
  will-change:transform;
  --lmx:50%;--lmy:50%;
}
/* Ambient cursor-follow tint (inside the card) — stronger + no snap */
.wordmark::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:
    radial-gradient(260px 140px at var(--lmx) var(--lmy),rgba(26,61,176,.32),transparent 60%),
    radial-gradient(220px 120px at calc(100% - var(--lmx)) calc(100% - var(--lmy)),rgba(255,122,26,.26),transparent 60%);
  opacity:0;transition:opacity .35s ease;z-index:1;mix-blend-mode:multiply;
}
/* Brand-tinted shimmer sweep — one-shot keyframe so mouseout doesn't
   reverse-animate the beam back across the card. */
.wordmark::after{
  content:"";position:absolute;top:-10%;bottom:-10%;left:0;right:0;
  pointer-events:none;
  background:linear-gradient(108deg,
    transparent 0%,
    transparent 34%,
    rgba(26,61,176,.30) 43%,
    rgba(26,61,176,.55) 48%,
    rgba(255,122,26,.55) 52%,
    rgba(255,122,26,.30) 57%,
    transparent 66%,
    transparent 100%);
  filter:blur(.5px);
  transform:translateX(-140%) skewX(-14deg);
  border-radius:inherit;z-index:4;   /* above logo so the beam passes over it */
  will-change:transform,opacity;
  opacity:0;
}
/* Shimmer is triggered by JS adding .shimmering on mouseenter and
   removed on animationend — so mousing out mid-sweep doesn't yank
   the animation and cause the beam to snap back. */
.wordmark.shimmering::after{animation:wordmarkShimmer 1.2s cubic-bezier(.2,.8,.25,1)}
@keyframes wordmarkShimmer{
  0%  {transform:translateX(-140%) skewX(-14deg);opacity:0}
  10% {opacity:1}
  90% {opacity:1}
  100%{transform:translateX(140%) skewX(-14deg);opacity:0}
}
/* Soften the ambient tint slightly so it doesn't compete with the beam */
.wordmark:hover::before{opacity:.75}
.wordmark .logo-img{height:42px;width:auto;filter:none !important;position:relative;z-index:3}

.wordmark:hover{
  box-shadow:
    0 18px 40px -14px rgba(26,61,176,.4),
    0 0 0 1px rgba(26,61,176,.08),
    0 0 28px -4px rgba(255,122,26,.18),
    inset 0 1px 0 rgba(255,255,255,.9);
}

/* Search — translucent glass on navy */
.search{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(8px);height:46px}
.search:focus-within{background:rgba(255,255,255,.95);border-color:#fff}
.search input{color:#fff}
.search input::placeholder{color:rgba(255,255,255,.65)}
.search:focus-within input{color:var(--ink)}
.search:focus-within input::placeholder{color:var(--muted)}
.search .browse{color:#fff;font-weight:600}
.search:focus-within .browse{color:var(--ink)}
.search .divider{background:rgba(255,255,255,.22)}
.search:focus-within .divider{background:var(--line)}
.search button.submit{background:var(--orange);color:#fff;font-weight:700}
.search button.submit:hover{background:var(--orange-2)}

/* Chip + cart */
.flag-chip{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18)}
.flag-chip .txt{color:rgba(255,255,255,.85)}
.flag-chip .txt b{color:#fff}
.cart-btn{background:var(--orange);color:#fff;box-shadow:0 4px 14px -4px rgba(255,122,26,.5)}
.cart-btn:hover{background:var(--orange-2)}
.cart-btn .count{background:#fff;color:var(--orange)}

/* Footer — navy matches masthead for bookend effect */
footer{background:linear-gradient(180deg,var(--navy-2) 0%,var(--navy-3) 100%);color:#fff;border-top:0;position:relative}
footer::before{
  display:block;content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--orange) 0 20%,var(--yellow) 20% 32%,transparent 32%);
}
.foot-brand .tag{color:rgba(255,255,255,.85);font-weight:500;margin:0 0 10px;font-size:16px}
.foot-brand .email{color:var(--yellow);font-weight:700;border-bottom:0}
.foot-brand .meta{color:rgba(255,255,255,.55)}
.foot-col h4{color:#fff;font-weight:700}
.foot-col a{color:rgba(255,255,255,.75);font-weight:500}
.foot-col a:hover{color:var(--yellow)}
.foot-social a{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff}
.foot-social a:hover{background:var(--orange);border-color:var(--orange);color:#fff}
.foot-bottom{color:rgba(255,255,255,.55);border-top:1px solid rgba(255,255,255,.12)}
.foot-bottom .heart{color:var(--orange)}

/* ════════════════════════════════════════════════════════
   V11 · NEXT-GEN OVERLAY
   Aurora backdrop · glassmorphism · live pulse pills
   Bento-tuned summary · floating buy dock · pill tabs
   ════════════════════════════════════════════════════════ */

/* Aurora backdrop — soft shifting color mesh behind the page */
body{
  background:
    radial-gradient(800px 400px at 10% 5%,rgba(26,61,176,.12),transparent 60%),
    radial-gradient(700px 400px at 90% 20%,rgba(255,122,26,.08),transparent 60%),
    radial-gradient(900px 600px at 50% 50%,rgba(251,191,36,.05),transparent 70%),
    radial-gradient(600px 400px at 15% 90%,rgba(26,61,176,.08),transparent 60%),
    var(--bg);
  background-attachment:fixed;
}

/* Hero — ambient glow, extra breathing room */
.hero{padding:48px 0 96px;background:transparent;position:relative}
/* Previous hero::before glow removed — it was anchored to the hero section
   (static) while the gallery image is sticky, so the glow visibly drifted
   away from the image on scroll. The body's fixed aurora backdrop already
   provides ambient color without that misalignment issue. */
.hero .wrap{position:relative;z-index:1}
.hero-grid{gap:56px}

/* Live status pill row — sits above the title */
.live-pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.live-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:980px;
  font-size:12px;font-weight:600;letter-spacing:-0.005em;
  background:#fff;border:1px solid var(--line);
  color:var(--ink-2);
}
.live-pill.stock{color:#047857;background:rgba(4,120,87,.08);border-color:rgba(4,120,87,.2)}
.live-pill.stock::before{content:"";width:6px;height:6px;background:#10b981;border-radius:50%;box-shadow:0 0 0 0 rgba(16,185,129,.5);animation:livePulse 2s infinite}
.live-pill.ships{background:rgba(29,78,216,.08);color:var(--blue);border-color:rgba(29,78,216,.2)}
.live-pill.free{background:rgba(255,122,26,.08);color:var(--orange);border-color:rgba(255,122,26,.2)}
@keyframes livePulse{
  0%{box-shadow:0 0 0 0 rgba(16,185,129,.6)}
  70%{box-shadow:0 0 0 6px rgba(16,185,129,0)}
  100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}
}

/* Gallery frame — glass with colored edge glow.
   Cap the height relative to viewport so thumbs + at-glance below always fit
   on shorter laptops (MacBook Air etc). aspect-ratio stays 1/1 so it shrinks
   uniformly; max-width:100% keeps it from overflowing the column. */
.gallery .frame{
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.75));
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:
    0 40px 80px -30px rgba(26,61,176,.25),
    0 0 0 1px rgba(26,61,176,.04),
    inset 0 1px 0 rgba(255,255,255,.9);
  max-height:calc(100vh - 260px);
  max-width:100%;
  margin:0 auto;
}
.gallery .frame::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg,rgba(26,61,176,.3),transparent 40%,transparent 60%,rgba(255,122,26,.25));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.gallery .frame img{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 30px 40px rgba(10,20,36,.15))}
.gallery .frame::after{display:none !important}

.thumb{background:rgba(255,255,255,.6);backdrop-filter:blur(8px);border:1.5px solid rgba(255,255,255,.5);box-shadow:0 2px 8px rgba(10,20,36,.05)}
.thumb.active{border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,61,176,.18),0 4px 12px rgba(26,61,176,.2)}

/* At a Glance — upgraded to colored-edge glass card */
.at-glance{
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.7));
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 20px 50px -20px rgba(26,61,176,.18),inset 0 1px 0 rgba(255,255,255,.8);
  position:relative;
}
.at-glance::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg,rgba(26,61,176,.25),transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.at-glance-head h4{font-size:12px;text-transform:uppercase;letter-spacing:0.14em;color:var(--muted);font-weight:700}
.at-glance-head .brand-chip{background:var(--ink);color:#fff;padding:5px 12px;letter-spacing:0.06em}
.glance-item svg{color:var(--blue)}
.glance-item .v{color:var(--ink);letter-spacing:-0.01em}

/* Title — dramatic scale + gradient ink */
.summary{padding-top:0}
.summary .eyebrow .tag{
  background:linear-gradient(135deg,rgba(26,61,176,.1),rgba(255,122,26,.08));
  border:1px solid rgba(26,61,176,.2);
  color:var(--ink);padding:6px 14px;border-radius:980px;
  font-size:11px;letter-spacing:0.12em;text-transform:uppercase;
}
.title{font-size:52px;letter-spacing:-0.04em;line-height:1.02;font-weight:800}
.title em::after{
  background:linear-gradient(135deg,var(--orange),var(--yellow));
  width:10px;height:10px;box-shadow:0 0 16px rgba(255,122,26,.6);
}
.title .sub{font-size:17px;margin-top:22px;color:var(--ink-2);line-height:1.55}

/* Price card — glassmorphic with colored glow */
.price-card{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.78));
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.6);
  border-radius:var(--radius-lg);
  padding:28px 32px;margin-top:28px;
  box-shadow:0 30px 60px -30px rgba(26,61,176,.3),0 0 0 1px rgba(26,61,176,.04),inset 0 1px 0 rgba(255,255,255,.9);
  position:relative;overflow:hidden;
}
.price-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(400px 200px at 100% 0%,rgba(255,122,26,.1),transparent 60%);
}
.price-card::after{
  display:block;content:"";position:absolute;right:-1px;top:-1px;bottom:-1px;width:4px;
  background:linear-gradient(180deg,var(--orange),var(--yellow));
  border-radius:0 var(--radius-lg) var(--radius-lg) 0;
}
.save-pill{background:linear-gradient(135deg,var(--orange),#ff5c33);box-shadow:0 6px 18px -4px rgba(255,122,26,.5)}
.price-main{position:relative;z-index:1}
.price-main .dol{font-size:76px;font-weight:800;background:linear-gradient(135deg,var(--ink),#2d3b5c);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-0.045em}

/* Per-month highlight row */
.price-per-month{
  margin-top:18px;padding:12px 14px;border-radius:10px;
  background:linear-gradient(135deg,rgba(26,61,176,.06),rgba(26,61,176,.02));
  border:1px solid rgba(26,61,176,.12);
  display:flex;justify-content:space-between;align-items:center;font-size:13px;
  color:var(--ink-2);
}
.price-per-month b{color:var(--blue);font-weight:700;font-size:15px}

/* Primary CTAs — animated gradient sweep */
.btn.primary{
  background:linear-gradient(135deg,var(--ink) 0%,#1e2a50 100%);
  box-shadow:0 12px 32px -10px rgba(10,20,36,.5),inset 0 1px 0 rgba(255,255,255,.15);
  position:relative;overflow:hidden;
}
.btn.primary::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);
  transform:translateX(-100%);transition:transform .6s ease;
}
.btn.primary:hover::after{transform:translateX(100%)}
.btn.primary:hover{background:linear-gradient(135deg,var(--blue),var(--blue-2));box-shadow:0 16px 40px -8px rgba(29,78,216,.5)}
.btn.secondary{
  background:linear-gradient(135deg,var(--orange),#ff5c33);
  box-shadow:0 12px 32px -10px rgba(255,122,26,.55),inset 0 1px 0 rgba(255,255,255,.2);
  position:relative;overflow:hidden;
}
.btn.secondary::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.25) 50%,transparent 70%);
  transform:translateX(-100%);transition:transform .6s ease;
}
.btn.secondary:hover::after{transform:translateX(100%)}
.btn.secondary:hover{box-shadow:0 16px 40px -6px rgba(255,122,26,.6)}

/* Warranty & trust — glass tiles */
.warranty{
  background:linear-gradient(135deg,rgba(26,61,176,.92),rgba(18,48,127,.95));
  position:relative;overflow:hidden;
  box-shadow:0 20px 50px -20px rgba(26,61,176,.4);
}
.warranty::before{
  display:block;content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(300px 150px at 100% 0%,rgba(255,255,255,.15),transparent 60%);
}
.warranty .seal{border-color:var(--yellow);color:var(--yellow)}

.trust-strip{
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.7));
  backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.6);
  box-shadow:0 10px 30px -14px rgba(26,61,176,.15);
}
.trust-strip .ico{background:linear-gradient(135deg,rgba(26,61,176,.1),rgba(26,61,176,.04));color:var(--blue);box-shadow:inset 0 0 0 1px rgba(26,61,176,.1)}

/* Secondary CTAs — pill + gradient hover */
.sec-ctas .link-btn{background:rgba(255,255,255,.85);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.5);box-shadow:0 2px 8px rgba(10,20,36,.05)}
.sec-ctas .link-btn.wrenchy{background:linear-gradient(135deg,var(--blue),var(--blue-2));box-shadow:0 8px 20px -6px rgba(29,78,216,.45)}

/* Notes — glass */
.notes{
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.75));
  backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.6);
  box-shadow:0 20px 50px -20px rgba(26,61,176,.15);
}

/* Wrenchy — next-gen mesh */
.wrenchy-band{
  background:
    radial-gradient(50% 80% at 85% 50%,rgba(255,122,26,.35),transparent 60%),
    radial-gradient(50% 80% at 0% 50%,rgba(251,191,36,.15),transparent 60%),
    linear-gradient(135deg,#0a1a5e 0%,#1e2a50 60%,#1a3db0 100%);
  box-shadow:0 40px 100px -40px rgba(10,20,36,.5);
  overflow:hidden;
}
.wrenchy-band::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px) 0 0/60px 60px,
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px) 0 0/60px 60px;
}
.wrenchy-robot{
  background:transparent;box-shadow:none;border-radius:0;
  width:auto;height:120px;
  overflow:visible;position:relative;display:flex;align-items:flex-end;justify-content:center;font-size:0;
  flex:none;
}
.wrenchy-robot img{
  height:100%;width:auto;max-width:none;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.35));
  pointer-events:none;
}
.wrenchy-band .ask-btn{
  background:#fff;color:var(--ink);
  display:inline-flex;align-items:center;gap:10px;padding:14px 20px 14px 14px;
}
.wrenchy-avatar{
  width:26px;height:26px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,var(--yellow),var(--orange));
  padding:2px;object-fit:cover;object-position:center top;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.link-btn.wrenchy .wrenchy-avatar{
  width:22px;height:22px;padding:1px;background:rgba(255,255,255,.2);
  box-shadow:none;
}

/* Liquid-glass tab bar — frosted, refractive, with a translucent sliding pill */
.tabs{
  display:inline-flex;gap:4px;padding:6px;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.32));
  backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);
  border:1px solid rgba(255,255,255,.75);
  border-radius:980px;border-bottom:1px solid rgba(255,255,255,.75);
  box-shadow:
    0 12px 30px -14px rgba(26,61,176,.22),
    0 0 0 1px rgba(26,61,176,.04),
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(26,61,176,.06);
  margin-bottom:8px;top:90px;position:sticky;overflow:hidden;
}
/* Subtle refractive highlight sweep across the whole bar */
.tabs{
  background-image:
    linear-gradient(110deg,transparent 0%,rgba(26,61,176,.05) 20%,transparent 40%,rgba(255,122,26,.04) 70%,transparent 100%),
    linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.32));
}
/* Sliding liquid pill — glass-on-glass, tinted, with inner lightning */
.tabs::before{
  content:"";position:absolute;
  top:6px;bottom:6px;
  left:var(--pill-left,6px);
  width:var(--pill-width,0);
  background:
    radial-gradient(80% 60% at 30% 20%, rgba(255,255,255,.55), transparent 60%),
    linear-gradient(180deg,rgba(26,61,176,.92) 0%,rgba(18,48,127,.96) 100%);
  border-radius:980px;
  box-shadow:
    0 6px 18px -6px rgba(26,61,176,.6),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(10,20,60,.25),
    inset 0 0 0 1px rgba(255,255,255,.22);
  transition:left .42s cubic-bezier(.5,.05,.15,1),width .42s cubic-bezier(.5,.05,.15,1);
  z-index:0;pointer-events:none;
}
/* Hairline trailing highlight on the pill's top edge for extra "glass" feel */
.tabs::after{
  content:"";position:absolute;
  top:7px;height:2px;
  left:calc(var(--pill-left,6px) + 14px);
  width:calc(var(--pill-width,0) - 28px);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
  border-radius:2px;
  transition:left .42s cubic-bezier(.5,.05,.15,1),width .42s cubic-bezier(.5,.05,.15,1);
  z-index:1;pointer-events:none;
}
.tab{padding:11px 22px;border-radius:980px;position:relative;z-index:2;background:transparent !important;transition:color .3s ease,text-shadow .3s ease}
.tab::after{display:none}
.tab:hover{color:var(--ink)}
.tab.active{background:transparent !important;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.25)}

/* Animated tab-panel enter — fade + lift + slight blur */
.tab-panel{display:none}
.tab-panel.active{
  display:block;
  animation:tabPanelIn .55s cubic-bezier(.25,.9,.3,1) both;
}
@keyframes tabPanelIn{
  0%  {opacity:0;transform:translateY(18px) scale(.99);filter:blur(3px)}
  60% {filter:blur(0)}
  100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}
/* Staggered reveal for key child blocks inside the panel */
.tab-panel.active > .fitment-head,
.tab-panel.active > .fit-filter,
.tab-panel.active > .fitment-table,
.tab-panel.active > .fit-notice,
.tab-panel.active > .specs-grid,
.tab-panel.active > .interchange,
.tab-panel.active > .policies{
  animation:tabChildIn .6s cubic-bezier(.25,.9,.3,1) both;
}
.tab-panel.active > .fitment-head{animation-delay:.05s}
.tab-panel.active > .fit-filter{animation-delay:.11s}
.tab-panel.active > .fitment-table,
.tab-panel.active > .specs-grid,
.tab-panel.active > .policies{animation-delay:.17s}
.tab-panel.active > .interchange{animation-delay:.24s}
.tab-panel.active > .fit-notice{animation-delay:.3s}
@keyframes tabChildIn{
  from{opacity:0;transform:translateY(12px)}
  to  {opacity:1;transform:translateY(0)}
}

/* Fitment — big-type accent */
.fitment-head h2{font-size:44px}
.fitment-head h2 em{background:linear-gradient(135deg,var(--blue),var(--orange));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.fitment-table{
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.75));
  backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.6);
  box-shadow:0 20px 50px -20px rgba(26,61,176,.15);
}
.year-range .bar::before{background:var(--muted)}

/* Specs — glass panels */
.specs-grid{
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.75));
  backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.6);
  box-shadow:0 20px 50px -20px rgba(26,61,176,.15);
}
.spec-row.highlight{background:linear-gradient(135deg,rgba(26,61,176,.08),rgba(255,122,26,.05))}

/* Interchange cards */
.ic-card{
  background:rgba(255,255,255,.85);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 2px 8px rgba(10,20,36,.04);
}
.ic-card:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:0 12px 28px -12px rgba(26,61,176,.25)}
.ic-card.hl{background:linear-gradient(135deg,var(--ink),#1e2a50);border-color:var(--ink)}

/* Policy cards — glass */
.policy-card{
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.75));
  backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.6);
  box-shadow:0 20px 50px -20px rgba(26,61,176,.15);
}
.policy-card h4 .ch{background:linear-gradient(135deg,var(--blue),var(--blue-2));box-shadow:0 4px 12px -2px rgba(29,78,216,.4)}

/* Why — starfield + aurora */
.why{
  background:
    radial-gradient(600px 300px at 20% 0%,rgba(26,61,176,.35),transparent 60%),
    radial-gradient(600px 300px at 80% 100%,rgba(255,122,26,.2),transparent 60%),
    #0a1220;
  color:#fff;border-radius:var(--radius-lg);
}
.why::before{
  display:block;content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(1px 1px at 10% 15%,rgba(255,255,255,.3),transparent),
    radial-gradient(1px 1px at 80% 25%,rgba(255,255,255,.25),transparent),
    radial-gradient(1px 1px at 50% 75%,rgba(255,255,255,.25),transparent),
    radial-gradient(1px 1px at 20% 60%,rgba(255,255,255,.2),transparent),
    radial-gradient(1px 1px at 70% 85%,rgba(255,255,255,.2),transparent);
  background-size:200px 200px,300px 300px,250px 250px,350px 350px,280px 280px;
  opacity:.6;
}
.why h2 em{background:linear-gradient(135deg,var(--orange),var(--yellow));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.why-card{background:rgba(255,255,255,.04);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1)}
.why-card .num{background:linear-gradient(135deg,var(--orange),var(--yellow));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* Reviews */
.reviews h2 em{background:linear-gradient(135deg,var(--blue),var(--orange));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.reviews .score .num{background:linear-gradient(135deg,var(--ink),var(--blue));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.review-card{
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.75));
  backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.6);
  box-shadow:0 10px 30px -14px rgba(26,61,176,.1);
}

/* Racing */
.racing h2 em{background:linear-gradient(135deg,var(--blue),var(--orange));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.video-card{box-shadow:0 20px 50px -20px rgba(10,20,36,.4)}

/* ════════ INTERACTIVE FITMENT ════════ */
.fit-filter{
  margin-bottom:18px;display:flex;align-items:center;gap:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.75));
  backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.6);border-radius:12px;
  padding:4px 14px;height:52px;
  box-shadow:0 10px 30px -14px rgba(26,61,176,.12);
  transition:all .2s ease;
}
.fit-filter:focus-within{border-color:var(--blue);box-shadow:0 10px 30px -14px rgba(26,61,176,.3),0 0 0 3px rgba(26,61,176,.12)}
.fit-filter svg{color:var(--muted);flex:none}
.fit-filter input{flex:1;border:0;outline:0;background:transparent;font-family:inherit;font-size:15px;color:var(--ink);height:100%}
.fit-filter input::placeholder{color:var(--muted)}
.fit-count{font-size:12px;color:var(--muted);font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.fit-count b{color:var(--blue);font-weight:700}

/* ────────── Model row: sliding left border + card pop-on-expand ────────── */
/* Each model row is wrapped in a .fit-slot so the expanded state can style the
   whole slot (row + detail) as a single floating card. */
.fit-slot{
  position:relative;
  border-bottom:1px solid var(--line-soft);
  transition:
    border-color .3s ease,
    background .3s ease,
    box-shadow .3s ease,
    margin .3s ease,
    border-radius .3s ease;
}
.fit-slot:last-child{border-bottom:0}

.fit-row{
  display:grid;grid-template-columns:minmax(180px,1.2fr) 2fr auto;
  align-items:center;gap:18px;
  padding:18px 28px;
  cursor:pointer;
  border-left:4px solid transparent;        /* the accent bar, transparent by default */
  transition:background .2s ease,border-left-color .25s cubic-bezier(.3,0,.3,1);
}
.fit-row:hover{
  background:linear-gradient(90deg,rgba(26,61,176,.05),transparent 70%);
  border-left-color:var(--blue);            /* hover: blue bar slides in */
}
.fit-row.open{
  background:linear-gradient(90deg,rgba(255,122,26,.06),transparent 75%);
  border-left-color:var(--orange);           /* expanded: orange bar stays */
}

/* Toggle: + rotates to × on open, + changes color */
.fit-row .expand{
  width:34px;height:34px;border-radius:50%;
  background:var(--bg-2);border:0;
  display:grid;place-items:center;
  color:var(--ink);font-size:18px;font-weight:600;
  box-shadow:inset 0 0 0 1px var(--line),0 2px 4px rgba(10,20,36,.04);
  transition:all .28s cubic-bezier(.3,1.3,.5,1);
}
.fit-row:hover .expand{
  background:var(--blue);color:#fff;
  box-shadow:0 4px 12px -3px rgba(29,78,216,.45);
}
.fit-row.open .expand{
  background:var(--orange);color:#fff;
  box-shadow:0 6px 16px -4px rgba(255,122,26,.55);
  transform:rotate(45deg);                   /* + → × */
}

/* Expanded details panel — animated max-height reveal */
.fit-detail{
  max-height:0;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(248,250,253,.95));
  padding:0 28px;
  transition:max-height .4s cubic-bezier(.25,.9,.3,1),padding .3s ease,opacity .3s ease;
  opacity:0;
  border-top:1px solid transparent;
}
.fit-row.open + .fit-detail{
  max-height:1200px;                         /* large ceiling — animates smoothly */
  padding:14px 28px 22px;
  opacity:1;
  border-top-color:var(--line-soft);
}

/* Card pop-out: when a slot contains an open row, lift the whole slot
   into a floating card with an orange-tinted border + soft shadow. */
.fit-slot:has(.fit-row.open){
  margin:10px 6px;
  border:2px solid rgba(255,122,26,.55);
  border-radius:12px;
  border-bottom:2px solid rgba(255,122,26,.55);
  background:linear-gradient(180deg,#fffaf4 0%,#fff7ed 100%);
  box-shadow:0 10px 28px -10px rgba(255,122,26,.3),0 0 0 1px rgba(255,122,26,.08);
  overflow:hidden;
}
.fit-slot:has(.fit-row.open) .fit-row{
  background:transparent;
  border-left:0;
}
.fit-slot:has(.fit-row.open) .fit-detail{
  background:transparent;
  border-top-color:rgba(255,122,26,.18);
}
/* Fallback for browsers without :has() — :has() is widely supported but
   keep the underlying .fit-row.open styling working when it is not. */
@supports not selector(:has(*)){
  .fit-row.open{
    border:2px solid rgba(255,122,26,.55);
    border-radius:12px;
    background:#fffaf4;
    box-shadow:0 10px 28px -10px rgba(255,122,26,.3);
  }
}

/* Expanded detail grid — column order matches live page:
   Submodel | Body Style | Years | Engine | Attributes */
.fit-detail-head,
.fit-config{
  display:grid;
  grid-template-columns:minmax(130px,1.2fr) minmax(90px,.9fr) minmax(110px,1fr) minmax(150px,1.4fr) minmax(150px,1.3fr);
  gap:14px;padding:10px 16px;align-items:center;
}
.fit-detail-head{
  padding:8px 16px;font-size:10.5px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid var(--line-soft);margin-bottom:4px;
}
.fit-config{border-radius:8px;font-size:13.5px;transition:background .15s ease}
.fit-config:hover{background:rgba(26,61,176,.05)}
.fit-config .sub{font-weight:700;color:var(--ink)}
.fit-config .body{font-weight:500;color:var(--ink-2);text-transform:capitalize}
.fit-config .yr{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-0.01em}
.fit-config .eng{font-weight:500;color:var(--ink-2)}
.fit-config .attrs{display:flex;flex-wrap:wrap;gap:4px}
.fit-config .chip{
  font-size:10.5px;font-weight:700;letter-spacing:0.04em;padding:3px 8px;border-radius:980px;
  background:rgba(29,78,216,.08);color:var(--blue);border:1px solid rgba(29,78,216,.15);
}
.fit-config .chip.drive{background:rgba(255,122,26,.08);color:var(--orange);border-color:rgba(255,122,26,.18)}

/* Empty state */
.fit-empty{padding:40px 28px;text-align:center;color:var(--muted);font-size:14px}
.fit-empty b{color:var(--ink);font-weight:700;display:block;margin-bottom:4px;font-size:15px}

/* highlight mark */
mark{background:linear-gradient(transparent 60%,rgba(251,191,36,.5) 60%);color:inherit;padding:0 2px;border-radius:2px}

@media(max-width:720px){
  .fit-detail-head,.fit-config{grid-template-columns:80px 1fr 1fr}
  .fit-detail-head .h-attrs,.fit-config .attrs{display:none}
}

/* ════════ FLOATING BUY DOCK ════════ */
.buy-dock{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(120%);
  display:flex;align-items:center;gap:14px;
  padding:14px 18px 14px 14px;
  background:rgba(10,20,36,.88);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  box-shadow:0 20px 60px -12px rgba(0,0,0,.5);
  z-index:80;max-width:calc(100vw - 32px);
  transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .3s;
  opacity:0;pointer-events:none;
}
.buy-dock.visible{transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto}
.buy-dock .dock-img{width:48px;height:48px;border-radius:10px;background:#fff;background-size:78%;background-repeat:no-repeat;background-position:center;flex:none}
.buy-dock .dock-info{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.buy-dock .dock-info .name{font-size:13px;color:#fff;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.buy-dock .dock-info .sub{font-size:11px;color:rgba(255,255,255,.6);margin-top:2px;font-weight:500}
.buy-dock .dock-price{font-size:18px;color:#fff;font-weight:800;letter-spacing:-0.02em;padding:0 14px;border-left:1px solid rgba(255,255,255,.15);border-right:1px solid rgba(255,255,255,.15);height:48px;display:flex;align-items:center}
.buy-dock .dock-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:0 18px;height:42px;border-radius:10px;
  background:linear-gradient(135deg,var(--orange),#ff5c33);color:#fff;
  font-size:13px;font-weight:700;letter-spacing:0;border:0;cursor:pointer;
  box-shadow:0 4px 14px -4px rgba(255,122,26,.6),inset 0 1px 0 rgba(255,255,255,.2);
}
.buy-dock .dock-btn:hover{filter:brightness(1.05)}
.buy-dock .dock-close{
  width:32px;height:32px;border-radius:8px;background:transparent;border:0;cursor:pointer;
  color:rgba(255,255,255,.6);display:grid;place-items:center;
}
.buy-dock .dock-close:hover{background:rgba(255,255,255,.08);color:#fff}

@media(max-width:640px){
  .buy-dock .dock-info{display:none}
  .buy-dock{bottom:16px}
}

/* ════════════════════════════════════════════════════════
   V12 · HYPERSPACE OVERLAY
   Animated mesh · cursor spotlight · reactive tilt · live metrics
   ════════════════════════════════════════════════════════ */

/* Animated mesh — the aurora slowly drifts */
body{
  --mx:50%;   /* mouse x (set by JS) */
  --my:30%;   /* mouse y (set by JS) */
  background:
    radial-gradient(600px 350px at var(--mx) var(--my),rgba(255,122,26,.12),transparent 55%),
    radial-gradient(800px 500px at 10% 5%,rgba(26,61,176,.14),transparent 60%),
    radial-gradient(700px 450px at 90% 20%,rgba(255,122,26,.1),transparent 60%),
    radial-gradient(900px 600px at 50% 50%,rgba(251,191,36,.06),transparent 70%),
    radial-gradient(600px 400px at 15% 90%,rgba(26,61,176,.1),transparent 60%),
    var(--bg);
  background-attachment:fixed;
}
body::before{
  content:"";position:fixed;inset:-40% -20%;pointer-events:none;z-index:0;opacity:.55;
  background:
    radial-gradient(40% 50% at 30% 30%,rgba(29,78,216,.12),transparent 60%),
    radial-gradient(40% 50% at 70% 70%,rgba(255,122,26,.1),transparent 60%),
    radial-gradient(35% 45% at 20% 75%,rgba(251,191,36,.08),transparent 60%);
  animation:meshDrift 24s ease-in-out infinite alternate;
  mix-blend-mode:multiply;
}
@keyframes meshDrift{
  0%{transform:translate(0,0) scale(1)}
  50%{transform:translate(4%,-3%) scale(1.08)}
  100%{transform:translate(-3%,4%) scale(.96)}
}

/* Masthead slides out of view when the sticky mini buy-bar slides in,
   so they take turns occupying the top edge. */
.masthead{transition:transform .42s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease;will-change:transform}
.masthead--hidden{transform:translateY(-100%);box-shadow:none !important;pointer-events:none}

/* Sticky mini buy-bar — slides from top after hero scrolls away */
.mini-bar{
  position:fixed;top:0;left:0;right:0;z-index:90;
  transform:translateY(-110%);transition:transform .4s cubic-bezier(.2,.8,.2,1);
  background:rgba(10,20,36,.85);backdrop-filter:saturate(160%) blur(20px);-webkit-backdrop-filter:saturate(160%) blur(20px);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 20px 40px -20px rgba(0,0,0,.5);
  will-change:transform;
}
.mini-bar.visible{transform:translateY(0)}
.mini-bar .wrap{display:flex;align-items:center;gap:16px;padding:10px 32px;max-width:1280px;margin:0 auto}
.mini-bar .mb-img{width:44px;height:44px;border-radius:10px;background:#fff;background-size:78%;background-repeat:no-repeat;background-position:center;flex:none}
.mini-bar .mb-info{display:flex;flex-direction:column;min-width:0;flex:1}
.mini-bar .mb-name{font-size:14px;color:#fff;font-weight:700;letter-spacing:-0.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px}
.mini-bar .mb-sub{font-size:12px;color:rgba(255,255,255,.65);font-weight:500;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px}
.mini-bar .mb-price{font-size:22px;font-weight:800;color:#fff;letter-spacing:-0.02em;padding:0 18px;border-left:1px solid rgba(255,255,255,.12);border-right:1px solid rgba(255,255,255,.12);height:44px;display:flex;align-items:center}
.mini-bar .mb-stock{
  display:inline-flex;align-items:center;gap:6px;color:#10b981;font-size:11px;font-weight:700;
  padding:4px 10px;background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.22);border-radius:980px;
}
.mini-bar .mb-stock::before{content:"";width:5px;height:5px;background:#10b981;border-radius:50%;animation:livePulse 2s infinite}
.mini-bar .mb-btns{display:flex;gap:8px}
.mini-bar .mb-btn{
  display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 18px;border-radius:10px;
  font-size:13px;font-weight:700;letter-spacing:-0.005em;border:0;cursor:pointer;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}
.mini-bar .mb-btn.cart{background:#fff;color:var(--ink)}
.mini-bar .mb-btn.buy{background:linear-gradient(135deg,var(--orange),#ff5c33);box-shadow:0 6px 18px -4px rgba(255,122,26,.55),inset 0 1px 0 rgba(255,255,255,.2)}
.mini-bar .mb-btn:hover{filter:brightness(1.05)}
@media(max-width:860px){.mini-bar .mb-info,.mini-bar .mb-stock{display:none}}

/* Live social-proof ticker — above the title */
.social-proof{
  display:inline-flex;align-items:center;gap:10px;
  margin-bottom:14px;padding:7px 14px;border-radius:980px;
  background:linear-gradient(135deg,rgba(26,61,176,.08),rgba(255,122,26,.05));
  border:1px solid rgba(26,61,176,.18);
  font-size:12.5px;font-weight:600;color:var(--ink-2);
  position:relative;overflow:hidden;
}
.social-proof::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);
  transform:translateX(-120%);animation:shimmer 3.2s ease-in-out infinite;
}
@keyframes shimmer{0%{transform:translateX(-120%)}60%{transform:translateX(120%)}100%{transform:translateX(120%)}}
.social-proof .eye{width:14px;height:14px;color:var(--blue);flex:none}
.social-proof b{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums}
.social-proof .sep{width:4px;height:4px;background:var(--muted);border-radius:50%;opacity:.5}
.social-proof .cart-emoji{color:var(--orange);font-weight:700}

/* Tilt-on-hover depth — applied to price card + gallery frame + at-glance */
.tilt{transition:transform .25s cubic-bezier(.25,.9,.3,1),box-shadow .25s ease;will-change:transform;transform-style:preserve-3d}
.tilt:hover{transform:translateY(-2px)}

/* Price-history sparkline in the price card */
.price-trend{
  margin-top:14px;display:flex;align-items:center;gap:12px;padding:10px 14px;
  background:rgba(16,185,129,.06);border:1px solid rgba(16,185,129,.18);border-radius:10px;
  font-size:12.5px;
}
.price-trend svg{flex:none}
.price-trend .label{color:var(--ink-2)}
.price-trend .label b{color:#047857;font-weight:800;font-variant-numeric:tabular-nums}

/* Scroll-reveal (IntersectionObserver) */
.fx-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.25,.9,.3,1),transform .7s cubic-bezier(.25,.9,.3,1)}
.fx-reveal.in{opacity:1;transform:translateY(0)}

/* Enhanced title — slightly larger, extra gradient treatment */
.title em{
  background:linear-gradient(100deg,var(--blue) 0%,var(--orange) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  color:transparent;
  font-style:italic;
  /* Give italic glyphs room to render their right-leaning tail
     without the clipped background cutting them off. */
  display:inline-block;
  padding-right:0.14em;
  margin-right:-0.08em;
}
.title em::after{display:none}

/* Data-pulse pills for key specs */
.spec-pulse{
  display:inline-flex;align-items:center;gap:8px;padding:5px 11px;border-radius:980px;
  background:rgba(26,61,176,.08);border:1px solid rgba(26,61,176,.18);
  font-size:11.5px;font-weight:700;color:var(--blue);letter-spacing:0.02em;
  margin:0 4px 6px 0;
}
.spec-pulse svg{width:12px;height:12px;flex:none}

/* Obvious "Browse by Vehicle" button tucked inside the search bar.
   Colored fill + soft shadow + inset highlight make it read as a button,
   not a label for the input. */
.search{padding-left:6px;gap:0;height:50px}
.search .browse-inline{
  display:inline-flex;align-items:center;gap:8px;
  height:38px;margin-right:8px;padding:0 16px;
  border:0;cursor:pointer;white-space:nowrap;
  background:linear-gradient(135deg,var(--orange) 0%,#ff5c33 100%);
  color:#fff;border-radius:9px;
  font:inherit;font-weight:700;font-size:13.5px;letter-spacing:-0.005em;
  box-shadow:
    0 4px 12px -2px rgba(255,122,26,.45),
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -1px 0 rgba(0,0,0,.08);
  transition:transform .18s ease,box-shadow .25s ease,filter .25s ease,opacity .25s ease;
  position:relative;overflow:hidden;
}
/* When the user is typing in the search input, quiet the Browse button
   so it reads as a secondary option and stops competing with the text. */
.search:focus-within .browse-inline{
  opacity:.48;
  filter:saturate(.7);
  box-shadow:0 2px 8px -2px rgba(255,122,26,.2),inset 0 1px 0 rgba(255,255,255,.2);
}
.search:focus-within .browse-inline:hover,
.search:focus-within .browse-inline:focus-visible{
  opacity:1;
  filter:none;
  box-shadow:0 8px 20px -2px rgba(255,122,26,.6),inset 0 1px 0 rgba(255,255,255,.3);
}
/* Dim the divider a touch too so the input feels more separated */
.search:focus-within .divider{opacity:.4}
.search .browse-inline::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .6s ease;
}
.search .browse-inline:hover{transform:translateY(-1px);filter:brightness(1.05);box-shadow:0 8px 20px -2px rgba(255,122,26,.6),inset 0 1px 0 rgba(255,255,255,.3)}
.search .browse-inline:hover::after{transform:translateX(120%)}
.search .browse-inline:active{transform:translateY(0)}
.search .browse-inline svg{flex:none}

/* Red × clear button inside the search bar — appears while the user has text */
.search .search-clear{
  display:grid;place-items:center;
  width:28px;height:28px;margin:0 8px 0 0;flex:none;
  background:#ef4444;color:#fff;border:0;border-radius:50%;cursor:pointer;
  box-shadow:0 2px 6px -2px rgba(239,68,68,.5),inset 0 1px 0 rgba(255,255,255,.2);
  transition:background .15s ease,transform .15s ease,box-shadow .15s ease;
}
.search .search-clear:hover{background:#dc2626;transform:scale(1.08);box-shadow:0 4px 10px -2px rgba(239,68,68,.6)}
.search .search-clear:active{transform:scale(.95)}
.search .search-clear[hidden]{display:none}

/* ════════ POLICY LIST + WIDE CARD ════════ */
.policy-list{margin:10px 0 0;padding:0 0 0 22px;color:var(--ink-2);font-size:14px;line-height:1.7}
.policy-list li{margin-bottom:4px}
.policy-list li::marker{color:var(--blue)}
.policies .policy-wide{grid-column:1/-1}
.policies .policy-card > p + p{margin-top:10px}

/* ════════ EXPERT GUIDE CARD ════════ */
.expert-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  background:
    radial-gradient(600px 240px at 0% 0%,rgba(26,61,176,.08),transparent 60%),
    radial-gradient(600px 240px at 100% 100%,rgba(255,122,26,.06),transparent 60%),
    linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.78));
  backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.7);
  border-radius:20px;
  padding:44px 48px;
  text-decoration:none;color:inherit;
  box-shadow:0 30px 60px -30px rgba(26,61,176,.22),0 0 0 1px rgba(26,61,176,.05),inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .25s cubic-bezier(.25,.9,.3,1),box-shadow .25s ease;
  position:relative;overflow:hidden;
}
.expert-card:hover{transform:translateY(-3px);box-shadow:0 40px 80px -30px rgba(26,61,176,.35),0 0 0 1px rgba(26,61,176,.1),inset 0 1px 0 rgba(255,255,255,.95)}
.expert-card-kicker{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:700;color:var(--blue);
  padding:6px 14px;background:rgba(26,61,176,.08);border:1px solid rgba(26,61,176,.18);
  border-radius:980px;
}
.expert-card-title{font-size:28px;font-weight:800;color:var(--ink);letter-spacing:-0.025em;line-height:1.15;margin:6px 0 0}
.expert-card-sub{font-size:16px;color:var(--muted);line-height:1.55;margin:0;max-width:620px}
.expert-card-cta{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:14px;padding:13px 24px;border-radius:10px;
  background:linear-gradient(135deg,var(--blue),var(--blue-2));color:#fff;
  font-size:14px;font-weight:700;letter-spacing:-0.005em;
  box-shadow:0 8px 24px -8px rgba(29,78,216,.5),inset 0 1px 0 rgba(255,255,255,.2);
  transition:box-shadow .2s ease;
}
.expert-card:hover .expert-card-cta{box-shadow:0 12px 30px -8px rgba(29,78,216,.6)}
.expert-card-cta .arrow{transition:transform .25s ease}
.expert-card:hover .expert-card-cta .arrow{transform:translateX(4px)}

/* ════════ TASTEFUL ACCENT COLOR PALETTE ════════
   Jewel tones that play well with navy + orange without feeling candy-coated. */
:root{
  --green:#16a34a;     --green-2:#059669;
  --teal:#0891b2;      --teal-2:#0e7490;
  --amber:#d97706;     --amber-2:#b45309;
  --purple:#7c3aed;    --purple-2:#6d28d9;
}

/* Why Go-Parts stat cards — each gets its own meaningful accent */
/* 1st card: 100% Money-Back → GREEN (trust/safety) */
.why-card:nth-child(1) .num{
  background:linear-gradient(135deg,var(--green),#22c55e);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  text-shadow:none;
}
.why-card:nth-child(1){
  box-shadow:inset 0 1px 0 rgba(34,197,94,.12),0 0 24px -6px rgba(34,197,94,.18);
}

/* 2nd card: 19 Years of Excellence → AMBER (legacy — pairs with trophy) */
.why-card:nth-child(2) .num{
  background:linear-gradient(135deg,var(--amber),#fbbf24);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  text-shadow:none;
}
.why-card:nth-child(2){
  box-shadow:inset 0 1px 0 rgba(251,191,36,.14),0 0 24px -6px rgba(251,191,36,.2);
}

/* 3rd card: OEM Grade Quality → CYAN/TEAL (precision/engineering) */
.why-card:nth-child(3) .num{
  background:linear-gradient(135deg,var(--teal),#06b6d4);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  text-shadow:none;
}
.why-card:nth-child(3){
  box-shadow:inset 0 1px 0 rgba(6,182,212,.14),0 0 24px -6px rgba(6,182,212,.2);
}

/* Policy card icons — distinct color per policy */
.policies .policy-card:nth-child(1) h4 .ch{background:linear-gradient(135deg,var(--green),var(--green-2));box-shadow:0 4px 12px -2px rgba(22,163,74,.45)}
.policies .policy-card:nth-child(1)::before{background:linear-gradient(180deg,var(--green),var(--green-2));box-shadow:0 0 12px rgba(22,163,74,.6)}

.policies .policy-card:nth-child(2) h4 .ch{background:linear-gradient(135deg,var(--teal),var(--teal-2));box-shadow:0 4px 12px -2px rgba(8,145,178,.45)}
.policies .policy-card:nth-child(2)::before{background:linear-gradient(180deg,var(--teal),var(--teal-2));box-shadow:0 0 12px rgba(8,145,178,.6)}

.policies .policy-card:nth-child(3) h4 .ch{background:linear-gradient(135deg,var(--purple),var(--purple-2));box-shadow:0 4px 12px -2px rgba(124,58,237,.45)}
.policies .policy-card:nth-child(3)::before{background:linear-gradient(180deg,var(--purple),var(--purple-2));box-shadow:0 0 12px rgba(124,58,237,.6)}

.policies .policy-card:nth-child(4) h4 .ch{background:linear-gradient(135deg,var(--orange),#ff5c33);box-shadow:0 4px 12px -2px rgba(255,122,26,.45)}
.policies .policy-card:nth-child(4)::before{background:linear-gradient(180deg,var(--orange),#ff5c33);box-shadow:0 0 12px rgba(255,122,26,.6)}

/* ════════ COMPACT REVIEWS HEADER ════════ */
.reviews{padding-top:72px !important;padding-bottom:72px !important}
.reviews-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  margin-bottom:20px !important;
}
.reviews-head h2{margin:0;line-height:1.05}
.score-pill{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 16px;border-radius:980px;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.78));
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 6px 16px -8px rgba(26,61,176,.25),inset 0 1px 0 rgba(255,255,255,.95);
  font-size:14px;white-space:nowrap;
}
.score-pill .stars{color:var(--yellow);font-size:15px;letter-spacing:.5px}
.score-pill .num{color:var(--ink);font-weight:800;font-size:15px;font-variant-numeric:tabular-nums}
.score-pill .sep{width:4px;height:4px;background:var(--muted);border-radius:50%;opacity:.5}
.score-pill .count{color:var(--muted);font-size:13px;font-weight:500}
.score-pill .count b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}

/* ════════ LIQUID-GLASS LIFETIME WARRANTY PANEL ════════ */
.warranty{
  position:relative;overflow:hidden;
  background:
    radial-gradient(60% 80% at 90% 0%,rgba(255,122,26,.22),transparent 60%),
    radial-gradient(60% 80% at 0% 100%,rgba(61,213,255,.15),transparent 55%),
    linear-gradient(180deg,rgba(26,61,176,.88) 0%,rgba(18,48,127,.96) 100%);
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:
    0 24px 48px -18px rgba(26,61,176,.5),
    0 0 0 1px rgba(255,255,255,.05),
    inset 0 1px 0 rgba(255,255,255,.2),
    inset 0 -1px 0 rgba(0,0,0,.15) !important;
}
.warranty::before{
  display:block !important;content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(110deg,transparent 20%,rgba(255,255,255,.15) 50%,transparent 80%);
  opacity:.45;
  background-size:100% 100%;
  mix-blend-mode:overlay;
}
/* Hairline gradient rim at top edge for glass-cap highlight */
.warranty::after{
  content:"";position:absolute;top:0;left:12px;right:12px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
}
.warranty .seal{
  background:rgba(255,255,255,.12) !important;
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,224,100,.4) !important;
  color:var(--yellow) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 2px 8px rgba(0,0,0,.2);
}

/* ════════ NEXT-GEN SEARCHABLE COMBOBOX ════════ */
.combo{position:relative;width:100%;font:inherit}
.combo-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 14px;border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(248,250,253,.7));
  backdrop-filter:blur(10px);
  border:1px solid rgba(10,20,36,.1);
  font:inherit;font-size:15px;font-weight:600;color:var(--ink);
  cursor:pointer;text-align:left;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 1px 2px rgba(10,20,36,.04);
  transition:all .2s cubic-bezier(.25,.9,.3,1);
}
.combo-btn:hover:not(:disabled){border-color:rgba(29,78,216,.35);background:linear-gradient(180deg,#fff,rgba(248,250,253,.88))}
.combo.open .combo-btn{
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(29,78,216,.15),inset 0 1px 0 rgba(255,255,255,.6),0 8px 20px -6px rgba(29,78,216,.3);
  background:#fff;
}
.combo-btn:disabled{cursor:not-allowed;opacity:.55}
.combo-value{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.combo-value.is-placeholder{color:var(--muted);font-weight:500}
.combo-chev{flex:none;color:var(--muted);transition:transform .25s cubic-bezier(.25,.9,.3,1)}
.combo.open .combo-chev{transform:rotate(180deg);color:var(--blue)}

.combo-panel{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:20;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(248,250,253,.88));
  backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.8);
  border-radius:14px;
  box-shadow:
    0 30px 60px -18px rgba(10,20,36,.3),
    0 0 0 1px rgba(26,61,176,.05),
    inset 0 1px 0 rgba(255,255,255,.9);
  display:none;overflow:hidden;
}
.combo.open .combo-panel{display:block;animation:comboOpen .24s cubic-bezier(.25,.9,.3,1)}
@keyframes comboOpen{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}

.combo-search{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-bottom:1px solid rgba(10,20,36,.06);
  background:linear-gradient(180deg,rgba(26,61,176,.04),transparent);
}
.combo-search svg{color:var(--muted);flex:none}
.combo-search input{
  flex:1;border:0;outline:0;background:transparent;
  font:inherit;font-size:14px;color:var(--ink);
  min-width:0;
}
.combo-search input::placeholder{color:var(--muted)}

.combo-list{
  list-style:none;margin:0;padding:6px;max-height:240px;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:rgba(10,20,36,.25) transparent;
}
.combo-list::-webkit-scrollbar{width:6px}
.combo-list::-webkit-scrollbar-thumb{background:rgba(10,20,36,.2);border-radius:3px}
.combo-opt{
  padding:9px 12px;border-radius:8px;cursor:pointer;
  font-size:14px;font-weight:500;color:var(--ink);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  transition:background .12s ease;
}
.combo-opt:hover,.combo-opt.active{background:linear-gradient(135deg,rgba(26,61,176,.08),rgba(255,122,26,.04))}
.combo-opt.selected{background:linear-gradient(135deg,rgba(26,61,176,.14),rgba(26,61,176,.08));color:var(--blue);font-weight:700}
.combo-opt.selected::after{content:"✓";color:var(--blue);font-weight:800}
.combo-opt mark{background:rgba(255,196,0,.4);color:inherit;padding:0 1px;border-radius:2px;font-weight:700}

.combo-empty{padding:18px 14px;text-align:center;color:var(--muted);font-size:13px}

@media (max-width:480px){
  .combo-panel{left:-12px;right:-12px}
  .combo-list{max-height:200px}
}

/* ════════ YMM MODAL — solid interior so native <select> dropdowns work ════════
   Glass frosting only on the outer backdrop; everything inside the box is
   solid so the browser's native option popup is readable and renders on top. */
.ymm-modal{
  background:rgba(5,10,25,.55);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.ymm-box{
  background:#ffffff !important;
  border:1px solid var(--line) !important;
  /* NO backdrop-filter here — it creates a stacking context that can trap native select popups */
  box-shadow:
    0 50px 120px -30px rgba(10,20,36,.5),
    0 0 0 1px rgba(26,61,176,.06),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
}
.ymm-box::before{
  background:
    radial-gradient(360px 160px at 20% 0%,rgba(26,61,176,.1),transparent 60%),
    radial-gradient(360px 160px at 80% 100%,rgba(255,122,26,.08),transparent 60%) !important;
}
.ymm-step{
  background:#fff !important;
  border:1px solid var(--line) !important;
  box-shadow:0 1px 2px rgba(10,20,36,.04);
  transition:all .25s cubic-bezier(.25,.9,.3,1);
}
.ymm-step.active{
  background:#fff !important;
  border-color:rgba(29,78,216,.4) !important;
  box-shadow:0 0 0 3px rgba(29,78,216,.12),0 10px 20px -8px rgba(29,78,216,.18) !important;
}
.ymm-step.done{
  background:#f6fdfa !important;
  border-color:rgba(16,185,129,.35) !important;
}
/* Native <select> inside the step cards — solid, readable, no transparency */
.ymm-select{
  background-color:#fff !important;
  color:var(--ink) !important;
}
.ymm-num{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 2px 4px rgba(10,20,36,.08)}
.ymm-step.active .ymm-num{
  box-shadow:0 0 0 4px rgba(29,78,216,.18),inset 0 1px 0 rgba(255,255,255,.25),0 6px 14px -3px rgba(29,78,216,.45) !important;
}

/* ════════ LIVE REVIEWS WIDGET WRAPPER ════════ */
.reviews-embed{
  position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.72));
  backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.7);
  border-radius:18px;
  padding:18px 22px;
  box-shadow:0 30px 60px -30px rgba(26,61,176,.22),0 0 0 1px rgba(26,61,176,.04),inset 0 1px 0 rgba(255,255,255,.85);
  overflow:hidden;
}
.reviews-embed::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(340px 160px at 10% 0%,rgba(26,61,176,.08),transparent 60%),
             radial-gradient(340px 160px at 95% 100%,rgba(255,122,26,.07),transparent 60%);
}
.embedsocial-reviews{position:relative;z-index:1}

/* ════════ COMPACT FOOTER ════════ */
footer{padding:40px 0 22px !important}
.foot-grid{grid-template-columns:1.2fr 1fr 1fr 1fr !important;gap:40px !important;margin-bottom:22px;align-items:center !important}
.foot-brand .tag{margin:0 0 8px !important;font-size:17px !important}
.foot-brand .email{font-size:15px}
.foot-brand .meta{margin-top:12px !important;font-size:12.5px !important;line-height:1.55 !important}
.foot-social{margin-top:14px !important;gap:10px}
.foot-social a{width:34px;height:34px;transition:background .18s ease,transform .18s ease,border-color .18s ease !important}
.foot-social a:hover{transform:translateY(-2px)}
.foot-social a[data-platform="facebook"]:hover {background:#1877f2;border-color:#1877f2;color:#fff}
.foot-social a[data-platform="tiktok"]:hover   {background:#000;border-color:#000;color:#fff}
.foot-social a[data-platform="youtube"]:hover  {background:#ff0000;border-color:#ff0000;color:#fff}
.foot-social a[data-platform="instagram"]:hover{background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);border-color:#cc2366;color:#fff}
.foot-bottom{margin-top:22px !important;padding-top:16px !important;font-size:13.5px}

/* Two link columns styled as lists (matches the live page) */
.foot-links{list-style:none;margin:0;padding:0}
.foot-links li{margin:0 0 8px}
.foot-links a{
  color:rgba(255,255,255,.78);font-size:15.5px;font-weight:500;
  text-decoration:none;transition:color .18s ease;
  letter-spacing:0;text-transform:none;padding:0;opacity:1;
}
.foot-links a:hover{color:var(--yellow);padding-left:0}
.foot-links a.primary{color:#fff;font-weight:700}
.foot-links a.primary:hover{color:var(--yellow)}

/* Trophy block — tighter vertical spacing */
.foot-trophy{gap:4px !important}

/* Inline copyright & made-with lines that replace the old .foot-bottom row */
.brand-copy{
  margin:14px 0 0;font-size:13px;color:rgba(255,255,255,.55);font-weight:500;
  letter-spacing:0;text-transform:none;
}
.trophy-made{
  margin:6px 0 0;font-size:13px;color:rgba(255,255,255,.65);font-weight:500;
}
.trophy-made .heart{color:#ff5c77;filter:saturate(1.2)}

/* ════════ FOOTER TROPHY BADGE ════════ */
.foot-trophy{text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.trophy-badge{
  width:60px;height:60px;border-radius:50%;
  display:grid;place-items:center;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.35), transparent 55%),
    linear-gradient(140deg, #ffd43b 0%, #f5a623 45%, #ff7a1a 100%);
  color:#3d2200;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.2),
    0 8px 28px -6px rgba(255,170,40,.55),
    0 0 40px -4px rgba(255,170,40,.35),
    inset 0 2px 2px rgba(255,255,255,.45),
    inset 0 -8px 16px -4px rgba(140,60,0,.35);
  position:relative;margin-bottom:8px;
}
.trophy-badge svg{width:32px;height:32px;filter:drop-shadow(0 2px 1px rgba(0,0,0,.2))}
.trophy-title{
  font-size:17px;font-weight:800;color:#fbbf24;
  letter-spacing:-0.01em;margin:0;
  text-transform:none;padding:0;border:0;
}
.trophy-sub{
  font-size:14.5px;color:rgba(255,255,255,.78);margin:0;font-weight:500;
}
.trophy-sub span{font-weight:700;color:#fff}

/* ════════ UNIFIED PURCHASE PANEL ════════
   Price and buy controls share the same card so that blank space
   to the right of the price disappears. */
.price-card .price-card-grid{
  display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center;
  position:relative;z-index:1;
}
.price-card .price-col{display:flex;flex-direction:column;gap:12px;min-width:0}
.price-card .price-row{display:flex;align-items:flex-end;gap:18px}
.price-card .price-list-strike{display:flex;flex-direction:column;align-items:flex-start;padding-bottom:10px;gap:2px}
.price-card .price-list-strike .was{font-size:10.5px;color:var(--muted);font-weight:700;letter-spacing:0.08em;text-transform:uppercase}
.price-card .price-list-strike .was-price{
  font-size:16px;color:var(--muted);font-weight:700;
  text-decoration:line-through;text-decoration-thickness:1.5px;text-decoration-color:rgba(107,119,151,.6);
  font-variant-numeric:tabular-nums;
}
.price-card .price-per-month{margin-top:4px}

.price-card .buy-col{display:flex;flex-direction:column;gap:10px;min-width:0}
.price-card .buy-col-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 2px 2px}
.price-card .qty-label{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:0.08em;text-transform:uppercase}
.price-card .buy-col .qty{
  display:inline-flex;align-items:center;background:rgba(255,255,255,.6);border:1px solid var(--line);border-radius:10px;height:38px;overflow:hidden;
}
.price-card .buy-col .qty button{width:32px;height:100%;background:transparent;border:0;font:inherit;font-size:16px;cursor:pointer;color:var(--ink);font-weight:600}
.price-card .buy-col .qty button:hover{background:rgba(0,0,0,.04)}
.price-card .buy-col .qty input{width:34px;text-align:center;border:0;outline:0;background:transparent;font:inherit;font-size:14px;font-weight:700;color:var(--ink);padding:0;height:100%}
.price-card .buy-col .btn{height:50px;width:100%;padding:0 18px;font-size:14px;letter-spacing:-0.005em}
.price-card .buy-col .btn.primary{justify-content:space-between}
.price-card .buy-col .btn.primary .arrow{display:inline-block;transition:transform .2s ease}
.price-card .buy-col .btn.primary:hover .arrow{transform:translateX(4px)}

/* On narrow screens collapse to single column */
@media(max-width:900px){
  .price-card .price-card-grid{grid-template-columns:1fr;gap:22px}
}

/* ════════ HOVER MINI-CART ════════ */
.cart-wrap{position:relative;display:inline-block}
.cart-wrap .cart-btn{position:relative;z-index:2}
/* tiny bounce when item added */
.cart-btn.bump{animation:cartBump .45s cubic-bezier(.3,1.3,.5,1)}
@keyframes cartBump{
  0%{transform:translateY(0) scale(1)}
  40%{transform:translateY(-3px) scale(1.06)}
  100%{transform:translateY(0) scale(1)}
}
.cart-btn .count.highlight{background:#10b981 !important;color:#fff !important;animation:countFlash 1.1s ease}
@keyframes countFlash{0%{box-shadow:0 0 0 0 rgba(16,185,129,.6)}70%{box-shadow:0 0 0 10px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}

.mini-cart{
  position:absolute;top:calc(100% + 12px);right:0;
  width:380px;max-width:94vw;
  background:rgba(255,255,255,.96);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.8);border-radius:16px;
  box-shadow:
    0 30px 70px -20px rgba(10,20,36,.35),
    0 0 0 1px rgba(26,61,176,.06),
    inset 0 1px 0 rgba(255,255,255,.9);
  opacity:0;transform:translateY(-8px) scale(.98);pointer-events:none;
  transition:opacity .2s ease,transform .25s cubic-bezier(.3,1.3,.5,1);
  z-index:70;
  color:var(--ink);
}
.cart-wrap:hover .mini-cart,
.cart-wrap.open .mini-cart{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
/* extend hover bridge so moving between btn and dropdown doesn't close it */
.mini-cart::before{content:"";position:absolute;top:-14px;right:0;left:0;height:14px}

.mini-cart-arrow{
  position:absolute;top:-6px;right:28px;
  width:12px;height:12px;background:inherit;
  border-left:1px solid rgba(255,255,255,.8);
  border-top:1px solid rgba(255,255,255,.8);
  transform:rotate(45deg);
  background:rgba(255,255,255,.96);
}

.mini-cart-empty{padding:36px 28px;text-align:center}
.mini-cart-empty .empty-icon{width:64px;height:64px;margin:0 auto 14px;border-radius:50%;background:var(--bg-2);color:var(--muted);display:grid;place-items:center}
.mini-cart-empty .empty-title{font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-0.015em}
.mini-cart-empty .empty-sub{font-size:13px;color:var(--muted);margin-top:4px}

.mini-cart-list{padding:8px;max-height:360px;overflow-y:auto}
.mini-cart-item{
  display:grid;grid-template-columns:56px 1fr auto;gap:12px;
  align-items:center;padding:12px;border-radius:10px;
  transition:background .15s ease;
}
.mini-cart-item + .mini-cart-item{border-top:1px solid var(--line-soft)}
.mini-cart-item:hover{background:var(--bg-2)}
.mini-cart-item .thumb{width:56px;height:56px;border-radius:10px;background:#fff;background-size:86%;background-repeat:no-repeat;background-position:center;border:1px solid var(--line);flex:none}
.mini-cart-item .info{display:flex;flex-direction:column;gap:2px;min-width:0}
.mini-cart-item .name{font-size:13.5px;font-weight:700;color:var(--ink);letter-spacing:-0.01em;line-height:1.25;max-height:2.5em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mini-cart-item .meta{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);margin-top:4px}
.mini-cart-item .qty-mini{
  display:inline-flex;align-items:center;background:var(--bg-2);border:1px solid var(--line);border-radius:6px;height:22px;overflow:hidden;
}
.mini-cart-item .qty-mini button{width:22px;height:22px;background:transparent;border:0;font:inherit;font-size:13px;line-height:1;color:var(--ink);cursor:pointer}
.mini-cart-item .qty-mini button:hover{background:var(--line-soft)}
.mini-cart-item .qty-mini .val{padding:0 6px;font:inherit;font-size:12px;font-weight:700;color:var(--ink);min-width:16px;text-align:center}
.mini-cart-item .price-col{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.mini-cart-item .price{font-size:14px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.mini-cart-item .remove{font:inherit;font-size:11px;color:var(--muted);background:transparent;border:0;cursor:pointer;padding:0;letter-spacing:0}
.mini-cart-item .remove:hover{color:#ef4444;text-decoration:underline}

.mini-cart-footer{padding:14px 18px 16px;border-top:1px solid var(--line-soft);background:var(--bg-2);border-radius:0 0 16px 16px}
.mini-cart-totals{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.totals-label{font-size:13px;color:var(--muted);font-weight:600}
.totals-value{font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-0.025em;font-variant-numeric:tabular-nums}
.mini-cart-ship{display:flex;align-items:center;gap:8px;padding:8px 10px;margin:4px 0 12px;background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.2);border-radius:8px;font-size:11.5px;color:var(--ink-2)}
.mini-cart-ship svg{color:#10b981;flex:none}
.mini-cart-ship b{color:#047857;font-weight:700}
.mini-cart-actions{display:grid;grid-template-columns:1fr 1.3fr;gap:8px}
.mini-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:42px;border-radius:10px;font:inherit;font-weight:700;font-size:13.5px;letter-spacing:-0.005em;cursor:pointer;border:0;text-decoration:none}
.mini-btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.mini-btn.ghost:hover{background:var(--bg)}
.mini-btn.primary{background:linear-gradient(135deg,var(--orange),#ff5c33);color:#fff;box-shadow:0 6px 16px -4px rgba(255,122,26,.5),inset 0 1px 0 rgba(255,255,255,.2)}
.mini-btn.primary:hover{filter:brightness(1.05)}

@media(max-width:480px){
  .mini-cart{position:fixed;top:auto;bottom:16px;right:16px;left:16px;width:auto}
  .mini-cart-arrow{display:none}
}

/* "Added to cart" flash toast — appears briefly after adding */
.cart-flash{
  position:fixed;top:88px;right:24px;z-index:95;
  display:flex;align-items:center;gap:12px;padding:14px 18px;
  background:#fff;border:1px solid rgba(16,185,129,.3);border-radius:12px;
  box-shadow:0 20px 40px -16px rgba(10,20,36,.25);
  opacity:0;transform:translateX(16px);pointer-events:none;
  transition:opacity .25s ease,transform .25s cubic-bezier(.3,1.3,.5,1);
}
.cart-flash.visible{opacity:1;transform:translateX(0)}
.cart-flash .check{width:28px;height:28px;border-radius:50%;background:#10b981;color:#fff;display:grid;place-items:center;flex:none}
.cart-flash .msg{font-size:13px;color:var(--ink);font-weight:600}
.cart-flash .msg b{font-weight:800}

/* ════════ YMM VEHICLE MODAL ════════ */
.ymm-modal{
  position:fixed;inset:0;z-index:110;display:none;
  background:rgba(5,10,25,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  /* Anchor the modal high up — maximizes vertical room below for native
     <select> dropdowns (Year/Make/Model) to expand. */
  align-items:flex-start;justify-content:center;padding:24px 20px 20px;
  overflow-y:auto;   /* let the modal itself scroll if content exceeds viewport */
}
.ymm-modal.open{display:flex;animation:ymmFade .25s ease}
@keyframes ymmFade{from{opacity:0}to{opacity:1}}
.ymm-box{
  width:min(520px,100%);position:relative;
  background:linear-gradient(180deg,#fff 0%,#fafbfd 100%);
  border:1px solid rgba(255,255,255,.9);border-radius:22px;
  box-shadow:0 60px 120px -40px rgba(5,10,25,.55),0 0 0 1px rgba(26,61,176,.08);
  /* overflow must stay visible so the native <select> dropdown popup isn't clipped */
  overflow:visible;
  animation:ymmPop .4s cubic-bezier(.3,1.3,.5,1);
}
.ymm-box::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;
  overflow:hidden;
  background:
    radial-gradient(320px 140px at 20% 0%,rgba(26,61,176,.12),transparent 60%),
    radial-gradient(320px 140px at 80% 100%,rgba(255,122,26,.1),transparent 60%);
}
@keyframes ymmPop{from{opacity:0;transform:translateY(-12px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.ymm-head{
  position:relative;z-index:1;padding:28px 28px 16px;display:flex;align-items:center;justify-content:space-between;
}
.ymm-head h3{
  display:flex;align-items:center;gap:10px;font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-0.02em;line-height:1;margin:0;
}
.ymm-head h3 svg{width:22px;height:22px;color:var(--orange)}
.ymm-close{
  width:34px;height:34px;border-radius:50%;background:transparent;border:0;cursor:pointer;
  color:var(--muted);display:grid;place-items:center;transition:all .15s;
}
.ymm-close:hover{background:var(--bg-2);color:var(--ink)}
.ymm-sub{
  position:relative;z-index:1;padding:0 28px 4px;font-size:13.5px;color:var(--muted);
}
.ymm-body{position:relative;z-index:1;padding:18px 28px 28px;display:flex;flex-direction:column;gap:14px}

.ymm-step{
  display:flex;align-items:center;gap:14px;padding:14px;border-radius:14px;
  background:var(--bg);border:1px solid var(--line);
  transition:all .2s ease;
}
.ymm-step.active{border-color:var(--blue);box-shadow:0 0 0 3px rgba(29,78,216,.1);background:#fff}
.ymm-step.done{background:linear-gradient(135deg,rgba(16,185,129,.05),rgba(16,185,129,.02));border-color:rgba(16,185,129,.3)}
.ymm-step.locked{opacity:.5;pointer-events:none}
.ymm-num{
  width:32px;height:32px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  background:var(--bg-2);color:var(--muted);
  font-size:13px;font-weight:800;
  transition:all .25s cubic-bezier(.3,1.3,.5,1);
}
.ymm-step.active .ymm-num{background:var(--blue);color:#fff;box-shadow:0 0 0 4px rgba(29,78,216,.15)}
.ymm-step.done .ymm-num{background:#10b981;color:#fff}
.ymm-step.done .ymm-num::before{content:"✓";font-size:14px}
.ymm-step.done .ymm-num-text{display:none}

.ymm-field{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.ymm-field label{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:0.08em;text-transform:uppercase}
.ymm-select{
  width:100%;appearance:none;-webkit-appearance:none;
  border:0;background:transparent;font:inherit;font-size:15px;font-weight:600;color:var(--ink);
  padding:2px 28px 2px 0;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7797' stroke-width='2.4' stroke-linecap='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right center;
}
.ymm-select:disabled{color:var(--muted);cursor:not-allowed}
.ymm-select:focus{outline:none}

.ymm-footer{
  padding:16px 28px 22px;background:var(--bg-2);border-top:1px solid var(--line);
  border-radius:0 0 22px 22px;   /* match ymm-box corner radius */
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  font-size:12.5px;color:var(--muted);
}
.ymm-footer .hint{display:flex;align-items:center;gap:8px}
.ymm-footer .hint svg{color:var(--blue);flex:none}
.ymm-reset{
  font:inherit;font-size:12px;font-weight:700;color:var(--muted);background:transparent;border:0;cursor:pointer;
  letter-spacing:0;
}
.ymm-reset:hover{color:var(--ink)}

.ymm-loading{
  position:absolute;inset:0;background:rgba(255,255,255,.88);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;flex-direction:column;gap:10px;z-index:10;
  border-radius:22px;
}
.ymm-loading.active{display:flex}
.ymm-loading .spinner{
  width:32px;height:32px;border:3px solid rgba(29,78,216,.18);border-top-color:var(--blue);border-radius:50%;
  animation:ymmSpin .7s linear infinite;
}
@keyframes ymmSpin{to{transform:rotate(360deg)}}
.ymm-loading span{font-size:13px;color:var(--ink);font-weight:600}

@media(max-width:520px){
  .ymm-head{padding:20px 20px 12px}
  .ymm-head h3{font-size:18px}
  .ymm-sub,.ymm-body{padding-left:20px;padding-right:20px}
  .ymm-footer{padding:14px 20px 18px;flex-direction:column;align-items:flex-start}
}

/* Command palette overlay (⌘K still opens it from the keyboard) */
.cmd-palette{
  position:fixed;inset:0;z-index:100;display:none;
  background:rgba(10,20,36,.45);backdrop-filter:blur(12px);
  align-items:flex-start;justify-content:center;padding-top:12vh;
}
.cmd-palette.open{display:flex;animation:cmdFade .2s ease}
@keyframes cmdFade{from{opacity:0}to{opacity:1}}
.cmd-box{
  width:min(560px,90vw);background:rgba(255,255,255,.96);backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.8);border-radius:16px;
  box-shadow:0 40px 100px -30px rgba(0,0,0,.4);
  overflow:hidden;animation:cmdPop .3s cubic-bezier(.3,1.4,.5,1);
}
@keyframes cmdPop{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.cmd-input{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line-soft)}
.cmd-input svg{color:var(--muted)}
.cmd-input input{flex:1;border:0;outline:0;font:inherit;font-size:16px;color:var(--ink);background:transparent}
.cmd-input kbd{font:inherit;font-size:11px;background:var(--bg-2);padding:3px 7px;border-radius:5px;color:var(--muted);font-weight:700}
.cmd-results{padding:8px;max-height:50vh;overflow-y:auto}
.cmd-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;cursor:pointer;font-size:14px;color:var(--ink)}
.cmd-item:hover,.cmd-item.active{background:var(--bg-2)}
.cmd-item .cmd-icon{width:28px;height:28px;border-radius:6px;background:rgba(29,78,216,.08);color:var(--blue);display:grid;place-items:center;flex:none}
.cmd-item .cmd-tag{margin-left:auto;font-size:11px;color:var(--muted);font-weight:600}

/* ════════════════════════════════════════════════════════
   RESPONSIVE — tablet & mobile
   ════════════════════════════════════════════════════════ */

/* Universal overflow guard.
   NOTE: using `overflow-x: clip` (not hidden) so `position: sticky` descendants
   like the masthead continue to pin to the viewport instead of getting trapped
   in a scroll container. Fallback to hidden for browsers without clip support. */
html,body{overflow-x:hidden}
@supports (overflow-x:clip){html,body{overflow-x:clip}}
.summary,.hero-grid,.tabs-wrap,.price-card,.at-glance,.notes,.price-card-grid,.summary > *,.hero > *,.reviews-head,.fitment-head{min-width:0}
.title{overflow-wrap:break-word;word-break:normal;hyphens:auto}
img{max-width:100%;height:auto}

/* ───────── TABLET (1024px and below) ───────── */
@media (max-width:1024px){
  .wrap{padding:0 20px}
  .masthead .wrap{gap:16px;padding:14px 20px}
  .hero{padding:40px 0 56px}
  .hero-grid{grid-template-columns:1fr 1fr;gap:32px}
  .title{font-size:40px}
  .title .sub{font-size:16px;margin-top:14px}
  .price-card{padding:22px 24px !important}
  .price-main .dol{font-size:56px}
  .price-main .cur,.price-main .cts{font-size:22px}
  .price-card .buy-col .btn{height:46px;font-size:13.5px}
  .at-glance{padding:18px 22px !important}

  .wrenchy-band{padding:36px 28px !important;gap:20px !important;grid-template-columns:auto 1fr !important}
  .wrenchy-band .ask-btn{grid-column:1/-1;justify-self:start;margin-top:6px}
  .wrenchy-band h3{white-space:normal;font-size:28px}

  /* Bigger tap targets */
  .tabs{top:84px}
  .tab{padding:10px 16px;font-size:14px}

  .why h2{font-size:44px}
  .why-cards{grid-template-columns:1fr 1fr;gap:12px}
  .why-card{padding:28px 24px}
  .why-card .num{font-size:48px}

  .reviews h2{font-size:36px}
  .reviews .score .num{font-size:54px}
  .racing h2{font-size:36px}
  .video-grid{grid-template-columns:1fr 1fr;gap:12px}

  .fitment-head h2{font-size:32px}

  footer .foot-grid{grid-template-columns:1.2fr 1fr 1fr !important;gap:28px !important}
  .foot-trophy{grid-column:1/-1 !important;margin-top:8px}
}

/* ───────── SMALL TABLET / LARGE PHONE (768px and below) ───────── */
@media (max-width:768px){
  .utility{display:none}

  /* Flex-wrap masthead: row 1 = logo + cart, row 2 = full-width search */
  .masthead .wrap{
    display:flex !important;flex-wrap:wrap !important;align-items:center !important;
    grid-template-columns:none !important;
    gap:10px !important;padding:10px 16px !important;
    width:100% !important;box-sizing:border-box !important;
  }
  .masthead .wordmark{padding:6px 10px !important;border-radius:10px !important;flex:0 1 auto !important;min-width:0 !important;max-width:60%}
  .masthead .wordmark .logo-img{height:28px !important;max-width:100%;object-fit:contain}
  .masthead .head-right{margin-left:auto !important;flex:0 0 auto !important;display:flex !important}
  .masthead .search{order:3 !important;flex:1 1 100% !important;width:100% !important;height:44px !important}
  /* Allow the search input to shrink below its placeholder's intrinsic width.
     Without this, it forces the whole masthead (and page) into horizontal overflow. */
  .masthead .search input{min-width:0;flex:1 1 auto}
  .search .browse-inline{height:34px;padding:0 12px;font-size:12.5px;margin-right:6px}
  .search .browse-inline span{display:none}          /* show just the icon on small screens */
  .search .browse-inline svg{width:18px;height:18px}
  .search .submit{padding:0 14px;font-size:12px;white-space:nowrap}
  .cart-btn{padding:10px 14px !important;font-size:13px}
  .cart-btn svg{width:18px;height:18px}

  /* Mini-cart fills the screen on phones */
  .mini-cart{width:calc(100vw - 24px);right:-6px;top:calc(100% + 8px)}
  .mini-cart-arrow{right:32px}

  .crumbs .wrap{height:40px;font-size:12px;flex-wrap:wrap;gap:6px}

  /* Hero stacks */
  .hero{padding:24px 0 40px}
  .hero-grid{grid-template-columns:1fr !important;gap:28px}
  .gallery{position:static !important}
  .gallery .frame{aspect-ratio:4/3.4}
  .thumbs{grid-template-columns:repeat(8,1fr);gap:6px}
  .thumb{border-radius:8px}
  .thumb img{max-width:76%;max-height:76%}

  .at-glance-grid{grid-template-columns:1fr !important;gap:8px}
  .glance-item:nth-child(2){border-top:1px solid var(--line-soft) !important;padding-top:10px !important}

  .live-pills{gap:6px;margin-bottom:10px}
  .live-pill{font-size:11px;padding:5px 10px}

  .title{font-size:32px;letter-spacing:-0.03em;line-height:1.08}
  .title .sub{font-size:15px;margin-top:12px;line-height:1.5}
  .meta-row{flex-direction:column;align-items:flex-start;gap:10px;padding:14px 0;margin:18px 0 0}

  /* Price & buy panel single-column on phones */
  .price-card .price-card-grid{grid-template-columns:1fr !important;gap:20px}
  .price-main .dol{font-size:58px}
  .price-main .cur,.price-main .cts{font-size:22px}

  .bullets{grid-template-columns:1fr !important;gap:10px}
  .trust-strip{grid-template-columns:1fr !important}
  .trust-strip > div + div{border-left:0 !important;border-top:1px solid var(--line-soft)}
  .trust-strip .tt,.trust-strip .ss{white-space:normal}
  .sec-ctas{flex-direction:column}
  .sec-ctas .link-btn{width:100%;justify-content:center}

  .warranty{flex-wrap:wrap}
  .warranty .txt .tt{font-size:16px}

  .notes{padding:22px 22px !important}

  /* Wrenchy panel stacks */
  .wrenchy-band{grid-template-columns:1fr !important;text-align:left;padding:28px 22px !important;gap:16px !important}
  .wrenchy-band .ask-btn{justify-self:start}
  .wrenchy-band h3{font-size:26px;white-space:normal}

  /* Tabs: horizontally scrollable if they overflow */
  .tabs{top:0;max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-radius:14px;padding:4px;gap:2px}
  .tabs::-webkit-scrollbar{display:none}
  .tab{padding:9px 14px;font-size:13px;white-space:nowrap;flex:0 0 auto}
  .tabs::before{top:4px;bottom:4px}
  .tabs::after{top:5px}

  .tab-panel{padding:32px 0 12px}
  .fitment-head{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:22px}
  .fitment-head h2{font-size:28px;line-height:1.1}
  .fitment-head .filter-btn{align-self:flex-start}

  .fit-filter{flex-wrap:wrap;padding:4px 12px;height:auto;gap:8px}
  .fit-filter input{font-size:14px;min-width:0;flex-basis:calc(100% - 60px)}
  .fit-filter .fit-count{flex-basis:100%;padding-bottom:8px}

  .fitment-maker{grid-template-columns:1fr !important}
  .maker-label{padding:14px 20px !important;flex-direction:row;justify-content:space-between;align-items:center}
  .maker-label::after{display:none !important}
  .fit-row{grid-template-columns:1fr auto auto !important;gap:8px;padding:14px 18px}
  .fit-row .year-range{flex-direction:column;gap:4px;align-items:flex-end;font-size:12px}
  .fit-row .year-range .bar{display:none}
  .fit-row .model b{font-size:16px}

  .fit-detail{padding:8px 12px 12px}
  .fit-detail-head{grid-template-columns:64px 1fr !important;font-size:9.5px;padding:6px 10px}
  .fit-detail-head span:nth-child(n+3){display:none}
  .fit-config{grid-template-columns:64px 1fr !important;padding:10px;font-size:12.5px}
  .fit-config .eng,.fit-config .attrs{display:none}

  .specs-grid{grid-template-columns:1fr !important}
  .spec-row{grid-template-columns:1fr !important;padding:12px 18px;gap:2px}
  .spec-row:nth-child(odd){border-right:0 !important}
  .spec-row .k{font-size:11px}

  .ic-grid{grid-template-columns:1fr !important}
  .policies{grid-template-columns:1fr !important;gap:12px}
  .policy-wide{grid-column:auto !important}
  .policy-card{padding:22px 24px}
  .policy-list{font-size:13.5px}

  .expert-card{padding:28px 24px}
  .expert-card-title{font-size:22px}
  .expert-card-sub{font-size:14.5px}

  .why{padding:56px 0 !important}
  .why .inner{padding:0 24px !important}
  .why h2{font-size:32px !important;line-height:1.08}
  .why .sub{font-size:15px}
  .why-cards{grid-template-columns:1fr !important;gap:10px}
  .why-strip{flex-direction:column;align-items:flex-start;gap:12px;padding:16px 20px !important}

  .reviews{padding-top:48px !important;padding-bottom:48px !important}
  .reviews-head{flex-direction:column;align-items:flex-start !important;gap:10px !important}
  .reviews h2{font-size:28px}
  .score-pill{padding:8px 14px;gap:8px}
  .score-pill .count{font-size:12.5px}
  .reviews-embed{padding:10px 10px}

  .racing{padding-top:48px;padding-bottom:48px}
  .racing h2{font-size:28px}
  .video-grid{grid-template-columns:1fr !important;gap:10px}
  .video-card{aspect-ratio:16/9}

  footer{padding:28px 0 18px !important}
  footer .foot-grid{grid-template-columns:1fr !important;gap:20px !important;margin-bottom:16px}
  .foot-brand{text-align:left}
  .foot-social{justify-content:flex-start}
  .foot-links{text-align:left}
  .foot-trophy{align-items:flex-start !important;text-align:left !important;margin-top:0}
  .trophy-badge{margin-bottom:4px}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:6px}

  /* Sticky mini buy-bar fits phones */
  .mini-bar .wrap{padding:8px 14px;gap:10px}
  .mini-bar .mb-img{width:36px;height:36px;border-radius:8px}
  .mini-bar .mb-price{font-size:17px;padding:0 10px;height:36px;border:0}
  .mini-bar .mb-btns{gap:6px}
  .mini-bar .mb-btn{height:36px;padding:0 12px;font-size:12px}

  /* Cart flash toast */
  .cart-flash{top:auto;bottom:88px;right:12px;left:12px;padding:12px 16px}
  .cart-flash .msg{font-size:12.5px}
}

/* ───────── PHONE (480px and below) ───────── */
@media (max-width:480px){
  .wrap{padding:0 16px}
  .masthead .wrap{padding:10px 14px}
  .masthead .wordmark .logo-img{height:24px !important}
  .masthead .wordmark{max-width:55% !important}

  .title{font-size:28px}
  .title .sub{font-size:14px}

  .price-main .dol{font-size:48px}
  .price-main .cur,.price-main .cts{font-size:18px}
  .save-pill{font-size:10.5px;padding:5px 10px}

  .thumbs{grid-template-columns:repeat(4,1fr)}
  .thumb:nth-child(n+5){display:none}         /* only show 4 thumbs on tiny screens */

  .fit-row{padding:12px 14px}
  .maker-label{padding:12px 14px !important}
  .maker-label h3{font-size:18px}

  .wrenchy-robot{height:96px}
  .wrenchy-band{padding:22px 18px !important}
  .wrenchy-band h3{font-size:22px;white-space:normal}

  .tab{padding:8px 12px;font-size:12.5px}

  .expert-card{padding:22px 18px}
  .expert-card-title{font-size:19px}

  .why h2{font-size:26px !important}
  .why-card{padding:22px 20px}
  .why-card .num{font-size:42px}

  /* Mini-bar: ultra-compact */
  .mini-bar .mb-img{display:none}
  .mini-bar .mb-price{font-size:15px;padding:0 6px}
  .mini-bar .mb-btn{font-size:11.5px;padding:0 10px}

  /* YMM modal: full-bleed step cards */
  .ymm-step{padding:12px}
  .ymm-num{width:28px;height:28px;font-size:12px}
  .ymm-field label{font-size:10px}
  .ymm-select{font-size:14px}

  /* Reviews embed wrapper */
  .reviews-embed{padding:6px 8px;border-radius:14px}
}

/* ───────── EXTRA-SMALL (360px and below) ───────── */
@media (max-width:360px){
  .search .browse-inline{padding:0 10px}
  .cart-btn{padding:8px 10px}
  .cart-btn span:not(.count){display:none}   /* just the icon + count */
  .price-main .dol{font-size:42px}
  .title{font-size:24px}
}


/* ════════ READABILITY BUMPS ════════
   Subtle size increases on commonly-undersized UI text. The masthead/utility
   bumps were reverted to match mockup-home.html pixel-for-pixel (buttons were
   rendering 1px wider than the mockup). */
/* .utility{font-size:14px} */
/* .utility a{font-size:14px} */
/* .crumbs .wrap{font-size:14px} */
.mmp-breadcrumb{font-size:14px}
/* .search .browse{font-size:14px} */
/* .search button.submit{font-size:14px} */
.foot-brand .meta{font-size:13px;line-height:1.75}
.foot-brand .tag{font-size:17px}
.foot-links a{font-size:14.5px;line-height:1.6}
.foot-social a{width:32px;height:32px}
.brand-copy{font-size:13px}
/* .cart-btn{font-size:14.5px} */
.cart-btn .count{font-size:12px;width:22px;height:22px}
/* Form labels, section kickers, price-per-month → bump micro-labels 11→12 / 12→13 */
.price-per-month{font-size:14px}
.pay-label{font-size:12px}
.trophy-sub,.trophy-made{font-size:14px}
/* Cart specifics */
.cart-item .title{font-size:16px}
.cart-item .sku{font-size:12.5px}
.cart-item .condition{font-size:11.5px}
.cart-item .qty-box input{font-size:15px}
.cart-item .unit-price{font-size:12.5px}
.cart-item .remove-btn{font-size:13px}
.summary-panel .sum-row{font-size:15.5px}
.summary-panel .sum-row.total{font-size:20px}
/* Shop-by-make + Acura MDX + MMP */
.make-tile .make-name{font-size:17.5px}
.make-tile .make-count{font-size:12.5px}
.part-card .part-name{font-size:14.5px}
.part-card .part-arrow{font-size:14px}
.pcard .pc-name{font-size:14.5px}
.pcard .pc-meta{font-size:12.5px}
.pcard .pc-price .num{font-size:26px}
.pcard .pc-price .sign{font-size:15px}
.pcard .pc-price .cents{font-size:13px}
.pcard .brand-pill,.pcard .side-pill{font-size:11.5px}
.pcard .pc-cta{font-size:13.5px}
.alpha-btn{font-size:14px;min-width:32px;height:32px}
.year-btn,.side-btn{font-size:13.5px;padding:8px 15px}
.mfr-label{font-size:13px}
.rb-left{font-size:15px}
.rb-left strong{font-size:18px}
.rb-sort{font-size:14px}
.rb-sort select{font-size:14.5px}
.v-btn{width:32px;height:30px}
/* Testimonial cards */
.tcard .ttext{font-size:15px;line-height:1.7}
.tcard .tname{font-size:17.5px}
.tcard .tstars{font-size:15px}
/* Team cards */
.tm h4{font-size:17px}
.tm .role{font-size:13.5px}
/* About/contact/shipping/privacy glass panels already use .glass-panel p (15.5px) — fine */
.glass-panel h3{font-size:21px}
/* Reviews strip on cart */
.reviews-head .rh-txt{font-size:15px}
.reviews-head .rh-score{font-size:30px}
.reviews-head .rh-stars{font-size:20px;letter-spacing:3px}
/* Notice blocks */
.notice p{font-size:15.5px !important}

/* ───────── MOBILE OVERFLOW GUARDS (v6) ───────── */
.hero-grid > *,
.product-gallery,
.product-gallery-container,
.product-info,
.product-info-panel{min-width:0 !important;max-width:100% !important;box-sizing:border-box !important}
.product-gallery img,
.product-gallery-container img,
.main-image img,
.gallery .frame img{max-width:100% !important;height:auto !important}
.product-title,
.product-info h1,
.hero h1,
.hl-title,
.ps-title{word-break:break-word;overflow-wrap:anywhere;max-width:100%}
.glass-panel,
.expert-card,
.wrenchy-band,
.price-card,
.summary,
.notes,
.notice-card,
.looking-for{min-width:0;max-width:100%;box-sizing:border-box;overflow-wrap:anywhere}
@media (max-width:640px){
  .hero-grid,.why-cards,.review-grid,.video-grid,.specs-grid,.ic-grid,.policies,.foot-grid,
  .price-card-grid,.at-glance-grid{grid-template-columns:1fr !important}
  .product-gallery,.product-info,.glass-panel,.expert-card,.wrenchy-band{width:100% !important}
  .product-title,.hl-title,.ps-title,.hero h1,h1{font-size:clamp(22px,6vw,30px) !important;line-height:1.15 !important}
  html,body{overflow-x:hidden !important;max-width:100vw !important}
}

/* Affirm "as low as" badge can overflow on narrow viewports */
.affirm_badge,.affirm-as-low-as{max-width:100% !important;white-space:normal !important;word-break:break-word}
@media (max-width:640px){
  .affirm_badge,.affirm-as-low-as{position:static !important;display:block !important;margin-top:8px !important}
}

@media (max-width:640px){
  .price-section{flex-wrap:wrap !important;justify-content:flex-start !important;gap:8px !important}
  .price-section > *{flex:0 1 auto !important;max-width:100% !important}
}

/* Garage article: top banner wraps so Browse button doesn't clip */
@media (max-width:640px){
  .kb-garage-banner{flex-wrap:wrap !important;justify-content:center !important;text-align:center}
  .kb-garage-banner-text{text-align:center;width:100%}
  .kb-garage-banner-arrow{flex:1 0 auto !important;justify-content:center !important}
  /* Article body tables get horizontal scroll instead of overflowing the page */
  .article-body table,.kb-article table,article table{display:block;overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
  /* Difficulty/time stat tiles wrap */
  .stats-row,.article-stats,.kb-stats{flex-wrap:wrap !important}
  .stats-row > *,.article-stats > *,.kb-stats > *{min-width:0 !important;max-width:100% !important}
}

/* Mobile footer: center-align + push copyright to the very bottom */
.brand-copy-mobile{display:none}
@media (max-width:640px){
  footer .foot-grid{display:flex !important;flex-direction:column !important;gap:28px !important;text-align:center !important}
  footer .foot-brand,footer .foot-links,footer .foot-col,footer .foot-trophy{text-align:center !important;align-items:center !important}
  footer .foot-brand{display:flex !important;flex-direction:column !important;align-items:center !important}
  footer .foot-links{list-style:none !important;padding:0 !important;margin:0 !important;display:flex !important;flex-direction:column !important;align-items:center !important;gap:10px !important}
  footer .foot-trophy{display:flex !important;flex-direction:column !important;align-items:center !important}
  footer .foot-social{justify-content:center !important}
  .brand-copy-desktop{display:none !important}
  .brand-copy-mobile{display:block !important;text-align:center !important;margin:24px 0 0 !important;padding-top:20px !important;border-top:1px solid rgba(255,255,255,.08) !important;font-size:12px !important;color:rgba(255,255,255,.6) !important}
}