.alg-pdp-slider .swiper-button-next::after,
.alg-pdp-slider .swiper-button-prev::after {
  content: none!important;
  font-size: inherit;
  line-height: normal  
}


.alg-pdp-slider .swiper-button-prev,
.alg-pdp-slider .swiper-button-next  {
    width:44px;
    height:44px;
    background-color: rgb(237 237 237 / 75%)

}
.alg-pdp-slider .swiper-button-prev svg,
.alg-pdp-slider .swiper-button-next svg {
  fill: #000
}

.alg-pdp-slider{
    margin-bottom:2rem;
}

#alg-search-box-container{
    display: none;
}

#alg-result-filter-drawer-top-row{
    display: none;
}
.alg-no-results{
    text-align: center;
}

#view-all-results-button{
    margin:0 auto;
}
.w-100{
    width:100%;
}
.align-vertical{
    display: flex;
    align-items: center;
}

.align-vertical-end{
    display: flex;
    align-items: end;
}

#alg-result-stats{
    display: flex;
    flex-direction: column;
    margin-bottom:3rem;
    align-items: center;
    
}
#alg-result-stats h1{
    margin-bottom:0;
}

#alg-result-hits-count{
    font-size:12px;
    
}


#alg-current-refinements{
    margin-bottom:1rem;
}
.ais-CurrentRefinements-list  .ais-CurrentRefinements-item:nth-child(n+2) {
    margin-bottom:0;
}


.ais-CurrentRefinements-list{
    display:flex;
    flex-wrap: wrap;    
    row-gap:5px;
    column-gap:5px;
}

span.ais-CurrentRefinements-label{
    display: none;
}

.ais-CurrentRefinements-category{
    display: inline-flex;
    margin-right:10px;
    justify-content: center;
    align-items: center;
    font-size:11px;
    background-color: #0085ca;
    color:#FFF;
    padding:0.5rem 1rem;
    border-radius: 20px;
}
.ais-CurrentRefinements-categoryLabel{
    padding-right:5px;
}


.ais-ClearRefinements-button{
    font-size:13px;
}


.ais-ClearRefinements-button:focus-visible,.ais-ClearRefinements-button:active,.ais-ClearRefinements-button:hover.ais-ClearRefinements-button:hover,.ais-ClearRefinements-button:focus{
    background-color: transparent;
    color:initial;
    outline:none
}
.ais-ClearRefinements-button--disabled{
    visibility: hidden;
}
.ais-ClearRefinements{
    display: flex;
    
    
}
.ais-ClearRefinements-button
{
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: initial;
}
.alg-show-more--disabled{
    display: none;
}
body button.alg-show-more{
    background: none!important;
    color:#000;
    font-size:12px;
    padding:1rem 1rem;
    margin:0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: initial;
}


body button.alg-show-more:hover{
    opacity: 0.5;
    background: none!important;
  
}


#alg-dynamic-widgets{
    background-color: #F2F2F2;
    padding:1rem 2rem;
    height:100%;
}

#alg-search-result{
    padding:1rem 2rem;
}


.ais-DynamicWidgets-widget{
    margin-bottom:1.5rem;
}

.ais-Panel{
    border-bottom:1px solid #EAEBED;
    padding-bottom:1.5rem;
    width:100%;
}
.ais-Panel-header {
    display: flex;
     font-weight: bold;
    font-size: 13px;
    text-transform: none;
        margin-bottom: 1em;
}


.ais-HierarchicalMenu-link{
    display: flex;
        font-size: 12px;
    line-height: 1.6em;
    color: #000;
}

.ais-HierarchicalMenu-item--parent{       
}

.ais-HierarchicalMenu-link--selected{
    color:#0085ca;
    font-weight:600;
}


.ais-NumericMenu-item,.ais-RefinementList-item{
    margin-bottom:8px;
}
input.ais-NumericMenu-radio,input.ais-RefinementList-checkbox{
    margin:0 5px 0 0 ;
}

