/* Custom styles — add overrides and one-off rules here */
#navbarLogo {
    max-height: 2rem;
}

.product-swiper {
    touch-action: pan-y;
}

.object-fit-cover {
    object-fit: cover;
}

.img-position-bottom {
    object-fit: cover;
    object-position: 50% 100%;
    width: 100%;
    max-width: 100%;
    height: 100%;
    position: relative;
    display: inline-block;
}

.range-modal-image {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    object-position: 50% 100%;
    display: block;
}

@media (min-width: 1024px) {
    .range-modal-image {
        width: auto;
        height: auto;
        max-width: 90vw;
        max-height: 85vh;
        object-fit: contain;
    }
}

.swiper-scrollbar {
    background-color: #f3f4f6 !important;
    height: 3px !important;
    position: relative !important;
    margin-top: 1rem;
    left: 0 !important;
    width: 100% !important;
}

.swiper-scrollbar-drag {
    background-color: #f33 !important;
}

html {
    overflow-x: hidden;
}

body {
    font-family: "LL Circular Pro", "ui-sans-serif", "system-ui", "-apple-system", sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}

[x-cloak] {
    display: none;
}

.product-nav-link .slide-loader {
    display: none;
}

.product-nav-link.is-loading .slide-loader {
    display: flex;
}

.header-low {
    background-color: #feeebc;
}

.header-medium {
    background-color: #fcd1b0;
}

.header-low-medium {
    background: linear-gradient(to right, #feeebc, #fcd1b0);
}

.header-high {
    background-color: #f8aa9e;
}

.header-medium-high {
    background: linear-gradient(to right, #fcd1b0, #f8aa9e);
}