@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');
            @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Cormorant+SC:wght@300;400;500;600;700&family=Lugrasimo&display=swap');
            @import url('https://fonts.googleapis.com/css2?family=Cactus+Classical+Serif&display=swap');
            @import url('https://fonts.googleapis.com/css2?family=Poiret+One&display=swap');
            *{
                
                
            }
            body{
                margin: 0;
                font-family: "Mulish", sans-serif;
                font-optical-sizing: auto;
                font-weight: 200;
                font-style: normal;
                color:#000;
            }
            /*.page-container-postop .nav-background img{
                width:100%;
                position:fixed;
                top:0;
                left:0;
                right:0;
                transition: 0.5s ease;
                transition-property: opacity;
                opacity:0;


            }
            .page-container-posbot .nav-background img{
                width:100%;
                position:fixed;
                top:0;
                left:0;
                right:0;
                opacity:0;
                transition: 0.5s ease;
                transition-property: opacity;
                
            }
            .page-container-posmid .nav-background img{
                width:100%;
                position:fixed;
                top:0;
                left:0;
                right:0;
                transition: 0.5s ease;
                height:12.5vh;
                z-index:999;
                opacity: 0.33;
                transition-property: opacity;
                
            }*/
            .page-container-postop header{
                position:fixed;
                top:0;
                left:0;
                right:0;
                width:100%;
                height: 12.5vh;
                z-index:1000;
                display:flex;
                align-items:center;
                justify-content:space-between;
                transition: 0.5s ease;
                transition-property: height, background;
                background:none;
                font-family: "Cormorant SC", serif;
                font-weight: lighter;
                font-style: normal;
            }
            .page-container-posmid header{
                position:fixed;
                top:0;
                left:0;
                right:0;
                width:100%;
                height: 10vh;
                z-index:1000;
                display:flex;
                align-items:center;
                justify-content:space-between;
                transition: 0.5s ease;
                transition-property: height, background;
                backdrop-filter: blur(5px);
                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
                background: rgba(180, 180, 180, 0.3);
                font-family: "Cormorant SC", serif;
                font-weight: lighter;
                font-style: normal;
                
                
            }
            .page-container-posbot header{
                position:fixed;
                top:0;
                left:0;
                right:0;
                width:100%;
                height: 10vh;
                z-index:1000;
                display:flex;
                align-items:center;
                justify-content:space-between;
                transition: 0.5s ease;
                transition-property: height, background;
                background-color:#fff;
                font-family: "Cormorant SC", serif;
                font-weight: lighter;
                font-style: normal;
                border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            }
           
            header a{
                color:#000;
                text-decoration: none;
            }
            header a:hover{
                color:#000;
                font-weight:600;
            }
            header ul{
                list-style:none;
            }
            .nav-left{
                float:left;
                display:flex;
                font-size:18pt;
                margin-left: 3vw;
                gap: 1vw;
                align-items:center;
                opacity:0;
                transform:translateY(20px);
                animation: fadeFromBot 0.8s ease forwards;
                
            }
            .nav-left img{
                height:4vh;
            }
            .nav-right{
                display:flex;
                font-size:2.8vw;
                margin-right: 3vw;
                gap: 1vw;
                float:right;
                align-items:center;
                transition: transform 0.3s ease;
                opacity:0;
                transform:translateY(20px);
                animation: fadeFromBot 0.8s ease forwards;
            }
            .nav-right ul{
                display:flex;
                
                margin-right: 3vw;
                gap: 2vw;
                align-items:center;
                
            }
            .nav-right li{
                transition: transform 0.3s ease;
            }
            .nav-right button{
                background:none;
                border:none;
                
                cursor:pointer; 
                color:#000;
            }
            .nav-right li:hover{
                transform: translateY(-3px);
                font-weight:600;
                color:#000;
            }
            @keyframes fadeFromBot{
                
                0%{
                    opacity:0;
                    transform:translateY(20px);
                }
                100%{
                    opacity:1;
                    transform:translateY(0);
                }
            }
            @keyframes fadeToBot{
                
                0%{
                    opacity:1;
                    transform:translateY(0);
                }
                100%{
                    opacity:0;
                    transform:translateY(20px);
                }
            }
            .c{
              clear:both;
            }
            .swiper-nach{
                width:100vw;
                height:40vh;
                
            }
            .swiper-nach .swiper-slide img{
                width:100%;
                height:100%;
               
                z-index:2;
                position:absolute;
            }
            .swiper-nach .swiper-slide h1{
                
                /*position:absolute;
                top:30%;
                left:10%;*/
               /* margin-top:30%;
                margin-left: 10%;*/
                z-index:3;
                color:#000;
                font-size:5.5vw;
                font-weight:300;
                transform: translateY(20px);
              /*  line-height:10vh;*/
              line-height: 0.8em;
                opacity:0;
                transition: opacity 1s ease, transform 1s ease;
            }
            
            .h1btn {
                z-index: 3;
                position: absolute;
              /*  top:30%;*/
                left:10%;
                bottom: 25%;
            }
            
            .h1btn.watches {
                left:60%;
            }
            .snach-button{
                
              /*  margin-top:10%;
                margin-left: 10%;
                */
                /*position:absolute;
                top:60%;
                left:10%;*/
                z-index:3;
                color:#000;
                font-weight:200;
                font-size: 1.8vw;
                transform: translateY(20px);
                opacity:0;
                transition: opacity 1.5s ease, transform 1.5s ease, background-color 0.2s, box-shadow 0.2s;
                background-color: #ddd;
                padding: 4% 8%;
                cursor:pointer;
                border-radius: 8vw;
                padding-right:12%;
                border: 1px solid transparent;
                text-decoration:none;
            }
            .snach-button:hover{
                background-color: #eee;
                box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
                
            }
            .snach-button span{
                display:inline-block;
                transition: transform 0.3s ease-in-out;
            }
            .snach-button:hover span {
            transform: translateX(2vw); 
            }
            .swiper-nach .swiper-slide-active h1{
                transform: translateY(0);
                opacity:1;
            }
            .swiper-nach .swiper-slide-active .snach-button{
                transform: translateY(0);
                opacity:1;
            }
            /*.slide-overlay{
                width:100vw;
                height:100vh; //nenujen filter
                opacity:15%;
            }*/
            .showoff-p{
                width:100vw;
                height:60vh;
                margin:0;
                padding:0;
            }
            .so-cat-container{
                width:100%;
                height:2.5vh;
                background-color: #eee;
                justify-content:center; 
                align-items:flex-end;
            }
            .so-cats{
                align-content: center;
                display:flex;
                justify-content: center;
                gap:0vw;
                list-style:none;
                margin:0;
                height:100%;
                padding:0;
            }
            .so-cat{
                height:45%;
                padding:1vw 2vh;
                text-align:center;
                background-color:#eee;
                color:#777;
                font-size:1.8vw;
                font-weight:200;
                transition: all 0.6s ease;
            }
            .so-cat a, .so-cat a:visited{
                color:#777;
                text-decoration: none;
            }
            .so-cat-active{
                background-color:#fff;
                border-radius:2vw 2vw 0 0;
                border:1px solid #eee;
                color:#000 !important;
                font-weight:200 !important;
                transition: all 0.6s ease;
            }
            
            
            .so-cat:hover{
                background-color:#fff;
                border-radius:2vw 2vw 0 0;
                border:1px solid #eee;
                color:rgba(0, 0, 255, 1);
                font-weight:400;
            }
            .so-cat:hover a, .so-cat:hover a:visited{
                color:rgba(0, 0, 255, 1);
                text-decoration: none;
                font-weight:400;
            }
                .so-prod-cont{
                width:80%;
                margin: 0 auto; /*centrirane na cont*/
                display:flex;
                justify-content:center;
                gap:2vw;
                }
                
    .showoff-p .product { /*kopirano ot kataloga*/
    border: 2px solid #f9f9f9;
    border-radius: 5px;
    width:18vw;
    height: 20vh; 
    display: flex;
    background-color:#fff;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeFromBot 0.5s ease forwards;
    font-size:2vw;
}

    .showoff-p .product a {
        color: #444;
        text-decoration: none;
        display: flex;
        flex-direction: column;
        height: 100%;
}

    .showoff-p .product:hover {       
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        cursor:pointer;
}

    .showoff-p .product a img {
        width: 90%;
        height: 10vh;
        margin: 2.5% 5% 0 5%;
        object-fit: cover;
        border-radius: 4px;
	max-width: 16.2vw;
        
        min-width: 8vw;
}

    .showoff-p .product a h3
    {
        text-align: left;
        margin-left: 5%;
        margin-top: 5px;
        font-size: 2.4vw;
    }
    
            .content-boxes{
                background:#fff;
                margin-bottom:4vh;
            }
            .content-boxes h1{
                text-align:center;
                font-size:5vw;
                margin-bottom:8vh;
                opacity:0;
                transform:translateY(20px);
            }
            .content-boxes h1[data-scroll="in"]{
                animation: fadeFromBot 1s ease forwards;
            }
            .content-boxes-cont{
                display:flex;
                justify-content:center;
                gap:2vw;
                align-items:center;
                flex-wrap:wrap;
            }
            
            .content-box{
                text-align:center;
                width:30%;
                background-color:#f9f9f9;
                border-radius:5px;
                transition: 0.3s ease;
                transition-property: transform, box-shadow;
                opacity:0;
                transform:translateY(20px);
            }
            .content-box h3{
                font-size:4vw;
                color: #444;
            }
            .content-box i{
                font-size:2vw;
                color: #444;
            }
            .content-box p{
                font-size:2.4vw;
                color: #888;
                
            }
            .content-box:hover {
            transform: translateY(-10px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
            }
            /*.revi-text{
                opacity:0;
                transform: translateY(20px);
            }
            .revi-text[data-scroll="in"]{
                animation: fadeFromBot 0.5s ease forwards;
            }*/
            .swiper-revi{
                margin-top:5vh;
                margin-left:5vw;
                margin-bottom:2vh;
            }
            .swiper-revi .swiper-slide{
                width:20%;
                height:30vh;
                background-color:#f9f9f9;
                transition: 0.3s ease;
                transition-property: transform, box-shadow;
            }
            
            .revi-pname img{     
                height:2.5vh;
            }
            .revi-pname{
                width:100%;
                height:10%;
                display:flex;
                align-items:center;
                position:relative;
                top:3vh;
                left:2vw;
                float:left;
                gap:3%;
                font-size:1.8vw;
            }
            .revi-starcont{
                display:flex;
                gap:2%;
            }
            .revi-maintext{
                position:relative;
                top:3vh;
                left:2vw;
                bottom:1vh;
                font-size:2vw;
                width:90%;
                height:70%;
                overflow:auto;
                
            }
            .about-bottom{
                background-color:#555;
                align-items:center;
                font-size:4vw;
                padding-top:3vh;
                display:flex;
                justify-content:center;
                align-items:center;
            }
            .about-bottom ul{
                
                list-style:none;
                display:flex;
                gap:2vw;    
                margin-top:4vh;                
                flex-direction:column;
            }
            
             .about-bottom a{
                color:#000;
                text-decoration: none;
                transition: font-weight ease 0.3s;
            }
            .about-bottom a:hover{
                font-weight:600;
            }
            .about-bottom li{
                font-size:1rem;
            }
            .about-bottom p{
                
                font-size:1rem; 
                text-align:center; 
                margin-top:2.5vh;
            }
            .botadress-map{
                width:40vh;
                height:40vw;
                margin-left:5vw;
            }
            .botadress-map iframe{
                width:100%;
                height:100%;
            }
            .sm-container{
        display:none;
        transition: all 1.2s ease-in-out .6s;
        background-color:rgba(155,155,155,0.1);
        backdrop-filter: blur(10px);
        z-index:1067;
        position:fixed;
        top:0;
        left:0;
        right:0;
        bottom:0;
        width:100%;
        height:100%;
    }
    @keyframes slideInSM{
        0%{
            opacity:0;
            transform:translateX(20vw);
        }
        100%{
            opacity:1;
            transform:translateX(0);
        }
    }   
    @keyframes slideOutSM{
        0%{
            opacity:1;
            transform:translateX(0);
        }
        100%{
            opacity:0;
            transform:translateX(20vw);
        }
    }   
    .search-menu{
        position:fixed;
        top:0;
        bottom:0;
        right:0;
        left:20%;
        width:80%;
        z-index:1068;
        border-left: 1px solid #888; 
        border-radius:20px 0 0 20px;
        background-color:#FFF;
        font-family: "Cormorant SC", serif;
        font-weight: lighter;
        font-style: normal;
    }
    .sm-close{
        float:right;
        color:#000;
        text-align:center;
        position:absolute;
        right:5%;
        left:90%;
        top:2.5%;
        bottom:0;
        height:4vh;
        width:2vw;
        font-size:2vw;
        background:none;
        border:none;
        transition: all 0.3s ease;
    }
    .sm-close:hover{
        cursor:pointer;
        transform: translateY(-0.5vh);
       
    }
    .sm-bar{ /*izlugva malko no tova e formata, narechena BAR zashtoto v neq e BARA*/
        float:left;
        position:relative;
        left: 20%;
        top:10%;
        bottom:5%;
        width:80%;
        height:6%;
    }
    .sm-bar input{ /*ISTINSKIQ BAR plot twist*/
        border: 1px solid #ccc;
        font-size: 2vw;
        height: 70%;
        padding: 4px 8px;
        position: absolute;
        width: 70%;
        border-radius: 20px;
        transition: all .6s ease-in-out .3s;
        z-index:1070;
        padding-top:1%;
        padding-left:14%;
        padding-right:0%;
        padding-bottom:1%;
    }
    .sm-bar input::placeholder{
        opacity:1;
        transition: all .6s ease-in-out .3s;
        font-size:2vw;
    }
    .sm-bar input:focus{
        padding-left:4%;
        padding-right:5%;
        border-color:#000;
        outline:none;
        &::placeholder{
            opacity:0;
        }
        ~ button{
            transform: rotateZ(360deg);
            &.sm-btn-src{
                color:#FFF;
                transition-delay:0;
                background-color: #000;
                left:65%;  /*izglejda mi dobre taka tui kato iskam da e ot lqvo na dqsno celiq bar*/
            }
            &.sm-btn-res{
                transition-delay:.4s;
                left:80%;
                opacity:1;
                padding: 0 0;
            }
        }
    }
    
    .sm-bar button{
        border:none;
        text-align:center;
    }
    .sm-bar button:hover{
        cursor:pointer;
    }
    .sm-btn-src{
        position:absolute;
        bottom:0;
        top:1%;
        left:0;
        right:0;
        width:8%;
        border-radius: 10vw;
        font-size:3vw;
        transition:all .6s ease-in-out;
        height:90%;
        z-index:1070;
        padding-right: 10%;
        padding-left: 4%;
        text-align: center;
        background-color: #ccc;
    }
    .sm-btn-res{
        transition:all .6s ease-in-out;
        z-index:1069;
        top:20%;
        left:0;
        right:0;
        bottom:0;
        position:absolute;
        width:4%;
        border-radius: 10vw;
        font-size:2vw;
        height:50%;
        width:8%;
        opacity:0;
    }
    .sm-suggestions-cont{
        position:relative;
        top:10%;
        left:20%;
        font-family: "Poiret One", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 4vw;
    }
    .sm-suggestions-cont h3{
        font-size: 2.5vw;
    }
    .sm-suggestions{
        position:relative;
        top:0;
        left:5%;
    }
    .sm-suggestions ul{
        list-style:none;
        margin:0 0 0 0;
        padding:0 0;
        
    }
    .sm-suggestions li{
        font-size:2vw;
        font-weight:200;
        line-height: 3vh;
        color:#000;
    }
    .sm-suggestions a, a:visited{
        color:#000;
        text-decoration:none;
        
    }
    .sm-suggestions li:hover{
        font-weight:600;
        transform: translateY(-0.4vh);
        transition: transform 0.3s ease;
        
    }
    .sm-products-sugg{
        position:relative;
        top:12%;
        bottom:15%;
        left:20%;
        
    }
    .sm-products-row{
        top:10%;
        display:flex;
        width:60%;
        height: 40%;
        justify-content:center;
        gap:1vw;
    }
    .sm-product img{
        height: 20vh;
        margin: 2.5% 5% 0 5%;
        object-fit: cover;
        border-radius: 4px;
        border: 1px solid #eee;
        transition: all 0.3s ease;
        width: 20vw;
    }
    .sm-product img:hover{
        cursor:pointer;
        transform: translateY(-1vh);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    }
    .text-flex{
        text-align:center;
        align-items: center;
        opacity:0;
        transform: translateY(20px);
        font-size: 2.5vw;
    }
    .text-flex[data-scroll="in"]{
        animation: fadeFromBot 0.5s ease forwards;
    }
    
    
    .filter-menu-cont{
        
        position: fixed !important;
        top:0;
        left:0;
        bottom:0;
        right:0;
        z-index: 2500;
        width:100%; 
        height:100%; 
        background-color:rgba(180,180,180,0.1);
        backdrop-filter:blur(20px);
        display:none;
    }
    .filter-cls{
        background:none;
        border:0;
        float:left;
        text-align:left;
        color:#000;
    }
    .filter-menu{
                background-color:#FFF;
             /*   position:fixed;
                top:10vh;*/
             position:relative;
             margin: 0 0 0 0;
                width:50vw;
             min-width: 300px;
                z-index:2501;
                
/*min-width: 260px !important;*/
                height:100vh;
                border-right: solid 2px rgba(180, 180, 180, 0.3);
                text-align:center;
                font-family: "Poiret One", sans-serif;
                font-weight: 400;
                font-style: normal;
            }
            @keyframes FMSlideIn{
        0%{
            opacity:0;
            transform:translateX(-20vw);
        }
        100%{
            opacity:1;
            transform:translateX(0);
        }
    }   
    @keyframes FMSlideOut{
        0%{
            opacity:1;
            transform:translateX(0);
        }
        100%{
            opacity:0;
            transform:translateX(-20vw);
        }
    }
            .filter-options{
                list-style:none;
                text-align:left;
                padding-left:2vw;
                border-bottom:solid 2px rgba(180, 180, 180, 0.3);
            }
            .filter-options-list{
                text-align:left;
                list-style:none;
                padding-left: 3vw;
                
            }
            .filter-options .cena-input-cont{
               width:100%;
            }
            .filter-options .cena-field{
                display:flex;
                align-content:center;
                gap:20vw;
                font-size:5vw;
            }
         /*   .filter-options .cena-field span{
                width:4vw;
                border: none;
                background-color:#EEE;
                border: 2px solid rgba(180, 180, 180, 0.1);
                border-radius: 4px;
                font-size:1vw;
                pointer-events: none;   
                user-select: none;
                text-align:right;
            }*/


.filter-options .cena-field span{
                /*width:6vw;*/
		padding: 15px 6px;
              /*  height:6vh;*/
                font-family: "Roboto", sans-serif !important;
                font-optical-sizing: auto;
                font-weight: 200;
                font-style: normal;
                
                border: none;
                background-color:#EEE;
                border: 2px solid rgba(180, 180, 180, 0.1);
                border-radius: 4px;
                font-size:1.2vw;
                pointer-events: none;   
                user-select: none;
                text-align:right;
            }

            .filter-options input::-webkit-outer-spin-button,
            .filter-options input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
            }
            .filter-options input[type="number"] {
            -moz-appearance: textfield;
            }
            .filter-options .pslider{
                width:80%;
                height:0.5rem;
                background-color: rgba(100,100,100,0.1);
                position:relative;
                border-radius:4px;
                margin-bottom:2vh;
                z-index:2003;
            }
            .filter-options .pslider .cena-slider{
                height: 100%;
                left: 0%;
                right: 0%;
                z-index:4;
                position: absolute;
                border-radius: 5px;
                background: rgba(241, 216, 29, 0.8);
            }
            .filter-options .cena-range{
                position:relative;
            }
            .filter-options .cena-range input{
                width:80%;
                position:absolute;
                top:-27px;
                left:0;
                background:none;
                pointer-events: none;
                cursor: pointer;
                -webkit-appearance: none;
                appearance:none;
                z-index:5;
            }
            .filter-options .cena-range input::-moz-range-thumb {
            height: 15px;
            width: 15px;
            border-radius: 70%;
 
            background-color: #555;
            pointer-events: auto;
            -moz-appearance: none;
            }
            .filter-options .cena-range input::-webkit-slider-thumb {
            height: 15px;
            width: 15px;
            border-radius: 70%;
            background-color: #555;
            pointer-events: auto;
            -webkit-appearance: none;
        }
        .products-cont {
                min-height:90vh;
               /* width: 80%;
                margin-left: 20%;*/
		width: 90%;
		margin-left: 5%;
                margin-top: 10vh; 
                display: grid;
                grid-template-columns: repeat(3, 1fr); 
                gap: 0.2vw;
}

 .products-cont .product .pr-price-cont{
        display:flex;
        gap:0.2vw;
        margin-left:5%;
        margin-top:0;
        
    }

    .products-cont .product {
    background-color:#fff;
    border: 2px solid #f9f9f9;
    border-radius: 5px;
    height: 25vh;
    width:30vw;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeFromBot 0.5s ease forwards;
}

    .products-cont .product a {
        color: #444;
        text-decoration: none;
        height: 100%;
}

    .products-cont .product:hover {
        transform: translateY(-10px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        cursor:pointer;
}



    .products-cont .product a img {
        width: 90%;
        height: 15vh;
        margin: 2.5% 5% 0 5%;
        object-fit: cover;
        border-radius: 4px;
}

    .products-cont .product a h3,
    .products-cont .product a h4 {
        text-align: left;
        margin-left: 5%;
        margin-top: 5px;
        font-size:3vw;
    }
    .filter-reset{
        color: #000;
        text-transform: uppercase;
        text-decoration: none;
        border: 2px solid #000;
        padding: 1% 2%;
        font-size: 3vw;
        cursor: pointer;
        font-weight: bold;
        background: transparent;
        position: relative;
        margin-top:0;
        
        transition: all 1s;
        overflow: hidden;
    }
    .filter-reset:hover{
        /*cursor:pointer;
        background-color: rgba(107,219,47,1); */
        color:#fff;
    }
    .filter-reset::before{
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        top: 0;
        left: -40px;
        transform: skewX(45deg);
        background-color: #000;
        z-index: -1;
        transition: all 1s;
    }
    .filter-reset:hover::before{
         width: 160%;
    }
    .product:hover img.normalimg,.product img.hoverimg, .sm-product:hover img.normalimg, .sm-product img.hoverimg{
        display: none !important;
    }
    .product:hover img.hoverimg, .product img.normalimg, .sm-product img.normalimg, .sm-product:hover img.hoverimg {
        display: inline !important;
    }
    .search-menu .no-prod{
        position:relative;
        top:30%;
        left:10%;
        font-size:1.5vw;
        font-weight:400;
    }
    .products-cont .no-prod-cont{
        height:87.5vh;
        position:relative;
        top:12.5vh;
        left:7.5vw;
        width:70vw;
        text-align:center;
    }
    .products-cont .no-prod-cont .no-prod{
        height:100%;
        position:relative;
        top:25%;
        left:0;
    }
    .pr-content{
	
        border-bottom: 1vh solid #eee;  
        position:relative;
    }
    .image-cont{
        width:90%;
        height:80%;
        margin-top:10vh;
        margin-left:5vw;
    }
    .swiper-product{
        height:50%;
        width:50%;
    }
    .swiper-product img{
        width:100%;
        height:100%;
    }
    .swiper-miniprodview{
        margin-top:2.5vh;
        width:50%;
        height:10%;
    }
    .swiper-miniprodview .swiper-slide {
      width: 25%;
      height: 100%;
      opacity: 0.4;
    }

    .swiper-miniprodview .swiper-slide-thumb-active {
      opacity: 1;
    }
    .swiper-miniprodview img{
        height:100%;
        width:100%;
    }
    .info-cont{
        margin-top:2.5vh;
        margin-left:5vw;
        width:90%;
        font-size:3vw;
        text-align: center;
    }
    .title-price, .title-available{
        font-size:3vw;
        font-weight:500;
        color:#777;
    }
    .title-price{
        float:left;
    }
    .title-available{
       float:right;
    }
    .title-desc{
        clear:both;
        margin-top:15%;
        font-size:3.4vw;
        text-align:justify;
    }
    .cart-btn{
        display:flex;
        justify-content: center;
        border-radius:2vh;
        border:0.2vw solid #eee;
        width:100%;
        margin-top:2%;
        background-color:#eee;
    }
    .cartadd{
        width:50%;
        transition: all 0.3s ease;
        background-color:#eee;
        border:0;
        font-size:2.4vw;
        font-weight: 300;
        border-radius:2vh;
        color:#000;
    }
    .cart-btn:has(.cartadd:hover) {
    background-color: #000;
    border-color: #000;
    }
    .cartadd:hover{
        color:#fff;
        background-color:#000;
    }
    .quantity{
        width: 50%;
        background-color:rgba(241, 216, 29, 0.8);
        display:flex;
        justify-content:space-between;
        border:0.2vw solid transparent;
        border-radius:2vh;
    }
    .quantity input[type=number]::-webkit-outer-spin-button,.quantity input[type=number]::-webkit-inner-spin-button {    
        -webkit-appearance: none;    
        margin: 0;
    }
    .quantity input[type=number] {    
        border:0;
        width:4vw;
        background-color:transparent;
        font-size: 2.4vw;
        font-weight:300;
        text-align:center;
        -moz-appearance: textfield;
        pointer-events:none; 
        }
    .quantity button{
            background-color:transparent;
            border:0;
            text-align:center;
            font-size:2.4vw;
            font-weight:300;
            color:#000;
        }
    .title-rating{
        font-size:3vw;
        }
    .review-ad{ /*as in advert*/
        margin-top:2%;
        padding-left:5%;
        background-color:#f2f2f2;
        border-radius:1vh;
        border-bottom:0.2vh solid #ccc;
        padding-top:1%;
        display:flex;
        gap:10vw;
        font-size:3vw;
        width:100vw;
        float:left;
    }
    .review-ad h4{
}
    .open-reviewadd{
        margin-top:4%;
        height:50%;
        background-color:#fff;
        border:0.2vw solid #ccc;
        border-radius:1vh;
        padding: 1% 2%;
        transition:all 0.3s ease;
        color:#000;
        font-size:2vw;
    }
    .open-reviewadd:hover{
        background-color:#000;
        color:#fff;
        cursor:pointer;
        border:0.2vw solid #fff;
    }
    .revi-holder{
        clear:both;
        border-top:1vh solid #f2f2f2;
        width:100%;
        position:relative;
        display:flex;
        flex-direction:column;
        gap:2vh;
        background-color:#f2f2f2;
        white-space: initial;
    }
    .revi-cont{
        font-size:1.4vw;
         width:60%;
         height:15vh;
         margin-left:20%;
         border-radius:2vh;
         background-color:#f9f9f9;
         transition: 0.3s ease;
         
         transition-property: transform, box-shadow;
    }
    @keyframes fadeFromLeft{
        0%{
            opacity:0;
            transform:translateX(-20vw);
        }
        100%{
            opacity:1;
            transform:translateX(0);
        }
    }
    .revi-cont .revi-pname{
                width:100%;
                height:10%;
                display:flex;
                align-items:center;
                position:relative;
                top:3vh;
                left:2vw;
                float:left;
                gap:1%;
                font-size:2vw;
            }
            .revi-cont[data-scroll="in"]{
                animation:fadeFromLeft 0.6s ease;
            }        
    .review-add{
                display:none;
                width:100vw;
                height:100vh;
                background-color:rgba(249, 249, 249, 0.7);
                backdrop-filter:blur(5px);
                top:0;
                left:0;
                z-index:1067;
                position:fixed;
                
            }
            .arevi-cont{
                width:80%;
                height:90%;
                position: fixed;
                left:10%;
                top:5%;
                background-color:#fff;
                border-radius:2vh;
                border:0.2vw solid #f9f9f9;
                box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
            }
            .arevi-cont input[type='text']{
                border-radius:2vh;
                padding-left:1vw;
                border:0.5vh solid #eee;
                transition:all 0.6s ease;
            }
            .arevi-cont input[type='text']:focus{
                border-color:rgba(241, 216, 29, 0.8);
                outline:none;
                &::placeholder{
                opacity:0;    
                }
            }
            .arevi-title{
                text-align:center; 
                margin-top:5%;
                font-size:5vw;
            }
            .username-cont{
                display:flex;
                flex-direction:column;
                gap:2vh;
                justify-content: space-between;
                position:relative;
                margin-left:20%;
                margin-right:20%;
                margin-top:5%;
            }
            .username-cont input{
                width:40%;
                font-size:2vw;
            }
            .userimg-cont{
                position:absolute;
                left:45vw;
                right:10vw;
                top:10vh;
                overflow:hidden;
            }
            .arevi-feedback{
                margin-left:10%;
                width:100%;
                height:50%;
            }
            #usertext{
                margin-top:5%;
                width:80%;
                height:40%;
                transition:all .3s ease;
                border:0.5vh solid #eee;
                resize:none;
                &:focus{
                border-color:rgba(241, 216, 29, 0.8);
                outline:none;
                }
            }
            .arevi-rateholder{
                position:relative;
                left:45vw;
                bottom:3vh;
            }
            .arevi-stars{
                display:flex;
                gap:0.5vw;
                position:absolute;
                left:1.3vw;
                font-size:2vw;
            }
            #userrating{
                position:absolute;
                width:16vw;
                top:2vh;
                accent-color:rgba(241, 216, 29, 0.8);
            }
            #userrating::-webkit-slider-thumb{
                width:2vw;
                height:1vh;
                border:1vw solid #ccc;
                
            }
            #arevi-submit{
                position:absolute;
                top:70%;
                left:30%;
                border-radius:2vh;
                padding: 1vh 10vw;
                border:0.2vw solid #eee;
                background-color: #eee;
                transition: all 0.3s ease;
                &:hover{
                    background-color:rgba(241, 216, 29, 0.8);
                    border-color:rgba(241, 216, 29, 0.8);
                }
            }
            .add-notif-cont{
                position:fixed;
                
                top:55vh;
                width:100vw;
                border:0.2vw solid #eee;
                border-radius:2vh;
                padding-left:2%;
                padding-right:2%;
                height:45vh;
                animation: fadeFromBot 1s ease;
                background-color:#fff;
            }
            .added-prodinfo{
                display:flex;
                gap:2vw;
                font-size:3vw;
            }
            .added-prodinfo img{
                height:10vh;
            }
            .added-prodinfo h3{
                margin-top:5%;
            }
            .add-notif-cont a{
                width:80%;
                height:20%;
                padding:1% 30%;
                border-radius:2vh;
                margin-left:10%;
                margin-right:10%;
                background-color:#eee;
                text-decoration: none;
                color:#000;
                transition:all 0.3s ease;
                font-size:2vw;
            }
            .add-notif-cont a:hover{
                background-color:rgba(241, 216, 29, 0.8);
                color:#000;
            }
            .add-notif-cont a:visited{
                color:#000;
            }
            .cart-content{
                margin-top:150px;
            }
            .cart-step1{
                font-size:1.4vw;
                position:relative;
                margin-top:8%;
                width:78%;
                height:80vh;
                border:0.2vw solid #eee;
                margin-left:10%;
                margin-bottom:10vh;
            }
            .cart-header{
                background-color:#eee;
                color:#000;
                width:60%;
                padding-left:13%;
                display:flex;
                gap:5vw;
                margin-bottom:0;
            }
            
            .cart-items-cont{
                width:73%;
                height:69vh;
                background-color:#fff;
                overflow:auto;
                margin-bottom:0;
                border-right:0.2vw solid #eee;
            }
