.elementor-345 .elementor-element.elementor-element-d3c5529{--display:flex;--padding-top:01%;--padding-bottom:01%;--padding-left:02%;--padding-right:02%;}.elementor-widget-theme-archive-title .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-345 .elementor-element.elementor-element-6ce4c5e{text-align:center;}.elementor-345 .elementor-element.elementor-element-c381f19{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-345 .elementor-element.elementor-element-c381f19 .woocommerce-breadcrumb{color:#0A2540;text-align:center;}.elementor-345 .elementor-element.elementor-element-c381f19 .woocommerce-breadcrumb > a{color:var( --e-global-color-accent );}.elementor-345 .elementor-element.elementor-element-ed0ddbe{--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:0% 01%;--row-gap:0%;--column-gap:01%;--padding-top:01%;--padding-bottom:01%;--padding-left:02%;--padding-right:02%;}.elementor-345 .elementor-element.elementor-element-3e71e7d{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-345 .elementor-element.elementor-element-b3722a3{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .woocommerce-loop-product__title{color:var( --e-global-color-primary );}.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{color:var( --e-global-color-primary );}.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .woocommerce-loop-product__title, .elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-wc-archive-products{--products-title-color:var( --e-global-color-primary );}.elementor-widget-wc-archive-products.products-heading-show .related-products > h2, .elementor-widget-wc-archive-products.products-heading-show .upsells > h2, .elementor-widget-wc-archive-products.products-heading-show .cross-sells > h2{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .price{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .price ins{color:var( --e-global-color-primary );}.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .price ins .amount{color:var( --e-global-color-primary );}.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .price del{color:var( --e-global-color-primary );}.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .price del .amount{color:var( --e-global-color-primary );}.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .price del {font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-wc-archive-products.elementor-wc-products .added_to_cart{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-wc-archive-products .elementor-products-nothing-found{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );}.elementor-345 .elementor-element.elementor-element-c447f1d.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-345 .elementor-element.elementor-element-c447f1d.elementor-wc-products ul.products li.product span.onsale{display:block;}@media(max-width:1366px){.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .button{font-size:var( --e-global-typography-accent-font-size );}.elementor-widget-wc-archive-products.elementor-wc-products .added_to_cart{font-size:var( --e-global-typography-accent-font-size );}.elementor-widget-wc-archive-products .elementor-products-nothing-found{font-size:var( --e-global-typography-text-font-size );}}@media(max-width:1024px){.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .button{font-size:var( --e-global-typography-accent-font-size );}.elementor-widget-wc-archive-products.elementor-wc-products .added_to_cart{font-size:var( --e-global-typography-accent-font-size );}.elementor-widget-wc-archive-products .elementor-products-nothing-found{font-size:var( --e-global-typography-text-font-size );}.elementor-345 .elementor-element.elementor-element-c447f1d.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}}@media(max-width:767px){.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .button{font-size:var( --e-global-typography-accent-font-size );}.elementor-widget-wc-archive-products.elementor-wc-products .added_to_cart{font-size:var( --e-global-typography-accent-font-size );}.elementor-widget-wc-archive-products .elementor-products-nothing-found{font-size:var( --e-global-typography-text-font-size );}.elementor-345 .elementor-element.elementor-element-c447f1d.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}}@media(min-width:768px){.elementor-345 .elementor-element.elementor-element-3e71e7d{--width:20%;}.elementor-345 .elementor-element.elementor-element-b3722a3{--width:79%;}}@media(min-width:2400px){.elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .button{font-size:var( --e-global-typography-accent-font-size );}.elementor-widget-wc-archive-products.elementor-wc-products .added_to_cart{font-size:var( --e-global-typography-accent-font-size );}.elementor-widget-wc-archive-products .elementor-products-nothing-found{font-size:var( --e-global-typography-text-font-size );}}/* Start custom CSS for woofilters, class: .elementor-element-f514969 *//* =========================================================
   RKS TECHWARE — WBW / WOOBEWOO FILTER
   DARK PRODUCT-OVERVIEW STYLE
   Minimal / Premium / Responsive

   Paste inside:
   WBW Filter Widget → Advanced → Custom CSS
   ========================================================= */


/* =========================================================
   1. ROOT / DESIGN TOKENS
   ========================================================= */

.elementor-345 .elementor-element.elementor-element-f514969 {
    --filter-teal: #30c4b6;
    --filter-teal-light: #67d9cf;

    --filter-bg-top: #173746;
    --filter-bg-mid: #13313f;
    --filter-bg-bottom: #102b38;

    --filter-white: #ffffff;

    --filter-text: #d5e0e5;
    --filter-muted: #9aabb4;
    --filter-muted-dark: #718892;

    --filter-border: rgba(255,255,255,0.10);
    --filter-border-soft: rgba(255,255,255,0.07);

    --filter-field:
        rgba(255,255,255,0.055);

    --filter-field-hover:
        rgba(255,255,255,0.075);

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


.elementor-345 .elementor-element.elementor-element-f514969 *,
.elementor-345 .elementor-element.elementor-element-f514969 *::before,
.elementor-345 .elementor-element.elementor-element-f514969 *::after {
    box-sizing: border-box;
}



/* =========================================================
   2. ELEMENTOR WRAPPERS
   ========================================================= */

.elementor-345 .elementor-element.elementor-element-f514969
.elementor-widget-container,

.elementor-345 .elementor-element.elementor-element-f514969
.elementor-woofilters {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}



/* =========================================================
   3. MAIN FILTER PANEL
   ========================================================= */

.elementor-345 .elementor-element.elementor-element-f514969
.wpfMainWrapper {
    position: relative;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;

    padding:
        clamp(18px, 2vw, 24px) !important;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(48,196,182,0.08),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            var(--filter-bg-top) 0%,
            var(--filter-bg-mid) 52%,
            var(--filter-bg-bottom) 100%
        ) !important;

    border:
        1px solid rgba(48,196,182,0.14) !important;

    border-radius:
        16px !important;

    box-shadow:
        0 12px 30px rgba(10,37,64,0.10);

    overflow: hidden;

    color:
        var(--filter-text);

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}


/* Same subtle top accent used in Product Overview */

.elementor-345 .elementor-element.elementor-element-f514969
.wpfMainWrapper::before {
    content: "";

    position: absolute;

    top: 0;
    left: 22px;

    width: 46px;
    height: 2px;

    background:
        var(--filter-teal);

    border-radius:
        0 0 4px 4px;
}


@media (hover: hover) {

    .elementor-345 .elementor-element.elementor-element-f514969
    .wpfMainWrapper:hover {
        border-color:
            rgba(48,196,182,0.24) !important;

        box-shadow:
            0 15px 36px rgba(10,37,64,0.13);
    }

}



/* =========================================================
   4. INDIVIDUAL FILTER SECTIONS
   ========================================================= */

.elementor-345 .elementor-element.elementor-element-f514969
.wpfFilterWrapper {
    width: 100% !important;

    margin: 0 !important;

    padding:
        0
        0
        17px !important;

    background:
        transparent !important;

    border:
        0 !important;

    border-bottom:
        1px solid var(--filter-border-soft) !important;
}


.elementor-345 .elementor-element.elementor-element-f514969
.wpfFilterWrapper + .wpfFilterWrapper {
    padding-top:
        17px !important;
}


/* Last filter before controls */

.elementor-345 .elementor-element.elementor-element-f514969
.wpfFilterWrapper:last-of-type {
    border-bottom:
        0 !important;
}



/* =========================================================
   5. FILTER TITLES
   ========================================================= */

.elementor-345 .elementor-element.elementor-element-f514969
.wpfFilterTitle {
    display: flex !important;

    align-items: center !important;
    justify-content: space-between !important;

    gap:
        12px;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background:
        transparent !important;

    border:
        0 !important;

    cursor: pointer;
}


.elementor-345 .elementor-element.elementor-element-f514969
.wpfFilterTitle
.wfpTitle {
    flex: 1;

    margin: 0 !important;
    padding: 0 !important;

    font-family:
        var(--rks-font-secondary, "Archivo", sans-serif) !important;

    font-size:
        14px !important;

    font-weight:
        600 !important;

    line-height:
        1.35 !important;

    letter-spacing:
        -0.012em !important;

    color:
        #ffffff !important;

    transition:
        color 0.2s ease;
}


@media (hover: hover) {

    .elementor-345 .elementor-element.elementor-element-f514969
    .wpfFilterTitle:hover
    .wfpTitle {
        color:
            var(--filter-teal-light) !important;
    }

}



/* =========================================================
   6. COLLAPSE / EXPAND BUTTON
   ========================================================= */

.elementor-345 .elementor-element.elementor-element-f514969
.wpfTitleToggle {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    flex:
        0 0 26px;

    width:
        26px !important;

    height:
        26px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    background:
        rgba(255,255,255,0.045) !important;

    border:
        1px solid rgba(255,255,255,0.10) !important;

    border-radius:
        7px !important;

    font-size:
        0 !important;

    color:
        var(--filter-muted) !important;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}


/* Replace FA appearance with clean symbols */

.elementor-345 .elementor-element.elementor-element-f514969
.wpfTitleToggle::before {
    display: block !important;

    font-family:
        Arial, sans-serif !important;

    font-size:
        15px !important;

    font-weight:
        400 !important;

    line-height:
        1 !important;

    color:
        inherit !important;
}


.elementor-345 .elementor-element.elementor-element-f514969
.wpfTitleToggle.fa-minus::before {
    content:
        "−" !important;
}


.elementor-345 .elementor-element.elementor-element-f514969
.wpfTitleToggle.fa-plus::before {
    content:
        "+" !important;
}


@media (hover: hover) {

    .elementor-345 .elementor-element.elementor-element-f514969
    .wpfFilterTitle:hover
    .wpfTitleToggle {
        background:
            rgba(48,196,182,0.09) !important;

        border-color:
            rgba(48,196,182,0.30) !important;

        color:
            var(--filter-teal) !important;
    }

}



/* =========================================================
   7. FILTER CONTENT
   ========================================================= */

.elementor-345 .elementor-element.elementor-element-f514969
.wpfFilterContent {
    width: 100% !important;
    max-width: 100% !important;

    margin:
        13px
        0
        0 !important;

    padding:
        0 !important;

    background:
        transparent !important;

    border:
        0 !important;
}



/* =========================================================
   8. LIST RESET
   ========================================================= */

.elementor-345 .elementor-element.elementor-element-f514969
.wpfCheckboxHier,

.elementor-345 .elementor-element.elementor-element-f514969
.wpfFilterVerScroll {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background:
        transparent !important;

    border:
        0 !important;
}


.elementor-345 .elementor-element.elementor-element-f514969
.wpfFilterVerScroll {
    list-style:
        none !important;

    scrollbar-width:
        thin;

    scrollbar-color:
        rgba(255,255,255,0.18)
        transparent;
}


.elementor-345 .elementor-element.elementor-element-f514969
.wpfFilterVerScroll::-webkit-scrollbar {
    width:
        4px;
}


.elementor-345 .elementor-element.elementor-element-f514969
.wpfFilterVerScroll::-webkit-scrollbar-track {
    background:
        transparent;
}


.elementor-345 .elementor-element.elementor-element-f514969
.wpfFilterVerScroll::-webkit-scrollbar-thumb {
    background:
        rgba(255,255,255,0.17);

    border-radius:
        20px;
}



/* =========================================================
   9. FILTER OPTIONS
   ========================================================= */

.elementor-345 .elementor-element.elementor-element-f514969
.wpfFilterVerScroll
li {
    width: 100% !important;

    margin:
        0
        0
        3px !important;

    padding:
        0 !important;

    background:
        transparent !important;

    border:
        0 !important;

    list-style:
        none !important;
}


.elementor-345 .elementor-element.elementor-element-f514969
.wpfFilterVerScroll
li:last-child {
    margin-bottom:
        0 !important;
}



/* =========================================================
   10. OPTION ROW
   ========================================================= */

.elementor-345 .elementor-element.elementor-element-f514969
.wpfLiLabel {
    display: flex !important;

    align-items: center !important;

    gap:
        9px;

    width: 100% !important;

    margin: 0 !important;

    padding:
        7px
        8px !important;

    background:
        transparent !important;

    border:
        1px solid transparent !important;

    border-radius:
        7px;

    cursor: pointer;

    transition:
        background 0.18s ease,
        border-color 0.18s ease;
}


@media (hover: hover) {

    .elementor-345 .elementor-element.elementor-element-f514969
    .wpfLiLabel:hover {
        background:
            rgba(255,255,255,0.045) !important;

        border-color:
            rgba(255,255,255,0.05) !important;
    }

}



/* =========================================================
   11. CHECKBOX WRAPPER
   ========================================================= */

.elementor-345 .elementor-element.elementor-element-f514969
.wpfCheckbox {
    position:
        relative;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    flex:
        0 0 17px;

    width:
        17px !important;

    height:
        17px !important;

    margin:
        0 !important;

    padding:
        0 !important;
}



/* Hide actual checkbox but retain accessibility */

.elementor-345 .elementor-element.elementor-element-f514969
.wpfCheckbox
input[type="checkbox"] {
    position:
        absolute !important;

    width:
        1px !important;

    height:
        1px !important;

    opacity:
        0 !important;
}



/* =========================================================
   12. CUSTOM CHECKBOX
   ========================================================= */

.elementor-345 .elementor-element.elementor-element-f514969
.wpfCheckbox
input[type="checkbox"] + label {
    position:
        relative;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    width:
        17px !important;

    height:
        17px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    background:
        rgba(255,255,255,0.05) !important;

    border:
        1px solid rgba(255,255,255,0.18) !important;

    border-radius:
        5px !important;

    cursor:
        pointer;

    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}


/* Checkmark */

.elementor-345 .elementor-element.elementor-element-f514969
.wpfCheckbox
input[type="checkbox"] + label::before {
    content: "";

    width:
        7px;

    height:
        4px;

    border-left:
        2px solid #06252b;

    border-bottom:
        2px solid #06252b;

    opacity:
        0;

    transform:
        translateY(-1px)
        rotate(-45deg);

    transition:
        opacity 0.15s ease;
}



/* Selected state */

.elementor-345 .elementor-element.elementor-element-f514969
.wpfCheckbox
input[type="checkbox"]:checked + label {
    background:
        var(--filter-teal) !important;

    border-color:
        var(--filter-teal) !important;

    box-shadow:
        0 0 0 2px
        rgba(48,196,182,0.10);
}


.elementor-345 .elementor-element.elementor-element-f514969
.wpfCheckbox
input[type="checkbox"]:checked + label::before {
    opacity:
        1;
}



/* Keyboard state */

.elementor-345 .elementor-element.elementor-element-f514969
.wpfCheckbox
input[type="checkbox"]:focus-visible + label {
    border-color:
        var(--filter-teal) !important;

    box-shadow:
        0 0 0 3px
        rgba(48,196,182,0.12) !important;
}



/* =========================================================
   13. OPTION TEXT
   ========================================================= */

.elementor-345 .elementor-element.elementor-element-f514969
.wpfDisplay,

.elementor-345 .elementor-element.elementor-element-f514969
.wpfValue,

.elementor-345 .elementor-element.elementor-element-f514969
.wpfFilterTaxNameWrapper {
    font-family:
        var(--rks-font-body, "Manrope", sans-serif) !important;

    font-size:
        13px !important;

    font-weight:
        450 !important;

    line-height:
        1.45 !important;

    color:
        var(--filter-text) !important;

    transition:
        color 0.18s ease;
}


@media (hover: hover) {

    .elementor-345 .elementor-element.elementor-element-f514969
    .wpfLiLabel:hover
    .wpfFilterTaxNameWrapper {
        color:
            #ffffff !important;
    }

}



/* =========================================================
   14. SELECT / SORT BY
   ========================================================= */

.elementor-345 .elementor-element.elementor-element-f514969
#wpfSortProducts {
    width:
        100% !important;

    height:
        41px !important;

    margin:
        0 !important;

    padding:
        0
        40px
        0
        12px !important;

    appearance:
        none !important;

    -webkit-appearance:
        none !important;

    background-color:
        rgba(255,255,255,0.055) !important;

    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            #9aabb4 50%
        ),
        linear-gradient(
            135deg,
            #9aabb4 50%,
            transparent 50%
        );

    background-position:
        calc(100% - 16px) 17px,
        calc(100% - 11px) 17px;

    background-size:
        5px 5px,
        5px 5px;

    background-repeat:
        no-repeat;

    border:
        1px solid rgba(255,255,255,0.12) !important;

    border-radius:
        8px !important;

    outline:
        none !important;

    box-shadow:
        none !important;

    font-family:
        var(--rks-font-ui, "Outfit", sans-serif) !important;

    font-size:
        13px !important;

    font-weight:
        500 !important;

    color:
        #ffffff !important;

    cursor:
        pointer;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.elementor-345 .elementor-element.elementor-element-f514969
#wpfSortProducts option {
    background:
        #173746;

    color:
        #ffffff;
}


