/* 
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 */
.black { color: #3b3b3b; }
.white { color: #fff; }
.b-shadow { box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px; }
/*.highlight { color: #54A032; }*/
.highlight { color: #45d127; }

.primary { color: #308833; }
.woocommerce a.added_to_cart { margin-left: 10px; font-weight: 500; }

/* Google Reviews */
.ti-widget.ti-goog .ti-footer .ti-profile-img { display: none!important; }

input[type=number] { border: 1px solid #54A03233; padding: .5rem .3rem; }
.woocommerce .quantity .qty { width: 3.2em!important; }
.woocommerce div.product form.cart .button { margin-left: 5px!important; }
.input-text.qty::-webkit-inner-spin-button {
    -webkit-appearance: inner-spin-button !important;
    appearance: inner-spin-button !important;
    opacity: 1 !important;
    
    /* This moves the arrows to the right */
    margin-right: -10px !important; 
    
    /* Optional: This gives them a bit of breathing room from the numbers */
    margin-left: 2px !important; 
    
    /* Ensure they stay clickable */
    cursor: pointer;
}

/* You may also need to ensure the input doesn't clip them */
.input-text.qty {
    overflow: visible !important;
    padding-right: 15px !important; 
}
/* End WOO archive */

/* Clean Fade-In Animation */
.filter-fade-in {
    animation: simpleFadeIn 0.6s ease-in-out forwards;
}

@keyframes simpleFadeIn {
    from { 
        opacity: 0; 
    }
    to { 
        opacity: 1; 
    }
}

/* Ensure items are ready for the animation */
.e-loop-item, .product, .elementor-grid-item {
    transition: opacity 0.3s ease;
}
/* Sidebar FILTERS */
.product-sidebar {
    position: relative; /* Normal flow */
    height: auto;
}
.products { min-height: 1000px; }

/* Desktop Sticky Sidebar FILTERS */
@media (min-width: 1025px) {
    .product-container {
        display: flex !important;
        align-items: flex-start !important;
    }

    .product-sidebar  {
        position: -webkit-sticky;
        position: sticky !important;
        top: 20px;
		/*margin-top: 20px;*/
        height: fit-content !important;
        z-index: 10;
    }
}

/* Category Filters */
.filter-sidebar-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.filter-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
}

.vertical-filter-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.filter-btn {
    background: transparent!important;
    border: none;
    text-align: left;
    padding: 2px 0;
    cursor: pointer;
    font-size: 17px;
    font-weight: 600;
    color: #383838;
    /* Text Wrapping */
    white-space: normal;
    line-height: 1.3;
    width: 100%;
}

/**/
/* Style the filter list items */
.brand-filter, .cat-filter {
    display: flex;
    align-items: center;
    cursor: pointer;

    transition: all 0.2s ease;
    background: transparent !important; /* Clean default look */
}
.filter-btn.cat-filter:hover, .filter-btn.brand-filter:hover { color: #308833; }
/* Create the bullet using ::before */
.brand-filter::before, .cat-filter::before {
    content: '';
    display: inline-block;
    width: 10px!important;
    height: 10px!important;
    margin-right: 10px;
    border-radius: 50%;
	flex-shrink: 0 !important;
	vertical-align: middle;
	margin-top: 5px;
    border: 2px solid #54A032; 
    transition: all 0.2s ease;
}
.brand-filter:hover::before, .cat-filter:hover::before {
    background-color: #308833; 
    border-color: #308833;
}
/* Active State: Change the bullet color */
.brand-filter.active::before, .cat-filter.active::before {

    background-color: #54A032; 
    border-color: #54A032;
}

/* Text color when active */
.brand-filter.active, .cat-filter.active {
    color: #308833 !important;
}
/**/
.brand-filter:focus, 
.brand-filter:active:not(.active) {
    background-color: transparent !important;
    color: inherit !important;
}

/* Styling the new Price Subtitle */
.price-subtitle {
    font-size: 15px;      
    color: #666;           
    margin-top: -10px;     
    margin-bottom: 15px;
    font-weight: 500;
}

/* Container for the brand buttons */
/* Reset standard container to single column */
.filter-sidebar-wrapper .vertical-filter-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Target only the Brand container to be 2-columns */
.filter-group:has(.brand-filter) .vertical-filter-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 5px !important;
}

/* 3. Button Styling for Brands in Grid */
.filter-btn.brand-filter {
    width: 100% !important;
    margin: 0 !important;
    padding: 0px 2px !important;
}
.filter-btn.brand-filter:hover { padding-left: 3px; }
/* 4. Keep Category buttons full width and left-aligned */
.filter-btn.cat-filter {
    text-align: left;
    width: 100%;
}


/* End 2 Column Brand Filters */
	
/* Price Filter Dual Handle */
.dual-range-container {
    position: relative;
    width: 100%;
    height: 24px; 
    margin-top: 10px;
}

/* The actual handles (Inputs) */
.dual-range-container input[type="range"] {
    position: absolute;
    width: 100%;
    pointer-events: none; 
    -webkit-appearance: none;
    appearance: none;
    background: none;
    margin: 0;
    z-index: 2;
}

/* Re-enable clicks ONLY for the handles */
.dual-range-container input[type="range"]::-webkit-slider-thumb {
    pointer-events: auto; 
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    background: #308833;
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    border: none;
    position: relative;
    z-index: 5;
}

.dual-range-container input[type="range"]::-moz-range-thumb {
    pointer-events: auto;
    width: 24px;
    height: 24px;
    background: #308833;
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    border: 2px solid #fff;
}

/* The shared green track (from your styles) */
.slider-track {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 4px;
    background: #54A032; /* Your track color */
    border-radius: 4px;
    z-index: 1;
}

/* Hide default tracks so they don't stack/block each other */
.dual-range-container input::-webkit-slider-runnable-track { background: none; }
.dual-range-container input::-moz-range-track { background: none; }

/* Existing Reset Button & Labels */
.price-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 13px;
    color: #383838;
    font-weight: 500;
}

/*-----------------------*/
#price-slider { accent-color: #308833; }
.price-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 13px;
    color: #383838;
    font-weight: 500;
}

#price-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;         
    height: 24px;        
    background: #308833; 
    cursor: pointer;
    border-radius: 50%;  
   /* border: 2px solid #fff;*/
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    margin-top: -6px;    
}
#price-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    background: #308833;
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* 3. Adjusting the Track height to look better with a big handle */
#price-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: #54A032;
    border-radius: 4px;
}

