/* Motor — car parts & accessories. Charcoal header and hero, light catalogue, amber accent (dark text on it).
   Shape rule: 8px everywhere, buttons 8px. */
:root{--font:'IBM Plex Sans Arabic',system-ui,sans-serif;--bg:#f4f5f6;--surface:#eceef0;--surface-2:#e0e3e6;--ink:#15181c;--ink-2:#3a4048;--muted:#6b727c;--line:#dfe2e6;--r:8px;--r-sm:8px;--char:#1b1f24;--char-2:#252a31}
h1,h2,h3{font-weight:700}
.btn{border-radius:var(--r)}

/* header */
.m-head{position:sticky;top:0;z-index:50;background:var(--char);color:#eef0f2}
.m-row{display:flex;align-items:center;gap:clamp(10px,2vw,22px);min-height:70px}
.m-logo img{height:42px;width:auto;max-width:160px;object-fit:contain;background:#fff;border-radius:6px;padding:3px}
.wordmark{font-weight:700;font-size:20px}
.m-search{flex:1;max-width:620px}
.m-search i{position:absolute;inset-inline-start:14px;top:50%;transform:translateY(-50%);color:#8b929b}
.m-search input{width:100%;height:46px;border-radius:var(--r);border:1px solid #333a42;background:var(--char-2);color:#fff;padding-inline:42px 14px;font-size:15px}
.m-search input::placeholder{color:#8b929b}
.m-search input:focus{outline:none;border-color:var(--accent)}
.m-acts{display:flex;align-items:center;gap:8px;margin-inline-start:auto}
.m-call{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;color:var(--accent)}
.m-lang{height:38px;min-width:38px;border-radius:var(--r);border:1px solid #333a42;background:transparent;font-weight:600;font-size:13px}
.m-cart{background:var(--accent);color:var(--on-accent);border-radius:var(--r)}
.m-cart:hover{background:var(--accent);filter:brightness(1.06)}
.m-cart .count-dot{background:var(--char);color:#fff}
.m-nav{background:var(--char-2)}
.m-nav-in{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;height:44px;align-items:center}
.m-nav-in::-webkit-scrollbar{display:none}
.m-nav a{flex:none;display:inline-flex;gap:6px;align-items:center;padding:6px 12px;border-radius:6px;font-size:14px;color:#c8cdd3;white-space:nowrap}
.m-nav a:hover,.m-nav a.on{background:#323840;color:#fff}
.m-nav a:first-child{color:var(--accent);font-weight:600}
@media (max-width:860px){.m-row{flex-wrap:wrap;gap:8px;padding-block:8px;min-height:0}.m-search{order:5;flex-basis:100%;max-width:none}.m-call span{display:none}}

/* hero with the part finder */
.m-hero{position:relative;background:var(--char);color:#fff;overflow:hidden;isolation:isolate}
.m-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(135deg,transparent 0 22px,rgb(255 255 255/.025) 22px 24px)}
.m-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.45}
.m-hero-in{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:28px;align-items:center;padding-block:clamp(28px,5vw,64px)}
.m-copy{display:grid;gap:14px}
.m-copy h1{font-size:clamp(30px,4vw,52px);line-height:1.1}
.m-copy p{margin:0;color:#c8cdd3;font-size:16px;max-width:48ch}
.m-finder{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr) auto;gap:8px;background:#fff;padding:8px;border-radius:12px;margin-top:6px}
.m-finder select,.m-finder input{min-height:48px;border:1px solid var(--line);border-radius:var(--r);padding:0 12px;background:#fff;color:var(--ink);font-size:15px;min-width:0}
.m-finder select:focus,.m-finder input:focus{outline:none;border-color:var(--accent)}
.m-finder .btn{min-height:48px}
.m-pic{aspect-ratio:1;background:#fff;border-radius:16px;display:grid;place-items:center;box-shadow:0 30px 60px rgb(0 0 0/.35)}
.m-pic img{width:78%;height:78%;object-fit:contain;mix-blend-mode:multiply}
@media (max-width:860px){.m-hero-in{grid-template-columns:1fr}.m-pic{display:none}.m-finder{grid-template-columns:1fr}}

/* category grid */
.m-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.m-cats a{display:flex;align-items:center;gap:12px;padding:12px;background:#fff;border:1px solid var(--line);border-radius:var(--r);transition:border-color .2s,transform .2s var(--ease)}
.m-cats a:hover{border-color:var(--accent);transform:translateY(-2px)}
.m-cats img,.m-cats i{width:56px;height:56px;flex:none;border-radius:6px;background:var(--surface);object-fit:contain;padding:6px;display:grid;place-items:center;font-size:24px;color:var(--ink-2);mix-blend-mode:multiply}
.m-cats span{display:grid;min-width:0}.m-cats b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.m-cats small{color:var(--muted)}

/* cards */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:8px}
.card .media{border-radius:6px;background:var(--surface)}
.card .media img{padding:8%}
.card .body{padding:10px 2px 2px}
.card .name{font-size:14px;font-weight:500}
.m-stock{font-size:12px;color:var(--ok);display:inline-flex;gap:4px;align-items:center}
.m-pr{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px}
.pr{font-size:17px}
.m-add{flex:none;width:40px;height:40px;border-radius:var(--r);border:0;background:var(--accent);color:var(--on-accent);font-size:18px;display:grid;place-items:center}
.m-add:active{transform:scale(.94)}.m-add.done{background:var(--ok);color:#fff}
.quick{display:none}
.tag{border-radius:6px}
.m-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.m-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.perks{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);margin-top:20px}
.perk i{color:var(--ink)}
.rail-block,.brands,.visit{background:#fff;border-radius:var(--r);padding:16px!important;margin-block:16px}
.brand{border-radius:var(--r);background:var(--surface);border-color:transparent;font-weight:700}

/* footer */
.m-foot{background:var(--char);color:#c8cdd3;margin-top:clamp(30px,5vw,60px)}
.m-foot-in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.6fr) minmax(0,.8fr);gap:32px;padding-block:clamp(32px,5vw,56px)}
.m-foot h3{color:#fff;font-size:15px;margin-bottom:12px}
.m-foot p{margin:8px 0;font-size:14px}.m-foot i{color:var(--accent)}
.m-fl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px}
.m-fl a{font-size:14px;color:#c8cdd3}.m-fl a:hover{color:var(--accent)}
.social{display:flex;gap:8px}
.social a{width:40px;height:40px;border-radius:var(--r);background:var(--char-2);display:grid;place-items:center;color:#fff}
.m-crow{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-block:14px;border-top:1px solid #2c3239;font-size:13px;color:#8b929b}
.m-crow a{color:#8b929b}
@media (max-width:760px){.m-foot-in{grid-template-columns:1fr}}
@media (max-width:560px){.m-cats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.m-cats a{flex-direction:column;align-items:flex-start;gap:8px;padding:10px}.m-cats img,.m-cats i{width:44px;height:44px}.m-cats b{font-size:13px;white-space:normal}}