.ais-RefinementList-label{
    display:flex;
    font-weight:normal;
    align-items: center;
    margin-bottom:0;
}


label.ais-NumericMenu-label{
        display:flex;
    font-weight:normal;
    align-items: center;
    margin-bottom:0;
}
.ais-HierarchicalMenu-count,.ais-RefinementList-count{
    margin-left: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 8px;
    font-size: 10px;
    line-height: 16px;
    border: 1px solid #d6d6e7;
    box-sizing: border-box;
    border-radius: 93px;
    height: 16px;
    background: #f5f5fa;
    color: #757575;
    margin-top: 4px;
}
.awemenu-logo {
    margin-right:0;
}

#alg-container{
    display: none;    
    position: absolute;
    z-index:3;
    background:white;
    max-width:800px;
    right:0;    
    box-shadow:-6px 4px 7px rgba(0,0,0,0.1);
}

#alg-instant-search{
    border:1px solid #EAEBED;
    /* padding:1rem 3rem; */
    line-height:1;
}

.ais-Pagination-item{
    min-width: 30px;
    height: 30px;
    line-height: 27px;
    padding: 0 0px;
    text-align: center;
    text-decoration: none;
    color: #262624;
    background-color: transparent;
    border: 1px solid #004b75;
    margin: 0 0.5rem;
}

.ais-Pagination-item a{
    display:block;
    width:100%;
}

.ais-Pagination-link{
    
}

.ais-Pagination-list{
    justify-content:center;
    margin-bottom:3rem;
}

.ais-Pagination-item--selected{
 
    background-color: #0085ca;
    border-color: #0085ca;
    cursor: default;
}

.ais-Pagination-item--selected a{
    color: WHITE;
}

.ais-Pagination-item--firstPage, .ais-Pagination-item--lastPage{
    border:none;
}

.ais-Pagination-item--disabled {
    opacity: 0.2;
}   

.alg-show-more--disabled{
    display: none;
}



.ais-Highlight-highlighted{
    background-color: #0085ca;
    padding: .1em .2em;
    color: white;
    display: inline-flex;
}

 #alg-search-box-dummy{
    border-bottom-right-radius:20px;
    border-top-right-radius: 20px;
    background-color: #f5f5f5;
    height:35px;
    border:none;
    padding-left:7px;
    outline:none!important;
    box-shadow:none;
    width:200px;

}

    
#alg-search-icon{
    display: flex;
    justify-content: center;
    align-items:center;
    border-bottom-left-radius:20px;
    border-top-left-radius: 20px;
    background-color: #f5f5f5;
    height:35px;
    border:none;
    padding-left:7px;
    outline:none!important;

}


    

#alg-search-box-parent{
    height:69px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right:5px;

}



#alg-container .ais-Hits-item .br-product__name{
    min-height:auto;
    font-size:12px;
}


#alg-container .ais-Hits-item .br-product__price{
    border-top: none;
    min-height:auto;
    margin-top:0;
    padding-top:0;
    font-size:11px;
}

#alg-container .ais-Hits-item .brand-name{
    font-size:inherit;
}
#alg-container .ais-Hits-item .br-product__price .prod-price,#alg-container .ais-Hits-item .br-product__price .prod-rrp{
    font-size:12px;
}

#alg-container .ais-Hits-item .br-product__price .prod-price{
 font-weight: 600;
}

#alg-container .ais-Hits-item .br-product__price .prod-rrp{    
    text-decoration: line-through;
    display: inline-block;
    margin-right:5px;
}


#alg-container .ais-Hits-item .br-board{

    line-height: initial;
}


#alg-result-container{
    margin-top:2rem;
}

@media screen and (max-width: 480px){
#alg-result-container{
    margin-top:.5rem;
}
}

#alg-result-sort-row{
    width:100%;
    margin-bottom:1.5rem;
    padding-bottom:1.5rem;
    border-bottom:1px solid #EAEBED;
}


.ais-Panel-body{
    margin-top:1rem;
}
.ais-Panel--collapsed .ais-Panel-body{
    display: none;
}

