/* ========================================
   هوية متجر محياك
   اللون الرئيسي: #a65f31
======================================== */

:root {
  --mahyak-brown: #a65f31;
  --mahyak-brown-dark: #704022;
  --mahyak-brown-light: #c9916d;
  --mahyak-cream: #f8f3ee;
  --mahyak-white: #ffffff;
  --mahyak-text: #4d3427;
}

/* منع خروج العناصر عن حدود الشاشة */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  color: var(--mahyak-text);
  background-color: var(--mahyak-cream);

  /* خلفية هادئة مستوحاة من الورق والقهوة */
  background-image:
    radial-gradient(
      circle at 15% 20%,
      rgba(166, 95, 49, 0.12) 0,
      rgba(166, 95, 49, 0) 28%
    ),
    radial-gradient(
      circle at 85% 75%,
      rgba(112, 64, 34, 0.11) 0,
      rgba(112, 64, 34, 0) 30%
    ),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.96),
      rgba(248, 243, 238, 0.96),
      rgba(235, 218, 205, 0.9)
    );

  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* خلفية زخرفية خفيفة جدا */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background-image:
    linear-gradient(
      45deg,
      transparent 48%,
      rgba(166, 95, 49, 0.025) 49%,
      rgba(166, 95, 49, 0.025) 51%,
      transparent 52%
    );

  background-size: 42px 42px;
}

/* ========================================
   الهيدر
======================================== */

header,
.site-header,
.main-header,
.store-header,
.navbar,
.header-wrapper,
.header-container,
salla-header {
  color: var(--mahyak-white) !important;

  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #d9b59d 35%,
      #a65f31 72%,
      #704022 100%
    ) !important;

  box-shadow: 0 4px 20px rgba(74, 41, 23, 0.14);
}

/* روابط ونصوص الهيدر */
header a,
header span,
header p,
header button,
.site-header a,
.site-header span,
.main-header a,
.main-header span,
.navbar a,
.navbar span,
salla-header a,
salla-header span {
  color: var(--mahyak-white) !important;
}

/* الايقونات في الهيدر */
header svg,
.site-header svg,
.main-header svg,
.navbar svg,
salla-header svg {
  color: var(--mahyak-white) !important;
  fill: currentColor;
}

/* خلفية حقول البحث */
header input,
.site-header input,
.main-header input,
.navbar input,
salla-header input {
  color: var(--mahyak-text) !important;
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid rgba(255, 255, 255, 0.75) !important;
  border-radius: 12px !important;
}
/* ==========================
   Footer - محياك
========================== */

.store-footer,
.store-footer__inner,
.footer-is-light .store-footer,
footer {
    background: #a65f31 !important;
    color: #ffffff !important;
    border: none !important;
}

/* جميع النصوص */

.store-footer *,
footer *{
    color:#ffffff !important;
}

/* الروابط */

.store-footer a,
footer a{
    color:#ffffff !important;
    text-decoration:none;
}

.store-footer a:hover,
footer a:hover{
    color:#f3e7df !important;
}

/* الأيقونات */

.store-footer svg,
.store-footer i,
.store-footer .icon,
footer svg,
footer i{
    color:#ffffff !important;
    fill:#ffffff !important;
}

/* الخطوط الفاصلة */

.store-footer hr,
footer hr{
    border-color:rgba(255,255,255,.2) !important;
}

/* حقول الاشتراك إن وجدت */

.store-footer input{
    background:#ffffff !important;
    color:#333 !important;
    border:none !important;
}

/* زر الاشتراك */

.store-footer button{
    background:#ffffff !important;
    color:#a65f31 !important;
    border:none !important;
}
/* عرض الاقسام قسمين بجانب بعض */

.s-block--banners .grid{
    display:grid !important;
    grid-template-columns:repeat(2,1fr) !important;
    gap:15px !important;
}

.s-block--banners .banner-entry{
    padding:0 !important;
    margin:0 !important;
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    border-radius:16px !important;
    overflow:hidden !important;
}

.s-block--banners .banner-entry img,
.s-block--banners .banner-entry .lazy__bg{
    width:100% !important;
    aspect-ratio:16/9 !important;
    object-fit:cover !important;
    border-radius:16px !important;
}

/* الجوال */
@media (max-width:350 px){
    .s-block--banners .grid{
        grid-template-columns:repeat(2,1fr) !important;
        gap:10px !important;
    }
}
/* =====================================
   زر الواتساب العائم فقط
===================================== */

a[href*="wa.me"]:not(footer a),
a[href*="whatsapp"]:not(footer a),
.whatsapp-float,
.floating-whatsapp,
.whatsapp-button,
#whatsapp-widget,
#chat-widget,
.chat-widget-whatsapp {
    background: #a65f31 !important;
    background-color: #a65f31 !important;
    border-color: #a65f31 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(166,95,49,.35) !important;
}

/* لون أيقونة الواتساب داخل الزر */

a[href*="wa.me"]:not(footer a) svg,
a[href*="whatsapp"]:not(footer a) svg,
.whatsapp-float svg,
.floating-whatsapp svg,
.whatsapp-button svg,
#whatsapp-widget svg,
#chat-widget svg {
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* عدم التأثير على الفوتر */

footer a[href*="wa.me"],
footer a[href*="whatsapp"] {
    background: transparent !important;
    box-shadow: none !important;
}
/* تصغير بطاقات المنتجات المتحركة في الجوال */

