/* Add custom CSS styles below */

/* =========================
}
/* =========================
   هيدر احترافي والشعار يمين
========================= */

.main-nav-container {
  position: relative !important;
  min-height: 76px !important;
  background-color: rgba(255, 255, 255, 0.97) !important;
  border-bottom: 1px solid #e8e1d6 !important;
  box-shadow: 0 5px 22px rgba(28, 27, 25, 0.05) !important;
}

.main-nav-container .container,
.main-nav-container .inner {
  position: relative !important;
  min-height: 76px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* الشعار في جهة اليمين */
.navbar-brand {
  position: absolute !important;
  top: 40% !important;
  right: 32px !important;
  left: auto !important;
  transform: translateY(-50%) !important;

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

  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 20;
}

/* حجم الشعار */
.navbar-brand img {
  display: block !important;
  width: auto !important;
  height: 66px !important;
  max-width: 220px !important;
  max-height: 66px !important;
  object-fit: contain !important;
}

/* تأثير بسيط */
@media (hover: hover) {
  .navbar-brand img {
    transition: transform 0.3s ease, opacity 0.3s ease !important;
  }

  .navbar-brand:hover img {
    transform: scale(1.025);
    opacity: 0.92;
  }
}
.h-\[85vh\] {
  height: 70vh;
}
.from-\[\#F7F5F2\] {
  --tw-gradient-from: #413229 var(--tw-gradient-from-position);
}


/* الجوال */
@media (max-width: 767px) {
  .main-nav-container,
  .main-nav-container .container,
  .main-nav-container .inner {
    min-height: 62px !important;
  }

  .main-nav-container .container,
  .main-nav-container .inner {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  .navbar-brand {
    top: 40% !important;
    right: 32px !important;
    left: auto !important;
    transform: translateY(-50%) !important;
  }

  .navbar-brand img {
    height: 70px !important;
    max-width: 170px !important;
    max-height: 70px !important;
  }
}

/* الجوال الصغير */
@media (max-width: 380px) {
  .navbar-brand img {
    height: 47px !important;
    max-width: 145px !important;
    max-height: 70px !important;
  }
}



/* =========================
   أقسام اللوحات
========================= */

.canvas-categories-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.canvas-categories-grid a {
  overflow: visible !important;
  aspect-ratio: auto !important;
  -webkit-tap-highlight-color: transparent !important;
}

.canvas-categories-grid a > img {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  overflow: hidden;
  border-radius: 12px;
  transition: transform 0.45s ease !important;
}

/* اسم القسم أسفل الصورة */
.canvas-categories-grid a > div:last-child {
  position: static !important;
  margin-top: 8px;
  text-align: center;
}

/* إزالة طبقة التعتيم */
.canvas-categories-grid a > .absolute.inset-0 {
  display: none !important;
  background: transparent !important;
  opacity: 0 !important;
}

/* تأثير الزوم */
.canvas-categories-grid a:hover > img {
  transform: scale(1.06) !important;
}

/* منع الزوم المعلق في الجوال */
@media (hover: none) {
  .canvas-categories-grid a:active > img {
    transform: scale(1.03) !important;
  }
}

/* إزالة الخلفية السوداء الشفافة */
.bg-black\/20 {
  background-color: transparent !important;
}

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

.s-product-card-content {
  background-color: #eddfd8;
}


/* إظهار زر إضافة للسلة الموجود تحت السعر على جميع الشاشات */
custom-salla-product-card
.s-product-card-content
.s-product-card-add-to-cart-mobile {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin-top: 12px !important;
}

/* جعل عناصر سلة بعرض كامل */
custom-salla-product-card
.s-product-card-add-to-cart-mobile salla-add-product-button,
custom-salla-product-card
.s-product-card-add-to-cart-mobile salla-add-product-button > div,
custom-salla-product-card
.s-product-card-add-to-cart-mobile salla-button {
    display: block !important;
    width: 100% !important;
}

.s-product-card-entry .s-product-card-content {
padding-bottom: 0px !important;
}

/* تصميم الزر */
custom-salla-product-card
.s-product-card-add-to-cart-mobile .s-button-element {
    display: flex !important;
    width: 100% !important;
    min-height: 42px !important;

    align-items: center !important;
    justify-content: center !important;

    background-color: #d5b592 !important;
    color: #ffffff !important;

    border: none !important;
    outline: none !important;
    box-shadow: none !important;

    border-radius: 8px !important;
}

/* لون النص */
custom-salla-product-card
.s-product-card-add-to-cart-mobile .s-button-text {
    color: #ffffff !important;
}

/* Hover */
custom-salla-product-card
.s-product-card-add-to-cart-mobile .s-button-element:hover {
    background-color: #38271F !important;
    color: #ffffff !important;
}

/* إخفاء الزر الآخر الموجود فوق الصورة */
custom-salla-product-card .s-product-card-content-footer {
    display: none !important;
}
.canvas-store-footer .canvas-footer-wave-shape svg {
  display: block;
  height: 80px;
  position: relative;
  width: calc(100% + 40px);
}
.canvas-store-footer .canvas-store-footer__inner {
  background: #3E3029 !important;
}
.canvas-store-footer .canvas-footer-wave-shape svg path {
  fill: #3E3029 !important;
}
.store-footer a {
  justify-content: center;
}

/* إخفاء وثيقة العمل الحر */
img[src="https://cdn.salla.network/images/freelance.png"],
img[src*="/images/freelance.png"],
a:has(img[src*="/images/freelance.png"]) {
  display: none !important;
}