:root {
    --secondary: #000;
    --light: #FFFAF3;
    --primary: ;
}

#time-range {
    width: 600px;
    margin: 0 auto;
    color: #CCCCCC;
    font-weight: 300;
}

.slider-time,
.slider-time2 {
    font-weight: 400;
}

.flat-slider.ui-corner-all,
.flat-slider .ui-corner-all {
    border-radius: 0;
}

.flat-slider.ui-slider {
    border: 0;
    background: #f7d2cc;
    border-radius: 6px;
}

.flat-slider.ui-slider-horizontal {
    height: 6px;
}

.flat-slider.ui-slider-vertical {
    height: 15em;
    width: 6px;
}

.flat-slider .ui-slider-handle {
    width: 22px;
    height: 22px;
    background: #fff200;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}

.flat-slider.ui-slider-horizontal .ui-slider-handle {
    top: 50%;
    margin-top: -11px;
}

.flat-slider.ui-slider-vertical .ui-slider-handle {
    left: 50%;
    margin-left: -11px;
}

.flat-slider .ui-slider-handle:hover {
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.35);
}

.flat-slider .ui-slider-range {
    border: 0;
    border-radius: 6;
    background: #f99;
}

.flat-slider.ui-slider-horizontal .ui-slider-range {
    top: 0;
    height: 6px;
}

.flat-slider.ui-slider-vertical .ui-slider-range {
    left: 0;
    width: 6px;
}

.box {
    display: inline-block;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border: 1px solid black;
    border-radius: 3px;
    color: #FFFFFF;
    margin: 24px 1px 4px 1px;
}

input[type=range]::-webkit-slider-thumb {
    pointer-events: all;
    width: 24px;
    height: 24px;
    -webkit-appearance: none;
    /* @apply w-6 h-6 appearance-none pointer-events-auto; */
}


.noUi-horizontal {
    height: 6px;
}

.noUi-horizontal .noUi-handle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--secondary);
    background-color: var(--light);
    box-shadow: none;
    top: -8px;
    right: 0;
    cursor: pointer;
}

.noUi-horizontal .noUi-handle:before,
.noUi-horizontal .noUi-handle:after {
    content: none;
}

.noUi-horizontal .noUi-handle .noUi-tooltip {
    display: none;
    border: 0px;
    background: var(--primary);
    color: white;
    border-radius: 4px;
    font-size: 13px;
    bottom: -35px;
    font-weight: 600;
    padding: 2px 5px;
}

.noUi-horizontal .noUi-handle .noUi-tooltip:after {
    content: "";
    position: absolute;
    background-color: inherit;
    width: 10px;
    height: 10px;
    top: 4px;
    margin-left: -4px;
    left: 50%;
    transform: rotate(45deg) translate(-50%, -50%);
}

.noUi-target {
    background: #D7D7D7;
    border-radius: 0;
    border: 0;
    box-shadow: none;
}

.noUi-target .noUi-connect {
    background: var(--secondary);
}

/* MOUSE HOVER */

figure.zoom {
    background-position: 50% 50%;
    position: relative;
    overflow: hidden;
    cursor: zoom-in;
}

figure.zoom img:hover {
    opacity: 0;
}

figure.zoom img {
    transition: opacity .5s;
    display: block;
    width: 100%;
}

/* light modal image gallery */

.lg-custom-thumbnails.lg-outer {
    width: auto;
    right: 225px;
    left: 10px;
}

.lg-custom-thumbnails.lg-outer .lg-thumb-outer {
    left: auto;
    top: 0;
    width: 225px;
    bottom: 0;
    position: fixed;
    right: 0;
    max-height: none;
    background-color: #999;
    padding-left: 5px;
    padding-right: 5px;
    margin: 0 -10px;
    overflow-y: auto;
    transform: translate3d(30%, 0, 0);
    opacity: 0;
    will-change: transform opacity;
    transition: transform 0.15s cubic-bezier(0, 0, 0.25, 1) 0s, cubic-bezier(0, 0, 0.25, 1) 0.15s;
}

.lg-custom-thumbnails.lg-outer.lg-thumb-open .lg-thumb-outer {
    transform: translate3d(0, 0, 0);
    opacity: 1;
}

.lg-custom-thumbnails.lg-outer .lg-thumb-item {
    filter: grayscale(100%);
    will-change: filter;
    transition: filter 0.12s ease-in, border-color 0.12s ease;
}

.lg-custom-thumbnails.lg-outer .lg-thumb-item:hover,
.lg-custom-thumbnails.lg-outer .lg-thumb-item.active {
    filter: grayscale(0);
    border-color: #545454;
}

.lg-custom-thumbnails.lg-outer .lg-thumb {
    padding: 5px 0;
}

/* @media  (min-width: 1130px) {
    .logo-placeholder {
        width: 0px !important;
    }

    .logo-placeholder .div {
        left: 0;
    }
}

@media  (min-width: 1200px) {
    .logo-placeholder {
        width: 6rem;
    }
}

@media  (min-width: 1300px) {
    .logo-placeholder div  {
        left: 3rem;
    }
} */

/* style sliwer controls */
.custom-swiper-next,
.custom-swiper-prev {
    padding: 30px 25px;
    font-size: 15px;
    border-radius: 5px;
}

.custom-swiper-next.swiper-button-disabled,
.custom-swiper-prev.swiper-button-disabled {
    color: #6a6a6a;
    background-color: rgb(215, 215, 215);
}

.custom-swiper-prev:not(.swiper-button-disabled),
.custom-swiper-next:not(.swiper-button-disabled) {
    color: #000;
    background-color: #fff;
}

/* product view slider */
.product-preview-slider {
    height: 300px;
}

.product-preview-slider .dz-product-detail .dz-media {
    height: auto;
}

.dz-media {
    position: relative;
    overflow: hidden;
}

.dz-media img {
    max-width: 100%;
    height: auto;
    width: 100%;
}

.single-product-slider {
    max-width: 100%;
}

/* add x-cloak */
[x-cloak] {
    display: none;
}

/* edit max-width */
.max-w-7xl {
    max-width: 90rem;
}


.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    animation: slide-down 0.3s ease-in-out;
}

@keyframes slide-down {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}


.fave {
    background: none !important;
    border: 0;
    padding: 0;
    width: 70px;
    height: 45px;
    background: url(https://res.cloudinary.com/shanomurphy/image/upload/v1547543273/fave_ltre0q.png) no-repeat;
    background-position: 0 0;
    transition: background 1s steps(55);
    outline: 0;
    cursor: pointer;
}

.fave.faved {
    background-position: -3519px 0 !important;
}


/* Container with controlled height */
.content-container {
    overflow: hidden;
    /* Ensures content doesn't overflow */
    height: 100px;
    /* Adjust height as needed */
    position: relative;
    background-color: #333;
    /* Optional: Background color */
}

/* Initial state */
.content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    transition: transform 0.5s ease-out;
    /* Smooth transition */
}

/* Slide up effect */
.slide-up {
    transform: translateY(-100%);
}