#Header_wrapper { z-index: 999; }
#Content { margin-top: 8em !important; }
.page-title { display: none !important; }
#page-title .mcb-column-inner.mcb-item-column-inner { margin: 0; }
.adv-page-title { color: #7f7d7e; font-size: 24px !important; margin: 0; text-align: center; text-transform: uppercase; }
.adv-page-title span { color: #393939; font-weight: bold; }
.section-filters { z-index: 99; }
.top-inputs { display: flex; align-items: center; gap: 50px; justify-content: center; margin: 25px 0 0; }
.top-inputs .top-input, .top-inputs .ais-SearchBox-input { background: #f5f5f5 !important; border: 0 !important; color: #686868 !important; margin: 0 !important; padding: 10px 40px !important; white-space: nowrap; }
.top-inputs .top-input.active { background: #e3c688 !important; }
.top-inputs .ais-SearchBox-input { box-shadow: none; padding: 10px !important; }
.top-inputs-filters { top: -2px; position: relative; }
.top-inputs-filters-container { display: none; position: relative; width: 100%; background: #e3c688; padding: 50px; z-index: 99; }
.top-inputs-filters-container ul { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; }
.top-inputs-filters-container ul, 
.top-inputs-filters-container ul li { margin: 0; padding: 0; list-style-type: none; flex-basis: 15%; }
.top-inputs-filters-container ul li label { color: #393939; }
.ais-RangeInput-form { justify-content: center; }
.ais-SearchBox-input::placeholder { color: #9c9c9c !important; text-align: center !important; width: 100% !important; letter-spacing: 2px !important; text-transform: uppercase !important; }
.ais-SearchBox-input { width: 250px; padding: 10px 20px !important }
.mid-inputs { display: flex; align-items: center; justify-content: center; margin: 25px 0; }
.mid-inputs > div { display: flex; align-items: center; width: 100%; }
.mid-inputs .ais-rangeFtInSelects { width: 100%; }
.mid-inputs .ais-rangeInput-to-text { color: #000 !important; margin: 0 !important; text-transform: uppercase; }
.mid-inputs label.dim { padding: 0 30px 0 15px !important; text-transform: uppercase !important; margin: 0 !important; min-width: 110px; }
.mid-inputs input { background: #fff !important; box-shadow: none !important; border: 1px solid #d5d5d5 !important; color: #000 !important; padding: 5px !important; margin: 0 15px 0 0 !important; text-align: center; width: 60px !important; }
.mid-inputs input::placeholder { color: #d5d5d5; text-align: center; width: 100%; }
.mid-inputs label.dim.two { margin-left: 60px !important; }
.bottom-label { color: #010101; font-size: 20px !important; text-align: center; text-transform: uppercase; margin: 12px 0; }
.bottom-label .bold { font-weight: bold; }
.sizing-list, .sizing-cats { display: flex; align-items: center; justify-content: center; margin: 0 !important; margin-bottom: 25px !important; } 
.sizing-list li, .sizing-cats li { border: 1px solid #838383; cursor: pointer; list-style-type: none; width: 10%; padding: 5px 10px; text-align: center; margin: 0 11px !important; color: #252525; }
.sizing-list li:hover, .sizing-cats li:hover { background-color: #fff !important; cursor: pointer; }
.sizing-list li.active, .sizing-cats li.active { border: 1px solid #000 !important; background-color: #e2a727 !important; color: #000 !important; }
.bottom-buttons { display: flex; align-items: center; justify-content: center; padding: 0; gap: 15px; }
.bottom-buttons button, .bottom-buttons input { color: #fff !important; margin: 0 !important; border: 0 !important; letter-spacing: 2px !important; text-transform: uppercase !important; padding: 15px 0px !important; font-weight: 600; width: 150px; }
.bottom-buttons .reset,
.bottom-buttons .cancel { background: #e2a727 !important; background-color: #e2a727 !important; }
.bottom-buttons .submit { background: #000 !important; background-color: #000 !important; margin: 0 !important; }
#hits-and-pagination { display: none; }
#hits-and-pagination .mcb-wrap-ceeac9734 .mcb-item-4a9a9ada2 .column_attr { display: flex; justify-content: flex-end; }
#hits-and-pagination .ais-Pagination-list .ais-Pagination-item { list-style-type: none; }
.rheostat-tooltip { font-size: 16px; }
.top-inputs-filters-container .ais-RefinementList-item { flex-basis: 24%; }
.top-inputs-filters-container .ais-RefinementList-item .ais-RefinementList-labelText { text-transform: capitalize;}
.top-inputs-filters-container { max-height: 300px; overflow: hidden; overflow-x: hidden; overflow-y: auto; }
.adv-hits span.onsale { display: block; position: absolute; left: 5px !important; right: auto !important; top: 5px !important; z-index: 99999; min-width: 0; min-height: 0; color: #fff; font-size: 12px; line-height: 18px; font-weight: 500; text-transform: uppercase; width: auto; height: auto; padding: 3px 8px; border-radius: 3px; margin: 0 !important; }
.category-slider .subcategories-list > li:last-child .sub-subcategories-list { left: unset; right: 0; }

/* 1. Container Spacing */
.ais-RangeSlider-custom.noUi-target {
    height: 3px !important; /* Extremely thin line */
    background: #ebebe6 !important; /* Light cream/gray track */
    border: none !important;
    box-shadow: none !important;
    margin: 40px auto 60px auto!important; /* Added bottom margin for labels */
    max-width: 90%;
    width: 630px;
}

.ais-RangeSlider-custom .noUi-pips-horizontal {
  top: -3px!important;
}

/* 2. The Active Range (The Gray Bar) */
.ais-RangeSlider-custom .noUi-connect {
    background: #8e8e8e !important; /* Solid medium gray */
}

/* 3. The Handles (Triple-Ring Effect) */
.ais-RangeSlider-custom .noUi-handle {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    cursor: pointer;
    
    /* The layers: Dark Center -> White Ring -> Gray Outer Ring */
    background: #5e5e5e !important; 
    border: 3px solid #fff !important; 
    box-shadow: 0 0 0 1.5px #8e8e8e !important; 
    
    /* Centering logic */
    top: -9px !important; 
    right: -10px !important;
    
    transition: transform 0.2s ease;
}

/* Clear default noUiSlider decorations */
.ais-RangeSlider-custom .noUi-handle::before,
.ais-RangeSlider-custom .noUi-handle::after {
    display: none !important;
}

/* 4. Labels Below the Slider (Tooltips) */
.ais-RangeSlider-custom .noUi-tooltip {
    background: transparent !important;
    border: none !important;
    color: #5e5e5e !important;
    
    /* Design Requirements: Blair, Uppercase, Kerning */
    font-family: 'Blair', sans-serif !important;
    font-size: 10px !important;
    font-weight: bold;
    letter-spacing: 1.5px;
    
    /* Move below the track */
    bottom: 10px !important; 
    /* bottom: auto !important; */
    display: block !important;
}
.noUi-tooltip::after {
    display: none!Important;
}
/* Style the static milestone labels (Pips) */
.noUi-pips-horizontal {
    height: 40px !important;
    padding: 0 !important;
}

.noUi-value-horizontal {
    font-family: 'Blair', sans-serif !important;
    font-size: 9px !important;
    color: #8e8e8e !important;
    letter-spacing: 1px;
    transform: translate(-50%, 25px) !important; /* Aligns them under the track */
}

/* 1. Hide all intermediate/density ticks */
.ais-RangeSlider-custom .noUi-marker-normal {
    display: none !important;
}

/* 2. Show only the milestone ticks (Large Markers) */
.ais-RangeSlider-custom .noUi-marker-large {
    display: block !important;
    background: #8e8e8e !important; /* Match your gray theme */
    width: 1px !important;
    height: 10px !important; /* Adjust height as needed */
    top: 3px !important; /* Adjust to sit perfectly above/on the track */
}

/* 3. Optional: Hide sub-markers if they appear */
.ais-RangeSlider-custom .noUi-marker-sub {
    display: none !important;
}



/* 5. Mobile Adjustments */
@media only screen and (max-width: 767px) {
    .ais-RangeSlider-custom.noUi-target {
        max-width: 80%;
    }

    #hits-and-pagination {padding: 0 15px!important;}

}
/* Preset Sizing */
/* 1. Container - Ensures proper centering and spacing */
.sizing-list, .classification-list {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 12px !important; /* Space between buttons */
  padding: 20px 0 !important;
  list-style: none !important;
  margin: 0 auto !important;
}

/* 2. Button Styling - Matches image_6a7a0c.png */
.sizing-list li, .classification-list li {
  /* Typography */
    font-family: 'Blair', sans-serif !important;
    font-size: 9px !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: #5e5e5e !important;
    background-color: #e0ddd5 !important;
    border-radius: 6px !important;
    padding: 1px 30px !important;
    text-decoration: none !important;
    transform: none !important;
    border: none !important;
    width: auto !important;
    margin: 0 !important;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    white-space: nowrap;
    font-weight: bold;
}

.classification-list {
    gap: 8px 0px!Important;
}

.classification-list li {
    background: none!important;
    padding: 0 10px ! Important;
    color: #aaa!important;
    text-decoration: underline !important;
    text-underline-offset: 4px;
}

@media (min-width: 767px) {
    .classification-list li:hover {
        color: black!important;
    }
}

.classification-list li.active {
    color: black!important;
}
#advanced-search-toggle-container { margin-bottom: 25px;}

/* Mobile Styles */
@media (max-width: 767px) {
    /* Hide items after the 5th one */
    .classification-list li:nth-child(n+8) {
        display: none;
    }

    /* Show items when the container is expanded */
    .classification-list.expanded li:nth-child(n+8) {
        display: block;
    }

    /* Styling for the See More button */
    .classification-list {padding-bottom: 0!important}
    .see-more-classifications {
        display: block;
        margin: 15px auto;
        padding: 8px 15px;
        /* font-family: 'Blair', sans-serif !important; */
        font-size: 12px !important;
        text-transform: uppercase !important;
        letter-spacing: 2px !important;
        background: transparent;
        color: #5e5e5e;
        cursor: pointer;
        margin-top: 0;
        text-align: center;
    }

    #advanced-search-toggle-btn { margin-bottom: 20px;}
}

/* Hide the toggle button on Desktop */
@media (min-width: 768px) {
    .see-more-classifications {
        display: none !important;
    }
}

/* 3. Hover and Active States */
.section_wrapper .sizing-list li:hover, 
.section_wrapper .sizing-list li.active {
  background-color: #5a574e !important;
  color: #ffffff !important;
  transform: none !important;
}

/* 4. Mobile Responsiveness - 2 Column Grid */
@media only screen and (max-width: 767px) {
  #Content .sizing-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important; /* Reduced gap between pills */
    padding: 10px !important; /* Reduced container padding */
    justify-content: space-between !important; /* Spreads them to the edges */
  }
  
  #Content .sizing-list li {
    /* (100% / 2) - half of the gap to fit 2 items per row */
    flex-basis: 48%;
    font-size: 10px !important; /* Slightly smaller for better fit */
    padding: 6px 4px !important; /* Vertical padding kept, horizontal reduced */
    letter-spacing: 1px !important; /* Tighter kerning for mobile */
    text-align: center !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  #Content .mid-inputs .width, #Content .mid-inputs .length {
    margin: 0!important;
  }
}

/* 1. Container Layout */
#Content .mid-inputs {
    display: flex;
    justify-content: center;
    gap: 30px; /* Space between Width and Length groups */
    padding: 0;
    font-family: 'Blair', sans-serif !important;
}

#Content .mid-inputs .width, 
#Content .mid-inputs .length {
    display: flex;
    flex-direction: column-reverse; /* Label goes UNDER inputs per design */
    align-items: center;
}

/* 2. Label Styling (WIDTH / LENGTH) */
#Content .mid-inputs .dim {
    text-transform: uppercase !important;
    font-family: 'Blair', sans-serif !important;
    font-size: 8px !important;
    letter-spacing: 2px;
    color: #5e5e5e;
    margin-top: 5px !important; /* Space above label since it's at the bottom */
}

/* 3. Form & Input Grouping */
#Content .ais-rangeFtInSelects {
    display: flex;
    align-items: center;
    gap: 0px!important;
}

/* 4. The Box Inputs (FT / IN) */
#Content .mid-inputs input[type="number"] {
    width: 45px !important;
    height: 35px !important;
    border: 1px solid #5e5e5e !important; /* Thin dark border per design */
    border-radius: 0 !important; /* Sharp corners */
    background: transparent !important;
    text-align: center;
    font-size: 10px !important;
    font-family: 'Blair', sans-serif !important;
    padding: 0 !important;
    margin: 0 !important;
    font-weight: 100!important;
    -moz-appearance: textfield; /* Removes arrows */
}

.metric-inputs { gap: 30px!important; }
.metric-range-inputs { gap: 0!important;}
.metric-input-group input {
    width: 45px !important;
    height: 35px !important;
    padding: 0 !important;
    min-width: unset !important;
}
/* Chrome, Safari, Edge, Opera */
.metric-input-group input::-webkit-outer-spin-button,
.metric-input-group input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* Firefox */
.metric-input-group input[type=number] {
  -moz-appearance: textfield !important;
}
.metric-input-group input {
    border: 1px solid #5e5e5e !important;
    border-radius: 0 !important;
    min-width: 65px;
    min-height: 25px;
    background: transparent !important;
    padding: 8px;
    font-family: 'Blair', sans-serif !important;
    text-align: center;
    font-size: 10px !important;
    -moz-appearance: textfield; /* Removes arrows */
}

.metric-input-group span {
    text-transform: uppercase !important;
    font-size: 9px !important;
    letter-spacing: 1px;
    margin: 0 15px !important;
    color: #5e5e5e;
}

.metric-input-group label {
    text-transform: uppercase !important;
    font-family: 'Blair', sans-serif !important;
    font-size: 8px !important;
    letter-spacing: 2px;
    color: #5e5e5e;
    margin-top: 5px !important;
}

/* Removing spin buttons for Chrome/Safari */
#Content .mid-inputs input::-webkit-outer-spin-button,
#Content .mid-inputs input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Overlapping the IN box onto the FT box to create a single middle line */
#Content .mid-inputs .min-in, 
#Content .mid-inputs .max-in {
    margin-left: -1px !important; 
}

#Content .mid-inputs input[type="number"].min-in, 
#Content .mid-inputs input[type="number"].max-in {
    border-left: none !important;
    /* Ensure no margin-left is fighting the alignment now that borders don't overlap */
    margin-left: 0 !important; 
}

/* 5. "TO" Text */
#Content .ais-rangeInput-to-text {
    text-transform: uppercase !important;
    font-size: 9px !important;
    letter-spacing: 1px;
    margin: 0 15px !important;
    color: #5e5e5e;
}

/* 6. Placeholder Styling */
#Content .mid-inputs input::placeholder {
    color: #d1cfc7 !important; /* Light gray for FT/IN placeholder */
    opacity: 1;
}

/* 7. Mobile View (Stacking) */
@media only screen and (max-width: 767px) {
    #Content .mid-inputs input[type="number"] {
        font-size: 16px !important;
    }

    #Content .mid-inputs {
        flex-direction: column;
        gap: 5px;
        align-items: center;
    }

    .query .ais-SearchBox-input {
        max-width: 65% !important;
        margin: 0 auto!important;
    }
}

/* Imperial / Metric overrides */
.unit-label {
    font-family: 'Blair';
    text-transform: uppercase;
    font-size: 8px;
    letter-spacing: 2px;
}

/* Other overrides */
[class^=ais-], .entry-content .top-inputs .top-input, .title {
    font-family: 'Futura Light BT'!important;
}

.column_attr .sizing-list {
    margin-top: 0!important;
}
#advanced-search-toggle-btn a{
    background: none;
    border: none;
    color: #999;
    font-family: 'Blair';
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 9px;
    /* text-decoration: underline; */
    /* text-underline-offset: 5px; */
    font-weight: bold;
}

#advanced-search-toggle-container {
    display: none;
}

#advanced-search-toggle-container.active {
    display: block!important;
}

.ais-SearchBox-input {
    width: 420px!important;
    max-width: 100%!important;
    font-family: "Futura Light BT"!important;
    font-size: 16px!important;
    letter-spacing: unset !important;
    text-transform: unset!important;
}
.ais-SearchBox-input::placeholder {
    font-family: "Futura Light BT"!important;
    font-size: 16px!important;
    letter-spacing: unset !important;
    text-transform: unset!important;
}

#Content .sections_group .bottom-buttons input, #Content .sections_group .bottom-buttons button {
    font-family: 'Blair', sans-serif;
    font-size: 9px !important;
    color: #666 !important;
    background: none !important;
    border: 1px solid #666 !important;
    padding: 15px 40px !important;
    width: auto;
    border-radius: 8px;
}

.toggle-container {
    padding-top: 0;
    padding-bottom: 0;
}

.toggle-switch .slider:before {
    border: 2px solid #8c8c8c;
}

@media only screen and (min-width: 768px) and (max-width: 1279px) {

    .mcb-item-a934c1c3a > div > div {
        display: flex;
    }

    .top-inputs {
        gap: 10px !important;
    }

    .top-inputs .top-input {
        padding: 10px !important;
    }

    .top-inputs-filters-container .ais-RefinementList-item {
        flex-basis: 49% !important;
    }

    .mid-inputs {
        display: inline-flex;
        align-items: flex-start !important;
        /* flex-direction: column !important;
        flex-wrap: wrap !important; */
        justify-content: flex-start !important;
        margin: 50px auto;
    }

    .mid-inputs .width {
        margin-bottom: 20px !important;
    }

    .mid-inputs label.dim.two {
        padding-top: 0px !important;
        margin-left: 0px !important;
    }

    .sizing-list li, .sizing-cats li {
        width: auto !important;
    }

}

@media only screen and (max-width: 767px) {

    .top-inputs {
        flex-direction: column;
        gap: 0px;
    }

    .top-inputs-filters-container {
        padding: 10px !important;
        max-height: 300px !important;
        overflow: auto !important;
    }

    .price-filter.top-inputs-filters-container {
        padding: 10px 50px !important;
    }

    .top-inputs .top-input, .top-inputs .query, .top-inputs .ais-SearchBox-input {
        width: 100%;
        margin-top: 10px !important;
    }

    .top-inputs-filters-container ul, .top-inputs-filters-container ul li {
        flex-basis: 100% !important;
    }

    .mid-inputs {
        flex-wrap: wrap;
        justify-content: center;
    }

    .mid-inputs > div {
        flex-wrap: wrap;
    }

    .mid-inputs .width {
        margin-bottom: 20px !important;
    }

    .mid-inputs label.dim.two {
        padding-top: 0px !important;
        margin-left: 0px !important;
    }

    .sizing-list, .sizing-cats {
        flex-direction: column;
        margin: 0 50px !important;
    }

    .sizing-list li, .sizing-cats li {
        flex-basis: 100%;
        width: 100%;
        margin: 0 !important;
        margin-top: 25px !important;
    }

    .bottom-buttons {
        flex-direction: column;
        padding: 50px 0;
    }

    .bottom-buttons .ais-ClearRefinements, .bottom-buttons button, .bottom-buttons input {
        width: 100%;
    }

    .bottom-buttons .submit {
        order: -1;
    }

    .mcb-item-fd1e6c314 .mcb-column-inner {
        margin: 0 !important;
    }

    .adv-pager {
        padding: 0 0.5rem;
    }

    .adv-pager .ais-Pagination {
        width: 100% !important;
    }

    .adv-pager .ais-Pagination .ais-Pagination-item {
        margin: 0 !important;
    }

    .adv-pager .ais-Pagination-list {
        flex-wrap: wrap;
        margin: 0 !important;
    }
}

/* ── Active Filter Pills ── */
.active-filters-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: start;
    gap: 6px;
    padding: 16px 0 20px;
    margin-bottom: 4px;
}
.active-filters-pills:empty,
.active-filters-pills[style*="display: none"] {
    padding: 0;
    margin: 0;
}

