:root {
  --rukn-green: #0f5f46;
  --rukn-green-dark: #073f31;
  --rukn-green-light: #2f8a63;
  --rukn-gold: #d8b45c;
  --rukn-gold-light: #f4df9d;
  --rukn-gold-dark: #9e762b;
  --rukn-white: #ffffff;
  --rukn-soft: #f6faf8;
  --rukn-text: #15382e;
  --rukn-muted: #6b756f;
}

/* =====================================================
   1 — بطاقات المنتجات
===================================================== */

salla-product-card {
  display: block !important;
  height: 100% !important;
}

custom-salla-product-card,
.s-product-card-entry,
.product-card,
.product-entry {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  overflow: hidden !important;

  background: linear-gradient(
    145deg,
    #ffffff 0%,
    #ffffff 68%,
    #f3f7f5 100%
  ) !important;

  border: 2px solid var(--rukn-gold) !important;
  border-radius: 22px !important;

  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.95),
    inset 0 -4px 8px rgba(7,63,49,.07),
    0 3px 0 var(--rukn-gold-dark),
    0 9px 18px rgba(7,63,49,.16) !important;
}

.s-product-card-entry::before,
.product-card::before,
.product-entry::before {
  content: "" !important;
  position: absolute !important;
  inset: 6px !important;
  z-index: 0 !important;
  pointer-events: none !important;
  border: 1px solid rgba(244,223,157,.9) !important;
  border-radius: 16px !important;
}

.s-product-card-entry > *,
.product-card > *,
.product-entry > * {
  position: relative !important;
  z-index: 1 !important;
}

.s-product-card-content,
.product-card-content,
.product-entry .content {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-height: 0 !important;
  padding: 12px 10px 9px !important;

  background: linear-gradient(
    180deg,
    #ffffff,
    #f7faf8
  ) !important;

  text-align: center !important;
}


/* =====================================================
   2 — زر إضافة للسلة
===================================================== */

salla-product-card salla-add-product-button,
.s-product-card-entry salla-add-product-button,
.product-card salla-add-product-button,
.product-entry salla-add-product-button {
  display: block !important;
  width: 100% !important;
  margin-top: auto !important;
  padding: 0 9px 10px !important;
  background: transparent !important;
}

salla-product-card salla-add-product-button button,
.s-product-card-entry salla-add-product-button button,
.product-card salla-add-product-button button,
.product-entry salla-add-product-button button,
.s-product-card-entry .s-button-primary,
.btn--add-to-cart,
.add-to-cart {
  position: relative !important;
  display: flex !important;
  width: 100% !important;
  min-height: 50px !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 10px 14px !important;

  color: #fff8dc !important;

  background: linear-gradient(
    180deg,
    #3a9a70 0%,
    #1b7657 42%,
    #0f5f46 60%,
    #073f31 100%
  ) !important;

  border: 2px solid var(--rukn-gold) !important;
  border-radius: 17px !important;

  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.28),
    inset 0 -5px 0 rgba(0,0,0,.18),
    0 3px 0 var(--rukn-gold-dark),
    0 8px 16px rgba(7,63,49,.30) !important;

  font-size: 14px !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.38) !important;
}


/* =====================================================
   3 — اسم المنتج
===================================================== */

.product-card :is(
  .product-title,
  .product-name,
  .product-card-title,
  .product-card__title,
  h2,
  h3,
  h4
) > a,
.product-card a.product-title,
.product-card a.product-name,
.product-card a.product-card-title,
.product-card a.product-card__title {
  display: block !important;
  width: calc(100% - 20px) !important;
  margin: 8px auto 5px !important;
  padding: 4px 8px !important;

  background: #d9ad55 !important;
  border: 1px solid #b68b37 !important;
  border-radius: 6px !important;

  color: #ffffff !important;
  text-align: center !important;
  text-decoration: none !important;
  font-weight: 700 !important;

  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
  filter: none !important;
}


/* =====================================================
   4 — السعر
===================================================== */

.s-product-card-price,
.s-product-card-sale-price,
.price-wrapper,
.product-price,
.product-card .price {
  display: table !important;
  margin: 6px auto 10px !important;
  padding: 4px 6px !important;

  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #fff7e4 100%
  ) !important;

  border: 2px solid var(--rukn-gold) !important;
  border-radius: 30px !important;

  box-shadow:
    inset 0 1px 0 #ffffff,
    0 3px 0 var(--rukn-gold-dark),
    0 7px 14px rgba(7,63,49,.10) !important;

  color: var(--rukn-green) !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1.4 !important;
  text-align: center !important;
}

/* =====================================================
   7 — صفحة تفاصيل المنتج
===================================================== */

