/* CSS Fixes for Herbaura */

/* Fix for text disappearing on button hover */
.btn:hover {
    position: relative;
    z-index: 1;
}

.btn.theme-btn:hover {
    color: var(--color-white) !important;
}

.btn.black-btn:hover {
    color: var(--color-white) !important;
}

.btn.more-btn:hover {
    color: var(--color-white) !important;
}

.btn.add-to-cart:hover {
    color: var(--color-white) !important;
    background: var(--theme-color) !important;
    position: relative;
    z-index: 2;
}

.btn.white-btn:hover {
    color: var(--theme-color) !important;
}

/* Fix for button pseudo-elements */
.btn::before {
    z-index: -1 !important;
}

/* Fix for product images with different sizes */
.item-card .item-image {
    position: relative;
    overflow: hidden;
    height: 250px; /* Fixed height for all product images */
    display: flex;
    align-items: center;
    justify-content: center;
}

.item-card .item-image img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* This will make images fit within the container while maintaining aspect ratio */
    transition: transform 0.5s ease;
}

/* Special fix for deals of the day images */
.deals-carousel .item-image,
.deals-carousel-box .item-image {
    position: relative !important;
    overflow: hidden !important;
    height: 250px !important; /* Fixed height for deals images */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #f9f9f9 !important; /* Light background to show if image fails */
    margin-bottom: 15px !important;
}

.deals-carousel .item-image img,
.deals-carousel-box .item-image img,
.deals-product-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    max-height: 250px !important;
    transition: transform 0.3s ease !important;
    display: block !important;
    position: relative !important;
    z-index: 1 !important;
    background-color: transparent !important;
}

/* Special class for deals section */
.deals-section {
    margin-bottom: 30px !important;
}

/* Hide the section heading with "Fresh & Healthy Organic Vegetables" text */
.deals-section .section-heading {
    display: none !important;
}

.deals-carousel {
    padding: 0 !important;
    margin: 0 !important;
}

/* Remove loading text and just use a subtle background */
.deals-carousel .item-image::before,
.deals-carousel-box .item-image::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: transparent !important;
    z-index: 0 !important;
}

/* Style for error images */
.error-image {
    opacity: 0.7 !important;
    filter: grayscale(50%) !important;
    border: 1px dashed #ddd !important;
}

/* Fix for deals countdown positioning */
.deals-countdown-card {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 1 !important;
    background-color: rgba(255, 255, 255, 0.8) !important;
}

/* Also fix for other image containers */
.pd-slider-for .slick-slide img,
.pd-slider-nav .slick-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Fix for category images */
.category-card .category-card-img {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.category-card .category-card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Fix for images not loading */
img {
    min-height: 20px; /* Ensure there's at least some space for images */
}

img.error-image {
    opacity: 0.5;
    filter: grayscale(100%);
}

/* Add a subtle loading animation for images */
@keyframes imageLoading {
    0% { opacity: 0.3; }
    50% { opacity: 0.5; }
    100% { opacity: 0.3; }
}

img:not([src]), 
img[src=""] {
    animation: imageLoading 1.5s infinite;
    background-color: #f0f0f0;
}