.elementor-345 .elementor-element.elementor-element-f514969
#wpfSortProducts:hover {
    background-color:
        rgba(255,255,255,0.075) !important;

    border-color:
        rgba(48,196,182,0.35) !important;
}


.elementor-345 .elementor-element.elementor-element-f514969
#wpfSortProducts:focus {
    border-color:
        var(--filter-teal) !important;

    box-shadow:
        0 0 0 3px
        rgba(48,196,182,0.10) !important;
}



/* =========================================================
   15. PRICE SLIDER TRACK
   ========================================================= */

.elementor-345 .elementor-element.elementor-element-f514969
.wpfPriceFilterRange {
    position:
        relative;

    height:
        4px !important;

    margin:
        11px
        8px
        19px !important;

    background:
        rgba(255,255,255,0.12) !important;

    border:
        0 !important;

    border-radius:
        999px !important;

    box-shadow:
        none !important;
}



/* Active range */

.elementor-345 .elementor-element.elementor-element-f514969
.wpfPriceFilterRange
.ui-slider-range {
    height:
        4px !important;

    background:
        var(--filter-teal) !important;

    border:
        0 !important;

    border-radius:
        999px !important;

    box-shadow:
        0 0 8px
        rgba(48,196,182,0.12);
}



/* =========================================================
   16. PRICE SLIDER HANDLES
   ========================================================= */