.cart-header {
    background-color: #eee;
    color: #000;
    width: 60%;
    padding-left: 13%;
    display: flex;
    gap: 3.5vw;
    margin-bottom: 0;
}

.cart-items-cont {
    width: 73%;
    height: 69vh;
    background-color: #fff;
    overflow: auto;
    margin-bottom: 0;
    border-right: 0.2vw solid #eee;
}

.cart-item {
    width: 100%;
    font-size: 1.2vw;
    display: flex;
    justify-content: normal;
    gap: 1vw;
    align-items: center;
    & img
{
    width: 10vw;
}
}
     .quantity-buttons{
        width: 21%;
        background-color:rgba(241, 216, 29, 0.8);
        display:flex;
        justify-content:space-between;
        border:0.2vw solid transparent;
        border-radius:2vh;
        font-size:1.3vw;    
    }
    .quantity-buttons input[type=number]::-webkit-outer-spin-button,.quantity input[type=number]::-webkit-inner-spin-button {    
        -webkit-appearance: none;    
        margin: 0;
    }
    .quantity-buttons input[type=number] {    
        border:0;
        width:2vw;
        background-color:transparent;
        font-size: 1.6vw;
        font-weight:300;
        text-align:center;
        -moz-appearance: textfield;
        pointer-events:none; 
        }
    .quantity-buttons button{
            background-color:transparent;
            border:0;
            text-align:center;
            font-size:1.5vw;
            font-weight:300;
            color:#000;
        }   
        .price-cont{
            background-color:#fff;
            color:#000;
            width:25%;
            height:40%;
            text-align:center;
            position:absolute;
            left:75%;
            top:0;
            
            font-size:2vw;
        }
        .submit-button{
            background-color:#fff;
            color:#000;
            width:25%;
            height:40%;
            position:absolute;
            left:75%;
            top:60%;
            
        }
        .step2Button{
            position:absolute;
            text-align:center;
            width:100%;
            height:40%;
            overflow-wrap:break-word;
            color:#000;
            word-wrap:break-word;
            white-space:normal;
            background:rgba(241, 216, 29, 0.8);
            font-size:2vw;
            border:0.2vw solid #eee;
            border-radius:2vw;
            transition: all 0.3s ease;
            &:hover{
                background-color:#000;
                color:#Fff;
                border-color:rgba(241, 216, 29, 0.8);
                cursor:pointer;
            }
            &:disabled{
                background-color:#ccc !important;
                color:#eee !important;
                cursor:default;
                pointer-events:none;
            }
        }
        .cart-step2{
            width:80vw;
            height:80vh;
            background-color:#fff;
            position:relative;
            margin-left:5%;
            margin-top:10%;
            margin-right:10%;
            margin-bottom:10%;
            border:0.2vw solid #eee;
            
        }
        .step2-header{
            font-size:2.5vw;
            text-align:center;
            height:10%;
            width:100%;
            position:relative;
            
            background-color:#eee;
        }
        .step2-header h1{
            margin-top:4vh;
        }
        .step2-inputs{
            padding: 5vh 10vw;
            display:flex;
            gap:5vw;
            font-size:2vw;
        }
        .personemail, .personname{
            font-size:2vw;
        }
        .personname input, .personemail input{
           width:20vw;
        }
        

