.elementor-821 .elementor-element.elementor-element-8e96523{--display:flex;}.elementor-821 .elementor-element.elementor-element-0de3705{--display:flex;}/* Start custom CSS for container, class: .elementor-element-0de3705 *//* =========================================
   🚨 EMERGENCY TITLE FIX (FORCE SHOW)
========================================= */

/* 1. Har Tarah ke Title Selectors ko Target karna */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3,
.woocommerce ul.products li.product .product-title,
.woocommerce ul.products li.product a h2 {
    display: block !important;       /* Chupa hai toh dikhao */
    visibility: visible !important;  /* Invisible hai toh visible karo */
    opacity: 1 !important;           /* Transparent hai toh solid karo */
    color: #000000 !important;       /* Safed hai toh KALA (Black) karo */
    font-family: 'Jost', sans-serif !important;
    font-size: 15px !important;      /* Size fix */
    font-weight: 700 !important;
    line-height: 1.4 !important;
    margin-top: 10px !important;
    margin-bottom: 5px !important;
    text-decoration: none !important;
    z-index: 999 !important;         /* Sabse upar rakho */
    position: relative !important;   /* Position fix */
    background: transparent !important; /* Background saaf rakho */
    height: auto !important;         /* Height restriction hatao */
    width: 100% !important;
}

/* 2. Agar Title Link (<a>) ke andar hai */
.woocommerce ul.products li.product a {
    text-decoration: none !important;
    color: #000 !important; /* Link ka color bhi Black */
}

/* 3. Debugging (Agar ab bhi na dikhe) */
/* Title ke peeche halka peela rang lagayega taaki pata chale box kahan hai */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    background-color: #fff !important; /* White Background */
    color: #1a1a1a !important; /* Dark Text */
}/* End custom CSS */
/* Start custom CSS *//* =========================================

   🚀 FINAL FIXED: UNIFORM GRID & ALIGNMENT

   Targeting: Woostify Theme Structure

========================================= */



/* 1. GRID CONTAINER (Desktop) */

.woocommerce ul.products {

    display: grid !important;

    grid-template-columns: repeat(4, 1fr) !important; /* 4 Columns Desktop */

    gap: 20px !important;

    margin: 0 !important;

    padding: 0 !important;

}



/* Floats clear karein */

.woocommerce ul.products::before, 

.woocommerce ul.products::after { display: none !important; }



/* 2. CARD WRAPPER (Sabse Important) */

.woocommerce ul.products li.product {

    float: none !important;

    width: auto !important;

    margin: 0 !important;

    background: #fff !important;

    border-radius: 15px !important;

    box-shadow: 0 6px 15px rgba(0,0,0,0.05) !important;

    border: 1px solid rgba(0,0,0,0.05) !important;

    padding: 15px !important;

    height: 100% !important; /* Card ko stretch karega */

    display: flex !important;

    flex-direction: column !important;

}



/* Theme ka inner wrapper fix karein */

.woocommerce ul.products li.product .product-loop-wrapper {

    display: flex !important;

    flex-direction: column !important;

    height: 100% !important;

    width: 100% !important;

}



/* 3. IMAGE SECTION (Puri Image Dikhegi) */

.woocommerce ul.products li.product .product-loop-image-wrapper {

    height: 180px !important; /* Fix Height for Image Area */

    width: 100% !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    margin-bottom: 15px !important;

    background: #fff !important; /* White background taaki logo saaf dikhe */

    overflow: hidden !important;

}



.woocommerce ul.products li.product .product-loop-image-wrapper a {

    display: block;

    width: 100%;

    height: 100%;

}



.woocommerce ul.products li.product img {

    max-height: 100% !important;

    max-width: 100% !important;

    height: auto !important;

    width: auto !important;

    object-fit: contain !important; /* MAGIC: Image puri dikhegi, kategi nahi */

    margin: 0 auto !important;

}



/* 4. CONTENT AREA (Flexbox se Button neeche jayega) */

.woocommerce ul.products li.product .product-loop-content {

    display: flex !important;

    flex-direction: column !important;

    flex-grow: 1 !important; /* Bachi hui jagah lega */

    justify-content: space-between !important;

    padding: 0 !important;

}



/* 5. TITLE FIX (2 Lines Only) */

.woocommerce ul.products li.product .woocommerce-loop-product__title,

.woocommerce ul.products li.product h2 {

    font-family: 'Jost', sans-serif !important;

    font-size: 16px !important;

    font-weight: 700 !important;

    color: #1a1a1a !important;

    line-height: 1.4 !important;

    margin-bottom: 10px !important;

    min-height: 45px !important; /* Title ke liye fixed jagah */

    

    /* 2 lines limit */

    display: -webkit-box !important;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

    text-overflow: ellipsis;

}



/* 6. PRICE STYLE */

.woocommerce ul.products li.product .price {

    color: #f2295b !important;

    font-weight: 800 !important;

    font-size: 15px !important;

    margin-bottom: 15px !important;

    display: block !important;

}



/* 7. BUTTON (Bottom Aligned) */

.woocommerce ul.products li.product .loop-add-to-cart-btn,

.woocommerce ul.products li.product .button {

    margin-top: auto !important; /* Button ko bottom mein dhakelta hai */

    width: 100% !important;

    background: linear-gradient(135deg, #f2295b 0%, #ff5e62 100%) !important;

    color: #fff !important;

    border-radius: 50px !important;

    padding: 10px 0 !important;

    font-weight: 600 !important;

    text-align: center !important;

    border: none !important;

    display: block !important;

    line-height: 1.5 !important;

}



/* =========================================

   📱 MOBILE OPTIMIZATION (Strict 2 Columns)

========================================= */

@media (max-width: 768px) {

    /* Container Styling */

    .custom-featured-products .woocommerce,

    .all-products-grid .woocommerce,

    .woocommerce ul.products {

        display: grid !important;

        grid-template-columns: repeat(2, 1fr) !important; /* 2 Equal Columns */

        gap: 10px !important; /* Thoda gap */

        padding: 0 5px !important;

        box-sizing: border-box !important;

    }



    /* Card Styling Mobile */

    .woocommerce ul.products li.product {

        padding: 10px !important;

        width: 100% !important; /* Grid cell ko fill karega */

        height: auto !important;

        min-height: 280px !important; /* Minimum height taaki barabar lage */

    }



    /* Image Height Mobile - Chota kiya taaki "Lamba" na dikhe */

    .woocommerce ul.products li.product .product-loop-image-wrapper {

        height: 110px !important; 

        margin-bottom: 10px !important;

    }



    /* Title Font Size Mobile */

    .woocommerce ul.products li.product .woocommerce-loop-product__title {

        font-size: 13px !important;

        min-height: 36px !important; /* Alignment maintain */

        margin-bottom: 5px !important;

    }



    /* Price Font Size */

    .woocommerce ul.products li.product .price {

        font-size: 13px !important;

        margin-bottom: 8px !important;

    }



    /* Button Padding Mobile */

    .woocommerce ul.products li.product .loop-add-to-cart-btn {

        padding: 6px 0 !important;

        font-size: 12px !important;

    }

}/* End custom CSS */