.elementor-345 .elementor-element.elementor-element-f514969
.wpfPriceFilterRange
.ui-slider-handle {
    top:
        50% !important;

    width:
        16px !important;

    height:
        16px !important;

    margin-top:
        -8px !important;

    margin-left:
        -8px !important;

    background:
        #173746 !important;

    border:
        2px solid
        var(--filter-teal) !important;

    border-radius:
        50% !important;

    outline:
        none !important;

    box-shadow:
        0 3px 8px
        rgba(0,0,0,0.18) !important;

    cursor:
        grab;

    transition:
        transform 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease;
}


@media (hover: hover) {

    .elementor-345 .elementor-element.elementor-element-f514969
    .wpfPriceFilterRange
    .ui-slider-handle:hover {
        background:
            var(--filter-teal) !important;

        transform:
            scale(1.08);

        box-shadow:
            0 4px 12px
            rgba(0,0,0,0.22) !important;
    }

}


.elementor-345 .elementor-element.elementor-element-f514969
.wpfPriceFilterRange
.ui-slider-handle:focus {
    background:
        var(--filter-teal) !important;

    box-shadow:
        0 0 0 4px
        rgba(48,196,182,0.13) !important;
}



/* =========================================================
   17. PRICE INPUT ROW
   ========================================================= */

.elementor-345 .elementor-element.elementor-element-f514969
.wpfPriceInputs {
    display:
        grid !important;

    grid-template-columns:
        auto
        minmax(0,1fr)
        auto
        minmax(0,1fr);

    align-items:
        center;

    gap:
        6px;

    width:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;
}



/* Currency */

.elementor-345 .elementor-element.elementor-element-f514969
.wpfCurrencySymbol {
    font-family:
        var(--rks-font-ui, "Outfit", sans-serif) !important;

    font-size:
        13px !important;

    font-weight:
        600 !important;

    line-height:
        1 !important;

    color:
        var(--filter-teal) !important;
}



/* =========================================================
   18. PRICE FIELDS
   ========================================================= */

.elementor-345 .elementor-element.elementor-element-f514969
.wpfPriceRangeField {
    width:
        100% !important;

    min-width:
        0 !important;

    height:
        36px !important;

    margin:
        0 !important;

    padding:
        0
        7px !important;

    background:
        rgba(255,255,255,0.055) !important;

    border:
        1px solid rgba(255,255,255,0.11) !important;

    border-radius:
        7px !important;

    outline:
        none !important;

    box-shadow:
        none !important;

    font-family:
        var(--rks-font-ui, "Outfit", sans-serif) !important;

    font-size:
        12px !important;

    font-weight:
        500 !important;

    text-align:
        center;

    color:
        #ffffff !important;

    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}