.ais-Panel-collapseButton, .ais-Panel-collapseButton:hover, .ais-Panel-collapseButton:focus,.ais-Panel-collapseButton:active,.ais-Panel-collapseButton:focus-visible{
    background: initial;
    color: black;
    border: 0;
    margin: initial;
    padding: initial;
    margin-left:auto;
    line-height:1;
}

.ais-Panel-collapseButton{
    font-size:18px;

}



.ais-RefinementList-labelText{
    display: flex;
    align-items: center;
        font-size: 12px;
}



/* Optional: Add some spacing between refinement list items */
.ais-RefinementList-item {
    margin-bottom: 5px;
}

/* Style the label to align the custom checkbox and text */
.ais-RefinementList-label {
    display: flex; /* Aligns the custom checkbox and text nicely */
    align-items: center; /* Vertically centers items in the label */
    cursor: pointer;
    position: relative; /* Establishes a positioning context for absolutely positioned children/pseudo-elements if needed */    
    -webkit-tap-highlight-color: transparent; /* Removes tap highlight on mobile */
}

/* 1. Hide the default browser checkbox input */
.ais-RefinementList-checkbox {
    position: absolute; /* Take it out of the document flow */
    opacity: 0;         /* Make it invisible */
    cursor: pointer;    /* Still want the pointer cursor when hovering the area */
    height: 0;          /* Remove its dimensions */
    width: 0;           /* Remove its dimensions */
}

/* 2. Create the custom checkbox's box appearance */
/* We'll use the ::before pseudo-element on the ais-RefinementList-labelText span,
   which is a sibling that comes directly after the hidden input checkbox. */
.ais-RefinementList-labelText::before {
    content: '';
    display: inline-block;   /* Allows setting width, height, and margins */
    width: 15px;             /* Width of your custom checkbox (adjust as needed) */
    height: 15px;            /* Height of your custom checkbox (adjust as needed) */
    border: 1px solid #B0B0B0; /* Light grey border, similar to your image */
    background-color: #fff;    /* White background for the unchecked state */
    border-radius: 3px;        /* Slightly rounded corners, as in your image */
    margin-right: 10px;        /* Space between the custom checkbox and the label text */
    flex-shrink: 0;            /* Prevents the box from shrinking if the label text is long */
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out; /* Smooth transition */
}

/* 3. Style the custom checkbox when the actual hidden checkbox is checked */
.ais-RefinementList-checkbox:checked + .ais-RefinementList-labelText::before {
    background-color: #262624; /* Example: Blue background when checked. Change to your brand color. */
    border-color: #262624;       /* Border color matches the background when checked. */
}

/* 4. Create and style the checkmark icon using the ::after pseudo-element */
/* This will only be visible when the checkbox is checked. */
.ais-RefinementList-checkbox:checked + .ais-RefinementList-labelText::after {
    content: '';
    position: absolute;
    /* Position the checkmark inside the custom box created by ::before.
       The 'left' and 'top' values are relative to the start of the .ais-RefinementList-labelText span.
       Adjust these fine-tune the checkmark's position within the 18x18px box. */
    left: 5px;  /* (18px box width - 5px checkmark base width) / 2 + small adjustment */
    top: 44%;   /* Align to the vertical center of the label text line */

    /* Checkmark dimensions */
    width: 5px;
    height: 8px;

    border: solid white; /* Color of the checkmark */
    border-width: 0 2px 2px 0; /* Creates the 'L' shape for the checkmark (bottom and right borders) */

    transform: translateY(-50%) rotate(45deg); /* Vertically center and rotate to form checkmark */
}

/* Optional: Add a focus style for accessibility to the custom checkbox */
.ais-RefinementList-checkbox:focus + .ais-RefinementList-labelText::before {
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.3); /* Example focus ring, adapt color */
    border-color: #007bff; /* Optional: change border color on focus too */
}

