/* =====================================================================
   دخون ليليا — CSS مخصص لنسخة "واجهة ليليا الجديدة" (106891780)
   آخر مراجعة شاملة: 10-11-2026. هذا الملف نسخة مطابقة لما هو محفوظ في:
   سلة ← تخصيص المتجر ← CSS مخصص
   ===================================================================== */


/* ---------- (1) منع "قفزة" الصفحة أثناء التحميل (CLS) ---------- */

/* الشعار في هيدر رائد (يظهر فقط لو ما اشتغل كود الواجهة): نحجز له مكاناً قبل التحميل. */
.navbar-brand img { aspect-ratio: 1 / 1; width: auto; height: 3rem; }

/* أقسام المنتجات في الرئيسية تظهر بارتفاع صفر حتى تنزل المنتجات، ثم تدفع كل ما تحتها.
   نحجز ارتفاع بطاقة واحدة بالضبط حتى تظهر البطاقات:
   - الجوال: شريط يتمرر، عرض البطاقة 64% من عرض المحتوى (حده 560px)، والصورة مربعة + 193px للنص والزر.
   - الكمبيوتر 1024-1279: 3 بطاقات في صفين. ومن 1280: 6 بطاقات في صف واحد.
   ⚠️ لو غيّرت شكل البطاقات في القسم (10) راجع هذي الأرقام. */
body.index section.s-block > salla-products-list:not(:has(.s-product-card-entry)) {
  display: block;
  min-height: calc((min(100vw, 560px) - 32px) * .64 + 193px);
}
@media (min-width: 1024px) {
  body.index section.s-block > salla-products-list:not(:has(.s-product-card-entry)) { min-height: calc(((min(100vw, 1320px) - 104px) / 3 + 193px) * 2 + 20px); }
}
@media (min-width: 1280px) {
  body.index section.s-block > salla-products-list:not(:has(.s-product-card-entry)) { min-height: calc((min(100vw, 1320px) - 144px) / 6 + 225px); }
}

/* الشريط الإعلاني (شحن مجاني 249 ريال) ينزل متأخراً ويدفع الصفحة 46px.
   نحجز مكانه، والـ JS المخصص يلغي الحجز بعد ما يظهر الشريط فعلاً (أو لو ما ظهر). */
body:not(.ll-ad-settled) salla-advertisement {
  display: block;
  min-height: 46px;
}
/* ونبقي الحجز ما دام الشريط موجود فعلاً: سلة أحياناً تعطيه ارتفاعه بعد ما نلغي الحجز فتقفز الصفحة مرتين */
salla-advertisement:has(.s-advertisement) { display: block; min-height: 46px; }
/* حركة ظهوره كانت تغيّر الارتفاع من 0 إلى 46px إطاراً بإطار = قفزات متتالية.
   حركة الإغلاق (عند ضغط ×) تبقى كما هي. */
salla-advertisement.s-advertisement-animate-in { animation: none !important; }

/* خانة البحث في هيدر رائد تكبر 4px بعد التحميل (32 ← 36) */
.top-navbar > .container { min-height: 36px; }


/* ---------- (1ب) إظهار السلايدر فوراً لو أُضيف سلايدر صور (أسرع LCP) ---------- */
/* سلة تخفي مكوّناتها (visibility:hidden) حتى تنتهي سكربتاتها، والسلايدر يظهر سليماً بدونها. */
salla-slider.photos-slider:not(.hydrated) { visibility: visible; }


/* ---------- (1ج) أقسام HTML في الرئيسية: نحجز مكانها حتى يرسمها عنصر سلة ---------- */
/* عنصر "محتوى HTML" يرسم المحتوى بعد تحميل سكربتاته (~2 ثانية)، فكان الغلاف والتصنيفات
   يظهرون فجأة ويدفعون الصفحة لتحت (مؤشر القفز كان 0.77). نحجز ارتفاع كل قسم بالضبط،
   والغلاف نعرض صورته نفسها من البداية (تنزل مبكراً وتُستخدم نفسها بعدين من الكاش).
   ⚠️ الأرقام مربوطة برقم القسم (component-id). لو حذفت قسماً وأضفته من جديد، انسخ رقمه الجديد هنا. */
