/* ==========================================================================
   smx-store.css — SouqMint 1.50 (دفعة 50) + 1.51 (دفعة 51) + 1.52 (دفعة 52) + 1.53 (دفعة 53) — آخر الملف: واجهة المتجر ودخول العملاء على عيلة سيسنتا المشتركة
   يُحمَّل بعد tokens.css و motion.css. شكل بس — مفيش مكوّن ولا نموذج اتغيّر.
     1  سكرول بار ظاهر ومتصمَّم (فاتح وداكن) — بدل الافتراضي الباهت
     2  الرأس: شريط بسيط (بحث + الوضع + السلة) — نفس البنية، أيقونة الوضع الصح في «حسب الجهاز»
     3  شريط الإعلان: نص ثابت (من غير حركة)
     4  الهيرو: سطح فاتح فيه صورة المنتج، والزرار الأساسي بلون المتجر — مفيش تدرّج ولا توهّج
     5  كروت الأقسام: الصورة فوق والاسم تحت على السطح (بدل الطبقة الغامقة المتدرّجة)
     6  كارت المنتج: «أضف للسلة / اختر الخيارات» ظاهر على أي جهاز لمس أو شاشة ضيقة
     7  هدوء: حواف 8px، ظلال أخف
   ========================================================================== */

/* ---------- 1) scrollbar: always visible, styled in both modes ---------- */
html{scrollbar-width:auto;scrollbar-color:var(--n-400) var(--n-100)}
html *{scrollbar-width:thin;scrollbar-color:var(--n-400) transparent}
::-webkit-scrollbar{width:12px;height:10px}
::-webkit-scrollbar-track{background:var(--n-100)}
::-webkit-scrollbar-thumb{background:var(--n-400);border-radius:999px;border:3px solid var(--n-100)}
::-webkit-scrollbar-thumb:hover{background:var(--n-500)}
:is(.cat-strip,.gallery-thumbs,.tabs,.f-scroll)::-webkit-scrollbar-track{background:transparent}
:is(.cat-strip,.gallery-thumbs,.tabs,.f-scroll)::-webkit-scrollbar-thumb{border-color:transparent;background-clip:padding-box}
/* شريط الأقسام: سكرول بار رفيع ظاهر (كان مخفي فالقسم الأخير بيتقص في نص الكلمة من غير إشارة) */
.cat-strip{padding-block-end:var(--s-2)}

/* ---------- 2) the top bar: same structure, calmer ---------- */
.shop-header{background:var(--n-0);border-block-end:1px solid var(--n-200)}
.shop-header-in{min-height:64px}
.search-box input{background:var(--n-25);border-color:var(--n-200)}
.search-box input:focus{background:var(--n-0)}
.cat-chip{border-radius:var(--r-full)}
.cat-chip.active{background:var(--brand-600);border-color:var(--brand-600)}
/* زرار الوضع: الأيقونتين في الرابط، والظاهرة بتتبع الوضع الفعلي (حتى في «حسب الجهاز») */
.smx-mode .smx-ic-sun{display:none}
[data-mode="dark"] .smx-mode .smx-ic-sun{display:inline-block}
[data-mode="dark"] .smx-mode .smx-ic-moon{display:none}
.btn:hover{transform:none}

/* ---------- 3) announcement bar: static text, no marquee ---------- */
.sq-bar{background:var(--ink-surface);color:var(--ink-on);text-align:center;white-space:normal;padding-block:6px}
.sq-bar-track{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-1) var(--s-6);animation:none;will-change:auto;padding-inline:var(--s-4)}
.sq-bar b{color:inherit}
@media(max-width:640px){ .sq-bar-track>span:not(:first-child){display:none} }

