/* ============================================================
   (A) المتغيرات (بدون ألوان وخطوط)
   ============================================================ */
:root{
  --logo-height:60px;
  --cart-home-size:15px;
  --cart-page-size:15px;
  --cart-empty-size:50px;
  --cart-empty-circle-size:120px;
}

/* ============================================================
   (B) الأساسيات
   ============================================================ */
html,body{
  margin:0;
  padding:0;
  height:100%;
}

/* ============================================================
   (C) الشعار
   ============================================================ */
img[alt="كوبرلاين copperlyn logo"],
a.navbar-brand>img{
  height:var(--logo-height)!important;
  width:auto!important;
  max-width:none!important;
  max-height:none!important;
}

@media(max-width:768px){
  img[alt="كوبرلاين copperlyn logo"],
  a.navbar-brand>img{height:50px!important;}
}

/* ============================================================
   (D) البنر الرئيسي
   ============================================================ */
.s-block--fixed-banner{width:100%;margin:0;padding:0;}
.s-block--fixed-banner .container{width:100%;max-width:none;padding:0;margin:0;}
.banner--fixed{display:block;width:100%;}
.banner--fixed img{width:100%;height:auto;display:block;}
.s-block--fixed-banner{height:100%;}
.banner--fixed img{height:100%;object-fit:cover;}

@media(max-width:768px){
  .s-block--fixed-banner{height:auto;}
  .banner--fixed img{height:auto;}
}

/* ============================================================
   (E) الشبكات الاجتماعية
   ============================================================ */
.s-social-list{padding-top:50px;}
.s-social-list .s-social-link{margin:0 5px;}
.s-social-list .s-social-icon{
  width:46px!important;height:46px!important;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
}
.s-social-list .s-social-icon svg{width:32px!important;height:32px!important;}

/* ============================================================
   (F) أيقونة السلة الفارغة داخل دائرة
   ============================================================ */
.no-content-placeholder i.sicon-shopping-bag.icon{
  display:flex!important;
  align-items:center;
  justify-content:center;
  width:var(--cart-empty-circle-size)!important;
  height:var(--cart-empty-circle-size)!important;
  border-radius:50%!important;
  line-height:1!important;
  font-size:var(--cart-empty-size)!important;
}

/* ============================================================
   (G) تعطيل النقر على أيقونة SBC
   ============================================================ */
.s-payments-sbc-image,
img[alt="SBC"]{
  pointer-events:none!important;
  cursor:default!important;
}

/* ============================================================
   (H) الفوتر
   - مسافة بيضاء قبل الفوتر الداكن (مثل الصورة)
   - خلفية عامة رمادي للشريط السفلي وما حوله
   ============================================================ */
.store-footer{
  margin:0!important;
  padding:0!important;

  /* ✅ هذه هي المسافة البيضاء المطلوبة قبل الفوتر */
  margin-top:3rem!important; /* غيّرها: 2rem / 3rem / 4rem */

  /* ✅ حتى الأطراف/أسفل الصفحة تكون نفس لون الشريط السفلي */
  background:#f5f5f5!important;
}

.store-footer hr{display:none!important;}

/* الجزء العلوي (الداكن) */
.store-footer__inner{
  margin-top:0!important;
  padding:2rem 0!important;
  border-bottom:none!important;
  /* خلفية الداكن تأتي من إعدادات سلة */
}

/* ============================================================
   (I) الشريط السفلي (الدفع + الحقوق) – رمادي FULL WIDTH
   ============================================================ */
.store-footer > .container.text-center{
  width:100%!important;
  max-width:none!important;
  margin:0!important;

  background:#f5f5f5!important;
  border-top:1px solid #e5e5e5!important;

  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;

  padding-top:1rem!important;
  padding-bottom:1rem!important;
  padding-left:max(2rem, calc((100vw - 1200px)/2))!important;
  padding-right:max(2rem, calc((100vw - 1200px)/2))!important;
}

/* النص والأيقونات داخل الشريط السفلي */
.store-footer > .container.text-center,
.store-footer > .container.text-center *{
  color:#000!important;
  fill:#000!important;
}