.elementor-36738 .elementor-element.elementor-element-9a46bc6{--display:flex;--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;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--margin-top:20px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-36738 .elementor-element.elementor-element-a6664c1{text-align:center;}.elementor-36738 .elementor-element.elementor-element-67899a3{--divider-border-style:solid;--divider-color:var( --e-global-color-text );--divider-border-width:2px;}.elementor-36738 .elementor-element.elementor-element-67899a3 > .elementor-widget-container{padding:0px 20px 0px 20px;}.elementor-36738 .elementor-element.elementor-element-67899a3 .elementor-divider-separator{width:100%;}.elementor-36738 .elementor-element.elementor-element-67899a3 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-36738 .elementor-element.elementor-element-593e37f{--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:stretch;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:0px;--padding-bottom:0px;--padding-left:10px;--padding-right:10px;}.elementor-36738 .elementor-element.elementor-element-df1f069{--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:stretch;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-36738 .elementor-element.elementor-element-f04b16c{--spacer-size:20px;}@media(max-width:1024px){.elementor-36738 .elementor-element.elementor-element-593e37f{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}/* Start custom CSS */* {
    font-family: rajdhani;
}

.category-heading h1 {
    font-family: rajdhani;
    text-align: center;
}

.ast-woo-product-category {
    display: none!important;
}

a.button.wp-element-button.product_type_variable {
    display: none!important;
}

a.woocommerce-LoopProduct-link.woocommerce-loop-product__link img {
    aspect-ratio: 261 / 328 !important;
}

input.wpfSearchFieldsFilter.passiveFilter {
    background-color: transparent;
}

input.wpfSearchFieldsFilter.passiveFilter:focus {
    color: white;
}

button.wpfClearButton.wpfButton {
    background-color: transparent;
    border: 1px solid white;
    border-radius: 0;
    width: 50%;
}

button.wpfClearButton.wpfButton:hover, button.wpfClearButton.wpfButton:hover {
    color: #FF336F;
}

.wfpTitle.wfpClickable {
    font-size: 20px!important;
}

a.page-numbers {
    border: 1px solid white;
}

a.page-numbers:focus{
    background-color: transparent!important;
}

span.page-numbers.current {
    border: 2px solid white;
}

span.ast-shop-product-out-of-stock {
    background-color: #4e2454a8!important;
}

ul.products.elementor-grid.columns-5 li {
    margin: 0!important;
}

.product-grid nav.woocommerce-pagination {
    text-align: center;
}

.woocommerce-loop-product__title:hover {
    color: #FF336F;
}

.single-product {
    display: flex;
    justify-content: center;
    flex: 0 0 auto;
    width: 19%; /* Default for desktop, showing 5 products */
    scroll-snap-align: start;
    margin: 0 3px;
}


/* Tablet */
@media (max-width: 1024px) {
    .single-product {
        width: 32.5%; /* 3 products */
    }
}

/* Mobile */
@media (max-width: 480px) {
    .single-product {
        width: 48%; /* 2 products */
    }
}

@media (min-width: 1557px) {
    .single-product {
        width: 19.5%;
    }
}

.single-product:hover {
    color: #FFFFFF;
}

.product-container {
    margin: 0 5px;
}

.product-container:foucs {
    border: none;
}

.product-image-container {
    margin-top: 10px;
    width:100%;
    max-width: 285px;
}

.product-image-container img{
    border-radius: 10px;
    box-shadow: 0px 0px 9px #354F9C,0px 0px 9px #354F9C,0px 0px 9px #354F9C;
    max-height: 312px;
    transition: transform .2s;
    width:100%;
}

div#products-container {
    display: flex;
    flex-wrap: wrap;
}

.product-image-container img:hover {
    transform: scale(1.05);
}

.product-info-container {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: #060B1F;
    box-shadow: 0px 0px 9px #354F9C,0px 0px 9px #354F9C,0px 0px 9px #354F9C;
    height: 150px;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 285px;
}

@media (max-width: 480px) {
    .product-info-container {
        height: 240px;
    }
}

.elementor-element.elementor-element-5ff25b8.products-content-and-filter-container.elementor-widget.elementor-widget-shortcode {
    width: 100%;
}

.product-title {
    font-family: rajdhani!important;
    font-size: 1.1rem!important;
    padding: 0 10px;
    padding-top: 10px;
    text-align: center;
    font-weight: normal!important;
}

.product-price {
    font-family: rajdhani!important;
    font-size: 1.1rem!important;
    margin-bottom: 10px!important;
    text-align: center;
    font-weight: 500;
}

.product-title:hover {
    text-shadow: 0px 0px 9px #354F9C,0px 0px 9px #354F9C,0px 0px 9px #354F9C;
}

.product-title:focus {
    color: #FFFFFF;
}

.product-price:focus{
    color: #FFFFFF;
}

.out-of-stock .product-image-container {
    position: relative;
    filter: grayscale(100%); /* Gray out the image */
}

.out-of-stock .product-image-container .stock-overlay {
    font-family: rajdhani;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    text-align: center;
    padding: 10px 0;
    font-size: 20px;
    font-weight: bold;
    
}

.woocommerce-js div.product .out-of-stock {
    color: white;
}

div#pagination-container {
    text-align: center;
    margin: 20px 0;
}

a.ajax-pagination {
    font-size: 1.1rem;
    font-family: rajdhani;
    padding: 7px;
    box-shadow: 0px 0px 9px #354F9C,0px 0px 9px #354F9C,0px 0px 9px #354F9C;
    margin: 0 5px;
}

a.ajax-pagination:hover {
    text-shadow: 0px 0px 9px #354F9C,0px 0px 9px #354F9C,0px 0px 9px #354F9C;
    color: #FFFFFF;
}

a.ajax-pagination:focus {
    color: #FFFFFF;
    border: none;
}

span.current-page {
    font-size: 1.1rem;
    font-family: rajdhani;
    padding: 7px;
    box-shadow: 0px 0px 9px #354F9C, 0px 0px 9px #354F9C, 0px 0px 9px #354F9C;
    margin: 0 5px;
    font-weight: bold;
}

.filter-group li {
    list-style: none; /* Removes default list style */
    cursor: pointer; /* Changes cursor to pointer on hover */
    position: relative; /* Allows absolute positioning of pseudo-elements relative to this item */
    padding-left: 25px; /* Provides space for the square/tick mark */
}

.filter-group li::before {
    content: ''; /* No text content */
    position: absolute;
    left: 0;
    top: 50%; /* Center vertically */
    transform: translateY(-50%); /* Center vertically */
    width: 12px; /* Square size */
    height: 12px; /* Square size */
    border: 2px solid #354F9C; /* Solid border with white color */
    border-radius: 3px; /* Rounded corners */
    box-sizing: border-box; /* Includes padding and border in the element's total width and height */
}

.filter-group li.selected::before {
    content: '\2713'; /* Unicode for check mark */
    font-size: 20px; /* Adjust size as needed */
    color: #4CAF50; /* Example: green color for the check mark */
    line-height: 4px; /* Aligns the checkmark vertically */
    text-align: center; /* Centers the checkmark horizontally */
    border-radius: 3px; /* Ensure rounded corners persist */
}

.filter-group li.selected {
    font-weight: bold;
}

.filter-group li:hover{
    text-shadow: 0px 0px 9px #354F9C,0px 0px 9px #354F9C,0px 0px 9px #354F9C;
}
    
.products-content-and-filter-container .elementor-widget-container .elementor-shortcode {
    display: flex;
    flex-direction: row;
}

/* Hide the filter button on larger screens */
.filter-button {
    display: none;
}

/* Style the off-canvas menu for mobile */
@media (max-width: 767px) {
    .filter-button {
        font-family: rajdhani;
        font-size: 1.1rem;
        display: block; /* Show the button on mobile */
        bottom: 10px;
        left: 10px;
        z-index: 1050;
        background-color: #060B1F;
        box-shadow: 0px 0px 9px #354F9C,0px 0px 9px #354F9C,0px 0px 9px #354F9C;
        margin-left: 10px;
        margin-bottom: 40px;
    }
    
    .filter-button:hover {
        background-color: #060B1F!important;
        text-shadow: 0px 0px 9px #354F9C,0px 0px 9px #354F9C,0px 0px 9px #354F9C;
    }

    .off-canvas-filters {
        position: fixed;
        left: -100%; /* Start off-screen */
        top: 0;
        width: 80%; /* Adjust width for off-canvas menu */
        height: 100%;
        background: #fff;
        transition: left 0.3s ease;
        overflow-y: auto; /* Enable scrolling for long filter lists */
        z-index: 1049; /* Adjust as necessary */
        box-shadow: 2px 0 5px rgba(0,0,0,0.5);
    }

    .off-canvas-active {
        left: 0; /* Bring into view when active */
    }

    /* Ensure the filters are hidden on desktop but visible when off-canvas menu is active */
    .product-filters {
        display: none;
    }

    .off-canvas-active.product-filters {
        display: block;
    }
    
    .filter-group {
        padding: 10px;
        margin-top: 15px;
        margin-bottom: 15px;
        margin-right: 15px;
        border-bottom: 1px solid #354F9C;
    }
    
    .filter-name {
        font-family: rajdhani!important;
    }
    
    div#filters-off-canvas {
        background-color: #060B1F;
        box-shadow: 0px 0px 9px #354F9C,0px 0px 9px #354F9C,0px 0px 9px #354F9C;
    }
    
    .filter-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        border-bottom: 1px solid #354F9C;
    }
    
    .filter-header h2 {
        margin: 0;
        font-size: 18px;
    }
    
    .close-filters {
        border: none;
        background: none;
        font-size: 24px;
        cursor: pointer;
    }
    
    .products-content-and-filter-container .elementor-widget-container .elementor-shortcode {
    flex-wrap: wrap;
    }
    
    .products-content-and-filter-container .elementor-widget-container .elementor-shortcode {
        padding-left: 5px;
        padding-right: 5px;
    }
}

/* Ensure filters display normally on larger screens */
@media (min-width: 768px) {
    .product-filters {
        display: block;
        min-width: 20%;
    }
    .filter-group {
        background-color: #060F1B;
        box-shadow: 0px 0px 9px #354F9C,0px 0px 9px #354F9C,0px 0px 9px #354F9C;
        padding: 10px;
        margin-bottom: 20px;
        margin-right: 15px;
    }
    
    .filter-header {
        display: none;
    }
    .products-content-and-filter-container .elementor-widget-container .elementor-shortcode {
        padding-left: 20px;
        padding-right: 20px;
        justify-content: center;
    }
    
    .product-content-container {
        width: 80%;
        min-height: 400px;
    }
    
    .product-container {
        width: 90%;
    }
}

.filter-group ul {
    margin: 0;
}

#preloader {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

@media (max-width: 767px) {
    #preloader img {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 50px; /* You can adjust the size as needed */
        height: 50px; /* You can adjust the size as needed */
    }
}
    
@media (min-width: 768px) {    
    /* Ensure the image is centered within the preloader */
    #preloader img {
        position: absolute;
        left: 50%;
        width: 128px; /* You can adjust the size as needed */
        height: 128px; /* You can adjust the size as needed */
    }
}/* End custom CSS */