/** Shopify CDN: Minification failed

Line 363:54 Comments in CSS use "/* ... */" instead of "//"
Line 483:4 Unexpected "<"

**/
.collection-filters {
    grid-template-columns: repeat(2, auto);
    grid-template-rows: repeat(2, auto);
}

.facets {
    display: block;
    grid-column-start: span 2;
}

.facets__form {
    grid-template-columns: auto max-content;
    gap: 0 8rem;
}

.facets__heading {
    display: block;
    margin: -1.5rem 1.5rem 0 0;
}

summary {
    cursor: pointer;
    list-style: none;
    position: relative;
}

summary .icon-caret {
    height: .6rem;
    padding-left: 4px;
}

.facets__summary {
    background-color: var(--facet-btn-bg-color) !important;
    color: var(--secondary-btn-color) !important;
    border-radius: 6px !important;
    box-shadow: 0 0 0 2px var(--secondary-btn-bg-hover);
}

.facets__summary:hover {
    background-color: var(--secondary-btn-bg-color) !important;
}

.selected .facets__summary {
    color: #fff !important;
    background-color: var(--facet-btn-color-bg-active) !important;
    box-shadow: 0 0 0 2px var(--facet-btn-color-bg-active) !important;
}

.facets__header {
    background-color: var(--bg-color);
}

.facet-checkbox .icon-checkmark {
    left: 0.69rem !important;
    top: 0.52rem !important;
}

.mobile-facets__label .icon-checkmark {
    left: 2.7rem !important;
    top: 1.2rem !important;
}

.facets__summary>div,
.mobile-facets__summary>div {
    display: flex;
    align-items: center;
}

.facet-checkbox>input[type=checkbox]:checked~.icon-checkmark {
    visibility: visible !important;
}

.field__input::placeholder {
    opacity: 0;
}

.field__input:focus~.field__label,
.field__input:not(:placeholder-shown)~.field__label {
    display: none;
}

details>summary::-webkit-details-marker {
    display: none;
}

.customer select+svg,
.select .icon-caret {
    height: .6rem;
    pointer-events: none;
    position: absolute;
    top: calc(50% - .3rem);
    right: 0.7rem;
}

.active-facets facet-remove:only-child {
    display: none !important;
}

.active-facets__button-wrapper {
    background-color: var(--facet-btn-bg-color) !important
}

.active-facets__button--light .active-facets__button-inner {
    background-color: var(--btn-bg-color) !important;
}

details[open] .mobile-facets__open {
    visibility: hidden;
}

.mobile-facets__open svg {
    width: 2rem;
}

.active-facets-mobile:empty {
    display: none;
}

.disclosure-has-popup[open]>summary+* {
    z-index: 50;
}

.menu-opening .mobile-facets__inner {
    transform: translateX(0);
}

.disclosure-has-popup:not(.menu-opening) .mobile-facets__inner {
    transform: translateX(105vw);
}

details.menu-opening .mobile-facets__close {
    display: flex !important;
    opacity: 1 !important;
    z-index: 51 !important;
}

.mobile-facets {
    background-color: rgba(26, 27, 24, .6);
}

.mobile-facets__main {
    min-height: calc(100% - 15rem);
}

.mobile-facets__inner {
    width: calc(100% - 3rem);
    transition: transform 100ms ease;
    max-width: 37.5rem;
}

.js .mobile-facets__submenu {
    transform: translateX(100%);
    visibility: hidden;
}

.js details[open].menu-opening>.mobile-facets__submenu {
    transform: translateX(0);
    visibility: visible;
}

.js details[open]>.mobile-facets__submenu {
    transition: transform .4s cubic-bezier(.29, .63, .44, 1), visibility .4s cubic-bezier(.29, .63, .44, 1);
}

.mobile-facets__close-button {
    width: calc(100% - 3.2rem);
    background-color: transparent;
}

.mobile-facets__close-button .icon-arrow {
    transform: rotate(180deg);
    margin-right: 1rem;
}

.mobile-facets__label>input[type=checkbox]:checked~.icon-checkmark {
    visibility: visible !important;
}