/* Optional: Style the count if it's too close or misaligned */
.ais-RefinementList-count {
    margin-left: auto;  /* Pushes the count to the far right if label is a flex container */
    padding-left: 10px; /* Add some space before the count */
}






/* Style the label to align the custom radio and text */
.ais-NumericMenu-label {
    display: flex;         /* Aligns items nicely (custom radio, text) */
    align-items: center;   /* Vertically centers items in the label */
    cursor: pointer;
    position: relative;    /* Establishes a positioning context for pseudo-elements */        
    -webkit-tap-highlight-color: transparent; /* Removes tap highlight on mobile */
}

/* 1. Hide the default browser radio input */
.ais-NumericMenu-radio {
    position: absolute; /* Take it out of the document flow */
    opacity: 0;         /* Make it invisible */
    cursor: pointer;
    height: 0;          /* Remove its dimensions */
    width: 0;
}

/* 2. Create the custom radio button's outer circle appearance */
/* We use the ::before pseudo-element on the ais-NumericMenu-labelText span */
.ais-NumericMenu-labelText::before {
    content: '';
    display: inline-block; /* Allows setting width, height, etc. */
    box-sizing: border-box; /* Ensures padding and border are included in width/height */
    width: 16px;           /* Width of your custom radio button */
    height: 16px;          /* Height of your custom radio button */
    border: 1px solid #B0B0B0; /* Default light grey border for unchecked state */
    background-color: #fff;  /* White background */
    border-radius: 50%;      /* Makes it a circle */
    margin-right: 10px;      /* Space between the custom radio and the label text */
    flex-shrink: 0;          /* Prevents the circle from shrinking if label text is long */
    transition: border-color 0.15s ease-in-out; /* Smooth transition for border color */
}

/* 3. Style the custom radio when the hidden input is checked */
.ais-NumericMenu-radio:checked + .ais-NumericMenu-labelText::before {
    border-color: #333; /* Border of the outer circle changes to #333 when checked */
}

/* 4. Create the inner dot (the "icon") using ::after on the labelText span */
/* This will only be visible when the radio button is checked. */
.ais-NumericMenu-radio:checked + .ais-NumericMenu-labelText::after {
    content: '';
    position: absolute;

    /* Position the inner dot in the center of the ::before pseudo-element (the outer circle).
       The ::before element is 18x18px. We want a smaller inner dot, e.g., 10x10px.
       Offset from left of ::before's effective position = (18px_outer_width - 10px_inner_width) / 2 = 4px.
       The 'left' value here is relative to the start of the .ais-NumericMenu-labelText span's content box. */
    left: 3px;
    top: 10px; /* Align to the vertical center of the label text line */

    width: 10px;  /* Width of the inner dot */
    height: 10px; /* Height of the inner dot */
    background-color: #333; /* The requested background color for the 'icon' (inner dot) */
    border-radius: 50%; /* Makes the inner dot circular */
    transform: translateY(-50%); /* Fine-tunes vertical centering */
}

/* Optional: Add a focus style for accessibility to the custom radio button */
.ais-NumericMenu-radio:focus + .ais-NumericMenu-labelText::before {
    box-shadow: 0 0 0 2px rgba(51, 51, 51, 0.3); /* Example focus ring using a shade of #333 */
    border-color: #333; /* Optional: also change border color on focus */
}

.ais-NumericMenu-labelText{
    display: flex;
    align-items:center;

}




/* --- Default (Desktop) Styles --- */
#alg-result-filter-drawer-button,
#alg-result-drawer-overlay,
.alg-result-close-drawer-button {
    display: none; /* Hidden by default */
}

.ais-SortBy-select{
    padding: 10px 40px 10px 20px;
    height: auto;
    width: auto;
}

 #alg-result-sort{
      display: flex;
    }

    #alg-result-sort .ais-SortBy{
        margin-left:auto;
    }




/* --- Mobile / Drawer Styles (Bootstrap 3 'md' breakpoint is 992px) --- */


.ais-Carousel-item{
    padding:15px;
}

.ais-Carousel-navigation{
    top:0;
    height:100%;
}


