.elementor-821 .elementor-element.elementor-element-e776b2c.elementor-wc-products ul.products li.product{text-align:center;}.elementor-821 .elementor-element.elementor-element-e776b2c{width:100%;max-width:100%;}.elementor-821 .elementor-element.elementor-element-e776b2c.elementor-wc-products  ul.products{grid-column-gap:0px;grid-row-gap:100px;}.elementor-821 .elementor-element.elementor-element-e776b2c.elementor-wc-products .attachment-woocommerce_thumbnail{border-style:solid;}.elementor-821 .elementor-element.elementor-element-e776b2c.elementor-wc-products ul.products li.product span.onsale{display:block;}@media(max-width:1024px){.elementor-821 .elementor-element.elementor-element-e776b2c.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}}@media(max-width:767px){.elementor-821 .elementor-element.elementor-element-e776b2c.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}}/* Start custom CSS for woocommerce-products, class: .elementor-element-e776b2c *//* WooCommerce Product Grid Fix */
.woocommerce ul.products li.product a img {
    height: 250px !important; /* Image ki height fix karega */
    object-fit: contain !important; /* Image ko crop hone se bachayega */
    width: 100% !important;
    background-color: #fff; /* Agar image choti hai to background white rahega */
    padding: 10px; /* Thoda space dega */
    margin-bottom: 15px;
    border: 1px solid #eee; /* Optional: Border lagane ke liye */
}

/* Title aur Price ko align karne ke liye */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    min-height: 50px; /* Title ke liye jagah fix karega */
    font-size: 16px;
    line-height: 1.3;
}




/* 1. Product Card ko 'Box' look dena */
.woocommerce ul.products li.product {
    background-color: #ffffff; /* White background */
    border: 1px solid #f0f0f0; /* Halka border */
    border-radius: 12px; /* Soft rounded corners */
    padding: 15px; /* Andar thoda space */
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* Soft Shadow */
    transition: all 0.3s ease; /* Smooth animation ke liye */
    overflow: hidden; /* Content bahar na jaye */
}

/* 2. Hover Effect (Mouse le jaane par design change) */
.woocommerce ul.products li.product:hover {
    transform: translateY(-5px); /* Card thoda hawa me uthega */
    box-shadow: 0 15px 30px rgba(0,0,0,0.1); /* Shadow gehra hoga */
    border-color: #007bff; /* Optional: Border color change (Theme color use karein) */
}

/* 3. Image Styling */
.woocommerce ul.products li.product a img {
    height: 220px !important; /* Height fix */
    object-fit: contain !important; 
    margin-bottom: 15px;
    mix-blend-mode: multiply; /* Agar image ka background white nahi hai to blend karega */
}

/* 4. Title Styling - Text ko limit aur clean karna */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 15px !important;
    font-weight: 600; /* Thoda bold */
    color: #2c3e50; /* Dark grey color */
    line-height: 1.4;
    padding: 0 5px;
    
    /* Lambe titles ko 3 lines me limit krne ka magic code */
    display: -webkit-box;
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 63px; /* Fixed height taki sab boxes barabar dikhe */
}

/* 5. Price Styling - Price ko highlight karna */
.woocommerce ul.products li.product .price {
    color: #000; /* Price ka color dark black */
    font-weight: 700;
    font-size: 17px !important;
    margin-top: 10px;
    display: block;
}

/* 6. Buttons (Agar theme me button hai to usko style karna) */
.woocommerce ul.products li.product .button {
    background-color: #007bff; /* Blue button */
    color: white !important;
    border-radius: 50px;
    padding: 8px 20px;
    font-size: 13px;
    margin-top: 10px;
}/* End custom CSS */