.elementor-997 .elementor-element.elementor-element-c4a289f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:20px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-997 .elementor-element.elementor-element-1392750{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:10px 10px;--row-gap:10px;--column-gap:10px;--overlay-opacity:0.57;border-style:solid;--border-style:solid;border-width:3px 3px 3px 3px;--border-top-width:3px;--border-right-width:3px;--border-bottom-width:3px;--border-left-width:3px;border-color:#283618;--border-color:#283618;--border-radius:5px 5px 5px 5px;--padding-top:50px;--padding-bottom:50px;--padding-left:50px;--padding-right:50px;}.elementor-997 .elementor-element.elementor-element-1392750:not(.elementor-motion-effects-element-type-background), .elementor-997 .elementor-element.elementor-element-1392750 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FDF0E3;background-image:url("https://loohpress.com/wp-content/uploads/2026/02/header-all.webp");background-position:center center;background-size:cover;}.elementor-997 .elementor-element.elementor-element-1392750::before, .elementor-997 .elementor-element.elementor-element-1392750 > .elementor-background-video-container::before, .elementor-997 .elementor-element.elementor-element-1392750 > .e-con-inner > .elementor-background-video-container::before, .elementor-997 .elementor-element.elementor-element-1392750 > .elementor-background-slideshow::before, .elementor-997 .elementor-element.elementor-element-1392750 > .e-con-inner > .elementor-background-slideshow::before, .elementor-997 .elementor-element.elementor-element-1392750 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#000000;--background-overlay:'';}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-997 .elementor-element.elementor-element-7d71a43{text-align:center;}.elementor-997 .elementor-element.elementor-element-7d71a43 .elementor-heading-title{font-family:"Marcellus", Sans-serif;font-size:clamp(1.88rem, 1.55172rem + 1.37931vw, 2.50rem);font-weight:600;color:var( --e-global-color-0944458 );}.elementor-widget-breadcrumbs{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-997 .elementor-element.elementor-element-c24ae21{font-family:var( --e-global-typography-f5ef896-font-family ), Sans-serif;font-size:var( --e-global-typography-f5ef896-font-size );line-height:var( --e-global-typography-f5ef896-line-height );color:var( --e-global-color-0944458 );}.elementor-997 .elementor-element.elementor-element-c24ae21 a{color:var( --e-global-color-0944458 );}.elementor-997 .elementor-element.elementor-element-9a8a392{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:50px;--margin-bottom:50px;--margin-left:0px;--margin-right:0px;}.elementor-997 .elementor-element.elementor-element-c9a3d53{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-997 .elementor-element.elementor-element-5700692{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:flex-start;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-997 .elementor-element.elementor-element-ad2e9ba .elementor-heading-title{font-family:var( --e-global-typography-817e92b-font-family ), Sans-serif;font-size:var( --e-global-typography-817e92b-font-size );line-height:var( --e-global-typography-817e92b-line-height );color:var( --e-global-color-primary );}.elementor-997 .elementor-element.elementor-element-e2d0ac2 .e-off-canvas__overlay{background-color:rgba(0,0,0,.8);}.elementor-997 .elementor-element.elementor-element-e2d0ac2{--e-off-canvas-height:100vh;--e-off-canvas-content-overflow:auto;--e-off-canvas-overlay-opacity:1;}.elementor-997 .elementor-element.elementor-element-8659255{--display:flex;}.elementor-997 .elementor-element.elementor-element-056d82c{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:flex-start;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-997 .elementor-element.elementor-element-7a5bf83 .elementor-heading-title{font-family:var( --e-global-typography-6c36240-font-family ), Sans-serif;font-size:var( --e-global-typography-6c36240-font-size );font-weight:var( --e-global-typography-6c36240-font-weight );line-height:var( --e-global-typography-6c36240-line-height );color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-primary );}.elementor-997 .elementor-element.elementor-element-a8fcedf .elementor-icon-wrapper{text-align:center;}.elementor-997 .elementor-element.elementor-element-a8fcedf.elementor-view-stacked .elementor-icon{background-color:#D11818;}.elementor-997 .elementor-element.elementor-element-a8fcedf.elementor-view-framed .elementor-icon, .elementor-997 .elementor-element.elementor-element-a8fcedf.elementor-view-default .elementor-icon{color:#D11818;border-color:#D11818;}.elementor-997 .elementor-element.elementor-element-a8fcedf.elementor-view-framed .elementor-icon, .elementor-997 .elementor-element.elementor-element-a8fcedf.elementor-view-default .elementor-icon svg{fill:#D11818;}.elementor-997 .elementor-element.elementor-element-a8fcedf .elementor-icon{font-size:24px;}.elementor-997 .elementor-element.elementor-element-a8fcedf .elementor-icon svg{height:24px;}.elementor-997 .elementor-element.elementor-element-16e5425{--display:flex;}.elementor-997 .elementor-element.elementor-element-acb6124{--display:flex;}.elementor-997 .elementor-element.elementor-element-509dc6d{--display:flex;}.elementor-997 .elementor-element.elementor-element-90da089{--n-accordion-title-font-size:14px;--n-accordion-title-justify-content:initial;--n-accordion-title-flex-grow:initial;--n-accordion-item-title-space-between:0px;--n-accordion-item-title-distance-from-content:0px;--n-accordion-border-radius:10px 10px 0px 0px;--n-accordion-title-normal-color:var( --e-global-color-text );--n-accordion-title-hover-color:var( --e-global-color-accent );--n-accordion-title-active-color:var( --e-global-color-text );--n-accordion-icon-size:12px;--n-accordion-icon-normal-color:var( --e-global-color-primary );}:where( .elementor-997 .elementor-element.elementor-element-90da089 > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title > .e-n-accordion-item-title-header ) > .e-n-accordion-item-title-text{font-family:"Inter", Sans-serif;font-weight:600;line-height:1.4rem;}:where( .elementor-997 .elementor-element.elementor-element-90da089 > .e-n-accordion > .e-n-accordion-item ) > .e-con{--border-radius:0px 0px 10px 10px;}.elementor-997 .elementor-element.elementor-element-9269bc4 .elementor-icon-wrapper{text-align:center;}.elementor-997 .elementor-element.elementor-element-9269bc4 .elementor-icon{font-size:24px;}.elementor-997 .elementor-element.elementor-element-9269bc4 .elementor-icon svg{height:24px;}.elementor-997 .elementor-element.elementor-element-31c43e9{--display:flex;}.elementor-997 .elementor-element.elementor-element-d924f05{--display:flex;}.elementor-997 .elementor-element.elementor-element-4679d03{--display:flex;}.elementor-997 .elementor-element.elementor-element-722264b{--n-accordion-title-font-size:14px;--n-accordion-title-justify-content:initial;--n-accordion-title-flex-grow:initial;--n-accordion-item-title-space-between:0px;--n-accordion-item-title-distance-from-content:0px;--n-accordion-border-radius:10px 10px 0px 0px;--n-accordion-title-normal-color:var( --e-global-color-text );--n-accordion-title-hover-color:var( --e-global-color-accent );--n-accordion-title-active-color:var( --e-global-color-text );--n-accordion-icon-size:12px;--n-accordion-icon-normal-color:var( --e-global-color-primary );}:where( .elementor-997 .elementor-element.elementor-element-722264b > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title > .e-n-accordion-item-title-header ) > .e-n-accordion-item-title-text{font-family:"Inter", Sans-serif;font-weight:600;line-height:1.4rem;}:where( .elementor-997 .elementor-element.elementor-element-722264b > .e-n-accordion > .e-n-accordion-item ) > .e-con{--border-radius:0px 0px 10px 10px;}.elementor-997 .elementor-element.elementor-element-8a737d4{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-loop-grid .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-loop-grid .elementor-pagination{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-loop-grid .e-load-more-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-997 .elementor-element.elementor-element-6377274{--grid-columns:4;--grid-column-gap:10px;}@media(max-width:1024px){.elementor-997 .elementor-element.elementor-element-1392750{--padding-top:15px;--padding-bottom:15px;--padding-left:15px;--padding-right:15px;}.elementor-997 .elementor-element.elementor-element-c24ae21{font-size:var( --e-global-typography-f5ef896-font-size );line-height:var( --e-global-typography-f5ef896-line-height );}.elementor-997 .elementor-element.elementor-element-9a8a392{--margin-top:20px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-997 .elementor-element.elementor-element-ad2e9ba .elementor-heading-title{font-size:var( --e-global-typography-817e92b-font-size );line-height:var( --e-global-typography-817e92b-line-height );}.elementor-997 .elementor-element.elementor-element-7a5bf83 .elementor-heading-title{font-size:var( --e-global-typography-6c36240-font-size );line-height:var( --e-global-typography-6c36240-line-height );}.elementor-997 .elementor-element.elementor-element-6377274{--grid-columns:2;}}@media(max-width:767px){.elementor-997 .elementor-element.elementor-element-7d71a43{text-align:center;}.elementor-997 .elementor-element.elementor-element-c24ae21{font-size:var( --e-global-typography-f5ef896-font-size );line-height:var( --e-global-typography-f5ef896-line-height );}.elementor-997 .elementor-element.elementor-element-ad2e9ba{text-align:center;}.elementor-997 .elementor-element.elementor-element-ad2e9ba .elementor-heading-title{font-size:var( --e-global-typography-817e92b-font-size );line-height:var( --e-global-typography-817e92b-line-height );}.elementor-997 .elementor-element.elementor-element-8659255{--padding-top:30px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-997 .elementor-element.elementor-element-7a5bf83{text-align:center;}.elementor-997 .elementor-element.elementor-element-7a5bf83 .elementor-heading-title{font-size:var( --e-global-typography-6c36240-font-size );line-height:var( --e-global-typography-6c36240-line-height );}.elementor-997 .elementor-element.elementor-element-a8fcedf .elementor-icon{font-size:31px;}.elementor-997 .elementor-element.elementor-element-a8fcedf .elementor-icon svg{height:31px;}.elementor-997 .elementor-element.elementor-element-6377274{--grid-columns:2;}}@media(min-width:768px){.elementor-997 .elementor-element.elementor-element-c9a3d53{--width:20%;}.elementor-997 .elementor-element.elementor-element-8a737d4{--width:80%;}}@media(max-width:1024px) and (min-width:768px){.elementor-997 .elementor-element.elementor-element-c9a3d53{--width:34%;}}/* Start custom CSS for shortcode, class: .elementor-element-f820092 *//* ======================================================
WS WooCommerce Filter Builder — Theme Inherit Skin (FIXED)
========================================================= */

:root {
    /* 1. Global Typography & Colors (Inherit from Theme) */
    --ws-filter-font-family: inherit;
    --ws-filter-font-size: inherit;
    --ws-filter-text-color: inherit;
    --ws-filter-text-weight: inherit;

    /* 2. Labels */
    --ws-filter-label-color: inherit;
    --ws-filter-label-bg: transparent;
    --ws-filter-label-weight: 700; 
    --ws-filter-label-padding: 5px 0px; 
    --ws-filter-label-radius: 0px;

    /* 3. Pills (The Buttons) - Invert Logic */
    --ws-filter-pill-bg: transparent;
    --ws-filter-pill-text: inherit;
    --ws-filter-pill-border: 1px solid currentColor; /* Border matches text */
    



    /* 4. Dropdowns */
    --ws-filter-dropdown-bg: transparent;
    --ws-filter-dropdown-border: 1px solid rgba(136, 136, 136, 0.4);
    --ws-filter-dropdown-text-color: inherit;
    
    /* Dropdown Hover */
    --ws-filter-dropdown-hover-bg: currentColor; 
    --ws-filter-dropdown-text-hover: #ffffff; /* Force White on hover */

    /* 5. Reset & Search Icons */
    --ws-filter-reset-btn-bg: transparent;
    --ws-filter-reset-icon-color: #BC6C25; /* Normal state: matches text */
    
    /* FIX: Force icon to stay dark on hover if background is transparent */
    --ws-filter-reset-btn-bg-hover: transparent;
    --ws-filter-reset-icon-color-hover: currentColor; 

    /* 6. Inputs (Search/Price) */
    --ws-filter-input-bg: transparent;
    --ws-filter-input-border: 1px solid rgba(136, 136, 136, 0.4);
    --ws-filter-price-input-text-color: inherit;

    /* 7. Spacing */
    --ws-filter-gap-between-pills: 8px;
    --ws-filter-checkbox-size: 18px;
}

/* ======================================================
   Specific Hover Fixes
========================================================= */

/* 1. PILLS: When hovering a pill, invert the colors */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option {
    transition: all 0.2s ease;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option:hover {
    background-color: var(--ws-filter-pill-bg-hover) !important;
    color: var(--ws-filter-pill-text-hover) !important;
    border-color: transparent !important; /* Hides border since BG is filled */
}

/* Force the text inside the pill to change color too */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option:hover span {
    color: var(--ws-filter-pill-text-hover) !important;
}

/* 2. SEARCH / RESET ICONS: Ensure they don't disappear */
/* If the icon is inside a button that gets filled, make the icon white */
.ws-wc-filters-skin button:hover .ws-wc-filter-icon,
.ws-wc-filters-skin .ws-wc-filter-submit:hover svg,
.ws-wc-filters-skin .ws-wc-filter-search-submit:hover svg {
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* If the Reset button has a TRANSPARENT background (variable above), keep icon dark */
.ws-wc-filters-skin .ws-wc-filter-reset:hover {
    background-color: transparent !important;
}
.ws-wc-filters-skin .ws-wc-filter-reset:hover span {
    color: currentColor !important; /* Stays the text color */
}

/* 3. COLOUR SWATCH HOVER (Special Case) */
/* When hovering a colour pill, don't fill the background, just show border */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option:has(.ws-colour-swatch):hover {
    background-color: transparent !important;
    color: inherit !important;
    border-color: currentColor !important;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option:has(.ws-colour-swatch):hover span {
    color: inherit !important;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-12535a4 *//* ======================================================
WS WooCommerce Filter Builder — Theme Inherit Skin (FIXED)
========================================================= */

:root {
    /* 1. Global Typography & Colors (Inherit from Theme) */
    --ws-filter-font-family: inherit;
    --ws-filter-font-size: inherit;
    --ws-filter-text-color: inherit;
    --ws-filter-text-weight: inherit;

    /* 2. Labels */
    --ws-filter-label-color: inherit;
    --ws-filter-label-bg: transparent;
    --ws-filter-label-weight: 700; 
    --ws-filter-label-padding: 5px 0px; 
    --ws-filter-label-radius: 0px;

    /* 3. Pills (The Buttons) - Invert Logic */
    --ws-filter-pill-bg: transparent;
    --ws-filter-pill-text: inherit;
    --ws-filter-pill-border: 1px solid currentColor; /* Border matches text */
    



    /* 4. Dropdowns */
    --ws-filter-dropdown-bg: transparent;
    --ws-filter-dropdown-border: 1px solid rgba(136, 136, 136, 0.4);
    --ws-filter-dropdown-text-color: inherit;
    
    /* Dropdown Hover */
    --ws-filter-dropdown-hover-bg: currentColor; 
    --ws-filter-dropdown-text-hover: #ffffff; /* Force White on hover */

    /* 5. Reset & Search Icons */
    --ws-filter-reset-btn-bg: transparent;
    --ws-filter-reset-icon-color: #BC6C25; /* Normal state: matches text */
    
    /* FIX: Force icon to stay dark on hover if background is transparent */
    --ws-filter-reset-btn-bg-hover: transparent;
    --ws-filter-reset-icon-color-hover: currentColor; 

    /* 6. Inputs (Search/Price) */
    --ws-filter-input-bg: transparent;
    --ws-filter-input-border: 1px solid rgba(136, 136, 136, 0.4);
    --ws-filter-price-input-text-color: inherit;

    /* 7. Spacing */
    --ws-filter-gap-between-pills: 8px;
    --ws-filter-checkbox-size: 18px;
}

/* ======================================================
   Specific Hover Fixes
========================================================= */

/* 1. PILLS: When hovering a pill, invert the colors */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option {
    transition: all 0.2s ease;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option:hover {
    background-color: var(--ws-filter-pill-bg-hover) !important;
    color: var(--ws-filter-pill-text-hover) !important;
    border-color: transparent !important; /* Hides border since BG is filled */
}

/* Force the text inside the pill to change color too */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option:hover span {
    color: var(--ws-filter-pill-text-hover) !important;
}

/* 2. SEARCH / RESET ICONS: Ensure they don't disappear */
/* If the icon is inside a button that gets filled, make the icon white */
.ws-wc-filters-skin button:hover .ws-wc-filter-icon,
.ws-wc-filters-skin .ws-wc-filter-submit:hover svg,
.ws-wc-filters-skin .ws-wc-filter-search-submit:hover svg {
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* If the Reset button has a TRANSPARENT background (variable above), keep icon dark */
.ws-wc-filters-skin .ws-wc-filter-reset:hover {
    background-color: transparent !important;
}
.ws-wc-filters-skin .ws-wc-filter-reset:hover span {
    color: currentColor !important; /* Stays the text color */
}

/* 3. COLOUR SWATCH HOVER (Special Case) */
/* When hovering a colour pill, don't fill the background, just show border */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option:has(.ws-colour-swatch):hover {
    background-color: transparent !important;
    color: inherit !important;
    border-color: currentColor !important;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option:has(.ws-colour-swatch):hover span {
    color: inherit !important;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-b64d083 *//* ======================================================
WS WooCommerce Filter Builder — Theme Inherit Skin (FIXED)
========================================================= */

:root {
    /* 1. Global Typography & Colors (Inherit from Theme) */
    --ws-filter-font-family: inherit;
    --ws-filter-font-size: inherit;
    --ws-filter-text-color: inherit;
    --ws-filter-text-weight: inherit;

    /* 2. Labels */
    --ws-filter-label-color: inherit;
    --ws-filter-label-bg: transparent;
    --ws-filter-label-weight: 700; 
    --ws-filter-label-padding: 5px 0px; 
    --ws-filter-label-radius: 0px;

    /* 3. Pills (The Buttons) - Invert Logic */
    --ws-filter-pill-bg: transparent;
    --ws-filter-pill-text: inherit;
    --ws-filter-pill-border: 1px solid currentColor; /* Border matches text */
    



    /* 4. Dropdowns */
    --ws-filter-dropdown-bg: transparent;
    --ws-filter-dropdown-border: 1px solid rgba(136, 136, 136, 0.4);
    --ws-filter-dropdown-text-color: inherit;
    
    /* Dropdown Hover */
    --ws-filter-dropdown-hover-bg: currentColor; 
    --ws-filter-dropdown-text-hover: #ffffff; /* Force White on hover */

    /* 5. Reset & Search Icons */
    --ws-filter-reset-btn-bg: transparent;
    --ws-filter-reset-icon-color: #BC6C25; /* Normal state: matches text */
    
    /* FIX: Force icon to stay dark on hover if background is transparent */
    --ws-filter-reset-btn-bg-hover: transparent;
    --ws-filter-reset-icon-color-hover: currentColor; 

    /* 6. Inputs (Search/Price) */
    --ws-filter-input-bg: transparent;
    --ws-filter-input-border: 1px solid rgba(136, 136, 136, 0.4);
    --ws-filter-price-input-text-color: inherit;

    /* 7. Spacing */
    --ws-filter-gap-between-pills: 8px;
    --ws-filter-checkbox-size: 18px;
}

/* ======================================================
   Specific Hover Fixes
========================================================= */

/* 1. PILLS: When hovering a pill, invert the colors */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option {
    transition: all 0.2s ease;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option:hover {
    background-color: var(--ws-filter-pill-bg-hover) !important;
    color: var(--ws-filter-pill-text-hover) !important;
    border-color: transparent !important; /* Hides border since BG is filled */
}

/* Force the text inside the pill to change color too */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option:hover span {
    color: var(--ws-filter-pill-text-hover) !important;
}

/* 2. SEARCH / RESET ICONS: Ensure they don't disappear */
/* If the icon is inside a button that gets filled, make the icon white */
.ws-wc-filters-skin button:hover .ws-wc-filter-icon,
.ws-wc-filters-skin .ws-wc-filter-submit:hover svg,
.ws-wc-filters-skin .ws-wc-filter-search-submit:hover svg {
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* If the Reset button has a TRANSPARENT background (variable above), keep icon dark */
.ws-wc-filters-skin .ws-wc-filter-reset:hover {
    background-color: transparent !important;
}
.ws-wc-filters-skin .ws-wc-filter-reset:hover span {
    color: currentColor !important; /* Stays the text color */
}

/* 3. COLOUR SWATCH HOVER (Special Case) */
/* When hovering a colour pill, don't fill the background, just show border */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option:has(.ws-colour-swatch):hover {
    background-color: transparent !important;
    color: inherit !important;
    border-color: currentColor !important;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option:has(.ws-colour-swatch):hover span {
    color: inherit !important;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-f820092 *//* ======================================================
WS WooCommerce Filter Builder — Theme Inherit Skin (FIXED)
========================================================= */

:root {
    /* 1. Global Typography & Colors (Inherit from Theme) */
    --ws-filter-font-family: inherit;
    --ws-filter-font-size: inherit;
    --ws-filter-text-color: inherit;
    --ws-filter-text-weight: inherit;

    /* 2. Labels */
    --ws-filter-label-color: inherit;
    --ws-filter-label-bg: transparent;
    --ws-filter-label-weight: 700; 
    --ws-filter-label-padding: 5px 0px; 
    --ws-filter-label-radius: 0px;

    /* 3. Pills (The Buttons) - Invert Logic */
    --ws-filter-pill-bg: transparent;
    --ws-filter-pill-text: inherit;
    --ws-filter-pill-border: 1px solid currentColor; /* Border matches text */
    



    /* 4. Dropdowns */
    --ws-filter-dropdown-bg: transparent;
    --ws-filter-dropdown-border: 1px solid rgba(136, 136, 136, 0.4);
    --ws-filter-dropdown-text-color: inherit;
    
    /* Dropdown Hover */
    --ws-filter-dropdown-hover-bg: currentColor; 
    --ws-filter-dropdown-text-hover: #ffffff; /* Force White on hover */

    /* 5. Reset & Search Icons */
    --ws-filter-reset-btn-bg: transparent;
    --ws-filter-reset-icon-color: #BC6C25; /* Normal state: matches text */
    
    /* FIX: Force icon to stay dark on hover if background is transparent */
    --ws-filter-reset-btn-bg-hover: transparent;
    --ws-filter-reset-icon-color-hover: currentColor; 

    /* 6. Inputs (Search/Price) */
    --ws-filter-input-bg: transparent;
    --ws-filter-input-border: 1px solid rgba(136, 136, 136, 0.4);
    --ws-filter-price-input-text-color: inherit;

    /* 7. Spacing */
    --ws-filter-gap-between-pills: 8px;
    --ws-filter-checkbox-size: 18px;
}

/* ======================================================
   Specific Hover Fixes
========================================================= */

/* 1. PILLS: When hovering a pill, invert the colors */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option {
    transition: all 0.2s ease;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option:hover {
    background-color: var(--ws-filter-pill-bg-hover) !important;
    color: var(--ws-filter-pill-text-hover) !important;
    border-color: transparent !important; /* Hides border since BG is filled */
}

/* Force the text inside the pill to change color too */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option:hover span {
    color: var(--ws-filter-pill-text-hover) !important;
}

/* 2. SEARCH / RESET ICONS: Ensure they don't disappear */
/* If the icon is inside a button that gets filled, make the icon white */
.ws-wc-filters-skin button:hover .ws-wc-filter-icon,
.ws-wc-filters-skin .ws-wc-filter-submit:hover svg,
.ws-wc-filters-skin .ws-wc-filter-search-submit:hover svg {
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* If the Reset button has a TRANSPARENT background (variable above), keep icon dark */
.ws-wc-filters-skin .ws-wc-filter-reset:hover {
    background-color: transparent !important;
}
.ws-wc-filters-skin .ws-wc-filter-reset:hover span {
    color: currentColor !important; /* Stays the text color */
}

/* 3. COLOUR SWATCH HOVER (Special Case) */
/* When hovering a colour pill, don't fill the background, just show border */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option:has(.ws-colour-swatch):hover {
    background-color: transparent !important;
    color: inherit !important;
    border-color: currentColor !important;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option:has(.ws-colour-swatch):hover span {
    color: inherit !important;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-12535a4 *//* ======================================================
WS WooCommerce Filter Builder — Theme Inherit Skin (FIXED)
========================================================= */

:root {
    /* 1. Global Typography & Colors (Inherit from Theme) */
    --ws-filter-font-family: inherit;
    --ws-filter-font-size: inherit;
    --ws-filter-text-color: inherit;
    --ws-filter-text-weight: inherit;

    /* 2. Labels */
    --ws-filter-label-color: inherit;
    --ws-filter-label-bg: transparent;
    --ws-filter-label-weight: 700; 
    --ws-filter-label-padding: 5px 0px; 
    --ws-filter-label-radius: 0px;

    /* 3. Pills (The Buttons) - Invert Logic */
    --ws-filter-pill-bg: transparent;
    --ws-filter-pill-text: inherit;
    --ws-filter-pill-border: 1px solid currentColor; /* Border matches text */
    



    /* 4. Dropdowns */
    --ws-filter-dropdown-bg: transparent;
    --ws-filter-dropdown-border: 1px solid rgba(136, 136, 136, 0.4);
    --ws-filter-dropdown-text-color: inherit;
    
    /* Dropdown Hover */
    --ws-filter-dropdown-hover-bg: currentColor; 
    --ws-filter-dropdown-text-hover: #ffffff; /* Force White on hover */

    /* 5. Reset & Search Icons */
    --ws-filter-reset-btn-bg: transparent;
    --ws-filter-reset-icon-color: #BC6C25; /* Normal state: matches text */
    
    /* FIX: Force icon to stay dark on hover if background is transparent */
    --ws-filter-reset-btn-bg-hover: transparent;
    --ws-filter-reset-icon-color-hover: currentColor; 

    /* 6. Inputs (Search/Price) */
    --ws-filter-input-bg: transparent;
    --ws-filter-input-border: 1px solid rgba(136, 136, 136, 0.4);
    --ws-filter-price-input-text-color: inherit;

    /* 7. Spacing */
    --ws-filter-gap-between-pills: 8px;
    --ws-filter-checkbox-size: 18px;
}

/* ======================================================
   Specific Hover Fixes
========================================================= */

/* 1. PILLS: When hovering a pill, invert the colors */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option {
    transition: all 0.2s ease;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option:hover {
    background-color: var(--ws-filter-pill-bg-hover) !important;
    color: var(--ws-filter-pill-text-hover) !important;
    border-color: transparent !important; /* Hides border since BG is filled */
}

/* Force the text inside the pill to change color too */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option:hover span {
    color: var(--ws-filter-pill-text-hover) !important;
}

/* 2. SEARCH / RESET ICONS: Ensure they don't disappear */
/* If the icon is inside a button that gets filled, make the icon white */
.ws-wc-filters-skin button:hover .ws-wc-filter-icon,
.ws-wc-filters-skin .ws-wc-filter-submit:hover svg,
.ws-wc-filters-skin .ws-wc-filter-search-submit:hover svg {
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* If the Reset button has a TRANSPARENT background (variable above), keep icon dark */
.ws-wc-filters-skin .ws-wc-filter-reset:hover {
    background-color: transparent !important;
}
.ws-wc-filters-skin .ws-wc-filter-reset:hover span {
    color: currentColor !important; /* Stays the text color */
}

/* 3. COLOUR SWATCH HOVER (Special Case) */
/* When hovering a colour pill, don't fill the background, just show border */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option:has(.ws-colour-swatch):hover {
    background-color: transparent !important;
    color: inherit !important;
    border-color: currentColor !important;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option:has(.ws-colour-swatch):hover span {
    color: inherit !important;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-b64d083 *//* ======================================================
WS WooCommerce Filter Builder — Theme Inherit Skin (FIXED)
========================================================= */

:root {
    /* 1. Global Typography & Colors (Inherit from Theme) */
    --ws-filter-font-family: inherit;
    --ws-filter-font-size: inherit;
    --ws-filter-text-color: inherit;
    --ws-filter-text-weight: inherit;

    /* 2. Labels */
    --ws-filter-label-color: inherit;
    --ws-filter-label-bg: transparent;
    --ws-filter-label-weight: 700; 
    --ws-filter-label-padding: 5px 0px; 
    --ws-filter-label-radius: 0px;

    /* 3. Pills (The Buttons) - Invert Logic */
    --ws-filter-pill-bg: transparent;
    --ws-filter-pill-text: inherit;
    --ws-filter-pill-border: 1px solid currentColor; /* Border matches text */
    



    /* 4. Dropdowns */
    --ws-filter-dropdown-bg: transparent;
    --ws-filter-dropdown-border: 1px solid rgba(136, 136, 136, 0.4);
    --ws-filter-dropdown-text-color: inherit;
    
    /* Dropdown Hover */
    --ws-filter-dropdown-hover-bg: currentColor; 
    --ws-filter-dropdown-text-hover: #ffffff; /* Force White on hover */

    /* 5. Reset & Search Icons */
    --ws-filter-reset-btn-bg: transparent;
    --ws-filter-reset-icon-color: #BC6C25; /* Normal state: matches text */
    
    /* FIX: Force icon to stay dark on hover if background is transparent */
    --ws-filter-reset-btn-bg-hover: transparent;
    --ws-filter-reset-icon-color-hover: currentColor; 

    /* 6. Inputs (Search/Price) */
    --ws-filter-input-bg: transparent;
    --ws-filter-input-border: 1px solid rgba(136, 136, 136, 0.4);
    --ws-filter-price-input-text-color: inherit;

    /* 7. Spacing */
    --ws-filter-gap-between-pills: 8px;
    --ws-filter-checkbox-size: 18px;
}

/* ======================================================
   Specific Hover Fixes
========================================================= */

/* 1. PILLS: When hovering a pill, invert the colors */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option {
    transition: all 0.2s ease;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option:hover {
    background-color: var(--ws-filter-pill-bg-hover) !important;
    color: var(--ws-filter-pill-text-hover) !important;
    border-color: transparent !important; /* Hides border since BG is filled */
}

/* Force the text inside the pill to change color too */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option:hover span {
    color: var(--ws-filter-pill-text-hover) !important;
}

/* 2. SEARCH / RESET ICONS: Ensure they don't disappear */
/* If the icon is inside a button that gets filled, make the icon white */
.ws-wc-filters-skin button:hover .ws-wc-filter-icon,
.ws-wc-filters-skin .ws-wc-filter-submit:hover svg,
.ws-wc-filters-skin .ws-wc-filter-search-submit:hover svg {
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* If the Reset button has a TRANSPARENT background (variable above), keep icon dark */
.ws-wc-filters-skin .ws-wc-filter-reset:hover {
    background-color: transparent !important;
}
.ws-wc-filters-skin .ws-wc-filter-reset:hover span {
    color: currentColor !important; /* Stays the text color */
}

/* 3. COLOUR SWATCH HOVER (Special Case) */
/* When hovering a colour pill, don't fill the background, just show border */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option:has(.ws-colour-swatch):hover {
    background-color: transparent !important;
    color: inherit !important;
    border-color: currentColor !important;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option:has(.ws-colour-swatch):hover span {
    color: inherit !important;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-f820092 *//* ======================================================
WS WooCommerce Filter Builder — Theme Inherit Skin (FIXED)
========================================================= */

:root {
    /* 1. Global Typography & Colors (Inherit from Theme) */
    --ws-filter-font-family: inherit;
    --ws-filter-font-size: inherit;
    --ws-filter-text-color: inherit;
    --ws-filter-text-weight: inherit;

    /* 2. Labels */
    --ws-filter-label-color: inherit;
    --ws-filter-label-bg: transparent;
    --ws-filter-label-weight: 700; 
    --ws-filter-label-padding: 5px 0px; 
    --ws-filter-label-radius: 0px;

    /* 3. Pills (The Buttons) - Invert Logic */
    --ws-filter-pill-bg: transparent;
    --ws-filter-pill-text: inherit;
    --ws-filter-pill-border: 1px solid currentColor; /* Border matches text */
    



    /* 4. Dropdowns */
    --ws-filter-dropdown-bg: transparent;
    --ws-filter-dropdown-border: 1px solid rgba(136, 136, 136, 0.4);
    --ws-filter-dropdown-text-color: inherit;
    
    /* Dropdown Hover */
    --ws-filter-dropdown-hover-bg: currentColor; 
    --ws-filter-dropdown-text-hover: #ffffff; /* Force White on hover */

    /* 5. Reset & Search Icons */
    --ws-filter-reset-btn-bg: transparent;
    --ws-filter-reset-icon-color: #BC6C25; /* Normal state: matches text */
    
    /* FIX: Force icon to stay dark on hover if background is transparent */
    --ws-filter-reset-btn-bg-hover: transparent;
    --ws-filter-reset-icon-color-hover: currentColor; 

    /* 6. Inputs (Search/Price) */
    --ws-filter-input-bg: transparent;
    --ws-filter-input-border: 1px solid rgba(136, 136, 136, 0.4);
    --ws-filter-price-input-text-color: inherit;

    /* 7. Spacing */
    --ws-filter-gap-between-pills: 8px;
    --ws-filter-checkbox-size: 18px;
}

/* ======================================================
   Specific Hover Fixes
========================================================= */

/* 1. PILLS: When hovering a pill, invert the colors */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option {
    transition: all 0.2s ease;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option:hover {
    background-color: var(--ws-filter-pill-bg-hover) !important;
    color: var(--ws-filter-pill-text-hover) !important;
    border-color: transparent !important; /* Hides border since BG is filled */
}

/* Force the text inside the pill to change color too */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option:hover span {
    color: var(--ws-filter-pill-text-hover) !important;
}

/* 2. SEARCH / RESET ICONS: Ensure they don't disappear */
/* If the icon is inside a button that gets filled, make the icon white */
.ws-wc-filters-skin button:hover .ws-wc-filter-icon,
.ws-wc-filters-skin .ws-wc-filter-submit:hover svg,
.ws-wc-filters-skin .ws-wc-filter-search-submit:hover svg {
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* If the Reset button has a TRANSPARENT background (variable above), keep icon dark */
.ws-wc-filters-skin .ws-wc-filter-reset:hover {
    background-color: transparent !important;
}
.ws-wc-filters-skin .ws-wc-filter-reset:hover span {
    color: currentColor !important; /* Stays the text color */
}

/* 3. COLOUR SWATCH HOVER (Special Case) */
/* When hovering a colour pill, don't fill the background, just show border */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option:has(.ws-colour-swatch):hover {
    background-color: transparent !important;
    color: inherit !important;
    border-color: currentColor !important;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option:has(.ws-colour-swatch):hover span {
    color: inherit !important;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-12535a4 *//* ======================================================
WS WooCommerce Filter Builder — Theme Inherit Skin (FIXED)
========================================================= */

:root {
    /* 1. Global Typography & Colors (Inherit from Theme) */
    --ws-filter-font-family: inherit;
    --ws-filter-font-size: inherit;
    --ws-filter-text-color: inherit;
    --ws-filter-text-weight: inherit;

    /* 2. Labels */
    --ws-filter-label-color: inherit;
    --ws-filter-label-bg: transparent;
    --ws-filter-label-weight: 700; 
    --ws-filter-label-padding: 5px 0px; 
    --ws-filter-label-radius: 0px;

    /* 3. Pills (The Buttons) - Invert Logic */
    --ws-filter-pill-bg: transparent;
    --ws-filter-pill-text: inherit;
    --ws-filter-pill-border: 1px solid currentColor; /* Border matches text */
    



    /* 4. Dropdowns */
    --ws-filter-dropdown-bg: transparent;
    --ws-filter-dropdown-border: 1px solid rgba(136, 136, 136, 0.4);
    --ws-filter-dropdown-text-color: inherit;
    
    /* Dropdown Hover */
    --ws-filter-dropdown-hover-bg: currentColor; 
    --ws-filter-dropdown-text-hover: #ffffff; /* Force White on hover */

    /* 5. Reset & Search Icons */
    --ws-filter-reset-btn-bg: transparent;
    --ws-filter-reset-icon-color: #BC6C25; /* Normal state: matches text */
    
    /* FIX: Force icon to stay dark on hover if background is transparent */
    --ws-filter-reset-btn-bg-hover: transparent;
    --ws-filter-reset-icon-color-hover: currentColor; 

    /* 6. Inputs (Search/Price) */
    --ws-filter-input-bg: transparent;
    --ws-filter-input-border: 1px solid rgba(136, 136, 136, 0.4);
    --ws-filter-price-input-text-color: inherit;

    /* 7. Spacing */
    --ws-filter-gap-between-pills: 8px;
    --ws-filter-checkbox-size: 18px;
}

/* ======================================================
   Specific Hover Fixes
========================================================= */

/* 1. PILLS: When hovering a pill, invert the colors */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option {
    transition: all 0.2s ease;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option:hover {
    background-color: var(--ws-filter-pill-bg-hover) !important;
    color: var(--ws-filter-pill-text-hover) !important;
    border-color: transparent !important; /* Hides border since BG is filled */
}

/* Force the text inside the pill to change color too */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option:hover span {
    color: var(--ws-filter-pill-text-hover) !important;
}

/* 2. SEARCH / RESET ICONS: Ensure they don't disappear */
/* If the icon is inside a button that gets filled, make the icon white */
.ws-wc-filters-skin button:hover .ws-wc-filter-icon,
.ws-wc-filters-skin .ws-wc-filter-submit:hover svg,
.ws-wc-filters-skin .ws-wc-filter-search-submit:hover svg {
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* If the Reset button has a TRANSPARENT background (variable above), keep icon dark */
.ws-wc-filters-skin .ws-wc-filter-reset:hover {
    background-color: transparent !important;
}
.ws-wc-filters-skin .ws-wc-filter-reset:hover span {
    color: currentColor !important; /* Stays the text color */
}

/* 3. COLOUR SWATCH HOVER (Special Case) */
/* When hovering a colour pill, don't fill the background, just show border */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option:has(.ws-colour-swatch):hover {
    background-color: transparent !important;
    color: inherit !important;
    border-color: currentColor !important;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option:has(.ws-colour-swatch):hover span {
    color: inherit !important;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-b64d083 *//* ======================================================
WS WooCommerce Filter Builder — Theme Inherit Skin (FIXED)
========================================================= */

:root {
    /* 1. Global Typography & Colors (Inherit from Theme) */
    --ws-filter-font-family: inherit;
    --ws-filter-font-size: inherit;
    --ws-filter-text-color: inherit;
    --ws-filter-text-weight: inherit;

    /* 2. Labels */
    --ws-filter-label-color: inherit;
    --ws-filter-label-bg: transparent;
    --ws-filter-label-weight: 700; 
    --ws-filter-label-padding: 5px 0px; 
    --ws-filter-label-radius: 0px;

    /* 3. Pills (The Buttons) - Invert Logic */
    --ws-filter-pill-bg: transparent;
    --ws-filter-pill-text: inherit;
    --ws-filter-pill-border: 1px solid currentColor; /* Border matches text */
    



    /* 4. Dropdowns */
    --ws-filter-dropdown-bg: transparent;
    --ws-filter-dropdown-border: 1px solid rgba(136, 136, 136, 0.4);
    --ws-filter-dropdown-text-color: inherit;
    
    /* Dropdown Hover */
    --ws-filter-dropdown-hover-bg: currentColor; 
    --ws-filter-dropdown-text-hover: #ffffff; /* Force White on hover */

    /* 5. Reset & Search Icons */
    --ws-filter-reset-btn-bg: transparent;
    --ws-filter-reset-icon-color: #BC6C25; /* Normal state: matches text */
    
    /* FIX: Force icon to stay dark on hover if background is transparent */
    --ws-filter-reset-btn-bg-hover: transparent;
    --ws-filter-reset-icon-color-hover: currentColor; 

    /* 6. Inputs (Search/Price) */
    --ws-filter-input-bg: transparent;
    --ws-filter-input-border: 1px solid rgba(136, 136, 136, 0.4);
    --ws-filter-price-input-text-color: inherit;

    /* 7. Spacing */
    --ws-filter-gap-between-pills: 8px;
    --ws-filter-checkbox-size: 18px;
}

/* ======================================================
   Specific Hover Fixes
========================================================= */

/* 1. PILLS: When hovering a pill, invert the colors */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option {
    transition: all 0.2s ease;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option:hover {
    background-color: var(--ws-filter-pill-bg-hover) !important;
    color: var(--ws-filter-pill-text-hover) !important;
    border-color: transparent !important; /* Hides border since BG is filled */
}

/* Force the text inside the pill to change color too */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option:hover span {
    color: var(--ws-filter-pill-text-hover) !important;
}

/* 2. SEARCH / RESET ICONS: Ensure they don't disappear */
/* If the icon is inside a button that gets filled, make the icon white */
.ws-wc-filters-skin button:hover .ws-wc-filter-icon,
.ws-wc-filters-skin .ws-wc-filter-submit:hover svg,
.ws-wc-filters-skin .ws-wc-filter-search-submit:hover svg {
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* If the Reset button has a TRANSPARENT background (variable above), keep icon dark */
.ws-wc-filters-skin .ws-wc-filter-reset:hover {
    background-color: transparent !important;
}
.ws-wc-filters-skin .ws-wc-filter-reset:hover span {
    color: currentColor !important; /* Stays the text color */
}

/* 3. COLOUR SWATCH HOVER (Special Case) */
/* When hovering a colour pill, don't fill the background, just show border */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option:has(.ws-colour-swatch):hover {
    background-color: transparent !important;
    color: inherit !important;
    border-color: currentColor !important;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option:has(.ws-colour-swatch):hover span {
    color: inherit !important;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-f820092 *//* ======================================================
WS WooCommerce Filter Builder — Theme Inherit Skin (FIXED)
========================================================= */

:root {
    /* 1. Global Typography & Colors (Inherit from Theme) */
    --ws-filter-font-family: inherit;
    --ws-filter-font-size: inherit;
    --ws-filter-text-color: inherit;
    --ws-filter-text-weight: inherit;

    /* 2. Labels */
    --ws-filter-label-color: inherit;
    --ws-filter-label-bg: transparent;
    --ws-filter-label-weight: 700; 
    --ws-filter-label-padding: 5px 0px; 
    --ws-filter-label-radius: 0px;

    /* 3. Pills (The Buttons) - Invert Logic */
    --ws-filter-pill-bg: transparent;
    --ws-filter-pill-text: inherit;
    --ws-filter-pill-border: 1px solid currentColor; /* Border matches text */
    



    /* 4. Dropdowns */
    --ws-filter-dropdown-bg: transparent;
    --ws-filter-dropdown-border: 1px solid rgba(136, 136, 136, 0.4);
    --ws-filter-dropdown-text-color: inherit;
    
    /* Dropdown Hover */
    --ws-filter-dropdown-hover-bg: currentColor; 
    --ws-filter-dropdown-text-hover: #ffffff; /* Force White on hover */

    /* 5. Reset & Search Icons */
    --ws-filter-reset-btn-bg: transparent;
    --ws-filter-reset-icon-color: #BC6C25; /* Normal state: matches text */
    
    /* FIX: Force icon to stay dark on hover if background is transparent */
    --ws-filter-reset-btn-bg-hover: transparent;
    --ws-filter-reset-icon-color-hover: currentColor; 

    /* 6. Inputs (Search/Price) */
    --ws-filter-input-bg: transparent;
    --ws-filter-input-border: 1px solid rgba(136, 136, 136, 0.4);
    --ws-filter-price-input-text-color: inherit;

    /* 7. Spacing */
    --ws-filter-gap-between-pills: 8px;
    --ws-filter-checkbox-size: 18px;
}

/* ======================================================
   Specific Hover Fixes
========================================================= */

/* 1. PILLS: When hovering a pill, invert the colors */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option {
    transition: all 0.2s ease;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option:hover {
    background-color: var(--ws-filter-pill-bg-hover) !important;
    color: var(--ws-filter-pill-text-hover) !important;
    border-color: transparent !important; /* Hides border since BG is filled */
}

/* Force the text inside the pill to change color too */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option:hover span {
    color: var(--ws-filter-pill-text-hover) !important;
}

/* 2. SEARCH / RESET ICONS: Ensure they don't disappear */
/* If the icon is inside a button that gets filled, make the icon white */
.ws-wc-filters-skin button:hover .ws-wc-filter-icon,
.ws-wc-filters-skin .ws-wc-filter-submit:hover svg,
.ws-wc-filters-skin .ws-wc-filter-search-submit:hover svg {
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* If the Reset button has a TRANSPARENT background (variable above), keep icon dark */
.ws-wc-filters-skin .ws-wc-filter-reset:hover {
    background-color: transparent !important;
}
.ws-wc-filters-skin .ws-wc-filter-reset:hover span {
    color: currentColor !important; /* Stays the text color */
}

/* 3. COLOUR SWATCH HOVER (Special Case) */
/* When hovering a colour pill, don't fill the background, just show border */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option:has(.ws-colour-swatch):hover {
    background-color: transparent !important;
    color: inherit !important;
    border-color: currentColor !important;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option:has(.ws-colour-swatch):hover span {
    color: inherit !important;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-12535a4 *//* ======================================================
WS WooCommerce Filter Builder — Theme Inherit Skin (FIXED)
========================================================= */

:root {
    /* 1. Global Typography & Colors (Inherit from Theme) */
    --ws-filter-font-family: inherit;
    --ws-filter-font-size: inherit;
    --ws-filter-text-color: inherit;
    --ws-filter-text-weight: inherit;

    /* 2. Labels */
    --ws-filter-label-color: inherit;
    --ws-filter-label-bg: transparent;
    --ws-filter-label-weight: 700; 
    --ws-filter-label-padding: 5px 0px; 
    --ws-filter-label-radius: 0px;

    /* 3. Pills (The Buttons) - Invert Logic */
    --ws-filter-pill-bg: transparent;
    --ws-filter-pill-text: inherit;
    --ws-filter-pill-border: 1px solid currentColor; /* Border matches text */
    



    /* 4. Dropdowns */
    --ws-filter-dropdown-bg: transparent;
    --ws-filter-dropdown-border: 1px solid rgba(136, 136, 136, 0.4);
    --ws-filter-dropdown-text-color: inherit;
    
    /* Dropdown Hover */
    --ws-filter-dropdown-hover-bg: currentColor; 
    --ws-filter-dropdown-text-hover: #ffffff; /* Force White on hover */

    /* 5. Reset & Search Icons */
    --ws-filter-reset-btn-bg: transparent;
    --ws-filter-reset-icon-color: #BC6C25; /* Normal state: matches text */
    
    /* FIX: Force icon to stay dark on hover if background is transparent */
    --ws-filter-reset-btn-bg-hover: transparent;
    --ws-filter-reset-icon-color-hover: currentColor; 

    /* 6. Inputs (Search/Price) */
    --ws-filter-input-bg: transparent;
    --ws-filter-input-border: 1px solid rgba(136, 136, 136, 0.4);
    --ws-filter-price-input-text-color: inherit;

    /* 7. Spacing */
    --ws-filter-gap-between-pills: 8px;
    --ws-filter-checkbox-size: 18px;
}

/* ======================================================
   Specific Hover Fixes
========================================================= */

/* 1. PILLS: When hovering a pill, invert the colors */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option {
    transition: all 0.2s ease;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option:hover {
    background-color: var(--ws-filter-pill-bg-hover) !important;
    color: var(--ws-filter-pill-text-hover) !important;
    border-color: transparent !important; /* Hides border since BG is filled */
}

/* Force the text inside the pill to change color too */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option:hover span {
    color: var(--ws-filter-pill-text-hover) !important;
}

/* 2. SEARCH / RESET ICONS: Ensure they don't disappear */
/* If the icon is inside a button that gets filled, make the icon white */
.ws-wc-filters-skin button:hover .ws-wc-filter-icon,
.ws-wc-filters-skin .ws-wc-filter-submit:hover svg,
.ws-wc-filters-skin .ws-wc-filter-search-submit:hover svg {
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* If the Reset button has a TRANSPARENT background (variable above), keep icon dark */
.ws-wc-filters-skin .ws-wc-filter-reset:hover {
    background-color: transparent !important;
}
.ws-wc-filters-skin .ws-wc-filter-reset:hover span {
    color: currentColor !important; /* Stays the text color */
}

/* 3. COLOUR SWATCH HOVER (Special Case) */
/* When hovering a colour pill, don't fill the background, just show border */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option:has(.ws-colour-swatch):hover {
    background-color: transparent !important;
    color: inherit !important;
    border-color: currentColor !important;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option:has(.ws-colour-swatch):hover span {
    color: inherit !important;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-b64d083 *//* ======================================================
WS WooCommerce Filter Builder — Theme Inherit Skin (FIXED)
========================================================= */

:root {
    /* 1. Global Typography & Colors (Inherit from Theme) */
    --ws-filter-font-family: inherit;
    --ws-filter-font-size: inherit;
    --ws-filter-text-color: inherit;
    --ws-filter-text-weight: inherit;

    /* 2. Labels */
    --ws-filter-label-color: inherit;
    --ws-filter-label-bg: transparent;
    --ws-filter-label-weight: 700; 
    --ws-filter-label-padding: 5px 0px; 
    --ws-filter-label-radius: 0px;

    /* 3. Pills (The Buttons) - Invert Logic */
    --ws-filter-pill-bg: transparent;
    --ws-filter-pill-text: inherit;
    --ws-filter-pill-border: 1px solid currentColor; /* Border matches text */
    



    /* 4. Dropdowns */
    --ws-filter-dropdown-bg: transparent;
    --ws-filter-dropdown-border: 1px solid rgba(136, 136, 136, 0.4);
    --ws-filter-dropdown-text-color: inherit;
    
    /* Dropdown Hover */
    --ws-filter-dropdown-hover-bg: currentColor; 
    --ws-filter-dropdown-text-hover: #ffffff; /* Force White on hover */

    /* 5. Reset & Search Icons */
    --ws-filter-reset-btn-bg: transparent;
    --ws-filter-reset-icon-color: #BC6C25; /* Normal state: matches text */
    
    /* FIX: Force icon to stay dark on hover if background is transparent */
    --ws-filter-reset-btn-bg-hover: transparent;
    --ws-filter-reset-icon-color-hover: currentColor; 

    /* 6. Inputs (Search/Price) */
    --ws-filter-input-bg: transparent;
    --ws-filter-input-border: 1px solid rgba(136, 136, 136, 0.4);
    --ws-filter-price-input-text-color: inherit;

    /* 7. Spacing */
    --ws-filter-gap-between-pills: 8px;
    --ws-filter-checkbox-size: 18px;
}

/* ======================================================
   Specific Hover Fixes
========================================================= */

/* 1. PILLS: When hovering a pill, invert the colors */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option {
    transition: all 0.2s ease;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option:hover {
    background-color: var(--ws-filter-pill-bg-hover) !important;
    color: var(--ws-filter-pill-text-hover) !important;
    border-color: transparent !important; /* Hides border since BG is filled */
}

/* Force the text inside the pill to change color too */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option:hover span {
    color: var(--ws-filter-pill-text-hover) !important;
}

/* 2. SEARCH / RESET ICONS: Ensure they don't disappear */
/* If the icon is inside a button that gets filled, make the icon white */
.ws-wc-filters-skin button:hover .ws-wc-filter-icon,
.ws-wc-filters-skin .ws-wc-filter-submit:hover svg,
.ws-wc-filters-skin .ws-wc-filter-search-submit:hover svg {
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* If the Reset button has a TRANSPARENT background (variable above), keep icon dark */
.ws-wc-filters-skin .ws-wc-filter-reset:hover {
    background-color: transparent !important;
}
.ws-wc-filters-skin .ws-wc-filter-reset:hover span {
    color: currentColor !important; /* Stays the text color */
}

/* 3. COLOUR SWATCH HOVER (Special Case) */
/* When hovering a colour pill, don't fill the background, just show border */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option:has(.ws-colour-swatch):hover {
    background-color: transparent !important;
    color: inherit !important;
    border-color: currentColor !important;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option:has(.ws-colour-swatch):hover span {
    color: inherit !important;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-2db8d20 *//* ======================================================
WS WooCommerce Filter Builder — Theme Inherit Skin (FIXED)
========================================================= */

:root {
    /* 1. Global Typography & Colors (Inherit from Theme) */
    --ws-filter-font-family: inherit;
    --ws-filter-font-size: inherit;
    --ws-filter-text-color: inherit;
    --ws-filter-text-weight: inherit;

    /* 2. Labels */
    --ws-filter-label-color: inherit;
    --ws-filter-label-bg: transparent;
    --ws-filter-label-weight: 700; 
    --ws-filter-label-padding: 5px 0px; 
    --ws-filter-label-radius: 0px;

    /* 3. Pills (The Buttons) - Invert Logic */
    --ws-filter-pill-bg: transparent;
    --ws-filter-pill-text: inherit;
    --ws-filter-pill-border: 1px solid currentColor; /* Border matches text */
    



    /* 4. Dropdowns */
    --ws-filter-dropdown-bg: transparent;
    --ws-filter-dropdown-border: 1px solid rgba(136, 136, 136, 0.4);
    --ws-filter-dropdown-text-color: inherit;
    
    /* Dropdown Hover */
    --ws-filter-dropdown-hover-bg: currentColor; 
    --ws-filter-dropdown-text-hover: #ffffff; /* Force White on hover */

    /* 5. Reset & Search Icons */
    --ws-filter-reset-btn-bg: transparent;
    --ws-filter-reset-icon-color: #BC6C25; /* Normal state: matches text */
    
    /* FIX: Force icon to stay dark on hover if background is transparent */
    --ws-filter-reset-btn-bg-hover: transparent;
    --ws-filter-reset-icon-color-hover: currentColor; 

    /* 6. Inputs (Search/Price) */
    --ws-filter-input-bg: transparent;
    --ws-filter-input-border: 1px solid rgba(136, 136, 136, 0.4);
    --ws-filter-price-input-text-color: inherit;

    /* 7. Spacing */
    --ws-filter-gap-between-pills: 8px;
    --ws-filter-checkbox-size: 18px;
}

/* ======================================================
   Specific Hover Fixes
========================================================= */

/* 1. PILLS: When hovering a pill, invert the colors */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option {
    transition: all 0.2s ease;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option:hover {
    background-color: var(--ws-filter-pill-bg-hover) !important;
    color: var(--ws-filter-pill-text-hover) !important;
    border-color: transparent !important; /* Hides border since BG is filled */
}

/* Force the text inside the pill to change color too */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option:hover span {
    color: var(--ws-filter-pill-text-hover) !important;
}

/* 2. SEARCH / RESET ICONS: Ensure they don't disappear */
/* If the icon is inside a button that gets filled, make the icon white */
.ws-wc-filters-skin button:hover .ws-wc-filter-icon,
.ws-wc-filters-skin .ws-wc-filter-submit:hover svg,
.ws-wc-filters-skin .ws-wc-filter-search-submit:hover svg {
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* If the Reset button has a TRANSPARENT background (variable above), keep icon dark */
.ws-wc-filters-skin .ws-wc-filter-reset:hover {
    background-color: transparent !important;
}
.ws-wc-filters-skin .ws-wc-filter-reset:hover span {
    color: currentColor !important; /* Stays the text color */
}

/* 3. COLOUR SWATCH HOVER (Special Case) */
/* When hovering a colour pill, don't fill the background, just show border */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option:has(.ws-colour-swatch):hover {
    background-color: transparent !important;
    color: inherit !important;
    border-color: currentColor !important;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option:has(.ws-colour-swatch):hover span {
    color: inherit !important;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-a4c8919 *//* ======================================================
WS WooCommerce Filter Builder — Theme Inherit Skin (FIXED)
========================================================= */

:root {
    /* 1. Global Typography & Colors (Inherit from Theme) */
    --ws-filter-font-family: inherit;
    --ws-filter-font-size: inherit;
    --ws-filter-text-color: inherit;
    --ws-filter-text-weight: inherit;

    /* 2. Labels */
    --ws-filter-label-color: inherit;
    --ws-filter-label-bg: transparent;
    --ws-filter-label-weight: 700; 
    --ws-filter-label-padding: 5px 0px; 
    --ws-filter-label-radius: 0px;

    /* 3. Pills (The Buttons) - Invert Logic */
    --ws-filter-pill-bg: transparent;
    --ws-filter-pill-text: inherit;
    --ws-filter-pill-border: 1px solid currentColor; /* Border matches text */
    



    /* 4. Dropdowns */
    --ws-filter-dropdown-bg: transparent;
    --ws-filter-dropdown-border: 1px solid rgba(136, 136, 136, 0.4);
    --ws-filter-dropdown-text-color: inherit;
    
    /* Dropdown Hover */
    --ws-filter-dropdown-hover-bg: currentColor; 
    --ws-filter-dropdown-text-hover: #ffffff; /* Force White on hover */

    /* 5. Reset & Search Icons */
    --ws-filter-reset-btn-bg: transparent;
    --ws-filter-reset-icon-color: #BC6C25; /* Normal state: matches text */
    
    /* FIX: Force icon to stay dark on hover if background is transparent */
    --ws-filter-reset-btn-bg-hover: transparent;
    --ws-filter-reset-icon-color-hover: currentColor; 

    /* 6. Inputs (Search/Price) */
    --ws-filter-input-bg: transparent;
    --ws-filter-input-border: 1px solid rgba(136, 136, 136, 0.4);
    --ws-filter-price-input-text-color: inherit;

    /* 7. Spacing */
    --ws-filter-gap-between-pills: 8px;
    --ws-filter-checkbox-size: 18px;
}

/* ======================================================
   Specific Hover Fixes
========================================================= */

/* 1. PILLS: When hovering a pill, invert the colors */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option {
    transition: all 0.2s ease;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option:hover {
    background-color: var(--ws-filter-pill-bg-hover) !important;
    color: var(--ws-filter-pill-text-hover) !important;
    border-color: transparent !important; /* Hides border since BG is filled */
}

/* Force the text inside the pill to change color too */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option:hover span {
    color: var(--ws-filter-pill-text-hover) !important;
}

/* 2. SEARCH / RESET ICONS: Ensure they don't disappear */
/* If the icon is inside a button that gets filled, make the icon white */
.ws-wc-filters-skin button:hover .ws-wc-filter-icon,
.ws-wc-filters-skin .ws-wc-filter-submit:hover svg,
.ws-wc-filters-skin .ws-wc-filter-search-submit:hover svg {
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* If the Reset button has a TRANSPARENT background (variable above), keep icon dark */
.ws-wc-filters-skin .ws-wc-filter-reset:hover {
    background-color: transparent !important;
}
.ws-wc-filters-skin .ws-wc-filter-reset:hover span {
    color: currentColor !important; /* Stays the text color */
}

/* 3. COLOUR SWATCH HOVER (Special Case) */
/* When hovering a colour pill, don't fill the background, just show border */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option:has(.ws-colour-swatch):hover {
    background-color: transparent !important;
    color: inherit !important;
    border-color: currentColor !important;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option:has(.ws-colour-swatch):hover span {
    color: inherit !important;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-bf3de96 *//* ======================================================
WS WooCommerce Filter Builder — Theme Inherit Skin (FIXED)
========================================================= */

:root {
    /* 1. Global Typography & Colors (Inherit from Theme) */
    --ws-filter-font-family: inherit;
    --ws-filter-font-size: inherit;
    --ws-filter-text-color: inherit;
    --ws-filter-text-weight: inherit;

    /* 2. Labels */
    --ws-filter-label-color: inherit;
    --ws-filter-label-bg: transparent;
    --ws-filter-label-weight: 700; 
    --ws-filter-label-padding: 5px 0px; 
    --ws-filter-label-radius: 0px;

    /* 3. Pills (The Buttons) - Invert Logic */
    --ws-filter-pill-bg: transparent;
    --ws-filter-pill-text: inherit;
    --ws-filter-pill-border: 1px solid currentColor; /* Border matches text */
    



    /* 4. Dropdowns */
    --ws-filter-dropdown-bg: transparent;
    --ws-filter-dropdown-border: 1px solid rgba(136, 136, 136, 0.4);
    --ws-filter-dropdown-text-color: inherit;
    
    /* Dropdown Hover */
    --ws-filter-dropdown-hover-bg: currentColor; 
    --ws-filter-dropdown-text-hover: #ffffff; /* Force White on hover */

    /* 5. Reset & Search Icons */
    --ws-filter-reset-btn-bg: transparent;
    --ws-filter-reset-icon-color: #BC6C25; /* Normal state: matches text */
    
    /* FIX: Force icon to stay dark on hover if background is transparent */
    --ws-filter-reset-btn-bg-hover: transparent;
    --ws-filter-reset-icon-color-hover: currentColor; 

    /* 6. Inputs (Search/Price) */
    --ws-filter-input-bg: transparent;
    --ws-filter-input-border: 1px solid rgba(136, 136, 136, 0.4);
    --ws-filter-price-input-text-color: inherit;

    /* 7. Spacing */
    --ws-filter-gap-between-pills: 8px;
    --ws-filter-checkbox-size: 18px;
}

/* ======================================================
   Specific Hover Fixes
========================================================= */

/* 1. PILLS: When hovering a pill, invert the colors */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option {
    transition: all 0.2s ease;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option:hover {
    background-color: var(--ws-filter-pill-bg-hover) !important;
    color: var(--ws-filter-pill-text-hover) !important;
    border-color: transparent !important; /* Hides border since BG is filled */
}

/* Force the text inside the pill to change color too */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option:hover span {
    color: var(--ws-filter-pill-text-hover) !important;
}

/* 2. SEARCH / RESET ICONS: Ensure they don't disappear */
/* If the icon is inside a button that gets filled, make the icon white */
.ws-wc-filters-skin button:hover .ws-wc-filter-icon,
.ws-wc-filters-skin .ws-wc-filter-submit:hover svg,
.ws-wc-filters-skin .ws-wc-filter-search-submit:hover svg {
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* If the Reset button has a TRANSPARENT background (variable above), keep icon dark */
.ws-wc-filters-skin .ws-wc-filter-reset:hover {
    background-color: transparent !important;
}
.ws-wc-filters-skin .ws-wc-filter-reset:hover span {
    color: currentColor !important; /* Stays the text color */
}

/* 3. COLOUR SWATCH HOVER (Special Case) */
/* When hovering a colour pill, don't fill the background, just show border */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option:has(.ws-colour-swatch):hover {
    background-color: transparent !important;
    color: inherit !important;
    border-color: currentColor !important;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option:has(.ws-colour-swatch):hover span {
    color: inherit !important;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-2db8d20 *//* ======================================================
WS WooCommerce Filter Builder — Theme Inherit Skin (FIXED)
========================================================= */

:root {
    /* 1. Global Typography & Colors (Inherit from Theme) */
    --ws-filter-font-family: inherit;
    --ws-filter-font-size: inherit;
    --ws-filter-text-color: inherit;
    --ws-filter-text-weight: inherit;

    /* 2. Labels */
    --ws-filter-label-color: inherit;
    --ws-filter-label-bg: transparent;
    --ws-filter-label-weight: 700; 
    --ws-filter-label-padding: 5px 0px; 
    --ws-filter-label-radius: 0px;

    /* 3. Pills (The Buttons) - Invert Logic */
    --ws-filter-pill-bg: transparent;
    --ws-filter-pill-text: inherit;
    --ws-filter-pill-border: 1px solid currentColor; /* Border matches text */
    



    /* 4. Dropdowns */
    --ws-filter-dropdown-bg: transparent;
    --ws-filter-dropdown-border: 1px solid rgba(136, 136, 136, 0.4);
    --ws-filter-dropdown-text-color: inherit;
    
    /* Dropdown Hover */
    --ws-filter-dropdown-hover-bg: currentColor; 
    --ws-filter-dropdown-text-hover: #ffffff; /* Force White on hover */

    /* 5. Reset & Search Icons */
    --ws-filter-reset-btn-bg: transparent;
    --ws-filter-reset-icon-color: #BC6C25; /* Normal state: matches text */
    
    /* FIX: Force icon to stay dark on hover if background is transparent */
    --ws-filter-reset-btn-bg-hover: transparent;
    --ws-filter-reset-icon-color-hover: currentColor; 

    /* 6. Inputs (Search/Price) */
    --ws-filter-input-bg: transparent;
    --ws-filter-input-border: 1px solid rgba(136, 136, 136, 0.4);
    --ws-filter-price-input-text-color: inherit;

    /* 7. Spacing */
    --ws-filter-gap-between-pills: 8px;
    --ws-filter-checkbox-size: 18px;
}

/* ======================================================
   Specific Hover Fixes
========================================================= */

/* 1. PILLS: When hovering a pill, invert the colors */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option {
    transition: all 0.2s ease;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option:hover {
    background-color: var(--ws-filter-pill-bg-hover) !important;
    color: var(--ws-filter-pill-text-hover) !important;
    border-color: transparent !important; /* Hides border since BG is filled */
}

/* Force the text inside the pill to change color too */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option:hover span {
    color: var(--ws-filter-pill-text-hover) !important;
}

/* 2. SEARCH / RESET ICONS: Ensure they don't disappear */
/* If the icon is inside a button that gets filled, make the icon white */
.ws-wc-filters-skin button:hover .ws-wc-filter-icon,
.ws-wc-filters-skin .ws-wc-filter-submit:hover svg,
.ws-wc-filters-skin .ws-wc-filter-search-submit:hover svg {
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* If the Reset button has a TRANSPARENT background (variable above), keep icon dark */
.ws-wc-filters-skin .ws-wc-filter-reset:hover {
    background-color: transparent !important;
}
.ws-wc-filters-skin .ws-wc-filter-reset:hover span {
    color: currentColor !important; /* Stays the text color */
}

/* 3. COLOUR SWATCH HOVER (Special Case) */
/* When hovering a colour pill, don't fill the background, just show border */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option:has(.ws-colour-swatch):hover {
    background-color: transparent !important;
    color: inherit !important;
    border-color: currentColor !important;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option:has(.ws-colour-swatch):hover span {
    color: inherit !important;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-a4c8919 *//* ======================================================
WS WooCommerce Filter Builder — Theme Inherit Skin (FIXED)
========================================================= */

:root {
    /* 1. Global Typography & Colors (Inherit from Theme) */
    --ws-filter-font-family: inherit;
    --ws-filter-font-size: inherit;
    --ws-filter-text-color: inherit;
    --ws-filter-text-weight: inherit;

    /* 2. Labels */
    --ws-filter-label-color: inherit;
    --ws-filter-label-bg: transparent;
    --ws-filter-label-weight: 700; 
    --ws-filter-label-padding: 5px 0px; 
    --ws-filter-label-radius: 0px;

    /* 3. Pills (The Buttons) - Invert Logic */
    --ws-filter-pill-bg: transparent;
    --ws-filter-pill-text: inherit;
    --ws-filter-pill-border: 1px solid currentColor; /* Border matches text */
    



    /* 4. Dropdowns */
    --ws-filter-dropdown-bg: transparent;
    --ws-filter-dropdown-border: 1px solid rgba(136, 136, 136, 0.4);
    --ws-filter-dropdown-text-color: inherit;
    
    /* Dropdown Hover */
    --ws-filter-dropdown-hover-bg: currentColor; 
    --ws-filter-dropdown-text-hover: #ffffff; /* Force White on hover */

    /* 5. Reset & Search Icons */
    --ws-filter-reset-btn-bg: transparent;
    --ws-filter-reset-icon-color: #BC6C25; /* Normal state: matches text */
    
    /* FIX: Force icon to stay dark on hover if background is transparent */
    --ws-filter-reset-btn-bg-hover: transparent;
    --ws-filter-reset-icon-color-hover: currentColor; 

    /* 6. Inputs (Search/Price) */
    --ws-filter-input-bg: transparent;
    --ws-filter-input-border: 1px solid rgba(136, 136, 136, 0.4);
    --ws-filter-price-input-text-color: inherit;

    /* 7. Spacing */
    --ws-filter-gap-between-pills: 8px;
    --ws-filter-checkbox-size: 18px;
}

/* ======================================================
   Specific Hover Fixes
========================================================= */

/* 1. PILLS: When hovering a pill, invert the colors */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option {
    transition: all 0.2s ease;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option:hover {
    background-color: var(--ws-filter-pill-bg-hover) !important;
    color: var(--ws-filter-pill-text-hover) !important;
    border-color: transparent !important; /* Hides border since BG is filled */
}

/* Force the text inside the pill to change color too */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option:hover span {
    color: var(--ws-filter-pill-text-hover) !important;
}

/* 2. SEARCH / RESET ICONS: Ensure they don't disappear */
/* If the icon is inside a button that gets filled, make the icon white */
.ws-wc-filters-skin button:hover .ws-wc-filter-icon,
.ws-wc-filters-skin .ws-wc-filter-submit:hover svg,
.ws-wc-filters-skin .ws-wc-filter-search-submit:hover svg {
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* If the Reset button has a TRANSPARENT background (variable above), keep icon dark */
.ws-wc-filters-skin .ws-wc-filter-reset:hover {
    background-color: transparent !important;
}
.ws-wc-filters-skin .ws-wc-filter-reset:hover span {
    color: currentColor !important; /* Stays the text color */
}

/* 3. COLOUR SWATCH HOVER (Special Case) */
/* When hovering a colour pill, don't fill the background, just show border */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option:has(.ws-colour-swatch):hover {
    background-color: transparent !important;
    color: inherit !important;
    border-color: currentColor !important;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option:has(.ws-colour-swatch):hover span {
    color: inherit !important;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-bf3de96 *//* ======================================================
WS WooCommerce Filter Builder — Theme Inherit Skin (FIXED)
========================================================= */

:root {
    /* 1. Global Typography & Colors (Inherit from Theme) */
    --ws-filter-font-family: inherit;
    --ws-filter-font-size: inherit;
    --ws-filter-text-color: inherit;
    --ws-filter-text-weight: inherit;

    /* 2. Labels */
    --ws-filter-label-color: inherit;
    --ws-filter-label-bg: transparent;
    --ws-filter-label-weight: 700; 
    --ws-filter-label-padding: 5px 0px; 
    --ws-filter-label-radius: 0px;

    /* 3. Pills (The Buttons) - Invert Logic */
    --ws-filter-pill-bg: transparent;
    --ws-filter-pill-text: inherit;
    --ws-filter-pill-border: 1px solid currentColor; /* Border matches text */
    



    /* 4. Dropdowns */
    --ws-filter-dropdown-bg: transparent;
    --ws-filter-dropdown-border: 1px solid rgba(136, 136, 136, 0.4);
    --ws-filter-dropdown-text-color: inherit;
    
    /* Dropdown Hover */
    --ws-filter-dropdown-hover-bg: currentColor; 
    --ws-filter-dropdown-text-hover: #ffffff; /* Force White on hover */

    /* 5. Reset & Search Icons */
    --ws-filter-reset-btn-bg: transparent;
    --ws-filter-reset-icon-color: #BC6C25; /* Normal state: matches text */
    
    /* FIX: Force icon to stay dark on hover if background is transparent */
    --ws-filter-reset-btn-bg-hover: transparent;
    --ws-filter-reset-icon-color-hover: currentColor; 

    /* 6. Inputs (Search/Price) */
    --ws-filter-input-bg: transparent;
    --ws-filter-input-border: 1px solid rgba(136, 136, 136, 0.4);
    --ws-filter-price-input-text-color: inherit;

    /* 7. Spacing */
    --ws-filter-gap-between-pills: 8px;
    --ws-filter-checkbox-size: 18px;
}

/* ======================================================
   Specific Hover Fixes
========================================================= */

/* 1. PILLS: When hovering a pill, invert the colors */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option {
    transition: all 0.2s ease;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option:hover {
    background-color: var(--ws-filter-pill-bg-hover) !important;
    color: var(--ws-filter-pill-text-hover) !important;
    border-color: transparent !important; /* Hides border since BG is filled */
}

/* Force the text inside the pill to change color too */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option:hover span {
    color: var(--ws-filter-pill-text-hover) !important;
}

/* 2. SEARCH / RESET ICONS: Ensure they don't disappear */
/* If the icon is inside a button that gets filled, make the icon white */
.ws-wc-filters-skin button:hover .ws-wc-filter-icon,
.ws-wc-filters-skin .ws-wc-filter-submit:hover svg,
.ws-wc-filters-skin .ws-wc-filter-search-submit:hover svg {
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* If the Reset button has a TRANSPARENT background (variable above), keep icon dark */
.ws-wc-filters-skin .ws-wc-filter-reset:hover {
    background-color: transparent !important;
}
.ws-wc-filters-skin .ws-wc-filter-reset:hover span {
    color: currentColor !important; /* Stays the text color */
}

/* 3. COLOUR SWATCH HOVER (Special Case) */
/* When hovering a colour pill, don't fill the background, just show border */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option:has(.ws-colour-swatch):hover {
    background-color: transparent !important;
    color: inherit !important;
    border-color: currentColor !important;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option:has(.ws-colour-swatch):hover span {
    color: inherit !important;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-2db8d20 *//* ======================================================
WS WooCommerce Filter Builder — Theme Inherit Skin (FIXED)
========================================================= */

:root {
    /* 1. Global Typography & Colors (Inherit from Theme) */
    --ws-filter-font-family: inherit;
    --ws-filter-font-size: inherit;
    --ws-filter-text-color: inherit;
    --ws-filter-text-weight: inherit;

    /* 2. Labels */
    --ws-filter-label-color: inherit;
    --ws-filter-label-bg: transparent;
    --ws-filter-label-weight: 700; 
    --ws-filter-label-padding: 5px 0px; 
    --ws-filter-label-radius: 0px;

    /* 3. Pills (The Buttons) - Invert Logic */
    --ws-filter-pill-bg: transparent;
    --ws-filter-pill-text: inherit;
    --ws-filter-pill-border: 1px solid currentColor; /* Border matches text */
    



    /* 4. Dropdowns */
    --ws-filter-dropdown-bg: transparent;
    --ws-filter-dropdown-border: 1px solid rgba(136, 136, 136, 0.4);
    --ws-filter-dropdown-text-color: inherit;
    
    /* Dropdown Hover */
    --ws-filter-dropdown-hover-bg: currentColor; 
    --ws-filter-dropdown-text-hover: #ffffff; /* Force White on hover */

    /* 5. Reset & Search Icons */
    --ws-filter-reset-btn-bg: transparent;
    --ws-filter-reset-icon-color: #BC6C25; /* Normal state: matches text */
    
    /* FIX: Force icon to stay dark on hover if background is transparent */
    --ws-filter-reset-btn-bg-hover: transparent;
    --ws-filter-reset-icon-color-hover: currentColor; 

    /* 6. Inputs (Search/Price) */
    --ws-filter-input-bg: transparent;
    --ws-filter-input-border: 1px solid rgba(136, 136, 136, 0.4);
    --ws-filter-price-input-text-color: inherit;

    /* 7. Spacing */
    --ws-filter-gap-between-pills: 8px;
    --ws-filter-checkbox-size: 18px;
}

/* ======================================================
   Specific Hover Fixes
========================================================= */

/* 1. PILLS: When hovering a pill, invert the colors */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option {
    transition: all 0.2s ease;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option:hover {
    background-color: var(--ws-filter-pill-bg-hover) !important;
    color: var(--ws-filter-pill-text-hover) !important;
    border-color: transparent !important; /* Hides border since BG is filled */
}

/* Force the text inside the pill to change color too */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option:hover span {
    color: var(--ws-filter-pill-text-hover) !important;
}

/* 2. SEARCH / RESET ICONS: Ensure they don't disappear */
/* If the icon is inside a button that gets filled, make the icon white */
.ws-wc-filters-skin button:hover .ws-wc-filter-icon,
.ws-wc-filters-skin .ws-wc-filter-submit:hover svg,
.ws-wc-filters-skin .ws-wc-filter-search-submit:hover svg {
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* If the Reset button has a TRANSPARENT background (variable above), keep icon dark */
.ws-wc-filters-skin .ws-wc-filter-reset:hover {
    background-color: transparent !important;
}
.ws-wc-filters-skin .ws-wc-filter-reset:hover span {
    color: currentColor !important; /* Stays the text color */
}

/* 3. COLOUR SWATCH HOVER (Special Case) */
/* When hovering a colour pill, don't fill the background, just show border */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option:has(.ws-colour-swatch):hover {
    background-color: transparent !important;
    color: inherit !important;
    border-color: currentColor !important;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option:has(.ws-colour-swatch):hover span {
    color: inherit !important;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-a4c8919 *//* ======================================================
WS WooCommerce Filter Builder — Theme Inherit Skin (FIXED)
========================================================= */

:root {
    /* 1. Global Typography & Colors (Inherit from Theme) */
    --ws-filter-font-family: inherit;
    --ws-filter-font-size: inherit;
    --ws-filter-text-color: inherit;
    --ws-filter-text-weight: inherit;

    /* 2. Labels */
    --ws-filter-label-color: inherit;
    --ws-filter-label-bg: transparent;
    --ws-filter-label-weight: 700; 
    --ws-filter-label-padding: 5px 0px; 
    --ws-filter-label-radius: 0px;

    /* 3. Pills (The Buttons) - Invert Logic */
    --ws-filter-pill-bg: transparent;
    --ws-filter-pill-text: inherit;
    --ws-filter-pill-border: 1px solid currentColor; /* Border matches text */
    



    /* 4. Dropdowns */
    --ws-filter-dropdown-bg: transparent;
    --ws-filter-dropdown-border: 1px solid rgba(136, 136, 136, 0.4);
    --ws-filter-dropdown-text-color: inherit;
    
    /* Dropdown Hover */
    --ws-filter-dropdown-hover-bg: currentColor; 
    --ws-filter-dropdown-text-hover: #ffffff; /* Force White on hover */

    /* 5. Reset & Search Icons */
    --ws-filter-reset-btn-bg: transparent;
    --ws-filter-reset-icon-color: #BC6C25; /* Normal state: matches text */
    
    /* FIX: Force icon to stay dark on hover if background is transparent */
    --ws-filter-reset-btn-bg-hover: transparent;
    --ws-filter-reset-icon-color-hover: currentColor; 

    /* 6. Inputs (Search/Price) */
    --ws-filter-input-bg: transparent;
    --ws-filter-input-border: 1px solid rgba(136, 136, 136, 0.4);
    --ws-filter-price-input-text-color: inherit;

    /* 7. Spacing */
    --ws-filter-gap-between-pills: 8px;
    --ws-filter-checkbox-size: 18px;
}

/* ======================================================
   Specific Hover Fixes
========================================================= */

/* 1. PILLS: When hovering a pill, invert the colors */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option {
    transition: all 0.2s ease;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option:hover {
    background-color: var(--ws-filter-pill-bg-hover) !important;
    color: var(--ws-filter-pill-text-hover) !important;
    border-color: transparent !important; /* Hides border since BG is filled */
}

/* Force the text inside the pill to change color too */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option:hover span {
    color: var(--ws-filter-pill-text-hover) !important;
}

/* 2. SEARCH / RESET ICONS: Ensure they don't disappear */
/* If the icon is inside a button that gets filled, make the icon white */
.ws-wc-filters-skin button:hover .ws-wc-filter-icon,
.ws-wc-filters-skin .ws-wc-filter-submit:hover svg,
.ws-wc-filters-skin .ws-wc-filter-search-submit:hover svg {
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* If the Reset button has a TRANSPARENT background (variable above), keep icon dark */
.ws-wc-filters-skin .ws-wc-filter-reset:hover {
    background-color: transparent !important;
}
.ws-wc-filters-skin .ws-wc-filter-reset:hover span {
    color: currentColor !important; /* Stays the text color */
}

/* 3. COLOUR SWATCH HOVER (Special Case) */
/* When hovering a colour pill, don't fill the background, just show border */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option:has(.ws-colour-swatch):hover {
    background-color: transparent !important;
    color: inherit !important;
    border-color: currentColor !important;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option:has(.ws-colour-swatch):hover span {
    color: inherit !important;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-bf3de96 *//* ======================================================
WS WooCommerce Filter Builder — Theme Inherit Skin (FIXED)
========================================================= */

:root {
    /* 1. Global Typography & Colors (Inherit from Theme) */
    --ws-filter-font-family: inherit;
    --ws-filter-font-size: inherit;
    --ws-filter-text-color: inherit;
    --ws-filter-text-weight: inherit;

    /* 2. Labels */
    --ws-filter-label-color: inherit;
    --ws-filter-label-bg: transparent;
    --ws-filter-label-weight: 700; 
    --ws-filter-label-padding: 5px 0px; 
    --ws-filter-label-radius: 0px;

    /* 3. Pills (The Buttons) - Invert Logic */
    --ws-filter-pill-bg: transparent;
    --ws-filter-pill-text: inherit;
    --ws-filter-pill-border: 1px solid currentColor; /* Border matches text */
    



    /* 4. Dropdowns */
    --ws-filter-dropdown-bg: transparent;
    --ws-filter-dropdown-border: 1px solid rgba(136, 136, 136, 0.4);
    --ws-filter-dropdown-text-color: inherit;
    
    /* Dropdown Hover */
    --ws-filter-dropdown-hover-bg: currentColor; 
    --ws-filter-dropdown-text-hover: #ffffff; /* Force White on hover */

    /* 5. Reset & Search Icons */
    --ws-filter-reset-btn-bg: transparent;
    --ws-filter-reset-icon-color: #BC6C25; /* Normal state: matches text */
    
    /* FIX: Force icon to stay dark on hover if background is transparent */
    --ws-filter-reset-btn-bg-hover: transparent;
    --ws-filter-reset-icon-color-hover: currentColor; 

    /* 6. Inputs (Search/Price) */
    --ws-filter-input-bg: transparent;
    --ws-filter-input-border: 1px solid rgba(136, 136, 136, 0.4);
    --ws-filter-price-input-text-color: inherit;

    /* 7. Spacing */
    --ws-filter-gap-between-pills: 8px;
    --ws-filter-checkbox-size: 18px;
}

/* ======================================================
   Specific Hover Fixes
========================================================= */

/* 1. PILLS: When hovering a pill, invert the colors */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option {
    transition: all 0.2s ease;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option:hover {
    background-color: var(--ws-filter-pill-bg-hover) !important;
    color: var(--ws-filter-pill-text-hover) !important;
    border-color: transparent !important; /* Hides border since BG is filled */
}

/* Force the text inside the pill to change color too */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option:hover span {
    color: var(--ws-filter-pill-text-hover) !important;
}

/* 2. SEARCH / RESET ICONS: Ensure they don't disappear */
/* If the icon is inside a button that gets filled, make the icon white */
.ws-wc-filters-skin button:hover .ws-wc-filter-icon,
.ws-wc-filters-skin .ws-wc-filter-submit:hover svg,
.ws-wc-filters-skin .ws-wc-filter-search-submit:hover svg {
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* If the Reset button has a TRANSPARENT background (variable above), keep icon dark */
.ws-wc-filters-skin .ws-wc-filter-reset:hover {
    background-color: transparent !important;
}
.ws-wc-filters-skin .ws-wc-filter-reset:hover span {
    color: currentColor !important; /* Stays the text color */
}

/* 3. COLOUR SWATCH HOVER (Special Case) */
/* When hovering a colour pill, don't fill the background, just show border */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option:has(.ws-colour-swatch):hover {
    background-color: transparent !important;
    color: inherit !important;
    border-color: currentColor !important;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option:has(.ws-colour-swatch):hover span {
    color: inherit !important;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-2db8d20 *//* ======================================================
WS WooCommerce Filter Builder — Theme Inherit Skin (FIXED)
========================================================= */

:root {
    /* 1. Global Typography & Colors (Inherit from Theme) */
    --ws-filter-font-family: inherit;
    --ws-filter-font-size: inherit;
    --ws-filter-text-color: inherit;
    --ws-filter-text-weight: inherit;

    /* 2. Labels */
    --ws-filter-label-color: inherit;
    --ws-filter-label-bg: transparent;
    --ws-filter-label-weight: 700; 
    --ws-filter-label-padding: 5px 0px; 
    --ws-filter-label-radius: 0px;

    /* 3. Pills (The Buttons) - Invert Logic */
    --ws-filter-pill-bg: transparent;
    --ws-filter-pill-text: inherit;
    --ws-filter-pill-border: 1px solid currentColor; /* Border matches text */
    



    /* 4. Dropdowns */
    --ws-filter-dropdown-bg: transparent;
    --ws-filter-dropdown-border: 1px solid rgba(136, 136, 136, 0.4);
    --ws-filter-dropdown-text-color: inherit;
    
    /* Dropdown Hover */
    --ws-filter-dropdown-hover-bg: currentColor; 
    --ws-filter-dropdown-text-hover: #ffffff; /* Force White on hover */

    /* 5. Reset & Search Icons */
    --ws-filter-reset-btn-bg: transparent;
    --ws-filter-reset-icon-color: #BC6C25; /* Normal state: matches text */
    
    /* FIX: Force icon to stay dark on hover if background is transparent */
    --ws-filter-reset-btn-bg-hover: transparent;
    --ws-filter-reset-icon-color-hover: currentColor; 

    /* 6. Inputs (Search/Price) */
    --ws-filter-input-bg: transparent;
    --ws-filter-input-border: 1px solid rgba(136, 136, 136, 0.4);
    --ws-filter-price-input-text-color: inherit;

    /* 7. Spacing */
    --ws-filter-gap-between-pills: 8px;
    --ws-filter-checkbox-size: 18px;
}

/* ======================================================
   Specific Hover Fixes
========================================================= */

/* 1. PILLS: When hovering a pill, invert the colors */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option {
    transition: all 0.2s ease;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option:hover {
    background-color: var(--ws-filter-pill-bg-hover) !important;
    color: var(--ws-filter-pill-text-hover) !important;
    border-color: transparent !important; /* Hides border since BG is filled */
}

/* Force the text inside the pill to change color too */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option:hover span {
    color: var(--ws-filter-pill-text-hover) !important;
}

/* 2. SEARCH / RESET ICONS: Ensure they don't disappear */
/* If the icon is inside a button that gets filled, make the icon white */
.ws-wc-filters-skin button:hover .ws-wc-filter-icon,
.ws-wc-filters-skin .ws-wc-filter-submit:hover svg,
.ws-wc-filters-skin .ws-wc-filter-search-submit:hover svg {
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* If the Reset button has a TRANSPARENT background (variable above), keep icon dark */
.ws-wc-filters-skin .ws-wc-filter-reset:hover {
    background-color: transparent !important;
}
.ws-wc-filters-skin .ws-wc-filter-reset:hover span {
    color: currentColor !important; /* Stays the text color */
}

/* 3. COLOUR SWATCH HOVER (Special Case) */
/* When hovering a colour pill, don't fill the background, just show border */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option:has(.ws-colour-swatch):hover {
    background-color: transparent !important;
    color: inherit !important;
    border-color: currentColor !important;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option:has(.ws-colour-swatch):hover span {
    color: inherit !important;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-a4c8919 *//* ======================================================
WS WooCommerce Filter Builder — Theme Inherit Skin (FIXED)
========================================================= */

:root {
    /* 1. Global Typography & Colors (Inherit from Theme) */
    --ws-filter-font-family: inherit;
    --ws-filter-font-size: inherit;
    --ws-filter-text-color: inherit;
    --ws-filter-text-weight: inherit;

    /* 2. Labels */
    --ws-filter-label-color: inherit;
    --ws-filter-label-bg: transparent;
    --ws-filter-label-weight: 700; 
    --ws-filter-label-padding: 5px 0px; 
    --ws-filter-label-radius: 0px;

    /* 3. Pills (The Buttons) - Invert Logic */
    --ws-filter-pill-bg: transparent;
    --ws-filter-pill-text: inherit;
    --ws-filter-pill-border: 1px solid currentColor; /* Border matches text */
    



    /* 4. Dropdowns */
    --ws-filter-dropdown-bg: transparent;
    --ws-filter-dropdown-border: 1px solid rgba(136, 136, 136, 0.4);
    --ws-filter-dropdown-text-color: inherit;
    
    /* Dropdown Hover */
    --ws-filter-dropdown-hover-bg: currentColor; 
    --ws-filter-dropdown-text-hover: #ffffff; /* Force White on hover */

    /* 5. Reset & Search Icons */
    --ws-filter-reset-btn-bg: transparent;
    --ws-filter-reset-icon-color: #BC6C25; /* Normal state: matches text */
    
    /* FIX: Force icon to stay dark on hover if background is transparent */
    --ws-filter-reset-btn-bg-hover: transparent;
    --ws-filter-reset-icon-color-hover: currentColor; 

    /* 6. Inputs (Search/Price) */
    --ws-filter-input-bg: transparent;
    --ws-filter-input-border: 1px solid rgba(136, 136, 136, 0.4);
    --ws-filter-price-input-text-color: inherit;

    /* 7. Spacing */
    --ws-filter-gap-between-pills: 8px;
    --ws-filter-checkbox-size: 18px;
}

/* ======================================================
   Specific Hover Fixes
========================================================= */

/* 1. PILLS: When hovering a pill, invert the colors */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option {
    transition: all 0.2s ease;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option:hover {
    background-color: var(--ws-filter-pill-bg-hover) !important;
    color: var(--ws-filter-pill-text-hover) !important;
    border-color: transparent !important; /* Hides border since BG is filled */
}

/* Force the text inside the pill to change color too */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option:hover span {
    color: var(--ws-filter-pill-text-hover) !important;
}

/* 2. SEARCH / RESET ICONS: Ensure they don't disappear */
/* If the icon is inside a button that gets filled, make the icon white */
.ws-wc-filters-skin button:hover .ws-wc-filter-icon,
.ws-wc-filters-skin .ws-wc-filter-submit:hover svg,
.ws-wc-filters-skin .ws-wc-filter-search-submit:hover svg {
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* If the Reset button has a TRANSPARENT background (variable above), keep icon dark */
.ws-wc-filters-skin .ws-wc-filter-reset:hover {
    background-color: transparent !important;
}
.ws-wc-filters-skin .ws-wc-filter-reset:hover span {
    color: currentColor !important; /* Stays the text color */
}

/* 3. COLOUR SWATCH HOVER (Special Case) */
/* When hovering a colour pill, don't fill the background, just show border */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option:has(.ws-colour-swatch):hover {
    background-color: transparent !important;
    color: inherit !important;
    border-color: currentColor !important;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option:has(.ws-colour-swatch):hover span {
    color: inherit !important;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-bf3de96 *//* ======================================================
WS WooCommerce Filter Builder — Theme Inherit Skin (FIXED)
========================================================= */

:root {
    /* 1. Global Typography & Colors (Inherit from Theme) */
    --ws-filter-font-family: inherit;
    --ws-filter-font-size: inherit;
    --ws-filter-text-color: inherit;
    --ws-filter-text-weight: inherit;

    /* 2. Labels */
    --ws-filter-label-color: inherit;
    --ws-filter-label-bg: transparent;
    --ws-filter-label-weight: 700; 
    --ws-filter-label-padding: 5px 0px; 
    --ws-filter-label-radius: 0px;

    /* 3. Pills (The Buttons) - Invert Logic */
    --ws-filter-pill-bg: transparent;
    --ws-filter-pill-text: inherit;
    --ws-filter-pill-border: 1px solid currentColor; /* Border matches text */
    



    /* 4. Dropdowns */
    --ws-filter-dropdown-bg: transparent;
    --ws-filter-dropdown-border: 1px solid rgba(136, 136, 136, 0.4);
    --ws-filter-dropdown-text-color: inherit;
    
    /* Dropdown Hover */
    --ws-filter-dropdown-hover-bg: currentColor; 
    --ws-filter-dropdown-text-hover: #ffffff; /* Force White on hover */

    /* 5. Reset & Search Icons */
    --ws-filter-reset-btn-bg: transparent;
    --ws-filter-reset-icon-color: #BC6C25; /* Normal state: matches text */
    
    /* FIX: Force icon to stay dark on hover if background is transparent */
    --ws-filter-reset-btn-bg-hover: transparent;
    --ws-filter-reset-icon-color-hover: currentColor; 

    /* 6. Inputs (Search/Price) */
    --ws-filter-input-bg: transparent;
    --ws-filter-input-border: 1px solid rgba(136, 136, 136, 0.4);
    --ws-filter-price-input-text-color: inherit;

    /* 7. Spacing */
    --ws-filter-gap-between-pills: 8px;
    --ws-filter-checkbox-size: 18px;
}

/* ======================================================
   Specific Hover Fixes
========================================================= */

/* 1. PILLS: When hovering a pill, invert the colors */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option {
    transition: all 0.2s ease;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option:hover {
    background-color: var(--ws-filter-pill-bg-hover) !important;
    color: var(--ws-filter-pill-text-hover) !important;
    border-color: transparent !important; /* Hides border since BG is filled */
}

/* Force the text inside the pill to change color too */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option:hover span {
    color: var(--ws-filter-pill-text-hover) !important;
}

/* 2. SEARCH / RESET ICONS: Ensure they don't disappear */
/* If the icon is inside a button that gets filled, make the icon white */
.ws-wc-filters-skin button:hover .ws-wc-filter-icon,
.ws-wc-filters-skin .ws-wc-filter-submit:hover svg,
.ws-wc-filters-skin .ws-wc-filter-search-submit:hover svg {
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* If the Reset button has a TRANSPARENT background (variable above), keep icon dark */
.ws-wc-filters-skin .ws-wc-filter-reset:hover {
    background-color: transparent !important;
}
.ws-wc-filters-skin .ws-wc-filter-reset:hover span {
    color: currentColor !important; /* Stays the text color */
}

/* 3. COLOUR SWATCH HOVER (Special Case) */
/* When hovering a colour pill, don't fill the background, just show border */
.ws-wc-filters-skin .ws-wc-filter-multiselect-option:has(.ws-colour-swatch):hover {
    background-color: transparent !important;
    color: inherit !important;
    border-color: currentColor !important;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option:has(.ws-colour-swatch):hover span {
    color: inherit !important;
}/* End custom CSS */