/* Add custom CSS styles below */ 
/* استهداف سكشن البراندات فقط */
.s-block--logos-slider .grid {
    grid-template-columns: repeat(6, 1fr) !important;
    grid-template-rows: repeat(2, auto) !important;
    gap: 16px !important;
}

/* إزالة الـ row span اللي عاملة لخبطة */
.s-block--logos-slider .brand-item {
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;

    display: flex;
    align-items: center;
    justify-content: center;
}

/* إلغاء تأثير الأحجام الكبيرة */
.s-block--logos-slider .brand-item.sm\:row-span-2 {
    grid-row: auto !important;
}

/* شكل اللوجو */
.s-block--logos-slider .brand-item img {
    max-height: 60px;
    width: auto;
    object-fit: contain;
    transition: 0.3s ease;
}

/* hover بسيط */
.s-block--logos-slider .brand-item:hover img {
    transform: scale(1.05);
}

/* موبايل */
@media (max-width: 768px) {
    .s-block--logos-slider .grid {
        grid-template-columns: repeat(3, 1fr) !important;
        grid-template-rows: auto !important;
    }

    .s-block--logos-slider .brand-item img {
        max-height: 45px;
    }
}

/*------------------------*/

/* استهداف قسم البانرات المخصص */
.sand-banners .flex-col.md\:flex-row {
    display: grid !important;
    grid-template-columns: 1fr; /* كارد واحد في الصف للموبايل */
    gap: 1.5rem !important;
}

@media (min-width: 768px) {
    .sand-banners .flex-col.md\:flex-row {
        grid-template-columns: 1fr 1fr; /* كاردين بجانب بعض للتابلت والكمبيوتر */
    }
}

/* ضبط أبعاد وحجم الكارد والصورة */
.sand-banners .flex-1.md\:flex-2 {
    height: auto !important; /* إلغاء الـ 60vh الثابتة */
    aspect-ratio: 4 / 3 !important; /* تحديد أبعاد متناسقة للموبايل */
}

@media (min-width: 768px) {
    .sand-banners .flex-1.md\:flex-2 {
        aspect-ratio: 3 / 2 !important; /* أبعاد أعرض ومناسبة للشاشات الكبيرة */
    }
}

/* التأكد من أن الصورة تغطي الكارد بالكامل وتأخذ حركة الـ Hover بسلاسة */
.sand-banners .absolute.inset-0.bg-cover {
    background-size: cover !important;
    background-position: center !important;
    width: 100% !important;
    height: 100% !important;
}

/* ضبط استجابة النصوص والأزرار داخل الكارد للشاشات الصغيرة */
@media (max-width: 767px) {
    .sand-banners .relative.z-10.w-1\/2 {
        width: 100% !important; /* جعل المحتوى يأخذ مساحة أفضل على الموبايل */
    }
    
    .sand-banners a.bg-\[var\(--bg-color\)\] {
        padding: 0.75rem 1rem !important; /* تصغير حجم زر التسوق قليلاً ليناسب الموبايل */
        font-size: 0.875rem !important;
    }
}

/*-----------------*/
.sand-feature .grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