.elementor-345 .elementor-element.elementor-element-f514969
.wpfPriceRangeField:hover {
    background:
        rgba(255,255,255,0.075) !important;

    border-color:
        rgba(48,196,182,0.28) !important;
}


.elementor-345 .elementor-element.elementor-element-f514969
.wpfPriceRangeField:focus {
    border-color:
        var(--filter-teal) !important;
}



/* Remove native number arrows */

.elementor-345 .elementor-element.elementor-element-f514969
.wpfPriceRangeField::-webkit-inner-spin-button,

.elementor-345 .elementor-element.elementor-element-f514969
.wpfPriceRangeField::-webkit-outer-spin-button {
    margin:
        0;

    -webkit-appearance:
        none;
}



/* Price separator */

.elementor-345 .elementor-element.elementor-element-f514969
.wpfFilterDelimeter {
    font-family:
        var(--rks-font-body, "Manrope", sans-serif) !important;

    font-size:
        12px !important;

    color:
        var(--filter-muted-dark) !important;
}



/* =========================================================
   19. FILTER BUTTON AREA
   ========================================================= */

.elementor-345 .elementor-element.elementor-element-f514969
.wpfFilterButtons {
    width:
        100% !important;

    margin:
        19px
        0
        0 !important;

    padding:
        17px
        0
        0 !important;

    border-top:
        1px solid
        var(--filter-border-soft);
}



/* =========================================================
   20. FILTER CTA
   ========================================================= */

.elementor-345 .elementor-element.elementor-element-f514969
.wpfFilterButton,
.elementor-345 .elementor-element.elementor-element-f514969
.wpfButton {
    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        7px;

    width:
        100% !important;

    min-height:
        44px !important;

    margin:
        0 !important;

    padding:
        10px
        16px !important;

    background:
        var(--filter-teal) !important;

    border:
        1px solid
        var(--filter-teal) !important;

    border-radius:
        8px !important;

    box-shadow:
        0 6px 16px
        rgba(48,196,182,0.13);

    font-family:
        var(--rks-font-ui, "Outfit", sans-serif) !important;

    font-size:
        13px !important;

    font-weight:
        600 !important;

    line-height:
        1.2 !important;

    letter-spacing:
        0 !important;

    text-transform:
        none !important;

    color:
        #07252b !important;

    cursor:
        pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease !important;
}


/* Arrow */

.elementor-345 .elementor-element.elementor-element-f514969
.wpfFilterButton::after {
    content:
        "→";

    display:
        inline-block;

    font-size:
        14px;

    line-height:
        1;

    transition:
        transform 0.2s ease;
}


@media (hover: hover) {

    .elementor-345 .elementor-element.elementor-element-f514969
    .wpfFilterButton:hover {
        background:
            var(--filter-teal-light) !important;

        border-color:
            var(--filter-teal-light) !important;

        color:
            #062127 !important;

        transform:
            translateY(-1px);

        box-shadow:
            0 8px 20px
            rgba(48,196,182,0.18);
    }


    .elementor-345 .elementor-element.elementor-element-f514969
    .wpfFilterButton:hover::after {
        transform:
            translateX(3px);
    }

}


.elementor-345 .elementor-element.elementor-element-f514969
.wpfFilterButton:active {
    transform:
        scale(0.985);
}



/* =========================================================
   21. LOADING STATES
   ========================================================= */

.elementor-345 .elementor-element.elementor-element-f514969
.wpfLoaderLayout {
    position:
        absolute !important;

    inset:
        0;

    z-index:
        50;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(16,43,56,0.78) !important;

    backdrop-filter:
        blur(3px);

    -webkit-backdrop-filter:
        blur(3px);

    border-radius:
        inherit;
}


.elementor-345 .elementor-element.elementor-element-f514969
.wpfLoaderLayout
.fa-spinner {
    font-size:
        24px !important;

    color:
        var(--filter-teal) !important;
}



/* Plugin preview loader */

.elementor-345 .elementor-element.elementor-element-f514969
.wpfPreviewLoader {
    color:
        var(--filter-teal) !important;
}


.elementor-345 .elementor-element.elementor-element-f514969
.woobewoo-filter-loader {
    border-color:
        rgba(255,255,255,0.15) !important;

    border-top-color:
        var(--filter-teal) !important;
}



/* =========================================================
   22. REMOVE RANDOM PLUGIN BACKGROUNDS
   ========================================================= */

.elementor-345 .elementor-element.elementor-element-f514969
.wpfFilterWrapper,

.elementor-345 .elementor-element.elementor-element-f514969
.wpfFilterContent,

.elementor-345 .elementor-element.elementor-element-f514969
.wpfCheckboxHier,

.elementor-345 .elementor-element.elementor-element-f514969
.wpfFilterVerScroll,

.elementor-345 .elementor-element.elementor-element-f514969
.wpfFilterVerScroll li,

.elementor-345 .elementor-element.elementor-element-f514969
.wpfDisplay,

.elementor-345 .elementor-element.elementor-element-f514969
.wpfValue {
    background-color:
        transparent !important;
}



/* =========================================================
   23. TABLET / SMALL LAPTOP
   ========================================================= */

@media (max-width: 1180px) {

    .elementor-345 .elementor-element.elementor-element-f514969
    .wpfMainWrapper {
        padding:
            18px !important;

        border-radius:
            14px !important;
    }


    .elementor-345 .elementor-element.elementor-element-f514969
    .wpfFilterTitle
    .wfpTitle {
        font-size:
            13.5px !important;
    }

}



