:root {
    --color-light: #f4efe5;
    --color-dark: #252933;
    --color-primary: #887b6c;
    --color-secondary: #8f8851;
    --color-light-rgb: 244, 239, 229;
    --color-dark-rgb: 37, 41, 51;
    --color-primary-rgb: 136, 123, 108;
    --color-secondary-rgb: 143, 136, 81;
    --color-whitefluor: #ECE9E3;
    --color-beauty: #E0D0C0;
    --color-tigereye: #976B4A;
    --color-warmstone: #90735C;
    --color-wool: #999080;
    --color-inkwell: #1C1C1C;
    --color-whitefluor-rgb: 236, 233, 227;
    --color-beauty-rgb: 224, 208, 192;
    --color-tigereye-rgb: 151, 107, 74;
    --color-warmstone-rgb: 144, 115, 92;
    --color-wool-rgb: 153, 144, 128;
    --color-inkwell-rgb: 28, 28, 28;
    --bgcolor-main: var(--color-dark);
    --fgcolor-text-light: var(--color-light);
    --fgcolor-text-dark: var(--color-dark);
    --bgcolor-main-rgb: rgba(var(--color-dark-rgb), 1);
    --fgcolor-text-rgb: rgba(var(--color-light-rgb), 1);
    --fgcolor-text-dark: rgba(var(--color-dark-rgb), 1);

    --bgcolor-product: #f4efe5;
    --fgcolor-product: var(--color-secondary);
}

.pulseit {
    animation: shake 2s;
}

@keyframes shake {
    0% {
        transform: translate(1px, 1px) rotate(0deg);
    }

    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }

    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }

    30% {
        transform: translate(3px, 2px) rotate(0deg);
    }

    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }

    50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }

    60% {
        transform: translate(-3px, 1px) rotate(0deg);
    }

    70% {
        transform: translate(3px, 1px) rotate(-1deg);
    }

    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }

    90% {
        transform: translate(1px, 2px) rotate(0deg);
    }

    100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
}

body{
    background-color: var(--bgcolor-main);
    color: var(--fgcolor-text-light);
}

.filter-option-inner {
    text-align: center !important;
}

.rounded{
    border-radius: 1rem;
}

.shadow {
    box-shadow: 0 2px 1rem rgba(var(--color-light-rgb), 0.175) !important;
}

.shadow-sm {
    box-shadow: 0 0 0.25rem rgba(var(--color-light-rgb), 0.15) !important;
}

.shadow-lg {
    box-shadow: 0 1rem 1rem rgba(var(--color-light-rgb), 0.35) !important;
}


.col-product {
    padding: .25rem;
}

.block-toggler, .block-toggler:focus, .block-toggler:hover {
    color: #eee;
}

.block-toggler[aria-expanded="true"], .block-toggler:focus {
    text-decoration: none;
    color: #eee;
}

.col-product .product-title{
    min-height: 50px;
}

.col-product > .product,
.swiper-slide > .product {
    background-color: var(--bgcolor-product) !important;
    color: var(--fgcolor-product);
    border-radius: 1rem;
    box-shadow: 10px 10px 20px rgba(var(--color-beauty-rgb), 0.35) !important;
    border: 2px solid var(--fgcolor-product);
}

        .col-product > .product > .product-image,
        .swiper-slide > .product > .product-image {
            background-color: #fff !important;
            border-top-left-radius: 1rem;
            border-top-right-radius: 1rem;
            padding: 0rem;
            padding-top: 1rem !important;
        }

        .col-product > .product > *,
        .swiper-slide > .product > * {
            padding: .5rem;
        }

        .col-product > .product .product-swap-image > img,
        .swiper-slide > .product .product-swap-image > img {
            /*margin-bottom: -6rem;*/
            overflow: hidden;
        }

.swiper-wrapper.swiper-wrapper-products > .swiper-slide:nth-child(even) {
    margin-top: 2.5rem;
}

.modal .swiper-wrapper{
    height: auto !important;
}

.swiper-wrapper.swiper-wrapper-town {
    height: auto;
}

.product > .product-image {
    overflow: hidden;
}