body.index section[component-id="1115761140"]:not(:has(.ll-hero-wrap))::before {
  content: "";
  display: block;
  width: calc(100% - 32px);
  max-width: 528px;
  margin-inline: auto;
  aspect-ratio: 1440 / 1680;
  /* نفس رابط صورة الغلاف في القسم بالحرف (مصغّرة 1080 من سلة) عشان تنزل مرة وحدة بس */
  background: url("https://cdn.files.salla.network/cdn-cgi/image/width=1080,format=auto/other/975634797/6256764c-40d8-4a46-b33b-1c23faf5ddcd-original.webp") center / cover no-repeat;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
/* لما الـ JS يرسم القسم بنفسه (.ll-fb) نخفي عنصر سلة اللي ما رسم بعد، عشان مكانه الفاضي ما يدفع القسم لتحت */
section.s-block:has(> .ll-fb) > salla-custom-component { display: none !important; }
body.index section[component-id="730190365"]:not(:has(.ll-home)) { min-height: 316px; }
body.index section[component-id="90370334"]:not(:has(.ll-howto-wrap)) { min-height: 465px; margin-top: 36px; }
body.index section[component-id="476989685"]:not(:has(.ll-gift-wrap)) { min-height: calc((min(100vw, 560px) - 32px) * .75); margin-top: 36px; }
body.index section[component-id="1219242825"]:not(:has(.ll-rev-wrap)) { min-height: 457px; margin-top: 36px; }
body.index section[component-id="834337465"]:not(:has(.ll-info)) { min-height: 800px; margin-top: 36px; }
@media (min-width: 1024px) {
  body.index section[component-id="1115761140"]:not(:has(.ll-hero-wrap))::before {
    width: calc(100% - 64px);
    max-width: 1256px;
    aspect-ratio: 2400 / 927;
    background-image: url("https://cdn.files.salla.network/cdn-cgi/image/width=1920,format=auto/other/975634797/588467a7-b709-4cfe-a605-3a5b2ce2100b-original.webp");
    -webkit-mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
  }
  body.index section[component-id="730190365"]:not(:has(.ll-home)) { min-height: 381px; }
  body.index section[component-id="90370334"]:not(:has(.ll-howto-wrap)) { min-height: 380px; margin-top: 60px; }
  body.index section[component-id="476989685"]:not(:has(.ll-gift-wrap)) { min-height: calc((min(100vw, 1320px) - 64px) * .375); margin-top: 60px; }
  body.index section[component-id="1219242825"]:not(:has(.ll-rev-wrap)) { min-height: 504px; margin-top: 60px; }
  body.index section[component-id="834337465"]:not(:has(.ll-info)) { min-height: 806px; margin-top: 60px; }
}


/* ---------- (2) الجوال: نص زر "أضف إلى السلة" كان ينقطع ---------- */
@media (max-width: 640px) {
  .s-product-card-entry salla-add-product-button .s-button-btn {
    padding-inline: 8px !important;
    gap: 4px;
  }
  .s-product-card-entry salla-add-product-button .s-button-text {
    font-size: 13px;
  }
}


/* ---------- (3) زر الواتساب: فوق شريط الإضافة للسلة في صفحة المنتج (الجوال) ---------- */
/* شريط الإضافة المثبت أسفل الجوال صفّين (الكمية + زرين) بارتفاع 114px، فنرفع الزر فوقه بـ 12px.
   ⚠️ لو تغيّر شكل الشريط (مثلاً حذف زر "اشترِ الآن") راجع الرقم 126px. */
@media (max-width: 1023.98px) {
  body.product-single .wa-s-n { bottom: calc(126px + env(safe-area-inset-bottom, 0px)) !important; }
  .wa-s-n {
    width: 46px !important;
    height: 46px !important;
    line-height: 46px !important;
  }
}


/* ---------- (3ب) زر الواتساب دائماً على اليسار ---------- */
/* أزرار السلة والمنتج على اليمين في الجوال، فنثبت الواتساب يسار مهما تغيّر إعداد التطبيق. */
.wa-s-n { left: 18px !important; right: auto !important; }

/* السلة على الجوال: شريط "الإجمالي + إتمام الطلب" مثبت أسفل الشاشة (~134px)، فنرفع الزر فوقه بـ 12px.
   الـ JS المخصص يقيس ارتفاع الشريط الفعلي (يتغير لو العميل فتح التفاصيل) ويحدّث --ll-cart-bar. */
@media (max-width: 1023.98px) {
  body.cart .wa-s-n { bottom: calc(var(--ll-cart-bar, 134px) + 12px + env(safe-area-inset-bottom, 0px)) !important; }
}


/* ---------- (5) صفحة المنتج على الجوال: منع قفزة الصفحة (CLS) ---------- */
/* معرض صور المنتج يظهر بارتفاع صفر حتى يكتمل سكربته (~1.3 ثانية). نحجز مكانه من البداية:
   الصورة مربعة بعرض الشاشة ناقص 20px، + 80px لشريط الصور المصغرة إذا المنتج فيه أكثر من صورة.
   ⚠️ لو غيّرت إعداد "طريقة عرض الصور في سليدر صور المنتج" أو شكل المعرض، راجع الأرقام. */
@media (max-width: 767px) {
  body.product-single salla-slider.details-slider:not(.hydrated) {
    display: block;
    height: calc(100vw - 20px);
    overflow: hidden;
    visibility: visible;   /* إظهار أول صورة قبل سكربت المعرض = أسرع LCP */
  }
  body.product-single salla-slider.details-slider[data-images*="},{"]:not(.hydrated) {
    height: calc(100vw - 20px + 80px);
  }
}


/* ---------- (6) صفحات التصنيفات والبحث: منع قفزة الصفحة (CLS) ---------- */
/* قائمة المنتجات تنزل متأخرة (~2-3 ثواني)، فكان الفوتر و"آراء العملاء" يظهرون أعلى الشاشة ثم ينزلون.
   نحجز ارتفاع شاشة كاملة للقائمة، ونخفي الفوتر و"آراء العملاء" مؤقتاً حتى تستقر المنتجات.
   الـ JS المخصص يضيف ll-list-settled بعد ظهور المنتجات بـ 0.8 ثانية (أو رسالة "لا توجد منتجات").
   أمان: لو الـ JS ما اشتغل، الحركة ll-list-release تُظهر كل شيء تلقائياً بعد 10 ثواني. */
@keyframes ll-list-release { to { min-height: 0; visibility: visible; } }
body:is(.product-index, .product-index-search):not(.ll-list-settled) salla-products-list {
  display: block;
  min-height: 100vh;
  min-height: 100svh;
  animation: ll-list-release 0s 10s forwards;
}
body:is(.product-index, .product-index-search):not(.ll-list-settled) :is(.store-footer, footer.ll-ft, .s-block--testimonials) {
  visibility: hidden;
  animation: ll-list-release 0s 10s forwards;
}

/* صورة بطاقة المنتج في شكل رائد العادي تبدأ بارتفاع صفر، فنعطيها حداً أدنى.
   (بطاقات واجهة ليليا لها صورة مربعة محجوزة من البداية، شوف القسم 10) */
.s-product-card-fit-height.s-product-card-vertical .s-product-card-image { min-height: 11rem; }
@media (min-width: 640px) {
  .s-product-card-fit-height.s-product-card-vertical .s-product-card-image { min-height: 14rem; }
}

/* عنوان صفحة التصنيف يبدأ باسم التصنيف ثم يتبدل لعدد المنتجات فترتفع الصفحة. نخليه سطراً واحداً،
   وعلى الجوال سطرين محجوزين من البداية حتى يظهر الاسم كامل. */
body.product-index main h1.text-xl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 639px) {
  body.product-index main h1.text-xl {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 3.5rem;
  }
}


