/* 1. Make product card and summary wrapper full-height flex columns */
.woocommerce ul.products li.product .astra-shop-summary-wrap {
    display: flex;
    flex-direction: column;
    height: calc(100% - 300px); /* Or use flex-grow: 1 if li.product is display: flex */
    flex-grow: 1;
}

.woocommerce ul.products li.product {
    display: flex;
    flex-direction: column;
    padding-bottom: 30px;
}

/* 2. Category at top */
.woocommerce ul.products li.product .astra-shop-summary-wrap .ast-woo-product-category {
    order: 1;
}

/* 3. Product Title Link - fixed height so 2-line and 3-line titles align */
.woocommerce ul.products li.product .astra-shop-summary-wrap .ast-loop-product__link {
    order: 2;
    display: block;
    min-height: 54px;
    margin-bottom: 6px;
}

/* 4. Override the existing .review-rating CSS */
.woocommerce ul.products li.product .astra-shop-summary-wrap .review-rating {
    display: flex;
    align-items: center;
    order: 3 !important; /* Fixes the old order: 2 bug that pushed ratings below the button */
    min-height: 24px;
    margin-bottom: 8px;
}

/* Reserve the exact same 32px rating space when a product has no .review-rating div */
.woocommerce ul.products li.product .astra-shop-summary-wrap .ast-loop-product__link + .price {
    margin-top: 32px;
}

/* 5. Price block - equal height across all cards */
.woocommerce ul.products li.product .astra-shop-summary-wrap .price {
    order: 4;
    display: block;
    min-height: 50px;
    margin-bottom: 15px;
}

/* 6. Button pinned horizontally equal at the very bottom */
.woocommerce ul.products li.product .astra-shop-summary-wrap a.button {
    order: 5;
    margin-top: auto !important;
    margin-bottom: 0;
    align-self: flex-start;
}