.dark-overlay.rounded::after {
    border-radius: 1rem;
}

.cart-button1 {
    position: relative;
    padding: 10px;
    width: 70%;
    height: 3rem;
    border: 0;
    outline: none;
    cursor: pointer;
    color: #fff;
    background-color: #212529;
    border-color: #212529;
    transition: 0.3s ease-in-out;
    overflow: hidden;
    padding: 0.525rem 0.75rem;
    /*    user-select: none;*/
}

    .cart-button1:hover {
        background-color: #202431;
    }

    .cart-button1:active {
        transform: scale(0.9);
    }

    .cart-button1 .fa-shopping-cart {
        position: absolute;
        z-index: 2;
        top: 50%;
        left: -10%;
        transform: translate(-50%, -50%);
    }

    .cart-button1 span {
        position: absolute;
        z-index: 3;
        left: 50%;
        top: 50%;
        color: #fff;
        transform: translate(-50%, -50%);
    }

        .cart-button1 span.add-to-cart {
            opacity: 1;
        }

        .cart-button1 span.added {
            opacity: 0;
        }

    .cart-button1.clicked .fa-shopping-cart {
        animation: cart 1.5s ease-in-out forwards;
    }

    .cart-button1.clicked span.add-to-cart {
        animation: txt1 1.5s ease-in-out forwards;
    }

    .cart-button1.clicked span.added {
        animation: txt2 1.5s ease-in-out forwards;
    }

input.value-start, input.value-left {
    text-align: left;
}

input.value-center {
    text-align: center;
}

input.value-end, input.value-right {
    text-align: right;
}

input.input-transparent, select.input-transparent{
    background-color: transparent !important;
}

.pagination .page-link {
    background-color: transparent !important;
}

.pagination .page-item .page-link {
    color: #eee;
}

.pagination .page-item.active .page-link {
    color: var(--bs-primary);
}


@keyframes cart {
    0% {
        left: -10%;
    }

    40%, 60% {
        left: 50%;
    }

    100% {
        left: 110%;
    }
}

@keyframes txt1 {
    0% {
        opacity: 1;
    }

    20%, 100% {
        opacity: 0;
    }
}

@keyframes txt2 {
    0%, 80% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.pqt-plus,
.pqt-minus {
    background: #eee;
    border: none;
    font-size: 20px;
    padding: 0 20px;
    width: 50px;
    border-radius: 10px;
    height: 3rem;
/*    user-select: none;*/
    line-height: 50px;
}

    .pqt-plus:hover,
    .pqt-minus:hover {
        background: #202431;
        color: #fff;
        cursor: pointer;
    }

.link-primary {
    cursor: pointer;
    color: var(--color-primary);
    text-decoration: none;
    transition: all .3s ease;
}

.link-primary:hover {
    color: var(--color-secondary);
    text-decoration: none;
}

.viewbag {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 2001;
    transform: translate(-50%, -50%);
}

#_checkbox {
    display: none;
}

#_checkbox2 {
    display: none;
}

.labeltobilling {
    position: relative;
    display: block;
    width: 50px;
    height: 50px;
    background-color: #fff;
    transform: translateY(-50%);
    border-radius: 50%;
    box-shadow: 0 7px 10px #f5f5f5;
    cursor: pointer;
    transition: 0.2s ease transform, 0.2s ease background-color, 0.2s ease box-shadow;
    overflow: hidden;
    z-index: 1;
}

    .labeltobilling:before {
        content: "";
        position: relative;
        top: 50%;
        right: 0;
        left: 0;
        width: 35px;
        height: 35px;
        margin: 0 auto;
        background-color: #fff;
   
        transform: translateY(-50%);
        border-radius: 50%;
        box-shadow: inset 0 7px 10px #f5f5f5;
        transition: 0.2s ease width, 0.2s ease height;
    }

    .labeltobilling:hover:before {
        width: 27px;
        height: 27px;
        box-shadow: inset 0 7px 10px #f5f5f5;
    }

    .labeltobilling:active {
        transform: translateY(-50%) scale(0.9);
    }

