/* ==========================================================================
كات شو — CSS مخصّص لثيم «رائد» على سلة · النسخة 2 · 2026-08-16
يُلصق في: لوحة سلة » تصميم المتجر » تخصيص الثيم بالكود » CSS
(يتطلّب: باقة برو ✅ + دومين مخصّص ❌ — مقفل حتى يُربط الدومين)
⛔ يُلغي `catshoo-custom.css` — ذاك مبنيّ على قياس **خاطئ** رفضه محمد
(«بلا استدارة 0px» · الشريط `#2ec4c9` · الفوتر `#2b3648`). الصحيح أدناه.
📏 مصدر قيم «الهدف»: ZID-MEASURED.md — قياس getComputedStyle على
catshoop1.com الحيّ (2026-08-15) على 414px و1440px.
📐 مصدر «المحدِّدات والقيم الحالية»: قياس مباشر على معاينة رائد الحيّة
لمتجر 1462494601 (2026-08-16).
✅ لماذا يعمل الحقن أصلاً: مكوّنات سلة (custom-salla-product-card ·
salla-add-product-button …) كلها **Light DOM** — قِستُ الصفحة كاملةً
فوجدتُ 4 عناصر فقط لها shadowRoot وكلها `salla-hook` فارغة.
========================================================================== */
:root{
--cs-black:#060505; /* أسود الهوية */
--cs-teal:#3CA8B4; /* الشريط العلوي — مقيس (لا #2ec4c9) */
--cs-footer:#1E293B; /* الفوتر slate-800 — مقيس (لا #2b3648) */
--cs-text2:#334155; /* نص ثانوي slate-700 */
--cs-price:#212529;
--cs-badge:#FF483B; /* شارة عدّاد السلة */
--cs-r-card:16px; /* استدارة البطاقات — مقيس */
--cs-r-btn:8px; /* استدارة الأزرار — مقيس */
}
/* ── 1) الحاوية: سلة 1280 ← زد 1320 ─────────────────────────────────── */
.container,.max-w-screen-xl{max-width:1320px!important}
/* ── 2) الشعار: سلة 40×40 ← زد 160×60 ───────────────────────────────── */
.store-header img[class*="logo"],.store-header .navbar-brand img,
header img[alt*="كات"],.store-header a[href$="/"]>img{
max-height:60px!important;height:60px!important;width:auto!important;
max-width:200px!important;object-fit:contain!important}
/* ── 3) عناوين الأقسام: 18/700 ← 28/700/#060505 ─────────────────────── */
.s-block__title,.s-block>h2{
font-size:28px!important;font-weight:700!important;color:var(--cs-black)!important;
text-align:start!important}
@media(max-width:640px){.s-block__title,.s-block>h2{font-size:20px!important}}
/* ── 4) بطاقة المنتج — قلب التطابق ──────────────────────────────────── */
custom-salla-product-card.s-product-card-entry{
border-radius:var(--cs-r-card)!important;background:transparent!important;
border:0!important;box-shadow:none!important;overflow:hidden!important}
custom-salla-product-card .s-product-card-image{
border-radius:var(--cs-r-card) var(--cs-r-card) 0 0!important;overflow:hidden!important}
custom-salla-product-card .s-product-card-image img{object-fit:cover!important}
/* تفاصيل البطاقة على خلفية بيضاء كما في زد */
custom-salla-product-card .s-product-card-content{background:#fff!important;padding:8px!important}
/* العنوان: 20/600/غامق/بلا قصّ ← 14/500/#334155/سطر واحد + … */
custom-salla-product-card .s-product-card-content-title,
custom-salla-product-card .s-product-card-content-title a{
font-size:14px!important;font-weight:500!important;color:var(--cs-text2)!important;
line-height:16px!important;
display:-webkit-box!important;-webkit-line-clamp:1!important;
-webkit-box-orient:vertical!important;overflow:hidden!important}
/* السعر: 14/700 ← 16/700/#212529 */
custom-salla-product-card .s-product-card-price h4,
custom-salla-product-card .s-product-card-price strong,
custom-salla-product-card h4.s-product-card-price{
font-size:16px!important;font-weight:700!important;color:var(--cs-price)!important}
/* زر «اضف للسلة»: شفاف/12/700 ← أسود ممتد/8/400 */
custom-salla-product-card salla-add-product-button .s-button-element,
custom-salla-product-card salla-add-product-button button,
custom-salla-product-card .s-button-element.s-button-primary{
background:var(--cs-black)!important;color:#fff!important;
border-radius:var(--cs-r-btn)!important;border:0!important;
font-weight:400!important;font-size:14px!important;
width:100%!important;min-height:39px!important}
custom-salla-product-card salla-add-product-button .s-button-element *{color:#fff!important}
/* القلب أعلى اليسار (RTL) — مقيس: سلة تضعه صحيحاً أصلاً، نثبّته احترازاً */
custom-salla-product-card .s-product-card-image salla-button[shape=icon]{
inset-inline-end:8px!important;top:8px!important}
/* ── 5) شبكة المنتجات 4/3/2 (صفحات التصنيف والبحث) ──────────────────
⚠️ المحدِّد الصحيح مقيس: `.s-products-list-wrapper` — وليس
`.s-products-list-main` (لا وجود له). وسلة تعطي 4 في الصف على
الديسكتوب أصلاً ⇒ هذه القواعد تضبط التابلت والجوال أساساً.
⚠️ الصفحة الرئيسية **سلايدرات (swiper) لا شبكة** — وهذا يطابق زد
(سلايدر slick) فلا تُفرض عليها شبكة. */
.s-products-list-wrapper{
display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important}
@media(max-width:1024px){.s-products-list-wrapper{
grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:640px){.s-products-list-wrapper{
grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}}
/* ── 6) بلاطات التصنيفات ─────────────────────────────────────────────
⛔ كانت هذه القاعدة `.s-block--square-photos` — **لا وجود لهذا الكلاس إطلاقاً**،
فكانت تصيب هواءً منذ البداية. الكلاس الحقيقي المقيس (2026-08-16):
.s-block--banners
└── .grid ← عمود واحد على الجوال
└── .banner-entry.square-photos.has-overlay 370×200
├── .lazy__bg position:absolute · صورة **خلفية CSS** لا ![]()
└── h3.text-with-border > span «قسم القطط» ← فوق الصورة
زد: **عمودان** على الجوال · الصورة ارتفاع 185 واستدارة 8 · والاسم **تحتها**
13px. لذلك نُخرج `.lazy__bg` من الوضع المطلق ليتدفّق العنوان بعدها. */
/* ⚠️ تصحيح 2026-08-17: بنيتُها أولاً **شبكة** بعمودين تعرض الأربعة في صفّين —
وهذا خطأ. زد يعرضها **سلايدراً**: اثنان ظاهران والباقي بالسحب، ونقاط أسفلها
(النقاط كانت في لقطة المستخدم وأنا قرأتُها شبكةً). التصحيح: تمرير أفقي
بـscroll-snap — سحب أصلي على الجوال بلا أي مكتبة. */
@media(max-width:767px){
.s-block--banners .grid{
display:flex!important;
grid-template-columns:none!important;
overflow-x:auto!important;overflow-y:hidden!important;
scroll-snap-type:x mandatory!important;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;-ms-overflow-style:none;
gap:12px!important;padding-bottom:2px!important}
.s-block--banners .grid::-webkit-scrollbar{display:none!important}
.s-block--banners .grid>*{
flex:0 0 calc(50% - 6px)!important;
scroll-snap-align:start!important}
}
/* ── 17) بانر الهيرو ─────────────────────────────────────────────────
بُدّلت صوره إلى أصول زد **المربّعة** (1080×1080 و1688×1688) عبر MCP
بتاريخ 2026-08-17 — لأن نسخ سلة كانت عريضة (1600×800) بلا الشعار
والإطار الأصفر. الجوال صار 350×350 = عرض زد حرفياً.
⚠️ لكن المربّع على الديسكتوب يصبح **1094×1094** (مقيس) — شريطٌ يبتلع
الشاشة كاملة. نحدّه بـ430 مع `contain` فيبقى كاملاً بلا قصّ.
نسخة التراجع: backup/hero-before-20260817.json */
@media(min-width:768px){
.s-block--photos-slider img,.s-block .swiper-slide img{
max-height:430px!important;object-fit:contain!important;
width:auto!important;margin-inline:auto!important}
}
/* ── 18) الهيرو صورة واحدة على الجوال — شبكة أمان ────────────────────
الـJS يحذف الشريحة الزائدة عبر `swiper.removeSlide`، لكنه يعتمد على أن
Swiper يكون قد تهيّأ قبل انتهاء محاولاته. على جهاز/شبكة أبطأ قد يتأخّر
فترجع الشريحة الثانية — وهذا ما رآه المستخدم (2026-08-17) بينما قياسي
من جهازي أعطى شريحة واحدة. فالـCSS هنا يضمن النتيجة بلا اعتماد توقيت:
نخفي ما بعد الأولى، و`transform:none` يقفل الغلاف فلا يزحف التشغيل التلقائي.
⚠️ مقيّد بـ`.s-block--photos-slider` — القسم الوحيد الذي يحمل swiper
(مقيس)؛ تعميمه على `.s-block` كان سيكسر سلايدرات المنتجات. */
@media(max-width:640px){
/* WARN 2026-08-17: scoped to :first-of-type = the HERO only. A second
photos_slider was added below the banner strip; without this scope these
rules would paralyse it too (one slide, no dots, wrapper transform:none). */
.s-block--photos-slider:first-of-type .swiper-slide:not(:first-child){display:none!important}
.s-block--photos-slider:first-of-type .swiper-wrapper{transform:none!important}
.s-block--photos-slider:first-of-type .swiper-pagination,
.s-block--photos-slider:first-of-type .swiper-button-next,
.s-block--photos-slider:first-of-type .swiper-button-prev{display:none!important}
}
/* أيقونة البحث في الهيدر — يبنيها JS (الجوال فقط) */
#cs-search{display:none;align-items:center;justify-content:center;
width:40px;height:40px;padding:0;border:0;background:transparent;cursor:pointer}
#cs-search svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2}
@media(max-width:640px){#cs-search{display:flex}}
/* نقاط الترقيم — يُنشئها JS تحت السلايدر */
.cs-dots{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:12px}
.cs-dots button{width:8px;height:8px;padding:0;border:0;border-radius:999px;
background:#D9D9D9;cursor:pointer;transition:width .2s,background .2s}
.cs-dots button.is-on{background:var(--cs-black);width:22px}
/* ⚠️ `height:auto` وحده لا يكفي: الشبكة تُمدّد الأبناء لطول الصفّ افتراضياً
(`align-items:stretch`) فطلعت البلاطة 412×**558** على الديسكتوب. */
.s-block--banners .grid{align-items:start!important}
/* الاسم تحت الصورة بدل فوقها */
.s-block--banners .banner-entry.has-overlay{
display:flex!important;flex-direction:column!important;
height:auto!important;padding:0!important;background:transparent!important}
.s-block--banners .banner-entry.has-overlay .lazy__bg{
position:relative!important;inset:auto!important;
width:100%!important;height:185px!important;
border-radius:var(--cs-r-btn)!important}
.s-block--banners .banner-entry.has-overlay h3{
position:static!important;width:auto!important;height:auto!important;
margin:8px 0 0!important;padding:0!important;border:0!important;
background:transparent!important;display:block!important;text-align:center!important}
.s-block--banners .banner-entry.has-overlay h3 span{
font-size:13px!important;font-weight:400!important;color:var(--cs-text2)!important;
background:transparent!important;text-shadow:none!important;padding:0!important}
/* البانرات بلا عنوان: استدارة فقط */
.s-block--banners .banner-entry .lazy__bg{border-radius:var(--cs-r-btn)!important}
@media(max-width:767px){
/* رُفع من 130 إلى 165 بطلب المستخدم (2026-08-17) — البلاطة كانت صغيرة. */
.s-block--banners .banner-entry.has-overlay .lazy__bg{height:165px!important}
/* ── شريط البانرين العريضين (تحت الأقسام مباشرة) — مطابقة زد ─────────
قياس زد (catshoop1.com · 390px): القسم **390×56** · بانران **179×48**
جنباً لجنب · `cover` · بلا حشوة · هامش علوي 16.
قياس سلة قبل: البانر **179×200** والصورة داخله **179×110** فقط
⇒ **90px فراغ أبيض ميّت** لكل بانر، وهو ما يجعل الشريط يبدو غريباً.
مصدر النسبة ليس التخمين: أبعاد ملف الصورة نفسه (رأس PNG) = **1282×785**.
⚠️ ملاحظة مسجَّلة: أصول زد لهذا الشريط **768×204** (نسبة 3.76) وأصول
سلة **1282×785** (نسبة 1.63) — **ملفات مختلفة**. فرض نسبة زد على
صور سلة يقصّ 57% من ارتفاعها. لذلك أطابق **التخطيط** (اثنان جنباً
لجنب بلا فراغ) بنسبة الصور الفعلية، لا بقصّها.
ثلاث مصائد لزم تجاوزها معاً (كلٌّ وحده لا يكفي):
١) الارتفاع مفروض على **الرابط** لا على الصورة فقط.
٢) `.lazy__bg` **مطلقة** في ثيم سلة ⇒ لا تدفع ارتفاع أبيها.
٣) الرابط عليه حشوة 12px تُبقي إطاراً فارغاً. */
.s-block--banners .banner-entry:not(.has-overlay){
height:auto!important;min-height:0!important;
padding:0!important;background:transparent!important}
.s-block--banners .banner-entry:not(.has-overlay) .lazy__bg{
position:relative!important;inset:auto!important;
width:100%!important;height:auto!important;
aspect-ratio:1282/785!important;
background-size:cover!important;
border-radius:var(--cs-r-btn)!important}
}
/* ── 7) الفوتر: أسود #0e0f0f ← كحلي #1E293B ────────────────────────── */
.store-footer,footer.store-footer{
background:var(--cs-footer)!important;padding:14px 0 70px!important}
.store-footer h3,.store-footer .s-block__title{
font-size:20px!important;font-weight:500!important;color:#fff!important}
@media(min-width:1024px){
.store-footer .container>.grid,.store-footer .container>div>.grid{
grid-template-columns:repeat(4,minmax(0,1fr))!important}}
/* ── 8) شريط الإعلان العلوي — تركوازي مقيس ─────────────────────────── */
salla-advertisement,.s-advertisement,[class*="advertisement"]{
background:var(--cs-teal)!important;color:#fff!important;font-size:16px!important}
salla-advertisement *{color:#fff!important}
/* ── 9) شريط التبويبات السفلي (يُنشئه JS — الأنماط هنا) ─────────────── */
#cs-tabs{position:fixed;bottom:0;inset-inline:0;height:50px;background:#fff;
display:none;z-index:999999999;justify-content:space-around;align-items:center;
box-shadow:none;border-top:0;
transition:transform .26s cubic-bezier(.4,0,.2,1);will-change:transform}
/* ينزاح خارج الشاشة مع النزول — يرجع فوراً مع أول حركة صعود */
#cs-tabs.cs-hide{transform:translateY(100%)}
/* flex:1 بدل min-width الثابت: ستة تبويبات تتقاسم 375px بلا فيضان */
#cs-tabs a{display:flex;flex-direction:column;align-items:center;gap:2px;
font-size:11px;font-weight:400;color:var(--cs-text2);text-decoration:none;
flex:1 1 0;min-width:0;position:relative}
#cs-tabs a>span:last-child{max-width:100%;white-space:nowrap;
overflow:hidden;text-overflow:ellipsis}
/* واتساب: أخضره الأصلي يصرخ داخل شريط أبيض — التركوازي يميّزه ضمن الهوية */
#cs-tabs a.cs-wa-tab{color:var(--cs-teal)}
/* الأيقونة المصمتة تبدو أثقل من الخطّية عند نفس المقاس — تصحيح بصري */
#cs-tabs a.cs-wa-tab svg{fill:currentColor;stroke:none;width:20px;height:20px}
#cs-tabs a.is-active{color:var(--cs-black)}
#cs-tabs svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6}
#cs-tabs .cs-count{position:absolute;top:-2px;inset-inline-start:34px;
background:var(--cs-badge);color:#fff;font-size:10px;line-height:1;
min-width:16px;height:16px;border-radius:999px;display:none;
align-items:center;justify-content:center;padding:0 4px}
@media(max-width:640px){#cs-tabs{display:flex}body{padding-bottom:50px}}
/* ══════════════════════════════════════════════════════════════════════
إضافات النسخة 3 (2026-08-16) — سدّ فجوات قِستُها على catshooop.com الحيّ
بعد الحقن. كل بند أدناه كان **يفشل** في DEEP-AUDIT.json، لا تخميناً.
══════════════════════════════════════════════════════════════════════ */
/* ── 11) الهيدر ──────────────────────────────────────────────────────
⚠️ `header.store-header` نفسه **شفاف** (مقيس: rgba(0,0,0,0)) — تلوينه
لا يفعل شيئاً. الألوان تسكن في ابنيه:
.top-navbar 390×52 bg rgb(29,31,31) ← أسود من topnav_is_dark
.main-nav-container 390×84 bg #fff
زد: الشريط العلوي **#3CA8B4** · وهيدر الجوال **كلّه** تركوازي (414×101). */
/* الشريط العلوي تركوازي في كل المقاسات — يلتحم مع #cs-ad كشريط واحد كما في زد */
.store-header .top-navbar,header .top-navbar{
background:var(--cs-teal)!important}
.store-header .top-navbar,.store-header .top-navbar a,
.store-header .top-navbar span,.store-header .top-navbar p{color:#fff!important}
.store-header .top-navbar svg{stroke:#fff!important;color:#fff!important}
/* حقل البحث يبقى مقروءاً فوق التركوازي */
.store-header .top-navbar input,.store-header .header-search input{
background:#fff!important;color:var(--cs-text2)!important}
/* الجوال: القسم الأبيض يصير تركوازياً كذلك ⇒ هيدر واحد تركوازي كامل */
@media(max-width:640px){
.store-header .main-nav-container,.store-header .main-nav-container .inner{
background:var(--cs-teal)!important;box-shadow:none!important}
.store-header .main-nav-container a,.store-header .main-nav-container span{
color:#fff!important}
/* ⚠️ أيقونات سلة مخلوطة: بعضها SVG بـstroke وبعضها بـfill وبعضها خطّ أيقونات
(). تلوين stroke وحده يترك البرجر أسود — نغطّي الثلاثة. */
.store-header .main-nav-container svg,
.store-header .main-nav-container svg *{
stroke:#fff!important;color:#fff!important}
.store-header .main-nav-container svg path[fill]:not([fill="none"]),
.store-header .main-nav-container svg rect[fill]:not([fill="none"]){
fill:#fff!important}
.store-header .main-nav-container i,
.store-header .main-nav-container [class*="sicon-"]{color:#fff!important}
/* الدوائر حول أيقونتَي السلة والحساب: حدّ أبيض بدل الرمادي */
.store-header .main-nav-container [class*="border"]{
border-color:rgba(255,255,255,.6)!important}
/* ── ضغط ارتفاع الهيدر ────────────────────────────────────────────
مقيس: الشريط العلوي 52 + الصفّ الرئيسي 84 = **136px**، وزد **101px**.
زد يحقّق ذلك بجعل البحث **أيقونة** — لكن المتجر يحمل ٥٠٠٠+ منتجاً
والبحث الظاهر يبيع أكثر من أيقونة مخفيّة. فبدل حذفه، نضغط الحشوات:
النتيجة قريبة من 101 مع بقاء حقل البحث. */
.store-header .top-navbar{
padding-top:4px!important;padding-bottom:4px!important}
.store-header .top-navbar input,.store-header .header-search input{
height:32px!important;min-height:32px!important}
/* ── هيدر زد حرفياً: [🔍] … [الشعار] … [☰] في صفّ واحد ────────────
البنية المقيسة (2026-08-17، RTL):
.flex.justify-between 370×84
├── .flex.items-center ← a.mburger (x=364) + a.navbar-brand (x=304)
└── .flex.justify-end.my-2.5 ← salla-user-menu + salla-cart-summary
زد: **لا سلة ولا حساب في الهيدر** — كلاهما في الشريط السفلي أصلاً،
وتكرارهما يسرق مساحة ويخالف الأصل. */
.store-header .main-nav-container salla-cart-summary,
.store-header .main-nav-container salla-user-menu{display:none!important}
/* الشعار في منتصف الصفّ تماماً — بالتموضع المطلق، فلا نعبث بترتيب الفليكس
(الشعار والبرجر في **نفس** المجموعة، فلا يمكن توسيطه بالفليكس وحده). */
.store-header .main-nav-container .navbar-brand{
position:absolute!important;top:50%!important;
left:50%!important;right:auto!important;
transform:translate(-50%,-50%)!important;margin:0!important}
/* صفّ البحث مطويّ افتراضياً — تفتحه أيقونة البحث (زد: أيقونة لا حقل) */
.store-header .top-navbar{display:none!important}
body.cs-search-open .store-header .top-navbar{display:block!important}
.store-header .main-nav-container,
.store-header .main-nav-container .inner{min-height:0!important}
/* ⚠️ لا تضف حشوة هنا: حشوة `.container` الأصلية **صفر**، ووضعُ 6px/6px
زاد الهيدر من 136 إلى **144** — عكس المقصود تماماً. */
.store-header .main-nav-container .container{
padding-top:0!important;padding-bottom:0!important}
.store-header .main-nav-container .container>div{min-height:56px!important}
.store-header .main-nav-container [class*="my-2"]{
margin-top:4px!important;margin-bottom:4px!important}
/* الشعار على الجوال — زد يعرضه **120×80**، وملفنا مربّع فنضبط الارتفاع فقط.
التدرّج: 44 (صغير) ← 64 ← **80** بطلب المستخدم (2026-08-17).
80 هو ارتفاع زد نفسه، وهو أيضاً السقف: فوقه يتجاوز الهيدر ارتفاع زد (101). */
.store-header .main-nav-container img{max-height:80px!important;height:80px!important}
/* الصفّ يتّسع للشعار الأكبر بدل أن يقصّه */
.store-header .main-nav-container .container>div{min-height:88px!important}
}
/* ── 12/13) عناوين صفحتَي التصنيف والمنتج ──────────────────────────────
⚠️ مصيدة مقيسة: كلاس على صفحة **التصنيف** يحوي «product» أيضاً،
فقاعدة `body[class*="product"]` ابتلعت التصنيف وأعطته 24px بدل 32px.
المُميِّز الصادق هو **وجود شبكة المنتجات** لا اسم الكلاس ⇒ `:has()`.
زد: تصنيف 32/500 · منتج 24/500/#334155 */
body:has(.s-products-list-wrapper) main h1{
font-size:32px!important;font-weight:500!important}
@media(max-width:640px){
body:has(.s-products-list-wrapper) main h1{font-size:24px!important}}
body:not(:has(.s-products-list-wrapper)) main h1,.s-product-page h1{
font-size:24px!important;font-weight:500!important;color:var(--cs-text2)!important}
/* الزر خارج البطاقة (صفحة المنتج) — قاعدة البطاقة لا تصله */
salla-add-product-button:not(custom-salla-product-card *) .s-button-element,
salla-add-product-button:not(custom-salla-product-card *) button{
background:var(--cs-black)!important;color:#fff!important;
border-radius:var(--cs-r-btn)!important;border:0!important;
font-weight:800!important;min-height:47px!important;width:100%!important}
salla-add-product-button:not(custom-salla-product-card *) .s-button-element *{color:#fff!important}
/* معرض صور المنتج بلا استدارة — استثناء زد الوحيد عن نظام الـ16 */
.s-product-image img,salla-slider[type=gallery] img,
.s-single-product-slider img{border-radius:0!important}
/* ── 14) أيقونة المفضلة 40×40 — مقيسة 0×0 (لم تتهيّأ) ───────────────── */
custom-salla-product-card .s-product-card-image salla-button[shape=icon],
custom-salla-product-card salla-button[shape=icon]{
min-width:40px!important;min-height:40px!important;
display:flex!important;align-items:center!important;justify-content:center!important}
/* ── 15) الشريط الإعلاني — **متحرّك** كما في زد ────────────────────
⚠️ تصحيح 2026-08-17: بنيتُه أولاً نصّاً ثابتاً في المنتصف. وزد يعرضه
**ماركيه متحرّكاً** — والدليل كان في لقطة المستخدم: النصّ مقطوع عند
الحافة، وهذا لا يحدث في نصّ ثابت متمركز.
الاتجاه: RTL ⇒ يدخل النصّ من **اليسار** ويخرج يميناً (مرآة الماركيه اللاتيني)
لذلك `translateX` **موجب**. النصّ مكرّر مرتين ليكون الدوران بلا قفزة. */
#cs-ad{background:var(--cs-teal);color:#fff;font-size:16px;font-weight:400;
min-height:36px;display:block;overflow:hidden;padding:9px 0;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
#cs-ad .cs-mq{display:flex;width:max-content;will-change:transform;
animation:cs-mq 26s linear infinite}
#cs-ad .cs-mq>span{white-space:nowrap;padding:0 28px}
#cs-ad:hover .cs-mq{animation-play-state:paused}
#cs-ad a{color:#fff;text-decoration:underline}
@keyframes cs-mq{from{transform:translateX(0)}to{transform:translateX(50%)}}
@media(prefers-reduced-motion:reduce){
#cs-ad .cs-mq{animation:none;justify-content:center;width:100%}
#cs-ad .cs-mq>span:nth-child(2){display:none}}
@media(max-width:640px){#cs-ad{font-size:13px;padding:7px 0}}
/* ══════════════════════════════════════════════════════════════════════
✨ لمسات التشطيب (2026-08-17) — ما وراء المطابقة
طلبها المستخدم صراحةً: «أبهرني بشيء على ذوقك».
المبدأ الذي التزمتُ به: **لا شيء يتحرّك إلا استجابةً لفعل المستخدم**،
ولا لمعان ولا ألوان جديدة. الهوية كما هي — تشطيبها فقط أدقّ.
كل ما هنا يُلغى تلقائياً لمن يفضّل تقليل الحركة.
══════════════════════════════════════════════════════════════════════ */
/* ١) بطاقة المنتج ترتفع قليلاً واللقطة تقترب — إحساس «المنتج قريب منك».
المقادير متعمَّدة الصِّغر: 3px و1.05 — ما يُلاحَظ كحركة، بل كجودة. */
custom-salla-product-card.s-product-card-entry{
transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s ease}
custom-salla-product-card .s-product-card-image img{
transition:transform .5s cubic-bezier(.2,.7,.3,1)}
@media(hover:hover){
custom-salla-product-card.s-product-card-entry:hover{
transform:translateY(-3px);
box-shadow:0 10px 24px -12px rgba(6,5,5,.28)}
custom-salla-product-card.s-product-card-entry:hover .s-product-card-image img{
transform:scale(1.05)}
}
/* على الجوال لا يوجد hover — نعطي ارتداداً عند اللمس بدلاً منه */
custom-salla-product-card.s-product-card-entry:active{transform:scale(.985)}
/* ٢) الأزرار تستجيب للضغط — تأكيد لمسيّ صغير يغني عن أي رسالة */
.s-button-element,salla-add-product-button button,#cs-tabs a,#cs-wa,#cs-top{
transition:transform .12s ease,filter .2s ease,background-color .2s ease}
.s-button-element:active,salla-add-product-button button:active{transform:scale(.97)}
@media(hover:hover){
salla-add-product-button .s-button-element:hover{filter:brightness(1.18)}
#cs-wa:hover{transform:scale(1.06)}
}
/* ٣) التبويب النشط يجلس على حبّة تركوازية باهتة — علامة مكان هادئة
بدل تغيير اللون وحده. ٢٨px خلف الأيقونة تماماً. */
#cs-tabs a{isolation:isolate}
#cs-tabs a::before{
content:'';position:absolute;top:-4px;left:50%;translate:-50% 0;
width:34px;height:28px;border-radius:999px;z-index:-1;
background:var(--cs-teal);opacity:0;transform:scale(.6);
transition:opacity .22s ease,transform .22s cubic-bezier(.2,.7,.3,1)}
#cs-tabs a.is-active::before{opacity:.16;transform:scale(1)}
/* ٤) الأقسام تصعد قليلاً عند دخولها الشاشة (يديرها JS بـIntersectionObserver).
16px فقط و.5s — إيقاع تصفّح، لا استعراض. */
.s-block.cs-reveal{opacity:0;transform:translateY(16px)}
.s-block.cs-in{opacity:1;transform:none;
transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1)}
/* ٥) حلقة تركيز بلون الهوية — يراها من يتنقّل بلوحة المفاتيح فقط،
ووجودها فارق حقيقي في الوصولية وغيابه لا يُلاحَظ. */
a:focus-visible,button:focus-visible,input:focus-visible,
.s-button-element:focus-visible,#cs-tabs a:focus-visible{
outline:2px solid var(--cs-teal)!important;outline-offset:2px!important;
border-radius:var(--cs-r-btn)}
/* احترام تفضيل تقليل الحركة — يُلغي كل ما سبق دفعةً واحدة */
@media(prefers-reduced-motion:reduce){
custom-salla-product-card.s-product-card-entry,
custom-salla-product-card .s-product-card-image img,
.s-button-element,salla-add-product-button button,
#cs-tabs a,#cs-tabs a::before,#cs-wa,#cs-top,.s-block.cs-in{
transition:none!important;transform:none!important;animation:none!important}
.s-block.cs-reveal{opacity:1;transform:none}
}
/* ══════════════════════════════════════════════════════════════════════
19) سلايدر المنتجات — مطابقة زد
مقيس على متجرك: الشريحة 250×355 و**واحدة ظاهرة** فقط.
مقيس على زد: البطاقة 126×285 وفجوة 6px و**~٣ ظاهرة**.
السبب الجذري للطول: بطاقة سلة تعرض **وصف المنتج** (224×48) ولا وجود له
في بطاقة زد إطلاقاً — إخفاؤه وحده يردّ 48px.
✅ السلايدر Swiper بـ`slidesPerView:"auto"` ⇒ العرض يأتي من CSS،
فضبطه هنا نظيف ولا يحتاج لمس إعدادات Swiper.
══════════════════════════════════════════════════════════════════════ */
/* الوصف: يُخفى — زد لا يعرضه في البطاقة */
custom-salla-product-card .s-product-card-content-subtitle{display:none!important}
@media(max-width:640px){
.s-block--best-offers .swiper-slide,
.s-block--latest-products .swiper-slide,
salla-products-slider .swiper-slide{
width:126px!important;margin-inline-end:6px!important}
custom-salla-product-card .s-product-card-image{height:133px!important}
custom-salla-product-card .s-product-card-image img{height:133px!important}
custom-salla-product-card .s-product-card-content{padding:6px!important}
custom-salla-product-card .s-product-card-content-main{min-height:0!important}
/* الزر يضيق مع البطاقة فيصغر خطّه قليلاً كي لا يلتفّ سطرين */
custom-salla-product-card salla-add-product-button .s-button-element{
font-size:12px!important;min-height:34px!important;padding:0 4px!important}
custom-salla-product-card .s-product-card-price h4,
custom-salla-product-card h4.s-product-card-price{font-size:14px!important}
}
/* ══════════════════════════════════════════════════════════════════════
20) ✨ بطاقة المنتج — التشطيب
أربعة تفاصيل، كلّها في خدمة البيع لا الاستعراض:
══════════════════════════════════════════════════════════════════════ */
/* (أ) وميض تحميل مكان الصورة — الصفحة تبدو أسرع لأن المكان محجوز ونابض
بدل فراغ أبيض ثم قفزة. يتوقّف فور تحميل الصورة (يضيف JS الصنف). */
custom-salla-product-card .s-product-card-image{
background:linear-gradient(100deg,#eef2f6 28%,#e2e8f0 48%,#eef2f6 68%)!important;
background-size:220% 100%!important;
animation:cs-shimmer 1.5s linear infinite}
custom-salla-product-card .s-product-card-image.cs-img-ready{
background:#fff!important;animation:none!important}
@keyframes cs-shimmer{from{background-position:180% 0}to{background-position:-80% 0}}
/* (ب) طباعة السعر — رمز الريال أصغر وأخفّ من الرقم.
تفصيلة يعرفها المصمّم: الرقم هو المعلومة، والرمز وحدةُ قياس.
تجعل السعر يُقرأ أسرع وتبدو البطاقة أغلى. */
custom-salla-product-card .s-product-card-price i.sicon-sar,
custom-salla-product-card h4.s-product-card-price i{
font-size:.72em!important;opacity:.62!important;
font-weight:400!important;margin-inline-end:2px!important;
vertical-align:baseline!important}
/* (ج) القلب ينبض عند اللمس — تأكيد فوري بلا انتظار الشبكة */
custom-salla-product-card .s-product-card-wishlist-btn{
transition:transform .18s cubic-bezier(.2,.7,.3,1),background-color .2s ease}
custom-salla-product-card .s-product-card-wishlist-btn:active{transform:scale(.86)}
custom-salla-product-card .s-product-card-wishlist-btn i{
transition:transform .28s cubic-bezier(.34,1.56,.64,1),color .2s ease}
custom-salla-product-card .s-product-card-wishlist-btn:active i{transform:scale(1.35)}
/* (د) لمعة تمرّ على زر الشراء عند المرور — دعوة خفيفة للضغط.
ثانية واحدة، مرّة واحدة، وبلا لون جديد: أبيض شفّاف فوق الأسود. */
@media(hover:hover){
custom-salla-product-card salla-add-product-button .s-button-element{
position:relative!important;overflow:hidden!important}
custom-salla-product-card salla-add-product-button .s-button-element::after{
content:'';position:absolute;inset:0 auto 0 -60%;width:45%;
background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
transform:skewX(-18deg);opacity:0;pointer-events:none}
custom-salla-product-card:hover salla-add-product-button .s-button-element::after{
opacity:1;animation:cs-sheen .85s ease-out}
@keyframes cs-sheen{from{left:-60%}to{left:130%}}
}
@media(prefers-reduced-motion:reduce){
custom-salla-product-card .s-product-card-image{animation:none!important;background:#f1f5f9!important}
custom-salla-product-card .s-product-card-wishlist-btn,
custom-salla-product-card .s-product-card-wishlist-btn i{transition:none!important;transform:none!important}
custom-salla-product-card salla-add-product-button .s-button-element::after{display:none!important}
}
/* ── 10) الأزرار العائمة — مقاسات زد ───────────────────────────────── */
#cs-wa{position:fixed;inset-inline-start:16px;bottom:66px;width:60px;height:60px;
border-radius:50%;background:#25D366;display:none;align-items:center;
justify-content:center;z-index:99999;box-shadow:0 2px 10px rgba(0,0,0,.2)}
#cs-wa svg{width:32px;height:32px;fill:#fff}
/* الزر العائم لسطح المكتب فقط — على الجوال صار تبويباً داخل الشريط،
لأن 60×60 كانت تغطّي أول بطاقة في كل صف (RTL = اليمين). */
@media(min-width:641px){#cs-wa{display:flex}}
#cs-top{position:fixed;inset-inline-end:16px;bottom:66px;width:32px;height:32px;
border-radius:50%;background:var(--cs-black);display:none;align-items:center;
justify-content:center;z-index:99999;border:0;cursor:pointer}
#cs-top svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2}
/* ══════════════════════════════════════════════════════════════════════
21) بطاقة المنتج — هرم التسعير والعنوان (2026-08-17)
الأساس: قياس البطاقة الحيّة على 390px ⇒ البطاقة 116×245 والمحتوى 104
عرضاً فقط. ثلاث علل مقيسة عند هذا العرض:
١) السعر القديم والجديد **متجاوران وبنفس الحجم** (14px لكليهما) على
سطر 104px ⇒ ازدحام، والعين لا تعرف أيّهما السعر.
٢) السعر الحالي `#f87171` — **وردي سلة الافتراضي**، ليس من هويتك،
وزد يعرض السعر **داكناً** (#212529 مقيس).
٣) العنوان سطر واحد فيُقصّ: «فينشي اكل طيور…» — الاسم هو المعلومة.
القرار: **الرقم هو البطل.** يُرصّ السعران عمودياً — القديم صغير مشطوب
فوق، والحالي كبير أسود تحته. لا لون جديد؛ الأحمر المستعمل هو
`--cs-badge` (#FF483B) المعرّف في هويتك أصلاً، بدل وردي سلة.
══════════════════════════════════════════════════════════════════════ */
/* (أ) العنوان سطران — 12px يكفيان لاسمين عربيين في 104px */
@media(max-width:640px){
custom-salla-product-card .s-product-card-content-title,
custom-salla-product-card .s-product-card-content-title a{
font-size:12px!important;line-height:15px!important;
-webkit-line-clamp:2!important;min-height:30px!important}
/* الهامش الأصلي تحت صفّ السعر 20px — يُقلَّص ليموّل السطر الثاني */
custom-salla-product-card .s-product-card-content-sub{
margin-bottom:8px!important;align-items:flex-end!important}
}
/* (ب) مجموعة السعر ترصّ عمودياً: القديم فوق صغيراً، الحالي تحته كبيراً */
custom-salla-product-card .s-product-card-sale-price{
display:flex!important;flex-direction:column!important;
align-items:flex-start!important;line-height:1!important}
custom-salla-product-card .s-product-card-sale-price span{
order:1!important;margin:0!important;
font-size:10px!important;line-height:12px!important;
color:#94A3B8!important;text-decoration-line:line-through!important}
/* نفس قيمة زد المقيسة (16/700/#212529) — لا وزن مخترع، فيتطابق السعر
في البطاقة المخفَّضة وغير المخفَّضة تماماً */
custom-salla-product-card .s-product-card-sale-price h4{
order:2!important;margin:0!important;
font-size:16px!important;font-weight:700!important;line-height:20px!important;
color:var(--cs-price)!important}
/* رمز الريال داخل مجموعة الخصم أيضاً (قاعدة القسم 20 لا تصله) */
custom-salla-product-card .s-product-card-sale-price i,
custom-salla-product-card .s-product-card-sale-price .sicon-sar{
font-size:.68em!important;opacity:.55!important;font-weight:400!important;
margin-inline-end:2px!important}
/* (ج) شارة الخصم — «ملصق» بلغة الشعار
شعار كات شو نفسه: حروف حمراء بحافة سوداء صلبة فوق انفجار كوميكس.
الشارة تستعير ذلك: أحمر الهوية + ظلّ أسود **صلب بلا تمويه** + ميل 4°
⇒ تُقرأ كملصق ملصوق على المنتج، لا كمستطيل وردي افتراضي.
ولا تُمسّ إحداثياتها (top/left) — موضعها من الثيم كما هو. */
custom-salla-product-card .s-product-card-promotion-title{
background:var(--cs-badge)!important;color:#fff!important;
font-size:11px!important;font-weight:800!important;line-height:1!important;
padding:5px 7px!important;border-radius:4px!important;
box-shadow:2px 2px 0 var(--cs-black)!important;
white-space:nowrap!important;letter-spacing:0!important;
max-width:none!important;width:auto!important}
/* ⚠️ بلا ميل (rotate): جرّبتُه فبدا ملصقاً جميلاً **فوق الصورة** — لكن لا
يوجد منتج مخفَّض حيّ الآن لأتأكّد أين تضع سلة الشارة فعلاً، والميل داخل
صفّ السعر يبدو عطباً. الحافة السوداء الصلبة وحدها آمنة في الموضعين. */
/* ══════════════════════════════════════════════════════════════════════
22) قسم الماركات «نحبهم ويحبونا» — شريط شعارات مضغوط (2026-08-17)
⚠️ مصيدة: ثلاثة بلوكات تحمل الكلاسات نفسها حرفياً
(قسم القطط · شريط البنرين · الماركات) — والتمييز بالنص مستحيل في CSS.
لذلك يعلّمها JS بـ .cs-brands، وكل قاعدة هنا مشروطة بها.
⚠️ ولا بدّ أن تبقى في **آخر الملف**: التخصّص متساوٍ مع قواعد
.s-block--banners السابقة، و!important على الطرفين تعادل ⇒ الأخير يفوز.
══════════════════════════════════════════════════════════════════════ */
@media(max-width:767px){
.cs-brands .grid{gap:12px!important;padding-bottom:2px!important}
/* 78px تُظهر أربعاً مع سِنّ من الخامسة = إشارة «في المزيد» */
.cs-brands .banner-entry{
flex:0 0 78px!important;width:78px!important;
height:auto!important;min-height:0!important;padding:0!important}
/* ⚠️ لماذا كل هذا الطول في المحدِّد؟ لأن السطر 197 أعلاه
`.s-block--banners .banner-entry.has-overlay .lazy__bg` تخصّصه (0,4,0)
ويهزم (0,3,0) مهما تأخّر موضعي. الموضع لا يُرجَّح إلا عند تساوي التخصّص. */
.s-block--banners.cs-brands .banner-entry.has-overlay .lazy__bg{
position:relative!important;inset:auto!important;
width:78px!important;height:78px!important;
border-radius:14px!important;background-size:cover!important}
/* طبقة has-overlay السوداء تُعتِم الشعار، والاسم أصلاً تحت الصورة */
.s-block--banners.cs-brands .banner-entry:after{display:none!important}
.s-block--banners.cs-brands .banner-entry.has-overlay h3{
height:auto!important;min-height:0!important;margin:6px 0 0!important;
padding:0!important;border:0!important;background:none!important}
.s-block--banners.cs-brands .banner-entry.has-overlay h3 span{
display:block!important;font-size:10px!important;line-height:13px!important;
font-weight:500!important;color:var(--cs-text2)!important;
text-align:center!important;text-shadow:none!important;
white-space:nowrap!important;overflow:hidden!important;
text-overflow:ellipsis!important}
}
/* ══════════════════════════════════════════════════════════════════════
23) بانلات كوميك — عنوان القسم شارة معلّقة على خطّ أسود (2026-08-17)
مشتقّ من شعار كات شو نفسه: خطوط سوداء صلبة + ظلّ إزاحة بلا تنعيم،
وهو البناء ذاته المستعمل في شارة الخصم أعلاه.
⛔ خارج المرمى: الهيرو · قسم القطط (لا يملك .s-block__title أصلاً).
══════════════════════════════════════════════════════════════════════ */
@media(max-width:767px){
/* ١) خطّ البانل */
.s-block--best-offers .s-slider-block__title,
.s-block--features .s-block__title,
.cs-brands .s-block__title{
border-top:2px solid var(--cs-black)!important;
padding-top:0!important;margin-top:12px!important;margin-bottom:16px!important;
align-items:flex-start!important;overflow:visible!important}
.s-block--features>h2{margin-top:12px!important}
/* حاويات سلة تقصّ ما يتدلّى — نفتحها */
.s-block--best-offers,
.s-block--best-offers salla-products-slider,
.s-block--best-offers salla-slider,
.s-block--best-offers .s-products-slider-wrapper{overflow:visible!important}
/* ٢) الشارة — نفس بناء شارة الخصم في الملف: تعبئة + ظلّ صلب */
.s-block--best-offers .s-slider-block__title h2,
.s-block--best-offers .s-slider-block__title h3,
.s-block--features .s-block__title h2,
.s-block--features>h2,
.cs-brands .s-block__title h2{
display:inline-block!important;
background:var(--cs-teal)!important;color:var(--cs-black)!important;
font-size:14px!important;font-weight:800!important;line-height:1!important;
padding:7px 11px!important;border-radius:8px!important;
box-shadow:3px 3px 0 var(--cs-black)!important;
margin:-13px 0 0!important; /* تتدلّى فوق الخطّ */
/* ⚠️ السقف بالشاشة لا بـ100%: أب العنوان في قسم الماركات عرضه 137px
فقط، فـ100% كانت تقصّ «نحبهم ويحبونا» إلى «نحبهم ويحـ…». */
max-width:calc(100vw - 36px)!important;width:auto!important;
white-space:nowrap!important;
overflow:hidden!important;text-overflow:ellipsis!important;
letter-spacing:-.2px!important;text-align:start!important}
}
/* ══════════════════════════════════════════════════════════════════════
24) قائمة التصنيفات الجانبية — أكورديون بدل زحلقة اللوحات (2026-08-17)
سلة تستعمل mmenu (mm-spn) فيضع الـul المتداخلة **مطلقة بحجم اللوحة
كاملة (441×793 مقيسة)** ويزحلقها. زد يفتحها لأسفل في مكانها.
نُرجعها static ونطويها بـmax-height، والـJS يبدّل .cs-open.
══════════════════════════════════════════════════════════════════════ */
#mobile-menu li>ul{
position:static!important;inset:auto!important;
width:auto!important;height:auto!important;transform:none!important;
max-height:0!important;overflow:hidden!important;
transition:max-height .3s cubic-bezier(.4,0,.2,1)!important;
padding-inline-start:16px!important;
background:transparent!important;box-shadow:none!important}
#mobile-menu li.cs-open>ul{max-height:1600px!important}
/* سهم يدور مع الفتح — يوضّح أنّه قابل للطيّ لا رابطاً */
#mobile-menu li>span{position:relative!important}
#mobile-menu li.cs-open>span{color:var(--cs-teal)!important;font-weight:700!important}
/* السهم: مقيس أنه li::before (8×8 · حدّ سفلي ويساري · أساسه rotate(45deg)
فيشير يساراً «‹»). الفتح لأسفل يقتضي «∨» مغلقاً و«∧» مفتوحاً.
⚠️ لا تلمس li::after — قِستُه: هو الخطّ الفاصل 339×1 لا السهم. */
#mobile-menu li::before{
transform:rotate(-45deg)!important;
transition:transform .25s cubic-bezier(.4,0,.2,1)!important}
/* WARN trap: base is top:50% - when the section expands to 1133px the arrow
slides to the middle of the list, away from its title. Pin it to the row. */
#mobile-menu li.cs-open::before{
transform:rotate(135deg)!important;top:24px!important}
/* ══════════════════════════════════════════════════════════════════════
25) شارات الثقة — ثلاثة بانلات كوميك (2026-08-17)
قِيس قبل: 424px · ثلاثة عناصر في شبكة عمودين ⇒ الأولى تمتدّ عرضاً
كاملاً والباقيتان نصفين — توزيع عرضيّ لا مقصود.
بعد: 125px · ثلاثة متساوية في صفّ واحد.
التسلسل البصري: العنوان شارة **معبّأة** بظلّ · الشارة بطاقة **مفرّغة**
بحدّ وظلّ ⇒ نفس اللغة، ورتبة أدنى.
══════════════════════════════════════════════════════════════════════ */
@media(max-width:767px){
.s-block--features .grid{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:9px!important;align-items:stretch!important}
/* البطاقة الأولى كانت تمتدّ عمودين — نُلغي الامتداد */
.s-block--features .grid>*{
grid-column:auto!important;grid-row:auto!important;
background:#fff!important;
border:2px solid var(--cs-black)!important;
border-radius:10px!important;
box-shadow:3px 3px 0 var(--cs-black)!important;
padding:12px 5px 11px!important;margin:0!important;
display:flex!important;flex-direction:column!important;
align-items:center!important;justify-content:flex-start!important;
text-align:center!important;
height:auto!important;min-height:0!important}
/* الأيقونة: 64 أسود ← 34 تركوازي. ثلاث دوائر سوداء مع إطار أسود = ثِقَل */
.s-block--features .feature-icon{
width:34px!important;height:34px!important;min-width:0!important;
background:var(--cs-teal)!important;color:var(--cs-black)!important;
border-radius:50%!important;margin:0 0 7px!important;
flex:0 0 auto!important;
display:flex!important;align-items:center!important;justify-content:center!important}
.s-block--features .feature-icon svg,
.s-block--features .feature-icon i,
.s-block--features .feature-icon img{
width:17px!important;height:17px!important;font-size:17px!important;
color:#fff!important;fill:#fff!important;stroke:#fff!important;
/* WARN measured trap: the icon font carries line-height:36px inside a
17px box, so the GLYPH sinks below its own centered box. line-height:1
on the element AND its ::before is what actually centers the glyph. */
line-height:1!important;
display:flex!important;align-items:center!important;justify-content:center!important}
.s-block--features .feature-icon i::before{
line-height:1!important;display:block!important}
.s-block--features .grid>* h2,
.s-block--features .grid>* h3,
.s-block--features .grid>* h4{
font-size:11px!important;font-weight:800!important;line-height:14px!important;
color:var(--cs-black)!important;margin:0!important;
letter-spacing:-.2px!important}
.s-block--features .grid>* p,
.s-block--features .grid>* .feature-desc{
font-size:9px!important;line-height:12px!important;font-weight:400!important;
color:var(--cs-text2)!important;opacity:.78!important;margin:5px 0 0!important;
display:-webkit-box!important;-webkit-line-clamp:4!important;
-webkit-box-orient:vertical!important;overflow:hidden!important}
}
/* السهم للآباء فقط. mmenu يرسمه على **كل** li — فالورقة («عرض الكل» ·
«الخداشات» · «ألعاب القطط») كانت تَعِد بتمدّد ثم تنتقل. وعدٌ كاذب. */
#mobile-menu li:not(:has(>ul))::before{display:none!important}
/* ── الفواصل: نُلغي فاصل mmenu ونرسمه على الصفّ نفسه ─────────────────
li::after فاصلٌ يتبع صندوق الـli — والـli صار 1133px بعد الفتح، فانفصل
الخطّ عن صفّه وصار يقطع نصوصاً أخرى (شُوهد يشطب «القطط الصغيرة»).
الحلّ: الخطّ جزء من الصفّ (span/a) ⇒ يستحيل أن ينفصل عنه. */
#mobile-menu li::after{display:none!important}
#mobile-menu li>span,
#mobile-menu li>a{
border-bottom:1px solid rgba(6,5,5,.07)!important}
/* ── تمييز الفروع عن الأصل ──────────────────────────────────────────
كانت الفروع بنفس حجم الأصل ولونه فتضيع الهُويّة عند الفتح.
قضيب رأسي + إزاحة + خلفية خفيفة = «هذه تتبع ما فوقها». */
#mobile-menu li>ul{
padding-inline-start:0!important;
margin-inline-start:17px!important;
border-inline-start:2px solid rgba(60,168,180,.4)!important;
background:rgba(60,168,180,.045)!important}
#mobile-menu li>ul li>span,
#mobile-menu li>ul li>a{
font-size:13px!important;font-weight:500!important;
color:var(--cs-text2)!important;
padding-inline-start:13px!important}
/* الأصل المفتوح يبقى أثقل من فروعه */
#mobile-menu ul.main-menu>li>span{font-size:15px!important;font-weight:700!important}
/* ⚠️ مصيدة قِيست 2026-08-17: mmenu يرسم خطاً على **ul::before بـposition:fixed**
(1px × 339px). في وضع اللوحات كان خطاً واحداً في مكانه؛ بعد تحويلنا كل
قائمة فرعية إلى أكورديون صار لكل ul خطٌّ ثابت على الشاشة — فتراكمت خطوطٌ
تقطع النصوص والأصناف تمرّ تحتها. (li::after ليس هو الفاعل — أخفيتُه أولاً
ولم تختفِ الخطوط، فتتبّعتُ كل عنصر زائف حتى ظهر pos=fixed.) */
#mobile-menu ul::before{display:none!important}
/* ── السلايدر الثاني (تحت شريط البنرين): تصحيح الميل ─────────────────
قِيس: حشو السويبر غير متماثل — يمين 16px ويسار 24px ⇒ إزاحة 8px يميناً.
نساويهما فتبقى الشريحة 335px كما حسبها swiper، وتتوسّط. */
/* WARN measured: any inline padding ON the swiper leaks the neighbouring
slide, because overflow:hidden clips at the border box while the wrapper
only spans the content box - the padding strip becomes a window. So the
margin moves OUT to the block, the swiper runs edge to edge, and the slide
grows to fill it. JS then calls swiper.update() so the translate step
matches the new width (otherwise swipe #2 lands off by 20px). */
.s-block--photos-slider:not(:first-of-type){
padding-right:10px!important;padding-left:10px!important}
.s-block--photos-slider:not(:first-of-type) .swiper{
padding-right:0!important;padding-left:0!important;
overflow:hidden!important}
/* ⚠️ مصيدة مقاسة (2026-08-17) — سبب «الميلان يميناً» على الجوال:
ثيم سلة يضع على الشريحة margin:0 6px، والسويبر هنا مضبوط
على slidesPerView:'auto' + spaceBetween:0 (مقيس من params). فالعرض الخارجي
للشريحة = 370+12 = 382 بينما نافذة العرض 370 ⇒ خطوة التمرير تزيد
12px عن المطلوب وتتراكم ⇒ الصورة تنزاح يميناً وتُقصّ من حافتها.
لم يظهر في قياس السكون لأنّ update() يُصلِحه مؤقتاً، ويعود مع التنقّل.
✅ تصفير الهامش يجعل العرض الخارجي = النافذة تماماً ⇒ لا مجال للانزياح
مهما كان توقيت update()، ولا يعتمد على جافاسكربت أصلاً. */
.s-block--photos-slider:not(:first-of-type) .swiper-slide{
width:100%!important;margin-inline:0!important;padding-inline:0!important}
/* ══════════════════════════════════════════════════════════════════════
26) سلايدرات المنتجات — ثلاث بطاقات نظيفة (2026-08-17)
قِيس: السويبر 375px داخل أبٍ 355px (يخرج بهوامش سالبة) وحشوه
**يمين 5px ويسار 48px** ⇒ ثلاث بطاقات + ربع الرابعة تطلّ = «متداخل».
العلاج نفسه المستعمل في سلايدر الصور: لا حشو داخل السويبر، وعرض
الشريحة يُحسب ليدخل ثلاثةٌ بالضبط، ثم swiper.update() من الـJS.
══════════════════════════════════════════════════════════════════════ */
@media(max-width:767px){
.s-block--best-offers .swiper{
width:100%!important;margin-inline:0!important;
padding-right:0!important;padding-left:0!important;
overflow:hidden!important}
/* ثلاثة + فجوتان 8px = العرض كاملاً */
.s-block--best-offers .swiper-slide{
width:calc((100% - 16px)/3)!important;
margin-inline-end:8px!important}
}
/* ══════════════════════════════════════════════════════════════════════
27) صور المنتجات — إيقاف القصّ (2026-08-17)
قِيس: صندوق الصورة 103×133 (طوليّ) بينما أغلب صور المنتجات **مربّعة**
(512² · 770² · 1000² · 2048²). مع object-fit:cover تملأ الارتفاع
فيُقصّ **22% من العرض**؛ والصور الطولية (864×1243 · 1061×1500)
يُقصّ منها 9–10% رأسياً — نصفها من الأعلى، وهو ما رآه المستخدم.
العلاج: صندوق مربّع + contain ⇒ المنتج كاملاً، صفر قصّ.
══════════════════════════════════════════════════════════════════════ */
custom-salla-product-card .s-product-card-image{
aspect-ratio:1/1!important;height:auto!important;
background:#fff!important}
custom-salla-product-card .s-product-card-image img{
object-fit:contain!important;object-position:center!important;
width:100%!important;height:100%!important;padding:4px!important}
/* ══════════════════════════════════════════════════════════════════════
28) بطاقة المنتج — «الوسادة» (2026-08-17)
⛔ ألغت النسخة السابقة (بانل كوميك: حدّ أسود 2px + ظلّ صلب). رفضها
المستخدم: «ما عجبني، أبيه ظريف كيوت». الخطّ الأسود الصلب **جريء**
لا ظريف — فاللغة هنا معكوسة تماماً: بلا حدود، استدارة كبيرة،
تينت فاتح، وظلال منتشرة ناعمة.
المصدر: رسوم كات شو نفسها — قطط كرتونية ممتلئة بألوان باستيل وحوافّ
مستديرة. الظرافة تأتي من الشكل واللون، لا من الزخرفة.
التوقيع: الصورة تجلس على **وسادة** تركوازية فاتحة عليها بصمة قطّ باهتة.
══════════════════════════════════════════════════════════════════════ */
custom-salla-product-card.s-product-card-entry{
background:#fff!important;
border:0!important;
border-radius:18px!important;
box-shadow:0 2px 10px rgba(60,168,180,.13), 0 1px 2px rgba(6,5,5,.05)!important;
overflow:visible!important;
transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease!important}
/* لمسة مرحة: البطاقة تقفز قليلاً عند اللمس بدل أن تنضغط */
custom-salla-product-card.s-product-card-entry:active{
transform:translateY(-3px) scale(1.015)!important;
box-shadow:0 8px 18px rgba(60,168,180,.22)!important}
/* ── الوسادة: الصورة تجلس على لوح تركوازي فاتح داخل البطاقة ── */
custom-salla-product-card .s-product-card-image{
position:relative!important;
margin:6px 6px 0!important;
border:0!important;
border-radius:14px!important;
background:#EAF6F7!important;
overflow:hidden!important}
custom-salla-product-card .s-product-card-image img{
padding:8px!important}
/* بصمة قطّ باهتة في زاوية الوسادة — التوقيع */
custom-salla-product-card .s-product-card-image::after{
content:''!important;position:absolute!important;
inset-inline-start:7px!important;bottom:6px!important;
width:22px!important;height:22px!important;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%233CA8B4'%3E%3Cellipse cx='6.4' cy='9.2' rx='2.2' ry='2.7'/%3E%3Cellipse cx='11' cy='6.6' rx='2.2' ry='2.9'/%3E%3Cellipse cx='15.8' cy='7.2' rx='2.2' ry='2.8'/%3E%3Cellipse cx='19.6' cy='11' rx='2' ry='2.4'/%3E%3Cpath d='M12.4 11.4c3.4 0 6 2.3 6 4.9 0 2.3-2 3.5-4.2 3.5-1.1 0-1.5-.3-1.8-.3-.4 0-.8.3-1.9.3-2.2 0-4.2-1.2-4.2-3.5 0-2.6 2.7-4.9 6.1-4.9z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain!important;
opacity:.16!important;pointer-events:none!important;z-index:1!important;
transform:rotate(-12deg)!important}
custom-salla-product-card .s-product-card-content{
background:transparent!important;padding:8px 9px 9px!important}
/* الاسم: أهدأ وأكثر تنفّساً */
custom-salla-product-card .s-product-card-content-title,
custom-salla-product-card .s-product-card-content-title a{
font-weight:500!important;color:var(--cs-text2)!important}
/* شارة الخصم: حبّة وردية مائلة قليلاً — الميل هو المرح */
custom-salla-product-card .cs-off{
position:absolute!important;inset-inline-start:8px!important;top:8px!important;
z-index:3!important;direction:ltr!important;
background:var(--cs-badge)!important;color:#fff!important;
font-size:11px!important;font-weight:700!important;line-height:1!important;
padding:5px 9px!important;border-radius:999px!important;
box-shadow:0 2px 6px rgba(255,72,59,.38)!important;
transform:rotate(-7deg)!important;
letter-spacing:0!important;pointer-events:none!important}
/* القلب: قرص أبيض ناعم بدل أيقونة عائمة */
custom-salla-product-card .s-product-card-image salla-button[shape=icon]{
inset-inline-end:8px!important;top:8px!important;z-index:3!important;
background:rgba(255,255,255,.92)!important;
border-radius:999px!important;
box-shadow:0 1px 4px rgba(6,5,5,.12)!important;
width:26px!important;height:26px!important}
/* الزرّ: حبّة كاملة الاستدارة. الأيقونة تأكل العرض عند 100px فتُخفى. */
custom-salla-product-card salla-add-product-button .s-button-element i,
custom-salla-product-card salla-add-product-button .s-button-element svg,
custom-salla-product-card salla-add-product-button button i,
custom-salla-product-card salla-add-product-button button svg{display:none!important}
custom-salla-product-card salla-add-product-button .s-button-element,
custom-salla-product-card salla-add-product-button button{
border-radius:999px!important;min-height:33px!important;
font-size:11px!important;font-weight:600!important;
padding-inline:6px!important;white-space:nowrap!important;gap:0!important}
/* الظلّ منتشر لا صلب ⇒ يحتاج مساحة أكبر حول البطاقة داخل السويبر */
@media(max-width:767px){
.s-block--best-offers custom-salla-product-card.s-product-card-entry{
margin-inline-start:4px!important;margin-bottom:6px!important}
.s-block--best-offers .swiper{padding-bottom:8px!important}
}
/* ⚠️ مصيدة: `direction:ltr` على العنصر يقلب معنى inset-inline-* له هو —
فالشارة هبطت يساراً بدل اليمين. نثبّتها بخاصية فيزيائية صريحة. */
custom-salla-product-card .cs-off{
right:8px!important;left:auto!important;
inset-inline-start:auto!important}
/* المفضّلة: الزرّ الداخلي يفرض 40×40 — نُصغّر الاثنين معاً */
custom-salla-product-card .s-product-card-wishlist-btn{
width:26px!important;height:26px!important;min-width:0!important;
padding:0!important;border-radius:999px!important;
background:rgba(255,255,255,.94)!important;
box-shadow:0 1px 4px rgba(6,5,5,.14)!important;border:0!important}
custom-salla-product-card .s-product-card-wishlist-btn i,
custom-salla-product-card .s-product-card-wishlist-btn .s-button-text{
font-size:13px!important;width:auto!important;height:auto!important;
line-height:1!important}
/* ══════════════════════════════════════════════════════════════════════
29) تكثيف البطاقة — ثلاثة أكبر ما يمكن (2026-08-17)
القرار: يبقى العدد ثلاثة، فنكسب المساحة من الحشو لا من العدد.
مصادر البكسلات: هامش الصفحة 10→8 · فجوة الشرائح 8→6 · هامش
الوسادة 6→4 · حشو الصورة 8→4 · حشو المحتوى 9→6.
══════════════════════════════════════════════════════════════════════ */
@media(max-width:767px){
.s-block--best-offers{
padding-right:8px!important;padding-left:8px!important}
.s-block--best-offers .swiper-slide{
width:calc((100% - 12px)/3)!important;
margin-inline-end:6px!important}
.s-block--best-offers custom-salla-product-card.s-product-card-entry{
margin-inline-start:3px!important;margin-bottom:5px!important;
border-radius:16px!important}
custom-salla-product-card .s-product-card-image{
margin:4px 4px 0!important;border-radius:12px!important}
custom-salla-product-card .s-product-card-image img{padding:4px!important}
custom-salla-product-card .s-product-card-image::after{
width:17px!important;height:17px!important;
inset-inline-start:5px!important;bottom:4px!important}
custom-salla-product-card .s-product-card-content{padding:6px 6px 7px!important}
custom-salla-product-card .s-product-card-content-title,
custom-salla-product-card .s-product-card-content-title a{
font-size:11px!important;line-height:14px!important;min-height:28px!important}
custom-salla-product-card .s-product-card-content-sub{margin-bottom:5px!important}
custom-salla-product-card salla-add-product-button .s-button-element,
custom-salla-product-card salla-add-product-button button{
min-height:30px!important;font-size:10.5px!important}
custom-salla-product-card .s-product-card-wishlist-btn{
width:23px!important;height:23px!important}
custom-salla-product-card .cs-off{
font-size:10px!important;padding:4px 7px!important;
right:6px!important;top:6px!important}
}
/* القلب بلا قرص حامل — الأيقونة وحدها. هالة بيضاء خفيفة تُبقيها مقروءة
فوق صور المنتجات الداكنة بعد زوال الخلفية البيضاء. */
custom-salla-product-card .s-product-card-wishlist-btn{
background:transparent!important;box-shadow:none!important;border:0!important;
width:auto!important;height:auto!important;min-width:0!important;padding:0!important}
custom-salla-product-card .s-product-card-wishlist-btn i,
custom-salla-product-card .s-product-card-wishlist-btn .s-button-text{
font-size:18px!important;
filter:drop-shadow(0 0 2px rgba(255,255,255,.95))
drop-shadow(0 1px 2px rgba(6,5,5,.18))!important}
/* ⚠️ القاعدة أعلاه سقطت: `.s-product-card-image salla-button[shape=icon]`
تخصّصها (0,2,2) ويهزم (0,1,1). نساويها ونتأخّر عنها، ونشمل الزرّ
الداخلي الذي كان يفرض 40×40 بخلفيته البيضاء. */
custom-salla-product-card .s-product-card-image salla-button[shape=icon],
custom-salla-product-card .s-product-card-image salla-button.s-product-card-wishlist-btn,
custom-salla-product-card .s-product-card-image button.s-product-card-wishlist-btn{
background:transparent!important;background-color:transparent!important;
box-shadow:none!important;border:0!important;
width:auto!important;height:auto!important;min-width:0!important;
min-height:0!important;padding:0!important}
/* ══════════════════════════════════════════════════════════════════════
30) مقاسات بطاقة زد الحرفية (2026-08-17)
مقيسة على catshoop1.com عند 390px:
الحاوية 359 · ثلاث شرائح · البطاقة 116×285 · الصورة 116×150
(بعرض البطاقة كاملاً، استدارة علوية فقط) · الاسم 14/500 سطر واحد
· الزرّ 108×27 استدارة 8 خطّ 11.
⚠️ الاستثناء الوحيد: زد يستعمل cover فيقصّ؛ نُبقي contain على وسادة
فاتحة لأن المستخدم رفض القصّ صراحةً. نفس المقاس، بلا بتر.
══════════════════════════════════════════════════════════════════════ */
@media(max-width:767px){
/* 359 ÷ 3 مع فجوة 4 = 117 للشريحة، 116 للبطاقة */
.s-block--best-offers .swiper-slide{
width:calc((100% - 8px)/3)!important;
margin-inline-end:4px!important}
.s-block--best-offers custom-salla-product-card.s-product-card-entry{
margin-inline-start:1px!important;margin-bottom:4px!important;
border-radius:16px!important;
box-shadow:0 1px 6px rgba(60,168,180,.12)!important}
/* الصورة تأخذ عرض البطاقة كاملاً — لا هامش جانبي */
custom-salla-product-card .s-product-card-image{
margin:0!important;
aspect-ratio:116/150!important;height:auto!important;
border-radius:16px 16px 0 0!important;
background:#EAF6F7!important}
custom-salla-product-card .s-product-card-image img{padding:6px!important}
custom-salla-product-card .s-product-card-image::after{
width:16px!important;height:16px!important;
inset-inline-start:6px!important;bottom:5px!important}
custom-salla-product-card .s-product-card-content{padding:7px 7px 8px!important}
/* سطر واحد كما في زد — الاسم الطويل يُقصّ بنقاط */
custom-salla-product-card .s-product-card-content-title,
custom-salla-product-card .s-product-card-content-title a{
font-size:13px!important;font-weight:500!important;line-height:17px!important;
-webkit-line-clamp:1!important;min-height:17px!important}
custom-salla-product-card salla-add-product-button .s-button-element,
custom-salla-product-card salla-add-product-button button{
min-height:27px!important;border-radius:8px!important;font-size:11px!important}
}
/* ⚠️ شريحة سلة `.s-products-slider-card` تحمل padding:5px جانبياً —
تأكل 10px من عرض البطاقة (117 شريحة ⇒ 106 بطاقة). نصفّرها لتصل 116
كما في زد، والفجوة تأتي من margin الشريحة لا من حشوها. */
@media(max-width:767px){
.s-block--best-offers .swiper-slide{
padding-right:0!important;padding-left:0!important}
}
/* ══════════════════════════════════════════════════════════════════════
31) الفوتر — بنية زد المقيسة (2026-08-17)
من catshoop1.com: عناوين 20px/500 وسطية · عمودا روابط · سبع أيقونات
دائرية 40×40 بحدّ · سطر السجل والضريبي. خلفية slate-800 موجودة أصلاً.
══════════════════════════════════════════════════════════════════════ */
/* يجلس الآن شقيقاً لـfooter.store-footer لا داخله ⇒ يحمل خلفيته بنفسه.
الشريط بعرض كامل والمحتوى محدود 1320px. */
#cs-footer{
background:var(--cs-footer);color:#fff;text-align:center;padding:26px 16px 6px}
#cs-footer>*{max-width:1320px;margin-inline:auto}
#cs-footer h3{
font-size:20px!important;font-weight:500!important;color:#fff!important;
margin:0 0 14px!important;text-align:center!important}
#cs-footer .cs-f-brand img{
height:74px;width:auto;object-fit:contain;margin:0 auto 16px;display:block}
#cs-footer .cs-f-brand p{
font-size:14px;line-height:24px;color:rgba(255,255,255,.82);
max-width:560px;margin:0 auto 26px}
#cs-footer .cs-f-cols{
display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:26px}
#cs-footer .cs-f-col ul{list-style:none;margin:0;padding:0}
#cs-footer .cs-f-col li{margin-bottom:11px}
#cs-footer .cs-f-col a{
font-size:13.5px;color:rgba(255,255,255,.86);text-decoration:none;
transition:color .15s ease}
#cs-footer .cs-f-col a:hover{color:var(--cs-teal)}
#cs-footer .cs-f-social{
display:flex;flex-wrap:wrap;justify-content:center;gap:11px;margin-bottom:26px}
#cs-footer .cs-f-social a{
width:40px;height:40px;border-radius:50%;
border:1px solid rgba(255,255,255,.55);
display:flex;align-items:center;justify-content:center;
transition:background .18s ease,border-color .18s ease,transform .18s ease}
#cs-footer .cs-f-social a:hover{
background:var(--cs-teal);border-color:var(--cs-teal);transform:translateY(-2px)}
#cs-footer .cs-f-social svg{
width:19px;height:19px;stroke:#fff;fill:none;stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round}
#cs-footer .cs-f-social svg.cs-fill{fill:#fff;stroke:none}
/* ⚠️ أرقام لاتينية داخل نصّ عربي — تنقلب بلا عزل ثنائي الاتجاه */
#cs-footer .cs-f-legal{
display:flex;flex-wrap:wrap;justify-content:center;gap:12px 34px;
padding-top:18px;border-top:1px solid rgba(255,255,255,.14)}
#cs-footer .cs-f-legal div{display:flex;flex-direction:column;gap:3px}
#cs-footer .cs-f-legal span{font-size:12.5px;color:rgba(255,255,255,.68)}
#cs-footer .cs-f-legal b{
font-size:14px;font-weight:700;color:#fff;
direction:ltr;unicode-bidi:isolate}
/* ⚠️ خلفية الفوتر: زد rgb(30,41,59) = --cs-footer، والفوتر الخارجي في سلة
يحملها أصلاً — لكن .store-footer__inner يغطّيها بـrgb(29,31,31) شبه أسود. */
footer.store-footer,footer.store-footer .store-footer__inner{
background:var(--cs-footer)!important;background-color:var(--cs-footer)!important}
/* وسائل الدفع — 20×20 كما في زد */
#cs-footer .cs-f-pay{
display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-bottom:22px}
#cs-footer .cs-f-pay span{
width:34px;height:24px;border-radius:5px;background:#fff;
display:flex;align-items:center;justify-content:center;padding:3px}
#cs-footer .cs-f-pay img{max-width:100%;max-height:100%;object-fit:contain}
#cs-footer .cs-f-gp{display:inline-block;margin-bottom:22px}
#cs-footer .cs-f-gp img{height:36px;width:auto}
#cs-footer .cs-f-made{
font-size:12.5px;color:rgba(255,255,255,.6);
padding:16px 0 10px;text-align:center}
/* ✅ القاعدة الوحيدة التي نجحت: فوتر سلة يُخفى كعنصر واحد،
لا كـخمسة أبناء يقاوم كلّ واحد منهم على حدة. مرهونة بـbody.cs-footer-on
التي يضعها buildFooter() بعد نجاح الحقن ⇒ تعطّل الـJS لا يترك المتجر بلا فوتر. */
/* ⚠️⚠️ مصيدة مقاسة كلّفتنا أربع محاولات فاشلة (2026-08-17):
سلة تضع على نمطاً **سطرياً** display:flex !important
من سكربتها وقت التشغيل (مقاس: f.style.display === 'flex !important').
النمط السطري بـ!important يهزم **كل** قاعدة في أي ورقة أنماط،
مهما علا تخصّصها — فـdisplay:none!important لا يفوز أبداً.
المحاولات الفاشلة (لا تُعاد): (1) display:none بتخصّص (0,2,0)
(2) ثمّ (0,4,2) (3) إخفاء الأبناء واحداً واحداً (4) setProperty
السطري من JS — تعيد سلة كتابته بعدنا.
✅ الناجح: لا نمسّ display إطلاقاً. نُحيّده بخصائص لا تلمسها سلة:
يخرج من التدفّق (absolute) بارتفاع صفر ومحتوى مقصوص ومخفيّ.
يبقى في الـDOM فلا تنكسر سكربتات سلة التي تبحث عنه. */
body.cs-footer-on footer.store-footer{
position:absolute!important;
height:0!important;min-height:0!important;max-height:0!important;
margin:0!important;padding:0!important;border:0!important;
overflow:hidden!important;visibility:hidden!important;
pointer-events:none!important;opacity:0!important;z-index:-1!important}
/* الـ50px المحجوزة لشريط التبويبات (body{padding-bottom:50px}) كانت
ستظهر كشريط أبيض تحت الفوتر — نسحب الفوتر فوقها ونملأها بلونه. */
@media(max-width:640px){
body.cs-footer-on #cs-footer{margin-bottom:-50px;padding-bottom:58px}
}
/* شارة الضريبة بجانب الرقم — صفّ أفقي داخل عمود الـlegal.
⚠️ القاعدة العامة .cs-f-legal div تفرض column ⇒ نرفع التخصّص. */
#cs-footer .cs-f-legal .cs-vat{
flex-direction:row;align-items:center;gap:9px}
#cs-footer .cs-f-legal .cs-vat>div{
display:flex;flex-direction:column;gap:3px;text-align:start}
#cs-footer .cs-f-legal .cs-vat svg{
width:35px;height:40px;flex:none}
/* ═══════════════════════════════════════════════════════════════════════
32) الهيرو يملأ العرض على الدسكتوب (2026-08-17)
السبب الجذري المقاس: زد يستعمل **صوراً مختلفة للدسكتوب**
(1600×800 و 2188×938 · نسبة ~2.3) ويعرضها 1296×550 بـobject-fit:cover؛
والمرفوع في سلة هو نسخة **الجوال** المربّعة 1080×1080 فقط.
⚠️ وصفتها أولاً بأنّ «الخانة أوسع من الصورة» وضيّقت الخانة إلى 580px
— خطأ صُحّح: المطلوب صورة عريضة لا خانة ضيّقة.
⚠️ مخطّط حقل photos_slider في سلة لا يحوي image_mobile (بخلاف
fixed_banner) ⇒ صورة واحدة تخدم المقاسين. فلو رفعنا العريضة
لصار الجوال شريطاً رفيعاً — والجوال هو الأهمّ.
✅ الحلّ: تبقى المربّعة في سلة (الجوال سليم حرفياً)، وعلى الدسكتوب
فقط نستبدلها بخلفية CSS من صور زد العريضة نفسها.
الـ![]()
يبقى شفافاً لا مخفيّاً ⇒ مساحة النقر والرابط سليمان.
المقاسات من زد حرفياً: عرض 1296 · نسبة 1296/550.
═══════════════════════════════════════════════════════════════════════ */
@media(min-width:768px){
.s-block--photos-slider:first-of-type{
max-width:1296px!important;margin-inline:auto!important}
/* ⚠️ مصيدة السويبر: أي حشوة على .swiper تصير نافذة يطلّ منها
السلايد المجاور (overflow:hidden يقصّ عند صندوق الحد والغلاف
يمتدّ على صندوق المحتوى). وسلة تعرض 1.2 شريحة عمداً. */
.s-block--photos-slider:first-of-type .swiper{
padding-inline:0!important;overflow:hidden!important}
.s-block--photos-slider:first-of-type .swiper-slide{
width:100%!important;margin-inline:0!important;padding-inline:0!important;
aspect-ratio:1296/550!important;height:auto!important;
background-repeat:no-repeat!important;background-size:cover!important;
background-position:center!important;
border-radius:14px!important;overflow:hidden!important}
/* شفّاف لا مخفيّ: display:none يلغي مساحة النقر على الرابط */
.s-block--photos-slider:first-of-type .swiper-slide img{
opacity:0!important;width:100%!important;height:100%!important;
max-height:none!important;object-fit:cover!important}
.s-block--photos-slider:first-of-type .swiper-slide a{
display:block!important;width:100%!important;height:100%!important}
.s-block--photos-slider:first-of-type .swiper-slide:nth-child(1){
background-image:url("https://media.zid.store/22339296-f45e-4984-8115-f9417274edb2/6a3e4fe5-7cd0-4c50-b6c4-7b5792a4ba33.png")!important}
.s-block--photos-slider:first-of-type .swiper-slide:nth-child(2){
background-image:url("https://media.zid.store/22339296-f45e-4984-8115-f9417274edb2/39968964-f037-479a-bca8-696e3aaec3fa.png")!important}
}
/* ═══════════════════════════════════════════════════════════════════════
33) شريط الأقسام — «الرفّ» (2026-08-17)
ألغت النسخة السابقة (نسخة aleef المسطّحة). طلب المستخدم «أحلى».
القراءة: أليف يضع أربع صور على أبيض — والألواح الباستيلية **تبهت**
على الأبيض لأنّ التباين بينهما ضعيف. فالحلّ ليس إضافة زخرفة بل تغيير
الأرضية: لوحة داكنة تجعل الباستيل ينفجر.
لماذا هذا اللون تحديداً: هو var(--cs-footer) نفسه ⇒ الصفحة تكتسب إيقاعاً
(شريط داكن تحت الهيرو · فوتر داكن في الأسفل) بدل لون جديد يتيم.
التوقيع: **بقعة ضوء تحت كلّ حيوان** — متدرّج بيضوي على الرابط نفسه
(خلف الصورة لا فوقها)، فيبدون مصطفّين على منصّة يطلّون عليك.
الجرأة كلّها في مكان واحد (اللوحة الداكنة)؛ الباقي هادئ منضبط.
مُبقَى من قياس أليف (نسب مجرّبة): فواصل قريبة · أربعة أعمدة دسكتوب
· تمرير أفقي في الجوال · استدارة 10px · بلا تسمية ظاهرة.
⚠️ الجوال: رُفِع من بطاقة وربع (أليف) إلى بطاقتين — على لوحة داكنة
البطاقة الواحدة تترك مساحة داكنة ميتة واسعة.
⚠️ لوحة داخل الحاوية لا ممتدّة للحافة: الامتداد يحتاج 100vw وهو
يجرّ تمريراً أفقياً للصفحة إذا وُجد شريط تمرير. اللوحة المستديرة أنظف.
═══════════════════════════════════════════════════════════════════════ */
.s-block--banners.cs-cats{
background:var(--cs-footer)!important;
border-radius:24px!important;
padding:26px 14px 20px!important;
/* ⚠️ مصيدة مقاسة (2026-08-17): الكتلة تحمل صنف container ⇒ عرضها
100% من الشاشة. إضافة margin:0 12px فوقه جعلت المجموع 360+24
⇒ فيضان أفقي 12px **على الصفحة كلّها**، فتبدو كلّ الأقسام
(البانرات · السلايدر) مزاحة يميناً ومقصوصة من الحافة.
العلاج: width:auto مع الهامش ⇒ العرض ينكمش بدل أن يفيض. */
width:auto!important;max-width:none!important;
box-sizing:border-box!important;
margin:14px 12px 0!important;
overflow:hidden!important}
.s-block--banners.cs-cats .grid{
gap:10px!important;overflow-x:auto!important;overflow-y:visible!important;
scroll-snap-type:none!important;padding-bottom:0!important}
/* البطاقة = الرابط. خلفيتها هي بقعة الضوء — تُرسم خلف
صورة الحيوان (في الابن) فلا تحتاج عنصراً وهميّاً ولا ترتيب طبقات. */
.s-block--banners.cs-cats .banner-entry{
position:relative!important;border:0!important;padding:0!important;
box-shadow:none!important;border-radius:10px!important;
background:radial-gradient(ellipse 68% 40% at 50% 90%,
rgba(255,255,255,.15), rgba(255,255,255,0) 72%)!important;
transition:background .3s ease!important}
/* طبقة سلة السوداء rgba(0,0,0,.7) عند التمرير — تبتلع كل شيء */
.s-block--banners.cs-cats .banner-entry.has-overlay::after,
.s-block--banners.cs-cats .banner-entry.has-overlay::before{
content:none!important;display:none!important;background:transparent!important}
/* الرسمة: ظلّ يتبع ألفا القطّ واللوح لا مستطيل البطاقة.
على داكن الظلّ الأسود مرئي لأنّ اللوحة ليست سوداء بل rgb(30,41,59). */
.s-block--banners.cs-cats .banner-entry.has-overlay .lazy__bg{
position:relative!important;inset:auto!important;
width:100%!important;height:auto!important;aspect-ratio:1/1!important;
border-radius:10px!important;
background-size:contain!important;background-position:center bottom!important;
background-repeat:no-repeat!important;
transform-origin:50% 92%!important;
filter:drop-shadow(0 9px 12px rgba(0,0,0,.42))!important;
transition:transform .3s cubic-bezier(.34,1.56,.64,1), filter .3s ease!important}
/* اللمس: ينطّ وتشتدّ بقعة الضوء تحته — إيماءة واحدة مترابطة */
.s-block--banners.cs-cats .banner-entry:hover,
.s-block--banners.cs-cats .banner-entry:focus-visible,
.s-block--banners.cs-cats .banner-entry:active{
background:radial-gradient(ellipse 76% 46% at 50% 90%,
rgba(255,255,255,.26), rgba(255,255,255,0) 72%)!important}
.s-block--banners.cs-cats .banner-entry:hover .lazy__bg,
.s-block--banners.cs-cats .banner-entry:focus-visible .lazy__bg,
.s-block--banners.cs-cats .banner-entry:active .lazy__bg{
transform:translateY(-8px) scale(1.02)!important;
filter:drop-shadow(0 18px 18px rgba(0,0,0,.5))!important}
/* التسمية مخفية بصرياً وباقية لقارئ الشاشة (الاسم مرسوم داخل الصورة) */
.s-block--banners.cs-cats .banner-entry.has-overlay h3{
position:absolute!important;width:1px!important;height:1px!important;
margin:-1px!important;padding:0!important;overflow:hidden!important;
clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
/* الظهور: يطلعون من خلف الرفّ واحداً بعد واحد مع ارتدادة خفيفة.
⚠️ backwards لا opacity:0 افتراضية: غياب .cs-in (تعطّل JS أو تقليل
الحركة) يجب أن يتركها ظاهرة لا أن يخفيها للأبد. */
@keyframes cs-cat-rise{
from{opacity:0;transform:translateY(34px) scale(.94)}
to{opacity:1;transform:none}}
.s-block--banners.cs-cats.cs-in .banner-entry{
animation:cs-cat-rise .62s cubic-bezier(.34,1.56,.64,1) backwards!important}
.s-block--banners.cs-cats.cs-in .banner-entry:nth-child(1){animation-delay:.06s!important}
.s-block--banners.cs-cats.cs-in .banner-entry:nth-child(2){animation-delay:.15s!important}
.s-block--banners.cs-cats.cs-in .banner-entry:nth-child(3){animation-delay:.24s!important}
.s-block--banners.cs-cats.cs-in .banner-entry:nth-child(4){animation-delay:.33s!important}
.s-block--banners.cs-cats.cs-in .banner-entry:nth-child(5){animation-delay:.42s!important}
.s-block--banners.cs-cats.cs-in .banner-entry:nth-child(6){animation-delay:.51s!important}
@media(prefers-reduced-motion:reduce){
.s-block--banners.cs-cats.cs-in .banner-entry{animation:none!important}
.s-block--banners.cs-cats .banner-entry.has-overlay .lazy__bg{transition:none!important}
.s-block--banners.cs-cats .banner-entry:hover .lazy__bg,
.s-block--banners.cs-cats .banner-entry:active .lazy__bg{transform:none!important}
}
.s-block--banners.cs-cats .banner-entry:focus-visible{
outline:2px solid #fff!important;outline-offset:2px!important}
@media(min-width:768px){
.s-block--banners.cs-cats{
padding:30px 22px 24px!important;margin-inline:auto!important;max-width:1320px!important}
.s-block--banners.cs-cats .grid{
display:grid!important;grid-template-columns:repeat(4,1fr)!important;
gap:14px!important;overflow-x:visible!important}
}
@media(max-width:767px){
/* بطاقتان وإطلالة — اللوحة تبقى ممتلئة والأهداف أكثر */
.s-block--banners.cs-cats .banner-entry{
flex:0 0 45%!important;max-width:45%!important;width:45%!important}
}
/* النقاط داخل اللوحة الداكنة: القاعدة العامة تستعمل --cs-black ⇒ تختفي */
.cs-cats .cs-dots{margin-top:14px!important}
.cs-cats .cs-dots button{background:rgba(255,255,255,.3)!important}
.cs-cats .cs-dots button.is-on{background:#fff!important}
/* ═══════════════════════════════════════════════════════════════════════
34) ميلان الهيرو على الجوال (2026-08-17)
مقيس: حشو السويبر غير متماثل — يمين 16px ويسار **24px** ،
وفوقه هوامش الشريحة 6px ⇒ الشريحة تقع 18→368 في نافذة 0→390
(فراغ 18 يساراً و 22 يميناً) ⇒ الصورة تبدو مائلة.
هذه **نفس المصيدة** المسجّلة في قسم السلايدر الأوسط، ولم تُعالَج
هنا لأنّ الهيرو كان ممنوع المسّ حينها (طلب المستخدم 2026-08-17).
العلاج نفسه: الحشو ينتقل إلى الكتلة، والسويبر يمتدّ حافة لحافة،
والشريحة تملأه بلا هوامش ⇒ لا مجال لإزاحة.
فائدة جانبية: الصورة تكبر من 350 إلى 370 وتطابق عرض السلايدر الذي تحته.
═══════════════════════════════════════════════════════════════════════ */
@media(max-width:767px){
.s-block--photos-slider:first-of-type{
padding-right:10px!important;padding-left:10px!important}
.s-block--photos-slider:first-of-type .swiper{
padding-right:0!important;padding-left:0!important;overflow:hidden!important}
.s-block--photos-slider:first-of-type .swiper-slide{
width:100%!important;margin-inline:0!important;padding-inline:0!important}
}
/* ═══════════════════════════════════════════════════════════════════════
35) شريط البانرين على الدسكتوب (2026-08-17)
مقيس قبل: الخانة 634×200 (نسبة 3.17) والصورة 1282×785 (نسبة 1.63)
بـcontain ⇒ تُرسم 327×200 وسط الخانة ⇒ **~307px فراغ أبيض لكل بانر**.
قياس زد (1440): نفس الملفّين 1282×785 يُرسمان **644×394** جنباً لجنب
بفاصل ~8px — أي بنسبتهما الطبيعية ملء الخانة.
✅ فالعلاج ليس صوراً جديدة (بخلاف الهيرو) بل **الارتفاع يتبع نسبة
الصورة**: aspect-ratio 1282/785 + cover ⇒ ملء بلا قصّ ولا فراغ.
الجوال لا يُمسّ: مقيس 179×110 = نفس النسبة 1.63 ومضبوط أصلاً.
═══════════════════════════════════════════════════════════════════════ */
@media(min-width:768px){
.s-block--banners.cs-b2 .grid{gap:8px!important}
/* ⚠️ مصيدة: هذه البانرات **بلا صنف has-overlay** (بخلاف الأقسام)،
صنفها banner-entry square-photos فقط — محدّدي الأوّل لم يطابق أصلاً.
⚠️ والارتفاع مفروض على **الرابط** لا على الصورة وحدها،
وـ.lazy__bg مطلقة فلا تدفع ارتفاع أبيها ⇒ يلزم علاج الاثنين معاً.
⚠️ background-size:contain نمط **سطري** من سلة ⇒ يلزم !important. */
.s-block--banners.cs-b2 .banner-entry{
height:auto!important;min-height:0!important;padding:0!important}
.s-block--banners.cs-b2 .banner-entry .lazy__bg{
position:relative!important;inset:auto!important;
width:100%!important;height:auto!important;min-height:0!important;
aspect-ratio:1282/785!important;
background-size:cover!important;background-position:center!important;
border-radius:10px!important}
}
/* ═══════════════════════════════════════════════════════════════════════
36) السلايدر الأوسط على الدسكتوب (2026-08-17)
نفس مرض الهيرو ونفس العلاج: المرفوع في سلة مربّع 1688×1688
(نسخة الجوال) فيقعد وسط خانة عريضة ويترك فراغاً هائلاً.
ولزد نسختان عريضتان لنفس التصميمين بالضبط:
شريحة 1 «قطك ماراح ينتظر» ← 391faeb2 (2188×938)
شريحة 2 «دلّع قطّتك» ← 39968964 (1600×800)
⚠️ الجوال لا يُمسّ: كلّ ما تحت داخل min-width:768px، ومخطّط سلة
لـphotos_slider لا يحوي حقل صورة منفصلة للجوال.
⚠️ الـ![]()
شفّاف لا مخفيّ ⇒ مساحة النقر والرابط تبقى سليمة.
ℹ️ ملاحظة: «دلّع قطّتك» موجود في الهيرو وفي هذا السلايدر معاً —
تكرار في محتوى سلة نفسه لا في الـCSS.
═══════════════════════════════════════════════════════════════════════ */
@media(min-width:768px){
.s-block--photos-slider:not(:first-of-type){
max-width:1296px!important;margin-inline:auto!important;
padding-right:0!important;padding-left:0!important}
.s-block--photos-slider:not(:first-of-type) .swiper-slide{
aspect-ratio:1296/550!important;height:auto!important;
background-repeat:no-repeat!important;background-size:cover!important;
background-position:center!important;
border-radius:14px!important;overflow:hidden!important}
.s-block--photos-slider:not(:first-of-type) .swiper-slide img{
opacity:0!important;width:100%!important;height:100%!important;
max-height:none!important;object-fit:cover!important}
.s-block--photos-slider:not(:first-of-type) .swiper-slide a{
display:block!important;width:100%!important;height:100%!important}
.s-block--photos-slider:not(:first-of-type) .swiper-slide:nth-child(1){
background-image:url(https://media.zid.store/22339296-f45e-4984-8115-f9417274edb2/391faeb2-c69e-4d82-86b6-aa5160acda86.png)!important}
.s-block--photos-slider:not(:first-of-type) .swiper-slide:nth-child(2){
background-image:url(https://media.zid.store/22339296-f45e-4984-8115-f9417274edb2/39968964-f037-479a-bca8-696e3aaec3fa.png)!important}
}
/* ═══════════════════════════════════════════════════════════════════════
37) الماركات على الدسكتوب (2026-08-17)
⚠️ السبب: كلّ قواعد §22 (الشريط) و§23 (شارة العنوان) محصورة
داخل max-width:767px ⇒ الدسكتوب يأخذ تخطيط سلة الخام. مقيس:
6 ماركات في **3 صفوف** (بلاطة 412×241) بارتفاع **811px**، بثقوب في
الشبكة، بلا استدارة، بلا أسماء، والعنوان مهمل 18px في الزاوية.
شعار ماركة بعرض 412px ليس عرضاً بل إعلان منفرد؛ والماركات
تُقرأ كـ**مجموعة** لا كوحدات — فالصفّ الواحد المضغوط أصدق للمعنى.
نفس لغة الجوال مكبّرة: 78→130 · استدارة 14→20 · الاسم 10→13px.
═══════════════════════════════════════════════════════════════════════ */
@media(min-width:768px){
.cs-brands{padding-bottom:8px!important}
/* صفّ واحد وسطيّ — flex لا grid: عدد الماركات يتغيّر (حتّى 6)،
والشبكة ذات الأعمدة الثابتة تترك ثقوباً إذا لم يقسم العدد عليها. */
.cs-brands .grid{
display:flex!important;flex-wrap:wrap!important;
justify-content:center!important;align-items:flex-start!important;
gap:30px!important;grid-template-columns:none!important;
overflow:visible!important;padding-bottom:0!important}
.cs-brands .banner-entry{
flex:0 0 130px!important;width:130px!important;
height:auto!important;min-height:0!important;padding:0!important;
transition:transform .22s cubic-bezier(.34,1.56,.64,1)!important}
.cs-brands .banner-entry:hover{transform:translateY(-5px)!important}
/* تخصّص (0,5,0) ليتجاوز قاعدة has-overlay ذات (0,4,0) — نفس سبب §22 */
.s-block--banners.cs-brands .banner-entry.has-overlay .lazy__bg{
position:relative!important;inset:auto!important;
width:130px!important;height:130px!important;
border-radius:20px!important;background-size:cover!important}
/* طبقة has-overlay السوداء تُعتِم الشعار */
.s-block--banners.cs-brands .banner-entry:after{display:none!important}
.s-block--banners.cs-brands .banner-entry.has-overlay h3{
height:auto!important;min-height:0!important;margin:9px 0 0!important;
padding:0!important;border:0!important;background:none!important}
.s-block--banners.cs-brands .banner-entry.has-overlay h3 span{
display:block!important;font-size:13px!important;line-height:17px!important;
font-weight:500!important;color:var(--cs-text2)!important;
text-align:center!important;text-shadow:none!important;
white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
/* شارة العنوان — نفس بناء §23 مكبّراً */
.cs-brands .s-block__title{
border-top:2px solid var(--cs-black)!important;
padding-top:0!important;margin-top:16px!important;margin-bottom:26px!important;
align-items:flex-start!important;overflow:visible!important}
.cs-brands .s-block__title h2{
display:inline-block!important;
background:var(--cs-teal)!important;color:var(--cs-black)!important;
font-size:18px!important;font-weight:800!important;line-height:1!important;
padding:9px 14px!important;border-radius:10px!important;
box-shadow:4px 4px 0 var(--cs-black)!important;
margin:-17px 0 0!important;white-space:nowrap!important;width:auto!important}
}
/* ═══════════════════════════════════════════════════════════════════════
38) صفحة المنتج (2026-08-17)
المشكلة الجوهرية ليست جمالية بل **الترتيب معادٍ للقرار**. المقيس:
عنوان ← عنوان فرعي مكرّر ← **وصف 244px** ← مشاركة ← رقم موديل
← خيارات ← سعر ← زرّ. فالسعر والخيارات — وهما قرار الشراء —
مدفونان تحت جدار نصّ إنجليزي.
التسلسل الجديد = تسلسل الشراء:
عنوان ← سعر ← خيارات ← كمية ← شراء ── ثمّ الوصف والتفاصيل.
يُنفّذ بـorder على flex — بلا نقل عناصر في الـDOM ⇒ لا ينكسر شيء
من مكوّنات سلة الحيّة، وترتيب قارئ الشاشة يبقى منطقيّاً.
التوقيع: **شرائح الحجم** بدل القائمة المنسدلة — الشيء الوحيد الذي
يغيّر **كيف تشتغل** الصفحة لا كيف تبدو. بلغة المتجر الكوميك
(حدّ أسود + ظلّ إزاحة صلب) — نفس بناء شارة عناوين الأقسام، فيُقرأ
كأسرة واحدة لا كطرفة جديدة. والنافد مشطوب بحدّ متقطّع ⇒ تعرف
التوفّر بلا ضغط. الجرأة هنا وحدها؛ ما عداها هادئ منضبط.
═══════════════════════════════════════════════════════════════════════ */
/* ── ١) الترتيب ── */
.container--product-details .main-content{
display:flex!important;flex-direction:column!important}
/* ⚠️ أيّ ابن بلا order قيمته 0 ⇒ يقفز فوق العنوان (order:1). مقيس: صفّ
التقييم طلع أوّل الصفحة. فنضع أرضية 3 للجميع ثمّ نخصّص ما يلزم. */
.container--product-details .main-content>*{order:3!important}
.container--product-details .main-content>h1{order:1!important;
font-size:22px!important;font-weight:700!important;line-height:1.45!important;
margin:0 0 10px!important}
.container--product-details .main-content>.product-entry__sub-title{order:2!important}
/* الفرعي المطابق للعنوان يُعلّمه الـJS بـcs-dup */
.container--product-details .product-entry__sub-title.cs-dup{display:none!important}
.container--product-details .main-content>form.product-form{order:4!important;margin-top:2px!important}
.container--product-details .main-content>.product__description{order:9!important}
.container--product-details .main-content>.cs-desc-h{order:8!important}
/* المشاركة ورقم الموديل: تفاصيل ثانوية تأتي أخيراً */
.container--product-details .main-content>div:has(>salla-social-share){order:10!important}
.container--product-details .main-content>div:has(.product-sku){order:11!important}
/* داخل النموذج: السعر قبل الخيارات */
.container--product-details form.product-form{
display:flex!important;flex-direction:column!important;gap:2px!important}
.container--product-details form.product-form>section:first-of-type{order:1!important}
.container--product-details form.product-form>salla-product-options{order:2!important}
.container--product-details form.product-form>.sticky-product-bar{order:3!important}
/* ── ٢) السعر — أكبر رقم في الصفحة ──
اللافتة «السعر» تُحذف: رمز الريال يقولها. عنصر واحد مهمّة واحدة. */
.container--product-details form.product-form>section:first-of-type{
background:transparent!important;padding:14px 0 6px!important;
border-radius:0!important}
.container--product-details form.product-form>section:first-of-type label{display:none!important}
/* ⚠️ مقيس: السعر معروض **مرّتين** — نسخة تحت العنوان وأخرى داخل
النموذج، وبينهما ~120px فراغ ميّت. نُبقي نسخة النموذج لأنّها
المربوطة بتغيّر الخيار (سعر الكرتون مختلف عن سعر الظرف). */
.container--product-details .main-content>div.flex.whitespace-nowrap{display:none!important}
/* الرقم نفسه داخل h2.text-xl ⇒ تكبير الأب وحده لا يكفي */
.container--product-details .price-wrapper h2,
.container--product-details .price-wrapper .total-price,
.container--product-details .price-wrapper .starting-or-normal-price{
font-size:30px!important;font-weight:800!important;
color:var(--cs-black)!important;line-height:1.15!important}
.container--product-details .price-wrapper .before-price,
.container--product-details .price-wrapper .line-through{
font-size:16px!important;font-weight:500!important;opacity:.5!important}
.container--product-details .price-wrapper .s-price-was,
.container--product-details .price-wrapper del{
font-size:16px!important;font-weight:500!important;opacity:.55!important}
/* ── ٣) التوقيع: شرائح الحجم ──
⚠️ الـselect يُخفى بصرياً لا بـdisplay:none — الحقل required،
وإخفاؤه تماماً يجعل المتصفّح يرفض إرسال النموذج بـnot focusable. */
.container--product-details select.cs-select-hidden{
position:absolute!important;width:1px!important;height:1px!important;
opacity:0!important;pointer-events:none!important;margin:0!important;padding:0!important}
.container--product-details .s-product-options-option-label{
display:block!important;margin:0 0 2px!important}
.container--product-details .s-product-options-option-label b{
font-size:13px!important;font-weight:700!important;color:var(--cs-text2)!important}
/* «اختر» مكرّر: الشرائح تقولها بذاتها */
.container--product-details .s-product-options-option-label small{display:none!important}
.cs-chips{display:flex!important;flex-wrap:wrap!important;gap:10px!important;margin-top:8px!important}
.cs-chip{
-webkit-appearance:none;appearance:none;cursor:pointer;
background:#fff;color:var(--cs-black);
border:2px solid var(--cs-black);border-radius:10px;
font:700 14px/1 inherit;font-family:inherit;
padding:12px 15px;
box-shadow:3px 3px 0 var(--cs-black);
transition:transform .14s ease, box-shadow .14s ease, background .14s ease}
.cs-chip:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--cs-black)}
.cs-chip.is-on{background:var(--cs-teal)}
.cs-chip.is-out{
opacity:.55;cursor:not-allowed;text-decoration:line-through;
border-style:dashed;box-shadow:none}
.cs-chip:focus-visible{outline:3px solid var(--cs-teal);outline-offset:3px}
/* ── ٤) زرّ الشراء — أعلى صوت في الصفحة ── */
.container--product-details salla-add-product-button .s-button-element,
.container--product-details salla-add-product-button button{
background:var(--cs-teal)!important;color:var(--cs-black)!important;
border:2px solid var(--cs-black)!important;border-radius:12px!important;
font-size:16px!important;font-weight:800!important;
min-height:52px!important;
box-shadow:4px 4px 0 var(--cs-black)!important;
transition:transform .14s ease, box-shadow .14s ease!important}
.container--product-details salla-add-product-button .s-button-element:active,
.container--product-details salla-add-product-button button:active{
transform:translate(2px,2px)!important;box-shadow:2px 2px 0 var(--cs-black)!important}
/* ── ٥) الوصف ──
⚠️ الفقرات تحمل أنماطاً سطرية من محرّر سلة: font-family:tj (خطّ غير
موجود ⇒ يسقط إلى serif) و color:#333 و font-size:15px. يلزم !important
لأنّ النمط السطري يهزم الأوراق بلا ذلك. */
.cs-desc-h{
display:inline-block!important;
background:var(--cs-teal)!important;color:var(--cs-black)!important;
font-size:14px!important;font-weight:800!important;line-height:1!important;
padding:8px 12px!important;border-radius:9px!important;
box-shadow:3px 3px 0 var(--cs-black)!important;
margin:26px 0 12px!important;align-self:flex-start!important}
.container--product-details .product__description{
padding:0!important;margin:0 0 6px!important}
.container--product-details .product__description,
.container--product-details .product__description *{
font-family:inherit!important;
font-size:15px!important;line-height:29px!important;
color:var(--cs-text2)!important;background:transparent!important}
.container--product-details .product__description p{margin:0 0 12px!important}
/* ── ٦) تفاصيل صغيرة ── */
/* أيقونة الباركود تسقط إلى محارف بديلة (تظهر !!!!!) — تُخفى */
/* ⚠️⚠️ مصيدة خطيرة مقاسة: :has() يطابق **أيّ عمق** لا الأبناء فقط.
فـdiv:has(.product-sku) يشمل .container--product-details نفسه وكلّ أجداد
رقم الموديل ⇒ display:none على كلّ في الصفحة: **رمز الريال اختفى**
(مقيس 0×0) وقلب المفضّلة صار دائرة فارغة. العلاج: داخل :has()
ليطابق صفّ رقم الموديل وحده. */
.container--product-details .main-content>div:has(>.product-sku) i{display:none!important}
.container--product-details .main-content>div:has(>.product-sku){
font-size:12.5px!important;opacity:.75!important;
background:transparent!important;padding:0!important;margin:10px 0 0!important}
/* المصغّرات: حدّ أسود صلب للنشط يقطع الصفّ — تركوازي أهدأ */
.container--product-details .s-slider-thumbs .swiper-slide-thumb-active img,
.container--product-details .s-slider-thumbs .swiper-slide-thumb-active{
border-color:var(--cs-teal)!important;border-radius:10px!important}
@media(prefers-reduced-motion:reduce){
.cs-chip,
.container--product-details salla-add-product-button button{transition:none!important}
}