.ais-Carousel-navigation{
     
}
.ais-Carousel-navigation:hover,.ais-Carousel-navigation:focus,.ais-Carousel-navigation:focus-visible,.ais-Carousel-navigation:focus-within,.ais-Carousel-navigation:active{
    
    background-color: transparent!important;
    border-radius:0!important;
    color:rgba(0,0,0,0.3)!important;
    
}

.ais-Carousel-navigation svg{
    height:25px;
    width:25px;
}

@media(min-width:1300px){
    .ais-Carousel-list{
        grid-auto-columns: 25%;
    }
}

@media (max-width: 1300px) {




    #alg-container{
        height:100%;
    }

    #alg-instant-search{
        height:100%;
    }

    #alg-search-close{
        border-left: 1px solid black;
        padding: 5px;        
    }

    #alg-search-close svg{
        height: 25px;
        width: 25px;
    }
    #alg-search-box-container{
        display:flex;
        justify-content: center;
        align-items: center;
        background-color: #f5f5f5;
        padding:5px;
        gap:5px;
    }


    #alg-search-box{
        flex:1;
    }
    #alg-mobile-dummy-input{
        background-color: #f5f5f5;
        height:35px;
        border:none;
        padding-left:7px;
        outline:none!important;
        box-shadow:none;
        width:100%;

    }


    #alg-container{
        width:100%;
        position:fixed;
        z-index:9999;
        top:0;
    }

    #alg-container .ais-Hits-item:nth-child(n+3) {
        display: none;
    }

    #alg-result-filter-drawer .ais-DynamicWidgets .ais-DynamicWidgets-widget:first-child .ais-Panel{
    margin-top:1.5rem;
    padding-top:1.5rem;
    border-top:1px solid #EAEBED;
}

    #alg-result-filter-drawer-top-row{
        display: flex;
        align-items: center;
    }

    #alg-result-filter-drawer-button {
        display: inline-block; /* Show the button via CSS */
        position: fixed; 
        bottom: 0px; /* Adjust as needed */
        right: 15px; /* Adjust as needed */
        z-index: 1040;
        margin-bottom: 15px;
    }

    /* Override BS3 col-md-3 styles and transform into a drawer */
    #alg-result-filter-drawer {
        position: fixed; 
        top: 0;
        left: 0;
        width: 75%; /* Set specific width, overriding BS3's % */
        max-width: 80%;
        height: 100%;
        background-color: #fff; 
        z-index: 1050; 
        padding: 20px;
        box-shadow: 2px 0 5px rgba(0,0,0,0.2);
        
        /* Drawer State & Transition */
        transform: translateX(-100%); 
        transition: transform 0.3s ease-in-out;
        
        overflow-y: auto; 
        
        /* Ensure BS3 floats don't interfere */
        float: none; 

        z-index:9999;
    }

    /* Use prefixed class */
    #alg-result-filter-drawer.alg-result-is-open {
        transform: translateX(0); 
    }
    
    .alg-result-close-drawer-button {
        display: block; /* Show the close button */                
        background: none;
        border: none;
        cursor: pointer;
        line-height: 1;
        padding: 0;
        text-shadow: none; 
        margin-left:auto;
        color:black;
    }
    .alg-result-close-drawer-button:hover {
        opacity: 0.8;
    }

    #alg-result-drawer-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5); 
        z-index: 1045; 
        display: none; /* JS will handle showing this */
    }

    /* Use prefixed class */
    #alg-result-drawer-overlay.alg-result-is-visible {
        display: block; 
    }

    /* Optional: Prevent body scroll when drawer is open */
    body.alg-result-drawer-no-scroll {
        overflow: hidden;
    }


    #alg-result-filter-drawer-button.visible-xs, 
    #alg-result-filter-drawer-button.visible-sm {
        display: inline-block !important;
    }
    .alg-result-close-drawer-button.visible-xs,
    .alg-result-close-drawer-button.visible-sm {
        display: block !important;
    }
}