#tick_mark {
    position: absolute;
    /*        top: 7px;*/
    top: 0px;
    /*        right: 0;*/
    left: 10px;
    width: 25px;
    height: 20px;
    margin: 9 auto;
    transform: rotateZ(-40deg);
}

    #tick_mark:before, #tick_mark:after {
        content: "";
        position: absolute;
        background-color: #fff;
        border-radius: 2px;
        opacity: 0;
        transition: 0.2s ease transform, 0.2s ease opacity;
    }

    #tick_mark:before {
        left: 0;
        bottom: 0;
        width: 5px;
        height: 15px;
        box-shadow: -2px 0 5px rgba(0,0,0,0.23);
        transform: translateY(-68px)
    }

    #tick_mark:after {
        left: 0;
        bottom: 0;
        width: 100%;
        height: 5px;
        box-shadow: 0 3px 5px rgba(0,0,0,0.23);
        transform: translateX(78px)
    }

#_checkbox:checked + .labeltobilling {
    background-color: #07d410;
    box-shadow: 0 7px 10px #92ff97;
}

    #_checkbox:checked + .labeltobilling:before {
        width: 0;
        height: 0;
    }

    #_checkbox:checked + .labeltobilling #tick_mark:before, #_checkbox:checked + .labeltobilling #tick_mark:after {
        transform: translate(0);
        opacity: 1;
    }

.labeltobilling2 {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 50px;
    /*background-color: #cccccc;*/
    /*      transform: translateY(-50%);*/
    border-radius: 50%;
    box-shadow: 0 7px 10px #f5f5f5;
    cursor: pointer;
    border: 1px solid #fff;
    transition: 0.2s ease transform, 0.2s ease background-color, 0.2s ease box-shadow;
    overflow: hidden;
    z-index: 1;
}

    .labeltobilling2:before {
        content: "";
        position: relative;
        top: 50%;
        right: 0;
        left: 0;
        width: 35px;
        height: 35px;
        margin: 0 auto;
        background-color: #fff;
        transform: translateY(-50%);
        border-radius: 50%;
        box-shadow: inset 0 7px 10px #f5f5f5;
        transition: 0.2s ease width, 0.2s ease height;
    }

    .labeltobilling2:hover:before {
        width: 27px;
        height: 27px;
        box-shadow: inset 0 7px 10px #f5f5f5;
    }

    .labeltobilling2:active {
        /*transform: translateY(-50%) scale(0.9);*/
    }

#tick_mark2 {
    position: absolute;
    /*        top: 7px;*/
    top: 0px;
    /*        right: 0;*/
    left: 10px;
    width: 25px;
    height: 20px;
    margin: 9px auto;
    transform: rotateZ(-40deg);
}

    #tick_mark2:before, #tick_mark2:after {
        content: "";
        position: absolute;
        background-color: #fff;
        border-radius: 2px;
        opacity: 0;
        transition: 0.2s ease transform, 0.2s ease opacity;
    }

    #tick_mark2:before {
        left: 0;
        bottom: 0;
        width: 5px;
        height: 15px;
        box-shadow: -2px 0 5px rgba(0,0,0,0.23);
        transform: translateY(-68px)
    }

    #tick_mark2:after {
        left: 0;
        bottom: 0;
        width: 100%;
        height: 5px;
        box-shadow: 0 3px 5px rgba(0,0,0,0.23);
        transform: translateX(78px)
    }

#_checkbox2:checked + .labeltobilling2 {
    background-color: #07d410;
    box-shadow: 0 7px 10px #92ff97;
}

    #_checkbox2:checked + .labeltobilling2:before {
        width: 0;
        height: 0;
    }

    #_checkbox2:checked + .labeltobilling2 #tick_mark2:before, #_checkbox2:checked + .labeltobilling2 #tick_mark2:after {
        transform: translate(0);
        opacity: 1;
    }

@media screen and (max-width: 576px){
    .col-product > .product .product-swap-image > img,
    .swiper-slide > .product .product-swap-image > img {
        margin-bottom: -3.25rem;
        overflow: hidden;
    }

    .img-fluid-mobile {
        max-width: 100%;
        height: auto;
    }
}