/* Range Input */
[range-slider] {
    position: relative;
    height: 0.438rem;
    border-radius: 10px;
    text-align: left;
    margin: 10px 10px;
}

[range-slider]>div {
    position: absolute;
    left: 11px;
    right: 9px;
    height: 0.25rem;
}

[range-slider]>div>[inverse-left] {
    position: absolute;
    left: 0;
    height: 0.25rem;
    border-radius: 10px;
    margin: 0 7px;
    background-color: var(--facet-btn-bg-color);
    border: 1px solid var(--secondary-btn-bg-hover);
}

[range-slider]>div>[inverse-right] {
    position: absolute;
    right: 0;
    height: 0.25rem;
    border-radius: 10px;
    margin: 0 7px;
    background-color: var(--facet-btn-bg-color);
    border: 1px solid var(--secondary-btn-bg-hover);
}

[range-slider]>div>[range] {
    position: absolute;
    top: -0.04rem;
    left: 0;
    height: 0.375rem;
    border-radius: 14px;
    background-color: var(--facet-btn-color-bg-active) !important;
}

[range-slider]>div>[thumb] {
    position: absolute;
    top: -0.5rem;
    z-index: 2;
    height: 1.25rem;
    width: 1.25rem;
    text-align: left;
    margin-left: -11px;
    cursor: pointer;
    background-color: var(--secondary-btn-color);
    border-radius: 50%;
    outline: none;
    cursor: pointer;
}

div[range-slider]>input[type=range]::-ms-thumb {
    pointer-events: all;
    width: 28px;
    height: 28px;
    border-radius: 0px;
    border: 0 none;
    background: red;
    cursor: pointer;
}

div[range-slider]>input[type=range]::-moz-range-thumb {
    pointer-events: all;
    width: 28px;
    height: 28px;
    border-radius: 0px;
    border: 0 none;
    background: red;
    cursor: pointer;
}

div[range-slider]>input[type=range]::-webkit-slider-thumb {
    pointer-events: all;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0px;
    border: 0 none;
    background: red;
    -webkit-appearance: none;
    cursor: pointer;
}

div[range-slider]>input[type=range]::-ms-fill-lower {
    background: transparent;
    border: 0 none;
}

div[range-slider]>input[type=range]::-ms-fill-upper {
    background: transparent;
    border: 0 none;
}

[range-slider]>input[type=range] {
    position: absolute;
    pointer-events: none;
    -webkit-appearance: none;
    z-index: 3;
    height: 0.25rem;
    width: 100%;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
}

div[range-slider]>input[type=range]::-ms-track {
    -webkit-appearance: none;
    background: transparent;
    color: transparent;
}

div[range-slider]>input[type=range]::-moz-range-track {
    -moz-appearance: none;
    background: transparent;
    color: transparent;
}

div[range-slider]>input[type=range]:focus::-webkit-slider-runnable-track {
    background: transparent;
    border: transparent;
}

