@media (min-width: 768px) and (max-width: 991.98px) {
    .col-md-3 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

/* At min-width 992px: 4 per row */
@media (min-width: 992px) {
    .col-md-3 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }
}
.product {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers content horizontally */
    justify-content: flex-start; /* Centers content vertically (you can also adjust this) */
}

.product header {
    text-align: center; /* Centers the text inside the header */
    width: 100%; /* Ensure the header takes the full width */
}
.product-desc .price small {
    font-size: 60% !important;
    /* color: #6c757d !important; Bootstrap's default muted color */
    /* display: block !important; */
    font-weight: 500 !important;
    /* font-style: italic !important;*/
    margin-top: 4px !important;
}
.product-pricing .price {
    font-family: "Kiwi Maru", serif;
    font-weight: bold; /* Regular weight, change if you want bold */
    color: #000; /* Or any other color you prefer */
    font-size: 1.1rem;
}
.product-desc {
    display: flex;
    flex-direction: column; /* Stack content vertically */
    justify-content: flex-start; /* Align content to the top */
    gap: 8px; /* Adjust the space between lines/content */
}
/* Adjust the highlights-section and its content */
.highlights-section {
    margin-bottom: 15px;  /* Adjust the margin between highlights and other sections */
    display: flex;
    justify-content: left;
    align-items: left;
    flex-direction: column;  /* Align vertically */
    gap: 5px;  /* Space between the product names */
}

.highlights-section span {
    font-size: 16px;  /* Uniform font size */
    font-weight: 450;  /*Optional: Make the product names bold */
    text-align: left; /* Center-align the text */
}

/* Optional: Ensure uniform spacing for product description */
.product-desc {
    line-height: 1.5;  /* Keep line-height in check to prevent unwanted spacing */
}

/* Add a custom class to handle space in the description */
#{$idPrefix}-description {
    margin-bottom: 10px;  /* Adjust space between description and other elements */
}
.footnote {
    text-align: right !important;
    font-size: 16px; /* Adjust the font size as needed */
    color: #777; /* Optional: Change the color to a lighter shade for the footnote */
    margin-top: 10px; /* Optional: Add some spacing above the footnote */
}
#order-standard_cart .products .product div.product-pricing span.price.discount {
    font-size: 0.9rem !important; /* Adjust as needed */
    color: red; /* Ensure it's the right color for the strikethrough */
    text-decoration: line-through;
}

#order-standard_cart .products .product div.product-pricing span.price.percent {
    font-size: 0.9rem; /* Adjust as needed */
    color: #333; /* Adjust the color of the discount percentage */
    /*font-weight:; /* Optional: make the percentage bolder */
}
.img-wrapper {
    position: relative;
    display: inline-block;
}
.star-overlay {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 50px;
    color: gold;
}