@media screen and (max-width: 767px) {

  /* عرض بطاقتين تقريبًا داخل السلايدر */
  .s-products-slider .swiper-slide,
  salla-products-slider .swiper-slide,
  .s-block--products-slider .swiper-slide {
    width: 44% !important;
    max-width: 165px !important;
    margin-left: 8px !important;
  }

  /* حجم البطاقة */
  .s-products-slider .s-product-card-entry,
  salla-products-slider .s-product-card-entry,
  .s-block--products-slider .s-product-card-entry {
    min-height: auto !important;
    border-radius: 12px !important;
  }

  /* تصغير صورة المنتج */
  .s-products-slider .s-product-card-image,
  salla-products-slider .s-product-card-image,
  .s-block--products-slider .s-product-card-image {
    height: 145px !important;
    min-height: 145px !important;
  }

  .s-products-slider .s-product-card-image img,
  salla-products-slider .s-product-card-image img,
  .s-block--products-slider .s-product-card-image img {
    width: 100% !important;
    height: 145px !important;
    object-fit: cover !important;
  }

  /* تصغير المحتوى الداخلي */
  .s-products-slider .s-product-card-content,
  salla-products-slider .s-product-card-content,
  .s-block--products-slider .s-product-card-content {
    padding: 10px 8px !important;
  }

  /* اسم المنتج */
  .s-products-slider .s-product-card-content-title a,
  salla-products-slider .s-product-card-content-title a,
  .s-block--products-slider .s-product-card-content-title a {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  /* السعر */
  .s-products-slider .s-product-card-price,
  salla-products-slider .s-product-card-price,
  .s-block--products-slider .s-product-card-price {
    font-size: 13px !important;
  }

  /* زر الإضافة للسلة */
  .s-products-slider .s-add-product-button,
  salla-products-slider .s-add-product-button,
  .s-block--products-slider .s-add-product-button {
    min-height: 34px !important;
    padding: 6px 8px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
  }
  /*=========================
  الجزء العلوي
==========================*/

.store-footer{
    background:#f7f1ec !important;
}

.store-footer .container.grid{
    background:#f7f1ec !important;
}

.store-footer h3,
.store-footer h4{
    color:#6B3D22 !important;
    font-weight:700 !important;
}

.store-footer p,
.store-footer span,
.store-footer li,
.store-footer a{
    color:#6B3D22 !important;
    font-weight:400 !important;
}

.store-footer svg,
.store-footer i{
    color:#6B3D22 !important;
    fill:#6B3D22 !important;
}

/*=========================
  الجزء السفلي
==========================*/

.store-footer footer,
.store-footer .md\:flex.items-center.justify-between.py-4.container{
    background:#a65f31 !important;
    padding:18px 24px !important;
}

/* جميع النصوص داخل الشريط السفلي */
.store-footer .md\:flex.items-center.justify-between.py-4.container *,
.store-footer footer *{
    color:#a65f31 !important;
}

/* وسائل الدفع */
.store-footer .s-payments-list img{
    background:#ffffff !important;
    border-radius:8px !important;
    padding:4px 8px !important;
}
@media (min-width: 992px){

    .store-footer{
        background:#a65f31 !important;
    }

    .store-footer__inner{
        background:#f7f1ec !important;
        border-radius:0 !important;
    }

}
  /* لون جميع النصوص في الجزء العلوي */
.store-footer__inner,
.store-footer__inner p,
.store-footer__inner a,
.store-footer__inner span,
.store-footer__inner li,
.store-footer__inner strong,
.store-footer__inner b,
.store-footer__inner h3,
.store-footer__inner h4{
    color:#a65f31 !important;
}
  /* شاشة تحميل محياك */

#muhayyak-preloader{
    position:fixed;
    inset:0;
    z-index:9999999;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f7f1ec;
    opacity:1;
    visibility:visible;
    transition:opacity .6s ease,visibility .6s ease;
}

#muhayyak-preloader.is-hidden{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

#muhayyak-preloader img{
    width:140px;
    max-width:45vw;
    height:auto;
    object-fit:contain;
    animation:muhayyakLogoMotion 1.4s ease-in-out infinite;
}

@keyframes muhayyakLogoMotion{
    0%,100%{
        transform:translateY(0) scale(1);
        opacity:.75;
    }

    50%{
        transform:translateY(-8px) scale(1.07);
        opacity:1;
    }
/* الجوال */

@media(max-width:767px){
    #muhayyak-preloader img{
        width:105px;
    }
  <span class="s-button-text">
  <i class="text-base sicon-shopping-bag"></i>
  <span>إضافة للسلة</span>
</span>
  /* ===== CATEGORIES ===== */

.s-block.s-block--banners .grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    margin: 0 4px !important;
    padding: 0 !important;
}

.s-block.s-block--banners .grid .banner-entry {
    width: 100% !important;
    min-height: 250px !important;
    padding: 4.5rem !important;
    margin: 0 !important;
    background-color: transparent !important;
    border-radius: 0 !important;
}

/* صورة القسم */
.s-block.s-block--banners .grid .banner-entry .lazy__bg {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}


/* ===== الجوال ===== */

@media (max-width: 575px) {

    .s-block.s-block--banners .grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        margin: 0 3px !important;
        padding: 0 !important;
    }

    .s-block.s-block--banners .grid .banner-entry {
        min-height: 210px !important;
        padding: 3.5rem !important;
    }
}


/* ===== اللابتوب ===== */

@media (min-width: 576px) {

    .s-block.s-block--banners .grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
        margin: 0 5px !important;
    }

    .s-block.s-block--banners .grid .banner-entry {
        min-height: 300px !important;
        padding: 5rem !important;
    }
}