/* =========================================
   Categories Scrollable Component (Mobile)
   ========================================= */

.category-featured {
    padding: 10vh 2rem;
}

.category-scroll-container {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.category-scroll-container::-webkit-scrollbar {
    display: none;
}

.category-card {
    width: 180px;
    transition: transform 0.3s ease;
    
}

.category-card:hover {
    transform: translateY(-5px);
}

.category-img-wrapper {
    width: 120px;
    height: 120px;
    background-color: transparent;
}

/* =========================================
   Products Grid Page
   ========================================= */
.product-card {
    background: #ffffff;
    border-radius: 12px;
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
}

.product-card:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    transform: translateY(-3px);
}

.product-img-wrapper {
    width: 100%;
    height: 180px;
    background-color: transparent;
    padding: 1rem;
}

/* Reusable shadow for transparent product images */
.product-img-drop-shadow {
    filter: drop-shadow(0px 8px 10px rgba(0, 0, 0, 0.1));
}

.inactive-category {
    opacity: 0.5;
    filter: grayscale(80%);
}

.inactive-category:hover {
    opacity: 0.8;
    filter: grayscale(0%);
}

.active-category {
    opacity: 1;
    transform: scale(1.05); /* Slightly enlarge the active category */
    filter: grayscale(0%);
}

.active-category h5 {
    color: var(--theme-color) !important; /* Highlights the text using your theme color */
}