.product-image-container {
    position: relative;
}

.product-card img.product-image {
    object-fit: contain; /* Ensures whole product image is visible, scaled to fit */
    width: 100%;
    height: 100%;
}
.product-image-container .badge-image {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 60px;
    height: 60px;
    object-fit: contain;
    z-index: 10;
}
.clamp-2-lines {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2; /* Standard property (non-functional in many browsers but good to declare) */
    overflow: hidden;
    text-overflow: ellipsis;
	min-height: 3rem;
}

.clamp-5-lines {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    line-clamp: 5; /* Standard */
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    min-height: 6.4rem;
}

.product-card .card {
    min-height: 22rem; /* Accommodate ID and price layout */
}
.pagination-sm .page-link {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}
.input-group .clear-search {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 10;
    display: none; /* Hidden by default */
    color: #6c757d; /* Bootstrap secondary color */
}
.input-group .clear-search:hover {
    color: #000;
}
.input-group input.form-control {
    padding-right: 30px; /* Space for the icon */
}
.list-unstyled li {
    margin-bottom: 0.25rem; /* Consistent spacing between price lines */
}