@media (min-width: 768px){
    .sand-feature .grid{
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 1024px){
    .sand-feature .grid{
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        max-width: 100% !important;
    }
}


/* استهداف حاوية المحتوى النصي داخل الكارد */
.sand-banners .relative.z-10 {
    align-items: flex-start !important; /* محاذاة العناصر للبداية */
    width: 100% !important; /* إعطاء مساحة كاملة للمحتوى للتحكم في مكان الزر */
}

/* تحسين شكل الزر ونقله إلى الشمال */
.sand-banners a.bg-\[var\(--bg-color\)\] {
    margin-right: auto !important; /* نقل الزر إلى أقصى اليسار */
    margin-left: 0 !important;
    
    /* تحسينات التصميم (الشكل الجديد) */
    padding: 12px 28px !important; /* زيادة العرض ليعطي مظهر براند فخم */
    font-size: 14px !important;
    letter-spacing: 0.5px !important;
    border-radius: 50px !important; /* جعل الزر دائري الحواف (Pill shape) بدلاً من الحواف الحادة */
    text-transform: uppercase !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important; /* إضافة ظل خفيف ناعم يعطي عمق للزر */
    
    /* حركة الأنيميشن عند الـ Hover على الزر نفسه */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; 
}

/* تأثير حركة أنيق عند الوقوف بالماوس على الزر */
.sand-banners a.bg-\[var\(--bg-color\)\]:hover {
    transform: translateY(-3px) !important; /* يرتفع الزر للأعلى قليلاً بحركة سلسة */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important; /* يزداد الظل عمقاً */
}

/* ضبط استجابة المقاسات للموبايل لضمان عدم خروج الزر */
@media (max-width: 767px) {
    .sand-banners a.bg-\[var\(--bg-color\)\] {
        padding: 10px 20px !important; /* مقاس أصغر قليلاً متناسق مع شاشة الهاتف */
        font-size: 13px !important;
    }
}
  
/*------------------------*/
 /* تصغير الكارد */
.sand-feature .grid > div{
    padding: 12px !important;
}

/* تصغير مساحة الأيقونة */
.sand-feature div[class*="h-\\[20vh\\]"]{
    height: 80px !important;
    min-height: 80px !important;
    margin-bottom: 10px !important;
}

/* تصغير الصورة */
.sand-feature img{
    max-width: 55px !important;
    max-height: 55px !important;
    width: 55px !important;
    height: 55px !important;
}

/* العنوان */
.sand-feature h3{
    font-size: 16px !important;
    line-height: 1.4 !important;
    margin-bottom: 6px !important;
}

/* الوصف */
.sand-feature p{
    font-size: 13px !important;
    line-height: 1.5 !important;
}
/*-----------------------*/
/* ==========================================
   PRODUCT CARD
========================================== */

/* ==========================================
   PRODUCT CARD
========================================== */

/* الكارد */
custom-salla-product-card{
    display:flex !important;
    flex-direction:column !important;
    height:100% !important;
    padding:10px !important;
    box-sizing:border-box !important;
    background:#fff !important;
}

/* الصورة */
custom-salla-product-card .s-product-card-image{
    background:transparent !important;
    padding:0 !important;
    margin-bottom:12px !important;
}

custom-salla-product-card .s-product-card-image img{
    width:100% !important;
    height:190px !important;
    object-fit:contain !important;
    background:#fff !important;
    transition:.3s;
}

custom-salla-product-card:hover .s-product-card-image img{
    transform:scale(1.03);
}

/* المحتوى */
custom-salla-product-card .s-product-card-content{
    display:flex;
    flex-direction:column;
    flex:1;
    padding:0 12px 12px !important;
}

/* العنوان */

custom-salla-product-card .s-product-card-content-title{
    margin:0 0 8px !important;
}

custom-salla-product-card .s-product-card-content-title a{
    display:-webkit-box !important;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;

    font-size:16px !important;
    line-height:1.5 !important;
    text-decoration:none;
}

/* الوصف */

custom-salla-product-card .s-product-card-content-subtitle{

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;

    margin:0 0 10px !important;
    font-size:14px !important;
    line-height:1.6 !important;
}

/* السعر */

custom-salla-product-card .s-product-card-content-sub{
    margin-top:auto !important;
}

custom-salla-product-card .s-product-card-price{
    margin-top:8px !important;
    font-size:18px !important;
    font-weight:700 !important;
}

/* زر إضافة للسلة */

.s-product-card-content-footer{
    margin-top:12px !important;
}

.s-product-card-content-footer .s-button-element,
.s-product-card-content-footer .s-button-btn{
    border-radius:50px !important;
    height:44px !important;
    font-size:14px !important;
}

/* ==========================================
   MOBILE
========================================== */

@media (max-width:767px){

    custom-salla-product-card{
        padding:6px !important;
    }

   

    custom-salla-product-card .s-product-card-content{
        padding:0 8px 8px !important;
    }

    custom-salla-product-card .s-product-card-content-title a{
        font-size:12px !important;
        line-height:1.35 !important;
    }

    custom-salla-product-card .s-product-card-content-subtitle{
        font-size:11px !important;
        line-height:1.4 !important;
        margin-bottom:6px !important;
    }

    custom-salla-product-card .s-product-card-price{
        font-size:16px !important;
    }

    .s-product-card-content-footer{
        margin-top:8px !important;
    }

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

}


/*--------------------*/
/*---------------------*/