/* =========================================================
   24. TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .elementor-345 .elementor-element.elementor-element-f514969
    .wpfMainWrapper {
        padding:
            17px !important;
    }


    .elementor-345 .elementor-element.elementor-element-f514969
    .wpfFilterWrapper {
        padding-bottom:
            15px !important;
    }


    .elementor-345 .elementor-element.elementor-element-f514969
    .wpfFilterWrapper +
    .wpfFilterWrapper {
        padding-top:
            15px !important;
    }


    .elementor-345 .elementor-element.elementor-element-f514969
    .wpfFilterContent {
        margin-top:
            11px !important;
    }


    .elementor-345 .elementor-element.elementor-element-f514969
    .wpfLiLabel {
        padding:
            7px
            6px !important;
    }

}



/* =========================================================
   25. MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .elementor-345 .elementor-element.elementor-element-f514969
    .wpfMainWrapper {
        padding:
            15px !important;

        border-radius:
            13px !important;

        box-shadow:
            0 10px 26px
            rgba(10,37,64,0.10);
    }


    .elementor-345 .elementor-element.elementor-element-f514969
    .wpfMainWrapper::before {
        left:
            16px;

        width:
            38px;
    }


    .elementor-345 .elementor-element.elementor-element-f514969
    .wpfFilterWrapper {
        padding-bottom:
            14px !important;
    }


    .elementor-345 .elementor-element.elementor-element-f514969
    .wpfFilterWrapper +
    .wpfFilterWrapper {
        padding-top:
            14px !important;
    }


    .elementor-345 .elementor-element.elementor-element-f514969
    .wpfFilterTitle
    .wfpTitle {
        font-size:
            13px !important;
    }


    .elementor-345 .elementor-element.elementor-element-f514969
    .wpfTitleToggle {
        flex-basis:
            24px;

        width:
            24px !important;

        height:
            24px !important;

        border-radius:
            6px !important;
    }


    .elementor-345 .elementor-element.elementor-element-f514969
    .wpfFilterContent {
        margin-top:
            10px !important;
    }


    .elementor-345 .elementor-element.elementor-element-f514969
    .wpfLiLabel {
        padding:
            7px
            5px !important;
    }


    .elementor-345 .elementor-element.elementor-element-f514969
    .wpfDisplay,

    .elementor-345 .elementor-element.elementor-element-f514969
    .wpfValue,

    .elementor-345 .elementor-element.elementor-element-f514969
    .wpfFilterTaxNameWrapper {
        font-size:
            12.5px !important;
    }


    .elementor-345 .elementor-element.elementor-element-f514969
    #wpfSortProducts {
        height:
            40px !important;

        font-size:
            12.5px !important;
    }


    .elementor-345 .elementor-element.elementor-element-f514969
    .wpfFilterButton {
        min-height:
            42px !important;
    }

}



/* =========================================================
   26. SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .elementor-345 .elementor-element.elementor-element-f514969
    .wpfMainWrapper {
        padding:
            13px !important;

        border-radius:
            12px !important;
    }


    .elementor-345 .elementor-element.elementor-element-f514969
    .wpfPriceInputs {
        gap:
            4px;
    }


    .elementor-345 .elementor-element.elementor-element-f514969
    .wpfPriceRangeField {
        height:
            34px !important;

        padding:
            0
            5px !important;

        font-size:
            11.5px !important;
    }


    .elementor-345 .elementor-element.elementor-element-f514969
    .wpfCurrencySymbol,

    .elementor-345 .elementor-element.elementor-element-f514969
    .wpfFilterDelimeter {
        font-size:
            11.5px !important;
    }


    .elementor-345 .elementor-element.elementor-element-f514969
    .wpfFilterButton {
        font-size:
            12.5px !important;
    }

}



/* =========================================================
   27. VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 360px) {

    .elementor-345 .elementor-element.elementor-element-f514969
    .wpfMainWrapper {
        padding:
            11px !important;
    }


    .elementor-345 .elementor-element.elementor-element-f514969
    .wpfFilterTitle
    .wfpTitle {
        font-size:
            12.5px !important;
    }


    .elementor-345 .elementor-element.elementor-element-f514969
    .wpfDisplay,

    .elementor-345 .elementor-element.elementor-element-f514969
    .wpfValue,

    .elementor-345 .elementor-element.elementor-element-f514969
    .wpfFilterTaxNameWrapper {
        font-size:
            12px !important;
    }


    .elementor-345 .elementor-element.elementor-element-f514969
    .wpfPriceInputs {
        grid-template-columns:
            auto
            minmax(0,1fr)
            auto
            minmax(0,1fr);

        gap:
            3px;
    }

}



/* =========================================================
   28. FOCUS / ACCESSIBILITY
   ========================================================= */

.elementor-345 .elementor-element.elementor-element-f514969
button:focus-visible,

.elementor-345 .elementor-element.elementor-element-f514969
select:focus-visible,

.elementor-345 .elementor-element.elementor-element-f514969
input:focus-visible,

.elementor-345 .elementor-element.elementor-element-f514969
.wpfTitleToggle:focus-visible {
    outline:
        2px solid
        var(--filter-teal) !important;

    outline-offset:
        2px !important;
}



/* =========================================================
   29. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .elementor-345 .elementor-element.elementor-element-f514969 *,
    .elementor-345 .elementor-element.elementor-element-f514969 *::before,
    .elementor-345 .elementor-element.elementor-element-f514969 *::after {
        animation:
            none !important;

        transition:
            none !important;
    }

}


/* =========================================================
   END — RKS DARK WBW FILTER
   ========================================================= *//* End custom CSS */
/* Start custom CSS for wc-archive-products, class: .elementor-element-c447f1d *//* =========================================================
   RKS TECHWARE — PRODUCT ARCHIVE WIDGET
   Elementor Pro / WooCommerce
   Light Premium Theme
   Responsive Across All Breakpoints
   ========================================================= */


/* =========================================================
   1. WIDGET VARIABLES
   ========================================================= */