/* ---------- 4) hero: a light surface with the product photo ---------- */
.sq-hero{background:var(--n-0);color:var(--n-800);border:1px solid var(--n-200);border-radius:var(--r-lg);box-shadow:var(--sh-1);margin-inline:0}
.sq-hero .eyebrow{color:var(--brand-700)}
.sq-hero h1{color:var(--n-900)}
.sq-hero p{color:var(--n-600)}
.sq-shot{border:1px solid var(--n-200);box-shadow:none;border-radius:var(--r-lg);background:var(--n-100)}
.sq-shot img{animation:none}
.sq-dots button{background:var(--n-300);background-clip:content-box}
.sq-dots button[aria-current=true]{background:var(--brand-600);background-clip:content-box}
.sq-stats{margin-block-start:var(--s-4)}
.sq-stat:hover,.sq-vend:hover,.sq-feat:hover,.p-card:hover{transform:none}

/* ---------- 5) section cards: photo on top, name underneath ---------- */
.sq-cat{aspect-ratio:auto;display:flex;flex-direction:column;border:1px solid var(--n-200);background:var(--n-0)}
.sq-cat:hover{transform:none;box-shadow:var(--sh-2);border-color:var(--n-300)}
.sq-cat img{position:static;inset:auto;aspect-ratio:1/1;height:auto;background:var(--n-100)}
.sq-cat:not(:has(img))::before{content:"";display:block;aspect-ratio:1/1;background:var(--n-100)}
.sq-cat:hover img{transform:none}
.sq-cat-lbl{position:static;color:var(--n-900);padding:var(--s-2) var(--s-3) var(--s-3)}
.sq-cat-lbl span{color:var(--n-500);opacity:1}

/* ---------- 6) product card: the quick button is reachable on touch ----------
   كان بيظهر بالـhover بس؛ أجهزة اللمس اللي بتعلن hover (بعض أندرويد والتابلت بكيبورد)
   كانت بتخبّيه. دلوقتي: أي مؤشر لمس، أو أي شاشة أضيق من 900px = الزرار تحت الصورة دايمًا. */
@media (any-pointer:coarse),(hover:none),(max-width:899.98px){
  .p-quick{opacity:1;transform:none;position:static;margin:0;padding:var(--s-2) var(--s-3) 0}
  .p-card:hover .p-img2{opacity:0}
  .p-card:hover .p-thumb .p-img1{opacity:1}
  .p-thumb{overflow:visible;aspect-ratio:auto;background:transparent}
  .p-thumb>.p-media{position:relative;inset:auto;display:block;aspect-ratio:1/1;overflow:hidden;background:var(--n-100)}
}
.p-quick .btn{box-shadow:none}
.p-card{border-color:var(--n-200)}
.p-price{color:var(--n-900)}

