/* =========================================================
   متجر أبو عبدالله للأعشاب والزيوت الطبيعية
   ثيم رائد - CSS موحّد ومنظّف
   النسخة: 5.0
   ملاحظة: استبدل جميع أكواد CSS القديمة بهذا الملف فقط.
========================================================= */

/* =========================================================
   1) الهوية العامة
========================================================= */

:root {
  --abd-green: #234f3f;
  --abd-green-dark: #183b2f;
  --abd-green-light: #557a5e;
  --abd-olive: #748263;
  --abd-beige: #f5f1e8;
  --abd-cream: #fcfbf7;
  --abd-brown: #795c3e;
  --abd-text: #292d2a;
  --abd-muted: #707770;
  --abd-border: #e6e4dd;
  --abd-white: #ffffff;

  --abd-radius-sm: 10px;
  --abd-radius: 16px;
  --abd-radius-lg: 24px;

  --abd-shadow: 0 8px 28px rgba(35, 79, 63, 0.08);
  --abd-shadow-hover: 0 14px 35px rgba(35, 79, 63, 0.14);
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--abd-cream) !important;
  color: var(--abd-text);
}

main {
  overflow-x: hidden;
}

.container {
  max-width: 1280px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--abd-text);
  font-weight: 700;
}

p {
  line-height: 1.9;
}

a {
  transition:
    color 0.25s ease,
    opacity 0.25s ease,
    transform 0.25s ease;
}

a:hover {
  color: var(--abd-green);
}


/* =========================================================
   2) الهيدر والتنقل
========================================================= */

header,
.main-nav-container,
.navbar {
  background: rgba(255, 255, 255, 0.98);
}

header {
  border-bottom: 1px solid rgba(35, 79, 63, 0.08);
}

.main-nav-container {
  background: rgba(255, 255, 255, 0.98) !important;
  border-bottom: 1px solid rgba(35, 79, 63, 0.08) !important;
  box-shadow: 0 3px 16px rgba(0, 0, 0, 0.035) !important;
}

header nav a,
.main-menu a,
.navbar a,
.main-nav-container a {
  color: var(--abd-text) !important;
  font-weight: 600;
}

header nav a:hover,
.main-menu a:hover,
.navbar a:hover,
.main-nav-container a:hover {
  color: var(--abd-green) !important;
}

header button,
header .btn,
header salla-cart-summary {
  transition:
    transform 0.25s ease,
    background 0.25s ease;
}

header button:hover {
  transform: translateY(-2px);
}

.top-navbar {
  background: var(--abd-green) !important;
  color: #fff !important;
}

.top-navbar a {
  color: rgba(255, 255, 255, 0.88) !important;
}

.top-navbar a:hover {
  color: #fff !important;
}


/* =========================================================
   3) البحث والحقول
========================================================= */

input[type="search"],
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  border-radius: 14px !important;
  border: 1px solid var(--abd-border) !important;
  background: #fff !important;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--abd-green-light) !important;
  box-shadow: 0 0 0 3px rgba(85, 122, 94, 0.12) !important;
  outline: none !important;
}

.header-search input,
.top-navbar input[type="search"] {
  border: 0 !important;
  border-radius: 13px !important;
  background: #fff !important;
}


/* =========================================================
   4) الأزرار العامة
========================================================= */

