/*
Theme Name: Hello Elementor Child
Template: hello-elementor
Version: 1.0.0
*/

@import url("../hello-elementor/style.css");


/* Lateral Menu Base Styles */
.lista_lateral {
    list-style: none;
    padding-left: 0;
}

.lista_lateral li {
    list-style: none;
    padding-top: 15px; /* Slightly reduced padding for smoother feel */
    padding-bottom: 15px; /* Slightly reduced padding for smoother feel */
    border-bottom: 1px solid #EEE; /* Lighter border */
}

.category-item {
    margin-bottom: 0; /* Remove extra margin, padding on li is enough */
}

.category-toggle {
    display: flex;
    align-items: center;
    gap: 0.5em;
    cursor: pointer; /* Indicate it's clickable */
}

.category-toggle a {
    flex: 1;
    text-decoration: none;
    color: inherit;
    /* Ensure the link text takes up space, making it clickable */
    display: block;
    padding: 5px 0; /* Add some internal padding for click area */
	font-weight:600;
}

/* Chevron Rotation Effect */
.chevron {
    font-size: 1.2em; /* Adjusted size for better visual */
    cursor: pointer;
    user-select: none;
    transition: transform 0.3s ease-out; /* Smooth transition for rotation */
    margin-left: auto; /* Pushes the chevron to the right */
    display: inline-block; /* Ensures transform works correctly */
}

.chevron.rotated {
    transform: rotate(180deg); /* Rotates the right-pointing arrow to point down */
}

/* Subcategory List Curtain Effect */
.subcategory-list {
    margin-left: 1em;
    list-style: none;
    padding-left: 10px;
    
    /* Curtain Effect Properties */
    max-height: 0; /* Initially hidden */
    overflow: hidden; /* Hide content exceeding max-height */
    transition: max-height 0.5s ease-out; /* Smooth transition for opening/closing */
    will-change: max-height; /* Hint to browser for performance */
}

.subcategory-list.open {
    max-height: 500px; /* Adjust this value if your subcategory lists can be very tall */
    /* A sufficiently large value ensures the entire list is visible when open.
       If your lists are extremely long, you might need to increase this. */
}

.sublista {
    border: 0 !important; /* No border for sub-items */
    padding-top: 8px; /* Smaller padding for sub-items */
    padding-bottom: 8px;
}

.sublista a {
    display: block; /* Make the whole list item clickable */
    text-decoration: none;
    color: #555; /* Slightly different color for sub-items */
    padding: 2px 0;
}

.sublista a:hover {
    color: #0073aa; /* Example hover color */
}

@media (min-width: 1200px) and (max-width: 1599px) {
    .productSwiper .productInner {
        padding: 15px 17.5px;
        min-height: 120px !important;
    }
}