/* ============================================================
   styles.css — هوية المتجر (مبنية على الـ Mockup المعتمد)
   لتغيير البراند لاحقًا: عدّل --brand والشعار في الصفحات فقط
   ============================================================ */
:root{
  --ink:#12151c; --ink-soft:#5a6070;
  --bg:#ffffff; --bg-dim:#f4f5f8; --line:#e6e8ee;
  --brand:#1f4fff; --brand-ink:#ffffff;
  --go:#0aa574; --warn:#b7791f; --err:#c0392b;
  --radius:14px; --shadow:0 8px 28px rgba(18,21,28,.09);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--bg-dim);line-height:1.55}
h1,h2,h3,.disp{font-family:'Space Grotesk',sans-serif;letter-spacing:-.01em}
button{font:inherit;cursor:pointer;border:0}
a{color:inherit}
input,select{font:inherit;width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
input:focus,select:focus,button:focus-visible{outline:3px solid rgba(31,79,255,.35);outline-offset:1px}
input.bad,select.bad{border-color:var(--err)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.page{max-width:520px;margin:0 auto;min-height:100vh;background:var(--bg);display:flex;flex-direction:column}
.store-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}
.logo{font-family:'Space Grotesk';font-weight:700;font-size:1.15rem;text-decoration:none}
.logo .dot{color:var(--brand)}
.mini{background:var(--bg-dim);border-radius:10px;padding:8px 12px;font-size:.85rem;font-weight:600;text-decoration:none}
.wrap{padding:20px;flex:1}

/* --- product --- */
.viral{display:inline-flex;align-items:center;gap:7px;background:#fff3e6;color:#9a4d00;border:1px solid #ffd9ad;border-radius:999px;padding:5px 12px;font-size:.75rem;font-weight:600}
.viral .pulse{width:8px;height:8px;border-radius:50%;background:#ff7a00;animation:pu 1.6s infinite}
@keyframes pu{0%,100%{opacity:1}50%{opacity:.35}}
.pshot{margin:16px 0;border-radius:var(--radius);aspect-ratio:1/1;overflow:hidden;background:radial-gradient(120% 120% at 20% 15%,#dfe7ff 0%,#b9c9ff 40%,#7e9bff 100%);display:grid;place-items:center}
.pshot img{width:100%;height:100%;object-fit:cover}
.pshot .ph{font:700 1rem 'Space Grotesk';color:#26346e;text-align:center;padding:20px}
h1.pname{font-size:1.5rem;margin-top:6px}
.pdesc{color:var(--ink-soft);font-size:.9rem;margin-top:6px}
.price{display:flex;align-items:baseline;gap:10px;margin:12px 0 4px}
.price b{font-size:1.7rem;font-family:'Space Grotesk'}
.opt-label{font-weight:600;font-size:.85rem;margin:16px 0 8px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips button{border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:10px 16px;font-weight:500}
.chips button[aria-pressed="true"]{border-color:var(--brand);background:#eef2ff;font-weight:600}
.chips button:disabled{opacity:.4;cursor:not-allowed;text-decoration:line-through}
.trust{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0}
.trust div{background:var(--bg-dim);border-radius:10px;padding:12px;font-size:.8rem}
.trust b{display:block;font-size:.82rem}
.trust span{color:var(--ink-soft)}

/* ── شريط الشراء: السعر فوق، والزرّان تحته في المنتصف ──
   كان صفًّا واحدًا: السعر في طرفٍ والزرّان في الطرف الآخر، فيميل
   الثقل إلى جانبٍ ولا يتّسق مع شبكة المنتجات فوقه المتمركزة.
   والآن عمودٌ متمركز: السعر سطرًا، والزرّان تحته بعرضٍ متساوٍ. */
.buybar{
  position:sticky; bottom:0; background:#fff;
  border-top:1px solid var(--line); padding:14px 20px;
  display:flex; flex-wrap:wrap; gap:10px;
  justify-content:center; align-items:center;
}
/* السعر يأخذ السطر كلّه، فيدفع الزرّين إلى سطرٍ تحته */
.buybar .p{ flex:1 0 100%; text-align:center; font:700 1.2rem 'Space Grotesk' }
/* الزرّان متساويان ومتمركزان، بعرضٍ محدودٍ كي لا يمتدّا عبر
   الشاشة كلّها على الحواسيب العريضة */
.buybar .cta{ flex:1 1 0; max-width:230px }
/* الزرّان شفافان بطلبك. "اشترِ الآن" يبقى الأساسي بإطارٍ ونصٍّ
   أزرقين — لولا ذلك لتساوى الإجراءان تمامًا ولم يعرف العميل أيّهما
   الخطوة التالية. */
.cta{flex:1;background:#fff;color:var(--brand);border-radius:12px;padding:15px;
  font-weight:700;font-size:1rem;box-shadow:0 1px 3px rgba(18,21,28,.08);
  text-align:center;text-decoration:none;border:1.5px solid var(--brand)}
.cta:hover{background:#f5f8ff}
.cta:active{transform:translateY(1px)}
.cta:disabled{opacity:.6;cursor:wait}

/* --- checkout --- */
h2.sec{font-size:1.05rem;margin:20px 0 12px}
.field{margin-bottom:12px}
.field label{display:block;font-size:.8rem;font-weight:600;margin-bottom:6px;color:var(--ink-soft)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hint{font-size:.72rem;color:var(--ink-soft);margin-top:4px}
.err-msg{color:var(--err);font-size:.8rem;margin-top:6px;display:none}
.err-msg.on{display:block}
.pay{display:grid;gap:10px}
.pay label{display:flex;gap:12px;align-items:center;border:1.5px solid var(--line);border-radius:12px;padding:14px;background:#fff}
.pay label.sel{border-color:var(--brand);background:#eef2ff}
.pay label.off{opacity:.55}
.pay input{width:auto}
.pay b{font-size:.9rem;display:block}
.pay span{font-size:.75rem;color:var(--ink-soft)}
.badge{margin-inline-start:auto;font-size:.65rem;font-weight:700;border-radius:6px;padding:3px 8px;background:#e7f7f0;color:var(--go);white-space:nowrap}
.badge.soon{background:#fff3e6;color:var(--warn)}
.summary{background:var(--bg-dim);border-radius:12px;padding:16px;margin-top:18px;font-size:.9rem}
.summary .row{display:flex;justify-content:space-between;margin-bottom:8px}
.summary .tot{border-top:1px solid var(--line);padding-top:10px;font-weight:700;font-size:1rem}

/* --- tracking --- */
.track-hero{background:linear-gradient(135deg,#12151c,#26346e);color:#fff;padding:28px 20px}
.track-hero h1{font-size:1.35rem}
.track-hero p{opacity:.7;font-size:.85rem}
.track-form{display:grid;gap:10px;margin-top:14px}
.track-form input{border:0}
.track-form button{background:var(--brand);color:#fff;border-radius:10px;padding:13px;font-weight:600}
.ship{border:1.5px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:14px;background:#fff}
.ship .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.st{font-weight:700;font-size:.8rem;border-radius:999px;padding:5px 12px}
.st.ok{background:#e7f7f0;color:var(--go)}
.st.prep{background:#eef2ff;color:var(--brand)}
.tl{list-style:none}
.tl li{position:relative;padding:0 0 18px 26px;font-size:.85rem}
.tl li::before{content:"";position:absolute;left:7px;top:6px;width:8px;height:8px;border-radius:50%;background:var(--line)}
.tl li::after{content:"";position:absolute;left:10.5px;top:16px;bottom:-2px;width:1.5px;background:var(--line)}
.tl li:last-child::after{display:none}
.tl li.on::before{background:var(--go)}
.tl li b{display:block}
.tl li span{color:var(--ink-soft);font-size:.75rem}
.tnum{font-size:.75rem;color:var(--ink-soft);margin-top:8px}
.tnum code{background:var(--bg-dim);padding:2px 8px;border-radius:6px}

.note{background:#fff8ec;border:1px solid #ffe2b0;border-radius:10px;padding:12px;font-size:.8rem;color:#7a5200;margin-top:14px}
/* ============================================================
   الموبايل: شريط سفلي ثابت + قلب المفضلة + بطاقة أوضح
   (الشريط للشاشات الصغيرة وحدها — الحاسوب له قائمته وفوتره)
   ============================================================ */
html.rz-mobile .rztabs{display:none}
@media(max-width:760px){
  html.rz-mobile .rztabs{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;inset-inline:0;bottom:0;
    z-index:60;background:#fff;border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -2px 14px rgba(18,21,28,.05)}
  html.rz-mobile .rztab{height:62px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    text-decoration:none;color:#6b7280;font-size:.68rem;font-weight:600}
  html.rz-mobile .rztab-ic{position:relative;display:grid;place-items:center}
  html.rz-mobile .rztab svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;
    stroke-linecap:round;stroke-linejoin:round}
  html.rz-mobile .rztab.on{color:var(--brand)}
  html.rz-mobile .rztab-badge{position:absolute;top:-6px;inset-inline-start:-8px;min-width:17px;height:17px;border-radius:999px;
    background:#c0392b;color:#fff;font-size:.62rem;font-weight:700;display:grid;place-items:center;
    padding:0 4px;font-style:normal}
  /* مساحةٌ أسفل الصفحة فلا يغطّي الشريط آخر سطرٍ فيها */
  html.rz-mobile body.has-tabbar{padding-bottom:calc(62px + env(safe-area-inset-bottom))}
}

/* بانر وأقسام الموبايل — تظهر على الشاشات الصغيرة وحدها */
html.rz-mobile .mhero, html.rz-mobile .mcats-sec{display:none}
@media(max-width:760px){
  html.rz-mobile .mhero{display:block;margin:14px 16px 0;border-radius:20px;padding:22px 20px 20px;
    position:relative;overflow:hidden;color:#fff;background:linear-gradient(135deg,#12203a,#24406e)}
  html.rz-mobile .mhero::after{content:"";position:absolute;inset-inline-end:-50px;bottom:-60px;width:190px;height:190px;
    border-radius:50%;background:radial-gradient(circle,rgba(216,192,150,.20),transparent 70%)}
  html.rz-mobile .mhero h1{margin:0 0 6px;font-size:1.3rem;line-height:1.45;font-weight:700}
  html.rz-mobile .mhero p{margin:0 0 16px;font-size:.84rem;opacity:.86}
  html.rz-mobile .mhero a{display:inline-flex;align-items:center;gap:7px;background:#d8c096;color:#1a2030;
    text-decoration:none;font-weight:700;font-size:.88rem;border-radius:999px;padding:10px 20px;
    position:relative;z-index:1}
  html.rz-mobile .mcats-sec{display:block;margin-top:20px}
  /* مكانها محجوزٌ حتى تصل الأقسام من الشبكة — كانت تدفع المنتجات 157px */
  html.rz-mobile .mcats-sec[hidden]{display:block !important;visibility:hidden;min-height:157px}
  html.rz-mobile .mcats-h{display:flex;align-items:center;justify-content:space-between;margin:0 16px 10px}
  html.rz-mobile .mcats-h h2{margin:0;font-size:1.02rem}
  html.rz-mobile .mcats{display:flex;gap:14px;overflow-x:auto;padding:2px 16px 6px;scrollbar-width:none}
  html.rz-mobile .mcats::-webkit-scrollbar{display:none}
  /* أربعة في الشاشة تقريبًا، والباقي بالتمرير الأفقي (الحيّ فيه 15 قسمًا) */
  html.rz-mobile .mcat{flex:0 0 auto;width:84px;background:none;border:0;padding:0;text-align:center;color:var(--ink)}
  html.rz-mobile .mcat i{display:grid;place-items:center;width:74px;height:74px;border-radius:50%;margin:0 auto 8px;
    font-size:1.8rem;font-style:normal;box-shadow:inset 0 0 0 1px rgba(18,21,28,.04)}
  html.rz-mobile .mcat span{font-size:.74rem;line-height:1.35;display:block;color:#3d4452}
}



/* ── هيدر الموبايل: أبيض بسيط، بحثٌ واضح، والفلاتر داخل القائمة ──
   الشريط الأزرق بوسومه وصفّ الفلاتر كانا يزدحمان في عرض 360px. */
html.rz-mobile .hd-menu{display:none}
@media(max-width:760px){
  html.rz-mobile .p-home .top{background:#fff;color:var(--ink);padding:10px 14px;position:sticky;top:0;z-index:45;
    border-bottom:1px solid var(--line)}
  html.rz-mobile .p-home .top .logo{color:var(--ink)}
  html.rz-mobile .p-home .top .meta, html.rz-mobile .p-home .top .tlink{display:none}
  html.rz-mobile .hd-menu{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;
    border:1px solid var(--line);background:#fff;color:var(--ink);padding:0}
  html.rz-mobile .hd-menu svg{width:21px;height:21px}
  html.rz-mobile .p-home .top .cart-btn{color:var(--ink);border:1px solid var(--line);border-radius:12px;
    width:40px;height:40px;background:#fff;flex:0 0 auto}
  /* مساحةٌ محجوزة للأيقونتين قبل حقن السلة، فلا يقفز الهيدر عند التحميل */
  html.rz-mobile .p-home .top .top-row{min-height:40px;flex-wrap:nowrap}
  html.rz-mobile .p-home .top .cart-count{background:#c0392b;color:#fff}

  /* الفلاتر تُخفى ويبقى البحث وحده بعرض الشاشة */
  html.rz-mobile .p-home .toolbar{margin:0;padding:10px 14px 12px;background:#fff;border-bottom:1px solid var(--line)}
  html.rz-mobile .p-home .toolbar .menu-btn,
  html.rz-mobile .p-home .toolbar .fsel,
  html.rz-mobile .p-home .toolbar .fclear,
  html.rz-mobile .p-home .toolbar .cart-btn{display:none !important}
  html.rz-mobile .p-home .toolbar .scroll-part{width:100%;display:block;overflow:visible;padding:0}
  /* بعرض الشاشة: max-width القديم (300px) كان يترك الخانة قصيرة في النصّ */
  html.rz-mobile .p-home .bar-search{width:100%;max-width:none;flex:1 1 auto;min-width:0}
  html.rz-mobile .p-home .bar-search input{width:100%;background:#f1f3f8;border:0;border-radius:14px;
    padding:13px 44px 13px 16px;font-size:.92rem}
  html.rz-mobile .p-home .bar-search .ico{inset-inline-start:auto;inset-inline-end:14px}
  /* زرّ اللغة يبقى (هو السبيل الوحيد لتغييرها) لكن أيقونةً فقط:
     الحرفان "AR" مع الأيقونة كانا يزاحمان السلة والقائمة في 360px */
  /* الأيقونة في منتصف مربّعها: الزرّ inline-flex بلا توسيط كان يلصقها
     بأوّله، والعرضُ يثبت (flex) كي لا يتمدّد عن مربّعَي السلة والقائمة */
  html.rz-mobile .p-home .top .lang-btn{width:40px;height:40px;padding:0;border-radius:12px;
    border:1px solid var(--line);background:#fff;color:var(--ink);
    flex:0 0 40px;justify-content:center;gap:0}
  html.rz-mobile .p-home .top .lang-btn .lf-code{display:none}
}

/* شريط السلة السفلي — موبايل فقط */
html.rz-mobile .cart-bar{display:none}
@media(max-width:760px){
  html.rz-mobile .cart-bar{display:flex;align-items:center;gap:12px;position:fixed;inset-inline:0;z-index:55;
    bottom:calc(62px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line);
    padding:12px 16px;box-shadow:0 -2px 14px rgba(18,21,28,.06)}
  html.rz-mobile .cart-bar .cb-t{display:flex;flex-direction:column;line-height:1.25}
  html.rz-mobile .cart-bar .cb-t span{font-size:.72rem;color:var(--ink-soft)}
  html.rz-mobile .cart-bar .cb-t b{font:700 1.15rem 'Space Grotesk',system-ui}
  html.rz-mobile .cart-bar .cta{flex:0 0 auto;min-width:160px;padding:13px 18px;background:var(--brand);color:#fff}
  html.rz-mobile body.p-cart.has-tabbar{padding-bottom:calc(62px + 76px + env(safe-area-inset-bottom))}
  /* الملخّص الجانبي يفقد لصوقه على الموبايل — الشريط يقوم مقامه */
  html.rz-mobile .cart-sum{position:static}
  html.rz-mobile .cart-sum .cta{display:none}
  /* أزرار الكمية: مساحة لمسٍ مريحة للإبهام */
  html.rz-mobile .qty button{min-width:40px;min-height:40px;font-size:1.05rem}
  html.rz-mobile .crm{min-height:40px;padding-inline:6px}
}

/* شريط الشراء فوق الشريط السفلي، لا تحته:
   الشريط السفلي ثابت (fixed) فكان يغطّي زرّي "أضف" و"اشترِ الآن". */
@media(max-width:760px){
  html.rz-mobile body.p-product.has-tabbar .buybar{position:fixed;inset-inline:0;z-index:55;
    bottom:calc(62px + env(safe-area-inset-bottom));box-shadow:0 -2px 14px rgba(18,21,28,.06)}
  html.rz-mobile body.p-product.has-tabbar{padding-bottom:calc(62px + 78px + env(safe-area-inset-bottom))}
}

/* قلب المفضلة على البطاقة وعلى صورة المنتج */
.pshot{position:relative}
html.rz-mobile .pshot .wishb{top:12px;inset-inline-end:12px;width:40px;height:40px}
html.rz-mobile .pshot html.rz-mobile .wishb svg{width:21px;height:21px}
html.rz-mobile .wishb{position:absolute;top:8px;inset-inline-end:8px;z-index:3;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line);background:rgba(255,255,255,.92);display:grid;place-items:center;
  cursor:pointer;padding:0;color:#7a8190;backdrop-filter:blur(2px)}
html.rz-mobile .wishb svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}
html.rz-mobile .wishb.on{color:#e0245e;border-color:#f7c9d6}
html.rz-mobile .wishb.on svg{fill:#e0245e}
html.rz-mobile .wishb:active{transform:scale(.92)}

/* لوح الفلاتر السفلي (موبايل) */
@media(max-width:760px){
  /* البحث وزرّ الفلترة في سطرٍ واحد بعرض الشاشة.
     ‎overflow:visible‎ و‎min-width:0‎ ضروريان: الحاوية كانت تُمرَّر أفقيًا،
     فيخرج البحث خارج الشاشة ولا يظهر إلا بالسحب. */
  html.rz-mobile .p-home .toolbar .scroll-part{display:flex !important;align-items:center;gap:10px;
    overflow:visible !important;overflow-x:visible !important;width:100%;min-width:0;flex-wrap:nowrap}
  /* قواعد قديمة تُثبّت عرض البحث عند 150px بـ‎!important‎ وتُمرّر الشريط
     أفقيًا، فكان البحث يخرج خارج الشاشة ولا يظهر إلا بالسحب. */
  html.rz-mobile .p-home .toolbar .scroll-part > .bar-search{flex:1 1 auto !important;
    min-width:0 !important;max-width:none !important}
  html.rz-mobile .p-home .toolbar .scroll-part > .rzf-btn{flex:0 0 auto !important}
  /* مكان زرّ الفلترة محجوزٌ قبل أن يبنيه mobile.js — كان البحث يُرسم
     بعرض الشاشة ثم ينكمش 89px أمام العين عند كل تحديث. */
  html.rz-mobile .p-home .toolbar .scroll-part:not(:has(> .rzf-btn)) > .bar-search{margin-inline-end:89px}
  html.rz-mobile .rzf-btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;height:44px;
    padding:0 14px;border:1px solid var(--line);background:#fff;border-radius:14px;
    font:inherit;font-size:.84rem;font-weight:600;color:var(--ink)}
  html.rz-mobile .rzf-btn svg{width:18px;height:18px}
  html.rz-mobile .rzf-sheet{position:fixed;inset:0;z-index:70;display:flex;align-items:flex-end}
  html.rz-mobile .rzf-sheet[hidden]{display:none}
  html.rz-mobile .rzf-back{position:absolute;inset:0;background:rgba(18,21,28,.45)}
  html.rz-mobile .rzf-inner{position:relative;width:100%;background:#fff;
    border-start-start-radius:20px;border-start-end-radius:20px;padding:18px 18px calc(18px + env(safe-area-inset-bottom));
    box-shadow:0 -8px 30px rgba(18,21,28,.2)}
  html.rz-mobile .rzf-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
  html.rz-mobile .rzf-head b{font-size:1rem}
  html.rz-mobile .rzf-x{width:34px;height:34px;border:0;border-radius:50%;background:var(--bg-dim);
    font-size:1.3rem;line-height:1;color:var(--ink)}
  html.rz-mobile .rzf-fields{display:flex;flex-direction:column;gap:12px}
  html.rz-mobile .rzf-f{display:flex;flex-direction:column;gap:6px;font-size:.82rem;color:#4a5060}
  html.rz-mobile .rzf-f select{display:block !important;width:100%;height:46px;border:1.5px solid var(--line);
    border-radius:12px;padding:0 12px;font:inherit;font-size:.9rem;background:#fff;color:var(--ink)}
  html.rz-mobile .rzf-fields .fclear{display:block !important;width:100%;height:44px;border:0;
    background:#fdecea;color:#c0392b;border-radius:12px;font:inherit;font-weight:600}
  html.rz-mobile .rzf-done{width:100%;margin-top:16px;height:48px;border:0;border-radius:14px;
    background:var(--brand);color:#fff;font:inherit;font-size:.95rem;font-weight:700}
}

/* أقسام الصفحة الرئيسية على الموبايل: شبكة بعمودين لا تمرير أفقي */
@media(max-width:760px){
  /* ‎!important‎ لأن قواعد "إصلاح صفوف التمرير الأفقي" أدناه تفرض
     ‎display:flex‎ وعرضًا ثابتًا للبطاقات بالقوة نفسها. */
  html.rz-mobile .trend-row.rz-grid,
  html.rz-mobile .feat-row.rz-grid{display:grid !important;grid-template-columns:1fr 1fr;gap:12px;
    overflow:visible !important;padding:0 16px 4px;scroll-snap-type:none}
  /* بطاقاتٌ متساوية: العنوان سطران دائمًا، والصورة مربّعة، والسعر
     والزرّ يُدفعان لأسفل — وإلا اختلف ارتفاع كل بطاقةٍ عن جارتها. */
  html.rz-mobile .rz-grid > .trend-card,
  html.rz-mobile .rz-grid > .feat-card{flex:none !important;width:auto !important;max-width:none !important;height:100%;
    display:flex;flex-direction:column;background:#fff;border-radius:12px;overflow:hidden;
    box-shadow:0 1px 4px rgba(18,21,28,.06)}
  html.rz-mobile .rz-grid .rc-l{display:flex;flex-direction:column;flex:1;text-decoration:none;color:inherit}
  html.rz-mobile .rz-grid .trend-im,
  html.rz-mobile .rz-grid .feat-im{aspect-ratio:1/1;overflow:hidden;position:relative}
  html.rz-mobile .rz-grid .trend-im img,
  html.rz-mobile .rz-grid .feat-im img{width:100%;height:100%;object-fit:cover}
  html.rz-mobile .rz-grid .trend-tt,
  html.rz-mobile .rz-grid .feat-tt{padding:10px 12px 0;font-size:.82rem;line-height:1.45;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:3.3em}
  html.rz-mobile .rz-grid .trend-st,
  html.rz-mobile .rz-grid .feat-st{padding:4px 12px 0;font-size:.74rem}
  html.rz-mobile .rz-grid .prow{margin-top:auto;padding:8px 12px 12px}
  /* منتجان ظاهران، والباقي خلف "عرض المزيد" */
  html.rz-mobile .rz-grid:not(.rz-open) > *:nth-child(n+3){display:none}
  html.rz-mobile .rz-more{margin-inline-start:auto;background:none;border:0;padding:4px 2px;
    color:var(--brand);font:inherit;font-size:.82rem;font-weight:700}
  html.rz-mobile .trend-h,html.rz-mobile .feat-head{display:flex;align-items:center;gap:10px}
}

/* زرّ "أضف إلى السلة": أيقونةٌ على الحاسوب، وزرٌّ عريضٌ بنصّه على
   الموبايل — الشبكة عمودان، والأيقونة وحدها لا تُفهم بسرعة. */
html.rz-mobile .qadd-t{display:none}
@media(max-width:760px){
  html.rz-mobile .card .prow, html.rz-mobile .rowcard .prow{display:flex;flex-direction:column;align-items:stretch;gap:8px}
  html.rz-mobile .card .qadd, html.rz-mobile .rowcard .qadd{width:100%;height:auto;min-height:40px;border-radius:11px;
    background:#12203a;color:#fff;border:0;display:flex;align-items:center;justify-content:center;gap:7px;
    font-size:.82rem;font-weight:600}
  html.rz-mobile .card .qadd svg, html.rz-mobile .rowcard .qadd svg{stroke:#fff;width:16px;height:16px}
  html.rz-mobile .qadd-t{display:inline}
  html.rz-mobile .card .prow .pcol,
  html.rz-mobile .rowcard .prow .feat-pr,
  html.rz-mobile .rowcard .prow .trend-pr{width:100%}
}

/* شارة الخصم — شكلٌ واحد في الشبكة وصفوف "رائج" و"مختارات" */
html.rz-mobile .feat-badge, html.rz-mobile .trend-badge{position:absolute;top:8px;inset-inline-start:8px;z-index:3;background:#c0392b;
  color:#fff;font-size:.7rem;font-weight:700;border-radius:8px;padding:2px 7px;letter-spacing:.2px}
html.rz-mobile .rowcard .wishb{top:6px;inset-inline-end:6px;width:30px;height:30px}
.rowcard html.rz-mobile .wishb svg{width:16px;height:16px}

/* شارة الخصم على الصورة */
html.rz-mobile .offb{position:absolute;top:8px;inset-inline-start:8px;z-index:3;background:#c0392b;color:#fff;
  font-size:.7rem;font-weight:700;border-radius:8px;padding:2px 7px;letter-spacing:.2px}

.foot{padding:20px;border-top:1px solid var(--line);font-size:.75rem;color:var(--ink-soft);display:flex;gap:14px;flex-wrap:wrap}
.spin{display:inline-block;width:16px;height:16px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite;vertical-align:-3px}
@keyframes sp{to{transform:rotate(360deg)}}

/* أسعار الخصم (Grid + صفحة المنتج) */
.green{color:#1e8e3e}
.save{color:#1e8e3e;font:600 .8rem 'Inter'}
.price s{font-size:1rem}

/* --- العربية و RTL --- */
[lang="ar"] body, [dir="rtl"] body, [dir="rtl"] input, [dir="rtl"] select, [dir="rtl"] button{
  font-family:'IBM Plex Sans Arabic','Inter',system-ui,sans-serif}
[dir="rtl"] .tl li{padding:0 26px 18px 0}
[dir="rtl"] .tl li::before{left:auto;right:7px}
[dir="rtl"] .tl li::after{left:auto;right:10.5px}
[dir="rtl"] .search .go{right:auto;left:6px}
[dir="rtl"] .search input{padding:13px 16px 13px 44px}

/* ============================================================
   v2.3.1 — تخطيطات الديسكتوب (الموبايل يبقى كما هو تمامًا)
   ============================================================ */

/* إصلاح كسر اسم التصنيف حول الأيقونة */
.cat{min-width:70px;white-space:nowrap}

@media (min-width: 900px){

  /* --- صفحة المنتج: الصورة جنب التفاصيل --- */
  .p-product .page{max-width:1080px}
  .p-product .wrap{display:grid;grid-template-columns:480px 1fr;gap:6px 40px;align-items:start}
  .p-product .wrap > *{grid-column:2}
  .p-product .wrap .pshot{grid-column:1;grid-row:1 / span 20;margin:0;position:sticky;top:20px}
  .p-product .buybar{position:static;border:0;padding:18px 0 0;max-width:520px;margin-inline-start:auto}
  [dir="rtl"] .p-product .buybar{margin-inline-start:auto}
  .p-product .foot{justify-content:center}

  /* --- صفحة الدفع: الفورم جنب ملخص الطلب --- */
  .p-checkout .page{max-width:1000px}
  .p-checkout .wrap{display:grid;grid-template-columns:1fr 360px;gap:0 44px;align-items:start}
  .p-checkout .wrap > *{grid-column:1}
  .p-checkout .wrap .summary{grid-column:2;grid-row:1 / span 30;position:sticky;top:20px;margin-top:44px}
  .p-checkout .buybar{position:static;border:0;max-width:560px;padding-inline:20px}

  /* --- التتبع والشكر: عرض مريح --- */
  .p-ty .page{max-width:760px}
  .p-track .track-form button{padding:13px 32px}

  /* --- الرئيسية: الشبكة الحالية ممتازة، فقط راحة أكبر --- */
  .p-home .grid{padding:22px}
}

@media (min-width: 1200px){
  .p-home .page{max-width:1280px}
  .p-home .grid{grid-template-columns:repeat(5,1fr)}
}

/* ============================================================
   الفوتر الموحّد + الصفحات المؤسسية
   ============================================================ */
/* الفوتر — فاتح متوافق مع بقية الموقع */
.site-foot{background:#fff;color:#4a5060;padding:36px 20px 20px;margin-top:40px;
  border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:1fr;gap:26px;max-width:1080px;margin:0 auto}
@media(min-width:720px){.foot-grid{grid-template-columns:repeat(4,1fr)}}
.foot-col h4{font-size:.85rem;color:var(--ink);margin-bottom:12px;letter-spacing:.03em;font-weight:700}
.foot-col a{display:block;color:#4a5060;text-decoration:none;font-size:.85rem;margin-bottom:8px}
.foot-col a:hover{color:var(--brand);text-decoration:underline}
.foot-about p{font-size:.82rem;line-height:1.7;color:#4a5060}
.foot-about .logo{color:var(--ink)}
.pay{margin-top:14px;font-size:.75rem}
.pay b{display:block;color:var(--ink);margin-bottom:4px}
.pay span{color:var(--ink-soft)}
.foot-bottom{max-width:1080px;margin:26px auto 0;padding-top:16px;border-top:1px solid var(--line);
  font-size:.76rem;color:#4a5060;text-align:center}

/* روابط التواصل على الفوتر الفاتح */

/* صفحات المحتوى */
.doc{max-width:760px;margin:0 auto;padding:28px 20px 10px}
.doc h1{font-size:1.5rem;margin-bottom:6px}
.doc .upd{color:var(--ink-soft);font-size:.78rem;margin-bottom:22px}
.doc h2{font-size:1.05rem;margin:24px 0 8px}
.doc p,.doc li{font-size:.92rem;line-height:1.75;color:#2c3240}
.doc ul{margin:8px 0 8px 20px}
[dir="rtl"] .doc ul{margin:8px 20px 8px 0}
.doc .box{background:var(--bg-dim);border-radius:12px;padding:16px;margin:16px 0;font-size:.88rem}
.doc a{color:var(--brand)}
.qa{border-bottom:1px solid var(--line);padding:14px 0}
.qa b{display:block;margin-bottom:6px;font-size:.95rem}
.qa p{margin:0;color:var(--ink-soft);font-size:.88rem}

/* --- صفحة التتبع: تنسيق وارتفاع مناسب --- */
.p-track .page{display:flex;flex-direction:column;min-height:100vh}
.p-track .track-hero{margin:0;padding:34px 20px 40px}
.p-track .track-hero h1{margin-bottom:4px}
.p-track .wrap{flex:1;min-height:220px}
.p-track .store-head{max-width:760px;margin:0 auto;width:100%}
.p-track .track-hero > *{max-width:760px;margin-inline:auto}
@media(min-width:720px){
  .p-track .track-form{grid-template-columns:1fr 1fr auto}
}

/* --- زر العودة لأعلى (كل الصفحات) --- */
/* العودة لأعلى — هادئ متناسق مع الموقع */
.to-top{
  position:fixed; bottom:22px; inset-inline-end:18px; z-index:60;
  width:42px; height:42px; border-radius:50%;
  background:#fff; color:var(--ink-soft);
  border:1.5px solid var(--line);
  font-size:1.1rem; line-height:1;
  box-shadow:0 3px 14px rgba(18,21,28,.10);
  display:grid; place-items:center; cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s,
             border-color .16s, color .16s;
}
.to-top.show{opacity:1; visibility:visible; transform:translateY(0)}
.to-top:hover{border-color:#c9ced9; color:var(--ink); background:var(--bg-dim)}
.to-top:active{transform:translateY(1px)}
/* فوق شريط الشراء الثابت في صفحات المنتج والدفع */
.p-product .to-top, .p-checkout .to-top{bottom:86px}
@media(min-width:900px){.p-product .to-top,.p-checkout .to-top{bottom:22px}}
/* واجهة الموبايل: الزرّ فوق الشريط السفلي (62px) — وفوق شريط الشراء
   في صفحة المنتج والسلة — لا تحتهما */
html.rz-mobile body.has-tabbar .to-top{bottom:calc(62px + 16px + env(safe-area-inset-bottom))}
html.rz-mobile body.p-product.has-tabbar .to-top{bottom:calc(62px + 78px + 16px + env(safe-area-inset-bottom))}
html.rz-mobile body.p-cart.has-tabbar .to-top{bottom:calc(62px + 76px + 16px + env(safe-area-inset-bottom))}

/* ============================================================
   صفحة التتبع — عرض كامل ومتناسق (يلغي أي قواعد سابقة)
   ============================================================ */
.p-track .page{
  max-width:100% !important;
  display:flex; flex-direction:column; min-height:100vh;
}
.p-track .store-head{max-width:1080px; margin:0 auto; width:100%}
.p-track .track-hero{padding:40px 20px 46px}
.p-track .track-hero > *{max-width:900px; margin-inline:auto}
.p-track .wrap{max-width:900px; margin:0 auto; width:100%; flex:1}
.p-track .site-foot{margin-top:auto}

@media(min-width:720px){
  .p-track .track-form{
    display:grid; grid-template-columns:1fr 1fr auto; gap:10px; align-items:stretch;
  }
  .p-track .track-hero h1{font-size:1.7rem}
}
/* الشحنات جنب بعض على الشاشات الكبيرة */
@media(min-width:900px){
  /* شحنةٌ واحدة في عمودٍ عريض متوسّط — كان عمودين فتقف الشحنة الواحدة ضيّقةً في جانب (المالك 2026-10-11) */
  .p-track .wrap{display:grid; grid-template-columns:minmax(0,1fr); gap:16px; align-items:start; padding-top:22px; max-width:760px}
  .p-track .wrap > h2.sec{grid-column:1 / -1; margin-top:0}
  .p-track .wrap > .err-msg, .p-track .wrap > p{grid-column:1 / -1}
  .p-track .ship{margin-bottom:0}
}

/* --- شعار Rozvella --- */
.logo{display:inline-flex;align-items:center;gap:8px}
.rose{width:26px;height:26px;flex:0 0 auto}
.top:not(.light) .logo .rose{filter:brightness(0) invert(1)}   /* أبيض على الهيدر الأزرق فقط */
.site-foot .logo .rose{filter:none}    /* الفوتر فاتح — الشعار بألوانه */
.track-hero .logo .rose{filter:brightness(0) invert(1)}

/* --- شريط الثقة في الفوتر --- */
.trust-bar{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:1080px;
  margin:0 auto 30px;padding-bottom:26px;border-bottom:1px solid #2a2f3c}
@media(min-width:760px){.trust-bar{grid-template-columns:repeat(4,1fr)}}
.tb{text-align:center}
.tb span{font-size:1.5rem;display:block;margin-bottom:6px}
.tb b{display:block;color:#fff;font-size:.85rem;margin-bottom:3px}
.tb i{font-style:normal;color:#9aa1b1;font-size:.75rem;line-height:1.5}
.contact-line{margin-top:12px;font-size:.82rem;color:#4a5060}
.contact-line a{color:var(--brand);text-decoration:none;font-weight:600}
.foot-bottom a{color:var(--ink-soft);text-decoration:none}
.foot-bottom a:hover{color:var(--brand);text-decoration:underline}
.foot-legal{max-width:1080px;margin:8px auto 0;font-size:.74rem;line-height:1.8;color:var(--ink-soft);text-align:center}
.foot-legal a{color:inherit;text-decoration:underline}

/* ============================================================
   معرض الصور · الكمية · الوصف والمواصفات
   ============================================================ */
.gallery{width:100%}
.gmain{background:var(--bg-dim);border-radius:16px;overflow:hidden;aspect-ratio:1;
  display:grid;place-items:center}
.gmain img{width:100%;height:100%;object-fit:cover}
.gthumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding-bottom:4px;
  scrollbar-width:thin}
.gthumb{flex:0 0 auto;width:58px;height:58px;border-radius:10px;overflow:hidden;
  border:2px solid transparent;background:var(--bg-dim);cursor:pointer;padding:0}
/* الصور المصغّرة في وسط المعرض لأي عدد (طلب المالك 2026-10-09: كانت تلتصق بالجنب). هامشٌ تلقائي
   على الطرفين بدل justify-content:center — فإن زادت عن العرض تمرّرت من أولها ولا تُقصّ */
.gthumb:first-child{margin-inline-start:auto}
.gthumb:last-child{margin-inline-end:auto}
.gthumb img{width:100%;height:100%;object-fit:cover;display:block}
.gthumb.on{border-color:var(--brand)}
.gthumb:hover{border-color:var(--line)}

/* الكمية */
.qty-row{display:flex;align-items:center;gap:12px;margin:16px 0 4px;flex-wrap:wrap}
.qty-label{font-size:.85rem;color:var(--ink-soft);font-weight:500}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);
  border-radius:11px;overflow:hidden}
.qty button{width:38px;height:38px;border:0;background:#fff;font-size:1.2rem;
  cursor:pointer;color:var(--ink);font-family:inherit;line-height:1}
.qty button:hover{background:var(--bg-dim)}
.qty span{min-width:40px;text-align:center;font-weight:700;font-size:.95rem}
.qty-total{font-weight:700;color:var(--brand);font-size:.95rem}

/* الوصف والمواصفات */
.extra{margin-top:26px}
.desc-body{font-size:.9rem;line-height:1.85;color:#2c3240;white-space:pre-line}
.desc-body.clipped{max-height:150px;overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 62%,transparent);
  mask-image:linear-gradient(#000 62%,transparent)}
.more-btn{margin-top:8px;background:none;border:0;color:var(--brand);
  font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;padding:4px 0}
.spec-tbl{width:100%;border-collapse:collapse;font-size:.87rem}
.spec-tbl td{padding:10px 0;border-bottom:1px solid var(--line);vertical-align:top}
.spec-tbl td:first-child{color:var(--ink-soft);width:42%;padding-inline-end:12px}
.spec-tbl td:last-child{font-weight:500}
.store-box{background:var(--bg-dim);border-radius:12px;padding:14px;font-size:.85rem}
.store-box .srate{color:var(--ink-soft);font-size:.8rem;margin-top:4px}

/* ============================================================
   إصلاح: المعرض داخل .pshot — نلغي القص والنسبة الثابتة
   ============================================================ */
.pshot:has(.gallery){aspect-ratio:auto;overflow:visible;background:none;display:block;border-radius:0}
.gallery .gmain{border-radius:var(--radius);aspect-ratio:1/1;overflow:hidden;
  background:radial-gradient(120% 120% at 20% 15%,#dfe7ff 0%,#b9c9ff 40%,#7e9bff 100%)}
.pshot .gallery img{width:100%;height:100%;object-fit:cover}
/* الصورة الرئيسية تظهر كاملةً بلا قصّ (المالك 2026-10-10: صور التجار الطولية والعرضية كانت تُقصّ في المربّع فلا
   يظهر المنتج كله). contain: الصورة المربّعة لا تتغيّر، وغيرها تظهر كاملةً بهامش أبيض. المصغّرات تبقى مربّعة مقصوصة. */
/* الصورة تُثبَّت على المربّع كله (absolute): كانت ارتفاعها 100% من صفّ شبكةٍ تلقائيّ الارتفاع، فتأخذ ارتفاعها
   الطبيعي وتطول عن المربّع فيقصّها — وهذا سبب القصّ نفسه، لا object-fit وحده. */
.gallery .gmain{position:relative}
.pshot .gallery .gmain img,.gallery .gmain #mainImg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}

/* أزرار الألوان بصورها */
.chips.swatch{display:flex;gap:9px;flex-wrap:wrap}
.chips.swatch button{display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:6px;border:2px solid var(--line);border-radius:12px;background:#fff;
  cursor:pointer;font:inherit;min-width:66px}
.chips.swatch button[aria-pressed="true"]{border-color:var(--brand);background:#eef2ff}
.chips.swatch img{width:52px;height:52px;object-fit:cover;border-radius:8px;display:block}
.chips.swatch .sw-name{font-size:.7rem;color:var(--ink-soft);max-width:70px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}
.chips.swatch button[aria-pressed="true"] .sw-name{color:var(--brand);font-weight:600}

/* ============================================================
   السلة
   ============================================================ */
.cart-btn{position:relative;display:inline-grid;place-items:center;width:40px;height:40px;
  border-radius:11px;color:inherit;text-decoration:none;margin-inline-start:auto}
.cart-btn:hover{background:rgba(255,255,255,.12)}
.p-doc .cart-btn:hover,.p-cart .cart-btn:hover{background:var(--bg-dim)}
/* شارة العدد: كانت min-width تُقصّ الرقم من خانتين فصاعدًا لأن
   place-items:center يوسّط داخل مربّع ثابت. الآن العرض يتبع الرقم
   ويظهر كاملًا (12 · 99 · 100). */
.cart-count{position:absolute;top:2px;inset-inline-end:2px;
  min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;
  border-radius:9px;background:#ff4757;color:#fff;font-size:.66rem;font-weight:700;
  line-height:14px;text-align:center;white-space:nowrap;
  display:inline-block;width:auto}

.cart-wrap{max-width:1000px;margin:0 auto;padding:22px 20px 40px}
.cart-title{font-size:1.4rem;margin-bottom:18px}
.cart-title small{font-size:.85rem;color:var(--ink-soft);font-weight:400}
.cart-grid{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:860px){.cart-grid{grid-template-columns:1fr 320px;align-items:start}}

.citem{display:grid;grid-template-columns:78px 1fr auto;gap:13px;padding:14px 0;
  border-bottom:1px solid var(--line)}
.cimg{width:78px;height:78px;border-radius:11px;overflow:hidden;background:var(--bg-dim);display:block}
.cimg img{width:100%;height:100%;object-fit:cover}
.ctitle{font-size:.9rem;font-weight:600;color:var(--ink);text-decoration:none;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cattrs{font-size:.76rem;color:var(--ink-soft);margin-top:3px}
.cprice{font-size:.85rem;color:var(--ink-soft);margin-top:4px}
.crow{display:flex;align-items:center;gap:12px;margin-top:8px}
.crm{background:none;border:0;color:#c0392b;font:inherit;font-size:.78rem;cursor:pointer;padding:0}
.crm:hover{text-decoration:underline}
.cline{font-weight:700;font-size:.95rem;white-space:nowrap}

.cart-sum{background:var(--bg-dim);border-radius:14px;padding:18px;position:sticky;top:20px}
.cart-sum h2{font-size:1rem;margin-bottom:14px}
.cart-sum .row{display:flex;justify-content:space-between;gap:10px;font-size:.88rem;margin-bottom:9px}
.cart-sum .muted{color:var(--ink-soft);font-size:.8rem}
.cart-sum .total{border-top:1px solid var(--line);padding-top:11px;margin-top:11px;font-size:1rem}
.cart-sum .cta{width:100%;margin-top:14px}
.cart-sum .keep{display:block;text-align:center;margin-top:10px;font-size:.84rem;
  color:var(--brand);text-decoration:none}
.cart-note{font-size:.73rem;color:var(--ink-soft);line-height:1.6;margin-top:12px}

.cart-empty{text-align:center;padding:60px 20px}
.ce-icon{font-size:3rem;margin-bottom:12px}
.cart-empty h1{font-size:1.3rem;margin-bottom:8px}
.cart-empty p{color:var(--ink-soft);font-size:.9rem}

/* زر أضف للسلة — رمادي مملوء، بنفس مقاس "اشترِ الآن" تمامًا:
   الإطار 2px كان يزيده أربعة بكسلات عن جاره فيبدوان غير متساويين. */
/* "أضف للسلة" بهيئة سلّة الشريط العلوي (‎.cart-btn.in-bar‎): بيضاء
   بإطارٍ رفيع، لا مربّع رمادي مملوء. الزرّ الأزرق وحده هو الإجراء
   الأساسي، وهذا ثانويٌّ فلا ينافسه في الثقل البصري.
   أي تغيير هنا يُنسخ إلى ‎.cart-btn.in-bar‎ و‎.qadd‎. */
.cta.alt{background:#fff;color:var(--ink);border:1.5px solid var(--line);
  box-shadow:0 1px 3px rgba(18,21,28,.08)}
.cta.alt:hover{background:#fff;border-color:var(--brand);color:var(--brand)}
.cta.alt.ok{background:#fff;border-color:var(--go);color:var(--go)}

/* الزرّان متساويان تمامًا: كان "Add to cart" يلتفّ سطرين فيطول عن
   "Buy now" ويبدو الصفّ غير مستوٍ. المساواة بالارتفاع ومنع الالتفاف. */
#buybar{display:flex;gap:10px;align-items:stretch}
#buybar .cta{flex:1 1 0;min-width:0;display:grid;place-items:center;
  white-space:nowrap;padding:0 14px;min-height:52px;line-height:1.2}
@media(max-width:420px){
  /* شاشة ضيّقة: النصّ يصغر بدل أن يلتفّ أو يُقصّ */
  #buybar .cta{font-size:.92rem;padding:0 8px}
  .buybar .p{font-size:1.05rem}
}

/* ── زرّا الشراء في عمود التفاصيل (الكمبيوتر) — placeBuybar في product.html ──
   تحت الكمية مباشرةً، فيُريان لحظة فتح المنتج بلا نزولٍ عبر الشرح.
   «اشترِ الآن» ممتلئٌ بالأزرق: هو الإجراء الأساسي ويجب أن يُرى أوّلًا.
   «أضف للسلة» أبيض بإطارٍ رفيع كسلّة الشريط العلوي (انظر ‎.cta.alt‎)
   ومعه أيقونة السلة، وبالمقاس نفسه تمامًا. السعر مكرّرٌ فوقهما فيُخفى هنا. */
/* ── زرّ الدفع: أهمّ زرٍّ في المتجر ──
   كان أبيضَ بإطار ويلتفّ نصُّه سطرين على الموبايل («ادفع $40.27 (٢٬٠٨٤ ج.م)
   بأمان»). الآن أزرق مملوءٌ بسطرٍ واحد، والمقفول رماديٌّ واضح. */
.p-checkout #payBtn{background:var(--brand);color:#fff;border-color:var(--brand);
  min-height:54px;border-radius:14px;font-size:1rem;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;box-shadow:0 6px 16px rgba(31,79,255,.22)}
.p-checkout #payBtn:hover{background:#1a43d9}
.p-checkout #payBtn:disabled{background:#eef0f4;color:#8a93a3;border-color:#e1e4ea;box-shadow:none;opacity:1}
@media(max-width:420px){.p-checkout #payBtn{font-size:.93rem;padding:0 10px}}

/* شكل الزرّين مشتركٌ بين الكمبيوتر والموبايل (كان الموبايل «اشترِ الآن»
   أبيضَ بإطار والكمبيوتر أزرقَ مملوءًا). الموضع والمقاس للكمبيوتر أدناه. */
#buybar .cta{display:flex;align-items:center;justify-content:center;gap:8px;
  transition:background .15s, box-shadow .15s}
#buybar #buyBtn{background:var(--brand);color:#fff;border-color:var(--brand);
  box-shadow:0 6px 16px rgba(31,79,255,.22)}
#buybar #buyBtn:hover{background:#1a43d9}
#buybar #addBtn::before{
  content:""; width:18px; height:18px; flex:0 0 18px; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='18' cy='20' r='1.4'/%3E%3Cpath d='M2.5 3h2.6l2.4 11.6a1.6 1.6 0 0 0 1.6 1.3h8.7a1.6 1.6 0 0 0 1.6-1.2L21.5 7H6.2'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='18' cy='20' r='1.4'/%3E%3Cpath d='M2.5 3h2.6l2.4 11.6a1.6 1.6 0 0 0 1.6 1.3h8.7a1.6 1.6 0 0 0 1.6-1.2L21.5 7H6.2'/%3E%3C/svg%3E") center/contain no-repeat;
}
#buybar .cta:disabled, #buybar #buyBtn:disabled{
  background:#eef0f4; color:#8a93a3; border-color:#e1e4ea; box-shadow:none; cursor:not-allowed; opacity:1;
}
/* نصّ الزرّ المقفول أطول من «اشترِ الآن» («Not available in your country»،
   «Indisponible dans votre pays»…) فكان يخرج من المربّع — يلتفّ سطرين
   ويصغر قليلًا، بكل اللغات. */
#buybar #buyBtn:disabled{white-space:normal; text-align:center; line-height:1.25;
  font-size:.86rem; padding:6px 12px; min-width:0; overflow-wrap:anywhere}

@media (min-width: 900px){
  .p-product .wrap > #buybar.inline-buy{
    grid-column:2; position:static; border:0; background:none;
    padding:0; margin:14px 0 6px; max-width:none; gap:12px;
  }
  #buybar.inline-buy .p{display:none}
  #buybar.inline-buy .cta{
    min-height:54px; border-radius:14px; font-size:1.02rem; letter-spacing:.1px;
    display:flex; align-items:center; justify-content:center; gap:9px;
    transition:background .15s, box-shadow .15s, transform .05s;
  }
  #buybar.inline-buy #buyBtn{
    background:var(--brand); color:#fff; border-color:var(--brand);
    box-shadow:0 6px 16px rgba(31,79,255,.22);
  }
  #buybar.inline-buy #buyBtn:hover{background:#1a43d9; box-shadow:0 8px 20px rgba(31,79,255,.30)}
  #buybar.inline-buy #addBtn::before{
    content:""; width:19px; height:19px; flex:0 0 19px; background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='18' cy='20' r='1.4'/%3E%3Cpath d='M2.5 3h2.6l2.4 11.6a1.6 1.6 0 0 0 1.6 1.3h8.7a1.6 1.6 0 0 0 1.6-1.2L21.5 7H6.2'/%3E%3C/svg%3E") center/contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='18' cy='20' r='1.4'/%3E%3Cpath d='M2.5 3h2.6l2.4 11.6a1.6 1.6 0 0 0 1.6 1.3h8.7a1.6 1.6 0 0 0 1.6-1.2L21.5 7H6.2'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  /* مقفولان (نفاد أو «غير متاح لبلدك») — رماديّان واضحان لا شبه نشِطين */
  #buybar.inline-buy .cta:disabled, #buybar.inline-buy #buyBtn:disabled{
    background:#eef0f4; color:#8a93a3; border-color:#e1e4ea; box-shadow:none; cursor:not-allowed; opacity:1;
  }
  #buybar.inline-buy #buyBtn:disabled{white-space:normal; text-align:center; line-height:1.25;
    font-size:.9rem; padding:6px 14px; min-width:0; overflow-wrap:anywhere}
}

/* ============================================================
   الفلاتر والبحث والمنتجات المشابهة
   ============================================================ */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 4px;align-items:center}
.fsel{border:1.5px solid var(--line);background:#fff;border-radius:10px;
  padding:9px 12px;font:inherit;font-size:.82rem;color:var(--ink);cursor:pointer;
  max-width:170px}
.fsel:hover{border-color:var(--brand)}
.fsel:focus{outline:none;border-color:var(--brand)}
.fclear{border:0;background:#eef2ff;color:var(--brand);border-radius:10px;
  padding:9px 14px;font:inherit;font-size:.82rem;font-weight:600;cursor:pointer}
.fcount{font-size:.8rem;color:var(--ink-soft);margin:8px 0 2px}
.grid.loading{opacity:.45;transition:opacity .15s}

/* منتجات مشابهة */
.rel-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:640px){.rel-grid{grid-template-columns:repeat(3,1fr)}}
.rel-card{text-decoration:none;color:inherit;display:block}
.rel-im{aspect-ratio:1;border-radius:11px;overflow:hidden;background:var(--bg-dim);margin-bottom:7px}
.rel-im img{width:100%;height:100%;object-fit:cover}
.rel-tt{font-size:.78rem;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;margin-bottom:4px}
.rel-pr{font-size:.85rem}
.rel-pr b{color:var(--ink)}
.rel-pr s{color:var(--ink-soft);font-size:.75rem;margin-inline-start:5px}
.rel-card:hover .rel-im{outline:2px solid var(--brand);outline-offset:2px}

/* ============================================================
   الأقسام المميزة · التقييمات · صفحة المراجعة
   ============================================================ */
.feat{margin:24px 0}
.feat-h{font-size:1.05rem;margin-bottom:12px}
.feat-row{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory}
.feat-card{flex:0 0 150px;scroll-snap-align:start;text-decoration:none;color:inherit}
@media(min-width:700px){.feat-card{flex:0 0 175px}}
.feat-im{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;
  background:var(--bg-dim);margin-bottom:7px}
.feat-im img{width:100%;height:100%;object-fit:cover}
.feat-badge{position:absolute;top:7px;inset-inline-start:7px;background:#ff4757;color:#fff;
  font-size:.68rem;font-weight:700;padding:3px 7px;border-radius:7px}
.feat-tt{font-size:.78rem;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;margin-bottom:3px}
.feat-st{font-size:.72rem;color:#f0a500;margin-bottom:2px}
.feat-st small{color:var(--ink-soft)}
.feat-pr b{font-size:.9rem}
.feat-pr s{color:var(--ink-soft);font-size:.75rem;margin-inline-start:5px}
.feat-card:hover .feat-im{outline:2px solid var(--brand);outline-offset:2px}

/* التقييمات */
.rsum{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;
  background:var(--bg-dim);border-radius:13px;padding:16px}
.rbig{text-align:center;min-width:82px}
.rbig b{display:block;font:700 2rem 'Space Grotesk';line-height:1}
.rbig .rstars{color:#f0a500;font-size:.85rem;display:block;margin:3px 0}
.rbig small{color:var(--ink-soft);font-size:.72rem}
.rbars{display:grid;gap:5px}
.rbar{display:grid;grid-template-columns:34px 1fr 34px;gap:8px;align-items:center;font-size:.72rem}
.rst{color:var(--ink-soft)}
.rtrack{height:7px;background:#e6e8ee;border-radius:4px;overflow:hidden}
.rfill{display:block;height:100%;background:#f0a500;border-radius:4px}
.rpct{color:var(--ink-soft);text-align:end}
.rsrc{font-size:.72rem;color:var(--ink-soft);margin-top:8px;line-height:1.6}
.rsub{font-size:.95rem;margin:20px 0 10px}
.ritem{border-bottom:1px solid var(--line);padding:13px 0}
.rhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.82rem}
.rver{color:var(--go);font-size:.7rem;font-weight:600}
.rdate{color:var(--ink-soft);font-size:.72rem;margin-inline-start:auto}
.rstars.sm{color:#f0a500;font-size:.8rem;margin:4px 0}
.rstars .dim{color:#d8dbe3}
.rtitle{font-weight:600;font-size:.86rem;margin-bottom:3px}
.rbody{font-size:.84rem;line-height:1.7;color:#2c3240;margin:0}
.rnone{font-size:.83rem;color:var(--ink-soft);margin-top:14px}

/* صفحة كتابة المراجعة */
.rv-wrap{max-width:520px;margin:0 auto;padding:24px 20px 40px}
.rv-h1{font-size:1.35rem;margin-bottom:16px}
.rv-prod{display:flex;align-items:center;gap:12px;background:var(--bg-dim);
  border-radius:12px;padding:12px;margin-bottom:20px;font-size:.85rem;line-height:1.5}
.rv-prod img{width:54px;height:54px;object-fit:cover;border-radius:9px;flex:0 0 auto}
.rv-label{font-size:.82rem;font-weight:600;margin:16px 0 7px}
.rv-stars{display:flex;gap:5px}
.rv-stars button{font-size:2rem;line-height:1;background:none;border:0;cursor:pointer;
  color:#d8dbe3;padding:0;transition:color .12s}
.rv-stars button.on{color:#f0a500}
.rv-hint{font-size:.8rem;color:var(--ink-soft);margin-top:5px;min-height:18px}
.rv-wrap input,.rv-wrap textarea{width:100%;border:1.5px solid var(--line);border-radius:11px;
  padding:12px 14px;font:inherit;font-size:.88rem;resize:vertical}
.rv-wrap input:focus,.rv-wrap textarea:focus{outline:none;border-color:var(--brand)}
.rv-note{font-size:.75rem;color:var(--ink-soft);text-align:center;margin-top:12px;line-height:1.6}
.rv-msg{text-align:center;padding:50px 20px;color:var(--ink-soft);font-size:.95rem}

/* ============================================================
   مبدّل اللغة [ Arabic | English ]
   ============================================================ */
.lang-switch{display:inline-flex;align-items:center;gap:2px;border:1.5px solid currentColor;
  border-radius:9px;padding:3px;font-size:.76rem;opacity:.9}
.lang-switch button{background:none;border:0;color:inherit;font:inherit;font-size:.76rem;
  padding:4px 10px;border-radius:6px;cursor:pointer;opacity:.65;white-space:nowrap}
.lang-switch button.on{background:rgba(255,255,255,.22);opacity:1;font-weight:700}
.lang-switch .sep{opacity:.35;font-size:.7rem}
.lang-switch.on-light{color:var(--ink-soft);border-color:var(--line)}
.lang-switch.on-light button.on{background:#eef2ff;color:var(--brand)}

/* الفوتر الغني */
.foot-grid.five,.foot-grid.six{grid-template-columns:1fr}
@media(min-width:720px){.foot-grid.five,.foot-grid.six{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.foot-grid.five{grid-template-columns:repeat(5,1fr)}}
/* ستة أعمدة: عمود الأقسام أُضيف، والأخير (النبذة) يأخذ عرضًا أوسع
   كي لا تنضغط النبذة وأيقونات التواصل في عمودٍ ضيّق */
@media(min-width:1000px){.foot-grid.six{grid-template-columns:repeat(5,1fr) 1.4fr}}
/* عمود الدفع — بلا شفافية تُبهت الأيقونات */
.pay-icons{display:flex;gap:8px;margin-bottom:10px;align-items:center;flex-wrap:wrap}
/* البطاقات مستطيلة والعملات مربّعة: الارتفاع ثابت والعرض بحسب الشكل */
.pay-icons img{height:24px;width:auto}
.pay-txt{font-size:.78rem;line-height:1.7;color:#4a5060;margin-bottom:10px}
.pay-net{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pay-net img{width:20px;height:20px}
.pay-net span{font-size:.72rem;color:#4a5060;font-weight:600}

/* شارات المنتج المشروطة */
.viral.deal{background:#ffe9e9;color:#c0392b}
.viral.deal .pulse{background:#c0392b}
.viral.top{background:#fff6e0;color:#9a6200}
.viral.top .pulse{background:#f0a500}
.viral.hot{background:#eef2ff;color:#1f4fff}
.viral.hot .pulse{background:#1f4fff}

/* ============================================================
   شريط الأقسام + الدرج الجانبي
   ============================================================ */
.cat-bar{display:flex;align-items:center;gap:9px;margin-top:12px}
.cat-bar .cats{margin-top:0;flex:1;min-width:0}

.drawer-back{position:fixed;inset:0;background:rgba(18,21,28,.5);z-index:80;
  opacity:0;transition:opacity .22s}
.drawer-back.on{opacity:1}
.drawer{position:fixed;top:0;bottom:0;inset-inline-start:0;width:min(310px,84vw);
  background:#fff;z-index:81;box-shadow:0 0 40px rgba(0,0,0,.22);
  transform:translateX(-100%);transition:transform .24s ease;
  display:flex;flex-direction:column}
[dir="rtl"] .drawer{transform:translateX(100%)}
.drawer.open{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:1px solid var(--line)}
.drawer-head b{font-size:1rem}
.drawer-head button{border:0;background:none;font-size:1.2rem;cursor:pointer;
  color:var(--ink-soft);padding:4px 8px;line-height:1}
.drawer-body{overflow-y:auto;padding:8px}
.dcat{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;
  padding:13px 14px;border-radius:11px;font:inherit;font-size:.9rem;cursor:pointer;
  text-align:start;color:var(--ink)}
.dcat:hover{background:var(--bg-dim)}
.dcat.on{background:#eef2ff;color:var(--brand);font-weight:600}
.dcat i{font-style:normal;font-size:1.15rem;flex:0 0 auto}

/* ============================================================
   زر الأقسام مع التسمية + شريط رائج اليوم
   ============================================================ */
.cat-bar{margin-bottom:4px}

.trend{margin:18px 0 6px}
.trend-h{display:flex;align-items:baseline;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.trend-h h2{font-size:1.08rem}
.trend-h small{font-size:.74rem;color:var(--ink-soft)}
.trend-row{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory}
.trend-card{flex:0 0 152px;scroll-snap-align:start;text-decoration:none;color:inherit}
@media(min-width:700px){.trend-card{flex:0 0 178px}}
.trend-im{position:relative;aspect-ratio:1;border-radius:13px;overflow:hidden;
  background:var(--bg-dim);margin-bottom:7px}
.trend-im img{width:100%;height:100%;object-fit:cover;transition:transform .25s}
.trend-card:hover .trend-im img{transform:scale(1.05)}
.trend-badge{position:absolute;top:7px;inset-inline-start:7px;background:#ff4757;color:#fff;
  font-size:.7rem;font-weight:700;padding:3px 8px;border-radius:8px}
.trend-tt{font-size:.79rem;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;margin-bottom:3px}
.trend-st{font-size:.73rem;color:#f0a500;margin-bottom:2px}
.trend-st small{color:var(--ink-soft)}
.trend-pr b{font-size:.92rem}
.trend-pr s{color:var(--ink-soft);font-size:.76rem;margin-inline-start:5px}

/* الخاصية hidden يجب أن تتغلّب على أي display في الأصناف */
[hidden]{display:none !important}

/* ============================================================
   إصلاح: صفوف التمرير الأفقي (رائج · مميزة · مشابهة)
   ============================================================ */
.trend-row,.feat-row{
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:12px;
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:10px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.trend-row::-webkit-scrollbar,.feat-row::-webkit-scrollbar{height:6px}
.trend-row::-webkit-scrollbar-thumb,.feat-row::-webkit-scrollbar-thumb{
  background:#d8dbe3;border-radius:3px}
.trend-card,.feat-card{
  flex:0 0 152px !important;
  width:152px;
  max-width:152px;
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
}
@media(min-width:700px){
  .trend-card,.feat-card{flex:0 0 178px !important;width:178px;max-width:178px}
}
/* العنوان بارتفاع ثابت حتى تتساوى الكروت */
.trend-tt,.feat-tt{
  min-height:2.3em;
  font-size:.78rem;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;margin-bottom:4px;
}
.trend-st,.feat-st{min-height:1.1em}
.trend-pr,.feat-pr{margin-top:auto}
.trend-im,.feat-im{width:100%;aspect-ratio:1;flex:0 0 auto}

/* رؤوس الصفوف موحّدة */
.feat-head,.trend-h{display:flex;align-items:baseline;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.feat-h,.trend-h h2{font-size:1.05rem;font-weight:700;margin:0}
.feat{margin:26px 0}
.trend{margin:20px 0 8px}
/* الأقسام المميزة تظهر بعد فاصل خفيف */
#featured .feat:first-child{padding-top:6px;border-top:1px solid var(--line)}

/* فاصل قسم "كل المنتجات" */
.all-head{margin:30px 0 12px;padding-top:20px;border-top:1px solid var(--line)}
.all-head h2{font-size:1.15rem;font-weight:700}
.filters{margin:0 0 14px}

/* ============================================================
   زر الأقسام — قاعدة واحدة نهائية (تُلغي ما قبلها)
   ============================================================ */
.menu-btn{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px;
  width:auto !important;
  height:38px !important;
  padding:0 12px !important;
  border:1.5px solid var(--line) !important;
  background:#fff !important;
  border-radius:10px;
  font:inherit;
  font-size:.8rem;
  font-weight:500;
  color:var(--ink-soft) !important;
  cursor:pointer;
  white-space:nowrap;
  line-height:1;
}
.menu-btn .lines{
  display:flex !important;
  flex-direction:column;
  justify-content:center;
  gap:3px;
  flex:0 0 auto;
}
.menu-btn .lines i,
.menu-btn span:not(.lines){
  display:block;
  width:14px !important;
  height:1.8px !important;
  background:#9aa0ad !important;      /* رمادي هادئ — ليس أسود */
  border-radius:2px;
}
.menu-btn em{
  font-style:normal;
  display:flex;
  align-items:center;
  line-height:1;
  color:var(--ink-soft);
  max-width:130px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.menu-btn:hover{border-color:var(--brand) !important}
.menu-btn:hover .lines i{background:var(--brand) !important}
.menu-btn:hover em{color:var(--brand)}


/* ════════════════════════════════════════════════════════════
   الهيدر الأبيض + الشريط الموحّد  —  الكتلة المعتمدة الوحيدة
   ════════════════════════════════════════════════════════════ */

/* ── الهيدر ── */
/* الهيدر: خلفية ناعمة تميّزه عن بياض الصفحة */
.top.light{background:var(--bg-dim);color:var(--ink);
  border-bottom:1px solid var(--line);box-shadow:none}
.top.light .logo{color:var(--ink);display:flex;align-items:center;gap:9px}
.top.light .logo .rose{filter:none;opacity:1}
.top.light .meta{color:var(--ink-soft);border-inline-start:1px solid var(--line);
  padding-inline-start:12px;margin-inline-start:2px}
.top.light .tlink{color:var(--brand);opacity:1}
.top.light .lang-switch{color:var(--ink-soft);border-color:var(--line)}
.top.light .lang-switch button.on{background:#eef2ff;color:var(--brand)}
@media(max-width:820px){.top.light .meta{display:none}}

/* ── الشريط: صف واحد دائمًا ── */
.toolbar{
  display:flex;
  flex-wrap:nowrap;          /* لا يلتف أبدًا — لا على الموبايل ولا غيره */
  align-items:center;
  gap:8px;
  margin:14px 0 10px;
  min-width:0;
  /* الشريط يُملأ بالجافاسكربت؛ نحجز ارتفاعه مقدّمًا كي لا
     يقفز ما تحته عند ظهوره (كان أعلى مصدر لـCLS) */
  min-height:42px;
}
.toolbar .scroll-part{min-height:42px}
.toolbar .cats{display:none !important}

/* الجزء المتمرّر (كل شيء عدا زر الأقسام) */
.toolbar .scroll-part{
  display:flex;
  align-items:center;
  gap:8px;
  flex:1 1 auto;
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
  /* متّسع رأسي داخل صندوق القصّ: شارة عدد السلة تخرج قليلًا عن
     حدّ الزر، وبدون هذا الحشو يقصّها الشريط من أعلى.
     الهامش السالب يُبقي ارتفاع الشريط كما هو. */
  padding-block:7px;
  margin-block:-7px;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.toolbar .scroll-part::-webkit-scrollbar{display:none}
.toolbar .scroll-part > *{flex:0 0 auto}

/* زر الأقسام — ثابت لا يتمرّر */
.toolbar .menu-btn{flex:0 0 auto}

/* البحث */
.bar-search{position:relative;flex:1 1 200px;min-width:150px;max-width:300px}
.bar-search input{
  width:100%;height:38px;
  border:1.5px solid var(--line);border-radius:10px;
  padding:0 34px 0 12px;
  font:inherit;font-size:.82rem;
  background:#fff;color:var(--ink);
}
.bar-search input:focus{outline:none;border-color:var(--brand)}
/* أيقونة البحث داخل المربع — بسيطة ومدمجة */
.bar-search .ico{
  position:absolute;
  inset-inline-end:12px;
  top:50%;
  transform:translateY(-50%);
  display:grid;
  place-items:center;
  color:var(--ink-soft);
  pointer-events:none;
  transition:color .16s;
}
.bar-search input:focus ~ .ico{color:var(--ink)}

/* القوائم والأزرار */
.toolbar .fsel{
  height:38px;padding:0 10px;
  border:1.5px solid var(--line);background:#fff;border-radius:10px;
  font:inherit;font-size:.8rem;color:var(--ink);cursor:pointer;
  max-width:150px;
}
.toolbar .fsel:hover{border-color:var(--brand)}
.toolbar .fclear{
  height:38px;padding:0 12px;border:0;border-radius:10px;
  background:#eef2ff;color:var(--brand);
  font:inherit;font-size:.8rem;font-weight:600;cursor:pointer;
}

/* السلة */
.cart-btn.in-bar{
  width:42px;height:38px;flex:0 0 auto;
  border:1.5px solid var(--line);border-radius:10px;background:#fff;
  color:var(--ink);margin-inline-start:0;
  display:inline-grid;place-items:center;position:relative;
  overflow:visible;
}
.cart-btn.in-bar:hover{border-color:var(--brand);color:var(--brand);background:#fff}
/* الشارة تخرج قليلًا عن حدّ الزر، والشريط المتمرّر يقصّ ما يتجاوزه
   (لذلك يوجد padding في ‎.scroll-part‎ يمنحها متّسعًا). */
.cart-btn.in-bar .cart-count{top:-6px;inset-inline-end:-6px;border:2px solid #fff}

/* ── الموبايل: صف واحد لا يلتف أبدًا ── */
@media(max-width:700px){
  .toolbar{
    gap:0;
    flex-wrap:nowrap !important;
    align-items:center;
  }
  .toolbar .menu-btn{
    flex:0 0 auto !important;
    margin-inline-end:8px;
    z-index:2;
    padding:0 10px !important;
    font-size:.76rem;
    box-shadow:6px 0 8px -7px rgba(18,21,28,.18);
  }
  [dir="rtl"] .toolbar .menu-btn{box-shadow:-6px 0 8px -7px rgba(18,21,28,.18)}
  .toolbar .menu-btn em{max-width:88px}

  /* كل ما عدا الزر يتمرّر أفقيًا */
  .toolbar .scroll-part{
    flex:1 1 0 !important;
    min-width:0 !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
  }
  .toolbar .scroll-part > *{flex:0 0 auto !important}
  .bar-search{flex:0 0 150px !important;min-width:150px;max-width:150px}
  .toolbar .fsel{max-width:none;font-size:.76rem;padding:0 8px}
}

/* شاشات ضيقة جدًا */
@media(max-width:400px){
  .toolbar .menu-btn em{max-width:60px}
  .bar-search{flex:0 0 130px !important;min-width:130px;max-width:130px}
}

/* روابط التواصل في الفوتر */
.social{display:flex;gap:9px;margin:12px 0 4px;flex-wrap:wrap}
/* روابط التواصل — واضحة على الفوتر الفاتح */
.social a{
  width:38px;height:38px;
  display:grid;place-items:center;
  border-radius:10px;
  background:var(--bg-dim);
  border:1px solid var(--line);
  color:#3d4350;
  text-decoration:none;
  transition:background .16s,color .16s,border-color .16s,transform .16s;
}
.social a:hover{background:#eef2ff;border-color:#d5ddff;color:var(--brand);transform:translateY(-2px)}

/* تنبيه نفاد المنتج عند الدفع */
.unavail{background:#fff5f5;border:1.5px solid #ffd4d4;border-radius:12px;
  padding:15px 17px;margin:14px 0;font-size:.88rem;line-height:1.75;color:#8a2b2b}
.unavail b{display:block;font-size:.95rem;margin-bottom:6px;color:#c0392b}
.unavail ul{margin:6px 0;padding-inline-start:20px}
.unavail li{font-size:.83rem}
.unavail span{display:block;font-size:.8rem;color:#8a6060;margin-top:4px}
.unavail .ua-link{display:inline-block;margin-top:10px;color:var(--brand);
  text-decoration:none;font-weight:600;font-size:.85rem}

/* ============================================================
   شجرة الأقسام في الدرج الجانبي
   ============================================================ */
.dcat{position:relative}

/* القسم الرئيسي القابل للطي */
.dcat.dgroup{font-weight:600}
.dcat.dgroup .darrow{font-style:normal;font-size:.7rem;color:var(--ink-soft);
  margin-inline-start:auto;transition:transform .2s;display:inline-block}
.dcat.dgroup.open .darrow{transform:rotate(180deg)}
.dcat.dgroup.open{color:var(--brand);background:#f5f7ff}
.dcat.dgroup.open i{filter:none}

/* الفروع */
.dsub{padding-inline-start:14px;border-inline-start:2px solid var(--line);
  margin:2px 0 6px 0;margin-inline-start:20px}
.dcat.dchild{padding:11px 12px;font-size:.85rem}
.dcat.dchild i{font-size:1rem}

/* تقريب السعر بالعملة المحلية (مساعدة — الدفع بالدولار) */
.local-price{font-size:.82rem;color:var(--ink-soft);margin-top:3px;font-weight:500}
/* سطر الإرجاع جنب السعر (المالك 2026-10-26) */
.ret-line{display:inline-flex;align-items:center;gap:6px;margin:4px 0 8px;font-size:.84rem;font-weight:600;color:var(--ink-soft);text-decoration:none}
.ret-line svg{width:16px;height:16px;flex:none}
.ret-line:hover{color:var(--ink)}
.cart-sum .local-price{text-align:end;margin-top:4px}

/* تنبيهات ملخّص الطلب (جمارك · مدة التوصيل) */
.order-notices{margin-top:12px;display:grid;gap:8px}
.order-notices:empty{display:none}
.note-item{font-size:.77rem;line-height:1.75;color:var(--ink-soft);
  padding:10px 12px;border-radius:9px;background:var(--bg-dim)}
.note-item.warn{background:#fff8ec;border:1px solid #ffe2b0;color:#7a5200}
.note-item.slow{background:#fff4f4;border:1px solid #ffd9d9;color:#9a3a3a}

/* ============================================================
   منتقي اللغة — زر في الهيدر + قائمة
   ============================================================ */
.lang-btn{
  display:inline-flex; align-items:center; gap:6px;
  height:32px; padding:0 11px;
  border:1.5px solid transparent; border-radius:999px;
  background:none; color:var(--brand);
  font:inherit; font-size:.76rem; font-weight:600;
  cursor:pointer; white-space:nowrap;
  transition:background .16s, border-color .16s;
}
.lang-btn:hover{background:#eef2ff}
.lang-btn.open{background:#eef2ff;border-color:#d5ddff}
.lang-btn .lf-code{letter-spacing:.04em}
.lang-btn.in-head{margin-inline-start:10px}

/* احتياطي: لو لم يوجد هيدر */
.lang-btn:not(.in-head){
  position:fixed; inset-block-end:18px; inset-inline-end:18px; z-index:120;
  height:40px; box-shadow:0 4px 16px rgba(18,21,28,.12);
}

.lang-back{position:fixed;inset:0;z-index:118;background:rgba(18,21,28,.28)}

.lang-sheet{
  position:fixed; inset-block-start:64px; inset-inline-end:20px;
  z-index:121; width:min(340px, calc(100vw - 40px));
  background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:0 14px 40px rgba(18,21,28,.18);
  overflow:hidden;
  animation:lsIn .15s ease-out;
}
@keyframes lsIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.ls-head{padding:13px 16px 9px;font-size:.78rem;font-weight:700;color:var(--ink-soft);
  border-bottom:1px solid var(--line)}
.ls-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:8px;max-height:62vh;overflow-y:auto}
.ls-opt{
  display:flex; align-items:center; gap:9px;
  padding:10px 12px; border:0; border-radius:9px;
  background:none; font:inherit; font-size:.84rem; color:var(--ink);
  cursor:pointer; text-align:start; width:100%;
}
.ls-opt:hover{background:var(--bg-dim)}
.ls-opt.on{background:var(--bg-dim);color:var(--ink);font-weight:700}
/* علمٌ صورةً لا إيموجي: ويندوز لا يرسم إيموجي الأعلام فتظهر حرفين (SA) */
.ls-flag{width:20px;height:20px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(18,21,28,.12)}
.ls-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media(max-width:520px){
  .lang-sheet{inset-inline:14px;inset-block-start:58px;width:auto}
  .lang-btn.in-head{height:30px;padding:0 9px;font-size:.72rem}
}

/* ── البنية موجودة دائمًا؛ الطي على الموبايل فقط ── */
@media(min-width:720px){
  .site-foot .fc-body{display:block}
  .site-foot .fc-arrow{display:none}
  .site-foot .foot-col h4[role="button"]{cursor:default;pointer-events:none}
}

@media(max-width:719px){
  .foot-grid,
  .foot-grid.five,
  .foot-grid.six{gap:0}

  .site-foot .foot-col{
    border-bottom:1px solid var(--line);
    padding:0;
  }
  .site-foot .foot-col:last-child{border-bottom:0}

  /* العنوان يصير زر الطي */
  .site-foot .foot-col h4[role="button"]{
    display:flex; align-items:center; justify-content:space-between;
    margin:0; padding:15px 2px;
    cursor:pointer; user-select:none;
    font-size:.9rem;
  }

  /* السهم يشير لأسفل، ويدور لأعلى عند الفتح */
  .site-foot .fc-arrow{
    width:8px; height:8px; flex:0 0 auto; margin-inline-start:10px;
    border-inline-end:2px solid var(--ink-soft);
    border-block-end:2px solid var(--ink-soft);
    transform:rotate(45deg);
    transition:transform .2s ease;
    position:relative; top:-2px;
  }
  .site-foot .foot-col.open .fc-arrow{transform:rotate(-135deg);top:2px}

  /* المحتوى مخفي تمامًا حتى الفتح */
  .site-foot .fc-body{display:none}
  .site-foot .foot-col.open .fc-body{display:block;padding:0 2px 14px}

  /* عمود العلامة والدفع: مفتوح دائمًا بلا سهم */
  .site-foot .foot-about h4[role="button"]{pointer-events:none;padding-bottom:8px}
  .site-foot .foot-about .fc-arrow{display:none}
  .site-foot .foot-about .fc-body{display:block;padding-bottom:14px}
}

/* ============================================================
   ثبات التخطيط (CLS)
   كل حاوية صورة تحجز مساحتها قبل التحميل، فلا "تنطّ" الصفحة
   ولا يضغط الزائر على العنصر الخطأ.
   ============================================================ */
.card .im,
.im{
  position:relative;
  aspect-ratio:1;
  width:100%;
  overflow:hidden;
  border-radius:12px;
  background:var(--bg-dim);
  display:grid;
  place-items:center;
  flex:0 0 auto;
}
.im img,
.trend-im img,
.feat-im img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* كانت الصور هنا opacity:0 حتى يُضيف site.js الفئة .ready بعد
   اكتمال التحميل (لتظهر مكتملة لا سطرًا سطرًا).
   الثمن كان أكبر من الفائدة: المتصفح لا يَعُدّ عنصرًا شفافًا
   مرشّحًا لـ LCP أصلًا، فكان أكبر عنصر في الصفحة لا يُحتسب إلا
   بعد تنزيل site.js وتنفيذه — وإن تعثّر تحميله بقيت الصفحة
   بلا صور إطلاقًا. والصور الآن مصغّرة (~13KB) فتصل دفعة واحدة
   عمليًا ولا يظهر الرسم التدريجي أصلًا.
   الفئة .ready ما زال site.js يضيفها؛ لا ضرر منها. */
.im .ph{font-size:.7rem;color:var(--ink-soft);letter-spacing:.08em}

/* الشبكة نفسها: ارتفاع أدنى يمنع القفز أثناء التحميل */
/* الشبكة تُملأ بعد نداء الشبكة — نحجز مساحتها بدقة:
   الصف = صورة مربعة + بيانات ≈ 300px، وصفّان فوق الطية */
/* المساحة محجوزة لمنع القفزة عند التحميل، لكن الصفوف بارتفاعها الطبيعي: بلا align-content كانت نتيجةٌ واحدة تتمدّد لتملأ الـ640 كلها (بحث بنتيجة واحدة). */
#grid{min-height:640px;align-content:start}
@media(max-width:700px){#grid{min-height:520px}}
#trendRow{min-height:220px}
#featured{min-height:240px}

/* الفوتر لا يقفز عند حقنه بالجافاسكربت */
/* الفوتر يُحقن بالجافاسكربت بعد التحميل — ارتفاع محجوز */
.site-foot{min-height:420px}
@media(max-width:719px){.site-foot{min-height:560px}}

/* ============================================================
   حجز مساحة المحتوى المحقون بالجافاسكربت
   صفحتا المنتج والسلة تبدآن بسطر "جارٍ التحميل" ثم يُستبدل
   بالصفحة كاملة، فينزاح كل ما تحته دفعةً واحدة (قِيس على صفحة
   المنتج: CLS = 1.65). حجز ارتفاع تقريبي يجعل الحقن يقع في
   مساحة محجوزة أصلًا فلا يتحرّك شيء مرئي.
   ============================================================ */
.p-product #app,
.p-cart #app{min-height:150vh}
@media(min-width:900px){
  /* على الشاشات العريضة الصورة والتفاصيل جنبًا إلى جنب،
     فالمحتوى أقصر بكثير */
  .p-product #app,
  .p-cart #app{min-height:100vh}
}


/* ── بطاقة بيانات الشركة ── */
.legal-card{
  background:var(--bg-dim);border:1px solid var(--line);border-radius:12px;
  padding:6px 16px;margin:14px 0;
}
.legal-row{
  display:flex;justify-content:space-between;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--line);
  font-size:.87rem;
}
.legal-row:last-child{border-bottom:0}
.legal-row span{color:var(--ink-soft);flex:0 0 auto}
.legal-row b{
  color:var(--ink);text-align:end;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
.legal-row a{color:var(--brand);text-decoration:none}
.legal-vat{
  font-size:.84rem;color:var(--ink-soft);
  background:#f0f7ff;border-inline-start:3px solid var(--brand);
  padding:11px 14px;border-radius:8px;margin-top:12px;
}
@media(max-width:520px){
  .legal-row{flex-direction:column;gap:3px;padding:9px 0}
  .legal-row b{text-align:start}
}

/* ============================================================
   اقتراحات البحث الفورية
   لوحة مثبَّتة بالإحداثيات أسفل الحقل — خارج الشريط لأن الشريط
   يقصّ ما يتجاوزه أفقيًا ورأسيًا.
   ============================================================ */
.sugg{
  position:fixed;z-index:120;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 12px 32px rgba(18,21,28,.16);
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;transform:translateY(-4px);transition:opacity .12s,transform .12s;
}
.sugg.on{opacity:1;transform:none}
.sugg .sg{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;text-decoration:none;color:var(--ink);
  border-bottom:1px solid #f1f3f7;
}
.sugg .sg:last-of-type{border-bottom:0}
.sugg .sg:hover,.sugg .sg.on{background:#f4f7ff}
.sg-im{
  flex:0 0 44px;width:44px;height:44px;border-radius:8px;overflow:hidden;
  background:var(--bg-dim);display:grid;place-items:center;
}
.sg-im img{width:100%;height:100%;object-fit:cover}
.sg-tx{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.sg-tt{
  font-size:.82rem;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.sg-ct{font-size:.7rem;color:var(--ink-soft)}
.sg-pr{flex:0 0 auto;font-family:'Space Grotesk';font-weight:700;color:#1e8e3e;font-size:.85rem}
.sg-all{
  display:block;width:100%;border:0;border-top:1px solid var(--line);
  background:#f7f9ff;color:var(--brand);
  font:600 .8rem inherit;padding:11px;cursor:pointer;
}
.sg-all:hover{background:#eef2ff}
.sg-none{padding:18px;text-align:center;color:var(--ink-soft);font-size:.85rem}
/* لوحة «رائج الآن» — والخانة فارغة */
.sugg .qk-h{font-weight:700;font-size:.85rem;color:var(--ink);padding:12px 14px 6px}
.sugg .qk-row{display:flex;flex-wrap:wrap;gap:8px;padding:0 14px 10px}
.sugg .qk-row:last-child{padding-bottom:14px}
.sugg .qk{
  display:inline-flex;align-items:center;gap:6px;max-width:100%;
  border:1px solid var(--line);background:#fff;color:var(--ink);
  border-radius:999px;padding:6px 12px;font:500 .8rem inherit;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sugg .qk i{font-style:normal;font-size:.9rem;line-height:1}
.sugg .qk:hover{background:#f4f7ff;border-color:#c9d6ff}

/* ============================================================
   ورقة الخيارات — إضافة سريعة للسلة من البطاقة
   ============================================================ */
.qs-back{
  position:fixed;inset:0;z-index:140;background:rgba(18,21,28,.45);
  opacity:0;transition:opacity .2s;
}
.qs-back.on{opacity:1}
.qs{
  position:fixed;z-index:141;inset-inline:0;bottom:0;
  max-height:86vh;display:flex;flex-direction:column;
  background:#fff;border-radius:18px 18px 0 0;
  box-shadow:0 -8px 32px rgba(18,21,28,.2);
  transform:translateY(100%);transition:transform .22s ease-out;
}
.qs.on{transform:none}
@media(min-width:700px){
  .qs{
    inset-inline:auto;left:50%;bottom:auto;top:50%;
    width:440px;max-height:80vh;border-radius:16px;
    transform:translate(-50%,-46%) scale(.96);opacity:0;
    transition:transform .2s,opacity .2s;
  }
  .qs.on{transform:translate(-50%,-50%);opacity:1}
}
.qs-grab{
  flex:0 0 auto;width:38px;height:4px;border-radius:2px;
  background:#d8dce6;margin:8px auto 2px;
}
@media(min-width:700px){.qs-grab{display:none}}
.qs-head{display:flex;gap:12px;align-items:flex-start;padding:12px 16px 10px;position:relative}
.qs-im{flex:0 0 68px;width:68px;height:68px;border-radius:10px;overflow:hidden;background:var(--bg-dim)}
.qs-im img{width:100%;height:100%;object-fit:cover}
.qs-info{flex:1 1 auto;min-width:0;padding-inline-end:26px}
.qs-tt{
  font-size:.88rem;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.qs-pr{margin-top:6px;font-family:'Space Grotesk'}
.qs-pr b{color:#1e8e3e;font-size:1.15rem}
.qs-pr s{color:var(--ink-soft);font-size:.85rem;margin-inline-start:6px}
.qs-x{
  position:absolute;top:8px;inset-inline-end:12px;
  border:0;background:none;color:var(--ink-soft);font-size:1rem;cursor:pointer;
  width:28px;height:28px;border-radius:8px;
}
.qs-x:hover{background:var(--bg-dim)}
.qs-body{flex:1 1 auto;overflow-y:auto;padding:4px 16px 8px}
.qs-opt{margin-bottom:12px}
.qs-lb{font-size:.78rem;color:var(--ink-soft);margin-bottom:6px}
.qs-chips{display:flex;flex-wrap:wrap;gap:7px}
.qs-chips button{
  border:1.5px solid var(--line);background:#fff;color:var(--ink);
  border-radius:9px;padding:7px 12px;font:inherit;font-size:.8rem;cursor:pointer;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.qs-chips button[aria-pressed="true"]{border-color:var(--brand);background:#eef2ff;color:var(--brand);font-weight:600}
.qs-chips button[disabled]{opacity:.4;cursor:not-allowed;text-decoration:line-through}
.qs-foot{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
}
.qs-more{flex:0 0 auto;color:var(--brand);text-decoration:none;font-size:.82rem;font-weight:600}
.qs-add{
  flex:1 1 auto;border:0;border-radius:11px;background:#6b7280;color:#fff;
  font:600 .92rem inherit;padding:13px;cursor:pointer;
}
.qs-add:hover{background:#4b5563}
.qs-add[disabled]{background:#c8cddb;cursor:not-allowed}

/* ── إشعار صغير ── */
.rz-toast{
  position:fixed;z-index:160;bottom:26px;left:50%;transform:translate(-50%,14px);
  background:#12151c;color:#fff;border-radius:11px;
  padding:11px 18px;font-size:.85rem;font-weight:600;
  box-shadow:0 8px 24px rgba(18,21,28,.28);
  opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;
}
.rz-toast.on{opacity:1;transform:translate(-50%,0)}

/* ============================================================
   زر السلة السريع — بجوار السعر على كل بطاقة
   رماديّ محايد بحجم لمسة الإصبع (36px)، والبطاقة كلها تبقى
   قابلة للنقر: الرابط يُمدَّد بـ ::after فوقها، والزر فوقه.
   ============================================================ */
.prow{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  position:relative;min-width:0;
}
.pcol{display:flex;flex-direction:column;gap:2px;min-width:0}
/* الرابط بلا position، فيقيس الغطاء إلى البطاقة نفسها (أقرب سلف
   مُموضَع) فيغطّيها كلها بما فيها صفّ السعر — دون امتداد خارجها. */
.card,.rowcard{position:relative}
.card-l::after,.rc-l::after{
  content:"";position:absolute;inset:0;z-index:1;
}

/* نفس هيئة سلّة الشريط العلوي (‎.cart-btn.in-bar‎): بيضاء بإطار رفيع
   ومربّع مستدير — لا دائرة رمادية مملوءة. أي تغيير هنا يُنسخ هناك. */
.qadd{
  position:relative;z-index:2;flex:0 0 auto;
  width:36px;height:36px;border:1.5px solid var(--line);border-radius:10px;
  background:#fff;color:var(--ink);
  display:grid;place-items:center;cursor:pointer;
  box-shadow:0 1px 3px rgba(18,21,28,.08);
  transition:transform .14s,border-color .14s,color .14s,box-shadow .14s;
}
.qadd:hover{border-color:var(--brand);color:var(--brand);background:#fff;
  box-shadow:0 3px 9px rgba(18,21,28,.12)}
.qadd:active{transform:scale(.92)}
.qadd:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.qadd.busy{opacity:.55;pointer-events:none}
.qadd.ok{border-color:#1e8e3e;color:#1e8e3e;background:#fff}
@media(hover:none){.qadd:hover{border-color:var(--line);color:var(--ink);
  box-shadow:0 1px 3px rgba(18,21,28,.08)}}

/* صفوف "رائج اليوم" و"الأعلى تقييمًا" و"أقوى الخصومات"
   و"وصل حديثًا" و"شاهدته مؤخرًا" — نفس بنية البطاقة */
.rowcard .rc-l{
  display:flex;flex-direction:column;flex:1;min-width:0;
  text-decoration:none;color:inherit;
}
.rowcard .prow{margin-top:auto;padding-top:2px}
.rowcard .qadd{width:32px;height:32px}
.rowcard .qadd svg{width:15px;height:15px}
.rowcard .trend-pr,.rowcard .feat-pr{margin-top:0;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── صفحة المنتج: مسار التنقّل والتكبير ── */
.crumb{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:.8rem;
  color:var(--ink-soft);margin-bottom:10px}
.crumb a{color:var(--ink-soft);text-decoration:none}
.crumb a:hover{color:var(--brand);text-decoration:underline}
.gmain{position:relative}
/* تكبير بالماوس (product.html) — للكمبيوتر وحده؛ .gmain يقصّ ما يخرج */
@media (hover:hover) and (pointer:fine){
  .gmain #mainImg{transition:transform .18s ease-out;will-change:transform}
  .gmain #mainImg.zooming{transform:scale(2.2)}
}
.zoom-hint{position:absolute;inset-inline-end:10px;inset-block-end:10px;width:34px;height:34px;
  border-radius:50%;border:0;background:rgba(18,21,28,.55);color:#fff;font-size:1rem;
  display:grid;place-items:center;cursor:zoom-in}
/* عارض الصورة المكبّرة */
.lbox{position:fixed;inset:0;z-index:9999;background:rgba(10,12,18,.94);
  display:grid;place-items:center;padding:20px}
.lbox img{max-width:min(100%,1000px);max-height:86vh;object-fit:contain;border-radius:6px}
.lbox button{position:absolute;background:rgba(255,255,255,.12);color:#fff;border:0;
  width:44px;height:44px;border-radius:50%;font-size:1.4rem;cursor:pointer;line-height:1}
.lbox button:hover{background:rgba(255,255,255,.22)}
.lb-x{top:16px;inset-inline-end:16px}
/* الأسهم تتبع اتجاه الصفحة: "التالي" يمين في LTR ويسار في RTL */
.lb-prev{inset-inline-start:16px;top:50%;transform:translateY(-50%)}
.lb-next{inset-inline-end:16px;top:50%;transform:translateY(-50%)}
[dir="rtl"] .lb-prev{transform:translateY(-50%) scaleX(-1)}
[dir="rtl"] .lb-next{transform:translateY(-50%) scaleX(-1)}
.lb-n{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:#fff;
  font-size:.82rem;opacity:.75;direction:ltr}
@media(max-width:560px){.lbox button{width:38px;height:38px}}
/* الأسعار معزولة اتجاهيًا: "$12.00" بجوار عربي كان يُعرض "12.00$" */
.price b,.price s,.qty-total,.rel-pr b,.rel-pr s{unicode-bidi:isolate}

/* ── اختيار الدولة: بحث فوق القائمة ── */
.cty-wrap{position:relative}
.cty-search{width:100%;margin-bottom:8px}
.cty-none{font-size:.8rem;color:#c0392b;margin-top:6px}
/* أسماء الدول تحمل لغتين واتجاهين — العزل يمنع قفز الرمز والأقواس */
#country option{unicode-bidi:isolate}
/* شارة "يُشحن مع طلبك": القيمة الحقيقية للعميل أن هذا الصنف لا
   يضيف رسوم شحن — الشحن يُحسب لكل متجر لا لكل صنف. */
.rel-ship{font-size:.7rem;color:var(--go);font-weight:600;margin-top:3px;line-height:1.4}

/* ── شارة «نفد المخزون» على بطاقة المنتج ──
   المنتج النافد صار يبقى معروضًا: يُتصفَّح ويُفتح ويُشارَك، ولا يُشترى
   حتى يعود المخزون. فلا بدّ أن يعرف الزائر حاله من الشبكة قبل أن
   يفتحه، لا بعد أن يصل إلى زرٍّ معطَّل. */
.im > .oos{
  position:absolute; inset-inline-start:8px; top:8px; z-index:2;
  background:rgba(20,22,30,.82); color:#fff;
  font-size:.72rem; font-weight:700; line-height:1;
  padding:.34rem .55rem; border-radius:7px;
  backdrop-filter:blur(3px);
}
.card:has(.oos) .im img{ opacity:.62; filter:saturate(.65); }

/* ── «أضِفها لطلبك» — ما يُشحن مع المنتج في نفس الطرد ──
   شريطٌ أفقيّ تحت صندوق الشراء مباشرةً. مميَّزٌ بخلفيةٍ وإطارٍ خفيف
   كي لا يُقرأ امتدادًا لـ«منتجات مشابهة» أسفل الصفحة: الغرضان
   مختلفان — تلك بدائل، وهذه إضافاتٌ تصل في نفس الشحنة. */
.sw{
  margin:18px 0 6px; padding:14px 0 4px;
  border-block:1px solid var(--line,#e6e8ee);
}
.sw-head h2{ font-size:1rem; font-weight:700; margin:0 0 2px; }
.sw-head p{ font-size:.8rem; color:#5a6070; margin:0 0 11px; }
/* شبكةٌ تلتفّ، لا شريطَ تمرير.
   كان شريطًا أفقيًّا فيختفي أكثرُه خلف الحافة ولا يُعرف عددُه.
   والشبكة تُظهر الجميع تحت بعضهم، فيُرى ما يُضاف دفعةً واحدة. */
.sw-rail{
  display:grid; gap:10px;
  grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
}
.sw-card{
  border:1px solid var(--line,#e6e8ee); border-radius:11px;
  background:var(--card,#fff); overflow:hidden;
  display:flex; flex-direction:column;
}
.sw-l{ text-decoration:none; color:inherit; display:block; }
.sw-im{ aspect-ratio:1; background:#f4f5f8; }
.sw-im img{ width:100%; height:100%; object-fit:cover; display:block; }
/* ── سطران بالضبط، بلا سطرٍ ثالثٍ يطلّ ──
   السطرُ المقطوع من نصفه كان حسابًا خاطئًا لا قصًّا فاشلًا:
   `min-height` يقع على المحتوى وحده حين يكون الصندوق content-box،
   فيُضاف الحشو فوقه ويبقى فراغٌ بمقدارِه يتسرّب منه سطرٌ ناقص.
   فالصندوق هنا border-box صراحةً، والارتفاع مقيَّدٌ من الطرفين
   (min و max معًا) على سطرين تمامًا — لا يزيد ولا ينقص.

   وسطران بقرار المالك: البطاقة تعرّف لا تشرح، والشرح كاملًا في
   صفحة المنتج. و`title` يُظهره عند المرور بالفأرة. */
.sw-tt{
  /* ── أرقامٌ صحيحة لا كسور ──
     كان `‎.74rem × 1.4` يساوي ‎16.576px، فارتفاع السطرين كسريّ
     يقرّبه المتصفّح فتبقى شعرةٌ يظهر فيها رأسُ السطر الثالث.
     وبالبكسل الصحيح (‎16 × 2 = 32) لا كسرَ ولا تقريب.
     و`content-box` مقصود: الارتفاع هنا للنصّ وحده والحشو فوقه. */
  box-sizing:content-box;
  font-size:12px; line-height:16px;
  height:32px;                 /* سطران بالضبط */
  padding:7px 8px 5px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
  overflow-wrap:anywhere;      /* كلمةٌ طويلة لا تكسر البطاقة */
}
.sw-foot{
  margin-top:auto; padding:0 8px 8px;
  display:flex; align-items:center; justify-content:space-between; gap:6px;
}
.sw-pr b{ font-size:.82rem; }
.sw-pr s{ font-size:.68rem; color:#8b90a0; margin-inline-start:4px; }
/* الزرّ مربّعٌ صغير: الغرض إضافةٌ سريعة لا دعوةٌ منافِسة لزرّ الشراء */
.sw-add{
  flex:0 0 auto; width:29px; height:29px; border-radius:8px;
  border:1px solid #1f4fff; background:#1f4fff; color:#fff;
  font-size:1.05rem; line-height:1; cursor:pointer; padding:0;
}
.sw-add:hover{ filter:brightness(1.08); }
.sw-add.ok{ background:#10965a; border-color:#10965a; cursor:default; }
.sw-add.no{ background:#c0392b; border-color:#c0392b; }
@media (max-width:900px){
  /* عمودان على الموبايل — البطاقة تبقى مقروءةً والصورة كافية */
  .sw-rail{ grid-template-columns:repeat(2, 1fr); gap:9px; }
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .sw-head p{ color:#9aa0b0; }
  :root:not([data-theme="light"]) .sw-im{ background:#1b1f28; }
}
:root[data-theme="dark"] .sw-head p{ color:#9aa0b0; }
:root[data-theme="dark"] .sw-im{ background:#1b1f28; }

/* ── شارة «شحن من أمريكا · 3-7 أيام» ──
   ميزةٌ مقيسة لا شعار: مسار USPS المحلّي من المستودع الأمريكي
   يسلّم في 3-7 أيام، مقابل 4-14 يومًا من الصين. ولا تظهر إلا
   لزائرٍ أمريكيّ ومنتجٍ مخزونُه هناك.
   خضراء هادئة لا حمراء: هذه بشارةٌ لا إنذار. */
.usb{
  display:inline-flex; align-items:center; gap:.3rem; width:fit-content;
  margin:.15rem 0 .1rem;
  font-size:.7rem; font-weight:700; line-height:1.2;
  color:#0d6b3f; background:rgba(16,150,90,.11);
  border:1px solid rgba(16,150,90,.28);
  padding:.2rem .42rem; border-radius:6px;
  white-space:nowrap;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .usb{
    color:#5fd6a0; background:rgba(16,150,90,.16); border-color:rgba(95,214,160,.3);
  }
}
:root[data-theme="dark"] .usb{
  color:#5fd6a0; background:rgba(16,150,90,.16); border-color:rgba(95,214,160,.3);
}

/* ── قائمة الدول: لوحةٌ نضعها بأنفسنا ──
   القائمة الأصلية `<select>` تقرّر اتجاه فتحها بنفسها فتنفتح لأعلى
   حين يضيق ما تحتها، ولا يملك CSS منعها. فنُبقيها في الصفحة قيمةً
   للنموذج ونُخفيها، ونرسم لوحةً `position:absolute; top:100%` تنفتح
   **تحت الزرّ دائمًا**، والبحث في أعلاها لا بجوارها. */
.cty-native{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;
  clip:rect(0 0 0 0);overflow:hidden}
.cty-btn{width:100%;display:flex;align-items:center;justify-content:space-between;
  gap:.5rem;font:inherit;text-align:start;cursor:pointer;
  padding:.72rem .9rem;border:1px solid var(--line,#e3e6ee);border-radius:12px;
  background:var(--card,#fff);color:inherit}
.cty-btn:focus-visible{outline:2px solid var(--go,#1f4fff);outline-offset:1px}
.cty-btn .ph{color:var(--dim,#8b90a0)}
.cty-caret{font-size:.75rem;opacity:.6;flex:none}
.cty-panel{position:absolute;top:calc(100% + 6px);inset-inline:0;z-index:40;
  background:var(--card,#fff);border:1px solid var(--line,#e3e6ee);border-radius:12px;
  box-shadow:0 12px 32px rgba(15,18,30,.14);padding:.55rem}
.cty-panel .cty-search{margin-bottom:.5rem}
.cty-list{max-height:min(46vh,320px);overflow-y:auto;overscroll-behavior:contain}
.cty-grp{font-size:.72rem;font-weight:700;opacity:.62;padding:.45rem .55rem .25rem}
.cty-opt{padding:.5rem .6rem;border-radius:8px;cursor:pointer;unicode-bidi:isolate}
.cty-opt:hover,.cty-opt.on{background:var(--bg-dim,#f2f4f9)}
.cty-opt[aria-selected="true"]{background:var(--go,#1f4fff);color:#fff;font-weight:600}

/* ── علامات قبول وسائل الدفع في صفحة الدفع ──
   شعارٌ يُعرَف في لمحة، بينما سطرٌ نصّي («Visa · Mastercard · Apple
   Pay») يحتاج قراءةً ويُقنع أقلّ. الوسوم رموزٌ متجهيّة مضمّنة في
   الصفحة نفسها — لا صور خارجية تحجبها سياسة أمن المحتوى. */
.pay-marks{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;align-items:center}
.pay-marks svg{width:36px;height:24px;flex:none;border-radius:4px;
  box-shadow:0 1px 2px rgba(18,21,28,.10)}
/* غير المتاح بعد يبهت قليلًا — الشارة بجواره تقول «قريبًا» */
.sel:has(input:disabled) .pay-marks,
.pay-marks.soon{opacity:.72}
@media(max-width:380px){.pay-marks svg{width:32px;height:21px}}

/* العملات الرقمية: أقراصٌ دائرية تُميّزها عن مستطيلات البطاقات فورًا */
.pay-coins svg{width:24px;height:24px;border-radius:50%;box-shadow:0 1px 2px rgba(18,21,28,.14)}
.pay-coins svg:first-child,.pay-coins svg:nth-child(2){width:27px;height:27px}
.pm-sep{width:1px;height:16px;background:var(--line,#e3e6ee);margin:0 3px;flex:none}
.pm-more{font-size:.72rem;font-weight:700;color:var(--ink-soft,#6b7080);
  background:var(--bg-dim,#f2f4f9);border-radius:999px;padding:2px 7px;line-height:1.5}
.pm-more:empty{display:none}

/* الأيقونات صور SVG من /assets/coins — نضبط مقاسها هنا */
.pay-coins img{width:24px;height:24px;flex:none;border-radius:50%;
  box-shadow:0 1px 2px rgba(18,21,28,.14)}
.pay-coins img:first-child,.pay-coins img:nth-child(2){width:27px;height:27px}

/* بطاقات الدفع في الفوتر — Stripe. مستطيلات بجانب أقراص العملات
   فوقها: النوعان مختلفان ويجب أن يُفرَّقا بلا قراءة. */
.pay-cards{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:10px}
.pay-cards img{width:34px;height:23px;border-radius:4px;
  box-shadow:0 1px 2px rgba(18,21,28,.10)}
.pay-cards-txt{margin-top:6px;margin-bottom:0}

/* ── شريط وسائل الدفع أسفل الفوتر ──
   كان العمود الضيّق يُجبر عشر أيقونات على الالتفاف سطرين. هنا صفٌّ
   واحد بعرض الفوتر في المساحة التي كانت فارغة، والبطاقات مستطيلة
   والعملات دائرية فيُفرَّق بينها بلا قراءة. */
.foot-pay{border-top:1px solid rgba(0,0,0,.07);margin-top:26px;padding-top:18px;text-align:center}
.foot-pay-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}
.foot-pay-row img{height:24px;width:36px;border-radius:4px;
  box-shadow:0 1px 2px rgba(18,21,28,.10);background:#fff}
.foot-pay-row img.coin{width:24px;height:24px;border-radius:50%}
.foot-pay-row img.coin.net{width:20px;height:20px}
.foot-pay-sep{width:1px;height:20px;background:rgba(0,0,0,.12);margin:0 6px;flex:none}
.foot-pay-more{font-size:.72rem;font-weight:700;color:#4a5060;
  background:rgba(0,0,0,.05);border-radius:999px;padding:3px 8px}
.foot-pay-txt{font-size:.78rem;color:#4a5060;margin:10px 0 0;line-height:1.7}
@media(max-width:520px){
  .foot-pay-row img{height:21px;width:31px}
  .foot-pay-row img.coin{width:21px;height:21px}
  .foot-pay-row img.coin.net{width:18px;height:18px}
}

/* ── الشريط المتحرّك أعلى الموقع (site.js announceBar · src/announce.js) ──
   أزرقُ سماويّ متدرّج ونصٌّ أبيض بفواصل «+» (باختيار المالك). يتوقّف عند
   المرور، ولا يتحرّك لمن طلب تقليل الحركة من نظامه. */
.rz-ann{direction:ltr;background:linear-gradient(90deg,#1b8fd9 0%,#2aa6ea 50%,#1b8fd9 100%);color:#fff;border-bottom:0;overflow:hidden;
  font-size:.8rem;line-height:1;height:34px;display:flex;align-items:center;position:relative;z-index:46}
.rz-ann-track{display:flex;width:max-content;direction:ltr;animation:rz-ann-l 45s linear infinite;will-change:transform}
.rz-ann.rtl .rz-ann-track{animation-name:rz-ann-r}
.rz-ann:hover .rz-ann-track,.rz-ann:focus-within .rz-ann-track{animation-play-state:paused}
.rz-ann-seq{display:flex;align-items:center;flex:0 0 auto;white-space:nowrap}
.rz-ann-seq a,.rz-ann-seq span{color:inherit;text-decoration:none;padding:0 4px;font-weight:600;letter-spacing:.01em}
.rz-ann-seq a:hover{text-decoration:underline;text-underline-offset:3px}
.rz-ann-sep{font-style:normal;color:rgba(255,255,255,.9);padding:0 22px;font-size:.95rem;font-weight:700}
/* مكان الشريط محجوزٌ من أول رسم لمن ظهر له في زيارته السابقة (i18n.js
   يضع الصنف من الذاكرة) — كان يُضاف بعد الرسم فتقفز الصفحة 34px. */
html.rz-ann-wait body{padding-top:34px}
@keyframes rz-ann-l{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes rz-ann-r{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){
  .rz-ann{overflow-x:auto}.rz-ann-track{animation:none}.rz-ann-seq[aria-hidden="true"]{display:none}}

/* ── زرّ البحث الأزرق الملتصق بالخانة (باختيار المالك، بلون الشريط العلوي) ──
   الخانة والزرّ قطعةٌ واحدة: زوايا الخانة من جهة البداية، وزوايا الزرّ من
   جهة النهاية — خصائص منطقية تنقلب وحدها بين العربية والإنجليزية. */
.bar-search{display:flex;align-items:stretch;flex:1 1 320px !important;min-width:230px;max-width:none}
.bar-search input{flex:1 1 auto;min-width:0;padding:0 12px;
  border-start-end-radius:0;border-end-end-radius:0;border-inline-end:0}
.bar-search .sbtn{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:0 16px;
  border:0;border-start-end-radius:10px;border-end-end-radius:10px;
  background:linear-gradient(90deg,#1b8fd9,#2aa6ea);color:#fff;
  font:inherit;font-size:.82rem;font-weight:700;cursor:pointer;white-space:nowrap}
.bar-search .sbtn:hover{filter:brightness(1.06)}
.bar-search .sbtn:focus-visible{outline:2px solid #1b8fd9;outline-offset:2px}
.bar-search input:focus{border-color:#1b8fd9}
@media(max-width:400px){.bar-search{flex:0 0 200px !important;min-width:200px;max-width:200px}}
html.rz-mobile .p-home .bar-search{max-width:none !important;min-width:0 !important}
html.rz-mobile .p-home .bar-search input{padding:13px 14px;
  border-radius:0;border-start-start-radius:14px;border-end-start-radius:14px}
html.rz-mobile .p-home .bar-search .sbtn{padding:0 14px;border-start-end-radius:14px;border-end-end-radius:14px;font-size:.85rem}
@media(max-width:400px){html.rz-mobile .p-home .bar-search .sbtn span{display:none}}

/* ── صفّ الأدوات يملأ العرض كلّه (باختيار المالك) ──
   البحث يتمدّد في المتّسع، والسلة زرٌّ أعرض بلون زرّ البحث نفسه. */
.toolbar .cart-btn.in-bar{width:64px;height:38px;border-radius:10px;margin-inline-start:0;
  background:linear-gradient(90deg,#1b8fd9,#2aa6ea);color:#fff}
.toolbar .cart-btn.in-bar:hover{background:linear-gradient(90deg,#1b8fd9,#2aa6ea);filter:brightness(1.06)}
/* شارة «توصيل سريع» لمنتجات التجار المحليين — على هيئة .usb بلونٍ أخضر */
.usb.fastb{background:#e3f6ea;color:#136c33;border-color:#bfe6cc}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .usb.fastb{background:#143522;color:#8fe0ac;border-color:#1f5334} }
:root[data-theme="dark"] .usb.fastb{background:#143522;color:#8fe0ac;border-color:#1f5334}
.feat-card .usb{margin:2px 0 0}

/* ============================================================
   صور بطاقات المنتجات كاملة بلا قصّ (المالك 2026-10-10: زجاجة الزيت كانت مقصوصة من أسفل في بطاقتها
   على الرئيسية). الصورة تُثبَّت على مربّع البطاقة كله وتُحتوى داخله: المربّعة لا تتغيّر، وغيرها تظهر
   كاملةً على أبيض. يشمل الشبكة والصفوف («يوصلك بسرعة»، الرائج، المشابه). المصغّرات الصغيرة (السلة،
   اقتراحات البحث) تبقى مقصوصة.
   ============================================================ */
/* html في أول كل محدِّد: يغلب القواعد الأقدم الأخصّ (مثل ‎.card .im img‎ المضمَّنة في index.html) */
html .im,html .feat-im,html .trend-im,html .rel-im,html .sw-im{position:relative}
html .im img,html .card .im img,html .feat-im img,html .trend-im img,html .rel-im img,html .sw-im img,
html.rz-mobile .rz-grid .feat-im img,html.rz-mobile .rz-grid .trend-im img,html.rz-mobile .card .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}

/* مقاس النظر لكل عين — العدسات الطبية (0095) */
.rx-box{margin-top:4px}
.rx-eyes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rx-eye{display:flex;flex-direction:column;gap:6px;font-size:.84rem;color:var(--ink-soft)}
.rx-eye select{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;background:#fff;font:inherit;font-size:.95rem;color:var(--ink);direction:ltr;text-align:center}
.rx-eye select:focus{outline:none;border-color:var(--brand)}
.rx-hint{font-size:.8rem;color:var(--ink-soft);margin-top:8px}
.rx-box.need .rx-eye select{border-color:#c0392b}
.rx-box.need .rx-hint{color:#c0392b;font-weight:600}

/* خلفية مموّهة من الصورة نفسها: تملأ جانبي الصورة الطولية في الإطار المربّع بلا قصّ (2026-10-11) */
.gmain .gbg{position:absolute;inset:-24px;background-size:cover;background-position:center;filter:blur(22px) saturate(1.05);transform:scale(1.08);z-index:0;pointer-events:none}
.gallery .gmain #mainImg{z-index:1}
.gmain .zoom-hint{z-index:2}