/* Add custom CSS styles below */ 
body#app.index {
    background: #3E3D4D;
  color: white;
}
/* ==============================
   3- إعدادات اللازي لود (Lazy Loading)
============================== */
.lazy__bg.lazy.entered.loaded {
    background-size: contain;      /* ملاءمة الخلفية بدون قص */
    background-repeat: no-repeat;  /* منع التكرار */
}


/* ==============================
   4- إعدادات الصور والبنرات
============================== */
a.banner-entry.square-photos {
    background: transparent; /* خلفية شفافة */
}

.banner-entry {
    transition:
        transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),       /* حركة تكبير/تصغير */
        background-size 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), /* انتقال حجم الخلفية */
        background-position 0.6s ease;                             /* انتقال موضع الخلفية */
}

.banner-entry:hover {
    transform: scale(1.05) translateY(-10px); /* تكبير وتحريك لأعلى عند الهوفر */
}

img {
    background: transparent !important; /* إزالة خلفية الصور */
    border-radius: 0;                   /* إزالة الزوايا الدائرية */
}

/* سكشن فيه 4 بنرات فقط */
section.s-block--banners
> .grid.two-row:has(> a.banner-entry:nth-child(4):last-child) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

section.s-block.s-block--banners:has(> .grid.two-row)
.banner-entry {
    height: 470px;
}
section.s-block.s-block--banners:has(> .grid.one-row) .banner-entry {
    height: 490px;
}

@media (max-width: 768px) {

  /* two-row */
  section.s-block--banners
  > .grid.two-row:has(> a.banner-entry:nth-child(4):last-child) {
      grid-template-columns: repeat(2, 1fr);
  }

  section.s-block--banners
  > .grid.two-row
  > a.banner-entry {
      height: 280px !important;
  }

  /* one-row */
  section.s-block--banners
  > .grid.one-row {
      grid-template-columns: repeat(2, 1fr);
  }

  section.s-block--banners
  > .grid.one-row
  > a.banner-entry {
      height: 200px !important;
  }

}
.s-product-card-entry {

    background-color: rgb(255 255 255 / 0%);
}


/* ==============================
   7- عناوين الأقسام (Titles)
============================== */
.s-block__title {
    justify-content: center; /* توسيط العنوان */
}

.s-block__title h2 {
    border: 2px solid #FFF;  /* إطار العنوان */
    border-radius: 10px;        /* زوايا دائرية */
    padding: 10px 20px;         /* مساحة داخلية */
    display: inline-block;      /* عرض داخلي */
    color: #FFF;             /* لون النص */
    font-weight: bold;          /* سمك النص */
    font-size: 2rem;            /* حجم النص */
}

.s-block__title .right-side:where([dir="rtl"], [dir="rtl"] *) {
    padding-left: 0; /* إزالة الحشو لليمين */
}

.s-slider-block__title h2 {
    font-size: 1.5rem; /* حجم أصغر */
    color: #FFF;
}

section.s-block.s-block--banners.container .s-block__title .right-side h2 {
    color: #FFF;
    font-weight: bold;
    font-size: 2rem;
}
.s-product-card-content-sub {
    text-align: center;
    display: inline-block;
}
.s-product-card-content-title a {
    font-size: 16px;     /* حجم النص */
    font-weight: bold;   /* نص سميك */
    text-align: center;
    display: block;
}

/* ==============================
   9- الأزرار (Buttons)
============================== */
.index .s-button-btn.s-button-primary-outline {
    background-color: transparent;
    color: #fff;
}
.s-button-btn.s-button-primary-outline {
    background-color: white;
    color: #000;
}

.index .s-button-btn.s-button-primary-outline:hover {
    background-color: transparent;
    color: #fff;
}

.s-button-btn.s-button-primary-outline:hover {
    background-color:black;
    color: #fff;
}

.index .s-product-card-content-title a {
    color: #fff;
}

.index .s-product-card-content-title a:hover {
    color: #fff;
}

.index .s-slider-block__display-all {
    color: #fff;
}




.s-block--features__item {
    background-color: rgb(255 255 255 / 0%);
  border: 2px solid white;
}

.s-block--features__item .feature-icon {
    background-color: #849FAC;
}

.s-block--features__item .feature-icon i {

    color: #ffffff !important;
}
.s-block--features__item h2 {
    color: rgb(255 255 255);
}
.s-block--features__item p {
    color: #FFFFFFB2;
}

.s-reviews-testimonial {
    background-color: rgb(255 255 255 / 0%);
}

.s-product-card-entry,
custom-salla-product-card.s-product-card-entry {
    border: 2px solid #fff;               /* إطار المنتج */
    border-radius: 8px;                      /* زوايا دائرية */
    overflow: hidden;                        /* إخفاء المحتوى الزائد */
    padding: 10px;                           /* حشو داخلي */
    transition: transform 0.3s ease, 
                box-shadow 0.3s ease;        /* تأثير حركة */
}
div#mainnav {
    background-color: transparent !important;
}


/* اللينكات الفرعية في القايمة (Desktop) */
.sub-menu a {
    color: #000 !important;
}

.sub-menu a:hover {
    color: #000 !important;
}
.sicon-user-circle:before {
    color: #FFA500;
}

.sicon-shopping-bag:before {
    color:#FFA500;
}

.store-footer__inner {
    background-color: #3E3D4D; /* خلفية الفوتر */
}


.store-footer {
    background-color: #3E3D4D;
  border-top: 2px solid #FFFFFF33;
}
.main-nav-container.fixed-pinned .navbar-brand img,
.navbar-brand img {
    max-height: 6rem; /* تحديد أقصى ارتفاع للشعار */
}

.copyright-text p {
    color: rgb(255 255 255);
}

.index .s-button-btn.s-button-primary-outline:hover {
    background-color: #ffffff00;
    color: #fff;
    border: 1px solid white;
}

/* Glass effect زر إضافة للسلة */
.index.s-button-btn.s-button-primary-outline {
    background: rgba(255, 255, 255, 0.15);   /* شفافية */
    backdrop-filter: blur(10px);             /* التأثير الزجاجي */
    -webkit-backdrop-filter: blur(10px);     /* Safari */
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease;
}

/* Hover */
.index.s-button-btn.s-button-primary-outline:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}

.store-footer a.flex h3 {
    font-size: 0;                                      /* إخفاء النص */
    background-image: url(https://i.ibb.co/VprXmkM0/1.png); /* شعار */
    background-size: contain;                          /* ملاءمة الحجم */
    background-repeat: no-repeat;                      /* منع التكرار */
    background-position: center;                       /* توسيط */
    display: block;
    width: 300px;
    height: 150px;
}

.s-trust-badges-wrapper {
    display: none;
}