.elementor-345 .elementor-element.elementor-element-c447f1d {
    --archive-teal: var(--rks-teal, #30c4b6);
    --archive-teal-dark: #229d93;

    --archive-navy: var(--rks-navy, #0a2540);

    --archive-text: #344451;
    --archive-muted: #71818c;

    --archive-bg: #ffffff;
    --archive-soft: #f7f9fa;
    --archive-soft-hover: #f3f8f8;

    --archive-border: #e5ebee;
    --archive-border-hover: rgba(48,196,182,0.42);

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


.elementor-345 .elementor-element.elementor-element-c447f1d *,
.elementor-345 .elementor-element.elementor-element-c447f1d *::before,
.elementor-345 .elementor-element.elementor-element-c447f1d *::after {
    box-sizing: border-box;
}



/* =========================================================
   2. MAIN WOOCOMMERCE ARCHIVE LAYOUT
   ========================================================= */

.elementor-345 .elementor-element.elementor-element-c447f1d
.woocommerce {
    display: grid !important;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    align-items: center;

    gap:
        20px
        24px;

    width: 100%;

    margin: 0 !important;
    padding: 0 !important;
}



/* =========================================================
   3. WOOCOMMERCE NOTICES
   ========================================================= */

.elementor-345 .elementor-element.elementor-element-c447f1d
.woocommerce-notices-wrapper {
    grid-column:
        1 / -1;

    width: 100%;
}



/* =========================================================
   4. RESULT COUNT
   ========================================================= */

.elementor-345 .elementor-element.elementor-element-c447f1d
.woocommerce-result-count {
    grid-column: 1;

    float: none !important;

    margin: 0 !important;

    padding: 0 !important;

    font-family:
        var(--rks-font-body, "Manrope", sans-serif) !important;

    font-size:
        13px !important;

    font-weight:
        500 !important;

    line-height:
        1.4 !important;

    color:
        var(--archive-muted) !important;
}



/* =========================================================
   5. SORTING WRAPPER
   ========================================================= */

.elementor-345 .elementor-element.elementor-element-c447f1d
.woocommerce-ordering {
    grid-column: 2;

    float: none !important;

    margin: 0 !important;

    padding: 0 !important;

    position: relative;

    display: flex;

    align-items: center;
}



/* =========================================================
   6. SORT DROPDOWN
   ========================================================= */

.elementor-345 .elementor-element.elementor-element-c447f1d
.woocommerce-ordering
.orderby {
    width: auto;

    min-width:
        210px;

    height:
        42px;

    margin: 0 !important;

    padding:
        0
        42px
        0
        14px !important;

    appearance:
        none;

    -webkit-appearance:
        none;

    background-color:
        #ffffff !important;

    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            #71818c 50%
        ),
        linear-gradient(
            135deg,
            #71818c 50%,
            transparent 50%
        );

    background-position:
        calc(100% - 17px) 18px,
        calc(100% - 12px) 18px;

    background-size:
        5px 5px,
        5px 5px;

    background-repeat:
        no-repeat;

    border:
        1px solid var(--archive-border) !important;

    border-radius:
        9px !important;

    outline:
        none !important;

    box-shadow:
        none !important;

    font-family:
        var(--rks-font-ui, "Outfit", sans-serif) !important;

    font-size:
        13px !important;

    font-weight:
        500 !important;

    color:
        var(--archive-navy) !important;

    cursor:
        pointer;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}


.elementor-345 .elementor-element.elementor-element-c447f1d
.woocommerce-ordering
.orderby:hover {
    border-color:
        rgba(48,196,182,0.45) !important;
}


.elementor-345 .elementor-element.elementor-element-c447f1d
.woocommerce-ordering
.orderby:focus {
    border-color:
        var(--archive-teal) !important;

    box-shadow:
        0 0 0 3px
        rgba(48,196,182,0.09) !important;
}



/* =========================================================
   7. PRODUCTS GRID
   ========================================================= */

.elementor-345 .elementor-element.elementor-element-c447f1d
ul.products {
    grid-column:
        1 / -1;

    display: grid !important;

    grid-template-columns:
        repeat(4, minmax(0,1fr)) !important;

    gap:
        clamp(16px, 2vw, 24px) !important;

    width: 100% !important;

    margin:
        4px
        0
        0 !important;

    padding:
        0 !important;

    list-style:
        none !important;
}



/* =========================================================
   8. PRODUCT CARD
   ========================================================= */

.elementor-345 .elementor-element.elementor-element-c447f1d
ul.products
li.product {
    position: relative;

    display: flex !important;

    flex-direction: column !important;

    min-width: 0;

    height: 100%;

    margin: 0 !important;

    padding:
        10px !important;

    background:
        var(--archive-bg) !important;

    border:
        1px solid
        var(--archive-border) !important;

    border-radius:
        14px !important;

    box-shadow:
        0 7px 24px
        rgba(10,37,64,0.035);

    overflow:
        hidden;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}


/* Subtle brand line */

.elementor-345 .elementor-element.elementor-element-c447f1d
ul.products
li.product::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 0;
    height: 2px;

    background:
        var(--archive-teal);

    transform:
        translateX(-50%);

    transition:
        width 0.25s ease;

    z-index: 4;
}


@media (hover: hover) {

    .elementor-345 .elementor-element.elementor-element-c447f1d
    ul.products
    li.product:hover {
        transform:
            translateY(-4px);

        border-color:
            var(--archive-border-hover) !important;

        box-shadow:
            0 15px 36px
            rgba(10,37,64,0.075);
    }


    .elementor-345 .elementor-element.elementor-element-c447f1d
    ul.products
    li.product:hover::before {
        width:
            42px;
    }

}



/* =========================================================
   9. PRODUCT MAIN LINK
   ========================================================= */

.elementor-345 .elementor-element.elementor-element-c447f1d
ul.products
li.product
.woocommerce-LoopProduct-link {
    display: flex !important;

    flex-direction: column;

    flex-grow: 1;

    width: 100%;

    margin: 0 !important;

    color: inherit !important;

    text-decoration: none !important;
}



/* =========================================================
   10. PRODUCT IMAGE
   ========================================================= */

.elementor-345 .elementor-element.elementor-element-c447f1d
ul.products
li.product
.woocommerce-LoopProduct-link
img {
    display: block;

    width: 100% !important;

    aspect-ratio:
        1 / 1;

    height: auto !important;

    margin:
        0
        0
        14px !important;

    padding:
        clamp(10px, 1.4vw, 18px);

    object-fit:
        contain;

    background:
        var(--archive-soft);

    border-radius:
        10px;

    transition:
        transform 0.3s ease,
        background 0.3s ease;
}


@media (hover: hover) {

    .elementor-345 .elementor-element.elementor-element-c447f1d
    ul.products
    li.product:hover
    .woocommerce-LoopProduct-link
    img {
        transform:
            scale(1.025);

        background:
            var(--archive-soft-hover);
    }

}



/* =========================================================
   11. SALE BADGE
   ========================================================= */

.elementor-345 .elementor-element.elementor-element-c447f1d
ul.products
li.product
.onsale {
    position:
        absolute !important;

    top:
        18px !important;

    left:
        18px !important;

    right:
        auto !important;

    z-index:
        5;

    display:
        inline-flex !important;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        auto !important;

    min-height:
        auto !important;

    margin:
        0 !important;

    padding:
        6px
        9px !important;

    background:
        var(--archive-navy) !important;

    border:
        0 !important;

    border-radius:
        6px !important;

    box-shadow:
        0 5px 14px
        rgba(10,37,64,0.14);

    font-family:
        var(--rks-font-ui, "Outfit", sans-serif) !important;

    font-size:
        9px !important;

    font-weight:
        600 !important;

    line-height:
        1 !important;

    letter-spacing:
        0.055em;

    text-transform:
        uppercase;

    color:
        #ffffff !important;
}



/* =========================================================
   12. PRODUCT TITLE
   Full title displayed — no ellipsis
   ========================================================= */

.elementor-345 .elementor-element.elementor-element-c447f1d
ul.products
.woocommerce-loop-product__title {
    margin:
        0
        0
        9px !important;

    padding:
        0 !important;

    font-family:
        var(--rks-font-secondary, "Archivo", sans-serif) !important;

    font-size:
        clamp(14px, 1.15vw, 16px) !important;

    font-weight:
        600 !important;

    line-height:
        1.48 !important;

    letter-spacing:
        -0.012em !important;

    color:
        var(--archive-navy) !important;

    overflow:
        visible !important;

    white-space:
        normal !important;

    text-overflow:
        initial !important;

    transition:
        color 0.2s ease;
}


.elementor-345 .elementor-element.elementor-element-c447f1d
ul.products
li.product:hover
.woocommerce-loop-product__title {
    color:
        var(--archive-teal-dark) !important;
}



/* =========================================================
   13. PRICE
   ========================================================= */

.elementor-345 .elementor-element.elementor-element-c447f1d
ul.products
li.product
.price {
    display: flex !important;

    flex-wrap: wrap;

    align-items: baseline;

    gap:
        4px
        7px;

    margin:
        auto
        0
        13px !important;

    padding:
        0 !important;

    font-family:
        var(--rks-font-primary, "Plus Jakarta Sans", sans-serif) !important;

    font-size:
        clamp(16px, 1.45vw, 19px) !important;

    font-weight:
        700 !important;

    line-height:
        1.2 !important;

    letter-spacing:
        -0.025em !important;

    color:
        var(--archive-navy) !important;
}


.elementor-345 .elementor-element.elementor-element-c447f1d
ul.products
.price
.woocommerce-Price-amount {
    color:
        var(--archive-navy) !important;
}


.elementor-345 .elementor-element.elementor-element-c447f1d
ul.products
.price
.woocommerce-Price-currencySymbol {
    color:
        var(--archive-teal-dark) !important;

    font-size:
        0.78em;
}



/* =========================================================
   14. SALE PRICE
   ========================================================= */

.elementor-345 .elementor-element.elementor-element-c447f1d
ul.products
.price del {
    order:
        2;

    opacity:
        0.5 !important;

    font-size:
        0.72em !important;

    font-weight:
        500 !important;

    color:
        var(--archive-muted) !important;

    text-decoration-thickness:
        1px;
}


.elementor-345 .elementor-element.elementor-element-c447f1d
ul.products
.price del * {
    color:
        inherit !important;
}


.elementor-345 .elementor-element.elementor-element-c447f1d
ul.products
.price ins {
    order:
        1;

    padding:
        0 !important;

    background:
        transparent !important;

    text-decoration:
        none !important;

    color:
        var(--archive-navy) !important;
}


.elementor-345 .elementor-element.elementor-element-c447f1d
ul.products
.price ins * {
    color:
        inherit !important;
}



/* =========================================================
   15. ADD TO CART BUTTON
   ========================================================= */

.elementor-345 .elementor-element.elementor-element-c447f1d
ul.products
li.product
.add_to_cart_button,
.elementor-345 .elementor-element.elementor-element-c447f1d
ul.products
li.product
.button {
    display: flex !important;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    width:
        100% !important;

    min-height:
        42px;

    margin:
        0 !important;

    padding:
        10px
        14px !important;

    background:
        #ffffff !important;

    border:
        1px solid
        var(--archive-teal) !important;

    border-radius:
        8px !important;

    box-shadow:
        none !important;

    font-family:
        var(--rks-font-ui, "Outfit", sans-serif) !important;

    font-size:
        13px !important;

    font-weight:
        600 !important;

    line-height:
        1.2 !important;

    letter-spacing:
        0 !important;

    text-transform:
        none !important;

    color:
        var(--archive-navy) !important;

    text-decoration:
        none !important;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease !important;
}


/* Arrow */

.elementor-345 .elementor-element.elementor-element-c447f1d
ul.products
li.product
.add_to_cart_button::after {
    content:
        "→";

    display:
        inline-block;

    font-size:
        14px;

    line-height:
        1;

    transition:
        transform 0.2s ease;
}


@media (hover: hover) {

    .elementor-345 .elementor-element.elementor-element-c447f1d
    ul.products
    li.product
    .add_to_cart_button:hover,
    .elementor-345 .elementor-element.elementor-element-c447f1d
    ul.products
    li.product
    .button:hover {
        background:
            var(--archive-teal) !important;

        border-color:
            var(--archive-teal) !important;

        color:
            #06252b !important;

        transform:
            translateY(-1px);

        box-shadow:
            0 7px 18px
            rgba(48,196,182,0.15);
    }


    .elementor-345 .elementor-element.elementor-element-c447f1d
    ul.products
    li.product
    .add_to_cart_button:hover::after {
        transform:
            translateX(3px);
    }

}


.elementor-345 .elementor-element.elementor-element-c447f1d
ul.products
li.product
.add_to_cart_button:active {
    transform:
        scale(0.985);
}



/* =========================================================
   16. AJAX LOADING STATE
   ========================================================= */

.elementor-345 .elementor-element.elementor-element-c447f1d
ul.products
.add_to_cart_button.loading {
    pointer-events:
        none;

    opacity:
        0.65;
}


.elementor-345 .elementor-element.elementor-element-c447f1d
ul.products
.add_to_cart_button.loading::after {
    content:
        "";

    width:
        13px;

    height:
        13px;

    border:
        2px solid
        rgba(10,37,64,0.20);

    border-top-color:
        var(--archive-navy);

    border-radius:
        50%;

    animation:
        rks-archive-spin
        0.65s
        linear
        infinite;
}


@keyframes rks-archive-spin {

    to {
        transform:
            rotate(360deg);
    }

}



/* =========================================================
   17. ADDED TO CART
   ========================================================= */

.elementor-345 .elementor-element.elementor-element-c447f1d
ul.products
.add_to_cart_button.added {
    background:
        var(--archive-teal) !important;

    border-color:
        var(--archive-teal) !important;

    color:
        #06252b !important;
}


.elementor-345 .elementor-element.elementor-element-c447f1d
ul.products
.added_to_cart {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    margin:
        7px
        0
        0;

    font-family:
        var(--rks-font-ui, "Outfit", sans-serif);

    font-size:
        12px;

    font-weight:
        600;

    color:
        var(--archive-teal-dark);

    text-decoration:
        none;
}



/* =========================================================
   18. PAGINATION
   Archive widget support
   ========================================================= */

.elementor-345 .elementor-element.elementor-element-c447f1d
.woocommerce-pagination {
    grid-column:
        1 / -1;

    width:
        100%;

    margin:
        clamp(28px, 4vw, 46px)
        0
        0 !important;
}


.elementor-345 .elementor-element.elementor-element-c447f1d
.woocommerce-pagination
ul.page-numbers {
    display:
        flex !important;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        7px;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        0 !important;
}


.elementor-345 .elementor-element.elementor-element-c447f1d
.woocommerce-pagination
ul.page-numbers
li {
    margin:
        0 !important;

    padding:
        0 !important;

    border:
        0 !important;
}


.elementor-345 .elementor-element.elementor-element-c447f1d
.woocommerce-pagination
.page-numbers
a,

.elementor-345 .elementor-element.elementor-element-c447f1d
.woocommerce-pagination
.page-numbers
span {
    display:
        flex !important;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        38px;

    height:
        38px;

    padding:
        0
        11px !important;

    background:
        #ffffff !important;

    border:
        1px solid
        var(--archive-border) !important;

    border-radius:
        8px;

    font-family:
        var(--rks-font-ui, "Outfit", sans-serif);

    font-size:
        13px;

    font-weight:
        600;

    color:
        var(--archive-navy) !important;

    text-decoration:
        none;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}


.elementor-345 .elementor-element.elementor-element-c447f1d
.woocommerce-pagination
.page-numbers
.current {
    background:
        var(--archive-navy) !important;

    border-color:
        var(--archive-navy) !important;

    color:
        #ffffff !important;
}


.elementor-345 .elementor-element.elementor-element-c447f1d
.woocommerce-pagination
.page-numbers
a:hover {
    background:
        rgba(48,196,182,0.07) !important;

    border-color:
        var(--archive-teal) !important;

    color:
        var(--archive-teal-dark) !important;
}



/* =========================================================
   19. LARGE TABLET / SMALL LAPTOP
   3 COLUMNS
   ========================================================= */

@media (max-width: 1180px) {

    .elementor-345 .elementor-element.elementor-element-c447f1d
    ul.products {
        grid-template-columns:
            repeat(3, minmax(0,1fr)) !important;

        gap:
            18px !important;
    }

}



/* =========================================================
   20. TABLET PORTRAIT
   Still 3 columns where possible
   ========================================================= */

@media (max-width: 1024px) {

    .elementor-345 .elementor-element.elementor-element-c447f1d
    .woocommerce {
        gap:
            18px;
    }


    .elementor-345 .elementor-element.elementor-element-c447f1d
    ul.products {
        grid-template-columns:
            repeat(3, minmax(0,1fr)) !important;

        gap:
            15px !important;
    }


    .elementor-345 .elementor-element.elementor-element-c447f1d
    ul.products
    li.product {
        padding:
            9px !important;
    }


    .elementor-345 .elementor-element.elementor-element-c447f1d
    ul.products
    .woocommerce-loop-product__title {
        font-size:
            14px !important;
    }


    .elementor-345 .elementor-element.elementor-element-c447f1d
    .woocommerce-ordering
    .orderby {
        min-width:
            190px;
    }

}



/* =========================================================
   21. NARROW TABLET
   Switch to 2 columns
   ========================================================= */

@media (max-width: 820px) {

    .elementor-345 .elementor-element.elementor-element-c447f1d
    ul.products {
        grid-template-columns:
            repeat(2, minmax(0,1fr)) !important;

        gap:
            14px !important;
    }

}



/* =========================================================
   22. MOBILE
   ========================================================= */

@media (max-width: 767px) {

    /* Toolbar stacks cleanly */

    .elementor-345 .elementor-element.elementor-element-c447f1d
    .woocommerce {
        grid-template-columns:
            1fr !important;

        gap:
            12px !important;
    }


    .elementor-345 .elementor-element.elementor-element-c447f1d
    .woocommerce-result-count {
        grid-column:
            1;

        font-size:
            12px !important;
    }


    .elementor-345 .elementor-element.elementor-element-c447f1d
    .woocommerce-ordering {
        grid-column:
            1;

        width:
            100%;
    }


    .elementor-345 .elementor-element.elementor-element-c447f1d
    .woocommerce-ordering
    .orderby {
        width:
            100% !important;

        min-width:
            0;

        height:
            41px;
    }


    /* Grid */

    .elementor-345 .elementor-element.elementor-element-c447f1d
    ul.products {
        grid-column:
            1;

        grid-template-columns:
            repeat(2, minmax(0,1fr)) !important;

        gap:
            11px !important;

        margin-top:
            5px !important;
    }


    /* Cards */

    .elementor-345 .elementor-element.elementor-element-c447f1d
    ul.products
    li.product {
        padding:
            8px !important;

        border-radius:
            12px !important;
    }


    /* Images */

    .elementor-345 .elementor-element.elementor-element-c447f1d
    ul.products
    li.product
    .woocommerce-LoopProduct-link
    img {
        margin-bottom:
            10px !important;

        padding:
            8px;

        border-radius:
            8px;
    }


    /* Title */

    .elementor-345 .elementor-element.elementor-element-c447f1d
    ul.products
    .woocommerce-loop-product__title {
        margin-bottom:
            7px !important;

        font-size:
            13px !important;

        line-height:
            1.45 !important;
    }


    /* Price */

    .elementor-345 .elementor-element.elementor-element-c447f1d
    ul.products
    li.product
    .price {
        margin-bottom:
            10px !important;

        font-size:
            15px !important;
    }


    /* Button */

    .elementor-345 .elementor-element.elementor-element-c447f1d
    ul.products
    li.product
    .add_to_cart_button,
    .elementor-345 .elementor-element.elementor-element-c447f1d
    ul.products
    li.product
    .button {
        min-height:
            39px;

        padding:
            9px
            8px !important;

        font-size:
            12px !important;
    }


    /* Sale badge */

    .elementor-345 .elementor-element.elementor-element-c447f1d
    ul.products
    li.product
    .onsale {
        top:
            14px !important;

        left:
            14px !important;

        padding:
            5px
            7px !important;

        font-size:
            8px !important;
    }

}



/* =========================================================
   23. SMALL MOBILE
   Keep 2 columns but tighten spacing
   ========================================================= */

@media (max-width: 480px) {

    .elementor-345 .elementor-element.elementor-element-c447f1d
    ul.products {
        gap:
            8px !important;
    }


    .elementor-345 .elementor-element.elementor-element-c447f1d
    ul.products
    li.product {
        padding:
            7px !important;
    }


    .elementor-345 .elementor-element.elementor-element-c447f1d
    ul.products
    li.product
    .woocommerce-LoopProduct-link
    img {
        padding:
            6px;
    }


    .elementor-345 .elementor-element.elementor-element-c447f1d
    ul.products
    .woocommerce-loop-product__title {
        font-size:
            12.25px !important;

        line-height:
            1.42 !important;
    }


    .elementor-345 .elementor-element.elementor-element-c447f1d
    ul.products
    li.product
    .price {
        font-size:
            13.5px !important;
    }


    .elementor-345 .elementor-element.elementor-element-c447f1d
    ul.products
    li.product
    .add_to_cart_button,
    .elementor-345 .elementor-element.elementor-element-c447f1d
    ul.products
    li.product
    .button {
        padding:
            8px
            5px !important;

        font-size:
            11.5px !important;
    }

}



/* =========================================================
   24. VERY SMALL MOBILE
   One column only when truly necessary
   ========================================================= */

@media (max-width: 340px) {

    .elementor-345 .elementor-element.elementor-element-c447f1d
    ul.products {
        grid-template-columns:
            1fr !important;

        gap:
            12px !important;
    }


    .elementor-345 .elementor-element.elementor-element-c447f1d
    ul.products
    li.product {
        padding:
            9px !important;
    }


    .elementor-345 .elementor-element.elementor-element-c447f1d
    ul.products
    .woocommerce-loop-product__title {
        font-size:
            14px !important;
    }


    .elementor-345 .elementor-element.elementor-element-c447f1d
    ul.products
    li.product
    .price {
        font-size:
            16px !important;
    }


    .elementor-345 .elementor-element.elementor-element-c447f1d
    ul.products
    li.product
    .add_to_cart_button,
    .elementor-345 .elementor-element.elementor-element-c447f1d
    ul.products
    li.product
    .button {
        font-size:
            13px !important;
    }

}



/* =========================================================
   25. ACCESSIBILITY
   ========================================================= */

.elementor-345 .elementor-element.elementor-element-c447f1d
a:focus-visible,

.elementor-345 .elementor-element.elementor-element-c447f1d
select:focus-visible {
    outline:
        2px solid
        var(--archive-teal) !important;

    outline-offset:
        3px !important;
}



/* =========================================================
   26. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .elementor-345 .elementor-element.elementor-element-c447f1d *,
    .elementor-345 .elementor-element.elementor-element-c447f1d *::before,
    .elementor-345 .elementor-element.elementor-element-c447f1d *::after {
        transition:
            none !important;

        animation:
            none !important;
    }

}


/* =========================================================
   END — RKS PRODUCT ARCHIVE
   ========================================================= *//* End custom CSS */