.neworder .product .pr-price-cont{
            display:flex;
            gap:0.2vw;
            margin-top:5px;
            font-size:2vw;
            margin-left:1%;
        }

        .cartrem-btn{
            width:0.3vw;
            
            
        }
        .cartrem-btn button{
            background-color:transparent;
            border:0;
            color:#000;
            font-size:1.2vw;
            transition: all .3s ease;   
            &:hover{
                cursor:pointer;
                color:rgba(241, 216, 29, 0.8);
            }
        }

.cart-adressopts{
           position:relative; 
           padding:0vh 10vw; 
           font-size:2vw;
        }
        .cart-adressopts ul{
            list-style:none;
            display:flex;
            
            gap:2vw;
            
        }.cart-payopts{
           position:relative; 
           padding:0vh 10vw; 
           font-size:2vw;
        }
        .cart-payopts ul{
            list-style:none;
            display:flex;
            
            gap:4vw;
            
        }

        .cart-step2 .submit-button{
            text-align: center;
            background-color:transparent;
            
            font-size:2vw;
            top:50vh;
            left: 20vw;
                    & .submitall{
                
                
                background-color:rgba(241, 216, 29, 0.8);
                border: 0.5vh solid #eee;
                color:#000;
                transition: all 0.3s ease;
                border-radius:2vw;
                padding: 1% 1%;
                &:hover{
                 background-color:#000;
                 border-color: rgba(241, 216, 29, 0.8);
                 color:#fff;
                }
                &:disabled{
                    background-color:#eee;
                    pointer-events:none;
                    color:#ccc;
                }
            }
}
        .orderSuccess{
            text-align: center;
            margin-top:30vh;
            font-size:2vw;
            background-color:#fff;
        }
        .orderSuccess a{
            text-decoration:none;
            &:visited{
                text-decoration:none;
            }
            background-color:rgba(241, 216, 29, 0.8);
                border: 0.5vh solid #eee;
                color:#000;
                transition: all 0.3s ease;
                border-radius:2vw;
                padding: 1% 1%;
                &:hover{
                background-color:#000;
                border-color: rgba(241, 216, 29, 0.8);
                color:#fff;
                }
        }
        .emptyCart{
             padding-left:4vw;
             text-align: center;
             font-size:2.4vw;
        }
        .emptyCart h2{
            text-align:left;
        }
        .emptyCart a{
            margin-top:2%;
            text-decoration:none;
            align-self:center;
            font-size:2vw;
            &:visited{
                text-decoration:none;
            }
            background-color:rgba(241, 216, 29, 0.8);
                border: 0.5vh solid #eee;
                color:#000;
                transition: all 0.3s ease;
                border-radius:2vw;
                padding: 1% 1%;
                &:hover{
                background-color:#000;
                border-color: rgba(241, 216, 29, 0.8);
                color:#fff;
                
                }
        }
        
        .product.neworder h3 {
            margin-bottom: 0;
        }
        
       .product.neworder .pr-price-cont{
            display:flex;
            gap:0.4vw;
            margin-top:0;
            font-size:1vw;
            margin-left: 5%;
        }
	.product.saleorder h4, .product.ratingorder h4{
	margin-left:5%;
	font-size: 1.8vw;
	}

        .product.neworder .pr-price-cont h4{
            margin-bottom:0;
            font-size:1.8vw;
        }
          
        
        .cartrem-btn{
            width:0.3vw;
            
            
        }
        .cartrem-btn button{
            background-color:transparent;
            border:0;
            font-size:1.2vw;
            transition: all .3s ease;   
            &:hover{
                cursor:pointer;
                color:rgba(241, 216, 29, 0.8);
            }
        }