/* Add custom CSS styles below */ 
/* ==========================================================================
   متجر سمت النخبة - Simt Al-Nukhba | UI Brands Enhancer CSS
   الصفحة: https://simtnukhba.com/brands
   تأثيرات وتحسينات الـ UI لبروز الشعار واسم العلامة تحت كل شعار
   ========================================================================== */
/* 1. تنسيق شبكة العلامات التجارية (Brands Grid Container) */
.brands-page,
.s-brands-page,
.s-brands-wrapper,
[class*="brands-grid"],
[class*="brands-list"],
.brands-container {
  padding: 30px 15px !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
}
/* في حال كانت الشبكة غير محددة بالعرض التلقائي */
.brands-page .grid,
.s-brands-grid,
.brands-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap: 24px !important;
  align-items: stretch !important;
}
/* 2. بطاقة العلامة التجارية (Brand Card Item) */
salla-brand-card,
.s-brand-card,
.brand-item,
.brands-item,
.brand-card,
a[href*="/brands/"],
a[href*="/brand/"] {
  background: #ffffff !important;
  border: 1px solid rgba(0, 73, 86, 0.12) !important;
  border-radius: 16px !important;
  padding: 24px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
  text-decoration: none !important;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
  min-height: 170px !important;
}
/* الخلفية واللمسة الذهبية عند التحويم (Hover Effect) */
salla-brand-card:hover,
.s-brand-card:hover,
.brand-item:hover,
.brands-item:hover,
.brand-card:hover,
a[href*="/brands/"]:hover,
a[href*="/brand/"]:hover {
  transform: translateY(-6px) !important;
  border-color: #C5A059 !important;
  box-shadow: 0 12px 28px rgba(0, 73, 86, 0.12), 0 0 0 1px #C5A059 !important;
  background: linear-gradient(180deg, #ffffff 0%, #F9FBFB 100%) !important;
}
/* شريط زخرفي ذهبي سفلي عند التحويم */
salla-brand-card::after,
.s-brand-card::after,
.brand-item::after,
.brand-card::after,
a[href*="/brands/"]::after,
a[href*="/brand/"]::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) scaleX(0) !important;
  width: 60% !important;
  height: 3px !important;
  background: linear-gradient(90deg, #004956, #C5A059, #004956) !important;
  border-radius: 3px 3px 0 0 !important;
  transition: transform 0.35s ease !important;
}
salla-brand-card:hover::after,
.s-brand-card:hover::after,
.brand-item:hover::after,
.brand-card:hover::after,
a[href*="/brands/"]:hover::after,
a[href*="/brand/"]:hover::after {
  transform: translateX(-50%) scaleX(1) !important;
}
/* 3. حاوية الشعار (Brand Logo Image Container) */
.brand-item img,
.brand-card img,
.s-brand-card img,
salla-brand-card img,
a[href*="/brands/"] img,
a[href*="/brand/"] img {
  max-height: 75px !important;
  max-width: 130px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.05)) !important;
  transition: transform 0.35s ease, filter 0.35s ease !important;
  margin-bottom: 12px !important;
  display: block !important;
}
/* تكبير وتحديد الشعار عند مرور الماوس */
salla-brand-card:hover img,
.s-brand-card:hover img,
.brand-item:hover img,
.brand-card:hover img,
a[href*="/brands/"]:hover img,
a[href*="/brand/"]:hover img {
  transform: scale(1.08) !important;
  filter: drop-shadow(0 4px 10px rgba(0, 73, 86, 0.15)) !important;
}
/* 4. اسم العلامة التجارية تحت الشعار (Brand Title / Name Styling) */
.sn-brand-title,
.s-brand-card-title,
.brand-title,
.brand-name,
salla-brand-card h3,
salla-brand-card span:not(.sn-ignore) {
  display: block !important;
  margin-top: 10px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #004956 !important;
  text-align: center !important;
  font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, sans-serif !important;
  line-height: 1.4 !important;
  transition: color 0.3s ease !important;
  letter-spacing: 0.2px !important;
  word-break: break-word !important;
}
/* تغيير لون الاسم إلى الذهبي عند التحويم */
salla-brand-card:hover .sn-brand-title,
salla-brand-card:hover .brand-title,
salla-brand-card:hover h3,
.s-brand-card:hover .sn-brand-title,
.brand-item:hover .sn-brand-title,
.brand-card:hover .sn-brand-title,
a[href*="/brands/"]:hover .sn-brand-title,
a[href*="/brand/"]:hover .sn-brand-title {
  color: #C5A059 !important;
}
/* 5. تحسينات التجاوب مع الجوال (Mobile Responsiveness) */
@media (max-width: 640px) {
  .brands-page .grid,
  .s-brands-grid,
  .brands-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    gap: 14px !important;
  }
  
  salla-brand-card,
  .s-brand-card,
  .brand-item,
  .brand-card,
  a[href*="/brands/"],
  a[href*="/brand/"] {
    padding: 16px 10px !important;
    min-height: 140px !important;
    border-radius: 12px !important;
  }
  
  .brand-item img,
  .brand-card img,
  a[href*="/brands/"] img,
  a[href*="/brand/"] img {
    max-height: 55px !important;
    max-width: 100px !important;
    margin-bottom: 8px !important;
  }
  
  .sn-brand-title,
  .s-brand-card-title,
  .brand-title {
    font-size: 13px !important;
  }
}