.woocommerce-loop-category__title, .woocommerce-loop-product__title {
	line-height: 1.2em;
}

mark.count {background-color: transparent !important; } 

.woocommerce .quantity input.qty {
	width: 10em;
}


.woocommerce-message  h3, .woocommerce-message th {
	color: #fff !important; 
} 


#tab-description h2 {display: none;}

.single-product #sidebar,
.single-product .et_right_sidebar {
  display: none !important;
}

.single-product #left-area {
  width: 100% !important;
  float: none !important;
}
.single-product #main-content .container::before,
.single-product #main-content .container::after,
.single-product #main-content .container .et_pb_row::before,
.single-product #main-content .container .et_pb_row::after {
  display: none !important;
  border: none !important;
}

.single-product #main-content .container {
  border: none !important;
}

/* ========================================================= */
/* 1. AGGRESSIVE PARENT CONTAINER FIX (Equal Height Rows)    */
/* ========================================================= */

/* Target the main wrapper holding the product grid */
.woocommerce ul.products {
    display: flex; 
    flex-wrap: wrap; 
    align-items: stretch; /* CRUCIAL: Stretches all items in the row to the tallest item's height */
    margin: 0 -15px !important; 
}

/* Product Card Structure and Styling */
.woocommerce ul.products li.product {
    width: calc(25% - 30px) !important; 
    margin: 0 15px 30px 15px !important; 
    
    display: flex;
    flex-direction: column;
    padding: 15px;
    background-color: #ffffff;
    border: 1px solid #201b52;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(32, 27, 80, 0.5);
    text-align: center;
}



/* ========================================================= */
/* 2. IMAGE HEIGHT FIX (Prevents Layout Shift)               */
/* ========================================================= */

/* Create a fixed-height box for the image to sit in */
.woocommerce ul.products li.product .et_shop_image {
    flex-shrink: 0;
    margin-bottom: 15px;
    height: 200px; /* <--- CRITICAL: Set a fixed max-height for the image container */
    width: 100%;
    display: flex; /* Use flex to center the image within the box */
    align-items: center; /* Vertically center the image */
    justify-content: center; /* Horizontally center the image */
    overflow: hidden; /* Ensures images don't spill out of the fixed height box */
}

/* Ensure the image inside scales correctly without cropping */
.woocommerce ul.products li.product .et_shop_image img {
    max-height: 100%; /* Image height respects the 200px container */
    width: auto; /* Image width adjusts automatically */
    max-width: 100%; /* Ensures wide images don't break the container */
    object-fit: contain; /* Prevents cropping, maintains aspect ratio */
}

/* ========================================================= */
/* 3. TITLE & PRICE BLOCK ALIGNMENT                          */
/* ========================================================= */

/* Define a dedicated container for the title and price block */
.woocommerce ul.products li.product > h2 {
    /* Title and Price share this reserved space */
    min-height: 5em; /* CRITICAL: Increased height reservation for titles (e.g., up to 4 lines) */
    display: flex; 
    flex-direction: column; 
    flex-grow: 1; /* Allow this block to expand to fill available height */
    justify-content: flex-start; /* Keep title/price content starting at the top */
    align-items: center; 
    padding: 0 0 5px 0;
    margin: 0 !important;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
}

/* Ensure the price is positioned consistently */
.woocommerce ul.products li.product > .price {
    font-size: 18px;
    font-weight: bold;
    color: #444444;
    padding: 5px 0 10px 0;
    margin: 0 !important;
}

/* ========================================================= */
/* 4. BUTTON ALIGNMENT & STYLING                             */
/* ========================================================= */

.woocommerce ul.products li.product .button,  {
    margin-top: auto; /* Pushes the button to the bottom of the card */
    align-self: center; 
    background-color: #387cbf; 
    color: #ffffff;
    border: none;
    border-radius: 3px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
}
.woocommerce ul.products li.product .button:hover {
    background-color: #1a5c9b; 
}

.woocommerce a.button.alt::after, .woocommerce-page a.button.alt::after, .woocommerce button.button.alt::after, .woocommerce-page button.button.alt::after, .woocommerce input.button.alt::after, .woocommerce-page input.button.alt::after, .woocommerce #respond input#submit.alt::after, .woocommerce-page #respond input#submit.alt::after, .woocommerce #content input.button.alt::after, .woocommerce-page #content input.button.alt::after, .woocommerce a.button::after, .woocommerce-page a.button::after, .woocommerce button.button:not(.button-confirm)::after, .woocommerce-page button.button:not(.button-confirm)::after, .woocommerce input.button::after, .woocommerce-page input.button::after, .woocommerce #respond input#submit::after, .woocommerce-page #respond input#submit::after, .woocommerce #content input.button::after, .woocommerce-page #content input.button::after, .woocommerce a.button::before, .woocommerce-page a.button::before, .woocommerce button.button::before, .woocommerce-page button.button::before, .woocommerce input.button::before, .woocommerce-page input.button::before, .woocommerce #respond input#submit::before, .woocommerce-page #respond input#submit::before, .woocommerce #content input.button::before, .woocommerce-page #content input.button::before {
	 content: "" !important; 
}


/* 6a. Target the custom form to push it to the bottom and align its contents */
.woocommerce ul.products li.product form.cart {
margin-top: auto; 
display: flex;
flex-direction: column;
align-items: center; /* Centers elements horizontally (qty box and button) */
width: 100%;
padding-top: 15px; 

}

/* 6b. Style the quantity input container  */
.woocommerce ul.products li.product form.cart .quantity {
margin-bottom: 10px; 
width: 100%;
max-width: 150px; 
}

/* 6c. Ensure the quantity input field itself uses the available width and is centered /
/ This overrides the .woocommerce .quantity input.qty rule above to enforce centering */
.woocommerce ul.products li.product form.cart .quantity .qty {
text-align: center;
width: 100%;
}

/* 6d. Ensure the button is centered within the form / */
.woocommerce ul.products li.product form.cart button.single_add_to_cart_button {
width: 100%;
max-width: 200px; 
}


/* ========================================================= */
/* 5. RESPONSIVE ADJUSTMENTS                                 */
/* ========================================================= */

/* Tablet (2 columns) */
@media only screen and (min-width: 768px) and (max-width: 980px) {
    .woocommerce ul.products li.product {
        width: calc(50% - 30px) !important;
    }
}

/* Mobile (1 column) */
@media only screen and (max-width: 767px) {
    .woocommerce ul.products li.product {
        width: 100% !important;
        margin: 15px 0 !important;
        border: none;
        box-shadow: none;
        border-bottom: 1px solid #eeeeee;
    }
    .woocommerce ul.products li.product > h2 {
        min-height: auto; /* Auto height on mobile */
    }
    .woocommerce ul.products li.product .et_shop_image {
        height: 150px; /* Smaller image box on mobile */
    }
}