.filter-pill {
    display: inline-flex;
    align-items: center;
    position: relative;
    font-size: 9px!important;
    background: #e0ddd5;
    border: none;
    border-radius: 6px !important;
    padding: 6px 20px !important;
    font-family: Blair, sans-serif;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #5e5e5e;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
    line-height: 1.4;
    overflow: visible;
    letter-spacing: 2px;
    font-weight: bold;
}

.filter-pill:hover {
    background: #5a574e;
}

.filter-pill:hover  .pill-x {
    color: #aaa;
}

.filter-pill .pill-x {
    position: absolute;
    top: 2px;
    right: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    color: #949494;
    border-radius: 50%;
    font-size: 10px;
    line-height: 1;
    /* opacity: 0; */
    transition: opacity 0.25s ease;
}

/* ── Responsive ── */
@media (max-width: 767px) {
    .active-filters-pills {
        gap: 5px;
        padding: 12px 0 16px;
    }
    .filter-pill {
        font-size: 10px;
        letter-spacing: 1.2px;
        padding: 8px 14px;
    }
}

/* SHOW INSTOCK ONLY */
#in-stock-toggle .mcb-wrap-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 0;
    padding-top: 0;
    padding-bottom: 30px;
}

#in-stock-toggle .toggle-container {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 3px;
}

#in-stock-toggle .toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 22px;
}

#in-stock-toggle .toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

#in-stock-toggle .slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc;
    border-radius: 22px;
    transition: .3s;
}

#in-stock-toggle .slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    border-radius: 50%;
    transition: .3s;
}

#in-stock-toggle input:checked + .slider {
    background-color: #1a1a1a;
}

#in-stock-toggle input:checked + .slider:before {
    transform: translateX(22px);
}

#query-section-container { margin-bottom: 10px!important; }