button,
.btn,
.button,
salla-button button {
  border-radius: 12px;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

.btn-primary,
button.btn-primary,
salla-button[fill="solid"] button {
  background: var(--abd-green) !important;
  border-color: var(--abd-green) !important;
  color: #fff !important;
}

.btn-primary:hover,
button.btn-primary:hover,
salla-button[fill="solid"] button:hover {
  background: var(--abd-green-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(35, 79, 63, 0.20);
}


/* =========================================================
   5) الأقسام والعناوين
========================================================= */

section {
  position: relative;
}

section + section {
  margin-top: 10px;
}

.s-block {
  margin-top: 35px !important;
  margin-bottom: 35px !important;
}

.s-block__title {
  margin-bottom: 20px !important;
}

.section-title,
.s-block__title,
section h2 {
  position: relative;
}

.s-block__title h2,
.section-title h2 {
  color: var(--abd-green) !important;
  font-size: 26px !important;
  font-weight: 800 !important;
}

.s-block__title h2::after,
.section-title h2::after {
  content: "";
  display: block;
  width: 45px;
  height: 3px;
  margin-top: 9px;
  border-radius: 10px;
  background: var(--abd-olive);
}


/* =========================================================
   6) الصور والبنرات
========================================================= */

img {
  max-width: 100%;
}

.banner,
.banner img,
.swiper img {
  border-radius: var(--abd-radius);
}

.s-block--photos-slider,
.s-block--photos-slider .swiper {
  overflow: hidden !important;
}

.s-block--photos-slider img {
  display: block !important;
  width: 100% !important;
}


/* =========================================================
   7) بطاقات المنتجات - الشكل العام
========================================================= */

salla-product-card {
  display: block;
  overflow: hidden;
  border-radius: var(--abd-radius) !important;
  transition:
    transform 0.30s ease,
    box-shadow 0.30s ease;
}

.product-entry,
.product-card,
.s-product-card-entry {
  position: relative;
  overflow: hidden !important;
  background: #fff !important;
  border: 1px solid rgba(35, 79, 63, 0.10) !important;
  border-radius: 18px !important;
  box-shadow: 0 6px 22px rgba(35, 79, 63, 0.07) !important;
  transition:
    transform 0.30s ease,
    box-shadow 0.30s ease !important;
}

salla-product-card:hover,
.product-entry:hover,
.product-card:hover,
.s-product-card-entry:hover {
  transform: translateY(-4px);
  box-shadow: var(--abd-shadow-hover) !important;
}

.s-product-card-image {
  position: relative !important;
  overflow: hidden !important;
  background: #f7f4ec !important;
}

.product-entry img,
.product-card img,
.s-product-card-entry img,
.s-product-card-image img {
  transition: transform 0.40s ease !important;
}

.product-entry:hover img,
.product-card:hover img,
.s-product-card-entry:hover img {
  transform: scale(1.035);
}

.product-entry h3,
.product-card h3,
.s-product-card-entry h3,
.s-product-card-content-title,
.s-product-card-content-main h3,
.s-product-card-content-main a {
  color: var(--abd-text) !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
}

.product-entry .price,
.product-card .price,
.s-product-card-entry .price,
salla-product-card .price,
.s-product-card-price,
.s-product-card-sale-price,
.s-product-card-content-sub {
  color: var(--abd-green) !important;
  font-weight: 800 !important;
}

.product-entry button,
.product-card button,
.s-product-card-entry button {
  border-radius: 11px !important;
}


/* =========================================================
   8) قائمة المنتجات - 4 أعمدة ودون الشكل الأفقي
========================================================= */

salla-products-list .s-products-list-wrapper {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 20px !important;
  align-items: stretch !important;
}

salla-products-list salla-product-card {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 100% !important;
}

salla-products-list .s-product-card-entry {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

salla-products-list .s-product-card-image {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  flex: none !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
}

salla-products-list .s-product-card-image a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

salla-products-list .s-product-card-image img {
  display: block !important;
  position: static !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  transform: none;
}

salla-products-list .s-product-card-entry:hover .s-product-card-image img {
  transform: scale(1.035) !important;
}

salla-products-list .s-product-card-content {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 155px !important;
  padding: 15px !important;
  background: #fff !important;
}

salla-products-list .s-product-card-content-main {
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 0 8px !important;
}

salla-products-list .s-product-card-content-title,
salla-products-list .s-product-card-content-main h3,
salla-products-list .s-product-card-content-main a {
  margin: 0 !important;
  font-size: 15px !important;
}

salla-products-list .s-product-card-price,
salla-products-list .s-product-card-sale-price,
salla-products-list .s-product-card-content-sub {
  font-size: 16px !important;
}


/* =========================================================
   9) أسفل بطاقة المنتج وزر السلة
========================================================= */

.s-product-card-content-footer {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  gap: 8px !important;
  margin-top: auto !important;
  padding-top: 12px !important;
  border-top: 1px solid #eeeae2 !important;
}

.s-product-card-content-footer > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.s-product-card-content-footer .s-button-element,
.s-product-card-content-footer button {
  min-height: 42px !important;
  border-radius: 10px !important;
  border-color: var(--abd-green) !important;
  background: var(--abd-green) !important;
  color: #fff !important;
}

.s-product-card-content-footer .s-button-element:hover,
.s-product-card-content-footer button:hover {
  background: var(--abd-green-dark) !important;
}


/* =========================================================
   10) المفضلة - إصلاح القلب في الرئيسية وصفحة المنتجات
========================================================= */

/*
   مهم:
   لا نجعل زر القلب position:static بشكل عام.
   زر صفحة المنتجات يكون فوق الصورة،
   وزر بعض بطاقات الرئيسية يكون بجانب زر السلة.
*/

/* توحيد حجم المضيف نفسه */
.s-product-card-wishlist-btn,
salla-button.s-product-card-wishlist-btn {
  box-sizing: border-box !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

/* توسيط العنصر الداخلي */
.s-product-card-wishlist-btn .s-button-element,
.s-product-card-wishlist-btn button,
salla-button.s-product-card-wishlist-btn .s-button-element,
salla-button.s-product-card-wishlist-btn button {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  border-radius: 10px !important;
}

/* توسيط الأيقونة نفسها */
.s-product-card-wishlist-btn i,
.s-product-card-wishlist-btn svg,
.s-product-card-wishlist-btn salla-icon,
salla-button.s-product-card-wishlist-btn i,
salla-button.s-product-card-wishlist-btn svg,
salla-button.s-product-card-wishlist-btn salla-icon {
  display: block !important;
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  transform: none !important;
}

/* القلب الموجود بجانب زر أضف للسلة في الرئيسية */
.s-product-card-content-footer .s-product-card-wishlist-btn,
.s-product-card-content-footer salla-button.s-product-card-wishlist-btn {
  position: static !important;
  inset: auto !important;
  flex: 0 0 40px !important;
  align-self: center !important;
  background: var(--abd-green) !important;
  color: #fff !important;
  border: 1px solid var(--abd-green) !important;
  border-radius: 10px !important;
}

.s-product-card-content-footer .s-product-card-wishlist-btn .s-button-element,
.s-product-card-content-footer salla-button.s-product-card-wishlist-btn .s-button-element,
.s-product-card-content-footer .s-product-card-wishlist-btn button,
.s-product-card-content-footer salla-button.s-product-card-wishlist-btn button {
  background: var(--abd-green) !important;
  color: #fff !important;
  border-color: var(--abd-green) !important;
}

/* القلب الذي يظهر فوق صورة المنتج في صفحة المنتجات */
.s-product-card-image .s-product-card-wishlist-btn,
.s-product-card-image salla-button.s-product-card-wishlist-btn {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 5 !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: var(--abd-green) !important;
  border: 1px solid rgba(35, 79, 63, 0.20) !important;
  border-radius: 10px !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08) !important;
}

.s-product-card-image .s-product-card-wishlist-btn .s-button-element,
.s-product-card-image salla-button.s-product-card-wishlist-btn .s-button-element,
.s-product-card-image .s-product-card-wishlist-btn button,
.s-product-card-image salla-button.s-product-card-wishlist-btn button {
  background: rgba(255, 255, 255, 0.92) !important;
  color: var(--abd-green) !important;
  border-color: transparent !important;
}

/* بعض إصدارات سلة تضع زر القلب مباشرة داخل البطاقة كعنصر absolute */
.s-product-card-entry > .s-product-card-wishlist-btn,
.s-product-card-entry > salla-button.s-product-card-wishlist-btn {
  top: 10px !important;
  left: 10px !important;
  right: auto !important;
  z-index: 5 !important;
}


/* =========================================================
   11) عناصر المحتوى والمميزات
========================================================= */

.card,
.content-box,
.feature-item {
  border: 1px solid rgba(35, 79, 63, 0.08);
  border-radius: var(--abd-radius);
  background: #fff;
}

.features,
.store-features {
  background: var(--abd-beige);
}

.features .feature-item,
.store-features .feature-item {
  padding: 20px;
  border-radius: var(--abd-radius);
  background: #fff;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.035);
}


/* =========================================================
   12) آراء العملاء
========================================================= */

.testimonial,
.testimonials .item,
.review-card {
  border: 1px solid rgba(35, 79, 63, 0.08);
  border-radius: var(--abd-radius-lg);
  background: #fff;
  box-shadow: var(--abd-shadow);
}


/* =========================================================
   13) Breadcrumb وصفحة المنتج
========================================================= */

.breadcrumb,
salla-breadcrumb {
  color: var(--abd-muted);
}

.product-single,
.product-details {
  background: #fff;
}

.product-details h1,
.product-single h1 {
  color: var(--abd-green);
}

.product-details .price,
.product-single .price {
  color: var(--abd-green);
  font-weight: 800;
}


/* =========================================================
   14) الفوتر
========================================================= */

footer,
.store-footer {
  background: var(--abd-green) !important;
  color: rgba(255, 255, 255, 0.88) !important;
}

footer h2,
footer h3,
footer h4,
.store-footer h2,
.store-footer h3,
.store-footer h4 {
  color: #fff !important;
}

footer a,
.store-footer a {
  color: rgba(255, 255, 255, 0.82) !important;
}

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


/* =========================================================
   15) تفاصيل صغيرة
========================================================= */

::selection {
  background: var(--abd-green);
  color: #fff;
}

::-webkit-scrollbar {
  width: 9px;
}

::-webkit-scrollbar-track {
  background: #f1efe9;
}

::-webkit-scrollbar-thumb {
  border-radius: 20px;
  background: var(--abd-green-light);
}


/* =========================================================
   16) تابلت
========================================================= */

@media (max-width: 1100px) {
  salla-products-list .s-products-list-wrapper {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}


/* =========================================================
   17) الجوال
========================================================= */

@media (max-width: 768px) {
  :root {
    --abd-radius: 13px;
    --abd-radius-lg: 18px;
  }

  body {
    font-size: 14px;
  }

  .container {
    padding-left: 14px;
    padding-right: 14px;
  }

  .s-block {
    margin-top: 22px !important;
    margin-bottom: 22px !important;
  }

  .s-block__title h2,
  .section-title h2 {
    font-size: 20px !important;
  }

  .s-block--photos-slider img {
    border-radius: 0 !important;
  }

  .main-nav-container {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04) !important;
  }

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

  salla-products-list .s-products-list-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  salla-products-list .s-product-card-entry {
    min-height: 0 !important;
    height: 100% !important;
    border-radius: 14px !important;
  }

  salla-products-list .s-product-card-image {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
  }

  salla-products-list .s-product-card-image img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
  }

  salla-products-list .s-product-card-content {
    min-height: 145px !important;
    height: auto !important;
    padding: 11px !important;
  }

  salla-products-list .s-product-card-content-main {
    min-height: 0 !important;
    margin-bottom: 7px !important;
  }

  salla-products-list .s-product-card-content-title,
  salla-products-list .s-product-card-content-main h3,
  salla-products-list .s-product-card-content-main a {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  salla-products-list .s-product-card-price,
  salla-products-list .s-product-card-sale-price {
    font-size: 14px !important;
  }

  .s-product-card-content-footer {
    gap: 6px !important;
    padding-top: 10px !important;
  }

  .s-product-card-content-footer .s-button-element,
  .s-product-card-content-footer button {
    min-height: 38px !important;
    font-size: 12px !important;
  }

  .s-product-card-wishlist-btn,
  salla-button.s-product-card-wishlist-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
  }

  .s-product-card-content-footer .s-product-card-wishlist-btn,
  .s-product-card-content-footer salla-button.s-product-card-wishlist-btn {
    flex-basis: 38px !important;
  }

  .s-product-card-image .s-product-card-wishlist-btn,
  .s-product-card-image salla-button.s-product-card-wishlist-btn,
  .s-product-card-entry > .s-product-card-wishlist-btn,
  .s-product-card-entry > salla-button.s-product-card-wishlist-btn {
    top: 8px !important;
    left: 8px !important;
  }

  .features .feature-item,
  .store-features .feature-item {
    padding: 15px;
  }
}


/* =========================================================
   18) الشاشات الصغيرة جداً
========================================================= */

@media (max-width: 480px) {
  .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  salla-products-list .s-products-list-wrapper {
    gap: 10px !important;
  }

  salla-products-list .s-product-card-content {
    padding: 10px !important;
  }
}

@media (max-width: 380px) {
  salla-products-list .s-products-list-wrapper {
    gap: 9px !important;
  }
}
/* خلفية شريط الهيدر الرئيسي فقط */
.main-nav-container {
  background: #f5f1e8 !important;
}
/* خلفية شريط الهيدر الرئيسي */
.main-nav-container {
  background: #f5f1e8 !important;
}

/* خلفية الفوتر */
/* =========================================
   الفوتر بالكامل - نفس لون الهيدر
========================================= */
/* =========================================
   الفوتر - علوي أخضر داكن / سفلي بيج
========================================= */

/* =========================================
   الفوتر - علوي بيج / سفلي أخضر داكن
========================================= */

/* الجزء الرئيسي الكبير من الفوتر */
.store-footer__inner,
.store-footer .store-footer__inner,
footer .store-footer__inner {
  background: #f5f1e8 !important;
  color: #292d2a !important;
}

/* عناوين الفوتر العلوي */
.store-footer__inner h2,
.store-footer__inner h3,
.store-footer__inner h4 {
  color: #234f3f !important;
}

/* نصوص الفوتر العلوي */
.store-footer__inner p,
.store-footer__inner span {
  color: #292d2a !important;
}

/* روابط الفوتر العلوي */
.store-footer__inner a {
  color: #234f3f !important;
  font-weight: 600 !important;
}

.store-footer__inner a:hover {
  color: #183b2f !important;
}


/* الشريط السفلي */
.store-footer,
footer.store-footer {
  background: #234f3f !important;
  color: #ffffff !important;
}

/* النصوص داخل الشريط السفلي */
.store-footer > * {
  color: #ffffff !important;
}

/* الروابط داخل الشريط السفلي */
.store-footer > a {
  color: #ffffff !important;
}

.store-footer > a:hover {
  color: #f5f1e8 !important;
}

/* نصوص إضافية داخل الشريط السفلي */
.store-footer .copyright,
.store-footer .footer-bottom,
.store-footer .footer-bottom *,
.store-footer .copyright * {
  color: #ffffff !important;
}
/* Abu Abdullah CSS v5 - 17 Sep 2026 */