/* MotoMagic — Application Styles v4 */

:root{
  --black:#050505; --bg:#090909; --red:#E30613; --accent:#FF2020;
  --white:#FFFFFF; --gray:#A0A0A0; --gray-dim:#6b6b6b;
  --card:#0f0f10; --card2:#131315; --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14);
  --glass:rgba(9,9,9,.68); --r-lg:20px; --r-md:14px; --r-sm:10px;
  --shadow:0 24px 60px -24px rgba(0,0,0,.9);
  --font-d:'Space Grotesk',sans-serif; --font-b:'Inter',sans-serif; --font-m:'JetBrains Mono',monospace;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--white);font-family:var(--font-b);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--red);color:#fff}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
img,svg{display:block}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--black)}
::-webkit-scrollbar-thumb{background:#222;border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:var(--red)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ---------- LOGO ---------- */
.logo{font-family:var(--font-d);font-weight:700;font-size:22px;letter-spacing:-.5px;display:inline-flex;align-items:center;white-space:nowrap;line-height:1}
.logo b{color:var(--white);font-weight:700}
.logo span{color:var(--red);font-weight:700}
.logo.xl{font-size:44px}

/* ---------- SPLASH ---------- */
#splash{position:fixed;inset:0;background:var(--black);z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;transition:opacity .6s var(--ease),visibility .6s}
#splash.done{opacity:0;visibility:hidden}
#splash .logo{font-size:38px;animation:splashIn 1s var(--ease) both}
#splash .redline{width:180px;height:2px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden}
#splash .redline i{display:block;height:100%;width:40%;background:linear-gradient(90deg,transparent,var(--red),var(--accent));animation:sweep 1.1s var(--ease) infinite}
@keyframes sweep{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
@keyframes splashIn{from{opacity:0;transform:translateY(14px) scale(.97);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}

/* ---------- NAV ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:200;transition:background .4s,border-color .4s,backdrop-filter .4s;border-bottom:1px solid transparent}
nav.scrolled,nav.solid{background:var(--glass);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);border-bottom-color:var(--line)}
.nav-in{max-width:1440px;margin-left:max(0px,calc((100vw - 1440px) / 2 - 75px));margin-right:auto;padding:0 32px;height:68px;display:flex;align-items:center;gap:26px}
.nav-links{display:flex;gap:4px;align-items:center}
.nav-links a{font-size:13.5px;font-weight:500;color:var(--gray);padding:8px 12px;border-radius:8px;transition:color .25s,background .25s;position:relative}
.nav-links a:hover{color:var(--white)}
.nav-links a.active{color:var(--white)}
.nav-links a.active::after{content:'';position:absolute;left:12px;right:12px;bottom:2px;height:2px;background:var(--red);border-radius:2px}
.nav-search{flex:0 0 clamp(240px,22vw,340px);width:clamp(240px,22vw,340px);flex-shrink:0;position:relative;transition:flex-basis .25s cubic-bezier(.22,1,.36,1),width .25s cubic-bezier(.22,1,.36,1)}
.nav-search:focus-within{flex-basis:clamp(300px,26vw,380px);width:clamp(300px,26vw,380px)}
.nav-search input{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:99px;height:41px;padding:0 42px 0 40px;color:var(--white);font-size:13.5px;font-family:inherit;transition:border-color .25s,background .25s}
.nav-search input:focus{outline:none;border-color:rgba(227,6,19,.55);background:rgba(255,255,255,.08)}
.nav-search svg.nsr-search-ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);opacity:.5;pointer-events:none}
#nav-search-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:28px;height:28px;border:none;border-radius:50%;
  background:transparent;color:var(--gray,#a0a0a0);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,color .2s}
#nav-search-clear:hover{background:rgba(255,255,255,.08);color:var(--white)}

/* ── Global search results dropdown (scoped to .nav-search only) ─────────── */
#nav-search-results{position:absolute;top:calc(100% + 10px);left:0;right:auto;width:min(420px,calc(100vw - 64px));
  max-height:min(70vh,520px);overflow-y:auto;background:var(--card,#141416);
  border:1px solid var(--line2,rgba(255,255,255,.12));border-radius:16px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9);z-index:250;padding:8px}
.nsr-sec-h{font-family:var(--font-b,sans-serif);font-size:10.5px;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--gray,#8a8a8a);padding:10px 10px 6px}
.nsr-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;
  text-decoration:none;color:var(--white,#fff);transition:background .15s}
.nsr-row:hover,.nsr-row.on{background:rgba(227,6,19,.12)}
.nsr-thumb{flex:0 0 auto;width:38px;height:38px;border-radius:9px;overflow:hidden;
  background:rgba(255,255,255,.06);display:grid;place-items:center;color:var(--gray,#8a8a8a)}
.nsr-thumb img{width:100%;height:100%;object-fit:cover}
.nsr-thumb--moto,.nsr-thumb--brand{color:var(--red,#E30613)}
.nsr-t{min-width:0;display:flex;flex-direction:column;gap:2px}
.nsr-t b{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nsr-t i{font-style:normal;font-size:11.5px;color:var(--gray,#8a8a8a)}
.nsr-viewall{display:block;text-align:center;margin-top:4px;padding:11px;border-radius:10px;
  font-size:12.5px;font-weight:700;color:var(--red,#E30613);text-decoration:none;
  border-top:1px solid var(--line,rgba(255,255,255,.08))}
.nsr-viewall:hover{background:rgba(227,6,19,.08)}
.nsr-empty{padding:22px 14px;text-align:center}
.nsr-empty p{font-size:13px;color:var(--gray,#8a8a8a);margin:0 0 12px}
.nsr-shortcuts{display:flex;flex-direction:column;gap:6px}
.nsr-shortcuts a{font-size:12.5px;font-weight:600;color:var(--white,#fff);text-decoration:none;
  padding:8px 10px;border-radius:9px;background:rgba(255,255,255,.05)}
.nsr-shortcuts a:hover{background:rgba(227,6,19,.14);color:var(--red,#E30613)}
@media(max-width:768px){
  #nav-search-results{position:fixed;top:152px;left:12px;right:12px;min-width:0;max-height:calc(100vh - 168px)}
}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:6px}
.icon-btn{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--gray);transition:color .25s,background .25s;position:relative}
.icon-btn:hover{color:var(--white);background:rgba(255,255,255,.06)}
.icon-btn .dot{position:absolute;top:7px;right:7px;width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red)}
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:14px;border-radius:99px;padding:12px 24px;transition:transform .25s var(--ease),box-shadow .25s,background .25s,border-color .25s;letter-spacing:.1px}
.btn:active{transform:scale(.97)}
.btn-red{background:var(--red);color:#fff;box-shadow:0 8px 28px -8px rgba(227,6,19,.55)}
.btn-red:hover{background:var(--accent);transform:translateY(-1px);box-shadow:0 14px 34px -8px rgba(255,32,32,.6)}
.btn-ghost{background:rgba(255,255,255,.07);border:1px solid var(--line2);color:var(--white);backdrop-filter:blur(8px)}
.btn-ghost:hover{background:rgba(255,255,255,.12);transform:translateY(-1px)}
.btn-text{color:var(--white);padding:12px 18px}
.btn-text:hover{color:var(--accent)}
.btn-sm{padding:9px 18px;font-size:13px}
.nav-cta{padding:10px 20px;font-size:13.5px}
.login-link{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;padding:8px 12px;border-radius:10px;color:var(--white)}
.login-link:hover{background:rgba(255,255,255,.06)}
#hamburger{display:none}

/* ---------- PAGE SYSTEM ---------- */
.page{display:none;min-height:100vh;animation:pageIn .55s var(--ease)}
.page.on{display:block}
@keyframes pageIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.wrap{max-width:1440px;margin:0 auto;padding:0 32px}
.wrap-n{max-width:1180px;margin:0 auto;padding:0 32px}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;background:var(--black)}
.hero-bg{position:absolute;inset:0;overflow:hidden}
.smoke{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;animation:drift 22s ease-in-out infinite alternate}
.smoke.s1{width:800px;height:520px;background:radial-gradient(circle,rgba(120,120,130,.16),transparent 65%);top:-10%;right:-8%}
.smoke.s2{width:700px;height:500px;background:radial-gradient(circle,rgba(90,90,100,.13),transparent 65%);bottom:-14%;left:-6%;animation-delay:-8s}
.smoke.s3{width:520px;height:420px;background:radial-gradient(circle,rgba(227,6,19,.13),transparent 62%);bottom:6%;left:16%;animation-delay:-15s}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(60px,-40px) scale(1.12)}}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:72px 72px;mask-image:radial-gradient(ellipse 75% 60% at 60% 45%,#000 20%,transparent 75%)}
.hero-glow{position:absolute;width:1200px;height:360px;left:50%;bottom:-140px;transform:translateX(-30%);background:radial-gradient(ellipse,rgba(227,6,19,.22),transparent 65%);filter:blur(50px)}
.hero-bike{position:absolute;right:-4%;bottom:-2%;width:min(62vw,980px);opacity:.9;pointer-events:none;animation:bikeIn 1.6s .3s var(--ease) both}
@keyframes bikeIn{from{opacity:0;transform:translateX(70px)}to{opacity:.9;transform:none}}
.hero-vignette{position:absolute;inset:0;background:radial-gradient(ellipse 120% 90% at 30% 50%,transparent 30%,rgba(5,5,5,.85) 100%)}
.hero-content{position:relative;z-index:5;padding:150px 0 110px;max-width:640px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.06);border:1px solid var(--line);backdrop-filter:blur(12px);border-radius:99px;padding:8px 16px;font-size:12.5px;color:#d8d8d8;font-weight:500;animation:rise .8s .2s var(--ease) both}
.eyebrow svg{color:var(--red)}
.hero h1{font-family:var(--font-d);font-size:clamp(52px,7.2vw,96px);line-height:.98;letter-spacing:-3px;font-weight:700;margin:26px 0 24px;animation:rise .8s .35s var(--ease) both}
.hero h1 .dim{color:var(--gray);}
.hero h1 .rd{color:var(--red)}
.hero p.sub{font-size:17px;color:#c9c9c9;max-width:480px;animation:rise .8s .5s var(--ease) both}
.hero-btns{display:flex;gap:14px;margin-top:38px;flex-wrap:wrap;animation:rise .8s .62s var(--ease) both}
.hero-stats{display:flex;gap:52px;margin-top:56px;animation:rise .8s .75s var(--ease) both}
.hstat b{font-family:var(--font-d);font-size:28px;font-weight:700;letter-spacing:-1px;display:block}
.hstat b em{color:var(--red);font-style:normal}
.hstat span{font-size:12.5px;color:var(--gray)}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.scroll-hint{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:5;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--gray-dim);font-size:11px;letter-spacing:2px;text-transform:uppercase}
.scroll-hint i{width:1px;height:36px;background:linear-gradient(var(--red),transparent);display:block;animation:pulseline 1.8s ease infinite}
@keyframes pulseline{0%,100%{opacity:.3}50%{opacity:1}}

/* ---------- TRUST BAR ---------- */
.trustbar{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.015)}
.trustbar .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding-top:22px;padding-bottom:22px}
.trust{display:flex;align-items:center;gap:14px;color:#d5d5d5;font-size:13.5px;font-weight:500}
.trust .ic{width:42px;height:42px;border-radius:12px;background:rgba(227,6,19,.09);border:1px solid rgba(227,6,19,.22);display:flex;align-items:center;justify-content:center;color:var(--red);flex-shrink:0}

/* ---------- SECTIONS ---------- */
section{padding:96px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:44px;gap:20px}
.sec-head h2{font-family:var(--font-d);font-size:clamp(30px,3.4vw,42px);letter-spacing:-1.5px;font-weight:700;line-height:1.05}
.sec-head .kicker{font-family:var(--font-m);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--red);display:block;margin-bottom:12px}
.sec-head p{color:var(--gray);margin-top:10px;font-size:14.5px}
.viewall{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--gray);transition:color .25s,gap .25s;white-space:nowrap;padding-bottom:4px}
.viewall:hover{color:var(--white);gap:12px}
.viewall svg{transition:transform .25s}
.viewall:hover svg{transform:translateX(2px)}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
}

/* ---------- CATEGORY CARDS ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.cat{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 22px;transition:transform .35s var(--ease),border-color .35s,background .35s;position:relative;overflow:hidden;cursor:pointer}
.cat::before{content:'';position:absolute;inset:0;background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),rgba(227,6,19,.10),transparent 55%);opacity:0;transition:opacity .4s}
.cat:hover{transform:translateY(-5px);border-color:rgba(227,6,19,.4);background:var(--card2)}
.cat:hover::before{opacity:1}
.cat .ic{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,var(--red),#8f040c);display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:38px;box-shadow:0 10px 24px -8px rgba(227,6,19,.5);transition:transform .35s var(--ease)}
.cat:hover .ic{transform:scale(1.08) rotate(-4deg)}
.cat b{display:block;font-size:15px;font-weight:600;margin-bottom:3px;position:relative}
.cat span{font-size:12.5px;color:var(--gray);font-family:var(--font-m)}
.cat .arr{position:absolute;top:22px;right:20px;color:var(--gray-dim);opacity:0;transform:translate(-6px,6px);transition:.35s var(--ease)}
.cat:hover .arr{opacity:1;transform:none;color:var(--red)}

/* ---------- PRODUCT CARDS ---------- */
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:transform .4s var(--ease),border-color .4s,box-shadow .4s;cursor:pointer;position:relative}
.pcard:hover{transform:translateY(-6px);border-color:var(--line2);box-shadow:var(--shadow)}
.pmedia{aspect-ratio:1/.92;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.pmedia svg.art{width:62%;height:62%;transition:transform .5s var(--ease);filter:drop-shadow(0 24px 30px rgba(0,0,0,.6))}
.pcard:hover .pmedia svg.art{transform:scale(1.06) translateY(-4px)}
.badge{position:absolute;top:14px;left:14px;z-index:2;font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;padding:5px 11px;border-radius:99px;background:var(--red);color:#fff}
.badge.dark{background:rgba(255,255,255,.1);backdrop-filter:blur(8px);border:1px solid var(--line2)}
.wish{position:absolute;top:12px;right:12px;z-index:2;width:36px;height:36px;border-radius:50%;background:rgba(9,9,9,.55);backdrop-filter:blur(10px);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:#ddd;transition:.3s;opacity:0;transform:translateY(-4px)}
.pcard:hover .wish,.mcard:hover .wish{opacity:1;transform:none}
.wish:hover,.wish.on{color:var(--accent);border-color:rgba(255,32,32,.5)}
.pbody{padding:18px 20px 20px;border-top:1px solid var(--line)}

/* ── Product card shipping row ─────────────────────────────────────────── */
.product-shipping-info{min-height:58px;margin-top:14px;padding-top:12px;display:flex;align-items:center;gap:10px;border-top:1px solid rgba(255,255,255,.07)}
.product-shipping-icon{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border-radius:50%;background:rgba(255,20,40,.10);border:1px solid rgba(255,20,40,.22);color:rgba(255,255,255,.7);flex-shrink:0}
.product-shipping-text{flex:1;min-width:0}
.product-shipping-title{font-size:13px;font-weight:700;color:#f0f0f0;display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.product-shipping-subtitle{margin-top:2px;font-size:11px;color:rgba(255,255,255,.48);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.product-shipping-free .product-shipping-title{color:#35d878}
.product-shipping-free .product-shipping-icon{background:rgba(53,216,120,.1);border-color:rgba(53,216,120,.24);color:#35d878}
.product-shipping-free-badge{font-size:9.5px;font-weight:800;letter-spacing:.8px;padding:2px 6px;border-radius:4px;background:rgba(53,216,120,.15);border:1px solid rgba(53,216,120,.3);color:#35d878;flex-shrink:0}
.pbody .pcat{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gray-dim);font-family:var(--font-m)}
.pbody b{display:block;font-size:15px;font-weight:600;margin:7px 0 12px}
.prow{display:flex;align-items:center;justify-content:space-between}
.price{font-family:var(--font-d);font-size:19px;font-weight:700;letter-spacing:-.5px}
.price s{color:var(--gray-dim);font-size:13px;font-weight:400;margin-left:8px}
.stars{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--gray)}
.stars svg{color:var(--red)}
.addcart{position:absolute;bottom:86px;left:20px;right:20px;transform:translateY(12px);opacity:0;transition:.35s var(--ease)}
.pcard:hover .addcart{opacity:1;transform:none}
.addcart button{width:100%;justify-content:center}

/* ---------- MOTORCYCLE CARDS ---------- */
.moto-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.mcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:transform .4s var(--ease),border-color .4s,box-shadow .4s;cursor:pointer;position:relative}
.mcard:hover{transform:translateY(-6px);border-color:var(--line2);box-shadow:var(--shadow)}
.mmedia{aspect-ratio:16/9.6;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.mmedia svg.art{width:78%;height:auto;transition:transform .5s var(--ease);filter:drop-shadow(0 26px 34px rgba(0,0,0,.65))}
.mcard:hover .mmedia svg.art{transform:scale(1.05)}
.vbadge{position:absolute;top:14px;left:14px;z-index:2;display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;padding:6px 12px;border-radius:99px;background:rgba(9,9,9,.6);backdrop-filter:blur(10px);border:1px solid var(--line2)}
.vbadge svg{color:var(--red)}
.mbody{padding:20px 22px}
.mtop{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.mbody b{font-family:var(--font-d);font-size:17px;font-weight:600;letter-spacing:-.3px}
.mprice{font-family:var(--font-d);font-size:19px;font-weight:700;color:var(--red);letter-spacing:-.5px;white-space:nowrap}
.mspecs{display:flex;gap:18px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);flex-wrap:wrap}
.mspec{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--gray)}
.mspec svg{opacity:.7}

/* ---------- BRANDS ---------- */
.brand-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:12px}
.brand{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);height:76px;display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-weight:600;font-size:15px;letter-spacing:.5px;color:var(--gray);transition:.35s var(--ease);cursor:pointer}
.brand:hover{color:var(--white);border-color:rgba(227,6,19,.45);transform:translateY(-3px);background:var(--card2)}

/* ---------- MARQUEE ---------- */
.marquee-wrap{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0;overflow:hidden;background:var(--black)}
.marquee{display:flex;gap:64px;width:max-content;animation:mq 34s linear infinite}
.marquee span{font-family:var(--font-d);font-size:15px;letter-spacing:4px;text-transform:uppercase;color:#3c3c3c;display:flex;align-items:center;gap:64px;white-space:nowrap}
.marquee i{width:6px;height:6px;background:var(--red);border-radius:50%;display:inline-block}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- TESTIMONIALS ---------- */
.tst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tst{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 28px;transition:.35s var(--ease);position:relative}
.tst:hover{transform:translateY(-4px);border-color:var(--line2)}
.tst .q{color:var(--red);font-family:var(--font-d);font-size:44px;line-height:0;height:22px;display:block}
.tst p{color:#d6d6d6;font-size:14.5px;margin:22px 0 26px;line-height:1.7}
.tst .who{display:flex;align-items:center;gap:13px}
.tst .av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#2a2a2e,#161618);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-weight:700;font-size:14px;color:var(--red)}
.tst .who b{display:block;font-size:14px}
.tst .who span{font-size:12px;color:var(--gray)}

/* ---------- CTA / NEWSLETTER ---------- */
.cta-panel{position:relative;border:1px solid rgba(227,6,19,.22);border-radius:28px;overflow:hidden;padding:84px 40px;text-align:center;
  background:radial-gradient(48% 96% at 50% 50%,rgba(9,9,10,.62) 0%,rgba(9,9,10,.22) 55%,rgba(9,9,10,0) 78%),url('/assets/banners/community-newsletter.jpg');
  background-size:cover;background-position:center center;background-repeat:no-repeat}
.cta-panel::before{content:'';position:absolute;width:700px;height:340px;right:-160px;top:-80px;background:radial-gradient(ellipse,rgba(227,6,19,.16),transparent 65%);filter:blur(30px)}
.cta-panel::after{content:'';position:absolute;width:500px;height:300px;left:-120px;bottom:-120px;background:radial-gradient(ellipse,rgba(227,6,19,.08),transparent 65%);filter:blur(30px)}
.cta-panel h2{font-family:var(--font-d);font-size:clamp(30px,3.6vw,44px);letter-spacing:-1.5px;position:relative;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.7)}
.cta-panel p{color:#d6d6d6;margin:14px auto 34px;max-width:440px;position:relative;text-shadow:0 1px 10px rgba(0,0,0,.75)}
.nl-form{display:flex;gap:10px;max-width:460px;margin:0 auto;position:relative}
.nl-form input{flex:1;background:rgba(255,255,255,.05);border:1px solid var(--line2);border-radius:99px;height:50px;padding:0 22px;color:#fff;font-size:14px;font-family:inherit}
.nl-form input:focus{outline:none;border-color:rgba(227,6,19,.6)}
.nl-note{font-size:12px;color:var(--gray-dim);margin-top:16px;position:relative;text-shadow:0 1px 8px rgba(0,0,0,.7)}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--line);background:var(--black);padding:72px 0 0;margin-top:40px}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding-bottom:56px}
.f-brand p{color:var(--gray);font-size:13.5px;max-width:280px;margin:18px 0 24px}
.socials{display:flex;gap:10px}
.socials a{width:38px;height:38px;border-radius:11px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--gray);transition:.3s}
.socials a:hover{color:#fff;border-color:rgba(227,6,19,.5);background:rgba(227,6,19,.1);transform:translateY(-2px)}
.f-col h4{font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:#e8e8e8;margin-bottom:20px;font-family:var(--font-m)}
.f-col a{display:block;color:var(--gray);font-size:13.5px;padding:6px 0;transition:color .25s,padding-left .25s}
.f-col a:hover{color:#fff;padding-left:5px}
.f-bottom{border-top:1px solid var(--line);padding:24px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;color:var(--gray-dim);font-size:12.5px}
.f-bottom .legal{display:flex;gap:22px}
.f-bottom .legal a:hover{color:#fff}

/* ---------- SUBPAGE HERO ---------- */
.page-head{padding:140px 0 46px;border-bottom:1px solid var(--line);position:relative;overflow:hidden;background:var(--black)}
.page-head::before{content:'';position:absolute;width:640px;height:300px;right:-100px;top:-60px;background:radial-gradient(ellipse,rgba(227,6,19,.12),transparent 65%);filter:blur(40px)}
.page-head .crumbs{font-size:12px;color:var(--gray-dim);margin-bottom:16px;font-family:var(--font-m);position:relative}
.page-head .crumbs a:hover{color:#fff}
.page-head h1{font-family:var(--font-d);font-size:clamp(34px,4.4vw,54px);letter-spacing:-2px;line-height:1.02;position:relative}
.page-head p{color:var(--gray);margin-top:12px;max-width:520px;position:relative}

/* ---------- MARKETPLACE LAYOUT ---------- */
.mkt{display:grid;grid-template-columns:270px 1fr;gap:32px;padding:44px 0 90px}
.filters{position:sticky;top:92px;align-self:start;display:flex;flex-direction:column;gap:10px}
.fgroup{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:18px 18px}
.fgroup h5{font-size:11.5px;letter-spacing:1.6px;text-transform:uppercase;font-family:var(--font-m);color:#ddd;margin-bottom:14px;display:flex;justify-content:space-between;align-items:center}
.fopt{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:13.5px;color:var(--gray);cursor:pointer;transition:color .2s}
.fopt:hover{color:#fff}
.fopt input{accent-color:var(--red);width:15px;height:15px}
.chiprow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
/* Mobile: chips become a single compact horizontal-scroll row (no tall wrap) */
@media (max-width:600px){
  #shop-chips.chiprow{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-bottom:16px;padding-bottom:2px}
  #shop-chips.chiprow::-webkit-scrollbar{display:none}
  #shop-chips.chiprow .chip{flex:0 0 auto;white-space:nowrap}
  #page-shop .toolrow{gap:10px;flex-wrap:nowrap;align-items:center}
  #page-shop .toolrow .count{font-size:13px;white-space:nowrap}
  #page-shop .toolrow .select{max-width:56%;font-size:12.5px}
}
.chip{font-size:13px;font-weight:500;padding:9px 18px;border-radius:99px;border:1px solid var(--line);color:var(--gray);transition:.25s;cursor:pointer;background:var(--card)}
.chip:hover{color:#fff;border-color:var(--line2)}
.chip.on{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 8px 22px -8px rgba(227,6,19,.5)}
.toolrow{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;gap:14px;flex-wrap:wrap}
.toolrow .count{font-size:13.5px;color:var(--gray)}
.toolrow .count b{color:#fff}
.select{background:var(--card);border:1px solid var(--line);color:#ddd;border-radius:10px;padding:9px 14px;font-size:13px;font-family:inherit}
.select:focus{outline:none;border-color:rgba(227,6,19,.5)}

/* ---------- DETAIL PAGES ---------- */
.detail{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;padding:44px 0 80px}
.gallery{position:sticky;top:92px;align-self:start}
.gmain{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);aspect-ratio:16/10.5;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;cursor:zoom-in}
.gmain svg.art{width:74%;height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.7));transition:transform .5s var(--ease)}
.gmain:hover svg.art{transform:scale(1.12)}
.gmain .ghint{position:absolute;bottom:14px;right:14px;font-size:11px;color:var(--gray-dim);background:rgba(9,9,9,.6);backdrop-filter:blur(8px);border:1px solid var(--line);padding:6px 12px;border-radius:99px;display:flex;gap:6px;align-items:center}
.gthumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:12px}
.gthumb{background:var(--card);border:1px solid var(--line);border-radius:12px;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.25s;overflow:hidden}
.gthumb:hover,.gthumb.on{border-color:var(--red)}
.gthumb svg{width:64%;height:auto;opacity:.85}
.gthumb.vid{position:relative;color:var(--gray)}
.dinfo h1{font-family:var(--font-d);font-size:clamp(28px,3vw,38px);letter-spacing:-1.5px;line-height:1.08}
.dinfo .dprice{font-family:var(--font-d);font-size:34px;font-weight:700;letter-spacing:-1px;margin:18px 0 4px}
.dinfo .dprice small{font-size:14px;color:var(--gray);font-weight:400;font-family:var(--font-b);letter-spacing:0}
.dmeta{display:flex;gap:10px;align-items:center;margin-top:8px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;padding:7px 14px;border-radius:99px;background:rgba(255,255,255,.05);border:1px solid var(--line)}
.pill svg{color:var(--red)}
.pill.red{background:rgba(227,6,19,.12);border-color:rgba(227,6,19,.35);color:#ffb4b8}
.spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:26px 0}
.spec{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.spec span{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--gray-dim);font-family:var(--font-m);display:block;margin-bottom:5px}
.spec b{font-size:14.5px;font-weight:600}
.dsection{border-top:1px solid var(--line);padding:24px 0}
.dsection h3{font-family:var(--font-d);font-size:17px;margin-bottom:12px;letter-spacing:-.3px}
.dsection p{color:var(--gray);font-size:14px}
.contact-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:18px}
.cbtn{display:flex;align-items:center;justify-content:center;gap:9px;height:48px;border-radius:14px;font-weight:600;font-size:13.5px;border:1px solid var(--line2);background:rgba(255,255,255,.05);transition:.3s}
.cbtn:hover{transform:translateY(-2px)}
.cbtn.wa{background:rgba(37,211,102,.12);border-color:rgba(37,211,102,.35);color:#7ce8a6}
.cbtn.ms{background:rgba(0,132,255,.12);border-color:rgba(0,132,255,.35);color:#7cbcff}
.seller-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;margin-top:24px}
.seller-card .srow{display:flex;align-items:center;gap:14px}
.seller-card .av{width:50px;height:50px;border-radius:14px;background:linear-gradient(135deg,var(--red),#7a040b);display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-weight:700;font-size:17px}
.seller-card b{display:flex;align-items:center;gap:7px;font-size:15px}
.seller-card b svg{color:var(--red)}
.seller-card .srow span{font-size:12.5px;color:var(--gray)}
.report{display:inline-flex;gap:7px;align-items:center;margin-top:22px;font-size:12.5px;color:var(--gray-dim);transition:.25s}
.report:hover{color:var(--accent)}

/* tabs */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:10px 0 22px;overflow-x:auto}
.tab{padding:12px 18px;font-size:13.5px;font-weight:600;color:var(--gray);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:.25s}
.tab:hover{color:#fff}
.tab.on{color:#fff;border-color:var(--red)}
.tabpanel{display:none;color:var(--gray);font-size:14px;line-height:1.75}
.tabpanel.on{display:block;animation:pageIn .4s var(--ease)}
.tabpanel table{width:100%;border-collapse:collapse}
.tabpanel td{padding:11px 4px;border-bottom:1px solid var(--line);font-size:13.5px}
.tabpanel td:first-child{color:var(--gray-dim);width:42%}
.tabpanel td:last-child{color:#e6e6e6}

/* qty + buy */
.buyrow{display:flex;gap:12px;margin:26px 0 6px}
.qty{display:flex;align-items:center;border:1px solid var(--line2);border-radius:99px;height:50px}
.qty button{width:44px;height:100%;font-size:18px;color:var(--gray)}
.qty button:hover{color:#fff}
.qty span{width:34px;text-align:center;font-weight:600}
.buyrow .btn-red{flex:1;justify-content:center;height:50px;font-size:15px}
.ship-note{display:flex;gap:22px;margin-top:18px;flex-wrap:wrap}
.ship-note span{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--gray)}
.ship-note svg{color:var(--red)}

/* ---------- PRICING ---------- */
.plans{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;padding:54px 0 30px;align-items:stretch}
.plan{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 24px;display:flex;flex-direction:column;transition:.35s var(--ease);position:relative}
.plan:hover{transform:translateY(-6px);border-color:var(--line2)}
.plan.hot{background:linear-gradient(180deg,#16090a,#0c0c0d);border-color:rgba(227,6,19,.5);box-shadow:0 30px 70px -30px rgba(227,6,19,.4)}
.plan .flag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--red);font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:5px 14px;border-radius:99px;white-space:nowrap}
.plan h3{font-family:var(--font-d);font-size:17px;letter-spacing:-.3px}
.plan .pprice{font-family:var(--font-d);font-size:36px;font-weight:700;letter-spacing:-1.5px;margin:16px 0 2px}
.plan .pprice small{font-size:13px;color:var(--gray);font-weight:400;letter-spacing:0;font-family:var(--font-b)}
.plan .pdesc{font-size:12.5px;color:var(--gray);min-height:38px;margin-bottom:18px}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:26px;flex:1}
.plan li{display:flex;gap:9px;font-size:13px;color:#d0d0d0;align-items:flex-start}
.plan li svg{color:var(--red);flex-shrink:0;margin-top:3px}
.plan .btn{justify-content:center;width:100%}
.billing-toggle{display:flex;justify-content:center;margin-top:34px}
.billing-toggle .seg{display:flex;background:var(--card);border:1px solid var(--line);border-radius:99px;padding:4px;gap:4px}
.seg button{padding:9px 22px;border-radius:99px;font-size:13px;font-weight:600;color:var(--gray);transition:.25s}
.seg button.on{background:var(--red);color:#fff}
.seg button .save{font-size:10.5px;color:#ffd2d5;margin-left:6px}

/* ---------- FAQ ---------- */
.faq{max-width:760px;margin:0 auto}
.faq-item{border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);margin-bottom:10px;overflow:hidden}
.faq-item summary{padding:18px 22px;cursor:pointer;font-weight:600;font-size:14.5px;display:flex;justify-content:space-between;align-items:center;list-style:none;transition:.25s}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--accent)}
.faq-item summary svg{transition:transform .3s;flex-shrink:0}
.faq-item[open] summary svg{transform:rotate(45deg);color:var(--red)}
.faq-item .fa{padding:0 22px 20px;color:var(--gray);font-size:13.5px;line-height:1.7}

/* ---------- SELL FORM ---------- */
.sell-wrap{max-width:820px;margin:0 auto;padding:44px 0 90px}
.steps{display:flex;gap:8px;margin-bottom:36px}
.step{flex:1;text-align:center;position:relative;padding-top:16px;font-size:12px;color:var(--gray-dim);font-weight:600}
.step::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:3px;background:rgba(255,255,255,.08)}
.step.on{color:#fff}
.step.on::before{background:var(--red);box-shadow:0 0 14px rgba(227,6,19,.6)}
.form-card{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:36px}
.form-card h3{font-family:var(--font-d);font-size:20px;margin-bottom:24px;letter-spacing:-.4px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:16px}
.field label{display:block;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--gray);margin-bottom:8px;font-family:var(--font-m)}
.field label em{color:var(--gray-dim);font-style:normal;text-transform:none;letter-spacing:0}
.field input,.field select,.field textarea{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;padding:13px 16px;color:#fff;font-size:14px;font-family:inherit;transition:border-color .25s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:rgba(227,6,19,.6)}
.field textarea{min-height:110px;resize:vertical}
.upload{border:1.5px dashed var(--line2);border-radius:16px;padding:38px;text-align:center;color:var(--gray);transition:.3s;cursor:pointer;margin-bottom:16px}
.upload:hover{border-color:rgba(227,6,19,.6);background:rgba(227,6,19,.04);color:#fff}
.upload svg{margin:0 auto 12px;color:var(--red)}
.form-nav{display:flex;justify-content:space-between;margin-top:28px}

/* ---------- DASHBOARD ---------- */
.dash{display:grid;grid-template-columns:236px 1fr;min-height:100vh;padding-top:68px}
.dnav{border-right:1px solid var(--line);background:var(--black);padding:26px 14px;position:sticky;top:68px;height:calc(100vh - 68px);display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.dnav .dlabel{font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:var(--gray-dim);padding:16px 12px 8px;font-family:var(--font-m)}
.dnav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;font-size:13.5px;font-weight:500;color:var(--gray);transition:.25s}
.dnav a:hover{color:#fff;background:rgba(255,255,255,.05)}
.dnav a.on{color:#fff;background:rgba(227,6,19,.13);border:1px solid rgba(227,6,19,.25)}
.dnav a.on svg{color:var(--red)}
.dmain{padding:34px 36px 70px;background:var(--bg)}
.dhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;gap:16px;flex-wrap:wrap}
.dhead h2{font-family:var(--font-d);font-size:26px;letter-spacing:-1px}
.dhead p{font-size:13px;color:var(--gray)}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:26px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:20px 22px;position:relative;overflow:hidden;transition:.3s}
.kpi:hover{border-color:var(--line2);transform:translateY(-2px)}
.kpi span{font-size:12px;color:var(--gray);display:flex;justify-content:space-between;align-items:center}
.kpi b{font-family:var(--font-d);font-size:27px;font-weight:700;letter-spacing:-1px;display:block;margin-top:8px}
.kpi .delta{font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:99px}
.delta.up{color:#6ee7a0;background:rgba(34,197,94,.12)}
.delta.dn{color:#ff9ba1;background:rgba(227,6,19,.14)}
.dgrid{display:grid;grid-template-columns:1.6fr 1fr;gap:14px;margin-bottom:26px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px}
.panel h4{font-size:14px;font-weight:600;margin-bottom:4px}
.panel .psub{font-size:12px;color:var(--gray);margin-bottom:18px}
.chart{width:100%;height:auto}
.dtable{width:100%;border-collapse:collapse}
.dtable th{font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--gray-dim);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);font-family:var(--font-m);font-weight:500}
.dtable td{padding:14px 12px;border-bottom:1px solid var(--line);font-size:13.5px}
.dtable tr:hover td{background:rgba(255,255,255,.02)}
.status{font-size:11px;font-weight:700;padding:4px 11px;border-radius:99px;letter-spacing:.4px}
.status.live{color:#6ee7a0;background:rgba(34,197,94,.12)}
.status.pend{color:#fbd38d;background:rgba(251,191,36,.1)}
.status.sold{color:#c8c8c8;background:rgba(255,255,255,.08)}
.status.boost{color:#ffb4b8;background:rgba(227,6,19,.15)}
.mini-bike{width:52px;height:34px;border-radius:8px;background:#161618;border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.mini-bike svg{width:80%}
.chan{display:flex;flex-direction:column;gap:14px}
.chan-row{display:flex;align-items:center;gap:12px;font-size:13px}
.chan-row span{width:110px;color:var(--gray)}
.chan-row .bar{flex:1;height:8px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden}
.chan-row .bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#8f040c,var(--red));width:0;transition:width 1.2s var(--ease)}
.chan-row b{width:44px;text-align:right;font-family:var(--font-m);font-size:12px}

/* ---------- LOGIN ---------- */
.auth{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.auth-visual{position:relative;background:var(--black);overflow:hidden;display:flex;align-items:flex-end;padding:60px}
.auth-visual .smoke{opacity:.4}
.auth-visual blockquote{position:relative;z-index:3;font-family:var(--font-d);font-size:clamp(24px,2.4vw,34px);letter-spacing:-1px;line-height:1.25;max-width:420px}
.auth-visual blockquote span{color:var(--gray)}
.auth-visual .aquote-who{position:relative;z-index:3;color:var(--gray);font-size:13px;margin-top:18px;font-family:var(--font-b)}
.auth-form{display:flex;align-items:center;justify-content:center;padding:110px 40px 60px}
.auth-box{width:100%;max-width:400px}
.auth-box h1{font-family:var(--font-d);font-size:30px;letter-spacing:-1px;margin:26px 0 6px}
.auth-box>p{color:var(--gray);font-size:14px;margin-bottom:30px}
.oauth{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:22px}
.oauth button{height:46px;border:1px solid var(--line2);border-radius:12px;background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;gap:9px;font-size:13.5px;font-weight:600;transition:.25s}
.oauth button:hover{background:rgba(255,255,255,.08);transform:translateY(-1px)}
.divider{display:flex;align-items:center;gap:14px;color:var(--gray-dim);font-size:11.5px;margin:22px 0;letter-spacing:1px;text-transform:uppercase}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--line)}
.auth-foot{margin-top:24px;font-size:13.5px;color:var(--gray);text-align:center}
.auth-foot a{color:var(--accent);font-weight:600}
.forgot{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--gray);margin:4px 0 20px}
.forgot a:hover{color:#fff}

/* ---------- TOAST ---------- */
#toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,80px);background:rgba(15,15,16,.9);backdrop-filter:blur(16px);border:1px solid var(--line2);border-radius:99px;padding:13px 24px;font-size:13.5px;font-weight:500;z-index:900;display:flex;gap:10px;align-items:center;opacity:0;transition:.45s var(--ease);pointer-events:none;box-shadow:var(--shadow)}
#toast.show{opacity:1;transform:translate(-50%,0)}
#toast svg{color:var(--red)}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1200px){
  .cat-grid{grid-template-columns:repeat(3,1fr)}
  .prod-grid{grid-template-columns:repeat(3,1fr)}
  .brand-grid{grid-template-columns:repeat(4,1fr)}
  .plans{grid-template-columns:repeat(3,1fr)}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .nav-search{flex-basis:200px;width:200px}
  .nav-search:focus-within{flex-basis:260px;width:260px}
}
/* Mobile header: logo + compact search + cart + hamburger. Language pills,
   wishlist, login and sell-CTA move to the mobile menu to prevent clutter. */
@media(max-width:768px){
  #lang-host{display:none}
  .nav-right .login-link,.nav-right #wish-open,.nav-right .nav-sell-cta{display:none}
  #a-nav .nav-cta{display:none}
  .nav-search{display:block;flex:1 1 auto;max-width:none;min-width:0}
  .nav-search input{height:38px;font-size:13px}
  .nav-in{gap:10px}
  .nav-right{gap:4px}
  /* Tap/focus → same input becomes a fixed full-width overlay row directly
     below the navbar, instead of staying cramped inline in the nav.
     !important here is deliberate: this state must reliably win over the
     compact .nav-search rule immediately above (same specificity, same
     media query) with zero ambiguity. */
  .nav-search--open{position:fixed !important;top:100px !important;left:12px !important;right:12px !important;z-index:260 !important;flex:none !important;width:auto !important;max-width:none !important}
  .nav-search--open input{height:44px !important;font-size:14.5px;padding-left:42px}
  .nav-search--open svg.nsr-search-ic{left:16px}
  .nav-search--open #nav-search-clear{right:8px}
}
@media(max-width:980px){
  .moto-grid{grid-template-columns:repeat(2,1fr)}
  .prod-grid{grid-template-columns:repeat(2,1fr)}
  .tst-grid{grid-template-columns:1fr}
  .trustbar .wrap{grid-template-columns:repeat(2,1fr)}
  .detail{grid-template-columns:1fr}
  .gallery{position:static}
  .mkt{grid-template-columns:1fr}
  .filters{position:static;flex-direction:row;flex-wrap:wrap}
  .fgroup{flex:1;min-width:200px}
  .f-grid{grid-template-columns:1fr 1fr}
  .auth{grid-template-columns:1fr}
  .auth-visual{display:none}
  .dash{grid-template-columns:1fr}
  .dnav{position:static;height:auto;flex-direction:row;flex-wrap:wrap;border-right:none;border-bottom:1px solid var(--line)}
  .dnav .dlabel{display:none}
  .dgrid{grid-template-columns:1fr}
  .nav-links{display:none}
  #hamburger{display:flex}
  .hero-bike{opacity:.35;right:-30%}
}
@media(max-width:640px){
  .wrap,.wrap-n{padding:0 20px}
  .nav-in{padding:0 16px;gap:12px}
  .prod-grid,.moto-grid,.plans{grid-template-columns:1fr}
  .brand-grid{grid-template-columns:repeat(2,1fr)}
  .frow{grid-template-columns:1fr}
  /* Compact hero: shorter, no fake stats, no scroll indicator */
  .hero{min-height:auto;padding:96px 0 40px}
  .hero-content{padding:0 0 24px}
  .hero-stats{display:none}
  .scroll-hint{display:none}
  .hero-btns{margin-top:26px}
  .hero-btns .btn{width:100%;justify-content:center}
  .contact-row{grid-template-columns:1fr}
  .nl-form{flex-direction:column}
  .trustbar .wrap{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr}
  section{padding:64px 0}
  .buyrow{flex-direction:column}
  .qty{justify-content:center}
}
/* mobile menu */
#mobmenu{position:fixed;inset:0;background:rgba(5,5,5,.96);backdrop-filter:blur(20px);z-index:300;display:flex;flex-direction:column;padding:100px 32px 40px;gap:6px;transform:translateY(-100%);transition:transform .5s var(--ease);overflow-y:auto;-webkit-overflow-scrolling:touch}
#mobmenu.open{transform:none}
#mobmenu a{font-family:var(--font-d);font-size:28px;font-weight:600;letter-spacing:-1px;padding:12px 0;color:var(--gray);border-bottom:1px solid var(--line);transition:color .25s}
/* Mobile-menu-only language row — scoped so the desktop navbar switcher is untouched */
.mob-lang-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:0 0 16px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.mob-lang-label{font-family:var(--font-b);font-size:13px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--gray)}
#mobile-lang-host .lang-switcher{gap:4px}
#mobile-lang-host .lang-btn{min-height:44px;padding:8px 13px;font-size:13px}
#mobmenu a:hover{color:#fff}
#mobmenu .mm-cta{margin-top:auto;display:flex;flex-direction:column;gap:10px}
#mobmenu .mm-cta .btn{justify-content:center}
#mobclose{position:absolute;top:18px;right:18px}

.user-avatar-btn{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--red),#8f040c);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;cursor:pointer;transition:transform .2s}.user-avatar-btn:hover{transform:scale(1.06)}
.user-dropdown{position:absolute;top:calc(100% + 8px);right:0;background:var(--card2);border:1px solid var(--line2);border-radius:var(--r-md);padding:8px;min-width:200px;box-shadow:0 20px 48px rgba(0,0,0,.8);opacity:0;visibility:hidden;transform:translateY(-8px);transition:.25s var(--ease);z-index:300}.user-dropdown.open{opacity:1;visibility:visible;transform:none}
.ud-hdr{padding:12px 14px 10px;border-bottom:1px solid var(--line);margin-bottom:6px}.ud-hdr strong{display:block;font-size:14px;font-weight:600}.ud-hdr span{font-size:12px;color:var(--gray)}
.ud-it{display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:8px;font-size:13.5px;color:#d5d5d5;transition:background .2s,color .2s;cursor:pointer;width:100%;text-align:left}.ud-it:hover{background:rgba(255,255,255,.06);color:var(--white)}.ud-it svg{color:var(--gray-dim);flex-shrink:0}
.ud-div{height:1px;background:var(--line);margin:6px 0}.ud-it.danger{color:#ff6060}
.nbadge{margin-left:auto;background:var(--red);color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:99px}
.msg-layout{display:grid;grid-template-columns:290px 1fr;height:calc(100vh - 100px);margin-top:100px;border-top:1px solid var(--line)}
.inb-list{background:var(--card);border-right:1px solid var(--line);overflow-y:auto}
.inb-hd{padding:18px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--card);z-index:1}
.inb-hd h3{font-size:16px;font-weight:600;margin-bottom:10px}
.inb-sr{position:relative}.inb-sr input{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:8px;padding:9px 12px 9px 34px;color:var(--white);font-size:13px;font-family:inherit}.inb-sr svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--gray-dim)}
.inb-th{padding:14px 18px;border-bottom:1px solid var(--line);cursor:pointer;transition:.2s;position:relative}.inb-th:hover{background:rgba(255,255,255,.04)}.inb-th.act{background:rgba(227,6,19,.07);border-left:3px solid var(--red)}
.it-tp{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.it-tp b{font-size:14px;font-weight:600}.it-tp time{font-size:11.5px;color:var(--gray-dim);font-family:var(--font-m)}
.it-sb{font-size:12.5px;color:var(--gray-dim);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.it-pv{font-size:13px;color:var(--gray);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.it-dot{position:absolute;top:16px;right:18px;width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 6px var(--red)}
.cv-wrap{display:flex;flex-direction:column;height:100%}
.cv-hd{padding:16px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;background:var(--card);flex-shrink:0}
.cv-av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--red),#8f040c);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0}
.cv-info b{display:block;font-size:15px;font-weight:600}.cv-info span{font-size:12.5px;color:var(--gray)}
.cv-bd{flex:1;overflow-y:auto;padding:24px;display:flex;flex-direction:column;gap:16px}
.bbl{max-width:68%;display:flex;flex-direction:column;gap:4px}.bbl.mine{align-self:flex-end;align-items:flex-end}.bbl.theirs{align-self:flex-start;align-items:flex-start}
.bb{padding:12px 16px;border-radius:16px;font-size:14px;line-height:1.55}.mine .bb{background:var(--red);color:#fff;border-bottom-right-radius:4px}.theirs .bb{background:var(--card2);border:1px solid var(--line);border-bottom-left-radius:4px}
.bb-t{font-size:11px;color:var(--gray-dim);font-family:var(--font-m)}
.cv-ft{padding:14px 22px;border-top:1px solid var(--line);display:flex;gap:12px;flex-shrink:0;background:var(--card)}
.cv-ft textarea{flex:1;background:rgba(255,255,255,.06);border:1px solid var(--line2);border-radius:12px;padding:11px 15px;color:var(--white);font-family:inherit;font-size:14px;resize:none;height:42px;transition:border-color .2s}
.ntf-glbl{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gray-dim);margin:20px 0 10px;padding-bottom:8px;border-bottom:1px solid var(--line);font-family:var(--font-m)}
.ntf{display:flex;align-items:flex-start;gap:14px;padding:15px 18px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--card);margin-bottom:8px}
.ntf.unread{border-color:rgba(227,6,19,.2);background:rgba(227,6,19,.04)}
.ntf-ico{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:18px}
.ntf-bd b{display:block;font-size:14px;font-weight:600;margin-bottom:3px}.ntf-bd p{font-size:13.5px;color:var(--gray);line-height:1.5}
.ntf-tm{font-size:11.5px;color:var(--gray-dim);font-family:var(--font-m);white-space:nowrap;margin-left:auto;flex-shrink:0}
.adm-layout{display:grid;grid-template-columns:210px 1fr;min-height:calc(100vh - 68px);margin-top:68px}
.adm-nav{background:#050505;border-right:1px solid var(--line);padding:18px 10px;position:sticky;top:68px;height:calc(100vh - 68px);overflow-y:auto}
.an-lbl{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gray-dim);font-family:var(--font-m);padding:12px 10px 6px;display:block}
.an-btn{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;font-size:13px;color:var(--gray);transition:.2s;cursor:pointer;width:100%;text-align:left}.an-btn:hover,.an-btn.on{background:rgba(255,255,255,.06);color:var(--white)}
.adm-main{padding:32px;background:var(--bg)}.adm-sec{display:none}.adm-sec.on{display:block}
.adm-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.adm-top h2{font-family:var(--font-d);font-size:22px;font-weight:700;letter-spacing:-.5px}
.adm-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.dtbl{width:100%;border-collapse:collapse;background:var(--card);border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)}
.dtbl th{background:rgba(255,255,255,.04);padding:11px 16px;text-align:left;font-size:12px;font-weight:600;color:var(--gray);font-family:var(--font-m);border-bottom:1px solid var(--line)}
.dtbl td{padding:11px 16px;font-size:13.5px;border-bottom:1px solid var(--line)}.dtbl tr:last-child td{border-bottom:none}.dtbl tr:hover td{background:rgba(255,255,255,.02)}
.pill{display:inline-flex;align-items:center;font-size:11px;font-weight:700;padding:3px 9px;border-radius:99px}
.pill.ok{background:rgba(0,200,80,.12);color:#00c850}.pill.pend{background:rgba(255,180,0,.1);color:#ffb400}.pill.ban{background:rgba(255,60,60,.12);color:#ff3c3c}.pill.dlr{background:rgba(59,130,246,.12);color:#3b82f6}
.sbar{display:flex;gap:10px;margin-bottom:16px}.sbar input{flex:1;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:8px;padding:9px 14px;color:var(--white);font-family:inherit;font-size:13.5px}
.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:80px 20px;background:var(--black)}
.auth-card{width:100%;max-width:440px}.auth-card h1{font-family:var(--font-d);font-size:28px;font-weight:700;letter-spacing:-.8px;margin-bottom:8px}
.auth-sub{font-size:14.5px;color:var(--gray);margin-bottom:26px}.auth-form{display:flex;flex-direction:column;gap:12px}
.ig{position:relative}.ig svg.ii{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--gray-dim);pointer-events:none}
.ig input{width:100%;background:rgba(255,255,255,.06);border:1px solid var(--line2);border-radius:12px;padding:13px 14px 13px 42px;color:var(--white);font-family:inherit;font-size:14.5px;transition:.2s}.ig input:focus{outline:none;border-color:rgba(227,6,19,.5)}
.adiv{display:flex;align-items:center;gap:14px;color:var(--gray-dim);font-size:13px}.adiv::before,.adiv::after{content:'';flex:1;height:1px;background:var(--line)}
.gbtn{display:flex;align-items:center;justify-content:center;gap:12px;background:rgba(255,255,255,.07);border:1px solid var(--line2);border-radius:12px;padding:12px;font-size:14.5px;font-weight:600;color:var(--white);transition:.2s;cursor:pointer;width:100%}.gbtn:hover{background:rgba(255,255,255,.11)}
.auth-ftr{text-align:center;margin-top:16px;font-size:14px;color:var(--gray)}.auth-ftr a{color:var(--white);font-weight:600;border-bottom:1px solid rgba(255,255,255,.2)}
.demo-btn{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:10px;padding:11px 16px;font-size:13.5px;color:#c8c8c8;cursor:pointer;transition:.2s;width:100%;text-align:left}.demo-btn:hover{background:rgba(255,255,255,.08);color:var(--white)}.demo-btn .dr{font-size:10.5px;font-family:var(--font-m);color:var(--gray-dim);margin-left:auto}
.rsels{display:grid;grid-template-columns:1fr 1fr;gap:10px}.ropt{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:10px;padding:14px;text-align:center;cursor:pointer;transition:.2s;font-size:13.5px;font-weight:500;color:var(--gray)}.ropt:hover,.ropt.on{border-color:rgba(227,6,19,.5);background:rgba(227,6,19,.08);color:var(--white)}.ropt span{display:block;font-size:20px;margin-bottom:6px}
.ai-pg{max-width:860px;margin:0 auto;padding:36px 0 80px}
.ai-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;margin-bottom:20px}
.ai-card>h3{font-family:var(--font-d);font-size:18px;font-weight:700;margin-bottom:6px;display:flex;align-items:center;gap:10px}
.ai-badge{font-size:10.5px;font-weight:700;background:rgba(227,6,19,.15);color:var(--red);border:1px solid rgba(227,6,19,.3);border-radius:99px;padding:3px 9px}
.ai-out{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:18px;font-size:14.5px;line-height:1.75;color:#d8d8d8;margin-top:14px;display:none}.ai-out.show{display:block;animation:pageIn .4s var(--ease)}
.ai-ld{display:none;align-items:center;gap:10px;color:var(--gray);font-size:14px;padding:8px 0}.ai-ld.on{display:flex}
.ai-ld span{display:flex;gap:4px}.ai-ld i{width:6px;height:6px;border-radius:50%;background:var(--red);animation:adp 1.2s ease infinite}.ai-ld i:nth-child(2){animation-delay:.2s}.ai-ld i:nth-child(3){animation-delay:.4s}
@keyframes adp{0%,100%{transform:scale(.7);opacity:.4}50%{transform:scale(1.1);opacity:1}}
.pest{background:linear-gradient(135deg,rgba(227,6,19,.1),transparent);border:1px solid rgba(227,6,19,.3);border-radius:12px;padding:18px 22px;margin-top:14px;display:none}.pest.show{display:block;animation:pageIn .4s var(--ease)}
.pest .pr{font-family:var(--font-d);font-size:32px;font-weight:700;color:var(--white);letter-spacing:-1px;margin-bottom:4px}.pest .ps{font-size:13.5px;color:var(--gray)}
.boost-opts{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}
.bc{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;cursor:pointer;transition:.3s}.bc:hover,.bc.on{border-color:rgba(227,6,19,.5);background:rgba(227,6,19,.05)}
.bc h4{font-size:16px;font-weight:700;margin-bottom:6px;font-family:var(--font-d)}.bc .bp{font-size:22px;font-weight:700;font-family:var(--font-d);color:var(--red);margin-bottom:8px}.bc p{font-size:13.5px;color:var(--gray);line-height:1.6}
.settings-pcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;margin-bottom:14px}
.settings-pcard>h3{font-size:16px;font-weight:600;margin-bottom:18px}
.av-lg{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--red),#8f040c);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700}
.dzone{background:rgba(255,50,50,.05);border:1px solid rgba(255,50,50,.2);border-radius:var(--r-lg);padding:22px 26px}.dzone h3{color:#ff4444;font-size:15px;font-weight:600;margin-bottom:8px}.dzone p{font-size:13.5px;color:var(--gray);margin-bottom:14px}
.chan-r{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}.chan-r:last-child{border-bottom:none}
.chn{width:130px;font-size:13px;color:var(--gray);flex-shrink:0}.chb{flex:1;height:8px;background:rgba(255,255,255,.06);border-radius:4px;overflow:hidden}.chb i{display:block;height:100%;background:linear-gradient(90deg,var(--red),rgba(227,6,19,.5));border-radius:4px;transition:width .8s var(--ease)}.chv{font-size:12.5px;font-family:var(--font-m);color:var(--gray);width:40px;text-align:right}
.lstr{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}.lstr:last-child{border-bottom:none}
.lsth{width:54px;height:40px;border-radius:8px;background:radial-gradient(120% 100% at 50% 0%,#1a1a1d,#0b0b0c);display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid var(--line)}
.lsti{flex:1;min-width:0}.lsti b{font-size:14px;font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lsti span{font-size:12px;color:var(--gray)}
.ls{font-size:11px;font-weight:700;padding:3px 9px;border-radius:99px;white-space:nowrap}.ls.live{background:rgba(0,200,80,.12);color:#00c850}
.mpr{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);cursor:pointer}.mpr:last-child{border-bottom:none}
.mpav{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#333,#1a1a1a);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;border:1px solid var(--line2)}
.mpbd{flex:1;min-width:0}.mpnm{font-size:13.5px;font-weight:600;display:flex;justify-content:space-between}.mpnm time{font-size:11.5px;font-weight:400;color:var(--gray)}.mptx{font-size:13px;color:var(--gray);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.mpr.unread .mpav{border-color:rgba(227,6,19,.5)}
.trw{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}.trw:last-child{border-bottom:none}
.trav{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,#333,#1a1a1a);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0;border:1px solid var(--line2)}
.trin{flex:1}.trin b{display:block;font-size:14px;font-weight:600}.trin span{font-size:12.5px;color:var(--gray)}
.ftb{font-size:14px;font-weight:500;color:var(--gray);padding:11px 20px;border-bottom:2px solid transparent;transition:.2s;cursor:pointer}.ftb:hover{color:var(--white)}.ftb.on{color:var(--white);border-bottom-color:var(--red)}
.aa-btn{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--red);border:1px solid rgba(227,6,19,.3);background:rgba(227,6,19,.08);border-radius:99px;padding:8px 16px;transition:.2s;cursor:pointer}.aa-btn:hover{background:rgba(227,6,19,.15)}
.aa-out{background:rgba(227,6,19,.06);border:1px solid rgba(227,6,19,.25);border-radius:12px;padding:16px;margin-top:10px;font-size:14px;line-height:1.7;color:#d8d8d8;display:none}
.sell-pest{background:linear-gradient(135deg,rgba(227,6,19,.1),transparent);border:1px solid rgba(227,6,19,.3);border-radius:12px;padding:18px 22px;margin-top:10px;display:none}.sell-pest.show{display:block}
.sell-pest .spr{font-family:var(--font-d);font-size:32px;font-weight:700;letter-spacing:-1px;margin-bottom:4px}
@media(max-width:900px){.msg-layout,.adm-layout{grid-template-columns:1fr}.inb-list{display:none}.adm-nav{position:static;height:auto}}
@media(max-width:700px){.boost-opts,.rsels{grid-template-columns:1fr}}


/* ═════════════════════════════════════════
   SERVICES — MotoMagic
   ═════════════════════════════════════════ */
.svc-hero{position:relative;min-height:70vh;display:flex;align-items:center;background:var(--black);overflow:hidden;padding:110px 0 80px}
.svc-hero-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.024) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.024) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse 80% 60% at 50% 50%,#000 20%,transparent 80%)}
.svc-glow{position:absolute;width:900px;height:280px;left:50%;bottom:-120px;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(227,6,19,.18),transparent 65%);filter:blur(50px)}
.svc-smoke{position:absolute;border-radius:50%;filter:blur(80px);opacity:.4;animation:drift 20s ease-in-out infinite alternate}
.svc-smoke.a{width:600px;height:400px;background:radial-gradient(circle,rgba(100,100,120,.18),transparent);top:-5%;right:-5%}
.svc-smoke.b{width:500px;height:380px;background:radial-gradient(circle,rgba(227,6,19,.12),transparent);bottom:0;left:0;animation-delay:-10s}
.svc-hero-c{position:relative;z-index:5;text-align:center;max-width:820px;margin:0 auto}
.svc-hero-c h1{font-family:var(--font-d);font-size:clamp(40px,6vw,76px);font-weight:700;letter-spacing:-3px;line-height:.96;margin-bottom:20px}
.svc-hero-c p{font-size:17px;color:#c9c9c9;max-width:500px;margin:0 auto 36px}
.svc-sbar{display:flex;gap:0;background:rgba(255,255,255,.06);border:1px solid var(--line2);border-radius:16px;overflow:hidden;max-width:780px;margin:0 auto;backdrop-filter:blur(16px)}
.svc-sg{flex:1;display:flex;align-items:center;gap:10px;padding:0 18px;border-right:1px solid var(--line)}
.svc-sg:last-of-type{border-right:none}
.svc-sg svg{color:var(--gray-dim);flex-shrink:0}
.svc-sg input,.svc-sg select{background:none;border:none;color:var(--white);font-family:var(--font-b);font-size:14px;padding:18px 0;width:100%;outline:none}
.svc-sg input::placeholder{color:var(--gray-dim)}
.svc-sg select option{background:#1a1a1a;color:var(--white)}
.svc-sbtn{flex-shrink:0;margin:8px;background:var(--red);color:#fff;font-weight:700;font-size:14px;padding:0 28px;border-radius:10px;display:flex;align-items:center;gap:8px;transition:.25s;cursor:pointer;border:none}
.svc-sbtn:hover{background:var(--accent)}
.em-banner{background:linear-gradient(135deg,rgba(227,6,19,.14),rgba(227,6,19,.07));border:1px solid rgba(227,6,19,.28);border-radius:var(--r-lg);padding:20px 28px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.em-pulse{width:52px;height:52px;border-radius:50%;background:rgba(227,6,19,.14);display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}
.em-pulse::before{content:'';position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--red);animation:pulse-ring 1.6s ease-out infinite;opacity:.5}
@keyframes pulse-ring{0%{transform:scale(.9);opacity:.7}100%{transform:scale(1.3);opacity:0}}
.em-banner .em-ti{font-family:var(--font-d);font-size:18px;font-weight:700;margin-bottom:3px}
.em-banner .em-su{font-size:13.5px;color:var(--gray)}
.em-btn{margin-left:auto;background:var(--red);color:#fff;font-weight:700;font-size:14px;padding:12px 22px;border-radius:10px;display:flex;align-items:center;gap:8px;transition:.2s;white-space:nowrap;border:none;cursor:pointer;font-family:inherit}
.em-btn:hover{background:var(--accent)}
.svc-cat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.scc{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 14px;display:flex;flex-direction:column;align-items:center;gap:11px;cursor:pointer;transition:.35s var(--ease);text-align:center}
.scc:hover{transform:translateY(-5px);border-color:rgba(227,6,19,.4);background:var(--card2)}
.scc-ic{width:52px;height:52px;border-radius:14px;background:rgba(227,6,19,.1);border:1px solid rgba(227,6,19,.18);display:flex;align-items:center;justify-content:center;font-size:22px;transition:.35s var(--ease)}
.scc:hover .scc-ic{background:var(--red);border-color:var(--red);transform:scale(1.1)}
.scc-nm{font-size:12.5px;font-weight:600;line-height:1.3}
.scc-ct{font-size:11px;color:var(--gray);font-family:var(--font-m)}
.biz-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.bzc{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:.4s var(--ease);cursor:pointer}
.bzc:hover{transform:translateY(-6px);border-color:var(--line2);box-shadow:var(--shadow)}
.bzc-cov{height:136px;background:linear-gradient(135deg,#1a1a1d,#0d0d0f);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:40px;color:rgba(255,255,255,.08)}
.bzc-logos{position:absolute;bottom:-22px;left:20px;width:46px;height:46px;border-radius:11px;background:var(--card2);border:2px solid var(--line2);display:flex;align-items:center;justify-content:center;font-size:20px}
.bzc-flags{position:absolute;top:10px;right:10px;display:flex;flex-direction:column;gap:5px;align-items:flex-end}
.bpill{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;padding:4px 10px;border-radius:99px}
.bpill.vrf{background:rgba(59,130,246,.14);border:1px solid rgba(59,130,246,.28);color:#60a5fa}
.bpill.eme{background:rgba(227,6,19,.14);border:1px solid rgba(227,6,19,.28);color:#ff6060}
.bpill.opn{background:rgba(0,200,80,.11);border:1px solid rgba(0,200,80,.24);color:#00c850}
.bpill.cls{background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--gray)}
.bpill.prm{background:rgba(234,179,8,.09);border:1px solid rgba(234,179,8,.24);color:#fbbf24}
.bzc-bd{padding:30px 20px 20px}
.bzc-nm{font-family:var(--font-d);font-size:15.5px;font-weight:700;letter-spacing:-.3px;margin-bottom:4px;display:flex;align-items:center;gap:6px}
.bzc-meta{font-size:12.5px;color:var(--gray);margin-bottom:11px;display:flex;align-items:center;gap:10px}
.bzc-rt{display:flex;align-items:center;gap:8px;margin-bottom:13px}
.bzc-rn{font-family:var(--font-d);font-size:15px;font-weight:700}
.bzc-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px}
.bztag{font-size:11px;font-weight:500;padding:3px 9px;border-radius:99px;background:rgba(255,255,255,.06);border:1px solid var(--line);color:#c0c0c0}
.bzc-ft{display:flex;align-items:center;justify-content:space-between;padding-top:13px;border-top:1px solid var(--line);font-size:12px;color:var(--gray-dim)}
.biz-feat{background:var(--card);border:1px solid rgba(227,6,19,.22);border-radius:var(--r-lg);overflow:hidden;display:grid;grid-template-columns:320px 1fr;transition:.3s;cursor:pointer}
.biz-feat:hover{border-color:rgba(227,6,19,.42);box-shadow:0 20px 50px -20px rgba(227,6,19,.28)}
.biz-feat-img{height:260px;background:linear-gradient(135deg,#1a1a1d,#0d0d0f);display:flex;align-items:center;justify-content:center;font-size:60px;color:rgba(255,255,255,.07)}
.biz-feat-bd{padding:26px 28px;display:flex;flex-direction:column;justify-content:space-between}
.feat-flag{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--red);background:rgba(227,6,19,.1);border:1px solid rgba(227,6,19,.18);padding:5px 12px;border-radius:99px;margin-bottom:12px}
.map-prev{height:280px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer}
.map-gl{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:40px 40px}
.mpin{position:absolute;display:flex;flex-direction:column;align-items:center;gap:0;cursor:pointer;z-index:2}
.mpin-d{width:14px;height:14px;border-radius:50%;background:var(--red);border:2px solid var(--white);box-shadow:0 0 10px rgba(227,6,19,.5)}
.mpin-l{width:2px;height:7px;background:var(--red)}
.mpin-t{font-size:10px;font-weight:700;background:var(--red);color:#fff;padding:2px 7px;border-radius:4px;white-space:nowrap}
.sfc{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;padding:8px 16px;border-radius:99px;background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--gray);cursor:pointer;transition:.2s}
.sfc:hover,.sfc.on{background:rgba(227,6,19,.1);border-color:rgba(227,6,19,.32);color:var(--white)}
.select{background:rgba(255,255,255,.06);border:1px solid var(--line2);color:var(--white);font-family:var(--font-b);border-radius:10px;padding:9px 14px;font-size:13px;outline:none;cursor:pointer}
.select option{background:#1a1a1a}
/* Business profile */
.bzp{padding-top:80px}
.bzp-cov{height:290px;background:linear-gradient(135deg,#16161a,#0c0c0e);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:80px;color:rgba(255,255,255,.05)}
.bzp-cov::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,transparent 40%,rgba(9,9,9,.92))}
.bzp-head{max-width:1180px;margin:-56px auto 0;padding:0 32px;position:relative;z-index:5}
.bzp-logo{width:84px;height:84px;border-radius:16px;background:var(--card2);border:3px solid var(--bg);display:flex;align-items:center;justify-content:center;font-size:32px;margin-bottom:14px}
.bzp-meta{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap}
.bzp-info h1{font-family:var(--font-d);font-size:clamp(22px,3vw,34px);font-weight:700;letter-spacing:-1px;margin-bottom:6px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bzp-sub{display:flex;align-items:center;gap:14px;color:var(--gray);font-size:13.5px;flex-wrap:wrap;margin-top:6px}
.bzp-sub span{display:flex;align-items:center;gap:5px}
.tbadges{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.tbadge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:6px 14px;border-radius:99px}
.tbadge.vrf{background:rgba(59,130,246,.11);border:1px solid rgba(59,130,246,.24);color:#60a5fa}
.tbadge.crt{background:rgba(0,200,80,.09);border:1px solid rgba(0,200,80,.2);color:#00c850}
.tbadge.rec{background:rgba(227,6,19,.09);border:1px solid rgba(227,6,19,.2);color:#ff6060}
.tbadge.eme{background:rgba(255,120,30,.09);border:1px solid rgba(255,120,30,.2);color:#ff9040}
.tbadge.dlr{background:rgba(234,179,8,.07);border:1px solid rgba(234,179,8,.18);color:#fbbf24}
.tbadge.prm{background:rgba(139,92,246,.09);border:1px solid rgba(139,92,246,.2);color:#a78bfa}
.biz-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);overflow-x:auto;padding:0 32px;max-width:1180px;margin:26px auto 0}
.biz-tab{font-size:13.5px;font-weight:600;color:var(--gray);padding:11px 17px;border-bottom:2px solid transparent;transition:.2s;white-space:nowrap;cursor:pointer;background:none;border-left:none;border-right:none;border-top:none}
.biz-tab:hover{color:var(--white)}
.biz-tab.on{color:var(--white);border-bottom-color:var(--red)}
.biz-tp{display:none}
.biz-tp.on{display:block}
.bzp-body{max-width:1180px;margin:0 auto;padding:34px 32px 80px;display:grid;grid-template-columns:1fr 330px;gap:30px;align-items:start}
.bzp-side{position:sticky;top:88px;display:flex;flex-direction:column;gap:14px}
.sc{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px}
.sc h4{font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--gray-dim);font-family:var(--font-m);margin-bottom:16px}
.cr{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px;cursor:pointer;transition:.2s;color:#d5d5d5}
.cr:last-child{border-bottom:none}
.cr:hover{color:var(--white)}
.cr-ic{width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.2s;font-size:14px}
.cr:hover .cr-ic{background:rgba(227,6,19,.12)}
.cr-v{flex:1}.cr-v span{display:block;font-size:11px;color:var(--gray-dim);margin-bottom:1px}
.hd{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--line);font-size:13px}
.hd:last-child{border-bottom:none}
.hd .dn{color:var(--gray);font-weight:500;min-width:78px}
.hd.tdy .dn{color:var(--white);font-weight:700}
.hd .dt{color:var(--white);font-family:var(--font-m);font-size:12px}
.hd.cls .dt{color:var(--gray-dim)}
.ostatus{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;padding:6px 14px;border-radius:99px;margin-bottom:14px}
.ostatus.op{background:rgba(0,200,80,.11);color:#00c850;border:1px solid rgba(0,200,80,.2)}
.ostatus.cl{background:rgba(255,255,255,.06);color:var(--gray);border:1px solid var(--line)}
.ostatus i{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.ostatus.op i{background:#00c850;box-shadow:0 0 6px #00c850}
.ostatus.cl i{background:var(--gray-dim)}
.svc-item{display:flex;align-items:flex-start;gap:15px;padding:17px 0;border-bottom:1px solid var(--line)}
.svc-item:last-child{border-bottom:none}
.svc-ic{width:44px;height:44px;border-radius:12px;background:rgba(227,6,19,.08);border:1px solid rgba(227,6,19,.14);display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0}
.svc-inf h4{font-size:14.5px;font-weight:600;margin-bottom:3px}
.svc-inf p{font-size:13px;color:var(--gray);line-height:1.6}
.svc-mt{display:flex;align-items:center;gap:10px;margin-top:7px}
.svc-pr{font-family:var(--font-d);font-size:16px;font-weight:700}
.svc-dur{font-size:11.5px;color:var(--gray);background:rgba(255,255,255,.06);border:1px solid var(--line);padding:3px 9px;border-radius:99px}
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.gal-it{aspect-ratio:4/3;border-radius:var(--r-md);overflow:hidden;background:var(--card);border:1px solid var(--line);cursor:pointer;transition:.3s;display:flex;align-items:center;justify-content:center;font-size:28px;color:var(--gray-dim)}
.gal-it:hover{border-color:rgba(227,6,19,.35);transform:scale(1.02)}
.rv-sum{display:grid;grid-template-columns:150px 1fr;gap:26px;padding:26px;background:var(--card2);border:1px solid var(--line);border-radius:var(--r-lg);margin-bottom:22px}
.rv-big{font-family:var(--font-d);font-size:64px;font-weight:700;letter-spacing:-4px;line-height:1}
.rv-bigst{display:flex;gap:5px;margin:7px 0;font-size:19px}
.rbars{display:flex;flex-direction:column;gap:7px}
.rbar-r{display:flex;align-items:center;gap:9px;font-size:12.5px}
.rbar-r span:first-child{width:11px;text-align:right;color:var(--gray)}
.rbar{flex:1;height:7px;background:rgba(255,255,255,.06);border-radius:4px;overflow:hidden}
.rbar-f{height:100%;background:var(--red);border-radius:4px}
.rbar-r span:last-child{width:28px;color:var(--gray);font-size:11px;font-family:var(--font-m)}
.rvc{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;margin-bottom:12px;transition:.2s}
.rvc:hover{border-color:var(--line2)}
.rv-av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--red),#8f040c);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}
.bf{background:var(--card);border:1px solid rgba(227,6,19,.18);border-radius:var(--r-lg);padding:26px}
.bf h3{font-family:var(--font-d);font-size:19px;font-weight:700;letter-spacing:-.5px;margin-bottom:5px}
.bf p{font-size:13.5px;color:var(--gray);margin-bottom:22px}
.bf-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.bf-f{display:flex;flex-direction:column;gap:5px}
.bf-f label{font-size:12px;font-weight:600;color:#bbb}
.bf-f input,.bf-f select,.bf-f textarea{background:rgba(255,255,255,.05);border:1px solid var(--line2);border-radius:9px;padding:10px 13px;color:var(--white);font-family:var(--font-b);font-size:13px;transition:.2s;width:100%}
.bf-f input:focus,.bf-f select:focus,.bf-f textarea:focus{outline:none;border-color:rgba(227,6,19,.45)}
.bf-f textarea{resize:vertical;min-height:84px;line-height:1.6}
.bf-f select option{background:#1a1a1a}
@media(max-width:1100px){
  .svc-cat-grid{grid-template-columns:repeat(4,1fr)}
  .biz-grid{grid-template-columns:repeat(2,1fr)}
  .biz-feat{grid-template-columns:1fr}
  .bzp-body{grid-template-columns:1fr}
  .bzp-side{position:static}
  .rv-sum{grid-template-columns:1fr}
}
@media(max-width:700px){
  .svc-cat-grid{grid-template-columns:repeat(3,1fr)}
  .biz-grid{grid-template-columns:1fr}
  .svc-sbar{flex-direction:column}
  .svc-sg{border-right:none;border-bottom:1px solid var(--line)}
  .svc-sbtn{margin:8px;width:calc(100% - 16px)}
  .gal-grid{grid-template-columns:1fr 1fr}
  .bf-row{grid-template-columns:1fr}
  .bzp-meta{flex-direction:column}
  .em-btn{margin:0;width:100%;justify-content:center}
}

/* ═══════════════════════════════════════════════════════
   MOTOMAGIC EXPANSION — CSS
   Rider Profiles · Clubs · Events · Compare · Market
   ═══════════════════════════════════════════════════════ */

/* ── Shared Expansion Patterns ── */
.exp-cover{height:280px;position:relative;overflow:hidden;background:linear-gradient(135deg,#13131a 0%,#0c0c0e 100%);display:flex;align-items:center;justify-content:center}
.exp-cover::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,transparent 35%,rgba(9,9,9,.95))}
.exp-cover-pattern{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:48px 48px}
.exp-cover-placeholder{font-size:80px;opacity:.06;position:relative;z-index:0}
.avatar-ring{border:3px solid var(--bg);border-radius:50%;background:linear-gradient(135deg,var(--red),#8f040c);display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;flex-shrink:0}
.page-body{max-width:1180px;margin:0 auto;padding:36px 32px 100px}
.two-col{display:grid;grid-template-columns:1fr 320px;gap:28px;align-items:start}
.side-sticky{position:sticky;top:88px;display:flex;flex-direction:column;gap:14px}
.infocard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;overflow:hidden}
.infocard h4{font-size:11.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--gray-dim);font-family:var(--font-m);margin-bottom:16px}
.stat-row-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:28px}
.stat-box{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 16px;text-align:center}
.stat-box-n{font-family:var(--font-d);font-size:26px;font-weight:700;letter-spacing:-1px;margin-bottom:3px}
.stat-box-l{font-size:12px;color:var(--gray)}
.pills-row{display:flex;flex-wrap:wrap;gap:7px}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;padding:5px 12px;border-radius:99px;background:rgba(255,255,255,.06);border:1px solid var(--line);color:#c8c8c8}
.pill.red{background:rgba(227,6,19,.1);border-color:rgba(227,6,19,.22);color:#ff6060}
.pill.blue{background:rgba(59,130,246,.1);border-color:rgba(59,130,246,.22);color:#60a5fa}
.pill.green{background:rgba(0,200,80,.09);border-color:rgba(0,200,80,.2);color:#00c850}
.pill.gold{background:rgba(234,179,8,.09);border-color:rgba(234,179,8,.2);color:#fbbf24}
.section-title{font-family:var(--font-d);font-size:19px;font-weight:700;letter-spacing:-.5px;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.empty-state{text-align:center;padding:48px 24px;color:var(--gray)}
.empty-state-icon{font-size:44px;margin-bottom:12px;opacity:.5}

/* ── Tabs (shared) ── */
.tabs-bar{display:flex;border-bottom:1px solid var(--line);overflow-x:auto;margin-bottom:28px}
.tab-i{font-size:13.5px;font-weight:600;color:var(--gray);padding:11px 18px;border-bottom:2px solid transparent;transition:.2s;white-space:nowrap;cursor:pointer;background:none;border-left:none;border-right:none;border-top:none;font-family:var(--font-b)}
.tab-i:hover{color:var(--white)}
.tab-i.on{color:var(--white);border-bottom-color:var(--red)}
.tab-p{display:none}
.tab-p.on{display:block}

/* ═══════════════════════════════════════════════════════
   RIDER PROFILES
   ═══════════════════════════════════════════════════════ */
.rider-cover{height:260px;position:relative;overflow:hidden;background:linear-gradient(135deg,#13131a,#0c0c0e)}
.rider-cover::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,transparent 30%,rgba(9,9,9,.94))}
.rider-cover-pattern{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);background-size:52px 52px}
.rider-head{max-width:1180px;margin:-52px auto 0;padding:0 32px;position:relative;z-index:5}
.rider-avatar{width:96px;height:96px;border-radius:50%;border:4px solid var(--bg);background:linear-gradient(135deg,var(--red),#8f040c);display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:700;color:#fff;flex-shrink:0;position:relative;margin-bottom:14px}
.rider-vbadge{position:absolute;bottom:2px;right:2px;width:26px;height:26px;border-radius:50%;background:var(--red);border:2px solid var(--bg);display:flex;align-items:center;justify-content:center;font-size:12px}
.rider-name-row{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap}
.rider-name{font-family:var(--font-d);font-size:clamp(22px,3vw,32px);font-weight:700;letter-spacing:-1px;display:flex;align-items:center;gap:10px;margin-bottom:5px;flex-wrap:wrap}
.rider-sub{font-size:13.5px;color:var(--gray);display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.rider-sub span{display:flex;align-items:center;gap:5px}
.rider-bio{font-size:14.5px;color:#c0c0c0;line-height:1.7;max-width:600px;margin-bottom:16px}
.rep-score{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;background:linear-gradient(135deg,rgba(227,6,19,.12),rgba(227,6,19,.06));border:1px solid rgba(227,6,19,.22);border-radius:99px}
.rep-score-n{font-family:var(--font-d);font-size:18px;font-weight:700;color:var(--white)}
.rep-score-l{font-size:12px;color:var(--gray-dim)}
.garage-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.garage-card{background:var(--card2);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;cursor:pointer;transition:.3s var(--ease)}
.garage-card:hover{transform:translateY(-4px);border-color:var(--line2);box-shadow:var(--shadow)}
.garage-card-img{height:130px;background:linear-gradient(135deg,#1a1a1d,#101013);display:flex;align-items:center;justify-content:center;font-size:36px;color:rgba(255,255,255,.08);position:relative}
.garage-card-body{padding:14px}
.garage-card-name{font-weight:600;font-size:14px;margin-bottom:3px}
.garage-card-meta{font-size:12px;color:var(--gray)}
.activity-item{display:flex;align-items:flex-start;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.activity-item:last-child{border-bottom:none}
.activity-icon{width:36px;height:36px;border-radius:10px;background:rgba(227,6,19,.1);border:1px solid rgba(227,6,19,.15);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px}
.activity-text{font-size:13.5px;line-height:1.55}
.activity-text b{color:var(--white);font-weight:600}
.activity-time{font-size:11.5px;color:var(--gray-dim);font-family:var(--font-m);margin-top:3px}
.achievement-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.ach-card{background:var(--card2);border:1px solid var(--line);border-radius:var(--r-md);padding:16px;text-align:center;transition:.2s}
.ach-card.earned{border-color:rgba(234,179,8,.25);background:rgba(234,179,8,.04)}
.ach-card.earned:hover{border-color:rgba(234,179,8,.45)}
.ach-icon{font-size:28px;margin-bottom:7px;line-height:1}
.ach-name{font-size:12px;font-weight:600;margin-bottom:3px}
.ach-desc{font-size:11px;color:var(--gray)}

/* ═══════════════════════════════════════════════════════
   MOTORCYCLE CLUBS
   ═══════════════════════════════════════════════════════ */
.clubs-hero{background:var(--black);padding:100px 0 64px;position:relative;overflow:hidden}
.clubs-hero-pattern{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse 80% 60% at 50% 50%,#000 30%,transparent 80%)}
.club-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.club-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;cursor:pointer;transition:.4s var(--ease)}
.club-card:hover{transform:translateY(-5px);border-color:var(--line2);box-shadow:var(--shadow)}
.club-card-cover{height:130px;background:linear-gradient(135deg,#1a1a1d,#101013);position:relative;display:flex;align-items:center;justify-content:center;font-size:36px;overflow:hidden}
.club-card-logo{position:absolute;bottom:-18px;left:18px;width:44px;height:44px;border-radius:12px;background:var(--card2);border:2px solid var(--line2);display:flex;align-items:center;justify-content:center;font-size:20px}
.club-card-body{padding:28px 18px 18px}
.club-card-name{font-family:var(--font-d);font-size:16px;font-weight:700;letter-spacing:-.3px;margin-bottom:4px;display:flex;align-items:center;gap:7px}
.club-card-meta{font-size:12.5px;color:var(--gray);margin-bottom:12px;display:flex;gap:12px}
.club-card-desc{font-size:13px;color:var(--gray);line-height:1.6;margin-bottom:14px;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.club-card-ft{display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid var(--line)}
.club-profile-logo{width:80px;height:80px;border-radius:18px;background:var(--card2);border:3px solid var(--bg);display:flex;align-items:center;justify-content:center;font-size:30px;margin-bottom:14px}
.member-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.member-card{background:var(--card2);border:1px solid var(--line);border-radius:var(--r-md);padding:14px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:.2s}
.member-card:hover{border-color:var(--line2)}
.member-av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--red),#8f040c);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0}
.member-name{font-size:14px;font-weight:600;margin-bottom:2px}
.member-role{font-size:11.5px;color:var(--gray)}
.ride-item{display:flex;align-items:flex-start;gap:14px;padding:16px;background:var(--card2);border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:10px;transition:.2s;cursor:pointer}
.ride-item:hover{border-color:var(--line2)}
.ride-date-box{width:50px;flex-shrink:0;text-align:center;background:rgba(227,6,19,.1);border:1px solid rgba(227,6,19,.2);border-radius:10px;padding:8px 6px}
.ride-date-d{font-family:var(--font-d);font-size:22px;font-weight:700;line-height:1;color:var(--red)}
.ride-date-m{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--gray)}

/* ═══════════════════════════════════════════════════════
   EVENTS PLATFORM
   ═══════════════════════════════════════════════════════ */
.events-hero{background:var(--black);padding:80px 0 44px;position:relative;overflow:hidden}
@media(max-width:768px){
  .events-hero{padding:64px 0 32px}
  .events-hero h1{margin-bottom:12px}
  .events-hero p{margin-bottom:22px}
}
.events-hero-glow{position:absolute;width:700px;height:250px;left:50%;bottom:-100px;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(227,6,19,.15),transparent 65%);filter:blur(50px)}
.event-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.event-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;cursor:pointer;transition:.4s var(--ease)}
.event-card:hover{transform:translateY(-5px);border-color:var(--line2);box-shadow:var(--shadow)}
.event-card-img{height:150px;background:linear-gradient(135deg,#1a1a1d,#0d0d0f);position:relative;display:flex;align-items:center;justify-content:center;font-size:40px}
.event-date-badge{position:absolute;top:12px;left:12px;background:rgba(9,9,9,.85);border:1px solid var(--line2);border-radius:10px;padding:7px 12px;text-align:center;backdrop-filter:blur(8px)}
.event-date-d{font-family:var(--font-d);font-size:20px;font-weight:700;line-height:1;color:var(--red)}
.event-date-m{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--gray-dim)}
.event-type-badge{position:absolute;top:12px;right:12px}
.event-card-body{padding:18px}
.event-card-name{font-family:var(--font-d);font-size:16px;font-weight:700;letter-spacing:-.3px;margin-bottom:6px}
.event-card-loc{font-size:12.5px;color:var(--gray);margin-bottom:10px;display:flex;align-items:center;gap:5px}
.event-card-meta{display:flex;align-items:center;justify-content:space-between;font-size:12.5px}
.event-att{display:flex;align-items:center;gap:-6px}
.att-av{width:24px;height:24px;border-radius:50%;border:2px solid var(--card);background:linear-gradient(135deg,var(--red),#8f040c);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;margin-right:-6px}
.featured-event{background:var(--card);border:1px solid rgba(227,6,19,.22);border-radius:var(--r-lg);overflow:hidden;display:grid;grid-template-columns:400px 1fr;margin-bottom:48px;cursor:pointer;transition:.3s}
.featured-event:hover{border-color:rgba(227,6,19,.4);box-shadow:0 20px 50px -20px rgba(227,6,19,.25)}
.featured-event-img{min-height:280px;background:linear-gradient(135deg,#1a1a1d,#0d0d0f);display:flex;align-items:center;justify-content:center;font-size:80px;position:relative}
.featured-event-body{padding:28px 32px;display:flex;flex-direction:column;justify-content:space-between}
/* Event detail */
.event-detail-cover{height:320px;position:relative;overflow:hidden;background:linear-gradient(135deg,#13131a,#0c0c0e);display:flex;align-items:center;justify-content:center}
.event-detail-cover::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,transparent 40%,rgba(9,9,9,.95))}
.event-info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:28px}
.eig-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;text-align:center}
.eig-val{font-family:var(--font-d);font-size:18px;font-weight:700;margin-bottom:3px}
.eig-lbl{font-size:11.5px;color:var(--gray)}

/* ═══════════════════════════════════════════════════════
   MOTORCYCLE COMPARISON
   ═══════════════════════════════════════════════════════ */
.compare-header{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-bottom:0}
.compare-bike-slots{display:grid;gap:1px;background:var(--line)}
.compare-slot{background:var(--card);padding:20px;text-align:center;min-height:160px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:.2s;position:relative}
.compare-slot:hover{background:var(--card2)}
.compare-slot.filled{cursor:default}
.compare-slot.filled:hover{background:var(--card)}
.compare-slot-add{width:48px;height:48px;border-radius:50%;border:2px dashed var(--line2);display:flex;align-items:center;justify-content:center;margin-bottom:8px;transition:.2s;font-size:22px;color:var(--gray-dim)}
.compare-slot:hover .compare-slot-add{border-color:var(--red);color:var(--red)}
.compare-slot-label{font-size:13px;color:var(--gray)}
.compare-slot-name{font-family:var(--font-d);font-size:15px;font-weight:700;letter-spacing:-.3px;margin-bottom:4px}
.compare-slot-price{font-size:22px;font-weight:700;font-family:var(--font-d);color:var(--white)}
.compare-slot-remove{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.07);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;transition:.2s;color:var(--gray)}
.compare-slot-remove:hover{background:rgba(227,6,19,.2);color:var(--red)}
.compare-table{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-top:-1px}
.compare-row{display:grid;background:var(--card);border-bottom:1px solid var(--line)}
.compare-row:last-child{border-bottom:none}
.compare-row:nth-child(even){background:var(--card2)}
.compare-row-label{padding:14px 18px;font-size:13px;font-weight:600;color:var(--gray);display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.02);border-right:1px solid var(--line)}
.compare-row-val{padding:14px 18px;font-size:14px;font-weight:500;display:flex;align-items:center;justify-content:center;text-align:center;border-right:1px solid var(--line)}
.compare-row-val:last-child{border-right:none}
.compare-row-val.best{color:var(--red);font-weight:700}
.compare-bar-wrap{width:100%;background:rgba(255,255,255,.06);height:6px;border-radius:3px;overflow:hidden;margin-top:6px}
.compare-bar-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--red),#ff4040);transition:width 1s var(--ease)}
.compare-section-head{background:rgba(227,6,19,.06);border-bottom:1px solid rgba(227,6,19,.15);padding:10px 18px;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(227,6,19,.7);display:flex;align-items:center;gap:8px}
.compare-search-modal{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:300;display:flex;align-items:center;justify-content:center;padding:20px}
.compare-search-box{background:var(--card);border:1px solid var(--line2);border-radius:var(--r-lg);width:100%;max-width:540px;overflow:hidden}
.compare-search-results{max-height:400px;overflow-y:auto}
.compare-result-item{display:flex;align-items:center;gap:14px;padding:14px 20px;cursor:pointer;border-bottom:1px solid var(--line);transition:.2s}
.compare-result-item:hover{background:var(--card2)}
.compare-result-item:last-child{border-bottom:none}

/* ═══════════════════════════════════════════════════════
   MARKET INTELLIGENCE
   ═══════════════════════════════════════════════════════ */
.market-hero{background:var(--black);padding:100px 0 64px;position:relative;overflow:hidden}
.market-hero-glow{position:absolute;width:600px;height:200px;left:50%;bottom:-80px;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(59,130,246,.18),transparent 65%);filter:blur(50px)}
.market-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.market-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.mcard-lg{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;overflow:hidden}
.mcard-lg h3{font-family:var(--font-d);font-size:17px;font-weight:700;letter-spacing:-.4px;margin-bottom:4px}
.mcard-lg p{font-size:13px;color:var(--gray);margin-bottom:20px}
/* Chart bars (CSS-only) */
.chart-bars{display:flex;align-items:flex-end;gap:6px;height:120px;padding:0 4px}
.chart-bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px}
.chart-bar{width:100%;border-radius:4px 4px 0 0;background:linear-gradient(180deg,var(--red),rgba(227,6,19,.3));transition:height 1s var(--ease);min-height:4px}
.chart-bar:hover{background:linear-gradient(180deg,#ff4040,rgba(255,64,64,.5))}
.chart-label{font-size:10px;color:var(--gray-dim);font-family:var(--font-m);white-space:nowrap}
.chart-val{font-size:10px;color:var(--gray);font-family:var(--font-m)}
/* Line chart (CSS) */
.line-chart{position:relative;height:140px;overflow:hidden}
.line-chart svg{position:absolute;inset:0;width:100%;height:100%}
/* Trending table */
.trend-row{display:flex;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--line)}
.trend-row:last-child{border-bottom:none}
.trend-rank{font-family:var(--font-d);font-size:15px;font-weight:700;color:var(--gray-dim);width:22px;flex-shrink:0}
.trend-info{flex:1}
.trend-name{font-size:14px;font-weight:600;margin-bottom:1px}
.trend-sub{font-size:12px;color:var(--gray)}
.trend-val{text-align:right}
.trend-price{font-family:var(--font-d);font-size:15px;font-weight:700}
.trend-change{font-size:11.5px;font-family:var(--font-m)}
.trend-change.up{color:#00c850}
.trend-change.dn{color:var(--red)}
.market-insight-card{background:linear-gradient(135deg,rgba(59,130,246,.08),rgba(59,130,246,.03));border:1px solid rgba(59,130,246,.2);border-radius:var(--r-lg);padding:20px;margin-bottom:12px}
.mic-header{display:flex;align-items:flex-start;gap:12px;margin-bottom:8px}
.mic-icon{width:38px;height:38px;border-radius:10px;background:rgba(59,130,246,.14);border:1px solid rgba(59,130,246,.2);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.mic-title{font-weight:600;font-size:14.5px;margin-bottom:2px}
.mic-body{font-size:13.5px;color:#c0c0c0;line-height:1.65}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════ */
@media(max-width:1100px){
  .two-col{grid-template-columns:1fr}
  .side-sticky{position:static}
  .club-grid,.event-grid{grid-template-columns:repeat(2,1fr)}
  .featured-event{grid-template-columns:1fr}
  .market-grid-3{grid-template-columns:repeat(2,1fr)}
  .stat-row-4{grid-template-columns:repeat(2,1fr)}
  .event-info-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
  .club-grid,.event-grid,.market-grid-3,.market-grid-2{grid-template-columns:1fr}
  .page-body{padding:24px 18px 80px}
  .rider-head,.bzp-head{padding:0 18px}
  .garage-grid{grid-template-columns:repeat(2,1fr)}
  .compare-row{grid-template-columns:1fr!important}
  .stat-row-4{grid-template-columns:1fr 1fr}
}


/* ── Custom overrides (add below) ── */

/* ── Product-detail real photo + zoom (image fix) ─────────────────────────── */
.gmain .pd-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:5%;z-index:0;opacity:0;transition:opacity .4s var(--ease)}
.gmain .pd-photo[src]{opacity:1}
.gmain:hover .pd-photo{transform:scale(1.04);transition:transform .5s var(--ease),opacity .4s var(--ease)}
.gmain .badge,.gmain .ghint,.gmain .badge-disc{z-index:3}
.gthumbs .gthumb{overflow:hidden}
.gthumbs .gthumb img{width:100%;height:100%;object-fit:contain;padding:10%;display:block}
#pd-zoom{position:fixed;inset:0;z-index:12000;background:rgba(5,5,5,.93);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;cursor:zoom-out;padding:30px}
#pd-zoom.on{display:flex}
#pd-zoom img{max-width:92%;max-height:92%;object-fit:contain;border-radius:14px;box-shadow:0 40px 90px -30px rgba(0,0,0,.9)}

/* ── Ask-about-product button + compatibility section ─────────────────────── */
.btn-wa-outline{width:100%;justify-content:center;margin-top:10px;background:transparent;color:#fff;
  border:1px solid rgba(37,211,102,.55);border-radius:12px;min-height:46px;padding:12px 18px;
  display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:14px;cursor:pointer;
  transition:background .2s,border-color .2s,transform .15s}
.btn-wa-outline svg{color:#25D366}
.btn-wa-outline:hover{background:rgba(37,211,102,.10);border-color:rgba(37,211,102,.9)}
.btn-wa-outline:active{transform:scale(.99)}
.pd-compat{margin-top:22px;border:1px solid var(--line);border-radius:16px;background:var(--card);padding:20px 22px}
.pd-compat h3{font-size:15px;font-weight:700;color:#fff;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.pd-compat dl{display:grid;grid-template-columns:1fr;gap:12px;margin:0}
.pd-compat .cx{display:grid;grid-template-columns:200px 1fr;gap:14px}
.pd-compat dt{font-size:12.5px;font-weight:600;color:var(--gray)}
.pd-compat dd{font-size:13.5px;color:#ddd;margin:0;line-height:1.55}
.pd-compat .cx-note dd{color:var(--gray)}
.pd-compat .compat-warn{margin-top:16px;padding:12px 14px;border-left:3px solid var(--red);
  background:rgba(227,6,19,.07);border-radius:8px;font-size:13px;line-height:1.55;color:#eee}
.pd-compat .compat-wa{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-size:13px;
  font-weight:600;color:#25D366;text-decoration:none}
.pd-compat .compat-wa:hover{text-decoration:underline}
@media (max-width:640px){.pd-compat .cx{grid-template-columns:1fr;gap:3px}}

/* ── Dropdown readability — dark native option list on every select ────────────
   Fixes white-on-white option text (Windows Chrome/Edge, light OS mode).
   color-scheme:dark forces the native popup dark on all OS/browsers; explicit
   option colors guarantee contrast. Bare selectors keep low specificity so
   existing closed-box styling (.field/.bf-f/.select/etc.) is preserved. */
select { color-scheme: dark; }
select option { background-color: #171717; color: #ffffff; }
select option:checked { background-color: #333333; color: #ffffff; }
select option:hover { background-color: #262626; color: #ffffff; }
select option:disabled { color: #888888; }
/* Fallback for any unstyled select box (styled selects override via their class) */
select:not([class]) { background-color: #171717; color: #ffffff; }

/* ── Cart line with product thumbnail ─────────────────────────────────────── */
.cart-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.05);align-items:flex-start}
.cart-item-image{width:72px;height:72px;flex:0 0 72px;object-fit:contain;object-position:center;border-radius:10px;
  background:#181818;border:1px solid rgba(255,255,255,.08);cursor:pointer;padding:4px;box-sizing:border-box}
.cart-item-image:hover{border-color:rgba(227,6,19,.5)}
.cart-item-info{flex:1;min-width:0}
.cart-item-top{display:flex;align-items:flex-start;gap:10px}
.cart-item-name{flex:1;min-width:0;font-size:13.5px;font-weight:600;color:#fff;text-decoration:none;line-height:1.35}
.cart-item-name:hover{color:var(--red,#E30613)}
.cart-item-remove{flex:0 0 auto;width:24px;height:24px;border:none;background:none;color:#f87171;font-size:14px;
  cursor:pointer;border-radius:6px;line-height:1;display:grid;place-items:center}
.cart-item-remove:hover{background:rgba(248,113,113,.12)}
.cart-item-variant{font-size:11.5px;color:var(--gray,#888);margin-top:3px;line-height:1.5}
.cart-item-price{font-size:12.5px;color:var(--gray,#888);margin-top:4px}
.cart-item-price strong{color:#fff}
.cart-item-qty{display:flex;align-items:center;gap:8px;margin-top:8px}
.cart-item-qty button{width:26px;height:26px;border-radius:6px;border:1px solid var(--line2,rgba(255,255,255,.14));
  background:rgba(255,255,255,.04);color:#fff;cursor:pointer;font-size:14px;line-height:1}
.cart-item-qty button:hover{border-color:var(--red,#E30613)}
.cart-item-qty span{min-width:22px;text-align:center;font-size:13px}
.cart-foot-row{display:flex;justify-content:space-between;font-size:13px;color:var(--gray,#888);margin-bottom:6px}
.cart-foot-total{display:flex;justify-content:space-between;font-size:16px;font-weight:800;margin:10px 0 14px}
.cart-cod-note{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--gray-dim,#7a7a7a);margin:0 0 10px}
.cart-cod-note svg{color:var(--gray-dim,#7a7a7a);flex-shrink:0}
@media (max-width:420px){
  .cart-item-image{width:56px;height:56px;flex-basis:56px}
}
/* Touch-friendly cart quantity controls on phones */
@media (max-width:600px){
  .cart-item-qty{gap:6px;margin-top:10px}
  .cart-item-qty button{width:40px;height:40px;border-radius:9px;font-size:17px}
  .cart-item-qty span{min-width:30px;font-size:14px}
  .cart-item-remove{width:40px;height:40px;font-size:16px}
  #mm-cart-foot .btn{min-height:48px}
}

/* ── Sticky mobile Product-Detail purchase bar ───────────────────────────── */
#pd-sticky-buy{
  position:fixed;left:0;right:0;bottom:0;z-index:9985;   /* below cart drawer(9995), below FAB(9990) */
  display:none;align-items:center;gap:12px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(12,12,14,.96);backdrop-filter:blur(12px);
  border-top:1px solid rgba(227,6,19,.30);
  box-shadow:0 -10px 30px -12px rgba(0,0,0,.7);
}
#pd-sticky-buy.show{display:flex}
#pd-sticky-buy .pdsb-price{flex:0 0 auto;min-width:0}
#pd-sticky-buy #pdsb-price{font-family:var(--font-d,inherit);font-weight:850;font-size:18px;color:#fff;letter-spacing:-.3px;white-space:nowrap}
#pd-sticky-buy .pdsb-btn{
  flex:1 1 auto;min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid #ef1026;border-radius:12px;background:#eb071d;color:#fff;font-weight:800;font-size:14px;cursor:pointer;
}
#pd-sticky-buy .pdsb-btn:active{transform:scale(.98)}
/* Only ever visible on phones */
@media (min-width:769px){ #pd-sticky-buy{display:none !important} }
/* Lift the floating contact stack above the bar so it never gets covered */
body.pd-sticky-on #mm-contact-fab{ bottom:calc(84px + env(safe-area-inset-bottom,0px)) }

/* ── Variant selectors (color swatches + size buttons) ────────────────────── */
.pd-swatch,.pd-sizebtn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:1px solid var(--line2,rgba(255,255,255,.14));background:rgba(255,255,255,.04);color:#ddd;
  border-radius:8px;font-weight:600;cursor:pointer;transition:.15s;font-family:inherit}
.pd-swatch{padding:9px 14px;font-size:12.5px;min-height:44px}
.pd-sizebtn{min-width:46px;min-height:44px;padding:9px 12px;font-size:13px;font-weight:700}
.pd-swatch:hover,.pd-sizebtn:hover{border-color:rgba(227,6,19,.55);color:#fff}
.pd-swatch.on{border-color:var(--red,#E30613);background:rgba(227,6,19,.12);color:#fff}
.pd-sizebtn.on{border-color:var(--red,#E30613);background:var(--red,#E30613);color:#fff}
.pd-swatch:focus-visible,.pd-sizebtn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(227,6,19,.35)}
.pd-swatch:disabled,.pd-sizebtn:disabled{opacity:.4;cursor:not-allowed;text-decoration:line-through}
.pd-swatch-dot{width:14px;height:14px;border-radius:50%;border:1px solid rgba(255,255,255,.35);flex:0 0 auto}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── Wishlist: header badge, filled hearts, drawer items ──────────────────── */
.icon-btn{position:relative}
.wdot{position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;padding:0 4px;border-radius:99px;
  background:var(--red,#E30613);color:#fff;font-size:10px;font-weight:800;display:none;align-items:center;justify-content:center;line-height:1}
/* filled heart when saved */
.wish.on,.wish.on svg,.cbtn.wish.on,.cbtn.wish.on svg{color:var(--red,#E30613)}
.wish.on svg use,.cbtn.wish.on svg use{fill:var(--red,#E30613)}
.wish.on svg,.cbtn.wish.on svg{fill:var(--red,#E30613)}
.wish:focus-visible,.cbtn.wish:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(227,6,19,.35)}

.wl-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.05);align-items:flex-start}
.wl-img{width:72px;height:72px;flex:0 0 72px;object-fit:contain;border-radius:10px;background:#181818;
  border:1px solid rgba(255,255,255,.08);cursor:pointer;padding:4px;box-sizing:border-box}
.wl-img:hover{border-color:rgba(227,6,19,.5)}
.wl-info{flex:1;min-width:0}
.wl-name{display:block;font-size:13.5px;font-weight:600;color:#fff;text-decoration:none;line-height:1.35}
.wl-name:hover{color:var(--red,#E30613)}
.wl-meta{font-size:12px;color:var(--gray,#888);margin-top:4px}
.wl-price{color:#fff;font-weight:700}
.wl-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.wl-btn{min-height:34px;padding:7px 12px;border-radius:8px;border:1px solid var(--line2,rgba(255,255,255,.14));
  background:rgba(255,255,255,.04);color:#fff;font-size:12px;font-weight:600;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;transition:.15s}
.wl-btn:hover{border-color:var(--red,#E30613)}
.wl-primary{background:var(--red,#E30613);border-color:var(--red,#E30613)}
.wl-primary:hover{filter:brightness(1.05)}
.wl-rm{color:#f87171;border:none;background:none}
.wl-rm:hover{background:rgba(248,113,113,.12)}
@media (max-width:420px){.wl-img{width:56px;height:56px;flex-basis:56px}}

/* ── Free-delivery announcement bar ───────────────────────────────────────── */
.ship-bar{position:fixed;top:0;left:0;right:0;z-index:250;display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;
  background:linear-gradient(90deg,#0b0b0c,#141414,#0b0b0c);border-bottom:1px solid rgba(227,6,19,.35);
  color:#fff;font-size:12.5px;font-weight:600;letter-spacing:.2px;padding:7px 14px;text-align:center;height:32px;box-sizing:border-box}
.ship-bar span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.ship-bar:hover{color:#fff;background:linear-gradient(90deg,#0b0b0c,#1c1416,#0b0b0c)}
#nav{top:32px}                 /* sit below the announcement bar */
@media (max-width:520px){.ship-bar{font-size:11px;padding:7px 10px}}

/* ── Cart free-shipping progress ──────────────────────────────────────────── */
.cart-shipping-progress{
  margin-top:16px;margin-bottom:14px;padding:15px;
  border:1px solid rgba(255,23,43,.20);border-radius:14px;
  background:linear-gradient(135deg,rgba(255,23,43,.07),rgba(255,255,255,.02));
}
.cart-shipping-progress__header{display:flex;align-items:center;gap:9px}
.cart-shipping-progress__icon{
  width:30px;height:30px;flex:0 0 30px;display:grid;place-items:center;
  border-radius:9px;color:#ff172b;background:rgba(255,23,43,.09);
}
.cart-shipping-progress__message{color:#f5f5f6;font-size:13px;font-weight:750;line-height:1.35}
.cart-shipping-progress__track{
  width:100%;height:8px;margin-top:12px;overflow:hidden;border-radius:999px;
  background:rgba(255,255,255,.08);
}
.cart-shipping-progress__fill{
  display:block;width:var(--shipping-progress,0%);height:100%;border-radius:inherit;
  background:linear-gradient(90deg,#e60018,#ff3547);transition:width .3s ease;
}
.cart-shipping-progress__labels{
  margin-top:7px;display:flex;justify-content:space-between;
  color:rgba(255,255,255,.48);font-size:10.5px;
}
.cart-shipping-progress.is-qualified{
  border-color:rgba(48,214,117,.30);
  background:linear-gradient(135deg,rgba(48,214,117,.09),rgba(255,255,255,.02));
}
.cart-shipping-progress.is-qualified .cart-shipping-progress__icon,
.cart-shipping-progress.is-qualified .cart-shipping-progress__message{color:#35d878}
.cart-shipping-progress.is-qualified .cart-shipping-progress__fill{
  background:linear-gradient(90deg,#20b864,#3ee683);
}

/* ═══════════════ Pricing page — isolated visual upgrade (scoped to .pricing-page) ═══════════════ */
/* Header clears the fixed announcement bar (32px) + nav (68px) = 100px, plus a gap. */
.pricing-page .pp-head{padding:124px 0 34px;text-align:center;position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:var(--black)}
.pricing-page .pp-head::before{content:'';position:absolute;width:560px;height:240px;left:50%;top:-40px;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(227,6,19,.10),transparent 68%);filter:blur(38px);pointer-events:none}
.pricing-page .pp-head .wrap-n{position:relative}
.pricing-page .pp-eyebrow{display:inline-block;font-family:var(--font-m,monospace);font-size:11.5px;font-weight:700;letter-spacing:2.4px;color:var(--red,#E30613);text-transform:uppercase;margin-bottom:14px}
.pricing-page .pp-title{font-family:var(--font-d,inherit);font-size:clamp(26px,4vw,42px);letter-spacing:-1.4px;line-height:1.06;margin:0 auto;max-width:16ch;color:#fff}
.pricing-page .pp-sub{color:var(--gray,#9a9a9a);font-size:15px;line-height:1.6;margin:14px auto 0;max-width:560px}
.pricing-page .billing-toggle{margin-top:26px}
.pricing-page .billing-toggle .seg{background:rgba(255,255,255,.04);border:1px solid var(--line,rgba(255,255,255,.1));border-radius:99px;padding:5px;gap:4px}
.pricing-page .seg button{padding:10px 24px;min-height:44px;border-radius:99px;font-size:13.5px;font-weight:600;color:var(--gray,#9a9a9a);transition:background .2s,color .2s;cursor:pointer;display:inline-flex;align-items:center}
.pricing-page .seg button:hover{color:#fff}
.pricing-page .seg button.on{background:var(--red,#E30613);color:#fff;box-shadow:0 6px 18px -8px rgba(227,6,19,.6)}
.pricing-page .seg button:focus-visible{outline:2px solid var(--accent,#FF2020);outline-offset:2px}
.pricing-page .seg button .save{font-size:10.5px;font-weight:700;color:#ffd2d5;margin-left:7px}
.pricing-page .seg button.on .save{color:#fff}
.pricing-page .plans{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;padding:44px 0 26px;align-items:stretch}
.pricing-page .plan{padding:26px 22px;border-radius:var(--r-lg,20px);border:1px solid var(--line,rgba(255,255,255,.08));background:linear-gradient(180deg,#111113,#0b0b0c);transition:transform .28s var(--ease,ease),border-color .28s,box-shadow .28s;will-change:transform}
.pricing-page .plan:hover{transform:translateY(-6px);border-color:var(--line2,rgba(255,255,255,.16));box-shadow:0 24px 50px -30px rgba(0,0,0,.9)}
.pricing-page .plan .pp-aud{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--gray-dim,#7a7a7a);margin-bottom:8px;min-height:14px}
.pricing-page .plan h3{font-family:var(--font-d,inherit);font-size:19px;font-weight:700;letter-spacing:-.3px;color:#fff}
.pricing-page .plan .pprice{font-family:var(--font-d,inherit);font-size:38px;font-weight:700;letter-spacing:-1.6px;margin:14px 0 2px;color:#fff}
.pricing-page .plan .pprice small{font-size:13px;color:var(--gray,#9a9a9a);font-weight:400;letter-spacing:0}
.pricing-page .plan .pdesc{font-size:12.5px;color:var(--gray,#9a9a9a);min-height:36px;margin-bottom:16px;line-height:1.45}
.pricing-page .plan ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin:0 0 24px;padding:0;flex:1}
.pricing-page .plan li{display:flex;gap:10px;font-size:13px;color:#d4d4d4;align-items:flex-start;line-height:1.4}
.pricing-page .plan li svg{color:var(--red,#E30613);flex-shrink:0;margin-top:2px}
.pricing-page .plan .btn{justify-content:center;width:100%;min-height:44px;border-radius:12px;font-weight:600;transition:background .2s,border-color .2s,color .2s}
.pricing-page .plan .btn:focus-visible{outline:2px solid var(--accent,#FF2020);outline-offset:2px}
.pricing-page .plan.hot{border-color:rgba(227,6,19,.55);background:linear-gradient(180deg,#180a0b,#0c0b0c);box-shadow:0 26px 60px -34px rgba(227,6,19,.5)}
.pricing-page .plan.hot:hover{transform:translateY(-8px)}
.pricing-page .plan .flag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--red,#E30613);color:#fff;font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;padding:5px 15px;border-radius:99px;white-space:nowrap;box-shadow:0 8px 20px -8px rgba(227,6,19,.7)}
.pricing-page .pp-compare{max-width:920px;margin:0 auto 40px;border:1px solid var(--line,rgba(255,255,255,.09));border-radius:14px;background:rgba(255,255,255,.02);overflow:hidden}
.pricing-page .pp-compare summary{padding:16px 20px;cursor:pointer;font-weight:600;font-size:14px;color:#fff;display:flex;justify-content:space-between;align-items:center;list-style:none}
.pricing-page .pp-compare summary::-webkit-details-marker{display:none}
.pricing-page .pp-compare summary:hover{color:var(--accent,#FF2020)}
.pricing-page .pp-compare summary:focus-visible{outline:2px solid var(--accent,#FF2020);outline-offset:-2px}
.pricing-page .pp-compare summary svg{transition:transform .3s}
.pricing-page .pp-compare[open] summary svg{transform:rotate(45deg)}
.pricing-page .pp-compare-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.pricing-page .pp-compare-table{width:100%;border-collapse:collapse;min-width:520px}
.pricing-page .pp-compare-table th,.pricing-page .pp-compare-table td{text-align:left;padding:12px 16px;border-top:1px solid var(--line,rgba(255,255,255,.07));font-size:13px;vertical-align:top}
.pricing-page .pp-compare-table thead th{color:var(--gray-dim,#7a7a7a);font-size:11px;text-transform:uppercase;letter-spacing:1px;border-top:none}
.pricing-page .pp-compare-table tbody th{color:#fff;font-weight:700;white-space:nowrap}
.pricing-page .pp-compare-table td{color:#c8c8c8;line-height:1.5}
.pricing-page .pp-compare-table td span{color:var(--gray,#9a9a9a);font-size:11.5px}
.pricing-page .pp-compare-hot th,.pricing-page .pp-compare-hot td{background:rgba(227,6,19,.06)}
.pricing-page .faq{max-width:760px;margin:0 auto;padding-bottom:20px}
.pricing-page .faq-item summary{padding:17px 20px;min-height:44px}
.pricing-page .faq-item summary:focus-visible{outline:2px solid var(--accent,#FF2020);outline-offset:-2px}
.pricing-page .faq-item summary svg{transition:transform .3s var(--ease,ease)}
.pricing-page .faq-item[open] summary{color:var(--accent,#FF2020)}
.pricing-page .faq-item[open] summary svg{transform:rotate(45deg)}
.pricing-page .faq-item .fa{padding:0 20px 18px;color:#b9b9b9;font-size:13.5px;line-height:1.65;animation:ppFaqIn .28s var(--ease,ease)}
@keyframes ppFaqIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (max-width:1180px){.pricing-page .plans{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){.pricing-page .plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){
  .pricing-page .plans{grid-template-columns:1fr;padding-top:34px}
  .pricing-page .pp-head{padding-top:108px}
  .pricing-page .pp-sub{font-size:14px}
}
/* ── Why upgrade? (pricing) — scoped to .why-upgrade ── */
.why-upgrade{padding:56px 0 8px}
.why-upgrade .pu-sub{max-width:640px;margin:-6px auto 32px;text-align:center;color:var(--gray);font-size:15px;line-height:1.6}
.why-upgrade .pu-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:stretch}
.why-upgrade .pu-card{display:flex;flex-direction:column;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 22px;transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease)}
.why-upgrade .pu-card:hover{transform:translateY(-4px);border-color:rgba(227,6,19,.4);box-shadow:0 20px 50px -24px rgba(227,6,19,.45)}
.why-upgrade .pu-ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;color:var(--red);background:rgba(227,6,19,.10);border:1px solid rgba(227,6,19,.28)}
.why-upgrade .pu-card h3{font-size:16px;font-weight:700;color:#fff;letter-spacing:-.2px;margin:0}
.why-upgrade .pu-card p{font-size:13.5px;line-height:1.6;color:var(--gray);margin:0}
.why-upgrade .pu-banner{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:24px;padding:24px 28px;border-radius:var(--r-lg);border:1px solid rgba(227,6,19,.3);background:linear-gradient(135deg,rgba(227,6,19,.10),rgba(9,9,9,.25) 60%),var(--card);box-shadow:0 18px 50px -30px rgba(227,6,19,.4)}
.why-upgrade .pu-banner-txt{flex:1;min-width:240px}
.why-upgrade .pu-banner h3{font-size:18px;font-weight:800;color:#fff;letter-spacing:-.3px;margin:0 0 6px}
.why-upgrade .pu-banner p{font-size:13.5px;color:var(--gray);line-height:1.55;margin:0}
.why-upgrade .pu-banner-btn{min-height:46px;white-space:nowrap}
@media (max-width:900px){.why-upgrade .pu-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){
  .why-upgrade{padding:44px 0 8px}
  .why-upgrade .pu-grid{grid-template-columns:1fr}
  .why-upgrade .pu-banner{flex-direction:column;align-items:stretch;text-align:center}
  .why-upgrade .pu-banner-btn{width:100%}
}

/* ============================================================
   Sell Motorcycle CTA buttons (hero + header)
   Prominent, accessible marketplace call-to-action.
   ============================================================ */

/* Hero CTA — the primary marketplace action. Built on .btn.btn-red so it
   matches the height/spacing of Shop Accessories, but louder. */
.btn-sell-hero{
  position:relative;
  cursor:pointer;
  box-shadow:0 8px 28px -8px rgba(227,6,19,.55), inset 0 0 0 1px rgba(255,32,32,.4);
}
.btn-sell-hero .btn-sell-arrow{transition:transform .25s var(--ease)}
.btn-sell-hero:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 42px -8px rgba(255,32,32,.72), inset 0 0 0 1px rgba(255,72,72,.6);
}
.btn-sell-hero:hover .btn-sell-arrow{transform:translateX(3px)}
.btn-sell-hero:active{transform:translateY(0) scale(.97)}
.btn-sell-hero:focus-visible{outline:3px solid rgba(255,72,72,.7);outline-offset:3px}

/* Header CTA — cleaner shape, subtle border + glow, never wraps. */
.nav-sell-cta{
  cursor:pointer;
  white-space:nowrap;
  border:1px solid rgba(255,72,72,.45);
  box-shadow:0 6px 20px -8px rgba(227,6,19,.6);
}
.nav-sell-cta svg{flex:0 0 auto}
.nav-sell-cta:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 30px -8px rgba(255,32,32,.72);
}
.nav-sell-cta:active{transform:scale(.97)}
.nav-sell-cta:focus-visible{outline:3px solid rgba(255,72,72,.7);outline-offset:3px}
.nav-sell-cta .nav-sell-short{display:none}

/* Narrow screens: collapse header CTA to "Sell" so it never crowds
   Login / cart / language controls. aria-label keeps it "Sell Motorcycle". */
@media (max-width:560px){
  .nav-sell-cta .nav-sell-full{display:none}
  .nav-sell-cta .nav-sell-short{display:inline}
  .nav-sell-cta{padding:9px 13px}
}

/* Hero CTA centers its contents when the hero buttons stack full-width. */
@media (max-width:640px){
  .btn-sell-hero{justify-content:center}
}

/* Sell form: on mobile, keep the Publish/submit row clear of the fixed
   WhatsApp/Viber contact FAB (bottom-right) so it can never cover it. */
@media (max-width:560px){
  #page-sell .sell-wrap{padding-bottom:140px}
  #page-sell .form-nav{gap:12px}
}

/* ── Homepage partnership network banner ─────────────────────────────── */
.home-partner-banner{
  display:block; position:relative; width:100%; max-width:1450px;
  margin:45px auto 60px; height:clamp(420px,32vw,480px);
  border-radius:22px; overflow:hidden;
  border:1px solid rgba(227,6,19,.35);
  box-shadow:0 34px 80px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(227,6,19,.05);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.home-partner-banner img{ width:100%; height:100%; display:block; object-fit:cover; object-position:center; }
@media (hover:hover){
  .home-partner-banner:hover{ transform:translateY(-3px); border-color:rgba(227,6,19,.65);
    box-shadow:0 40px 90px -40px rgba(0,0,0,.92), 0 0 0 1px rgba(227,6,19,.35), 0 20px 60px -22px rgba(227,6,19,.45); }
}
.home-partner-banner:focus-visible{ outline:2px solid var(--red,#E30613); outline-offset:3px; }
@media (max-width:900px){
  .home-partner-banner{ height:clamp(330px,44vw,380px); margin:36px auto 48px; }
}
@media (max-width:560px){
  .home-partner-banner{ height:auto; margin:28px auto 40px; }
  .home-partner-banner img{ height:auto; object-fit:contain; }
}

/* Static/demo hero stats (120k+/38k+/4.9★) — hidden across the full mobile
   range, not just the compact-hero breakpoint above (which only covers
   <=640px). No layout gap results: display:none removes the box and its
   margin from flow entirely, so content below closes up naturally. */
@media (max-width:768px){
  .hero-stats{display:none}
}