/* =========================================================
   CUSTOM THEME CSS
   ========================================================= */


/* =========================================================
   CAIRO FONT
   ========================================================= */

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
span,
div,
li,
input,
textarea,
button,
select,
label {
    font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif !important;
}


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

.product-card,
.product-item,
.product {
    box-sizing: border-box;
}


/* =========================================================
   PRODUCT IMAGE CONTAINER
   ========================================================= */

.product-image {
    width: 100% !important;

    /* مساحة الصورة */
    height: 300px !important;
    min-height: 300px !important;

    /* مهم جداً لمنع قص الصورة */
    overflow: visible !important;

    /* توسيط الصورة */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* الخلفية */
    background: #f4f6f8 !important;

    /* مسافة حول الصورة */
    padding: 10px !important;

    box-sizing: border-box !important;
}


/* =========================================================
   PRODUCT IMAGE
   ========================================================= */

.product-image img {
    /* لا نجبر الصورة على ملء العرض */
    width: auto !important;

    /* لا نجبرها على ارتفاع معين */
    height: auto !important;

    /* أقصى حجم للصورة */
    max-width: 100% !important;
    max-height: 280px !important;

    /* إظهار الصورة كاملة */
    object-fit: contain !important;

    /* توسيط الصورة */
    object-position: center center !important;

    display: block !important;

    margin: auto !important;

    /* منع أي قص */
    overflow: visible !important;
}


/* =========================================================
   CARD - PREVENT IMAGE CROPPING
   ========================================================= */

.product-card,
.product-item,
.card {
    overflow: visible !important;
}


/* =========================================================
   PRODUCT TITLE
   ========================================================= */

.product-card h3,
.product-card h4,
.product-item h3,
.product-item h4 {
    font-family: 'Cairo', sans-serif !important;

    text-align: center;

    margin-top: 10px;
}


/* =========================================================
   PRODUCT BUTTON
   ========================================================= */

.product-card a,
.product-card button,
.product-item a,
.product-item button {
    font-family: 'Cairo', sans-serif !important;
}


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

@media (max-width: 768px) {

    .product-image {
        height: 250px !important;
        min-height: 250px !important;

        padding: 8px !important;
    }

    .product-image img {
        max-width: 100% !important;
        max-height: 230px !important;
    }

}


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

@media (max-width: 480px) {

    .product-image {
        height: 220px !important;
        min-height: 220px !important;

        padding: 5px !important;
    }

    .product-image img {
        max-width: 100% !important;
        max-height: 205px !important;
    }

}


/* =========================================================
   EXTRA PROTECTION AGAINST CROPPING
   ========================================================= */

.product-image,
.product-image a,
.product-image picture {
    overflow: visible !important;
}

.product-image img {
    clip-path: none !important;
    transform: none !important;
}


/* =========================================================
   RTL SUPPORT
   ========================================================= */

html[dir="rtl"],
body {
    direction: rtl;
}


/* =========================================================
   GENERAL TEXT
   ========================================================= */

button,
input,
textarea,
select {
    font-family: 'Cairo', sans-serif !important;
}


/* =========================================================
   SMOOTH IMAGE
   ========================================================= */

.product-image img {
    transition: transform 0.3s ease;
}


/* =========================================================
   OPTIONAL HOVER
   ========================================================= */

.product-image:hover img {
    transform: scale(1.02);
}