/* =========================================================
   المتجر - التصميم الأساسي (Dark Premium Gaming, RTL)
   جميع الألوان معرّفة كـ CSS Variables ليتم التحكم بها من لوحة الإدارة
   ========================================================= */

:root{
    --color-bg: #0a0a0f;
    --color-surface: #15151d;
    --color-surface-alt: #1c1c26;
    --color-border: #2a2a35;
    --color-text: #f5f5f7;
    --color-text-muted: #ffffff;
    --color-accent: #ff7a1a;
    --color-accent-alt: #ff4d1f;
    --color-danger: #ef4136;
    --color-warning: #ffb84c;
    --font-family: 'Cairo', 'Tahoma', sans-serif;
    --header-height: 76px;
    --sidebar-w: 264px;
    --bottom-nav-height: 62px;
    --radius-sm: .5rem;
    --radius-md: .9rem;
    --radius-lg: 1.4rem;
    --shadow-card: 0 4px 24px rgba(0,0,0,.35);
    --gradient-accent: linear-gradient(135deg, var(--color-accent), var(--color-accent-alt));
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    background:var(--color-bg);
    color:var(--color-text);
    font-family:var(--font-family);
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
ul{list-style:none;margin:0;padding:0}
.container{width:100%;max-width:1320px;margin:0 auto;padding:0 1.25rem}

::selection{background:var(--color-accent);color:#fff}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--color-bg)}
::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:10px}

/* ---------- أزرار عامة ---------- */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
    padding:.75rem 1.6rem;border-radius:var(--radius-sm);font-weight:700;
    border:1px solid transparent;cursor:pointer;transition:.2s ease;font-size:.95rem;
}
.btn-primary{background:var(--gradient-accent);color:#fff;box-shadow:0 8px 20px -8px rgba(255,122,26,.6)}
.btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn-outline{background:transparent;border-color:var(--color-border);color:var(--color-text)}
.btn-outline:hover{border-color:var(--color-accent);color:var(--color-accent)}
.btn-accent{background:var(--color-accent-alt);color:#fff}
.btn-sm{padding:.5rem 1rem;font-size:.85rem}
.btn-block{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ---------- بطاقات ---------- */
.card{
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-card);
}

/* =========================================================
   الهيكل العام: Sidebar ثابت + Topbar
   ========================================================= */
.site-shell{display:flex;align-items:flex-start;min-height:100vh}

.site-sidebar{
    width:var(--sidebar-w);flex-shrink:0;position:sticky;top:0;height:100vh;
    background:var(--color-surface);border-inline-start:1px solid var(--color-border);
    display:flex;flex-direction:column;overflow-y:auto;z-index:1100;
}
.sidebar-brand{display:flex;align-items:center;gap:.6rem;padding:1.4rem 1.25rem;font-weight:800;font-size:1.2rem}
.sidebar-brand img{height:34px;width:auto;border-radius:.4rem}
.sidebar-brand .accent{color:var(--color-accent)}

.sidebar-nav{padding:.5rem .9rem;display:flex;flex-direction:column;gap:.3rem}
.sidebar-nav a{
    display:flex;align-items:center;gap:.85rem;padding:.85rem 1rem;border-radius:.75rem;
    font-weight:700;font-size:.96rem;line-height:1.3;color:#ffffff;opacity:1;
    transition:background-color .18s ease,color .18s ease,transform .18s ease;
}
.sidebar-nav a svg{width:20px;height:20px;flex-shrink:0;color:#ffffff;opacity:.92;transition:color .18s ease,opacity .18s ease}
.sidebar-nav a:hover{background:var(--color-surface-alt);color:#ffffff;transform:translateX(-2px)}
.sidebar-nav a:hover svg{opacity:1;color:var(--color-accent)}
.sidebar-nav a.active{background:var(--gradient-accent);color:#fff;box-shadow:0 6px 16px -6px rgba(255,122,26,.55)}
.sidebar-nav a.active svg{color:#fff;opacity:1}

.sidebar-support{margin:1rem .9rem;padding:1.1rem;border-radius:var(--radius-md);background:var(--color-surface-alt);border:1px solid var(--color-border);text-align:center}
.sidebar-support .icon{width:38px;height:38px;border-radius:50%;background:rgba(255,122,26,.14);color:var(--color-accent);display:flex;align-items:center;justify-content:center;margin:0 auto .5rem}
.sidebar-support h4{margin:0 0 .2rem;font-size:.9rem}
.sidebar-support p{margin:0 0 .8rem;font-size:.76rem;color:var(--color-text-muted)}

.sidebar-newsletter{margin:auto .9rem 1.25rem;padding:1.1rem;border-radius:var(--radius-md);background:var(--color-surface-alt);border:1px solid var(--color-border)}
.sidebar-newsletter h4{margin:0 0 .2rem;font-size:.85rem}
.sidebar-newsletter p{margin:0 0 .7rem;font-size:.74rem;color:var(--color-text-muted)}
.sidebar-newsletter form{display:flex;gap:.4rem}
.sidebar-newsletter input{
    flex:1;min-width:0;padding:.55rem .7rem;border-radius:.5rem;background:var(--color-bg);
    border:1px solid var(--color-border);color:var(--color-text);font-size:.78rem;font-family:inherit;
}
.sidebar-newsletter button{
    width:36px;height:36px;flex-shrink:0;border-radius:.5rem;background:var(--gradient-accent);
    color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;
}

.site-main{flex:1;min-width:0}

.site-topbar{
    position:sticky;top:0;z-index:1000;height:var(--header-height);
    display:flex;align-items:center;gap:1rem;padding:0 1.5rem;
    background:rgba(10,10,15,.75);backdrop-filter:blur(14px) saturate(140%);
    -webkit-backdrop-filter:blur(14px) saturate(140%);
    border-bottom:1px solid var(--color-border);
}
.site-topbar.is-scrolled{background:rgba(10,10,15,.94)}

.sidebar-toggle{
    display:none;width:44px;height:44px;border-radius:50%;align-items:center;justify-content:center;
    background:var(--color-surface-alt);border:1px solid var(--color-border);color:var(--color-text);cursor:pointer;flex-shrink:0;
}
.sidebar-toggle svg{width:19px;height:19px}

.topbar-search{flex:1;max-width:560px;position:relative}
.topbar-search input{
    width:100%;padding:.8rem 3rem .8rem 1.1rem;border-radius:999px;
    background:var(--color-surface-alt);border:1px solid var(--color-border);color:var(--color-text);
    font-family:inherit;font-size:.9rem;transition:.2s;
}
.topbar-search input::placeholder{color:rgba(245,245,247,.45)}
.topbar-search input:hover{border-color:rgba(255,122,26,.5)}
.topbar-search input:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px rgba(255,122,26,.15)}
.topbar-search button{
    position:absolute;top:50%;right:6px;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;
    background:var(--gradient-accent);border:none;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.topbar-search button svg{width:17px;height:17px}

.topbar-actions{display:flex;align-items:center;gap:.6rem;margin-inline-start:auto}
.icon-btn{
    position:relative;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    color:var(--color-text);background:var(--color-surface-alt);border:1px solid var(--color-border);cursor:pointer;transition:.2s;
}
.icon-btn:hover{border-color:var(--color-accent);color:var(--color-accent)}
.icon-btn svg{width:19px;height:19px}
.cart-badge{
    position:absolute;top:-3px;left:-3px;background:var(--gradient-accent);color:#fff;
    font-size:.65rem;font-weight:800;min-width:18px;height:18px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;padding:0 3px;border:2px solid var(--color-bg);
}
.pill-btn{
    display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1.25rem;border-radius:999px;
    background:var(--color-surface-alt);border:1px solid var(--color-border);color:var(--color-text);
    font-weight:700;font-size:.85rem;white-space:nowrap;
}
.pill-btn:hover{border-color:var(--color-accent);color:var(--color-accent)}
.pill-btn svg{width:16px;height:16px}

/* ---------- Mobile Nav Drawer (يعيد استخدام محتوى الـ Sidebar) ---------- */
.mobile-drawer{position:fixed;inset:0;z-index:1300;visibility:hidden;pointer-events:none}
.mobile-drawer.open{visibility:visible;pointer-events:auto}
.mobile-drawer-overlay{position:absolute;inset:0;background:rgba(0,0,0,.6);opacity:0;transition:.25s}
.mobile-drawer.open .mobile-drawer-overlay{opacity:1}
.mobile-drawer-panel{
    position:absolute;top:0;right:0;height:100%;width:82%;max-width:300px;
    background:var(--color-surface);border-inline-start:1px solid var(--color-border);
    transform:translateX(105%);transition:.28s ease;overflow-y:auto;display:flex;flex-direction:column;
}
.mobile-drawer.open .mobile-drawer-panel{transform:translateX(0)}
.mobile-drawer-close{
    position:absolute;top:1rem;left:1rem;background:var(--color-surface-alt);border:1px solid var(--color-border);
    color:var(--color-text);font-size:1.2rem;width:34px;height:34px;border-radius:50%;cursor:pointer;z-index:2;
}

/* ---------- Hero ---------- */
/* على الشاشات الكبيرة: السلايدر + عمود الثقة (تسليم فوري...) جنبًا إلى جنب.
   على الشاشات الأصغر: يتكدّسان فوق بعض (راجع الميديا كويري أدناه). */
.hero-wrap{padding-top:1.25rem;display:grid;grid-template-columns:1fr 280px;gap:1.25rem;align-items:stretch}
.hero-main{min-width:0;display:flex;flex-direction:column}
.hero{
    position:relative;overflow:hidden;border-radius:var(--radius-lg);min-height:460px;
    box-shadow:0 20px 60px -20px rgba(0,0,0,.6);border:1px solid var(--color-border);
}
.hero-slide{
    position:absolute;inset:0;display:flex;align-items:center;
    background-color:#0a0a0f;background-size:cover;background-position:center;
    background-image:var(--bg-desktop);
    opacity:0;visibility:hidden;transition:opacity .7s ease;z-index:1;
}
.hero-slide.active{opacity:1;visibility:visible;z-index:2}
.hero-slide::before{
    content:"";position:absolute;inset:0;
    /* التدرّج يُعتّم الجهة اليمنى (حيث يقع النص في RTL) ويترك اليسار أوضح لإظهار الصورة */
    background:linear-gradient(270deg, rgba(9,8,12,.96) 24%, rgba(9,8,12,.78) 52%, rgba(255,90,26,.22) 100%);
}
/* بانر جاهز التصميم (نص/شارة/زر داخل الصورة نفسها) — بدون تعتيم أو محتوى HTML فوقه.
   يجب أن يأتي هذا القاعدة بعد .hero-slide::before لتغلب عليه (نفس درجة التحديد). */
.hero-slide--plain::before{content:none}
.hero-slide--plain{cursor:pointer;background-size:cover;background-repeat:no-repeat;background-position:center}
/* الصندوق مقفل على نسبة صورة سطح المكتب في كل الأحجام، لذلك نعرض هذه الصورة دائمًا
   بدل صورة الموبايل (نسبة مختلفة). سبيسيفيسيتي مضاعفة (.hero-slide.hero-slide--plain)
   عمدًا حتى تتغلب على override الموبايل الأعمّ (.hero-slide{...bg-mobile...}) بغضّ
   النظر عن ترتيبه في الملف. */
.hero-slide.hero-slide--plain{background-image:var(--bg-desktop)}
/* نقفل ارتفاع صندوق الهيرو على نسبة الصورة الأصلية بالضبط (1672:941) في كل الأحجام
   حتى تملأ الصورة الصندوق بالكامل بلا أي فراغات جانبية (letterboxing) ولا أي قص. */
.hero:has(.hero-slide--plain){aspect-ratio:1672/941;min-height:0}
.hero-content{position:relative;z-index:2;max-width:600px;padding:2.75rem 4.75rem 2.75rem 3rem}
.hero-badge{
    display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .9rem;border-radius:999px;
    background:rgba(255,122,26,.14);border:1px solid rgba(255,122,26,.4);color:var(--color-accent);
    font-weight:800;font-size:.78rem;letter-spacing:.02em;margin-bottom:1rem;
}
.hero-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gradient-accent);box-shadow:0 0 8px var(--color-accent)}
.hero-content h1{font-size:clamp(2rem,3.2vw,2.85rem);font-weight:800;margin:0 0 1rem;line-height:1.28}
.hero-content h1 .accent{color:var(--color-accent)}
.hero-content p{color:var(--color-text-muted);margin:0 0 1.85rem;font-size:1.05rem;max-width:480px;line-height:1.75}
.hero-actions{display:flex;gap:.9rem;flex-wrap:wrap}
.btn-lg{padding:.95rem 2rem;font-size:1rem;border-radius:.65rem}

.hero-arrow{
    position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:46px;height:46px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    background:rgba(10,10,15,.5);border:1px solid rgba(255,255,255,.14);color:#fff;
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:.2s ease;opacity:0;
}
.hero:hover .hero-arrow{opacity:1}
.hero-arrow:hover{background:var(--gradient-accent);border-color:transparent;box-shadow:0 6px 18px -6px rgba(255,122,26,.6)}
.hero-arrow svg{width:19px;height:19px}
.hero-arrow-prev{right:1.1rem}
.hero-arrow-next{left:1.1rem}

/* النقاط أصبحت عنصرًا عاديًا أسفل صندوق الهيرو (وليست طبقة فوق الصورة) — هذا يمنع
   نهائيًا أي تراكب مع نص/شارات قد تكون مرسومة داخل صورة البانر نفسها. */
.hero-dots{display:flex;justify-content:center;gap:.5rem;margin-top:.9rem}
.hero-dots button{
    width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.3);border:none;cursor:pointer;padding:0;
    transition:.25s ease;position:relative;
}
.hero-dots button::before{content:"";position:absolute;inset:-8px}
.hero-dots button:hover{background:rgba(255,255,255,.55)}
.hero-dots button.active{background:var(--gradient-accent);width:26px;border-radius:6px;box-shadow:0 2px 10px -2px rgba(255,122,26,.7)}

.hero-trust-strip{display:flex;flex-direction:column;gap:.85rem}
.trust-item{
    background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);
    padding:.95rem 1.15rem;display:flex;align-items:center;gap:.75rem;flex:1;transition:.2s ease;
}
.trust-item:hover{border-color:var(--color-accent)}
.trust-item .icon{
    width:38px;height:38px;border-radius:50%;background:rgba(255,122,26,.14);color:var(--color-accent);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.trust-item .icon svg{width:19px;height:19px}
.trust-item h4{margin:0;font-size:.84rem}
.trust-item p{margin:.15rem 0 0;font-size:.72rem;color:var(--color-text-muted)}

@media (prefers-reduced-motion: reduce){
    .hero-slide{transition:none}
}

/* ---------- صف أيقونات التصنيفات ---------- */
.category-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:1.1rem}
.category-pill{
    background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);
    padding:1.6rem 1rem;text-align:center;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
    position:relative;box-shadow:0 2px 14px -8px rgba(0,0,0,.5);
}
.category-pill:hover{
    transform:translateY(-5px);border-color:var(--color-accent);
    box-shadow:0 14px 30px -14px rgba(255,122,26,.45);
}
.category-pill:active{transform:translateY(-2px)}
.category-pill.is-highlight{background:var(--gradient-accent);border-color:transparent}
.category-pill.is-highlight span, .category-pill.is-highlight .cat-count{color:rgba(255,255,255,.9)}
.category-pill .icon{
    width:56px;height:56px;margin:0 auto .8rem;color:#fff;display:flex;align-items:center;justify-content:center;
    background:var(--gradient-accent);border-radius:50%;transition:transform .22s ease,box-shadow .22s ease;
    box-shadow:0 6px 16px -6px rgba(255,90,26,.55),inset 0 1px 0 rgba(255,255,255,.25);
}
.category-pill:hover .icon{transform:scale(1.12);box-shadow:0 10px 22px -6px rgba(255,90,26,.75),inset 0 1px 0 rgba(255,255,255,.3)}
.category-pill.is-highlight .icon{background:rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.category-pill .icon svg{width:52%;height:52%;stroke-width:2.1}
.category-pill .icon img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.category-pill span{display:block;font-weight:700;font-size:.86rem}
.category-pill .cat-count{font-size:.7rem;color:var(--color-text-muted);margin-top:.15rem}

/* ---------- أقسام عامة ---------- */
.section{padding:3rem 0}
.section-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1.5rem;gap:1rem;flex-wrap:wrap}
.section-head h2{font-size:1.4rem;font-weight:800;margin:0}
.section-head p{color:var(--color-text-muted);margin:.35rem 0 0;font-size:.9rem}
.section-head .see-all{color:var(--color-accent);font-weight:700;font-size:.9rem;white-space:nowrap;flex-shrink:0}

/* ---------- عداد العروض المحدودة ---------- */
.countdown-row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;row-gap:.4rem}
.countdown-label{font-size:.82rem;color:var(--color-text-muted);font-weight:600}
.countdown-box{
    background:var(--color-surface);border:1px solid var(--color-border);border-radius:.5rem;
    min-width:44px;text-align:center;padding:.4rem .3rem;font-weight:800;font-size:.95rem;color:var(--color-accent);
}
.countdown-box small{display:block;font-weight:600;font-size:.6rem;color:var(--color-text-muted);margin-top:.1rem}