div[range-slider]>input[type=range]:focus {
    outline: none;
}
@media (min-width: 768px) {
    /* Centering container adjustments */
    .collection-filters {
        display: flex;
        justify-content: center; /* Centers the filter button */
        align-items: center;
    }

    /* Styling for the filter button */
    .facets__summary {
        background-color: #f2f2f2 !important; /* Background color of the button */
        border: 2px solid #cccccc !important; /* Border color */
        border-radius: 9999px !important; /* Makes the button fully rounded */
        padding: 10px 30px !important; /* Adjusts the padding to ensure oval shape */
        display: inline-flex !important; /* Use inline-flex to align text and icon */
        align-items: center; /* Aligns items vertically */
        justify-content: center; /* Centers the content inside the button */
        position: relative; /* Needed for absolute positioning of "Filter By" */
        cursor: pointer; /* Makes it clear the button is clickable */
    }

    /* Adjust "Filter By" text position */
    .facets__summary:before {
        content: "Filter By"; /* Text to display */
        position: absolute;
        left: -70px; /* Adjust as needed to move "Filter By" to the left of the oval */
        top: 50%;
        transform: translateY(-50%);
        font-size: 16px; /* Adjust font size as needed */
        white-space: nowrap; /* Prevents the label from wrapping */
    }

    /* Ensure container does not interfere */
    .container-fluid {
        padding: 0 !important;
        margin: 0 auto !important;
        width: 100% !important;
    }

    /* This JavaScript snippet is to ensure the default selection text is set correctly */
    document.addEventListener('DOMContentLoaded', function () {
        var filterLabel = document.querySelector('.facets__summary > div > span');
        if (filterLabel) {
            filterLabel.textContent = 'All Products'; // Sets default filter label
        }
    });

    /* Ensure "Sort By" label is capitalized and properly sized */
    .collection-filters__label {
        text-transform: uppercase !important;
        font-size: 14px !important; /* Adjust this value as needed */
        font-family: 'Arial', sans-serif !important;
    }

    /* Styling for "Filter By" text assuming it's inserted dynamically or needs adjustment */
    .facets__summary:before {
        content: 'FILTER BY';
        font-size: 14px; /* Match "Sort By" label size */
        font-family: 'Arial', sans-serif;
        text-transform: uppercase;
        position: absolute;
        left: -85px; /* Adjust as necessary */
        top: 50%;
        transform: translateY(-50%);
        white-space: nowrap;
    }

    /* Additional CSS to ensure text does not encroach into the oval */
    .facets__summary {
        padding-left: 100px !important; /* Increase padding to prevent text overlap, adjust as needed */
    }

    /* Specifically target the "Sort By" label for capitalization and styling */
    .collection-filters__field .collection-filters__label {
        text-transform: uppercase !important; /* Force uppercase */
        font-size: 14px !important; /* Ensure matching font size with "Filter By" */
        font-family: 'Arial', sans-serif !important; /* Ensure font family consistency */
    }

    /* Styling for the "Filter By" oval to match "Sort By" */
    .facets__summary {
        background-color: #ffffff !important; /* Ensure background is white */
        padding: 10px 45px !important; /* Adjust padding to match "Sort By" and ensure size consistency */
        border-radius: 9999px !important; /* Fully rounded edges for the oval shape */
        font-family: 'Arial', sans-serif !important; /* Ensure font consistency */
        text-transform: uppercase !important; /* Capitalize text */
        border: 0px solid #cccccc !important; /* Matching border styling */
    }

    /* Apply similar styling to the "Sort By" dropdown for consistency */
    .collection-filters__sort {
        background-color: #ffffff !important; /* Ensure background is white */
        padding: 10px 30px !important; /* This should match the "Filter By" padding */
        border-radius: 9999px !important; /* Fully rounded edges for the oval shape */
        border: 2px solid #cccccc !important; /* Matching border styling */
        appearance: none; /* Remove default browser styling */
        -webkit-appearance: none; /* For Safari */
        /* Additional styling to match "Filter By", if necessary */
    }

    /* To target the container if it affects the appearance */
    .select.tw-relative.tw-inline-block.tw-w-auto.tw-border.tw-rounded.tw-border-gray-300 {
        padding: 0 !important; /* Ensure no additional padding is interfering */
        background-color: transparent !important; /* Remove any background styling that might conflict */
        border: none !important; /* Remove border if it interferes with the intended design */
    }

    /* Adjust position of "Filter By" text inside the circle */
    .facets__summary > div > span {
        position: relative;
        left: -43px; /* Adjust as needed to move "Filter By" to the left */
    }

    /* Position the arrow to the right */
    .facets__summary svg {
        position: absolute;
        right: 11px; /* Adjust the right positioning as needed */
    }

    /* Adjust padding to maintain circle size */
    .facets__summary {
        padding: 10px 55px !important; /* Adjust padding as needed */
    }

    .facets__summary svg.icon-caret {
        width: 16px; /* Adjust the width of the arrow */
        height: 16px; /* Adjust the height of the arrow */
        fill: #000; /* Change the color of the arrow */
    }

    /* Adjust position of text inside the "Sort By" circle */
    .collection-filters__sort {
        padding-left: 10px !important; /* Adjust as needed */
        padding-right: 50px !important; /* Adjust as needed */
    }

    /* Position the arrow to the right */
    .collection-filters__sort svg {
        position: absolute;
        right: 10px; /* Adjust as needed */
    }

    /* Adjust "Filter By" text position */
    .facets__summary:before {
        content: "Filter By"; /* Text to display */
        position: absolute;
        left: -80px; /* Adjust as needed to move "Filter By" closer to the circle */
        top: 50%;
        transform: translateY(-50%);
        font-size: 14px; /* Adjust font size as needed */
        white-space: nowrap; /* Prevents the label from wrapping */
    }

    /* Adjust the size of the circle and keep text aligned to the left */
    .facets__summary {
        padding: 10px 70px 10px 56px !important; /* Adjust padding as needed */
    }

    /* Adjust the size of the "Sort By" circle and keep text aligned to the left */
    .collection-filters__sort {
        padding: 10px 90px 10px 10px !important; /* Adjust padding as needed */
    }

    <input type="checkbox" class="tw-absolute tw-appearance-none tw-w-4 tw-h-4 tw-top-3 tw-left-3 tw-cursor-pointer" name="filter.p.tag" value="All Products" id="Filter-Filter By-1" checked>

    .facets__summary > div > span {
        text-transform: none !important; /* Prevent text from being transformed to all caps */
    }

    /* Ensure "Filter By" text font color is black */
    .facets__summary:before {
        color: black !important; /* Set font color to black */
    }

    /* Adjust the position of Filter By slightly to the right */
    .facets__wrapper {
        margin-right: -560px; /* Nudge to the right; adjust value as needed */
    }

    /* Adjust the position of Sort By slightly to the left */
    .collection-filters__item.sorting {
        margin-left: 220px; /* Nudge to the left; adjust value as needed */
    }

    /* Optional: Adjustments for responsiveness */
    @media (max-width: 768px) {
        .facets__wrapper, .collection-filters__item.sorting {
            margin-right: 0;
            margin-left: 0;
        }
    }

    /* Center the container and shift it to the right */
    .facets__form {
        display: flex;
        justify-content: center;
        margin-left: 90px; /* Adjust as needed */
    }

    /* Adjust individual items */
    .facets__wrapper {
        margin: 0; /* Remove previous margin adjustments */
    }

    .collection-filters__item.sorting {
        margin-left: -110px; /* Adjust as needed to shift "Sort By" to the left */
    }

    /* Ensure no constraints preventing elements from getting closer */
    .some-parent-class {
        max-width: none;
        padding: 0;
    }

    /* If necessary, override any existing padding */
    .collection-filters {
        padding: 0 !important;
    }

    /* If necessary, adjust padding or margins for closer alignment */
    .facets__summary {
        padding-right: 50px !important; /* Adjust as needed */
    }

    .collection-filters__sort {
        padding-right: 84px !important; /* Adjust padding from the right side */
    }

    .active-facets {
        display: none !important;
    }

    .facets__list label span:last-child {
        display: none !important; /* Hide the last child span element (which contains the product count) */
    }
}
.product-card-image {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 00 5%; /* Add more padding to both sides of the container */
    width: 98%; /* Adjust the width of the container */
    margin: 0 auto; /* Center the container horizontally */
    aspect-ratio: 1 / 1; /* Maintain a 1:1 aspect ratio */
    margin-bottom: 20px; /* Add some space between each image */
    border: 2px solid #ccc; /* Add a border with a color */
    box-sizing: border-box; /* Include border in width/height calculations */
    padding-top: 98%; /* Set the height based on a percentage of the width */
}

.product-card-image img {
    max-width: 100%; /* Ensure images fill the container */
    max-height: 100%; /* Ensure images fill the container */
}
.product-card-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centers the product cards horizontally */
    gap: 20px; /* Adjust the gap between product cards */
}

.product-card {
    flex: 0 0 calc(33.33% - 20px); /* Adjust the width of each product card */
    margin-bottom: 20px; /* Adjust the vertical spacing between rows */
}
@media (min-width: 992px) { /* Adjusting for large screens */
  .search__grid .row > .col {
    flex: 0 0 20%; /* Forces 5 columns instead of 4 */
    max-width: 20%; /* Forces 5 columns instead of 4 */
  }
}