/* ---------- 7) calm details ---------- */
/* contrast (AA): checkout steps were n-400 on the page (2.7); «الشحن علينا» was --ok (3.5) */
.sq-steps span{color:var(--n-500)}
.sq-prog.is-done .sq-prog-txt{color:var(--ok-text)}
.sq-steps span i svg{width:12px;height:12px}
/* the vendor initial sat under «.sq-vend span{color:muted}» (1.05:1) · the old price was n-400 (2.7–3.2) */
.sq-vend .sq-avatar{color:#fff}
/* product page on a phone: the grid column grew to its widest line (1fr = min-content), so the
   «أضف إلى السلة» row and the delivery line were cut at the screen edge (also in 1.49) */
.pdp{grid-template-columns:minmax(0,1fr)}
.pdp>*{min-width:0}
@media(min-width:900px){.pdp{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}
.p-old{color:var(--n-500)}
.card,.filter-side,.sq-stat,.sq-vend,.sq-feat{border-color:var(--n-200)}
.badge{border-radius:var(--r-full)}
@media (prefers-reduced-motion:reduce){ .sq-cat,.p-card{transition:none} }

/* ==========================================================================
   SouqMint 1.51 (دفعة 51) — تكملة مراجعة التصميم
     a  الصورة الناقصة = أول حرف من الاسم (كارت المنتج · الهيرو · كروت الأقسام)
     b  شريط الإعلان ثابت في الاتجاهين (العربي والإنجليزي) ومع «تقليل الحركة»
     c  شريط الأقسام على الموبايل: يبدأ بهامش ويقف على أول القسم، والقسم المقصوص على الحافة هو إشارة التمرير
     d  الحواف كلها 8px (علامة الشعار كانت 10px)
   ========================================================================== */
.p-initial,.sq-initial,.sq-cat-initial{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1/1;
  background:var(--brand-50);color:var(--brand-700);font-weight:700;line-height:1;user-select:none}
.p-initial{height:100%;font-size:clamp(40px,9vw,64px)}
.sq-initial{font-size:clamp(64px,14vw,120px);border-radius:inherit}
.sq-cat-initial{font-size:clamp(40px,9vw,56px)}
.sq-cat:has(.sq-cat-initial)::before{display:none}
[data-mode="dark"] :is(.p-initial,.sq-initial,.sq-cat-initial){background:var(--brand-100);color:var(--brand-700)}

[dir] .sq-bar-track{animation:none!important;transform:none!important}

@media(max-width:640px){
  .cat-strip{scroll-snap-type:x proximity;scroll-padding-inline:var(--s-4)}
  .cat-strip>*{scroll-snap-align:start}
}

.brand-mark{border-radius:var(--r-sm)}

/* ==========================================================================
   SouqMint 1.52 (دفعة 52) — رأس المتجر على الموبايل + القائمة الجانبية
     a  الرأس تحت 900px: ☰ + الشعار + السلة في الشريط، والبحث صف كامل تحته؛ اللغة والوضع والدخول جوّه القائمة
     b  القائمة الجانبية من بداية الشاشة (يمين في العربي، شمال في الإنجليزي)
     c  زرار «أضف للسلة / اختر الخيارات» ظاهر على أي شاشة ≤1024px أو أي جهاز لمس
     d  شريط الأقسام: حافة باهتة ناحية الباقي + القسم النشط بيتجاب في الصورة (smx-store.js)
     e  نقط الهيرو: لون أوضح (3:1 على السطح)
   ========================================================================== */
.sq-menu-btn{display:none}
.sq-hd-extra{display:flex;align-items:center;gap:var(--s-2)}
/* 44px targets in the bar at every width (touch tablets use the desktop bar at ≥900px) */
.shop-header-in :is(.btn,.brand){min-height:44px}
.sq-drawer{display:none}

@media (max-width:899.98px){
  .shop-header-in{flex-wrap:wrap;gap:var(--s-2) var(--s-2);min-height:0;padding-block:var(--s-2)}
  .sq-menu-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;
    border-radius:var(--r-sm);color:var(--n-800);border:1px solid var(--n-200);background:var(--n-0)}
  .sq-menu-btn:hover{background:var(--n-50)}
  .shop-header .brand{min-height:44px;min-width:0;flex:0 1 auto}
  .shop-header .brand .hide-sm{position:static;width:auto;height:auto;overflow:hidden;clip-path:none;white-space:nowrap;text-overflow:ellipsis}
  .sq-hd-extra{display:none}
  .shop-header .spacer{flex:1 1 0;min-width:0}
  .shop-header .cart-btn{min-width:44px;min-height:44px;flex:none;padding-inline:var(--s-3)}
  .shop-header .search-box{order:10;flex:1 0 100%;max-width:none;margin:0}
  .shop-header .search-box input{min-height:44px;width:100%}
  .shop-header .cat-strip{padding-block:var(--s-2)}
}

/* ---- the drawer ---- */
.sq-drawer:target,.sq-drawer.is-open{display:block;position:fixed;inset:0;z-index:200}
.sq-drawer-ov{position:absolute;inset:0;background:rgb(0 0 0 / .5)}
.sq-drawer-in{position:absolute;inset-block:0;inset-inline-start:0;width:min(320px,86vw);overflow-y:auto;overscroll-behavior:contain;
  background:var(--n-0);color:var(--n-800);border-inline-end:1px solid var(--n-200);box-shadow:var(--sh-3);
  padding:var(--s-3) var(--s-3) var(--s-8);animation:sq-dr-in .2s ease-out}
[dir=rtl] .sq-drawer-in{--sq-dr-from:100%}
[dir=ltr] .sq-drawer-in{--sq-dr-from:-100%}
@keyframes sq-dr-in{from{transform:translateX(var(--sq-dr-from))}to{transform:none}}
.sq-dr-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);padding-block-end:var(--s-3);
  border-block-end:1px solid var(--n-200);margin-block-end:var(--s-2)}
