/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */
/* Main wrapper */
.top-categories-wrapper {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: left;
}

/* Category card */
.category-card {
    position: relative;
    width: 100%;
    max-width: 350px;
    aspect-ratio: 7 / 5;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    border-radius: 10px;
    text-decoration: none;
    color: white;
    transition: transform 0.4s ease;
    cursor: pointer;
}

/* Hover scale effect */
/* .category-card:hover {
    transform: scale(1.05);
} */

/* Dark overlay */
.category-card .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1;
    transition: background 0.3s ease;
}

/* Text container */
.category-card .category-info {
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 2;
    transition: transform 0.3s ease, color 0.3s ease;
}

/* Headline text */
.category-card .category-info h3 {
    margin: 0;
    font-size: 20px;
}

/* Description text */
.category-card .category-info p {
    margin: 5px 0 0;
    font-size: 14px;
}

/* Hover text effect */
.category-card:hover .category-info {
    color: #ffffff;
    transform: translateY(-5px);
}

/* --------------------
   Responsive Styles
---------------------*/

/* Tablets (up to 991px) */
@media (max-width: 991px) {
    .top-categories-wrapper {
        justify-content: center;
    }

    .category-card {
        max-width: 45%;
    }
}

/* Phones (up to 600px) */
@media (max-width: 600px) {
    .category-card {
        max-width: 100%;
    }

    .category-card .category-info h3 {
        font-size: 18px;
    }

    .category-card .category-info p {
        font-size: 13px;
    }
}

/* Category list */
.wc-category-filter {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 220px;
	font-family: poppins;
	font-weight:500;
	font-size: 16px;
}

.wc-category-filter li {
    margin: 10px 0;
}

.wc-category-filter li a {
    display: block;
    padding: 10px 15px;
    background: #f7f7f7;
    color: #333;
    text-decoration: none;
    border-radius: 15px;
    transition: all 0.3s ease;
}

.wc-category-filter li a:hover {
    transform: translateX(10px);
    background: #309a6078; /* light highlight */
    color: #111;
}