/* ---------- شبكات ---------- */
.grid{display:grid;gap:1.25rem}
.grid-cats{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.grid-products{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));align-items:stretch}

/* ---------- بطاقة تصنيف (شبكة عامة) ---------- */
.cat-card{padding:1.1rem .75rem;text-align:center;transition:.2s ease}
.cat-card:hover{transform:translateY(-4px);border-color:var(--color-accent)}
.cat-card .cat-icon{
    width:56px;height:56px;margin:0 auto .7rem;border-radius:50%;
    background:var(--color-surface-alt);display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.cat-card .cat-icon img{width:100%;height:100%;object-fit:cover}
.cat-card h3{font-size:.9rem;font-weight:700;margin:0}

/* ---------- بطاقة منتج ---------- */
.product-card{
    overflow:hidden;position:relative;display:flex;flex-direction:column;height:100%;
    border-radius:var(--radius-md);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.product-card:hover{transform:translateY(-5px);border-color:var(--color-accent);box-shadow:0 16px 30px -16px rgba(255,122,26,.4)}
.product-card .thumb{
    position:relative;aspect-ratio:1/1;background:var(--color-surface-alt);overflow:hidden;
    display:flex;align-items:center;justify-content:center;padding:1.1rem;
}
.product-card .thumb img{width:100%;height:100%;object-fit:contain;transition:.3s ease}
.product-card:hover .thumb img{transform:scale(1.045)}
.product-card .badges{position:absolute;top:.65rem;right:.65rem;display:flex;flex-direction:column;gap:.3rem;z-index:2;align-items:flex-end}
.badge{font-size:.66rem;font-weight:800;padding:.22rem .5rem;border-radius:.4rem;color:#fff;line-height:1.4}
.badge-sale{background:var(--color-danger)}
.badge-new{background:var(--color-accent);color:#fff}
.badge-featured{background:var(--gradient-accent)}
.badge-out{
    position:absolute;bottom:.65rem;left:.65rem;right:.65rem;z-index:2;text-align:center;
    background:rgba(10,10,15,.75);color:var(--color-text-muted);border:1px solid var(--color-border);
}
.product-card.is-out-of-stock .thumb img{opacity:.5}
.wish-btn{
    position:absolute;top:.65rem;left:.65rem;z-index:3;width:32px;height:32px;border-radius:50%;
    background:rgba(10,10,15,.55);border:1px solid var(--color-border);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;
    transition:.2s ease;
}
.wish-btn:hover{border-color:var(--color-accent);color:var(--color-accent)}
.wish-btn.active{color:var(--color-danger);border-color:var(--color-danger)}
.wish-btn svg{width:16px;height:16px}
.wish-btn.active svg{fill:currentColor}
.product-card .body{padding:1rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.product-card .cat-label{font-size:.72rem;color:var(--color-text-muted)}
.product-card h3{
    font-size:.92rem;font-weight:700;margin:0;line-height:1.4;min-height:2.6em;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.rating-stars{color:var(--color-warning);font-size:.75rem;display:flex;align-items:center;gap:.25rem}
.price-row{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;margin-top:auto}
.price-group{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.price-current{font-weight:800;color:var(--color-accent);font-size:1.05rem;white-space:nowrap}
.price-old{color:var(--color-text-muted);text-decoration:line-through;font-size:.78rem;white-space:nowrap}
.product-actions{display:flex;gap:.5rem}
.btn-cart,.btn-buy{
    flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:.35rem;
    padding:.62rem .4rem;border-radius:.55rem;font-size:.76rem;font-weight:700;font-family:inherit;
    cursor:pointer;transition:.2s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.btn-cart{background:var(--gradient-accent);color:#fff;border:1px solid transparent}
.btn-cart:hover:not(:disabled){filter:brightness(1.08)}
.btn-cart svg{width:15px;height:15px;flex-shrink:0}
.btn-buy{background:var(--color-bg);border:1.5px solid var(--color-accent);color:var(--color-accent)}
.btn-buy:hover:not(:disabled){background:rgba(255,122,26,.12)}
.btn-cart:disabled,.btn-buy:disabled{opacity:.45;cursor:not-allowed;filter:none}

/* ---------- منتج بتنسيق قائمة (موبايل) ---------- */
.product-list-row{display:flex;align-items:center;gap:.85rem;padding:.85rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);margin-bottom:.75rem}
.product-list-row .thumb{width:64px;height:64px;border-radius:.6rem;overflow:hidden;flex-shrink:0;background:var(--color-surface-alt);position:relative}
.product-list-row .thumb img{width:100%;height:100%;object-fit:cover}
.product-list-row .badge{position:absolute;top:2px;right:2px;font-size:.6rem;padding:.15rem .4rem}
.product-list-row .info{flex:1;min-width:0}
.product-list-row h3{margin:0 0 .3rem;font-size:.85rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.product-list-row .price-row{margin-top:.2rem}

/* ---------- بانرات ترويجية (صفّين) ---------- */
.promo-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.promo-banner{
    position:relative;border-radius:var(--radius-lg);overflow:hidden;min-height:180px;
    display:flex;align-items:center;padding:1.75rem 2rem;background-size:cover;background-position:center;
}
.promo-banner::before{content:"";position:absolute;inset:0;background:linear-gradient(270deg, rgba(10,10,15,.9) 30%, rgba(10,10,15,.35));}
.promo-banner .content{position:relative;z-index:2;max-width:70%}
.promo-banner h3{font-size:1.25rem;font-weight:800;margin:0 0 .5rem}
.promo-banner p{color:var(--color-text-muted);font-size:.85rem;margin:0 0 1rem}

/* ---------- لماذا تختارنا ---------- */
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.25rem}
.why-item{padding:1.5rem;text-align:center}
.why-item .icon{width:52px;height:52px;border-radius:50%;background:rgba(255,122,26,.12);display:flex;align-items:center;justify-content:center;margin:0 auto .8rem;color:var(--color-accent)}
.why-item h3{font-size:1rem;margin:.3rem 0}
.why-item p{color:var(--color-text-muted);font-size:.85rem;margin:0}

/* ---------- آراء العملاء ---------- */
.testimonial-card{padding:1.5rem}
.testimonial-card .stars{color:var(--color-warning);margin-bottom:.6rem}
.testimonial-card p{color:var(--color-text-muted);font-size:.9rem}
.testimonial-user{display:flex;align-items:center;gap:.6rem;margin-top:1rem}
.testimonial-user .avatar{width:40px;height:40px;border-radius:50%;background:rgba(255,122,26,.14);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--color-accent)}

/* ---------- FAQ (وأيضًا أقسام "معلومات المنتج" بصفحة تفاصيل المنتج،
   بتعيد استخدام نفس الكلاسات والـ JS المشترك في main.js) ---------- */
.faq-item{border-bottom:1px solid var(--color-border);padding:1rem 0}
.faq-question{display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-weight:700}
.faq-answer{max-height:0;overflow:hidden;transition:.3s ease;color:var(--color-text-muted);font-size:.9rem;line-height:1.9}
/* سقف مرتفع كفاية لأي وصف منتج طويل (مش بس إجابات الأسئلة الشائعة القصيرة)
   بدون أي قصّ؛ لا يؤثر على سرعة/سلاسة الانتقال لأن العنصر يتوقف بصريًا عند
   ارتفاعه الفعلي بغضّ النظر عن السقف الأعلى بكتير. */
.faq-item.open .faq-answer{max-height:3000px;margin-top:.6rem}
.faq-item.open .faq-icon{transform:rotate(45deg)}
.faq-icon{transition:.2s;color:var(--color-accent);flex-shrink:0}

/* ---------- صفحة تفاصيل المنتج ---------- */
.breadcrumbs{
    font-size:.8rem;color:var(--color-text-muted);margin-bottom:1.25rem;
    display:flex;align-items:center;gap:.4rem;overflow-x:auto;white-space:nowrap;
    scrollbar-width:none;
}
.breadcrumbs::-webkit-scrollbar{display:none}
.breadcrumbs a{color:var(--color-text-muted);transition:color .15s ease}
.breadcrumbs a:hover{color:var(--color-accent)}
.breadcrumbs-sep{color:var(--color-border);flex-shrink:0}
.breadcrumbs-current{color:var(--color-accent);font-weight:600}

.product-gallery{min-width:0}
.gallery-main{
    position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--color-surface);
    border:1px solid var(--color-border);border-radius:var(--radius-lg);margin-bottom:.85rem;
}
.gallery-main img{width:100%;height:100%;object-fit:contain;transition:opacity .25s ease}
.gallery-arrow{
    position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:40px;height:40px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;
    background:rgba(10,10,15,.55);color:#fff;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    transition:.2s ease;opacity:0;
}
.gallery-main:hover .gallery-arrow{opacity:1}
.gallery-arrow:hover{background:var(--gradient-accent)}
.gallery-arrow-prev{right:.75rem}
.gallery-arrow-next{left:.75rem}
.gallery-arrow svg{width:18px;height:18px}
.gallery-thumbs{display:flex;gap:.6rem;overflow-x:auto;scrollbar-width:none}
.gallery-thumbs::-webkit-scrollbar{display:none}
.gallery-thumb{
    flex-shrink:0;width:64px;height:64px;padding:0;border-radius:var(--radius-sm);overflow:hidden;
    border:1.5px solid var(--color-border);background:var(--color-surface);cursor:pointer;transition:border-color .15s ease;
}
.gallery-thumb img{width:100%;height:100%;object-fit:cover}
.gallery-thumb.active,.gallery-thumb:hover{border-color:var(--color-accent)}
/* نقاط تنقّل خفيفة — مخفية افتراضيًا، تظهر بدل المصغّرات على الموبايل فقط
   (السحب باللمس هو أسلوب التنقل الأساسي هناك، والمصغّرات كبيرة نسبيًا). */
.gallery-dots{display:none;justify-content:center;gap:.4rem;margin-top:.7rem}
.gallery-dot{
    width:7px;height:7px;border-radius:50%;background:var(--color-border);border:none;padding:0;cursor:pointer;
    transition:.2s ease;position:relative;
}
.gallery-dot::before{content:"";position:absolute;inset:-8px}
.gallery-dot.active{background:var(--color-accent);width:18px;border-radius:4px}

.product-info{min-width:0;display:flex;flex-direction:column}
.product-title{
    /* يوصل لـ 28-34px تقريبًا من عرض 768px فأكبر؛ الموبايل بياخد قيمة ثابتة
       22-26px عبر override صريح في الميديا كويري أسفل الملف (نفس أسلوب
       .hero-content h1 المستخدم بالفعل في الموقع). */
    font-size:clamp(1.75rem,1rem + 1.5vw,2.125rem);font-weight:800;line-height:1.35;
    margin:0 0 .75rem;max-width:34ch;overflow-wrap:break-word;
}
.product-meta-row{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;margin-bottom:1rem}
.stock-badge{
    display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .8rem;border-radius:999px;
    font-size:.78rem;font-weight:700;
}
.stock-badge::before{content:"";width:7px;height:7px;border-radius:50%;flex-shrink:0}
.stock-badge--in{background:rgba(255,122,26,.12);color:var(--color-accent);border:1px solid rgba(255,122,26,.35)}
.stock-badge--in::before{background:var(--color-accent);box-shadow:0 0 6px var(--color-accent)}
.stock-badge--out{background:rgba(239,65,54,.12);color:var(--color-danger);border:1px solid rgba(239,65,54,.35)}
.stock-badge--out::before{background:var(--color-danger)}

.product-price{margin-bottom:0}
.product-price .price-current{display:inline-flex;align-items:baseline;gap:.35rem}
.product-price .price-value{font-size:clamp(1.625rem,4vw,2.125rem);font-weight:800;color:var(--color-accent);line-height:1}
.product-price .price-currency{font-size:1rem;font-weight:700;color:var(--color-accent)}
.product-price .price-old{display:block;margin-top:.15rem;font-size:.9rem;color:var(--color-text-muted);text-decoration:line-through}

/* السعر والكمية في صف واحد (يمين/يسار)، مع wrap كحماية على أضيق الشاشات
   لو مساحتهم مع بعض ماكفتش. */
.price-qty-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.25rem}

.product-option-group{margin-bottom:1rem}
/* شكل "chip" مستدير بالكامل بدل القائمة المنسدلة الافتراضية — نفس منطق
   تبديل الحالة الموجود في JS (btn-outline/btn-primary) بدون أي تغيير فيه. */
.product-option-group .js-option-value{border-radius:999px;padding:.5rem 1.15rem;font-size:.85rem}

.qty-row{display:flex;align-items:center;gap:.75rem;margin-bottom:0}
.qty-label{font-weight:700;font-size:.9rem;color:var(--color-text-muted)}
.qty-selector{
    display:inline-flex;align-items:center;background:var(--color-surface-alt);
    border:1px solid var(--color-border);border-radius:999px;overflow:hidden;
}
.qty-btn{
    width:42px;height:42px;border:none;background:transparent;color:var(--color-text);
    font-size:1.2rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
    transition:.15s ease;flex-shrink:0;
}
.qty-btn:hover:not(:disabled){background:rgba(255,122,26,.14);color:var(--color-accent)}
.qty-btn:active:not(:disabled){transform:scale(.92)}
.qty-btn:disabled{opacity:.35;cursor:not-allowed}
.qty-input{
    width:48px;height:42px;border:none;background:transparent;color:var(--color-text);text-align:center;
    font-weight:800;font-size:1rem;font-family:inherit;-moz-appearance:textfield;
}
.qty-input::-webkit-outer-spin-button,.qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty-input:focus{outline:none}

.product-actions-row{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:.25rem;margin-bottom:1rem}
.product-actions-row .btn-cart,.product-actions-row .btn-buy{
    flex:1;min-width:200px;min-height:48px;border-radius:var(--radius-sm);font-size:.95rem;font-weight:700;
    display:flex;align-items:center;justify-content:center;gap:.5rem;cursor:pointer;transition:.2s ease;
}
.product-actions-row .btn-cart{background:var(--color-bg);border:1.5px solid var(--color-accent);color:var(--color-accent)}
.product-actions-row .btn-cart:hover:not(:disabled){background:rgba(255,122,26,.1)}
.product-actions-row .btn-cart svg{width:18px;height:18px}
.product-actions-row .btn-buy{background:var(--gradient-accent);color:#fff;font-weight:800;border:1px solid transparent}
.product-actions-row .btn-buy:hover:not(:disabled){filter:brightness(1.08)}
.product-actions-row .btn-cart:active:not(:disabled),.product-actions-row .btn-buy:active:not(:disabled){transform:scale(.98)}
.product-actions-row .btn-cart:disabled,.product-actions-row .btn-buy:disabled{opacity:.45;cursor:not-allowed}

.product-secondary-actions{display:flex;gap:1.5rem;flex-wrap:wrap}
.secondary-action-btn{
    display:inline-flex;align-items:center;gap:.4rem;background:transparent;border:none;cursor:pointer;
    color:var(--color-text-muted);font-size:.82rem;font-weight:600;padding:.3rem 0;transition:color .15s ease;
}
.secondary-action-btn:hover{color:var(--color-accent)}
.secondary-action-btn svg{width:18px;height:18px}
.secondary-action-btn.js-wish-btn.active{color:var(--color-danger)}
.secondary-action-btn.js-wish-btn.active svg{fill:currentColor}

.product-details-accordion{margin-top:2.5rem;padding:.25rem 1.5rem}
.product-details-accordion .faq-answer{padding-bottom:.4rem}
.product-related{margin-top:1rem}

/* ---------- Footer ---------- */
.site-footer{background:var(--color-surface);border-top:1px solid var(--color-border);padding:3rem 0 1.25rem;margin-top:1rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.3fr;gap:2rem}
.footer-col h4{font-size:1rem;margin:0 0 1rem}
.footer-col ul li{margin-bottom:.6rem}
.footer-col ul li a{color:var(--color-text-muted);font-size:.88rem}
.footer-col ul li a:hover{color:var(--color-accent)}
.footer-bottom{border-top:1px solid var(--color-border);margin-top:2rem;padding-top:1.25rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;color:var(--color-text-muted);font-size:.82rem}
.social-links{display:flex;gap:.6rem}
.social-links a{width:36px;height:36px;border-radius:50%;background:var(--color-surface-alt);border:1px solid var(--color-border);display:flex;align-items:center;justify-content:center}

/* ---------- الأزرار العائمة (يمين الشاشة دائمًا — ترتيب DOM: واتساب أولاً
   فيظهر أعلى، الاتصال ثانيًا فيظهر أسفل وأقرب لشريط التنقل) ---------- */
.floating-actions{
    position:fixed;bottom:100px;right:16px;z-index:900;display:flex;flex-direction:column;gap:.65rem;
}
.floating-btn{
    width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    box-shadow:0 6px 18px rgba(0,0,0,.4);position:relative;color:#fff;transition:transform .15s ease;
}
.floating-btn:hover{transform:scale(1.06)}
.floating-btn:active{transform:scale(.94)}
.floating-btn.whatsapp{background:#25d366}
.floating-btn.call{background:var(--gradient-accent)}
.floating-btn svg{width:26px;height:26px}
.floating-btn .tip{
    position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);
    background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text);
    padding:.4rem .75rem;border-radius:.5rem;font-size:.78rem;white-space:nowrap;opacity:0;visibility:hidden;transition:.2s;
}
.floating-btn:hover .tip{opacity:1;visibility:visible}

/* ---------- Mobile Bottom Nav ---------- */
.bottom-nav{display:none}

/* ---------- Skeleton Loading ---------- */
.skeleton{background:linear-gradient(90deg,var(--color-surface-alt) 25%,var(--color-border) 37%,var(--color-surface-alt) 63%);background-size:400% 100%;animation:skeleton-loading 1.4s ease infinite;border-radius:var(--radius-sm)}
@keyframes skeleton-loading{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* ---------- Forms ---------- */
.form-group{margin-bottom:1.1rem}
.form-label{display:block;margin-bottom:.45rem;font-weight:600;font-size:.88rem}
.form-control{
    width:100%;padding:.7rem .9rem;border-radius:var(--radius-sm);
    background:var(--color-surface-alt);border:1px solid var(--color-border);color:var(--color-text);
    font-family:inherit;font-size:.92rem;transition:.2s;
}
.form-control:focus{outline:none;border-color:var(--color-accent)}
.form-error{color:var(--color-danger);font-size:.8rem;margin-top:.35rem}
.auth-card{max-width:440px;margin:3rem auto;padding:2rem}
.auth-card h1{font-size:1.4rem;margin-bottom:.35rem}
.auth-card .sub{color:var(--color-text-muted);font-size:.88rem;margin-bottom:1.5rem}
.alert{padding:.85rem 1rem;border-radius:var(--radius-sm);font-size:.88rem;margin-bottom:1.25rem}
.alert-error{background:rgba(239,65,54,.12);color:var(--color-danger);border:1px solid rgba(239,65,54,.35)}
.alert-success{background:rgba(255,122,26,.1);color:var(--color-accent);border:1px solid rgba(255,122,26,.35)}

/* ---------- تخطيطات بعمودين قابلة للتكديس على الموبايل ---------- */
.account-shell{display:grid;grid-template-columns:260px 1fr;gap:1.5rem}
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.product-gallery-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,.8fr);gap:2.5rem;align-items:start}
/* .checkout-grid: القواعد الفعلية بأسفل الملف ضمن قسم "إعادة تصميم صفحة إتمام الطلب" */

/* صف سطر السلة: على سطح المكتب تُعامل .cart-row-main/.cart-row-actions كأنها
   غير موجودة (contents) فيبقى كل العناصر في سطر flex واحد كما كانت بالضبط.
   على الموبايل تتحول كل مجموعة لسطر مستقل (صورة+اسم ثم كمية+سعر+حذف). */
.cart-row-main,.cart-row-actions{display:contents}

/* ---------- Responsive ---------- */
@media (max-width:1199px){
    .hero{min-height:420px}
    .hero-content{padding:2.25rem 3.75rem 2.25rem 2rem}
    .hero-wrap{grid-template-columns:1fr}
    .hero-trust-strip{flex-direction:row;flex-wrap:wrap;margin-top:1.25rem}
    .trust-item{min-width:210px}
    .category-strip{grid-template-columns:repeat(4,1fr)}
    .promo-grid{grid-template-columns:1fr}
}
@media (max-width:991px){
    .footer-grid{grid-template-columns:1fr 1fr}
    .site-sidebar{position:fixed;right:0;top:0;height:100vh;transform:translateX(105%);transition:.28s ease;width:280px}
    .site-sidebar.open{transform:translateX(0)}
    .sidebar-toggle{display:flex}
    .trust-item{min-width:calc(50% - .5rem)}
    .grid-products{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:767px){
    :root{--header-height:64px}
    .site-topbar{padding:0 .75rem;gap:.4rem}
    /* .topbar-search مُعاد استخدامه أيضًا كصندوق بحث مستقل في صفحة /search —
       نخفي فقط النسخة اللي جوه الهيدر (بديلها .mobile-search-bar) ولا نخفي
       صندوق البحث الفعلي في صفحة البحث نفسها. */
    .site-topbar .topbar-search{display:none}
    /* على الموبايل: أزرار السلة/الحساب/تسجيل الدخول تتحول من "حبة" نص+أيقونة
       إلى دائرة أيقونة فقط، بنفس مقاس ولون وحدود أيقونة المفضلة وزر الهامبرجر
       تمامًا (44×44px)، حتى يبدو الشريط العلوي متّسقًا وليس مزدحمًا. */
    .topbar-actions{gap:.4rem}
    .topbar-actions .pill-btn{position:relative;padding:0;width:44px;height:44px;justify-content:center;border-radius:50%}
    .topbar-actions .pill-btn span:not(.cart-badge){display:none}
    .topbar-actions .pill-btn svg{width:19px;height:19px}
    /* الشارة (عدد السلة) لها style inline لعرض سطح المكتب (static بدون حدود) —
       نجبرها بـ !important على وضع absolute فوق الأيقونة فقط على الموبايل. */
    .topbar-actions .pill-btn .cart-badge{position:absolute!important;top:-3px;left:-3px;margin:0!important;border:2px solid var(--color-bg)!important}
    .hero{min-height:380px;border-radius:var(--radius-md)}
    .hero-content{padding:1.5rem 1.35rem;max-width:100%}
    .hero-badge{font-size:.7rem;padding:.32rem .75rem;margin-bottom:.7rem}
    .hero-content h1{font-size:1.5rem;margin-bottom:.6rem}
    .hero-content p{font-size:.88rem;margin-bottom:1.1rem;max-width:100%}
    .btn-lg{padding:.75rem 1.5rem;font-size:.88rem}
    .hero-arrow{display:none}
    /* margin-top:1.25rem الأصلية (على .hero-trust-strip من التابلت) كانت
       بتتجمع فوق gap الشبكة (1.25rem) فتدّي 40px فاصل بين نقاط السلايدر
       والفيتشرز. صفّرناها فيفضل الـ gap بس = 20px (داخل هدف 20-24px). */
    .hero-trust-strip{gap:.6rem;margin-top:0}
    .trust-item{min-width:calc(50% - .3rem);padding:.75rem .85rem}
    .trust-item .icon{width:32px;height:32px}
    .trust-item .icon svg{width:16px;height:16px}
    .trust-item h4{font-size:.76rem}
    .trust-item p{font-size:.66rem}
    /* الصفحة الرئيسية فقط: حشوة جانبية أضيق (16px) بدل 20px حتى يستغل المحتوى
       عرض الشاشة بشكل أفضل ويحس إنه مصمّم للموبايل مش ديسكتوب مضغوط. باقي
       الصفحات (سلة/دفع/حساب/منتج...) تفضل على الحشوة الأصلية بدون تغيير. */
    body.page-home .container{padding:0 1rem}
    /* الفيتشرز → التصنيفات: كانت margin-top:1.75rem (28px) inline في الـ HTML
       (بتفضل كما هي على الديسكتوب). !important هنا ضروري لتجاوز الـ inline
       style على الموبايل فقط، وتقريب المسافة من 28px لهدف 20-24px. */
    .categories-strip-section{margin-top:1.375rem!important}
    /* شلنا حجز الـ 72px اللي كان بياكل ~20% من عرض الشاشة على قسم زي التصنيفات
       القريب من أعلى الصفحة (احتمال تصادمه مع الأزرار العائمة اللي في أسفل
       الشاشة ضعيف أصلاً). دلوقتي الشبكة بتاخد العرض الكامل المتاح. */
    .category-strip{grid-template-columns:repeat(3,1fr);gap:.75rem}
    .category-pill{padding:1.4rem .5rem}
    .category-pill .icon{width:44px;height:44px;margin-bottom:1rem}
    .category-pill span{font-size:.74rem}
    /* لمسة انتقال واضحة عند الضغط (hover مش موجود على اللمس) — تغيير لون
       الحدّ + انتقال سريع، إضافة على transform الموجود أصلاً في القاعدة. */
    .category-pill:active{border-color:var(--color-accent);transition:border-color .15s ease,transform .15s ease}
    .section{padding:2rem 0}
    /* الصفحة الرئيسية فقط: تقليل padding-top لكل .section (المنتجات/لماذا
       تختارنا/الآراء/الأسئلة) من 32px لـ 24px — يقرّب مسافة "التصنيفات →
       أحدث المنتجات" لهدف 22-28px، وبيدّي نفس الإيقاع لبقية أقسام الصفحة. */
    body.page-home .section{padding-top:1.5rem}
    /* جذر مشكلة "الأزرار العائمة بتغطي الكروت": .section{padding:2rem 0}
       و.container{padding:0 1.25rem} تخصيص متساوٍ (كلاس واحد لكل منهما)، وأي
       عنصر عليه الكلاسين مع بعض (section container — مستخدم في أغلب صفحات
       الموقع) كان ياخد قيمة .section بالكامل لأنها معرّفة بعد .container في
       الملف، يعني padding-left/right كانت تتصفّر فعليًا رغم وجود container.
       ده معناه إن حجز الـ 64px اللي ضفناه على grid-products كان بيتحسب من
       حافة الشاشة مباشرة (فاصل ~2px فقط) مش من حافة الـ container (20px)
       زي ما كان مفروض — من هنا التراكب اللي استمر بعد الإصلاح السابق. */
    .section.container{padding-left:1.25rem;padding-right:1.25rem}
    /* على الصفحة الرئيسية فقط: نفس التصحيح لكن بمقاس الحشوة الأضيق (16px)،
       specificity أعلى من القاعدة العامة فوقها فبيغلبها هنا فقط. */
    body.page-home .section.container{padding-left:1rem;padding-right:1rem}
    /* العنوان و"عرض الكل" يفضلوا في نفس الصف حتى على الموبايل (بدل التكديس
       العمودي) — نفس سلوك سطح المكتب: justify-content:space-between +
       flex-wrap:wrap كحماية لو عنوان طويل جدًا مش هيتقطع. .section-head
       مستخدم برضه في صفحة /store وصفحة المنتج ("منتجات مشابهة")، فالقاعدة
       العامة هنا فضلت بقيمها الأصلية، والمقاسات الأضيق (عنوان أصغر، "عرض
       الكل" مضغوط) مقصورة على الرئيسية فقط تحت body.page-home. */
    .section-head{margin-bottom:1.1rem;gap:.6rem}
    /* المسافة قبل شبكة المنتجات كانت 20px، مطلوب 10-14px تحديدًا. */
    body.page-home .section-head{margin-bottom:.75rem;gap:.5rem}
    body.page-home .section-head h2{font-size:1.15rem}
    body.page-home .section-head .see-all{font-size:.8rem}
    .countdown-row{gap:.4rem}
    .countdown-box{min-width:38px;padding:.35rem .2rem}
    /* شلنا حجز الـ padding-left (كان 72px) من هنا برضه — كان بياخد ~20% من
       عرض الشاشة على كل صف في الشبكة عشان يحمي من تراكب نادر مع الأزرار
       العائمة. البديل: الأزرار العائمة نفسها بقت أصغر شوية (40px) وظلها أخف،
       فبتقرا بصريًا كطبقة عائمة فوق المحتوى (زي أي زرار واتساب/اتصال عائم في
       أي متجر إلكتروني حقيقي) مش كتراكب "بايظ" — بدل ما نضحّي بعرض كل الكروت
       دايمًا عشان احتمال نادر يحصل بس وقت تمرير معيّن. */
    /* row-gap 14px / column-gap 10px — مطلوبين مختلفين، مش نفس القيمة. */
    .grid-products{grid-template-columns:repeat(2,minmax(0,1fr));gap:.875rem .625rem}
    .product-card{border-radius:1rem}
    .product-card .thumb{padding:0}
    .product-card .thumb img{object-fit:cover}
    /* 10px موحّدة بين كل عناصر الكارت الداخلية (عنوان/سعر/أزرار) بدل 8px،
       أقرب لمسافة "سعر → أول زرار" المطلوبة. */
    .product-card .body{padding:.75rem;gap:.625rem}
    .product-card h3{font-size:.82rem;min-height:2.3em}
    .price-current{font-size:.94rem}
    .price-old{font-size:.72rem}
    /* السعر: الرقم أكبر ووزنه أقوى، العملة "ج.م" أصغر شوية بجانبه بنفس السطر. */
    .price-value{font-weight:800}
    .price-currency{font-size:.78em;font-weight:700}
    /* شارات مضغوطة بشكل "حبة" كامل الاستدارة، وفاصل 4px بينها بدل ~5px. */
    .product-card .badges{gap:.25rem}
    .badge{border-radius:999px;padding:.2rem .55rem}
    /* عمودين جنب بعض ما بيسعوش نص عربي حقيقي بدون قصّ — تكديس الزرارين فوق
       بعض بعرض كامل بدل التزاحم اللي كان بيتقصّ نصه بـ ellipsis. */
    .product-actions{flex-direction:column;gap:.5rem}
    /* نصف قطر موحّد من نفس مقياس الموقع (--radius-sm) بدل قيمة .55rem
       العشوائية. اشتري الآن = الفعل الأقوى تحويليًا فبيبقى الزرار المعبّى
       (كان معكوس) وأطول شوية (46px) وأثقل خطًا، إضافة للسلة ثانوية بحدود
       outline بارتفاع 44px. لمسة ضغط خفيفة (scale) لإحساس تفاعلي على
       الشاشات اللمسية اللي معندهاش hover. */
    .btn-cart,.btn-buy{font-size:.78rem;padding:.75rem .5rem;min-height:44px;border-radius:var(--radius-sm)}
    .btn-cart{background:var(--color-bg);border:1.5px solid var(--color-accent);color:var(--color-accent)}
    .btn-buy{background:var(--gradient-accent);border:1px solid transparent;color:#fff;min-height:46px;font-weight:800}
    .btn-cart:active:not(:disabled),.btn-buy:active:not(:disabled){transform:scale(.97)}
    .product-card:active{transform:translateY(-2px);border-color:var(--color-accent)}
    .footer-grid{grid-template-columns:1fr}

    /* شبكات ثابتة العرض (حساب المستخدم/صفحة المنتج/إتمام الطلب) تتكدّس عمودًا
       واحدًا على الموبايل بدل عمودين ضيقين يسببان سكرول أفقي. */
    .account-shell,.form-grid-2,.product-gallery-row,.checkout-grid{grid-template-columns:1fr}
    .account-shell{gap:1rem}
    /* .product-gallery-row كانت وارثة gap:2.5rem (40px) من قاعدة الديسكتوب
       حتى بعد التكديس لعمود واحد على الموبايل — ده كان الفاصل الزيادة بين
       المعرض والعنوان. نخليه 1.25rem (20px) يطابق "فواصل الأقسام الرئيسية"
       في نظام التباعد المطلوب. */
    .product-gallery-row{gap:1.25rem}
    /* ملخص الطلب اللاصق بصفحة إتمام الطلب: قواعد الإخفاء على الموبايل
       ضمن قسم "إعادة تصميم صفحة إتمام الطلب" بأسفل الملف (.checkout-side). */

    /* سطر عنصر السلة: يتكدّس على سطرين بدل ضغط 4 عناصر ثابتة العرض في سطر
       واحد (كان يسبب سكرول أفقي على عرض 360-428px). */
    .cart-row{flex-wrap:wrap;row-gap:.6rem}
    .cart-row-main,.cart-row-actions{display:flex;align-items:center;width:100%}
    .cart-row-main{gap:.85rem}
    .cart-row-actions{gap:.5rem}
    .cart-row-actions input{width:58px!important;flex-shrink:0;padding:.5rem .4rem}
    .cart-row-actions .js-line-total{width:auto!important;flex:1;min-width:0}
    .cart-row-actions .js-remove-item{flex-shrink:0}

    /* شبكة أمان عامة: تمنع أي كلمة/رابط طويل غير قابل للكسر من تمديد عرض
       الصفحة أفقيًا على الموبايل (بدون أي تأثير على الديسكتوب). */
    body{overflow-wrap:anywhere}
    table{max-width:100%;display:block;overflow-x:auto}

    body{padding-bottom:calc(var(--bottom-nav-height) + env(safe-area-inset-bottom))}
    .bottom-nav{
        display:flex;position:fixed;bottom:0;right:0;left:0;z-index:950;
        background:rgba(21,21,28,.96);backdrop-filter:blur(10px);
        border-top:1px solid var(--color-border);
        padding-bottom:env(safe-area-inset-bottom);
        height:calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
    }
    .bottom-nav a{
        flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;
        color:var(--color-text-muted);font-size:.68rem;font-weight:600;position:relative;
    }
    .bottom-nav a svg{width:21px;height:21px}
    .bottom-nav a.active{color:var(--color-accent)}
    .bottom-nav a .cart-badge{top:-2px;left:calc(50% - 20px)}
    /* مسافة أمان لا تقل عن 16px من حافة الشاشة، ومسافة أكبر عن شريط التنقل
       السفلي حتى لا يحصل أي تراكب معه، وz-index أعلى منه (950). زرار الاتصال
       (آخر عنصر بالـ DOM) بيقع ~82px من أسفل الشاشة، وزرار واتساب (أول عنصر)
       ~154px بفضل الـ gap الأكبر — يطابق تقريبًا 85-100px / 145-165px
       المطلوبين، ويفضلوا ظاهرين دايمًا في كل الصفحات بدون أي إخفاء شرطي. */
    .floating-actions{bottom:calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 20px);right:16px;left:auto;z-index:960;gap:2rem}
    .floating-btn{width:40px;height:40px;box-shadow:0 3px 8px rgba(0,0,0,.35)}
    .floating-btn .tip{display:none}
    .hero-slide{background-image:var(--bg-mobile,var(--bg-desktop))}

    /* صفحة تفاصيل المنتج على الموبايل */
    .product-title{font-size:1.5rem;margin-bottom:.6rem}
    .gallery-main{border-radius:var(--radius-md);margin-bottom:.6rem}
    /* نقاط بدل المصغّرات على الموبايل (توفير مساحة رأسية) */
    .gallery-thumbs{display:none}
    .gallery-dots{display:flex}
    .gallery-arrow{opacity:1;width:34px;height:34px}
    .gallery-arrow svg{width:15px;height:15px}
    /* جنب بعض بدل تحتيهم بعض — بعرض متساوٍ (flex:1 موروثة + min-width:0 هنا
       تمنع إجبارهم على النزول لسطر جديد). الأيقونة في زرار السلة بتتشال على
       الموبايل بس عشان تدّي مساحة أكبر للنص في العرض الضيق. */
    .product-actions-row .btn-cart,.product-actions-row .btn-buy{min-width:0;font-size:.85rem;padding:0 .5rem}
    .product-actions-row .btn-cart svg{display:none}
    .product-details-accordion{margin-top:1.5rem;padding:.15rem 1rem}
    /* عنوان المنتج داخل مسار التصفح مقصوص بـ ellipsis على الشاشات الضيقة —
       overflow-x:auto على .breadcrumbs نفسه يفضل موجود كحل احتياطي أخير. */
    .breadcrumbs-current{max-width:150px;overflow:hidden;text-overflow:ellipsis;display:inline-block;vertical-align:bottom}
}
@media (max-width:520px){
    .hero{min-height:340px}
    .category-strip{grid-template-columns:repeat(3,1fr);gap:.65rem}
    .category-pill{padding:1.1rem .5rem}
    .category-pill .icon{width:36px;height:36px;margin-bottom:.85rem}
    .category-pill span{font-size:.68rem}
}

/* ---------- شريط بحث الموبايل (أسفل الـ Topbar) ---------- */
.mobile-search-bar{display:none}
@media (max-width:767px){
    .mobile-search-bar{display:block;padding:.75rem 1rem 0}
    .mobile-search-bar form{position:relative}
    .mobile-search-bar input{
        width:100%;padding:.7rem 2.8rem .7rem 1rem;border-radius:999px;
        background:var(--color-surface-alt);border:1px solid var(--color-border);color:var(--color-text);
        font-family:inherit;font-size:.85rem;transition:.2s;
    }
    .mobile-search-bar input::placeholder{color:rgba(245,245,247,.45)}
    .mobile-search-bar input:hover{border-color:rgba(255,122,26,.5)}
    .mobile-search-bar input:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px rgba(255,122,26,.15)}
    .mobile-search-bar button{
        position:absolute;top:50%;right:5px;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;
        background:var(--gradient-accent);border:none;color:#fff;display:flex;align-items:center;justify-content:center;
    }
    .mobile-search-bar button svg{width:15px;height:15px}
}

/* ==================== إعادة تصميم صفحة إتمام الطلب ==================== */
.checkout-page{max-width:1180px;margin:0 auto;padding-left:0;padding-right:0}
.checkout-head{margin-bottom:1.75rem}
.checkout-head h1{font-size:1.6rem;font-weight:800;margin-bottom:.35rem}
.checkout-sub{color:var(--color-text-muted);font-size:.92rem;opacity:.8}

.checkout-alert{padding:.9rem 1.1rem;border-radius:var(--radius-sm);font-size:.88rem;margin-bottom:1.5rem}
.checkout-alert-error{background:rgba(239,65,54,.12);color:#ff8478;border:1px solid rgba(239,65,54,.35)}
.checkout-alert-success{background:rgba(255,122,26,.08);color:var(--color-accent);border:1px solid rgba(255,122,26,.28);font-size:.85rem;line-height:1.7}
.checkout-alert-sm{padding:.6rem .85rem;font-size:.8rem;margin-bottom:.85rem}

/* minmax(0,1fr) بدل 1fr وحدها: بدون كده الـ grid track بياخد الحد الأدنى
   الطبيعي لمحتواه (min-width:auto الافتراضي)، فيرفض ينكمش تحت عرض معين ويطفح
   خارج منطقة المحتوى الفعلية (اللي أصلاً مضغوطة بسبب سايدبار الموقع الثابت
   264px) - وده كان بيدي إحساس إن العمود الجانبي "طايح" خارج الصفحة. */
.checkout-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:1.75rem;align-items:start}
.checkout-main{display:flex;flex-direction:column;gap:1.25rem;min-width:0}

.checkout-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:1.75rem}
.checkout-card-title{display:flex;align-items:center;gap:.65rem;font-size:1.05rem;font-weight:800;margin-bottom:1.35rem}
.checkout-step-num{width:26px;height:26px;border-radius:50%;background:var(--gradient-accent);color:#fff;font-size:.78rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}

.checkout-form-row{display:grid;gap:1rem}
.checkout-form-row.two{grid-template-columns:1fr 1fr}
.checkout-card .form-group{margin-bottom:1.1rem}
.checkout-card .form-group:last-child{margin-bottom:0}
.checkout-card .form-control{height:46px}
.checkout-card textarea.form-control{height:auto}
.checkout-card .form-control:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px rgba(255,122,26,.15)}
.checkout-card .form-control.is-invalid{border-color:var(--color-danger)}
.checkout-card .req{color:var(--color-accent-alt)}

.field-error{color:#ff8478;font-size:.78rem;margin-top:.35rem;display:none}
.field-error.show{display:block}

.phone-input{display:flex;gap:.5rem}
.phone-dial{flex:0 0 106px;height:46px;padding:0 .4rem;border-radius:var(--radius-sm);background:var(--color-surface-alt);border:1px solid var(--color-border);color:var(--color-text);font-family:inherit;font-size:.82rem}
.phone-dial:focus{outline:none;border-color:var(--color-accent)}
.phone-input .phone-number{flex:1;min-width:0}

/* ---- ملخص الطلب ---- */
.checkout-items{display:flex;flex-direction:column;gap:.9rem;margin-bottom:1.1rem}
.checkout-item-row{display:flex;align-items:center;gap:.85rem}
.checkout-item-thumb{width:52px;height:52px;border-radius:var(--radius-sm);object-fit:cover;background:var(--color-surface-alt);flex-shrink:0}
.checkout-item-info{flex:1;min-width:0}
.checkout-item-name{font-size:.9rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.checkout-item-variant,.checkout-item-qty{font-size:.78rem;color:var(--color-text-muted)}
.checkout-item-price{font-size:.88rem;font-weight:700;white-space:nowrap;flex-shrink:0}

.checkout-coupon{border-top:1px dashed var(--color-border);border-bottom:1px dashed var(--color-border);padding:1.1rem 0;margin-bottom:1.1rem}
.coupon-form{display:flex;gap:.6rem}
.coupon-form .form-control{text-transform:uppercase}
.btn-coupon-apply{padding:0 1.3rem;border-radius:var(--radius-sm);border:1px solid var(--color-accent);background:transparent;color:var(--color-accent);font-weight:700;font-size:.85rem;white-space:nowrap;transition:.2s;cursor:pointer}
.btn-coupon-apply:hover:not(:disabled){background:rgba(255,122,26,.1)}
.btn-coupon-apply:disabled{opacity:.6;cursor:not-allowed}
.coupon-applied{display:flex;justify-content:space-between;align-items:center;font-size:.88rem;background:rgba(255,122,26,.08);border:1px solid rgba(255,122,26,.25);border-radius:var(--radius-sm);padding:.65rem .9rem}
.coupon-remove-btn{background:none;border:none;color:var(--color-danger);font-size:.8rem;cursor:pointer;font-weight:700}

.checkout-totals{display:flex;flex-direction:column;gap:.55rem}
.checkout-total-row{display:flex;justify-content:space-between;font-size:.9rem;color:var(--color-text-muted)}
.checkout-total-row span:last-child{color:var(--color-text);font-weight:600}
.checkout-total-row.discount span:last-child{color:var(--color-accent)}
.checkout-total-row.grand{margin-top:.3rem;padding-top:.75rem;border-top:1px solid var(--color-border);font-size:1.15rem;font-weight:800;color:var(--color-text)}
.checkout-total-row.grand span:last-child{color:var(--color-accent)}

/* ---- وسيلة الدفع ---- */
.pm-list{display:flex;flex-direction:column;gap:.75rem;margin-bottom:.35rem}
.pm-option{display:flex;align-items:flex-start;gap:.75rem;padding:1rem 1.1rem;border:1.5px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:.18s;background:var(--color-surface-alt)}
.pm-option:hover{border-color:rgba(255,122,26,.4)}
.pm-option.is-selected{border-color:var(--color-accent);background:rgba(255,122,26,.06);box-shadow:0 0 0 1px var(--color-accent),0 6px 20px -10px rgba(255,122,26,.5)}
.pm-radio{position:absolute;opacity:0;width:0;height:0}
.pm-indicator{width:20px;height:20px;border-radius:50%;border:2px solid var(--color-border);flex-shrink:0;margin-top:.15rem;position:relative;transition:.18s}
.pm-option.is-selected .pm-indicator{border-color:var(--color-accent)}
.pm-option.is-selected .pm-indicator::after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--gradient-accent)}
.pm-body{display:flex;flex-direction:column;gap:.25rem}
.pm-name{font-weight:700;font-size:.94rem}
.pm-desc{font-size:.8rem;color:var(--color-text-muted);opacity:.85}

/* ---- الشروط والأحكام ---- */
.checkout-terms{margin-top:1.35rem;padding-top:1.35rem;border-top:1px solid var(--color-border)}
.checkbox-row{display:flex;align-items:flex-start;gap:.65rem;cursor:pointer}
.checkbox-row input{position:absolute;opacity:0;width:0;height:0}
.checkbox-box{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--color-border);flex-shrink:0;margin-top:.1rem;position:relative;transition:.18s;background:var(--color-surface-alt)}
.checkbox-row input:checked + .checkbox-box{background:var(--gradient-accent);border-color:transparent}
.checkbox-row input:checked + .checkbox-box::after{content:'';position:absolute;right:6px;top:2px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.checkbox-label{font-size:.85rem;line-height:1.7;color:var(--color-text-muted)}
.checkbox-label a{color:var(--color-accent);text-decoration:underline}

/* ---- زر تأكيد الطلب ---- */
.btn-place-order{width:100%;margin-top:1.5rem;height:56px;border:none;border-radius:var(--radius-md);background:var(--gradient-accent);color:#fff;font-size:1.02rem;font-weight:800;cursor:pointer;transition:.2s;box-shadow:0 10px 26px -12px rgba(255,122,26,.6);display:flex;align-items:center;justify-content:center}
.btn-place-order:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px)}
.btn-place-order:disabled{cursor:not-allowed;opacity:.85}
.btn-place-order.is-loading .btn-label::before{content:'';display:inline-block;width:16px;height:16px;margin-inline-end:.6rem;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:btn-spin .7s linear infinite;vertical-align:middle}
@keyframes btn-spin{to{transform:rotate(360deg)}}

/* ---- العمود الجانبي (ملخص مختصر لاصق) ---- */
.checkout-side-card{position:sticky;top:calc(var(--header-height) + 1rem);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:1.5rem}
.checkout-side-row{display:flex;justify-content:space-between;font-size:.85rem;color:var(--color-text-muted);margin-bottom:.85rem}
.checkout-side-total{display:flex;justify-content:space-between;align-items:baseline;font-size:1.2rem;font-weight:800;padding-bottom:1.1rem;margin-bottom:1.1rem;border-bottom:1px solid var(--color-border)}
.checkout-side-total span:last-child{color:var(--color-accent)}
.checkout-trust{list-style:none;display:flex;flex-direction:column;gap:.6rem;padding:0;margin:0}
.checkout-trust li{font-size:.78rem;color:var(--color-text-muted);padding-inline-start:1.3rem;position:relative}
.checkout-trust li::before{content:'✓';position:absolute;inset-inline-start:0;color:var(--color-accent);font-weight:800}

.checkout-empty-note{color:var(--color-text-muted);font-size:.88rem;margin-bottom:1rem}

/* سايدبار الموقع الثابت (264px، .site-shell{display:flex}) بياكل جزء ثابت
   من عرض أي نافذة متصفح، فمساحة المحتوى الفعلية = عرض النافذة - 264px، مش
   عرض النافذة نفسه. على نافذة لابتوب عادية (~1300-1400px) بتبقى المساحة
   الحقيقية للمحتوى ~1000-1100px بس، مش كافية لعمودين (340px جانبي + محتوى
   مريح)، وده كان بيسبب طفح أفقي حقيقي (العمود الجانبي يظهر "طايح" خارج
   الصفحة). نكدّس العمودين على أي نافذة أضيق من ~1400px (مش 767px التقليدية
   للموبايل) بدل ما نستنى لحد نقطة الطفح. لازم يجي بعد قاعدة .checkout-grid
   الأساسية بالأسفل عشان ياخد أولوية صح في الـ cascade. */
@media (max-width:1400px){
    .checkout-grid{grid-template-columns:1fr}
}

/* ---- صفحة تأكيد الطلب ---- */
.order-conf-page{max-width:1180px;margin:0 auto}
.order-conf-hero{text-align:center;padding:2.5rem 1rem;margin-bottom:1.75rem}
.order-conf-check{
    width:64px;height:64px;border-radius:50%;margin:0 auto 1.1rem;
    background:var(--gradient-accent);display:flex;align-items:center;justify-content:center;color:#fff;
    box-shadow:0 0 0 8px rgba(255,122,26,.12),0 10px 26px -10px rgba(255,122,26,.6);
}
.order-conf-check svg{width:30px;height:30px}
.order-conf-hero h1{font-size:1.55rem;font-weight:800;margin-bottom:.4rem}
.order-conf-sub{color:var(--color-text-muted);font-size:.92rem;margin-bottom:1.25rem}
.order-conf-number{
    display:inline-flex;align-items:center;gap:.65rem;background:var(--color-surface);
    border:1px solid var(--color-border);border-radius:999px;padding:.55rem .6rem .55rem 1.1rem;font-size:.9rem;
}
.order-conf-number span{color:var(--color-text-muted)}
.order-conf-number strong{font-weight:800;letter-spacing:.02em}
.order-conf-copy{
    background:var(--color-surface-alt);border:1px solid var(--color-border);color:var(--color-text);
    border-radius:999px;padding:.4rem .9rem;font-size:.78rem;font-weight:700;cursor:pointer;transition:.2s;
}
.order-conf-copy:hover{border-color:var(--color-accent);color:var(--color-accent)}

.order-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.order-info-grid div{display:flex;flex-direction:column;gap:.3rem}
.order-info-grid span{font-size:.78rem;color:var(--color-text-muted)}
.order-info-grid strong{font-size:.92rem;font-weight:700}

.status-pill{display:inline-flex;align-items:center;padding:.25rem .7rem;border-radius:999px;font-size:.78rem!important;font-weight:700!important;width:fit-content}
.status-pill.status-ok{background:rgba(46,204,113,.12);color:#2ecc71}
.status-pill.status-info{background:rgba(255,122,26,.12);color:var(--color-accent)}
.status-pill.status-warn{background:rgba(255,184,76,.14);color:var(--color-warning)}
.status-pill.status-danger{background:rgba(239,65,54,.12);color:var(--color-danger)}

.order-conf-next p{color:var(--color-text-muted);font-size:.9rem;line-height:1.8;margin-bottom:1.1rem}
.btn-whatsapp-cta{
    display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
    background:rgba(255,122,26,.1);border:1px solid rgba(255,122,26,.35);color:var(--color-accent);
    padding:.75rem 1.4rem;border-radius:var(--radius-md);font-weight:700;font-size:.88rem;transition:.2s;
}
.btn-whatsapp-cta:hover{background:rgba(255,122,26,.18)}

.order-conf-actions{display:flex;flex-direction:column;gap:.65rem;margin-top:.25rem}
.btn-continue-shopping{text-align:center;font-size:.85rem;color:var(--color-text-muted);padding:.5rem;transition:.2s}
.btn-continue-shopping:hover{color:var(--color-accent)}

@media (max-width:767px){
    .checkout-page{padding-left:0;padding-right:0}
    .checkout-head h1{font-size:1.35rem}
    .checkout-card{padding:1.25rem;border-radius:var(--radius-md)}
    .checkout-form-row.two{grid-template-columns:1fr}
    /* الملخص المختصر اللاصق مصمم للشاشات الكبيرة (يعلق أثناء التمرير جنب
       نموذج طويل)؛ على الموبايل التخطيط عمود واحد فبيبقى مجرد تكرار لنفس
       الإجمالي الموجود بالفعل داخل كارت "ملخص الطلب" - نخفيه تمامًا. مقصورة
       على صفحة إتمام الطلب فقط: صفحة تأكيد الطلب تعيد استخدام نفس الكلاسات
       لكن عمودها الجانبي فيه أزرار حقيقية (تحميل الفاتورة/تتبع الطلب) لازم
       تفضل ظاهرة على الموبايل. */
    body.page-checkout .checkout-side{display:none}
    .btn-place-order{height:52px;font-size:.95rem}
    /* حجز مساحة عن الأزرار العائمة (واتساب/اتصال) الظاهرة فوق زرار التأكيد
       بعرض كامل على الموبايل. */
    .btn-place-order{margin-right:64px;width:calc(100% - 64px)}

    /* صفحة تأكيد الطلب على الموبايل */
    .order-conf-hero{padding:1.75rem 1rem}
    .order-info-grid{grid-template-columns:1fr}
    .order-conf-number{flex-wrap:wrap;justify-content:center}
}