/* ==============================================
   1. توحيد تخطيط العرض (3 أعمدة للكل)
   ============================================== */

/* --- القائمة الثابتة (Grid) --- */
.s-products-list-wrapper.s-products-list-vertical-cards {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* 3 أعمدة */
    gap: 8px !important; /* مسافة صغيرة لتناسب 3 أعمدة في الجوال */
}

/* --- السلايدر (Slider) - إجبار الشرائح لتكون بحجم الثلث --- */
section#best-offers-2-slider .swiper-slide {
    width: 32% !important; /* تقريباً الثلث لإظهار 3 منتجات */
    margin-left: 1.3% !important; /* مسافة بسيطة بين الشرائح */
}

section#best-offers-2-slider custom-salla-product-card {
    width: 100% !important;
    max-width: 100% !important;
}

.s-cart-summary-count {
    background-color: rgb(103 12 22);
}
#variant-inventory {
  display: none !important;
}

/* ==============================================
   2. تصميم البطاقة الموحد (لجميع المنتجات)
   ============================================== */

custom-salla-product-card.product-card {
    border: none !important;
    background-color: #ffffff;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    overflow: hidden;
    margin: 0 !important;
    height: 100%; /* لضمان تساوي الارتفاع */
}


/* ==============================================
   3. تنسيق الصور (طولية وموحدة)
   ============================================== */

.product-card__image {
    position: relative;
    overflow: hidden;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 2/3 !important; /* نسبة طولية مثالية للعبايات */
    border-radius: 8px 8px 0 0 !important;
}

/* إلغاء أي تحديد ارتفاع قديم قد يسبب التضارب */
.product-card--fit-height .product-card__image {
    height: auto !important;
    max-height: none !important;
}

.product-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    transition: transform 0.5s ease !important;
}



/* ==============================================
   4. المحتوى والنصوص (مضغوطة)
   ============================================== */

.product-card__content {
    padding: 8px 4px !important;
    text-align: center;
}


/* إخفاء الوصف الفرعي لتوفير المساحة */
.product-card__subtitle {
    display: none !important;
}

/* السعر */
.product-card__price {
    margin-top: 0 !important;
    gap: 4px !important;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.product-card__price .total-price {
    font-size: 13px !important;
    font-weight: 800;
    color: var(--color-primary);
}

.product-card__price .before-price {
    font-size: 10px !important;
    color: #999;
}

/* ==============================================
   5. الأزرار والشارات (مصغرة)
   ============================================== */
@media (max-width: 991px) {
    .product-card.product-card--enhanced-btn:not(.product-card--simplified) .product-card__content {
        padding: 0px 0 0 !important;
    }
}
/* شارة الخصم */
.product-card__promotion {
    top: 5px !important;
    right: 5px !important;
    font-size: 9px !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
    background-color: #670c164a !important; 

}

/* أزرار المفضلة */
.product-card__actions {
    top: 5px !important;
    left: 5px !important;
}

.product-card__actions .s-button-element {
    width: 26px !important;
    height: 26px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border-radius: 50% !important;
}

.product-card__actions .s-button-icon {
    font-size: 14px !important;
}

/* زر الإضافة للسلة (مدمج في الأسفل) */
.product-card__enhanced-mini-cart {
    padding: 0 4px 6px 4px !important;
    background: transparent !important;
    position: relative !important;
    opacity: 1 !important;
    transform: none !important;
}

.product-card__enhnaced-mini-cart__btn button {
    height: 30px !important;
    border-radius: 4px !important;
    background-color: #222 !important;
    color: #fff !important;
    border: none !important;
    font-size: 11px !important;
    width: 100% !important;
}

.product-card__enhnaced-mini-cart__btn button:hover {
    background-color: var(--color-primary) !important;
}

.product-card__enhanced-mini-cart-divider {
    display: none !important;
}

/* ==============================================
   6. تحسينات الجوال (تأكيد 3 أعمدة)
   ============================================== */
@media (max-width: 768px) {
    /* تأكيد الشبكة 3 أعمدة في الجوال */
    .s-products-list-wrapper.s-products-list-vertical-cards {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important; /* مسافة أضيق للجوال */
    }

    /* تأكيد السلايدر 3 أعمدة في الجوال */
    section#best-offers-2-slider .swiper-slide {
        width: 32% !important;
    }
    
    /* تصغير إضافي للنصوص في الجوال لضمان عدم تداخلها */
    .product-card__title a {
        font-size: 12px !important;
    }
    
    .product-card__price .total-price {
        font-size: 12px !important;
    }

    .product-card__enhnaced-mini-cart__btn button {
        font-size: 10px !important;
        height: 28px !important;
    }
}