.elementor-1418 .elementor-element.elementor-element-228d499{--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:30px 30px;--row-gap:30px;--column-gap:30px;}.elementor-1418 .elementor-element.elementor-element-84dc93c{--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;--padding-top:20px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1418 .elementor-element.elementor-element-84dc93c.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-1418 .elementor-element.elementor-element-3cab528{--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;--align-items:center;}.elementor-1418 .elementor-element.elementor-element-e1f5c67{width:var( --container-widget-width, 20.982% );max-width:20.982%;--container-widget-width:20.982%;--container-widget-flex-grow:0;}.elementor-1418 .elementor-element.elementor-element-e1f5c67.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-1418 .elementor-element.elementor-element-494c85e{--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:flex-end;--align-items:center;}.elementor-1418 .elementor-element.elementor-element-b0e32a7{--wd-gap:10px;}.elementor-1418 .elementor-element.elementor-element-b0e32a7 > .elementor-widget-container{background-color:#F8F8F8;border-style:solid;}.elementor-1418 .elementor-element.elementor-element-5017a33{--wd-gap:10px;}@media(min-width:769px){.elementor-1418 .elementor-element.elementor-element-228d499{--content-width:1140px;}.elementor-1418 .elementor-element.elementor-element-84dc93c{--width:99.556%;}.elementor-1418 .elementor-element.elementor-element-494c85e{--width:25%;}}@media(max-width:1024px) and (min-width:769px){.elementor-1418 .elementor-element.elementor-element-84dc93c{--width:100%;}.elementor-1418 .elementor-element.elementor-element-494c85e{--width:100%;}}@media(max-width:1024px){.elementor-1418 .elementor-element.elementor-element-228d499{--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-1418 .elementor-element.elementor-element-3cab528{--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;}.elementor-1418 .elementor-element.elementor-element-494c85e{--justify-content:space-between;}}/* Start custom CSS for container, class: .elementor-element-494c85e *//*
 * SHOP ARCHIVE FILTERS (PILL-STYLE & TEXT-WISE)
 * ----------------------------------------------------
 * GOAL: Clean, rounded filter buttons and text-based category navigation.
 * UPDATED: Responsive widths and active filter visibility.
 */

/* 1. FILTER BAR BUTTONS (PILL-STYLE & AUTO-WIDTH) */
/* Targets 'Filter by Categories', 'Filter by Brand', etc. */
.wd-shop-tools .wd-action-btn > a,
.wd-shop-tools .wd-filter-list li a,
.wd-shop-tools .woocommerce-ordering select,
.wd-pf-title,
.wd-filter-buttons a {
    background-color: #FFFFFF !important;
    color: #000000 !important;
    border-radius: 50px !important; /* Makes them pill-shaped */
    padding: 8px 25px !important;
    border: 1px solid #DDDDDD !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    
    /* --- AUTO-WIDTH FIX --- */
    width: auto !important;
    min-width: fit-content !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    white-space: nowrap !important;
}

/* --- FIX: PREVENT OVERLAPPING BY TARGETING CONTAINERS --- */
/* Ensures the parent columns/divs grow with the buttons */
.wd-shop-tools > div,
.wd-pf-checkboxes,
.wd-pf-categories,
.wd-pf-title {
    width: auto !important;
    flex: 0 0 auto !important;
    max-width: none !important;
}

/* Hover effect for Filter Buttons */
.wd-shop-tools .wd-action-btn > a:hover,
.wd-shop-tools .woocommerce-ordering select:hover {
    background-color: #000000 !important;
    color: #FFFFFF !important;
    border-color: #000000 !important;
}

/* 2. ACTIVE FILTER RESULTS (SHOWING SELECTED CATEGORY) */
/* Ensures that when a filter is active, the text shows and grows the button */
.wd-pf-results {
    margin: 0 !important;
    padding: 0 0 0 10px !important;
    display: inline-flex !important;
    list-style: none !important;
}

.wd-pf-results .selected-value {
    color: #E320A4 !important; /* Highlight selected text in Magenta */
    font-weight: 700;
    text-transform: capitalize;
}

.wd-pf-results .selected-value:before {
    content: ": " !important;
    color: #000000;
    margin-right: 2px;
}

/* 3. TEXT-WISE CATEGORY FILTERS (REMOVING CHECKBOXES) */
/* This converts the checkbox list into a clean text-link menu */

/* Hide the WoodMart checkbox icons */
.wd-pf-categories .pf-value:before,
.wd-pf-categories .pf-value:after,
.wd-pf-checkboxes .pf-value:before,
.wd-pf-checkboxes .pf-value:after {
    display: none !important;
}

/* Style the Filter Values as clean text */
.wd-pf-dropdown .pf-value {
    padding: 6px 0 !important;
    display: block !important;
    color: #000000 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: padding 0.2s ease;
}

/* Hover shift for Text-Wise links */
.wd-pf-dropdown .pf-value:hover {
    color: #E320A4 !important; /* Theme Magenta highlight */
    padding-left: 8px !important;
}

/* Active Category Styling in the Dropdown List */
.wd-active .pf-value {
    color: #E320A4 !important;
    font-weight: 700 !important;
}

/* 4. DROPDOWN BOX STYLING (WHITE BG) */
/* Ensures the dropdown area itself matches the light design */
.wd-dropdown-filter,
.wd-dropdown-menu,
.wd-sub-menu,
.wd-dropdown {
    background-color: #FFFFFF !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
    border: 1px solid #EEEEEE !important;
    padding: 15px !important;
}

/* 5. PRODUCT CARD MASK (SHOP PAGE ONLY) */
/* Ensures the product cards look like the white blocks on black BG */
.post-type-archive-product .product-grid-item {
    background-color: #FFFFFF !important;
    border-radius: 8px;
    padding: 15px;
    border: 1px solid #EEEEEE;
}

/* 6. SHOP TOOLS WRAPPER ALIGNMENT */
.wd-shop-tools {
    display: flex;
    justify-content: center;
    gap: 15px; /* Spacing between filter pills */
    margin-bottom: 40px;
    flex-wrap: wrap; /* Allows wrapping instead of overlapping */
}/* End custom CSS */