.product-page,
.product-single,
.product-details,
.s-product-page {
  background: linear-gradient(
    180deg,
    #ffffff,
    #f7faf8
  ) !important;
}

.product-slider,
.product-gallery,
.s-product-images,
.product-entry__image,
.product-single .swiper {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;

  background: #ffffff !important;
  border: 2px solid var(--rukn-gold) !important;
  border-radius: 24px !important;

  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.95),
    0 3px 0 var(--rukn-gold-dark),
    0 10px 22px rgba(7,63,49,.16) !important;
}

.product-slider .swiper-wrapper,
.product-gallery .swiper-wrapper,
.s-product-images .swiper-wrapper,
.product-single .swiper-wrapper,
.product-slider .swiper-slide,
.product-gallery .swiper-slide,
.s-product-images .swiper-slide,
.product-single .swiper-slide {
  height: auto !important;
  min-height: 0 !important;
}

.product-slider img,
.product-gallery img,
.s-product-images img,
.product-entry__image img,
.product-single .swiper img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #ffffff !important;
}


/* =====================================================
   8 — الصور المصغرة
===================================================== */

.product-thumbs,
.s-product-images-thumbs,
.swiper-thumbs,
.thumbnail-slider {
  height: auto !important;
  min-height: 0 !important;
  margin-top: 12px !important;
  padding: 8px !important;

  background: #ffffff !important;
  border: 2px solid var(--rukn-gold) !important;
  border-radius: 18px !important;

  box-shadow:
    0 3px 0 var(--rukn-gold-dark),
    0 8px 16px rgba(7,63,49,.12) !important;
}


/* =====================================================
   9 — كمية المنتج
===================================================== */

salla-quantity-input,
.quantity-input,
.product-quantity,
.s-quantity-input-container {
  overflow: hidden !important;
  background: #ffffff !important;
  border: 2px solid var(--rukn-gold) !important;
  border-radius: 18px !important;

  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.95),
    0 3px 0 var(--rukn-gold-dark),
    0 7px 16px rgba(7,63,49,.14) !important;
}


/* =====================================================
   10 — زر السلة في صفحة المنتج
===================================================== */

.product-single salla-add-product-button button,
.product-page salla-add-product-button button,
.product-details salla-add-product-button button,
.s-product-page salla-add-product-button button,
.product-form .s-button-primary,
.product-form .add-to-cart {
  min-height: 58px !important;
  color: #fff8dc !important;

  background: linear-gradient(
    180deg,
    #3a9a70 0%,
    #1b7657 42%,
    #0f5f46 60%,
    #073f31 100%
  ) !important;

  border: 2px solid var(--rukn-gold) !important;
  border-radius: 18px !important;

  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.28),
    inset 0 -5px 0 rgba(0,0,0,.18),
    0 3px 0 var(--rukn-gold-dark),
    0 9px 18px rgba(7,63,49,.30) !important;

  font-size: 17px !important;
  font-weight: 900 !important;
}


/* =====================================================
   11 — زر الشراء الآن
===================================================== */

.product-single .buy-now,
.product-page .buy-now,
.product-details .buy-now,
.s-product-page .buy-now,
.product-form .s-button-outline,
.product-form [class*="buy-now"],
button[class*="buy-now"] {
  min-height: 58px !important;
  color: var(--rukn-green-dark) !important;

  background: linear-gradient(
    180deg,
    #ffffff,
    #f0f6f3
  ) !important;

  border: 2px solid var(--rukn-gold) !important;
  border-radius: 18px !important;

  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.95),
    0 3px 0 var(--rukn-gold-dark),
    0 8px 16px rgba(7,63,49,.14) !important;

  font-size: 16px !important;
  font-weight: 900 !important;
}

/* البنرات — عرض كامل بدون تصغير أو قص */
.s-block--fixed-banner,
.s-block--fixed-banner > div {
  width: 100% !important;
  max-width: 100% !important;
}

.s-block--fixed-banner img,
img[alt="Banner"] {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 auto !important;
}

/* =====================================================
   13 — الروابط الدائرية
   نفس القسم الذي حدده PageSpeed
===================================================== */

.s-block--circle-links {
  width: 100% !important;
  box-sizing: border-box !important;
}

.s-block--circle-links img {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;

  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
}

.s-block--circle-links .swiper-slide,
.s-block--circle-links a {
  box-sizing: border-box !important;
}


/* =====================================================
   14 — تثبيت الشعار
===================================================== */

img.logo-normal {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  object-fit: contain !important;
}


/* =====================================================
   15 — تحسين الجوال
===================================================== */

@media (max-width: 767px) {

  .s-product-card-entry,
  .product-card,
  .product-entry {
    transition: none !important;
  }

  .s-product-card-entry:hover,
  .product-card:hover,
  .product-entry:hover {
    transform: none !important;
  }
}