#price-slider::-moz-range-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: #54A032;
    border-radius: 4px;
}
/* Styling the Reset Button */
#reset-filters-btn {
    /*width: 100%;*/
    background-color: #54A032;
    color: #fff;
    border: none;
    padding: 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
   /* margin-top: 15px; */
    letter-spacing: 1px;
    border-radius: 5px;
}

#reset-filters-btn:hover {
    background-color: #308833; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

#min-price { z-index: 3; }
#max-price { z-index: 2; }

/* JavaScript will swap these if you grab the max handle */
/* Hard hide for the Show All button */
.vertical-filter-container .hide-all-btn {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.cat-item-wrapper {
    display: flex;
    flex-wrap: wrap; /* Allows sub-cats to drop to the next line */
    align-items: center;
    justify-content: space-between;
    width: 100%;
   /* margin-bottom: 10px; */
}

.cat-item-wrapper .cat-filter {
    flex: 1; /* Takes up remaining space */
    text-align: left;
}

.toggle-sub {
    cursor: pointer;
    font-size: 26px; /* Larger toggle */
    font-weight: bold;
    color: #54A032;
    padding: 0 0 0 10px;
    user-select: none;
    order: 2; /* Keeps it to the right */
}

.sub-cat-dropdown {
    width: 100%; /* Forces it to fill the line */
    margin-top: 2px;
    padding-left: 20px; /* Indents sub-categories */
    display: none;
    order: 3; /* Places it below the parent row */
}

.sub-cat-dropdown .cat-filter {
    display: block;
    width: 100%;
    margin-bottom: 5px;
    font-size: 16px;
}
/*body.filter-is-active .elementor-load-more-button,
body.filter-is-active .elementor-button-wrapper,
body.filter-is-active .e-loop-load-more {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
} */
.custom-sale-badge { background: #308833; border-radius: 4px; color: #fff; padding: 3px 10px; font-weight: 600; pointer-events: none; }

/* WPForms 
body .iti__selected-country, div.wpforms-container .wpforms-form .iti__selected-country, div.wpforms-container-full .wpforms-form .iti__selected-country {
    background: transparent !important;
    border: none !important;
    padding: 0 10px !important;
    box-shadow: none !important;
}*/
.wpforms-container .wpforms-field, .wp-core-ui div.wpforms-container .wpforms-field { padding: 5px 0!important; }
div.wpforms-container .wpforms-submit-container button.wpforms-submit {
    background: #54A032!important; border-radius: 5px!important; padding-left: 25px!important; padding-right: 25px!important; margin-top: 0px;
}
div.wpforms-container .wpforms-submit-container button.wpforms-submit:hover { background: #000!important;  }

/* Post */
#two-line {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

  display: -moz-box;
  -moz-box-orient: vertical;

  overflow: hidden;
  text-overflow: ellipsis;
}

.woocommerce-message { border-top-color: #308833; }
.woocommerce-message::before { color: #308833; }
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button { color: #fff; background: #54A032; }
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button:hover { color: #fff; background: #308833; }

/* Search widget */
.search-bar {
    display: none !important; /* Keep hidden on load */
    position: absolute !important;
    top: 100%; /* Sits right below the header */
    
   /* Position it below the nav */
    top: 100%; 
    left: 50% !important;
    transform: translateX(-50%) translateY(-10px);
    
    /* Boxed constraints */
    width: 95% !important; /* Mobile safety margin */
    max-width: 1240px !important;
    
    /* Aesthetics */
    z-index: 99999;
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
    transition: all 0.3s ease-in-out;
}

/* Show it when the JS triggers */
.search-bar.is-active {
    display: block !important; 
	transform: translateX(-50%) translateY(0);
}
/* Search Result 
.elementor-posts .elementor-post { border: 1px solid #54A03233; border-radius: 5px; }
.elementor-posts .elementor-post:hover { border: 1px solid #54A032; }
.elementor-posts .elementor-post__text { background: #f5f5f5; padding: 20px; }
.elementor-posts .elementor-post__excerpt { display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis; } */

@media screen and (max-width: 767px) {
div.wpforms-container-full .wpforms-form .wpforms-submit-container { display: flex; justify-content: center; }
div.wpforms-container .wpforms-submit-container button.wpforms-submit { width: 100%; }
}