/* Card hover effect */
#productsGrid .card,
#homeProductsGrid .home-product.card {
    transition: transform 0.3s, box-shadow 0.3s;
    border-radius: 1rem;
}

    #productsGrid .card:hover,
    #homeProductsGrid .home-product.card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    }

/* Title and text inside card */
#productsGrid .card-title,
#homeProductsGrid .card-title {
    font-size: 1.1rem;
    font-weight: bold;
    text-align: center;
}

#productsGrid .card-text,
#homeProductsGrid .card-text {
    font-size: 0.9rem;
    color: #555;
    text-align: center;
}

/* Badges (e.g., for stock or categories) */
#productsGrid .badge,
#homeProductsGrid .badge {
    font-size: 0.8rem;
    padding: 0.5em 0.75em;
}

#productsGrid .product-carousel-wrapper,
#homeProductsGrid .product-carousel-wrapper {
    height: 200px;
    position: relative;
}

#productsGrid .responsive-img-container,
#homeProductsGrid .responsive-img-container {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
    border-radius: 1rem;
}

    #productsGrid .responsive-img-container img,
    #homeProductsGrid .responsive-img-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* Carousel buttons (modern arrows inside circles) */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.5);
    background-image: none;
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    opacity: 1;
    position: relative;
}

    .carousel-control-prev-icon::before {
        content: '\2039'; /* ‹ */
        font-size: 2rem;
        color: white;
        position: absolute;
        left: 0.7rem;
        top: 0.1rem;
    }

    .carousel-control-next-icon::before {
        content: '\203A'; /* › */
        font-size: 2rem;
        color: white;
        position: absolute;
        right: 0.7rem;
        top: 0.1rem;
    }

#productsGrid .btn,
#homeProductsGrid .btn {
    font-size: 0.8rem;
    padding: 0.45rem 0.75rem;
    width: 100%;
    margin-top: 0.5rem;
    border-radius: 0.5rem;
    box-shadow: none;
}

#productsGrid .btn-dark,
#homeProductsGrid .btn-dark {
    background-color: #222;
    border: none;
}

#productsGrid .btn-danger,
#homeProductsGrid .btn-danger {
    background-color: #e74c3c;
    border: none;
}

.product-grid,
.product-item,
.product-image,
.product-details,
.product-variants {
    all: unset;
}