/* ═══════════════════════════════════════════════════════════
   الكتالوج — صفحات القطع + قسم «القطع المتوفرة» بالصفحة الرئيسية
   (يشترك بالألوان والخطوط مع style.css)
   ═══════════════════════════════════════════════════════════ */
:root{
  --ink:#08090B; --ink-2:#0D0F12; --surface:#111419; --surface-2:#161A20;
  --line:rgba(243,238,231,.10); --line-2:rgba(243,238,231,.18);
  --cream:#F3EEE7; --muted:#9BA0A8; --muted-2:#6E747D;
  --red:#C9383E; --red-deep:#9F292B; --red-glow:rgba(201,56,62,.30); --green:#3DBB6A;
  --d:'Readex Pro','IBM Plex Sans Arabic',system-ui,sans-serif;
  --b:'IBM Plex Sans Arabic','Readex Pro',system-ui,sans-serif;
  --pad:clamp(18px,5vw,76px); --wrap:1280px;
}

/* ───────── بطاقة القطعة (مشتركة) ───────── */
.pgrid,.ct__grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:clamp(10px,1.5vw,18px);
}
/* صفحات الفئات تعرض مئات البطاقات — تخطي رسم ما هو خارج الشاشة لتسريع أول رسم/تمرير */
.pgrid .pc{ content-visibility:auto; contain-intrinsic-size:auto 300px auto 340px; }
.pc{
  display:flex; flex-direction:column; border-radius:16px; overflow:hidden;
  background:linear-gradient(180deg,rgba(243,238,231,.045),rgba(243,238,231,.014));
  border:1px solid var(--line); color:var(--cream); text-decoration:none; position:relative;
  transition:transform .5s cubic-bezier(.16,1,.3,1), border-color .35s, box-shadow .5s;
}
.pc:hover{ transform:translateY(-5px); border-color:var(--line-2); box-shadow:0 30px 60px -30px rgba(0,0,0,.8); }
.pc__img{ margin:0; aspect-ratio:4/3; background:#0b0d11; overflow:hidden; border-bottom:1px solid var(--line); }
.pc__img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s cubic-bezier(.16,1,.3,1); filter:saturate(.95); }
.pc:hover .pc__img img{ transform:scale(1.05); }
.pc__body{ padding:12px 14px 14px; display:flex; flex-direction:column; gap:4px; flex:1; }
.pc__tag{ font-family:var(--d); font-size:.68rem; letter-spacing:.08em; color:var(--red); text-transform:uppercase; }
.pc__name{ font-family:var(--b); font-size:.98rem; font-weight:600; line-height:1.45; margin:0; color:var(--cream); }
.pc__en{ font-family:var(--d); font-size:.74rem; color:var(--muted); margin:0; text-align:left; line-height:1.4; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pc__pn{ font-family:ui-monospace,Consolas,monospace; font-size:.76rem; color:var(--muted); background:rgba(243,238,231,.05); border:1px solid var(--line); border-radius:6px; padding:2px 7px; align-self:flex-start; direction:ltr; }
.pc__av{ margin-top:auto; padding-top:6px; font-size:.78rem; color:var(--green); font-weight:500; }
.pc--out .pc__av{ color:var(--muted-2); }
.pc--out .pc__img img{ filter:grayscale(.5) saturate(.7); opacity:.75; }

/* ───────── بحث ───────── */
.csearch,.ct__search{
  display:flex; gap:8px; max-width:760px; margin-top:1.4rem;
  background:rgba(243,238,231,.05); border:1px solid var(--line-2); border-radius:999px; padding:6px 6px 6px 20px;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.csearch:focus-within,.ct__search:focus-within{ border-color:var(--red); box-shadow:0 0 0 4px var(--red-glow); }
.csearch input,.ct__search input{
  flex:1; min-width:0; background:transparent; border:0; outline:0; color:var(--cream);
  font-family:var(--b); font-size:1rem; padding:8px 0;
}
.csearch input::placeholder,.ct__search input::placeholder{ color:var(--muted-2); }
.csearch input::-webkit-search-cancel-button{ -webkit-appearance:none; }
.csearch .btn,.ct__search .btn{ --bh:44px; }

/* ───────── chips ───────── */
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:1.2rem; }
.chip{
  display:inline-flex; align-items:center; gap:.5em; border-radius:999px; padding:.45em 1em;
  border:1px solid var(--line-2); background:rgba(243,238,231,.04); color:var(--cream);
  font-family:var(--b); font-size:.86rem; cursor:pointer; transition:background .3s,border-color .3s,color .3s; text-decoration:none;
}
.chip b{ font-weight:500; color:var(--muted); font-size:.78em; font-variant-numeric:tabular-nums; }
.chip:hover{ border-color:var(--cream); }
.chip.on{ background:var(--red); border-color:var(--red); color:#fff; }
.chip.on b{ color:rgba(255,255,255,.85); }

/* ───────── قسم «القطع المتوفرة» بالصفحة الرئيسية ───────── */
.ct{ padding-block:clamp(80px,13vh,150px); background:linear-gradient(180deg,var(--ink) 0%,#0A0C10 100%); border-top:1px solid var(--line); }
.ct__makes{ display:flex; flex-wrap:wrap; gap:10px; margin:1.6rem 0 1.4rem; }
.ct__mk{
  display:flex; flex-direction:column; gap:2px; min-width:120px; padding:12px 16px; border-radius:14px;
  border:1px solid var(--line); background:rgba(243,238,231,.03); text-decoration:none; color:var(--cream);
  transition:border-color .3s, background .3s, transform .4s cubic-bezier(.16,1,.3,1);
}
.ct__mk:hover{ border-color:var(--red); background:rgba(201,56,62,.08); transform:translateY(-3px); }
.ct__mk b{ font-family:var(--d); font-weight:600; font-size:1rem; letter-spacing:.04em; }
.ct__mk span{ font-size:.76rem; color:var(--muted); }
.ct__cats{ margin-top:1.4rem; display:flex; flex-wrap:wrap; gap:8px; }
.ct__more{ margin-top:2rem; text-align:center; }

/* ───────── صفحات الكتالوج ───────── */
body.catalog{ margin:0; background:var(--ink); color:var(--cream); font-family:var(--b); line-height:1.75; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
body.catalog *,body.catalog *::before,body.catalog *::after{ box-sizing:border-box; }
body.catalog img{ max-width:100%; display:block; }
body.catalog a{ color:inherit; text-decoration:none; }
body.catalog h1,body.catalog h2,body.catalog h3{ font-family:var(--d); font-weight:600; line-height:1.15; margin:0; letter-spacing:-.01em; }
body.catalog p{ margin:0; }
body.catalog ol,body.catalog ul{ margin:0; padding:0; list-style:none; }
body.catalog .wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
body.catalog .btn{
  --bh:46px; display:inline-flex; align-items:center; justify-content:center; gap:.5em; height:var(--bh); padding-inline:1.35em; border-radius:999px;
  font-family:var(--d); font-size:.92rem; font-weight:500; border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform .45s cubic-bezier(.16,1,.3,1), background .3s, border-color .3s, box-shadow .45s, color .3s;
}
body.catalog .btn--lg{ --bh:56px; font-size:1.02rem; padding-inline:1.9em; }
body.catalog .btn--red{ background:var(--red); color:#fff; box-shadow:0 10px 34px -12px var(--red-glow); }
body.catalog .btn--red:hover{ transform:translateY(-3px); }
body.catalog .btn--glass{ background:rgba(243,238,231,.06); color:var(--cream); border-color:var(--line-2); backdrop-filter:blur(14px); }
body.catalog .btn--glass:hover{ background:rgba(243,238,231,.13); transform:translateY(-3px); }
body.catalog .btn--line{ border-color:var(--line-2); color:var(--cream); font-variant-numeric:tabular-nums; }
body.catalog .btn--line:hover{ border-color:var(--red); background:var(--red); color:#fff; }
body.catalog .eyebrow{ display:inline-flex; align-items:center; gap:.65em; font-family:var(--d); font-size:.76rem; letter-spacing:.14em; color:var(--muted); text-transform:uppercase; margin:0 0 1rem; }
body.catalog .tick{ width:7px; height:7px; border-radius:50%; background:var(--red); box-shadow:0 0 0 4px var(--red-glow); flex:none; }
body.catalog .stitle{ font-family:var(--d); font-weight:600; font-size:clamp(1.7rem,4.2vw,3rem); letter-spacing:-.025em; margin-bottom:clamp(20px,3vh,32px); }
body.catalog .stitle em,body.catalog .ctitle em{ font-style:normal; color:var(--red); }
body.catalog .stitle--sm{ font-size:clamp(1.3rem,3vw,2rem); margin-top:clamp(40px,7vh,72px); }

/* nav */
.cnav{ position:sticky; top:0; z-index:700; background:rgba(8,9,11,.8); backdrop-filter:blur(20px) saturate(1.3); -webkit-backdrop-filter:blur(20px) saturate(1.3); border-bottom:1px solid var(--line); }
.cnav__in{ display:flex; align-items:center; gap:clamp(14px,3vw,40px); padding-block:12px; }
.cnav .brand{ display:inline-flex; align-items:center; gap:.7rem; flex:none; }
.cnav .brand__logo,.cfoot .brand__logo{ width:46px; height:auto; filter:drop-shadow(0 4px 14px rgba(0,0,0,.5)); }
.brand__word{ font-family:var(--d); font-size:1rem; font-weight:600; line-height:1.15; }
.brand__word em{ display:block; font-style:normal; font-size:.66em; font-weight:300; color:var(--muted); letter-spacing:.04em; margin-top:.15em; }
.cnav__links{ display:flex; gap:clamp(14px,2vw,30px); margin-inline-start:auto; }
.cnav__links a{ font-size:.9rem; color:var(--muted); transition:color .3s; }
.cnav__links a:hover{ color:var(--cream); }
.cnav__right{ display:flex; align-items:center; gap:12px; }
.cnav__burger{ display:none; width:42px; height:42px; border:1px solid var(--line-2); border-radius:50%; background:transparent; position:relative; cursor:pointer; }
.cnav__burger span{ position:absolute; inset-inline:12px; height:1.5px; background:var(--cream); transition:transform .4s; }
.cnav__burger span:nth-child(1){ top:17px; } .cnav__burger span:nth-child(2){ top:24px; }
.cnav__burger.open span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); } .cnav__burger.open span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }
.cmenu{ display:none; flex-direction:column; border-top:1px solid var(--line); padding:8px var(--pad) 16px; }
.cmenu.open{ display:flex; }
.cmenu a{ padding:12px 0; border-bottom:1px solid var(--line); font-family:var(--d); font-size:1.1rem; }

/* hero */
.chero{ padding:clamp(40px,8vh,90px) 0 clamp(30px,5vh,50px); background:radial-gradient(80% 60% at 80% 0%, rgba(201,56,62,.12), transparent 60%); }
.chero--sm{ padding-top:clamp(26px,5vh,50px); }
.ctitle{ font-size:clamp(2rem,6vw,4.4rem); letter-spacing:-.03em; }
.csub{ margin-top:1rem; color:var(--muted); max-width:60ch; font-size:1rem; }
.crumbs{ margin-bottom:1.2rem; font-size:.82rem; color:var(--muted-2); }
.crumbs ol{ display:flex; flex-wrap:wrap; gap:.4em; }
.crumbs li+li::before{ content:'‹'; margin-inline-end:.4em; color:var(--muted-2); }
.crumbs a:hover{ color:var(--cream); }
.crumbs span{ color:var(--muted); }
.csec{ padding-block:clamp(30px,5vh,56px); }
.csec+.csec{ border-top:1px solid var(--line); }

/* makes / categories */
.mkgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:12px; }
.mkgrid--models{ margin-top:1.4rem; }
.mk{
  display:flex; flex-direction:column; gap:2px; padding:18px 18px 16px; border-radius:16px; border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(243,238,231,.045),rgba(243,238,231,.014));
  transition:transform .5s cubic-bezier(.16,1,.3,1), border-color .35s, background .35s;
}
.mk:hover{ transform:translateY(-4px); border-color:var(--red); background:rgba(201,56,62,.07); }
.mk b{ font-family:var(--d); font-size:1.15rem; font-weight:600; letter-spacing:.03em; }
.mk span{ font-size:.8rem; color:var(--muted); }
.mk em{ font-style:normal; font-size:.76rem; color:var(--red); margin-top:6px; }
.mk small{ font-size:.72rem; color:var(--muted-2); margin-top:4px; line-height:1.5; }
.mk--sm{ padding:12px 14px; }
.mk--sm b{ font-size:.98rem; }
.ckgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; }
.ck{ display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-radius:12px; border:1px solid var(--line); background:rgba(243,238,231,.03); transition:border-color .3s, background .3s; }
.ck:hover{ border-color:var(--red); background:rgba(201,56,62,.07); }
.ck b{ font-weight:500; font-size:.95rem; }
.ck em{ font-style:normal; color:var(--muted); font-size:.8rem; font-variant-numeric:tabular-nums; }

/* live results */
.cres{ margin-top:1.6rem; }
.cres__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; color:var(--muted); font-size:.9rem; }
.cres__none{ text-align:center; padding:40px 20px; border:1px dashed var(--line-2); border-radius:16px; color:var(--muted); }
.cres__none p{ margin-bottom:14px; }
.pgrid .pc__hl{ background:rgba(201,56,62,.25); color:#fff; border-radius:3px; padding:0 2px; }

/* product page */
.pdp{ padding:clamp(20px,4vh,40px) 0 clamp(50px,8vh,90px); }
.pdp__grid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(22px,4vw,56px); align-items:start; }
.pdp__img{ margin:0; border-radius:20px; overflow:hidden; background:#0b0d11; border:1px solid var(--line); aspect-ratio:4/3; box-shadow:0 40px 90px -40px rgba(0,0,0,.9); }
.pdp__img img{ width:100%; height:100%; object-fit:contain; cursor:zoom-in; }
.pdp__thumbs{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.pdp__th{ width:72px; height:56px; border-radius:10px; overflow:hidden; border:1px solid var(--line); background:#0b0d11; padding:0; cursor:pointer; opacity:.7; }
.pdp__th.on,.pdp__th:hover{ opacity:1; border-color:var(--red); }
.pdp__th img{ width:100%; height:100%; object-fit:cover; }
.pdp__title{ font-size:clamp(1.5rem,3.6vw,2.5rem); letter-spacing:-.02em; }
.pdp__en{ font-family:var(--d); color:var(--muted); margin-top:.4rem; text-align:left; }
.pdp__av{ margin-top:1rem; font-weight:600; font-size:1rem; }
.pdp__av.in{ color:var(--green); } .pdp__av.out{ color:var(--muted); }
.pdp__tbl{ width:100%; border-collapse:collapse; margin-top:1.2rem; font-size:.92rem; }
.pdp__tbl th,.pdp__tbl td{ padding:.6em .2em; border-bottom:1px solid var(--line); vertical-align:top; text-align:right; }
.pdp__tbl th{ color:var(--muted); font-weight:400; width:38%; }
.pdp__tbl td[dir=ltr]{ text-align:left; font-family:ui-monospace,Consolas,monospace; font-size:.9rem; }
.pdp__ctas{ display:flex; gap:10px; flex-wrap:wrap; margin-top:1.6rem; }
.pdp__note{ margin-top:1rem; font-size:.82rem; color:var(--muted-2); line-height:1.7; }

/* CTA + footer + action bar + lightbox */
.ccta{ border-top:1px solid var(--line); padding-block:clamp(60px,10vh,110px); text-align:center; background:radial-gradient(60% 80% at 50% 100%, rgba(201,56,62,.14), transparent 70%); }
.ccta h2{ font-size:clamp(1.6rem,4.5vw,3rem); letter-spacing:-.025em; }
.ccta p{ color:var(--muted); margin-top:.8rem; }
.ccta__btns{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:1.8rem; }
.cfoot{ border-top:1px solid var(--line); padding-block:clamp(34px,6vh,60px); }
.cfoot__in{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.cfoot .brand{ display:inline-flex; align-items:center; gap:.7rem; }
.cfoot__nav{ display:flex; gap:clamp(12px,2vw,24px); flex-wrap:wrap; margin-inline-start:auto; }
.cfoot__nav a{ color:var(--muted); font-size:.88rem; } .cfoot__nav a:hover{ color:var(--cream); }
.cfoot__fine{ width:100%; color:var(--muted-2); font-size:.8rem; padding-top:18px; border-top:1px solid var(--line); }
body.catalog .abar{ position:fixed; z-index:680; inset-inline:10px; bottom:calc(10px + env(safe-area-inset-bottom)); display:none; gap:10px; }
body.catalog .abar__b{ flex:1; height:52px; display:grid; place-items:center; border-radius:14px; font-family:var(--d); font-size:1rem; font-weight:500; }
body.catalog .abar__b--call{ background:var(--red); color:#fff; }
body.catalog .abar__b--wa{ background:rgba(8,9,11,.8); color:var(--cream); border:1px solid var(--line-2); backdrop-filter:blur(18px); }
body.catalog .lightbox{ position:fixed; inset:0; z-index:950; background:rgba(5,6,10,.96); display:grid; place-items:center; padding:clamp(20px,5vw,70px); opacity:0; pointer-events:none; transition:opacity .4s; }
body.catalog .lightbox.open{ opacity:1; pointer-events:auto; }
body.catalog .lightbox figure{ margin:0; max-width:min(1100px,100%); }
body.catalog .lightbox img{ width:100%; height:auto; max-height:80vh; object-fit:contain; border-radius:12px; }
body.catalog .lightbox figcaption{ margin-top:1rem; text-align:center; color:var(--muted); font-family:var(--d); font-size:.9rem; }
body.catalog .lightbox__x{ position:absolute; top:22px; inset-inline-end:22px; width:46px; height:46px; border-radius:50%; border:1px solid var(--line-2); background:transparent; color:var(--cream); font-size:1.05rem; cursor:pointer; }

/* توست نسخ رقم القطعة — ثابت أسفل الوسط، فوق شريط إجراءات الجوال */
.ctoast{
  position:fixed; z-index:990; left:50%; bottom:calc(24px + env(safe-area-inset-bottom));
  transform:translate(-50%,10px); opacity:0; pointer-events:none;
  background:var(--surface-2); border:1px solid var(--line-2); color:var(--cream);
  font-family:var(--d); font-size:.88rem; padding:.7em 1.3em; border-radius:999px;
  box-shadow:0 20px 44px -18px rgba(0,0,0,.8); white-space:nowrap;
}
.ctoast.in{ animation:ctoastIn .4s var(--ease) forwards; }
.ctoast.out{ opacity:0; transform:translate(-50%,6px); transition:opacity .35s ease, transform .35s ease; }
.pdp__copy.ok{ border-color:var(--green); color:var(--green); }
/* الجوال: شريط الاتصال/واتساب الثابت (.abar) يغطي أسفل الشاشة — نرفع التوست فوقه */
@media (max-width:860px){ .ctoast{ bottom:calc(76px + env(safe-area-inset-bottom)); } }

@media (max-width:900px){
  .pdp__grid{ grid-template-columns:1fr; }
}
@media (max-width:860px){
  .cnav__links{ display:none; } .cnav__burger{ display:block; } .cnav__right .btn{ display:none; } .cnav__right{ margin-inline-start:auto; }
  body.catalog .abar{ display:flex; }
  body.catalog .cmain{ padding-bottom:70px; }
  .csearch,.ct__search{ border-radius:18px; flex-direction:column; padding:10px; }
  .csearch input,.ct__search input{ padding:8px 10px; }
  .csearch .btn,.ct__search .btn{ width:100%; }
  .pgrid,.ct__grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .pc__body{ padding:10px 11px 12px; }
  .pc__name{ font-size:.9rem; }
  .pc__en{ display:none; }
}
@media (max-width:400px){ .pgrid,.ct__grid{ grid-template-columns:1fr 1fr; } .pc__pn{ font-size:.68rem; } }

/* ═══════════════════════════════════════════════════════════
   MOTION LAYER — حركة وتفاعلات (مشتركة بين الكتالوج والصفحة الرئيسية)
   ═══════════════════════════════════════════════════════════ */
:root{ --ease:cubic-bezier(.16,1,.3,1); --ease-2:cubic-bezier(.22,1,.36,1); --spring:cubic-bezier(.175,.885,.32,1.275); }
@keyframes blurRise{ from{ opacity:0; transform:translateY(26px); filter:blur(12px); } to{ opacity:1; transform:translateY(0); filter:blur(0); } }
@keyframes rvIn{ from{ opacity:0; transform:translateY(22px) scale(.98); filter:blur(8px); } to{ opacity:1; transform:none; filter:blur(0); } }
@keyframes shineSweep{ from{ background-position:-200% center; } to{ background-position:200% center; } }
@keyframes drift{ 0%{ transform:translate3d(0,0,0) scale(1); } 50%{ transform:translate3d(8vw,-6vh,0) scale(1.15); } 100%{ transform:translate3d(-4vw,4vh,0) scale(.95); } }
@keyframes kenBurns{ from{ transform:scale(1.07); filter:blur(6px); opacity:0; } to{ transform:scale(1); filter:blur(0); opacity:1; } }
@keyframes rip{ to{ transform:translate(-50%,-50%) scale(14); opacity:0; } }
@keyframes marq{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes abarIn{ to{ transform:none; } }
@keyframes twReveal{ from{ opacity:0; filter:blur(8px); transform:translateY(14px); } to{ opacity:1; filter:blur(0); transform:translateY(0); } }
@keyframes ctoastIn{ from{ opacity:0; transform:translate(-50%,10px) scale(.96); } to{ opacity:1; transform:translate(-50%,0) scale(1); } }

/* ── كشف عند التمرير (تُضاف .rv من motion.js) ── */
.rv{ animation:rvIn .85s var(--ease) var(--d,0ms) backwards; animation-play-state:paused; }
.rv.rv-in{ animation-play-state:running; }

/* ── دخول الهيرو (سلّم تأخير: مسار → عين → عنوان → وصف → بحث → رقائق) ── */
.chero .crumbs,.chero .eyebrow,.chero .csub,.chero .csearch,.chero .chips,.chero .mkgrid,.pdp .crumbs{ animation:blurRise .95s var(--ease) backwards; }
.chero .crumbs,.pdp .crumbs{ animation-delay:.04s; }
.chero .eyebrow{ animation-delay:.12s; }
.chero .csub{ animation-delay:.3s; }
.chero .csearch{ animation-delay:.4s; }
.chero .chips,.chero .mkgrid{ animation-delay:.52s; }
.cmain{ animation:fadeIn .45s ease both; }
html.leaving .cmain,html.leaving .ccta,html.leaving .cfoot{ opacity:0; filter:blur(6px); transition:opacity .19s ease, filter .19s ease; }

/* ── الهيرو: بقع ضوء تتحرك ببطء + الكلمة الحمراء تلمع ── */
.chero{ position:relative; overflow:hidden; isolation:isolate; }
.chero::before,.chero::after{
  content:''; position:absolute; z-index:-1; pointer-events:none; border-radius:50%;
  filter:blur(70px); mix-blend-mode:screen; opacity:.55; will-change:transform;
}
.chero::before{ width:42vw; height:42vw; max-width:560px; max-height:560px; inset-inline-end:-12vw; top:-22vw; background:radial-gradient(circle, rgba(201,56,62,.42), transparent 62%); animation:drift 22s ease-in-out infinite alternate; }
.chero::after{ width:30vw; height:30vw; max-width:420px; max-height:420px; inset-inline-start:-10vw; bottom:-14vw; background:radial-gradient(circle, rgba(143,166,196,.22), transparent 62%); animation:drift 28s ease-in-out infinite alternate-reverse; }
.ctitle em,body.catalog .stitle em{
  background:linear-gradient(100deg, var(--red) 0%, #ff9a9e 48%, var(--red) 64%); background-size:220% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  animation:shineSweep 5.5s linear infinite;
}
.ctitle [data-ticker]{ font-variant-numeric:tabular-nums; display:inline-block; min-width:2.2ch; }

/* ── كشف عنوان الهيرو على مستوى الكلمة (catalog.js يقسّم .chero .ctitle إلى .tw عند التحميل) ── */
.tw{ display:inline-block; white-space:pre; }
.tw-ready .tw{ animation:twReveal .9s var(--ease) both; animation-delay:calc(var(--i,0) * 45ms); }

/* ── شريط موديلات متحرك ── */
.cmarq{ overflow:hidden; border-block:1px solid var(--line); background:var(--ink-2); padding-block:.95rem; -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.cmarq__track{ display:flex; width:max-content; animation:marq 38s linear infinite; }
.cmarq:hover .cmarq__track{ animation-play-state:paused; }
.cmarq__row{ display:flex; align-items:center; gap:1.4rem; padding-inline-end:1.4rem; }
.cmarq__row a{ font-family:var(--d); font-size:.92rem; letter-spacing:.04em; color:var(--muted); white-space:nowrap; transition:color .3s; }
.cmarq__row a:hover{ color:var(--cream); }
.cmarq__row a.o{ color:transparent; -webkit-text-stroke:1px rgba(243,238,231,.35); }
.cmarq__row b{ color:var(--red); font-size:.7em; }

/* ── الكروت: ميلان ثلاثي الأبعاد + بقعة ضوء + حافة مضيئة تتبع المؤشر ── */
.pc,.mk{
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));
  transition:transform .55s var(--ease), border-color .35s, box-shadow .55s var(--ease); transform-style:preserve-3d;
}
.pc.tilting,.mk.tilting{ transition:transform .14s ease-out, border-color .35s, box-shadow .35s; }
.pc:hover,.mk:hover{ --ty:-6px; }
.pc::after,.mk::after,.ck::after,.ct__mk::after{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .4s;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(243,238,231,.11), transparent 46%);
}
.pc:hover::after,.mk:hover::after,.ck:hover::after,.ct__mk:hover::after{ opacity:1; }
.pc::before,.mk::before{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; opacity:0; transition:opacity .4s;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%), rgba(201,56,62,.9), rgba(243,238,231,.18) 38%, transparent 70%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
}
.pc:hover::before,.mk:hover::before{ opacity:1; }
.pc,.mk,.ck,.ct__mk{ position:relative; overflow:hidden; }
.pc__body,.mk > *{ position:relative; z-index:1; }
.pc__av{ transition:transform .4s var(--ease); }
.pc:hover .pc__av{ transform:translateX(-4px); }
.pc__img img{ transition:transform 1s var(--ease), filter .6s; }
.ck,.ct__mk{ transition:transform .45s var(--ease), border-color .3s, background .3s; }
.ck:hover{ transform:translateY(-3px); }

/* ── أزرار: رفع + ضغط + لمعة + موجة ── */
.btn{ position:relative; overflow:hidden; isolation:isolate; }
.btn:active{ transform:translateY(0) scale(.96) !important; transition-duration:.08s; }
.btn--red::after{
  content:''; position:absolute; top:-60%; bottom:-60%; width:36%; inset-inline-start:-70%; pointer-events:none; z-index:-1;
  background:linear-gradient(100deg, transparent 10%, rgba(255,255,255,.38) 50%, transparent 90%); transform:skewX(-20deg);
  transition:inset-inline-start .75s var(--ease);
}
.btn--red:hover::after{ inset-inline-start:140%; }
.btn--red:hover{ box-shadow:0 18px 40px -14px var(--red-glow), 0 0 0 1px rgba(255,255,255,.08) inset; }
.btn--glass:hover{ box-shadow:0 14px 34px -18px rgba(0,0,0,.9); }
.ripple{ position:absolute; border-radius:50%; background:rgba(255,255,255,.32); transform:translate(-50%,-50%) scale(0); animation:rip .75s ease-out forwards; pointer-events:none; z-index:2; mix-blend-mode:screen; }
.btn--line .ripple,.chip .ripple,.ck .ripple,.mk .ripple,.ct__mk .ripple{ background:rgba(201,56,62,.35); }

/* ── الرقائق: تعبئة منزلقة ── */
.chip{ position:relative; overflow:hidden; isolation:isolate; transition:transform .4s var(--ease), border-color .3s, color .3s; }
.chip::before{ content:''; position:absolute; inset:0; z-index:-1; background:rgba(201,56,62,.18); transform:scaleX(0); transform-origin:100% 50%; transition:transform .5s var(--ease); border-radius:inherit; }
.chip:hover{ transform:translateY(-2px); border-color:rgba(201,56,62,.6); }
.chip:hover::before{ transform:scaleX(1); }
.chip.on::before{ transform:scaleX(1); background:var(--red); }
.chip.on{ background:transparent; }

/* ── البحث ── */
.csearch,.ct__search{ transition:border-color .35s, box-shadow .45s var(--ease), transform .45s var(--ease); }
.csearch:focus-within,.ct__search:focus-within{ transform:translateY(-2px); box-shadow:0 0 0 4px var(--red-glow), 0 24px 50px -30px rgba(201,56,62,.6); }
.cres .pc{ animation:rvIn .7s var(--ease) var(--d,0ms) backwards; }

/* ── القائمة العلوية ── */
.cnav__links a{ position:relative; padding-block:4px; }
.cnav__links a::after{ content:''; position:absolute; bottom:0; inset-inline-start:0; width:0; height:1px; background:var(--red); transition:width .45s var(--ease); }
.cnav__links a:hover::after{ width:100%; }
.cnav .brand__logo{ transition:transform .6s var(--spring); }
.cnav .brand:hover .brand__logo{ transform:rotate(-8deg) scale(1.06); }

/* ── صفحة القطعة ── */
.pdp__img img{ animation:kenBurns 1.5s var(--ease) .1s backwards; }
.pdp__tbl tr{ animation:blurRise .7s var(--ease) calc(.35s + var(--i,0) * 60ms) backwards; }
.pdp__ctas,.pdp__note,.pdp__av,.pdp__title,.pdp__en,.pdp .eyebrow{ animation:blurRise .85s var(--ease) backwards; }
.pdp .eyebrow{ animation-delay:.1s; } .pdp__title{ animation-delay:.18s; } .pdp__en{ animation-delay:.26s; } .pdp__av{ animation-delay:.32s; } .pdp__ctas{ animation-delay:.7s; } .pdp__note{ animation-delay:.8s; }
.pdp__th{ transition:opacity .3s, border-color .3s, transform .35s var(--ease); }
.pdp__th:hover{ transform:translateY(-2px); }

/* ── لايت بوكس ── */
body.catalog .lightbox figure{ transform:scale(.94) translateY(10px); filter:blur(10px); transition:transform .55s var(--ease), filter .55s var(--ease); }
body.catalog .lightbox.open figure{ transform:none; filter:none; }

/* ── شريط الموبايل ── */
body.catalog .abar{ transform:translateY(140%); animation:abarIn .8s var(--ease) .6s forwards; }

/* ── قسم الصفحة الرئيسية ── */
.ct__mk b{ transition:letter-spacing .4s var(--ease); }
.ct__mk:hover b{ letter-spacing:.12em; }

@media (max-width:860px){
  .chero::before,.chero::after{ filter:blur(50px); opacity:.4; }
  .pc,.mk{ transform:none; }
}
@media (prefers-reduced-motion:reduce){
  .rv,.chero *,.cmain,.pdp *,.cres .pc,.pdp__img img,.cmarq__track,.ctitle em,body.catalog .stitle em,.chero::before,.chero::after,body.catalog .abar,.tw,.ctoast{ animation:none !important; opacity:1; transform:none; filter:none; }
  .pc,.mk{ transform:none !important; }
  .ripple{ display:none; }
  .ctoast.out{ transition:none; }
}