/* ---------- (7) مسار التنقل (الرئيسية › ...) يبدأ بارتفاع صفر ثم 20px فينزل المحتوى ---------- */
nav.breadcrumbs salla-breadcrumb { display: block; min-height: 20px; }


/* ---------- (4) احترام إعداد "تقليل الحركة" في جهاز العميل ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* صفحة المنتج: رمادي رائد (#6B7280) على الخلفية البيج تباينه 4.41 (أقل من 4.5 المطلوب)، فنستخدم رمادي الهوية (تباين 6.9) */
body.product-single main :is(.product-entry__sub-title, .s-rating-stars-reviews, .text-gray-500) { color: #6B5654 !important; }
/* صور العميلات الافتراضية في آراء العملاء كانت تنعرض بنسبة غير نسبتها (تتمطط) */
salla-reviews img { object-fit: cover; }


/* ---------- (8) سطر ثقة تحت زر الشراء في صفحة المنتج ---------- */
body.product-single form.product-form::after {
  content: "شحن مجاني للطلبات من 249 ريال  ·  الضمان الذهبي  ·  قسّطيها مع تابي أو تمارا  ·  التوصيل خلال 2 إلى 8 أيام عمل";
  display: block;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid #ead8d8;
  border-radius: 10px;
  background: #fff7f5;
  color: #5E0707;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.8;
  text-align: center;
}


/* ---------- (9) ألوان رائد الاحتياطية (تظهر فقط لو ما اشتغل كود الواجهة) ---------- */
body.theme-raed { background: #F9F4EA; }
.store-header .main-nav-container { background: #E4CFB1 !important; border-bottom: 1px solid #D2B993; }
.store-header .top-navbar { background: #5E0707; color: #fff; }
.store-header .top-navbar a { color: #fff; }
.store-header .top-navbar .s-search-input { background: #fff; color: #2B1A1A; }
.store-header .top-navbar .s-search-input::placeholder { color: #6B5654; }


/* ---------- (10) واجهة ليليا: الهيدر والقائمة والشريط السفلي والفوتر وبطاقات المنتجات ---------- */
/* يبنيها كود JavaScript المخصص ويضيف body.ll-ui. لو صار أي خطأ يضيف ll-off ويرجع شكل رائد العادي. */

/* (10أ) قبل ما يشتغل الكود (سلة تؤخر السكربتات ~2 ثانية): نخفي هيدر وفوتر رائد ونحجز مكان هيدرنا
   بنفس ارتفاعه، فما يظهر الهيدر القديم ولا تقفز الصفحة. أمان: لو الكود ما اشتغل خلال 8 ثواني يرجع هيدر رائد. */
@keyframes ll-hd-release { to { height: auto; overflow: visible; visibility: visible; } }
body:not(.ll-ui):not(.ll-off) header.store-header { height: 115px; overflow: hidden; visibility: hidden; animation: ll-hd-release 0s 8s forwards; }
body:not(.ll-ui):not(.ll-off) footer.store-footer { visibility: hidden; animation: ll-hd-release 0s 8s forwards; }
body:not(.ll-ui) .ll-x { display: none !important; }

body.ll-ui{--ll-bg:#F9F4EA;--ll-blush:#F8F2E8;--ll-line:#ECE3D6;--ll-ink:#2B1A1A;--ll-mut:#6B5654;--ll-b:#810E0E;--ll-bd:#5E0707;--ll-gold:#A87B2D;--ll-od:#F3E3E1;background:var(--ll-bg)}
body.ll-ui header.store-header,body.ll-ui footer.store-footer{display:none!important}
.ll-x{direction:rtl;font-family:inherit;color:var(--ll-ink)}
.ll-x a{color:inherit;text-decoration:none}
.ll-x a,.ll-x button,.ll-x summary{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.ll-x a:focus-visible,.ll-x button:focus-visible,.ll-x summary:focus-visible{outline:2px solid var(--ll-b);outline-offset:2px}
.ll-ft a:focus-visible{outline-color:#fff}
.ll-x .ll-ico{width:22px;height:22px;flex:none}
.ll-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ll-wrap{max-width:560px;margin-inline:auto;padding-inline:16px}

/* الهيدر: ثابت أعلى الشاشة مع التمرير */
.ll-top{position:sticky;top:env(safe-area-inset-top,0px);z-index:40}
.ll-hd{background:#E4CFB1;border-bottom:1px solid #D2B993}
.ll-hd-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:58px}
.ll-side{display:flex}
.ll-side.ll-end{justify-content:flex-end}
.ll-ib{position:relative;width:44px;height:44px;display:grid;place-items:center;border:0;background:none;border-radius:12px;color:var(--ll-ink);cursor:pointer;padding:0}
.ll-ib:active{background:rgba(255,255,255,.45)}
.ll-logo{justify-self:center;display:flex;align-items:center;gap:8px;min-width:0;max-width:100%;min-height:44px;font-weight:700;font-size:16px;color:var(--ll-bd)!important}
.ll-logo-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ll-logo img{width:34px;height:34px;border-radius:9px;object-fit:cover;flex:none}
.ll-badge{position:absolute;top:4px;inset-inline-end:2px;min-width:18px;height:18px;padding-inline:4px;border-radius:9px;background:var(--ll-b);color:#fff;font-size:11px;line-height:18px;text-align:center}
.ll-search{margin-bottom:10px}
/* نحجز ارتفاع البحث قبل ما يجهز عنصر سلة، وإلا الهيدر يطلع 69px بدل 115 والصفحة تقفز 46px */
.ll-search salla-search{display:block;min-height:46px}
.ll-search .s-search-input-wrapper,.ll-search .s-search-placeholder-wrapper{width:100%}
.ll-search input.s-search-input{height:46px!important;border-radius:12px!important;background:#fff!important;border:1px solid var(--ll-line)!important;font-size:16px!important;color:var(--ll-ink)!important;padding-inline:44px 14px!important}
.ll-search input.s-search-input::placeholder{color:var(--ll-mut)!important}
.ll-search .s-search-icon-wrap{color:var(--ll-b)}
.ll-dnav{display:none}
@media (max-width:359.98px){.ll-hd .ll-logo img{display:none}}

/* القائمة الجانبية */
dialog.ll-drawer{margin:0;margin-inline-end:auto;padding:0;border:0;width:min(86vw,340px);max-width:none;height:100%;max-height:none;background:var(--ll-bg);color:var(--ll-ink);box-shadow:0 0 0 1px var(--ll-line),-12px 0 32px rgba(43,26,26,.18)}
dialog.ll-drawer[open]{animation:ll-dw .26s cubic-bezier(.2,.8,.2,1)}
dialog.ll-drawer::backdrop{background:rgba(43,26,26,.45)}
@keyframes ll-dw{from{transform:translateX(100%)}}
body.ll-lock{overflow:hidden}
.ll-dw{display:flex;flex-direction:column;height:100%;overflow-y:auto;overscroll-behavior:contain;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
.ll-dw-hd{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:8px;height:58px;padding-inline:16px 6px;background:var(--ll-bg);border-bottom:1px solid var(--ll-line)}
.ll-dw h3{margin:20px 16px 6px;font-size:13px;font-weight:700;color:var(--ll-mut)}
.ll-dw-cats{display:grid;padding-inline:8px;margin-bottom:24px}
.ll-dw-cats .ll-row{display:flex;align-items:center;gap:12px;min-height:52px;padding-inline:8px;border-radius:12px;font-size:15px;font-weight:700;list-style:none;cursor:pointer}
.ll-dw-cats summary::-webkit-details-marker{display:none}
.ll-dw-cats .ll-row:active{background:var(--ll-blush)}
.ll-dw-cats .ll-disc{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:#fff;border:1px solid var(--ll-line);color:var(--ll-b);flex:none}
.ll-dw-cats .ll-disc .ll-ico{width:22px;height:22px}
.ll-dw-cats .ll-go{margin-inline-start:auto;width:16px;height:16px;color:var(--ll-mut);transition:transform .2s ease}
.ll-dw-cats summary .ll-go{transform:rotate(-90deg)}
.ll-dw-cats details[open] summary .ll-go{transform:rotate(90deg);color:var(--ll-b)}
.ll-dw-sub{display:grid;margin-inline-start:58px;margin-bottom:6px}
.ll-dw-sub a{display:flex;align-items:center;min-height:44px;font-size:14.5px;color:var(--ll-mut)!important;border-bottom:1px solid var(--ll-line)}
.ll-dw-sub a:last-child{border-bottom:0}
.ll-dw-sub a.ll-all{color:var(--ll-b)!important;font-weight:700}
.ll-dw-foot{margin:auto 16px 0;padding-top:10px;border-top:1px solid var(--ll-line)}
.ll-dw-acc{display:grid}
.ll-dw-acc a,.ll-dw-acc button{display:flex;align-items:center;gap:12px;min-height:46px;font-size:15px;font-weight:700;color:var(--ll-ink);background:none;border:0;padding:0;font-family:inherit;cursor:pointer;text-align:start}
.ll-dw-acc .ll-ic{position:relative;display:grid;place-items:center;width:24px;height:24px;color:var(--ll-b)}
.ll-dw-acc .ll-badge{top:-6px;inset-inline-end:-8px}
.ll-dw-lbl{margin:14px 0 8px;font-size:13px;font-weight:700;color:var(--ll-mut)}
.ll-soc{display:flex;gap:8px}
.ll-soc a{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#fff;border:1px solid var(--ll-line);color:var(--ll-b)!important}
.ll-soc .ll-ico{width:21px;height:21px}

/* الشريط السفلي (الجوال) */
body.ll-ui{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
nav.ll-bn{position:fixed;bottom:0;left:0;right:0;z-index:45;background:#fff;border-top:1px solid var(--ll-line);padding-bottom:env(safe-area-inset-bottom,0px)}
.ll-bn-row{max-width:560px;margin-inline:auto;display:grid;grid-template-columns:repeat(4,1fr);height:62px}
.ll-bn a,.ll-bn button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:12px;color:var(--ll-mut)!important;position:relative;background:none;border:0;font-family:inherit;cursor:pointer;padding:0}
.ll-bn a:active,.ll-bn button:active{background:var(--ll-blush)}
.ll-bn .ll-on{color:var(--ll-b)!important}
.ll-bn .ll-badge{top:5px;inset-inline-end:calc(50% - 24px)}
@media (max-width:1023.98px){
  body:not(.product-single):not(.cart) .wa-s-n{bottom:calc(78px + env(safe-area-inset-bottom,0px))!important}
  body.ll-ui.product-single footer.ll-ft{padding-bottom:calc(140px + env(safe-area-inset-bottom,0px))}
  body.ll-ui.cart footer.ll-ft{padding-bottom:calc(var(--ll-cart-bar,134px) + 24px + env(safe-area-inset-bottom,0px))}
}
/* صفحة المنتج والسلة فيها شريط ثابت من رائد (الإضافة للسلة / إتمام الطلب)، فنخفي شريطنا السفلي فيها */
body.ll-ui.product-single nav.ll-bn,body.ll-ui.cart nav.ll-bn{display:none}
body.ll-ui.product-single,body.ll-ui.cart{padding-bottom:0}

/* الفوتر */
footer.ll-ft{margin-top:36px;background:var(--ll-bd);color:var(--ll-od);padding-block:28px 24px;font-size:14px}
.ll-ft h3{margin:0 0 10px;font-size:15px;color:#fff;font-weight:700}
.ll-ft-brand{display:flex;align-items:center;gap:10px;margin-bottom:10px;color:#fff;font-weight:700;font-size:17px}
.ll-ft-brand img{width:40px;height:40px;border-radius:10px}
.ll-ft-since{display:inline-block;margin:0 0 8px;padding:2px 12px;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;font-size:13px;font-weight:700}
.ll-ft-about{margin:0;line-height:1.85}
.ll-ft-block{margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14)}
.ll-ft-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}
.ll-ft-links a{min-height:44px;display:flex;align-items:center;color:var(--ll-od)!important}
.ll-ft-contact{display:grid;gap:2px}
.ll-ft-contact a,.ll-ft-contact span{display:flex;align-items:center;gap:10px;min-height:44px;color:var(--ll-od)!important}
.ll-ft-contact .ll-ico{width:20px;height:20px;color:#fff}
.ll-ft-social{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.ll-ft-social a{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.1);color:#fff!important}
.ll-ft-social .ll-ico{width:20px;height:20px}
.ll-legal{display:grid;grid-template-columns:1fr 1.35fr 1fr;gap:8px}
.ll-legal>*{background:#fff;color:var(--ll-ink)!important;border-radius:10px;padding:10px 6px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;font-size:12px;line-height:1.4;min-width:0}
.ll-legal img{width:44px;height:44px;object-fit:contain}
.ll-legal b{font-size:12px;color:var(--ll-bd)}
.ll-legal b.ll-num{font-size:clamp(11px,3.2vw,12.5px);font-variant-numeric:tabular-nums}
.ll-copy{margin-top:22px;text-align:center;font-size:12.5px;color:var(--ll-od)}

/* أقسام المنتجات في الرئيسية: شريط يتمرر على الجوال */
body.ll-ui.index main .s-block.container{padding-inline:16px;max-width:560px}
body.ll-ui.index .s-block__title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
body.ll-ui.index .s-block__title h2{font-size:20px;line-height:1.4;color:var(--ll-ink)}
.s-block__title .ll-more{display:inline-flex;align-items:center;gap:2px;font-size:14px;color:var(--ll-b)!important;min-height:44px;white-space:nowrap}
.s-block__title .ll-more .ll-ico{width:16px;height:16px}
body.ll-ui.index salla-products-list.vertical-products{display:block!important;margin-inline:-16px;overflow:visible}
body.ll-ui.index .vertical-products .s-products-list-wrapper{display:grid!important;grid-auto-flow:column!important;grid-auto-columns:64%!important;grid-template-columns:none!important;gap:12px!important;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-inline:16px;scroll-padding-inline:16px}
body.ll-ui.index .vertical-products .s-products-list-wrapper::-webkit-scrollbar{display:none}

/* بطاقة المنتج (كل الصفحات): صورة مربعة كاملة بدون قص */
body.ll-ui custom-salla-product-card.s-product-card-entry{background:#fff!important;border:1px solid var(--ll-line)!important;border-radius:14px!important;overflow:hidden;box-shadow:none!important;scroll-snap-align:start;min-width:0}
body.ll-ui custom-salla-product-card .s-product-card-image{flex:none!important;aspect-ratio:1/1!important;height:auto!important;min-height:0!important;max-height:none!important;background:#fff!important}
body.ll-ui custom-salla-product-card .s-product-card-image img{width:100%;height:100%;object-fit:cover}
body.ll-ui custom-salla-product-card button.s-product-card-wishlist-btn{width:44px!important;height:44px!important}
body.ll-ui custom-salla-product-card .s-product-card-content{flex:1 1 auto!important;display:flex!important;flex-direction:column!important;padding:10px 12px 12px!important}
body.ll-ui custom-salla-product-card .s-product-card-content-title{font-size:15px!important;font-weight:700!important;line-height:1.5!important;margin:0!important;color:var(--ll-ink)}
body.ll-ui custom-salla-product-card .s-product-card-content-subtitle{font-size:13px!important;color:var(--ll-mut)!important;opacity:1!important;margin:2px 0 0!important;line-height:1.6!important}
body.ll-ui custom-salla-product-card .s-product-card-content-sub{margin-top:6px!important;align-items:center}
body.ll-ui custom-salla-product-card .s-product-card-sale-price h4,body.ll-ui custom-salla-product-card .s-product-card-price{font-size:16px!important;color:var(--ll-bd)!important;font-weight:700}
body.ll-ui custom-salla-product-card .s-product-card-sale-price span{font-size:12.5px!important;color:var(--ll-mut)!important}
body.ll-ui custom-salla-product-card .s-product-card-rating{font-size:12px;color:var(--ll-mut)}
body.ll-ui custom-salla-product-card .s-product-card-rating i::before{color:var(--ll-gold)!important}
/* سطر التقسيط: شعارا تابي وتمارا فقط بدون أرقام (طلب صاحبة المتجر) */
body.ll-ui .ll-inst{position:relative;margin:6px 0 0;display:flex;align-items:center;gap:4px;min-height:18px;line-height:1}
body.ll-ui .ll-inst .ll-tb,body.ll-ui .ll-inst .ll-tm{direction:ltr;white-space:nowrap;font-size:11px;font-weight:700;line-height:1;padding:3px 6px;border-radius:5px;color:#292929}
body.ll-ui .ll-inst .ll-tb{background:#3BFFC1}
body.ll-ui .ll-inst .ll-tm{background:linear-gradient(90deg,#FFE6C8,#F3B6D8,#C8D3FF)}
/* min-height: زر السلة يبدأ 36px ثم يصير 44px لما يجهز سكربت سلة، فنحجز 54px (44 + 10) من البداية */
body.ll-ui custom-salla-product-card .s-product-card-content-footer{margin-top:auto!important;padding-top:10px;min-height:54px}
body.ll-ui custom-salla-product-card salla-add-product-button .s-button-element{min-height:44px;border-radius:10px!important;border:1px solid var(--ll-b)!important;background:#fff!important;color:var(--ll-b)!important;font-weight:700!important;font-size:14px!important}
body.ll-ui custom-salla-product-card salla-add-product-button .s-button-element:hover{background:var(--ll-b)!important;color:#fff!important}

/* الكمبيوتر */
@media (min-width:1024px){
  body:not(.ll-ui):not(.ll-off) header.store-header{height:124px}
  body.ll-ui{padding-bottom:0}
  nav.ll-bn{display:none}
  .wa-s-n{bottom:24px!important}
  .ll-wrap{max-width:1320px;padding-inline:32px}
  .ll-hd .ll-wrap{display:grid;grid-template-columns:1fr minmax(360px,560px) 1fr;grid-template-areas:"logo search icons" "nav nav nav";align-items:center;column-gap:40px;padding-top:12px}
  .ll-hd-row{display:contents}
  .ll-hd-row>.ll-side:first-child{display:none}
  .ll-logo{grid-area:logo;justify-self:start;font-size:20px;gap:10px}
  .ll-logo img{width:44px;height:44px;border-radius:12px}
  .ll-side.ll-end{grid-area:icons;justify-self:end;gap:6px}
  .ll-search{grid-area:search;margin:0}
  .ll-search salla-search{min-height:48px}
  .ll-search input.s-search-input{height:48px!important}
  .ll-dnav{grid-area:nav;display:flex;align-items:center;gap:2px;margin-top:12px;border-top:1px solid #D2B993}
  .ll-dn{position:relative}
  .ll-dn>a{display:flex;align-items:center;gap:4px;height:50px;padding-inline:16px;font-weight:700;font-size:15px;color:var(--ll-bd)!important}
  .ll-dn>a:hover,.ll-dn:focus-within>a{color:var(--ll-b)!important}
  .ll-dn>a .ll-ico{width:14px;height:14px;transform:rotate(-90deg);transition:transform .2s ease}
  .ll-dn:hover>a .ll-ico,.ll-dn:focus-within>a .ll-ico{transform:rotate(90deg)}
  .ll-dn-menu{position:absolute;inset-inline-start:4px;top:100%;z-index:30;min-width:230px;padding:8px;background:#fff;border:1px solid var(--ll-line);border-radius:14px;box-shadow:0 14px 34px rgba(43,26,26,.14);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .16s ease,transform .16s ease,visibility .16s}
  .ll-dn:hover .ll-dn-menu,.ll-dn:focus-within .ll-dn-menu{opacity:1;visibility:visible;transform:none}
  .ll-dn-menu a{display:flex;align-items:center;min-height:44px;padding-inline:12px;border-radius:10px;font-size:14.5px;color:var(--ll-ink)!important}
  .ll-dn-menu a:first-child{color:var(--ll-b)!important;font-weight:700}
  .ll-dn-menu a:hover{background:var(--ll-blush);color:var(--ll-b)!important}
  body.ll-ui.index main .s-block.container{max-width:1320px;padding-inline:32px}
  body.ll-ui.index .s-block__title h2{font-size:25px}
  body.ll-ui.index salla-products-list.vertical-products{margin-inline:0}
  body.ll-ui.index .vertical-products .s-products-list-wrapper{grid-auto-flow:row!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-auto-columns:auto!important;gap:20px!important;overflow:visible;padding-inline:0;scroll-snap-type:none}
  body.ll-ui custom-salla-product-card.s-product-card-entry{transition:box-shadow .2s ease,transform .2s ease}
  body.ll-ui custom-salla-product-card.s-product-card-entry:hover{box-shadow:0 12px 30px rgba(43,26,26,.10)!important;transform:translateY(-3px)}
  footer.ll-ft{margin-top:60px;padding-block:52px 28px;font-size:15px}
  .ll-ft .ll-wrap{display:grid;grid-template-columns:1.6fr 1.25fr 1.15fr;grid-template-areas:"brand links contact" "since links contact" "about links contact" "legal legal legal" "copy copy copy";grid-template-rows:auto auto 1fr auto auto;column-gap:56px;align-items:start}
  .ll-ft-brand{grid-area:brand}
  .ll-ft-since{grid-area:since;justify-self:start}
  .ll-ft-about{grid-area:about;max-width:440px;text-wrap:balance}
  .ll-ft .ll-fb-links{grid-area:links}
  .ll-ft .ll-fb-contact{grid-area:contact}
  .ll-ft .ll-fb-links,.ll-ft .ll-fb-contact{margin-top:0;padding-top:0;border-top:0}
  .ll-ft .ll-fb-legal{grid-area:legal}
  .ll-ft .ll-fb-legal .ll-legal{max-width:640px;margin-inline:auto}
  .ll-copy{grid-area:copy}
  .ll-ft-social{flex-wrap:nowrap}
  .ll-ft-links a:hover,.ll-ft-contact a:hover{color:#fff!important;text-decoration:underline;text-underline-offset:4px}
}
@media (min-width:1024px) and (max-width:1279.98px){
  .ll-ft .ll-wrap{grid-template-columns:1.4fr 1fr;grid-template-areas:"brand brand" "since since" "about about" "links contact" "legal legal" "copy copy";grid-template-rows:auto}
  .ll-ft-about{margin-bottom:28px}
}
@media (min-width:1280px){
  body.ll-ui.index .vertical-products .s-products-list-wrapper{grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:16px!important}
  body.ll-ui.index custom-salla-product-card .s-product-card-content-title{font-size:14.5px!important}
}
@media (prefers-reduced-motion:reduce){dialog.ll-drawer[open]{animation:none}.ll-x *{transition:none!important}}