/* Mak Doctor — same dark + lime look as the original makdoctor.com, rebuilt by hand. */
:root{
  --bg:#0b0b0b; --bg2:#151515; --card:#181818; --card2:#202020; --line:#2a2a2a; --line2:#353535;
  --text:#f4f4f2; --muted:#a3a39e; --faint:#9a9a94;
  --lime:#C8F50A; --lime-2:#b6e000; --on-lime:#111;
  --r:14px; --r-lg:22px;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}
html[lang=ar]{--sans:"Tajawal","Inter",-apple-system,system-ui,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:6px}
.wrap{max-width:1200px;margin:0 auto;padding-inline:20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;inset-inline-start:12px;top:-60px;background:var(--lime);color:var(--on-lime);padding:8px 14px;border-radius:8px;z-index:99;font-weight:600}
.skip:focus{top:12px}
.lime{color:var(--lime)}
.muted{color:var(--muted)}
.num{font-variant-numeric:tabular-nums}
[dir=rtl] .flip{transform:scaleX(-1)}

/* ---------- top strip + header */
.strip{background:#000;border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
.strip .wrap{display:flex;gap:18px;align-items:center;min-height:38px;flex-wrap:wrap}
.strip a:hover{color:var(--text)}
.strip .sp{margin-inline-start:auto;display:flex;gap:16px;align-items:center}
.strip svg{width:14px;height:14px;vertical-align:-2px;margin-inline-end:5px}
@media (max-width:760px){.strip .hide-sm{display:none}}

header.site{position:sticky;top:0;z-index:40;background:rgba(11,11,11,.86);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;gap:20px;height:72px}
.logo{display:flex;align-items:center;gap:9px;color:#fff;flex:none}
.logo svg{height:36px;width:auto}
.wordmark{font-family:"Inter",-apple-system,system-ui,sans-serif;font-weight:600;font-size:21px;letter-spacing:-.025em;white-space:nowrap;direction:ltr}
nav.main{display:flex;gap:4px;margin-inline-start:auto;align-items:center}
nav.main > a, .dd > button{padding:9px 12px;border-radius:10px;font-size:15px;color:#d8d8d4;background:none;border:0;cursor:pointer;display:flex;align-items:center;gap:5px;transition:color .15s,background .15s}
nav.main > a:hover,.dd > button:hover,nav.main > a[aria-current=page]{color:#fff;background:#1c1c1c}
.dd{position:relative}
.dd > button svg{width:12px;height:12px;opacity:.7}
.dd .menu{position:absolute;top:calc(100% + 8px);inset-inline-start:-8px;min-width:250px;background:#151515;border:1px solid var(--line2);border-radius:14px;padding:8px;box-shadow:0 20px 50px rgba(0,0,0,.55);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .16s var(--ease),transform .16s var(--ease),visibility .16s}
.dd:hover .menu,.dd:focus-within .menu,.dd.open .menu{opacity:1;visibility:visible;transform:none}
.dd .menu a{display:block;padding:9px 12px;border-radius:9px;font-size:14.5px;color:#d8d8d4}
.dd .menu a:hover{background:#222;color:#fff}
.dd .menu .all{border-top:1px solid var(--line);margin-top:6px;padding-top:12px;color:var(--lime)}
.hdr-cta{display:flex;gap:10px;align-items:center}
.lang{font-size:14px;padding:8px 12px;border:1px solid var(--line2);border-radius:999px;color:#ddd}
.lang:hover{border-color:#555;color:#fff}
.burger{display:none;background:none;border:1px solid var(--line2);border-radius:10px;width:42px;height:42px;cursor:pointer;align-items:center;justify-content:center}
.burger svg{width:20px;height:20px}
@media (max-width:1080px){
  nav.main{display:none}
  .burger{display:flex}
  .hdr-cta{margin-inline-start:auto}
  .hdr-cta .btn{display:none}
}
.mnav{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.6);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
.mnav.open{opacity:1;visibility:visible}
.mnav .panel{position:absolute;top:0;bottom:0;inset-inline-end:0;width:min(360px,88vw);background:#121212;border-inline-start:1px solid var(--line);padding:20px;overflow:auto;transform:translateX(100%);transition:transform .28s var(--ease)}
[dir=rtl] .mnav .panel{transform:translateX(-100%)}
.mnav.open .panel{transform:none}
.mnav .x{float:inline-end;background:none;border:1px solid var(--line2);border-radius:10px;width:40px;height:40px;cursor:pointer;color:#fff;font-size:20px}
.mnav h4{margin:22px 0 6px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.mnav a{display:block;padding:10px 4px;border-bottom:1px solid #1d1d1d;color:#e6e6e2}
.mnav .btn{margin-top:18px;width:100%;justify-content:center;border:0}

/* ---------- buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:999px;font-weight:600;font-size:15px;border:1px solid transparent;cursor:pointer;transition:transform .15s var(--ease),background .15s,border-color .15s,color .15s;white-space:nowrap;line-height:1.2}
.btn:active{transform:scale(.97)}
.btn svg{width:18px;height:18px;flex:none}
.btn-lime{background:var(--lime);color:var(--on-lime)}
.btn-lime:hover{background:#d6ff2a}
.btn-ghost{border-color:#3a3a3a;color:#fff;background:rgba(255,255,255,.02)}
.btn-ghost:hover{border-color:#6a6a6a;background:rgba(255,255,255,.05)}
.btn-dark{background:#111;color:#fff}
.btn-dark:hover{background:#000}
.btn-sm{padding:8px 14px;font-size:13.5px}
.btn-block{width:100%;justify-content:center}

/* ---------- sections */
section{padding:84px 0}
section.tight{padding:56px 0}
.alt{background:var(--bg2);border-block:1px solid #181818}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--muted);margin-bottom:10px}
html[lang=ar] .eyebrow{letter-spacing:0;text-transform:none;font-size:14px}

h1,h2,h3{line-height:1.15;margin:0 0 14px;letter-spacing:-.02em;font-weight:700}
html[lang=ar] h1,html[lang=ar] h2,html[lang=ar] h3{letter-spacing:0;line-height:1.35}
h1{font-size:clamp(34px,5.4vw,60px)}
h2{font-size:clamp(26px,2.4vw,34px)}
h3{font-size:20px}
.lead{font-size:18px;color:#c9c9c4;max-width:680px}
.sec-head{display:block;margin-bottom:34px}
.sec-head p{margin:10px 0 0;color:var(--muted);max-width:60ch}

/* ---------- hero */
.hero{padding:64px 0 72px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-40% -10% auto auto;width:720px;height:720px;background:radial-gradient(closest-side,rgba(200,245,10,.13),transparent 70%);pointer-events:none}
[dir=rtl] .hero::before{inset:-40% auto auto -10%}
.hero .grid{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center}
.hero h1 em{font-style:normal;color:var(--lime)}
.hero .lead{margin:0 0 28px}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap}
.trust{display:flex;gap:26px;margin-top:36px;flex-wrap:wrap}
.trust div{display:flex;flex-direction:column}
.trust b{font-size:26px;font-weight:700;line-height:1.1}
.trust span{font-size:13.5px;color:var(--muted)}
.stars{color:var(--lime);letter-spacing:1px}
.hero-media{position:relative}
.hero-media img{border-radius:var(--r-lg);aspect-ratio:4/3.4;object-fit:cover;width:100%;border:1px solid var(--line)}
.float{position:absolute;background:rgba(20,20,20,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line2);border-radius:16px;padding:14px 16px;box-shadow:0 20px 40px rgba(0,0,0,.45)}
.float.a{inset-inline-start:-26px;bottom:34px}
.float.b{inset-inline-end:-14px;top:24px}
.float small{display:block;color:var(--muted);font-size:12.5px}
.float b{font-size:20px}
.float .pill{display:inline-block;background:var(--lime);color:var(--on-lime);font-size:11.5px;font-weight:700;border-radius:999px;padding:2px 8px;margin-inline-start:6px;vertical-align:2px}
@media (max-width:900px){
  .hero .grid{grid-template-columns:1fr;gap:40px}
  .float.a{inset-inline-start:10px}
  .float.b{inset-inline-end:10px}
}

/* page hero (inner pages) */
.phero{padding:56px 0 40px;border-bottom:1px solid #181818;background:linear-gradient(180deg,#121212,var(--bg))}
.phero .lead{margin-top:6px}
.crumbs{font-size:13.5px;color:var(--faint);margin-bottom:18px;display:flex;gap:8px;flex-wrap:wrap}
.crumbs a:hover{color:var(--text)}
.phero .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.phero .grid{display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:center}
.phero .grid img{border-radius:var(--r-lg);border:1px solid var(--line);aspect-ratio:4/3;object-fit:cover;width:100%}
@media (max-width:860px){.phero .grid{grid-template-columns:1fr}.phero .grid img{max-height:300px;width:100%}}
.facts{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.fact{background:#171717;border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:14px;color:#ddd}
.fact b{color:var(--lime)}

/* ---------- cards / grids */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:980px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;transition:border-color .2s,transform .2s var(--ease),background .2s;position:relative}
a.card:hover{border-color:#4a4a4a;transform:translateY(-3px);background:#1c1c1c}
.card h3{margin:0 0 8px}
.card p{margin:0;color:var(--muted);font-size:15px}
.card .more{display:inline-flex;align-items:center;gap:6px;margin-top:16px;color:var(--lime);font-weight:600;font-size:14.5px}
.card .more svg{width:16px;height:16px}
.dev{padding:0;overflow:hidden;display:flex;flex-direction:column}
.dev img{aspect-ratio:4/3;object-fit:cover;width:100%;border-bottom:1px solid var(--line);transition:transform .5s var(--ease)}
a.dev:hover img{transform:scale(1.04)}
.dev .body{padding:20px 22px 22px}
.ico{width:46px;height:46px;border-radius:12px;background:#222;border:1px solid var(--line2);display:grid;place-items:center;margin-bottom:16px;color:var(--lime)}
.ico svg{width:22px;height:22px}
.price-tag{position:absolute;top:20px;inset-inline-end:20px;font-size:13px;color:var(--muted);text-align:end;line-height:1.3}
.price-tag b{display:block;color:#fff;font-size:18px}
.rep h3{padding-inline-end:84px}

/* steps */
.steps{counter-reset:s}
.step{counter-increment:s}
.step::before{content:counter(s,decimal-leading-zero);display:block;font-size:13px;font-weight:700;color:var(--on-lime);background:var(--lime);width:max-content;padding:3px 10px;border-radius:999px;margin-bottom:16px}

/* reviews */
.rev{display:flex;flex-direction:column;gap:14px}
.rev q{quotes:none;font-size:15.5px;color:#e4e4df}
.rev .who{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted);margin-top:auto}
.rev .av{width:34px;height:34px;border-radius:50%;background:#2a2a2a;display:grid;place-items:center;font-weight:700;color:var(--lime)}
.gbadge{display:flex;gap:14px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 20px}
.gbadge b{font-size:28px}
.gbadge small{display:block;color:var(--muted)}

/* branches */
.branch h3{display:flex;align-items:center;gap:10px}
.branch .tag{font-size:12px;font-weight:700;background:var(--lime);color:var(--on-lime);padding:2px 9px;border-radius:999px}
.branch dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:16px 0;font-size:15px}
.branch dt{color:var(--faint)}
.branch dd{margin:0}
.branch .acts{display:flex;gap:10px;flex-wrap:wrap}
.hours{list-style:none;padding:0;margin:0}
.hours li{display:flex;justify-content:space-between;gap:12px}

/* FAQ */
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 0;font-weight:600;font-size:17px;display:flex;justify-content:space-between;gap:20px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:24px;font-weight:400;color:var(--lime);flex:none;transition:transform .2s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 20px;color:#c4c4bf;max-width:820px}
.faq-group{margin-bottom:48px}
.faq-group h2{font-size:24px;margin-bottom:6px}
.faq-nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:36px}

/* chips */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:8px 16px;border-radius:999px;border:1px solid var(--line2);background:#151515;color:#ddd;font-size:14px;cursor:pointer;transition:all .15s}
.chip:hover{border-color:#555}
.chip[aria-pressed=true]{background:var(--lime);color:var(--on-lime);border-color:var(--lime);font-weight:600}

/* price finder + table */
.finder{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px}
.search{position:relative}
.search svg{position:absolute;top:50%;inset-inline-start:18px;width:20px;height:20px;transform:translateY(-50%);color:var(--muted)}
.search input{width:100%;background:#0f0f0f;border:1px solid var(--line2);border-radius:14px;padding:16px 18px;padding-inline-start:50px;font-size:16px;outline:none;transition:border-color .15s}
.search input:focus{border-color:var(--lime)}
.finder .row{display:flex;gap:16px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-top:16px}
.count{font-size:14px;color:var(--muted)}
.tbl-wrap{margin-top:20px;border:1px solid var(--line);border-radius:var(--r);overflow:auto;background:#111}
table.prices{width:100%;border-collapse:collapse;min-width:760px;font-size:15px}
table.prices th{position:sticky;top:0;background:#161616;text-align:start;font-weight:600;font-size:13px;color:var(--muted);padding:14px 16px;border-bottom:1px solid var(--line);white-space:nowrap}
table.prices td{padding:14px 16px;border-bottom:1px solid #1d1d1d;vertical-align:middle}
table.prices tr:last-child td{border-bottom:0}
table.prices tbody tr{transition:background .12s}
table.prices tbody tr:hover{background:#171717}
table.prices .m a{font-weight:600}
table.prices .m a:hover{color:var(--lime)}
table.prices .m small{display:block;color:var(--faint);font-size:12.5px;margin-top:2px}
table.prices .p{font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
table.prices .p span{color:var(--faint);font-weight:400;font-size:12px;margin-inline-start:3px}
table.prices td.hl{background:rgba(200,245,10,.06)}
.empty{padding:40px;text-align:center;color:var(--muted)}
.note{display:flex;gap:12px;align-items:flex-start;background:#141414;border:1px solid var(--line);border-inline-start:3px solid var(--lime);border-radius:12px;padding:14px 16px;font-size:14.5px;color:#cfcfca;margin-top:18px}
.note svg{width:18px;height:18px;flex:none;margin-top:3px;color:var(--lime)}
.rules{display:flex;gap:10px 22px;flex-wrap:wrap;font-size:14px;color:#cfcfca;margin-top:16px}
.rules span::before{content:"✓";color:var(--lime);margin-inline-end:7px;font-weight:700}

/* quote wizard */
.quote{background:linear-gradient(160deg,#1b1b1b,#121212);border:1px solid var(--line2);border-radius:var(--r-lg);padding:28px}
.quote .fields{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:760px){.quote .fields{grid-template-columns:1fr}}
label.f{display:flex;flex-direction:column;gap:7px;font-size:13.5px;color:var(--muted);font-weight:500}
.f select,.f input,.f textarea{background:#0e0e0e;border:1px solid var(--line2);border-radius:12px;padding:13px 14px;font-size:16px;color:#fff;outline:none;width:100%;min-height:48px;transition:border-color .15s;appearance:none;-webkit-appearance:none}
.f select{background-image:linear-gradient(45deg,transparent 50%,#888 50%),linear-gradient(135deg,#888 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 15px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-inline-end:36px}
[dir=rtl] .f select{background-position:20px 55%,15px 55%}
.f select:focus,.f input:focus,.f textarea:focus{border-color:var(--lime)}
.f textarea{min-height:110px;resize:vertical}
.result{margin-top:20px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:#0e0e0e;border:1px dashed #3a3a3a;border-radius:14px;padding:18px 20px;min-height:84px}
.result .amt{font-size:34px;font-weight:700;line-height:1}
.result .amt small{font-size:15px;color:var(--muted);font-weight:500;margin-inline-start:6px}
.result .lbl{font-size:13.5px;color:var(--muted)}
.result.ok{border-style:solid;border-color:rgba(200,245,10,.45)}

/* model page */
.pcards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:900px){.pcards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:440px){.pcards{gap:10px}.pcard{padding:12px}.pcard .amt{font-size:22px}}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:8px}
.pcard .lbl{color:var(--muted);font-size:14px;display:flex;align-items:center;gap:8px}
.pcard .lbl svg{width:18px;height:18px;color:var(--lime)}
.pcard .amt{font-size:30px;font-weight:700;line-height:1.1}
.pcard .amt small{font-size:14px;color:var(--muted);font-weight:500}
.pcard .btn{margin-top:auto}
.spec{width:100%;border-collapse:collapse;font-size:15px}
.spec th,.spec td{text-align:start;padding:12px 0;border-bottom:1px solid var(--line);vertical-align:top}
.spec th{color:var(--muted);font-weight:500;width:38%;padding-inline-end:16px}
.anum{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#1f1f1f;border:1px solid var(--line2);border-radius:8px;padding:2px 9px;margin:2px;font-size:14px}

/* content */
.prose{max-width:780px;color:#d0d0cb}
.prose h2{font-size:28px;margin-top:44px;color:#fff}
.prose h3{margin-top:28px;color:#fff}
.prose li{margin:6px 0}
.list-check{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.list-check li{display:flex;gap:12px;align-items:flex-start;color:#d6d6d1}
.list-check li::before{content:"";flex:none;width:20px;height:20px;margin-top:3px;border-radius:50%;background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat}
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:32px}}
.side{position:sticky;top:96px}

/* CTA band */
.band{background:var(--lime);color:var(--on-lime);border-radius:var(--r-lg);padding:44px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;position:relative;overflow:hidden}
.band h2{margin:0 0 6px;color:var(--on-lime)}
.band p{margin:0;font-size:17px;max-width:560px}
.band .ctas{display:flex;gap:10px;flex-wrap:wrap}
.band .btn-ghost{border-color:rgba(0,0,0,.35);color:var(--on-lime);background:transparent}
.band .btn-ghost:hover{background:rgba(0,0,0,.06)}

/* form */
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form .full{grid-column:1/-1}
@media (max-width:620px){.form{grid-template-columns:1fr}}
.seg{display:flex;gap:8px;flex-wrap:wrap}
.seg label{flex:1;min-width:120px}
.seg input{position:absolute;opacity:0}
.seg span{display:block;text-align:center;padding:12px;border:1px solid var(--line2);border-radius:12px;background:#0e0e0e;cursor:pointer;color:#ddd;font-size:14.5px;transition:all .15s}
.seg input:checked + span{border-color:var(--lime);background:rgba(200,245,10,.08);color:#fff}
.seg input:focus-visible + span{outline:2px solid var(--lime);outline-offset:2px}

/* footer */
footer.site{background:#070707;border-top:1px solid var(--line);padding:64px 0 28px;margin-top:0;font-size:14.5px}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
@media (max-width:900px){footer .cols{grid-template-columns:1fr 1fr}}
@media (max-width:520px){footer .cols{grid-template-columns:1fr}}
footer h4{font-size:14px;margin:0 0 14px;color:#fff}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
footer a{color:var(--muted)}
footer a:hover{color:#fff}
footer .about p{color:var(--muted);margin:16px 0}
footer .logo svg{height:32px}
footer .wordmark{font-size:19px}
.social{display:flex;gap:10px}
.social a{width:40px;height:40px;border-radius:10px;border:0;display:grid;place-items:center;color:#fff;transition:transform .15s var(--ease),box-shadow .15s}
.social a:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.35)}
.social svg{width:20px;height:20px}
/* each network on its own brand-colour tile with a white mark (Snapchat: black ghost on yellow, as the real logo) */
.social a[data-net=ig]{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%)}
.social a[data-net=yt]{background:#FF0000}
.social a[data-net=fb]{background:#1877F2}
.social a[data-net=wa]{background:#25D366}
.social a[data-net=tiktok],.social a[data-net=x]{background:#000;border:1px solid #333}
.social a[data-net=snap]{background:#FFFC00;color:#000}
.legal{border-top:1px solid var(--line);margin-top:44px;padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--faint);font-size:13px}

/* mobile action bar */
.mbar{display:none}
@media (max-width:760px){
  .mbar{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:8px;position:fixed;bottom:0;inset-inline:0;z-index:50;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(12,12,12,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line)}
  .mbar a{display:flex;align-items:center;justify-content:center;gap:6px;padding:11px 6px;border-radius:12px;font-size:14px;font-weight:600;border:1px solid var(--line2)}
  .mbar a.go{background:var(--lime);color:var(--on-lime);border-color:var(--lime)}
  .mbar svg{width:17px;height:17px}
  body{padding-bottom:74px}
  section{padding:60px 0}
  .band{padding:30px 24px}
}
.wa-float{position:fixed;bottom:22px;inset-inline-end:22px;z-index:45;width:58px;height:58px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.45);transition:transform .2s var(--ease)}
.wa-float:hover{transform:scale(1.06)}
.wa-float svg{width:30px;height:30px;color:#fff}
@media (max-width:760px){.wa-float{display:none}}

/* reveal */
@media (prefers-reduced-motion:no-preference){
  .rv{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
  .rv.in{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
.grid-1{display:grid;gap:20px}

/* part illustrations (owner's own artwork) */
.pimg{width:100%;aspect-ratio:1/.78;object-fit:cover;border-radius:10px;background:#fff;margin-bottom:6px}
.pcards.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.pcards.three{grid-template-columns:repeat(2,1fr)}}

.pstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
@media (max-width:860px){.pstrip{grid-template-columns:repeat(2,1fr)}}
.ptile{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:10px;transition:border-color .2s,transform .2s var(--ease)}
.ptile:hover{border-color:#4a4a4a;transform:translateY(-2px)}
.ptile.on{border-color:var(--lime)}
.ptile .pimg{margin-bottom:10px}
.ptile div{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:0 4px 2px;flex-wrap:wrap}
.ptile span{font-size:13.5px;color:var(--muted)}
.ptile span b{color:#fff;font-size:16px}
.thp{display:inline-flex;align-items:center;gap:8px}
.thimg{width:30px;height:30px;object-fit:cover;border-radius:6px;background:#fff}
.result .rimg{width:84px;height:84px;object-fit:cover;border-radius:10px;background:#fff;flex:none}
.result .rl{display:flex;gap:16px;align-items:center}
.galgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:860px){.galgrid{grid-template-columns:repeat(2,1fr)}}
.gal{margin:0;position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.gal:hover img{transform:scale(1.04)}
.gal figcaption{position:absolute;inset:auto 0 0 0;padding:28px 14px 12px;background:linear-gradient(transparent,rgba(0,0,0,.78));font-size:14px;font-weight:600}

.grid-dev{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
@media (max-width:620px){.grid-dev{grid-template-columns:1fr 1fr}.grid-dev .dev .body{padding:14px}.grid-dev h3{font-size:16px}}
/* print card */
.pcardprint{background:#fff;color:#111;border-radius:16px;padding:28px;max-width:720px;margin:0 auto;font-size:14px}
.pcardprint .ch{display:flex;gap:18px;align-items:center;border-bottom:2px solid #C8F50A;padding-bottom:16px;margin-bottom:16px}
.pcardprint .ch img{width:150px;height:150px;margin:-30px;flex:none}
.pcardprint .ch div{display:flex;flex-direction:column;gap:2px;margin-inline-start:30px}
.pcardprint .ch b{font-size:22px}
.pcardprint .cbody{display:grid;grid-template-columns:1fr 1fr auto;gap:16px;align-items:start}
.pcardprint .cb{display:flex;flex-direction:column;gap:4px;line-height:1.45}
.pcardprint .cb b{font-size:15px}
.pcardprint .cq{text-align:center;font-size:12px;display:flex;flex-direction:column;align-items:center;gap:6px}
.pcardprint .cq img{width:120px;height:120px}
.pcardprint .cf{margin-top:16px;padding-top:12px;border-top:1px solid #ddd;font-size:12px;color:#444}
@media (max-width:640px){.pcardprint .cbody{grid-template-columns:1fr}.pcardprint .ch{flex-direction:column;align-items:flex-start}}
@media print{
  header.site,.strip,footer.site,.mbar,.wa-float,.phero,.mnav{display:none!important}
  body{background:#fff;color:#000;padding:0}
  section{padding:0}
  .pcardprint{border:1px solid #999;border-radius:8px;page-break-inside:avoid}
}

/* store */
.soon{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:var(--lime);color:#111;border-radius:999px;padding:1px 7px;vertical-align:2px;margin-inline-start:2px}
html[lang=ar] .soon{text-transform:none;letter-spacing:0;font-size:11px}
.storeband{background:linear-gradient(160deg,#1c1c1c,#121212);border:1px solid var(--line2);border-radius:var(--r-lg);padding:36px;display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center}
.storeband p{color:var(--muted);max-width:520px}
.storetiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.storetiles a{display:flex;flex-direction:column;gap:6px;background:#111;border:1px solid var(--line);border-radius:12px;padding:8px;font-size:13px;font-weight:600;text-align:center;transition:border-color .2s,transform .2s var(--ease)}
.storetiles a:hover{border-color:#4a4a4a;transform:translateY(-2px)}
.storetiles .pimg{margin:0;aspect-ratio:1/.8}
@media (max-width:860px){.storeband{grid-template-columns:1fr;padding:26px}}
.storecard .pimg{margin-bottom:14px}
.cardlogo{color:#111;margin-inline-end:6px}.cardlogo svg{height:54px}.cardlogo .wordmark{font-size:26px;color:#111}
.pimg.big{border-radius:0;margin:0;aspect-ratio:1}

/* trust strip + comparison */
.tstrip{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 18px}
.tstrip div{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:#e6e6e2}
.tstrip svg{width:20px;height:20px;color:var(--lime);flex:none}
@media (max-width:980px){.tstrip{grid-template-columns:repeat(2,1fr)}.tstrip div:last-child{grid-column:1/-1}}
table.cmp th[scope=row]{color:#e6e6e2;font-weight:500;text-align:start;position:static;background:none;font-size:15px}
table.cmp td{color:var(--muted)}
table.cmp .us{color:#fff;font-weight:600;background:rgba(200,245,10,.06)}
table.cmp thead th.us{color:var(--lime)}
@media print{
  .noprint,.chips,.search,.count,.ptile,.quote,.band,.note,.pstrip,.finder .row{display:none!important}
  .finder{border:0;padding:0;background:none}
  .tbl-wrap{border:1px solid #999;overflow:visible}
  table.prices{min-width:0;font-size:12px;color:#000}table.prices th{background:#eee;color:#000;position:static}table.prices td{border-color:#ccc}table.prices .p span,table.prices .m small{color:#555}
  table.prices td:last-child,table.prices th:last-child{display:none}
  .phero .ctas{display:none}
}


/* ---- fixes from the 2026-10-06 audit ---------------------------------- */

/* The sticky header is 72px: without this every in-page jump and every
   keyboard focus lands underneath it. */
html{scroll-padding-top:88px}
:target{scroll-margin-top:88px}

/* outline:none on the controls above killed the design's own focus ring.
   Put a visible one back for keyboard users on everything focusable. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--lime);outline-offset:2px;border-radius:6px}
.f select:focus-visible,.f input:focus-visible,.f textarea:focus-visible{outline-offset:1px}

/* Links were told apart by colour alone. Underline them inside running text,
   leaving nav, buttons, cards and chips alone. */
main p a:not(.btn):not(.chip),main li a:not(.btn):not(.chip),.crumbs a,.legal a{
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb,currentColor 45%,transparent)}
main p a:hover,main li a:hover,.crumbs a:hover{text-decoration-color:currentColor}

/* Touch targets: everything a thumb aims at clears 44px. */
.chip,.lang,.burger,.mclose,.soc a,.btn,.btn-sm,.panel button.x{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.panel button.x{min-width:44px}
.soc a{min-width:44px}
.topbar a{display:inline-flex;align-items:center;min-height:44px}

/* Field hints and the booking success panel. */
.hint{display:block;margin-top:6px;font-size:13px;color:var(--muted);font-weight:400;line-height:1.45}
.sent{margin-top:16px;border:1px solid var(--lime);background:rgba(200,245,10,.07);
  border-radius:14px;padding:16px 18px}
.sent-t{margin:0;font-weight:650;color:var(--lime-ink,#dff58a);font-size:16px}
.sent-b{margin:6px 0 0;color:var(--muted);font-size:14.5px;line-height:1.5}

/* A 6-column price table cannot fit a phone. Let it scroll, say so, and keep
   the model column in view while it does. */
@media (max-width:700px){
  .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-height:70vh}
  .tbl-wrap table.prices{min-width:620px}
  table.prices .m{position:sticky;inset-inline-start:0;background:var(--card,#131313);z-index:1}
  .tbl-wrap::after{content:attr(data-scroll-hint);display:block;font-size:12.5px;
    color:var(--muted);padding:8px 2px 0}
}

/* Store tiles stayed three-across on a 360px phone. */
@media (max-width:620px){.grid-3{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.grid-3{grid-template-columns:1fr}}

/* Between tablet and desktop neither booking CTA was on screen. */
@media (min-width:761px) and (max-width:1080px){
  .hdr-cta .btn-lime{display:inline-flex}
}

/* Respect a reduced-motion preference for the reveal animations. */
@media (prefers-reduced-motion:reduce){
  .rv,.rv *{animation:none!important;transition:none!important;opacity:1!important;transform:none!important}
}

/* home: price search (no amounts on the first page) */
.pfind{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.pfind .search{min-width:260px}
.pfind .btn{white-space:nowrap}
@media (max-width:640px){.pfind .search{flex:1 1 100%}.pfind .btn{flex:1;justify-content:center}}


/* ---- home-page redesign, 7 Oct 2026 -------------------------------------
   Information before prices, his own photographs doing the work, and lime
   reserved for the things a customer can press. */

/* Lime belongs on buttons, not on every icon and link on the page. */
.card .ico{color:var(--text)}
.card .more{color:var(--muted)}
a.card:hover .more{color:var(--lime)}

/* How long each repair takes, on the card itself — the question customers ask first. */
.rep-when{display:flex;align-items:center;gap:7px;margin-top:10px;color:var(--muted);font-size:13.5px}
.rep-when svg{width:16px;height:16px;flex:none;opacity:.8}

/* The gallery is a mosaic: portrait frames take the tall slot instead of being
   cropped to a letterbox. No caption is burned over his photographs. */
.galgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.galgrid .gal{margin:0;border-radius:16px;overflow:hidden;background:var(--card);aspect-ratio:4/3}
.galgrid .gal:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.galgrid .gal img{width:100%;height:100%;object-fit:cover;display:block}

/* The closing band was a lime slab shouting at the end of a dark page. */
.band{background:var(--card);color:var(--text);border:1px solid var(--line2)}
.band h2{color:var(--text)}
.band p{color:var(--muted)}

@media (max-width:760px){
  /* Eleven sections at 60px of padding each is 1,320px of nothing to scroll past. */
  section{padding:40px 0}
  section.tight{padding:30px 0}
  /* A gallery and a review wall become swipe rails rather than a long column. */
  .galgrid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scroll-padding-inline:20px;gap:12px;padding-bottom:6px}
  .galgrid .gal{flex:0 0 82%;scroll-snap-align:start;aspect-ratio:4/3}
  .galgrid .gal:first-child{grid-column:auto;grid-row:auto;aspect-ratio:4/3}
  /* Four stacked step cards is a lot of height to say four short things. */
  .steps{display:block}
  .steps .card{background:none;border:0;padding:0 0 0 46px;position:relative;margin-bottom:20px}
  .steps .card::before{position:absolute;inset-inline-start:0;top:0;margin:0}
  .hero{padding:34px 0 40px}
}

/* The card grids were forced to a single column below 420px, which is every
   iPhone 15 and SE — two across reads better and halves the scroll. */
@media (max-width:420px){
  .grid-3,.grid-dev{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* The page must still render if the reveal script never runs. */
.no-js .rv{opacity:1!important;transform:none!important}

/* courier band — big, so visitors outside Riyadh cannot miss it */
.courier{background:linear-gradient(160deg,#1d1d1d,#111);border:2px solid var(--lime);border-radius:var(--r-lg);padding:40px;display:grid;grid-template-columns:1.05fr .95fr;gap:36px 44px;position:relative;overflow:hidden}
.courier::before{content:"";position:absolute;inset:auto -120px -160px auto;width:420px;height:420px;background:radial-gradient(closest-side,rgba(200,245,10,.14),transparent 70%);pointer-events:none}
.courier h2{font-size:clamp(28px,3.6vw,40px)}
.courier .lead{font-size:17px}
.carriers{display:flex;gap:10px;margin:18px 0 22px;flex-wrap:wrap}
.carriers span{display:inline-flex;align-items:center;gap:8px;background:#fff;color:#111;font-weight:800;font-size:18px;letter-spacing:.02em;border-radius:12px;padding:10px 18px}
.carriers svg{width:22px;height:22px;color:#111}
.csteps{display:grid;gap:14px;align-content:center}
.cstep{display:flex;gap:14px;background:rgba(255,255,255,.04);border:1px solid var(--line2);border-radius:14px;padding:14px 16px}
.cstep b{flex:none;width:34px;height:34px;border-radius:50%;background:var(--lime);color:#111;display:grid;place-items:center;font-size:15px}
.cstep h3{font-size:16px;margin:0 0 3px}
.cstep p{margin:0;color:var(--muted);font-size:14px}
.ccities{grid-column:1/-1;border-top:1px solid var(--line2);padding-top:20px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.ccities .chips{display:inline-flex}
.ccities .muted{font-size:13.5px}
@media (max-width:900px){.courier{grid-template-columns:1fr;padding:26px 20px}}

/* ---------------------------------------------------------------- parts store */
.sp-wrap{padding-top:28px}
.sp-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:20px;max-width:520px}
.sp-stats div{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.sp-stats b{display:block;font-size:24px;font-weight:800;letter-spacing:-.02em}
.sp-stats span{font-size:12px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
html[lang=ar] .sp-stats span{text-transform:none;letter-spacing:0}
.sp-search{position:relative;display:block;margin-bottom:14px}
.sp-search svg{position:absolute;top:50%;inset-inline-start:18px;width:20px;height:20px;transform:translateY(-50%);color:var(--muted)}
.sp-search input{width:100%;background:#0f0f0f;border:1px solid var(--line2);border-radius:14px;padding:15px 18px;padding-inline-start:50px;font-size:16px;outline:none;transition:border-color .15s}
.sp-search input:focus{border-color:var(--lime)}
.sp-filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding-block:6px}
.sp-filters.sub{padding-top:2px}
.sp-filters .chip{display:inline-flex;gap:8px;align-items:center}
.sp-filters .chip b{font-weight:600;color:var(--muted);font-size:12.5px}
.sp-filters .chip[aria-pressed=true] b{color:var(--on-lime)}
.sp-filters .sep{width:1px;height:26px;background:var(--line2);margin-inline:4px}
.sp-filters .toggle{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--muted);cursor:pointer;user-select:none}
.sp-filters .toggle input{accent-color:var(--lime);width:16px;height:16px}
.sp-filters .count{margin-inline-start:auto;font-size:13.5px;color:var(--muted)}
.sp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px;padding-block:16px 10px;position:relative}
.sp-empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:60px 20px;border:1px dashed var(--line2);border-radius:var(--r-lg)}
.sp{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;min-width:0;transition:border-color .2s,transform .2s var(--ease)}
.sp:hover{border-color:var(--line2);transform:translateY(-2px)}
.sp .picwrap{position:relative;border-bottom:1px solid var(--line)}
.sp .pic{display:block;position:relative;background:#fff;aspect-ratio:4/3;overflow:hidden}
.sp .pic img{width:100%;height:100%;object-fit:contain;display:block;padding:8%;margin:0;border-radius:0;background:#fff}
.sp .pic .ph{width:100%;height:100%;display:grid;place-items:center;background:linear-gradient(145deg,#1d1d1d,#0f0f0f);color:var(--lime);position:relative}
.sp .pic .ph svg{width:34%;height:34%}
.sp .pic .ph small{position:absolute;bottom:12px;inset-inline-end:12px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#8f8f8a}
.sp .badge{position:absolute;top:12px;inset-inline-start:12px;font-size:12px;font-weight:700;padding:6px 10px;border-radius:999px;background:var(--lime);color:var(--on-lime);z-index:2}
.sp .badge.order{background:#2a2a2a;color:#e6e6e2;border:1px solid #444}
.sp .fb{position:absolute;bottom:10px;inset-inline-start:12px;display:inline-flex;background:rgba(20,20,20,.78);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:3px;z-index:2;backdrop-filter:blur(6px)}
.sp .fb button{border:0;background:transparent;color:#ddd;font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:5px 10px;border-radius:999px;cursor:pointer}
html[lang=ar] .sp .fb button{text-transform:none;letter-spacing:0;font-size:12.5px}
.sp .fb button[aria-pressed=true]{background:var(--lime);color:var(--on-lime)}
.sp .body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:10px;flex:1}
.sp .eyebrow{margin:0;font-size:11.5px}
.sp .eyebrow span+span::before{content:"·";margin-inline:8px;color:var(--faint)}
.sp .model{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1.05;word-break:break-word;text-align:start}
html[dir=rtl] .sp .model{text-align:right}
.sp .model small{font-size:14px;font-weight:600;color:var(--muted);letter-spacing:0;margin-inline-start:6px}
.sp h3{margin:0;font-size:15px;line-height:1.35;font-weight:600}
.sp h3 a{text-decoration:none}
.sp .fits{font-size:13px;color:var(--muted);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sp .fits b{color:var(--text);font-weight:600}
.sp .vars{display:flex;flex-direction:column;gap:7px}
.sp .vars .l{font-size:11.5px;color:var(--faint);letter-spacing:.06em;text-transform:uppercase;font-weight:600;display:flex;justify-content:space-between;gap:10px}
html[lang=ar] .sp .vars .l{text-transform:none;letter-spacing:0}
.sp .vars .l span{color:var(--text);text-transform:none;letter-spacing:0;font-weight:600;text-align:end}
.sp .swatches{display:flex;gap:8px;flex-wrap:wrap}
.sp .swatch{width:28px;height:28px;border-radius:50%;border:2px solid var(--line2);padding:0;cursor:pointer;position:relative;background:var(--sw);box-shadow:inset 0 0 0 2px var(--card)}
.sp .swatch[aria-pressed=true]{border-color:var(--lime)}
.sp .swatch.out::after{content:"";position:absolute;inset:-3px;border-radius:50%;background:linear-gradient(135deg,transparent 46%,var(--text) 47%,var(--text) 53%,transparent 54%);opacity:.6}
.sp .swatch i{position:absolute;bottom:-4px;inset-inline-end:-6px;background:var(--text);color:var(--bg);font-style:normal;font-size:10px;font-weight:700;border-radius:999px;min-width:16px;height:16px;display:grid;place-items:center;padding-inline:4px}
.sp .lay{display:flex;gap:6px;flex-wrap:wrap}
.sp .lay button{font-size:12.5px;padding:6px 10px;border-radius:999px;border:1px solid var(--line2);background:var(--bg);color:var(--text);cursor:pointer}
.sp .lay button[aria-pressed=true]{border-color:var(--lime);background:rgba(200,245,10,.1)}
.sp .lay button.out{color:var(--muted)}
.sp .price{margin-top:auto;padding-top:8px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.sp .price .amt{font-size:24px;font-weight:800;letter-spacing:-.02em}
.sp .price .amt small{font-size:13px;font-weight:600;color:var(--muted);margin-inline-start:5px}
.sp .price .ask{font-size:16px;font-weight:700;color:var(--lime)}
.sp .price .inc{flex-basis:100%;font-size:12.5px;color:var(--muted)}
.sp .acts{display:flex;gap:8px}
.sp .acts .btn{padding:10px 16px;font-size:14px}
.sp .acts .btn-lime{flex:1}
.sp .acts .btn.added{background:#17301f;color:#7fd49a}
@media (max-width:560px){.sp-filters .count{flex-basis:100%;margin:0}.sp .acts .btn-ghost span{display:none}.sp .acts .btn-ghost{padding-inline:12px}}
/* product page */
.sp.detail{display:grid;grid-template-columns:1.15fr 1fr;gap:0;margin-top:18px;transform:none!important}
.sp.detail .picwrap{border-bottom:0;border-inline-end:1px solid var(--line)}
.sp.detail .pic{aspect-ratio:4/3;cursor:default}
.sp.detail .body{padding:26px}
.sp.detail h1{font-size:22px;margin:0;line-height:1.3}
.sp.detail .model{font-size:34px}
.sp.detail .spec{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:14px;margin:4px 0 0}
.sp.detail .spec dt{color:var(--muted);white-space:nowrap}
.sp.detail .spec dd{margin:0;min-width:0;word-break:break-word}
.sp.detail .spec dd ul{margin:0;padding-inline-start:16px}
.sp.detail .note-s{font-size:13px;color:var(--muted);margin:0}
@media (max-width:860px){.sp.detail{grid-template-columns:1fr}.sp.detail .picwrap{border-inline-end:0;border-bottom:1px solid var(--line)}.sp.detail .model{font-size:28px}}
/* home tiles */
.storetiles .ph{display:grid;place-items:center;background:#1a1a1a;color:var(--lime);aspect-ratio:1/.8;border-radius:10px;margin-bottom:6px}
.storetiles .ph svg{width:36%;height:36%}
.storetiles .pimg{background:#fff;object-fit:contain;padding:6%}
/* order list */
.sp-cartbtn{position:fixed;bottom:92px;inset-inline-end:22px;z-index:45;display:inline-flex;align-items:center;gap:8px;background:var(--lime);color:var(--on-lime);border:0;border-radius:999px;padding:12px 18px;font-weight:700;font-size:14px;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.sp-cartbtn svg{width:18px;height:18px}
.sp-cartbtn .n{background:var(--on-lime);color:var(--lime);border-radius:999px;font-size:12px;min-width:20px;height:20px;display:inline-grid;place-items:center;padding-inline:6px}
@media (max-width:760px){.sp-cartbtn{bottom:calc(74px + env(safe-area-inset-bottom,0px));inset-inline-end:14px}}
.sp-scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:48;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
.sp-scrim.open{opacity:1;visibility:visible}
.sp-drawer{position:fixed;top:0;bottom:0;inset-inline-end:0;width:min(440px,92vw);background:#121212;border-inline-start:1px solid var(--line);z-index:50;transform:translateX(100%);transition:transform .28s var(--ease);display:flex;flex-direction:column}
html[dir=rtl] .sp-drawer{transform:translateX(-100%)}
.sp-drawer.open{transform:none}
.sp-drawer header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line)}
.sp-drawer header h2{margin:0;font-size:18px}
.sp-drawer .x{background:none;border:1px solid var(--line2);border-radius:10px;width:38px;height:38px;cursor:pointer;color:#fff;font-size:20px;line-height:1}
.sp-drawer .items{flex:1;overflow:auto;padding:12px 20px;display:flex;flex-direction:column;gap:10px}
.sp-drawer .item{display:grid;grid-template-columns:56px 1fr auto;gap:4px 12px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;align-items:start}
.sp-drawer .item img{width:56px;height:56px;object-fit:contain;background:#fff;border-radius:8px;grid-row:span 2;margin:0}
.sp-drawer .item .t{font-weight:600;font-size:14px;line-height:1.3}
.sp-drawer .item .s{font-size:12.5px;color:var(--muted)}
.sp-drawer .item .p{font-weight:700;text-align:end;white-space:nowrap}
.sp-drawer .item .q{grid-column:2/-1;display:flex;align-items:center;gap:8px;margin-top:4px}
.sp-drawer .item .q button{width:30px;height:30px;border-radius:8px;border:1px solid var(--line2);background:var(--bg);cursor:pointer;color:#fff;font-size:16px}
.sp-drawer .item .q b{min-width:20px;text-align:center}
.sp-drawer .item .q .rm{margin-inline-start:auto;background:none;border:0;color:var(--muted);font-size:13px;cursor:pointer;width:auto;padding:0 4px}
.sp-drawer .sum{border-top:1px solid var(--line);padding:16px 20px 20px;display:flex;flex-direction:column;gap:10px}
.sp-drawer .row{display:flex;justify-content:space-between;font-size:14px;color:var(--muted)}
.sp-drawer .row b{color:#fff;font-size:18px}
.sp-drawer .hint{font-size:12.5px;color:var(--muted);margin:0}
.sp-drawer .sum .btn{width:100%;justify-content:center}
.sp-drawer .fallback{display:none;flex-direction:column;gap:8px}
.sp-drawer .fallback.show{display:flex}
.sp-drawer .fallback textarea{width:100%;background:#0e0e0e;border:1px solid var(--line2);border-radius:10px;padding:10px;font:13px/1.5 var(--sans);color:#ddd;resize:vertical}
.sp-drawer .empty{text-align:center;color:var(--muted);padding:40px 16px;border:1px dashed var(--line2);border-radius:var(--r-lg);font-size:14px}
.sp-toast{position:fixed;bottom:calc(150px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%) translateY(20px);background:var(--card);border:1px solid var(--line2);color:#fff;padding:10px 16px;border-radius:999px;font-size:14px;opacity:0;transition:opacity .2s,transform .2s;z-index:60;pointer-events:none;box-shadow:0 10px 30px rgba(0,0,0,.35);max-width:90vw;text-align:center}
.sp-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------------------------------------------------------------- rating badge, review page, card QRs */
.strip .rating{color:var(--lime);font-weight:600}
.strip .rating svg{color:var(--lime)}
.gpill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line2);background:var(--card);border-radius:999px;padding:7px 14px 7px 10px;font-size:14px;margin-bottom:18px;transition:border-color .2s}
.gpill:hover{border-color:var(--lime)}
.gpill svg{width:16px;height:16px;color:var(--lime);fill:var(--lime)}
.gpill b{font-weight:800}
.gpill span{color:var(--muted)}
.revcard .st{width:18px;height:18px;vertical-align:-3px;color:#3a3a3a;fill:#3a3a3a}
.revcard .st.on{color:var(--lime);fill:var(--lime)}
.revqr{display:flex;gap:16px;align-items:center;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.revqr img{width:120px;height:120px;border-radius:10px;background:#fff;padding:6px;flex:none}
.revqr div{display:flex;flex-direction:column;gap:4px;font-size:14px}
.crev{display:flex;gap:14px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:12px;padding-top:12px;font-size:12px}
.crev b{font-size:13px;margin-inline-end:6px}
.cqr{display:flex;flex-direction:column;align-items:center;gap:2px}
.cqr img{width:84px;height:84px;background:#fff;padding:3px;border-radius:6px}
@media print{.crev{border-top-color:#999}.cqr img{width:70px;height:70px}}
.fact svg{width:15px;height:15px;vertical-align:-3px;color:var(--lime);fill:var(--lime);margin-inline-end:4px}

/* ===== Light theme (preview) — switched on with ?theme=light, remembered per browser; default stays dark ===== */
html.light{--bg:#ffffff;--bg2:#f5f5f2;--card:#ffffff;--card2:#f3f3ef;--line:#e4e4df;--line2:#d2d2cb;--text:#141414;--muted:#5d5d58;--faint:#7a7a74;--lime:#0a66e6;--lime-2:#0858c4;--on-lime:#fff;--accent-ink:#0a66e6;color-scheme:light}
html.light body{background:#fff;color:#141414}
html.light .strip{background:#f5f5f2;border-color:#e4e4df;color:#5d5d58}
html.light .strip a:hover{color:#111}
html.light header.site{background:rgba(255,255,255,.9);border-color:#e4e4df}
html.light .logo,html.light .wordmark,html.light .mnav .logo{color:#111}
html.light nav.main > a,html.light .dd > button{color:#3a3a36}
html.light nav.main > a:hover,html.light .dd > button:hover,html.light nav.main > a[aria-current=page]{color:#111;background:#f0f0ec}
html.light .dd .menu{background:#fff;border-color:#e4e4df;box-shadow:0 20px 50px rgba(0,0,0,.12)}
html.light .dd .menu a{color:#333}html.light .dd .menu a:hover{background:#f2f2ee;color:#111}
html.light .lang{color:#333;border-color:#d2d2cb;background:#fff}
html.light .burger{border-color:#d2d2cb;color:#111}
html.light .mnav .panel{background:#fff;border-color:#e4e4df}html.light .mnav a{color:#222;border-color:#eee}html.light .mnav .x{color:#111;border-color:#d2d2cb}
html.light .btn-ghost{border-color:#cfcfc8;color:#111;background:#fff}html.light .btn-ghost:hover{border-color:#999;background:#f6f6f3}
html.light .btn-dark{background:#111;color:#fff}
html.light .alt{background:#f7f7f4;border-color:#ececе7}
html.light .hero::before{background:radial-gradient(closest-side,rgba(10,102,230,.35),transparent 70%)}
html.light .lead,html.light .card p,html.light .sec-head p{color:#4a4a46}
html.light .float{background:rgba(255,255,255,.92);border-color:#e4e4df;color:#111;box-shadow:0 20px 40px rgba(0,0,0,.12)}
html.light .card{background:#fff;border-color:#e4e4df}html.light a.card:hover{border-color:#bdbdb6;background:#fafaf8}
html.light .ico{background:#f3f3ef;border-color:#e4e4df;color:#0a66e6}
html.light .price-tag b,html.light .trust b,html.light h1,html.light h2,html.light h3{color:#111}
html.light .hero h1 em,html.light .lime,html.light .eyebrow,html.light .card .more,html.light .faq summary::after{color:#0a66e6}
html.light .eyebrow::before{background:#0a66e6}
html.light .tstrip{background:#fff;border-color:#e4e4df}html.light .tstrip div{color:#222}html.light .tstrip svg{color:#0a66e6}
html.light .finder,html.light .quote,html.light .storeband,html.light .courier{background:#fff;border-color:#e4e4df}
html.light .courier{border-color:#0a66e6;background:#fafaf5}html.light .courier .lead{color:#4a4a46}html.light .courier .carriers span{background:#111;color:#fff}html.light .courier .carriers svg{color:#fff}
html.light .cstep{background:#fff;border-color:#e4e4df}html.light .cstep p{color:#5d5d58}
html.light .search input,html.light .f select,html.light .f input,html.light .f textarea{background:#fff;border-color:#d2d2cb;color:#111}
html.light .chip{background:#fff;border-color:#d2d2cb;color:#333}
html.light .tbl-wrap{background:#fff;border-color:#e4e4df}html.light table.prices th{background:#f5f5f2;color:#5d5d58;border-color:#e4e4df}html.light table.prices td{border-color:#eeeeea}html.light table.prices tbody tr:hover{background:#f7f7f4}html.light table.prices td.hl{background:rgba(10,102,230,.18)}
html.light .result{background:#fafaf8;border-color:#d2d2cb}
html.light .ptile{background:#fff;border-color:#e4e4df}html.light .ptile span b{color:#111}
html.light .pcard{background:#fff;border-color:#e4e4df}
html.light .note{background:#fafaf5;border-color:#e4e4df;color:#333}
html.light .list-check li{color:#333}
html.light .spec th{color:#5d5d58}html.light .spec th,html.light .spec td{border-color:#e4e4df}html.light .anum{background:#f3f3ef;border-color:#d2d2cb}
html.light .gbadge{background:#fff;border-color:#e4e4df}
html.light .rev q{color:#222}html.light .rev .av{background:#f0f0ec;color:#0a66e6}
html.light .branch dt{color:#7a7a74}html.light .fact{background:#f5f5f2;border-color:#e4e4df;color:#222}html.light .fact b{color:#0a66e6}
html.light .faq details{border-color:#e4e4df}html.light .faq .a{color:#333}
html.light .phero{background:linear-gradient(180deg,#f7f7f4,#fff);border-color:#ececе7}html.light .crumbs{color:#7a7a74}
html.light .step::before{background:#0a66e6}
html.light .storetiles a{background:#fff;border-color:#e4e4df;color:#111}html.light .storeband p{color:#4a4a46}
html.light .seg span{background:#fff;border-color:#d2d2cb;color:#333}
html.light .mbar{background:rgba(255,255,255,.94);border-color:#e4e4df}html.light .mbar a{border-color:#d2d2cb;color:#111}
html.light footer.site{background:#f5f5f2;border-color:#e4e4df}html.light footer h4{color:#111}html.light footer a{color:#5d5d58}html.light footer a:hover{color:#111}html.light footer .about p{color:#5d5d58}html.light .legal{border-color:#e4e4df;color:#7a7a74}
html.light .galgrid .gal{border-color:#e4e4df}
html.light .band{background:#0a66e6;color:#111}
html.light table.cmp th[scope=row]{color:#222}html.light table.cmp td{color:#5d5d58}html.light table.cmp .us{color:#111;background:rgba(10,102,230,.18)}html.light table.cmp thead th.us{color:#0a66e6}
html.light .btn-lime{background:#0a66e6;color:#fff}html.light .btn-lime:hover{background:#0858c4}
html.light .band{background:#0a66e6;color:#fff}html.light .band h2,html.light .band p{color:#fff}html.light .band .btn-dark{background:#fff;color:#0a66e6}html.light .band .btn-ghost{border-color:rgba(255,255,255,.6);color:#fff;background:transparent}
html.light .step::before,html.light .stock,html.light .soon,html.light .float .pill,html.light .branch .tag,html.light .tag{background:#0a66e6;color:#fff}
html.light .chip[aria-pressed=true]{background:#0a66e6;border-color:#0a66e6;color:#fff}
html.light .ptile.on{border-color:#0a66e6}html.light .result.ok{border-color:rgba(10,102,230,.5)}
html.light .courier .carriers span{background:#0a66e6;color:#fff}
html.light .stars{color:#f5a623}
html.light .mbar a.go{background:#0a66e6;color:#fff;border-color:#0a66e6}
html.light .cstep b{background:#0a66e6;color:#fff}
html.light .hero::before{background:radial-gradient(closest-side,rgba(10,102,230,.14),transparent 70%)}
html.light .courier{border-color:#0a66e6;background:#f6f9ff}
html.light .search input:focus,html.light .f select:focus,html.light .f input:focus,html.light .f textarea:focus{border-color:#0a66e6}

/* ===== share a part ===== */
.sp .acts .btn.sh{flex:none}
.sp.detail .acts .btn.sh{padding-inline:18px}
.sh-scrim{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.6);opacity:0;transition:opacity .16s}
.sh-scrim.open{opacity:1}
.sh-sheet{position:fixed;z-index:71;left:50%;top:50%;width:min(440px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;transform:translate(-50%,-46%);opacity:0;transition:opacity .16s,transform .16s var(--ease);background:var(--card,#181818);border:1px solid var(--line2);border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:12px;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.sh-sheet.open{opacity:1;transform:translate(-50%,-50%)}
.sh-sheet[hidden],.sh-scrim[hidden]{display:none}
.sh-sheet header{display:flex;justify-content:space-between;align-items:center}
.sh-sheet h2{font-size:20px;margin:0}
.sh-sheet .x{background:none;border:1px solid var(--line2);border-radius:10px;width:36px;height:36px;color:inherit;font-size:20px;cursor:pointer}
.sh-part{margin:0;font-weight:600}
.sh-sub{margin:-6px 0 0;color:var(--muted);font-size:13.5px}
.sh-row{display:flex;align-items:center;gap:14px;background:#25D366;color:#fff;border-radius:14px;padding:14px 16px;text-decoration:none}
.sh-row svg{width:28px;height:28px;flex:none}
.sh-row b{display:block;font-size:16px}.sh-row small{display:block;font-size:12.5px;opacity:.92}
.sh-num{display:grid;gap:6px;background:var(--bg2,#151515);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.sh-num label{font-size:13px;color:var(--muted)}
.sh-numrow{display:flex;gap:8px}
.sh-numrow input{flex:1;min-width:0;background:var(--bg,#0b0b0b);border:1px solid var(--line2);border-radius:12px;padding:11px 12px;font-size:16px;color:inherit}
.sh-numrow input:focus{outline:2px solid var(--lime);outline-offset:1px}
.sh-numrow .btn{padding:10px 16px}
.sh-bad{margin:2px 0 0;color:#ff7b72;font-size:13px}
.sh-link{background:var(--bg2,#151515);border:1px solid var(--line);border-radius:12px;padding:10px 12px;overflow:hidden}
.sh-link code{display:block;font-size:12.5px;color:var(--muted);overflow-wrap:anywhere;white-space:normal}
.sh-more{display:flex;gap:8px;flex-wrap:wrap}
.sh-more .btn{flex:1;justify-content:center;padding:10px 14px;font-size:14px}
@media (max-width:560px){.sh-sheet{top:auto;bottom:0;left:0;width:100%;max-height:92vh;transform:translateY(12px);border-radius:18px 18px 0 0;padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}.sh-sheet.open{transform:none}}
html.light .sh-sheet{background:#fff;border-color:#e4e4df;box-shadow:0 30px 80px rgba(0,0,0,.2)}html.light .sh-num,html.light .sh-link{background:#f7f7f4;border-color:#e4e4df}html.light .sh-numrow input{background:#fff;border-color:#d2d2cb;color:#111}html.light .sh-sheet .x{border-color:#d2d2cb;color:#111}html.light .sh-numrow .btn-lime{background:#0a66e6;color:#fff}
/* share button: icon only on the grid cards, full label on the part's own page */
.sp:not(.detail) .acts .btn.sh span{display:none}
.sp:not(.detail) .acts .btn.sh{padding-inline:12px}
.sp .acts{flex-wrap:wrap}