.sq-dr-head .brand{font-size:var(--fs-md);color:var(--n-900)}
.sq-dr-x{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--r-sm);color:var(--n-700)}
.sq-dr-x:hover{background:var(--n-100)}
.sq-dr-sec{padding-block:var(--s-2);border-block-end:1px solid var(--n-200)}
.sq-dr-sec:last-child{border-block-end:0}
.sq-dr-t{font-size:var(--fs-xs);font-weight:700;color:var(--n-600);padding:var(--s-2) var(--s-3) var(--s-1)}
.sq-dr-a{display:flex;align-items:center;gap:var(--s-3);min-height:44px;padding-inline:var(--s-3);border-radius:var(--r-sm);
  color:var(--n-800);text-decoration:none;font-weight:600;font-size:var(--fs-sm)}
.sq-dr-a svg{flex:none;color:var(--n-500)}
.sq-dr-a:hover{background:var(--n-100)}
.sq-dr-a.is-on{background:var(--brand-50);color:var(--brand-700)}
.sq-dr-a.is-on svg{color:var(--brand-700)}
.sq-dr-a:focus-visible,.sq-dr-x:focus-visible,.sq-menu-btn:focus-visible{outline:2px solid var(--brand-500);outline-offset:2px}
html.sq-lock,html.sq-lock body{overflow:hidden}
@media (prefers-reduced-motion:reduce){ .sq-drawer-in{animation:none} }
@media (min-width:900px){ .sq-drawer:target{display:none} }

/* ---- quick add / choose options: always visible at ≤1024px or on touch ---- */
@media (any-pointer:coarse),(hover:none),(max-width:1024px){
  .p-quick{opacity:1!important;visibility:visible!important;transform:none!important;position:static;margin:0;padding:var(--s-2) var(--s-3) 0;pointer-events:auto}
  .p-card:hover .p-img2{opacity:0}
  .p-card:hover .p-thumb .p-img1{opacity:1}
  .p-thumb{overflow:visible;aspect-ratio:auto;background:transparent}
  .p-thumb>.p-media{position:relative;inset:auto;display:block;aspect-ratio:1/1;overflow:hidden;background:var(--n-100)}
  .p-quick .btn{min-height:44px}
}

/* ---- category strip: fade toward the hidden part ---- */
.cat-strip.is-more-end{-webkit-mask-image:linear-gradient(to left,transparent 0,#000 40px);mask-image:linear-gradient(to left,transparent 0,#000 40px)}
[dir=rtl] .cat-strip.is-more-end{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 40px);mask-image:linear-gradient(to right,transparent 0,#000 40px)}

/* ---- hero dots: 3:1 against the surface ---- */
.sq-dots button{background:var(--n-500);background-clip:content-box}
.sq-dots button[aria-current=true]{background:var(--brand-600);background-clip:content-box}

/* ==========================================================================
   SouqMint 1.53 (دفعة 53) — صفحة المنتج من غير صورة حقيقية: أول حرف زي الكروت
   ========================================================================== */
.pdp-initial-wrap{display:flex}
.pdp-initial{font-size:clamp(72px,18vw,160px);border-radius:inherit}