#NewHome{width:100vw;height:auto;background:white;display:flex;flex-direction:column;align-items:flex-start;overflow-x:hidden;row-gap:5vh;padding-top:7.5vh;>nav{z-index:50;position:fixed;top:0;left:0;width:100%;height:7.5vh;background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(50px);backdrop-filter:blur(50px);padding:0 5.5vw;display:flex;align-items:center;justify-content:space-between;>form{background:white;border:1px solid #ccc;width:20%;height:60%;border-radius:1vh;display:flex;align-items:center;justify-content:space-between;overflow:hidden;>input{flex:9;height:100%;padding-left:2.5%;font-size:1.5vh;outline:none;border:none;font-family:Aeonik Regular}>button{flex:1;background:#eee;height:100%;font-size:2.25vh}}>#logo{height:50%;width:auto;>img{width:auto;height:100%}}>.buttons{width:20%;height:60%;display:flex;align-items:center;justify-content:flex-end;column-gap:1vw;>button{font-size:3vh;&.searcher{display:none}}}}>article.top{width:100%;height:auto;background:transparent;overflow:hidden;display:flex;flex-direction:column;row-gap:5vh;>.marquee{width:100%;height:4.5vh;background:#eee;display:none;align-items:center;font-size:2vh;p{color:#555;font-family:Aeonik Regular}}>.swiper-container{width:100%;height:75vh;background:transparent!important;box-shadow:none;overflow:hidden;>.swiper-wrapper{background:transparent!important;width:100%;height:100%;box-shadow:none;align-items:center;>.swiper-slide{margin:0!important;width:90%;height:90%;background:transparent!important;box-shadow:none;>img{filter:brightness(.75)}>.text{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;padding:5.5vw 7.5vw;display:flex;align-items:flex-end;justify-content:space-between;row-gap:2.5vh;>h1{width:100%;height:auto;line-height:2;font-size:5vh;text-shadow:1px 1px 2px black;font-family:Qarkine,sans-serif}>h1,>p{color:white}>p{display:none;width:50%;font-size:1.75vh;font-family:Poppins,sans-serif}}&.swiper-slide-active{border-radius:2vh;height:100%}}}}}>article.slates{width:100%;height:50vh;background:silver;display:flex;>.slate{width:20%;height:100%;>h5{top:2.5vh;font-size:1.5vh}>h4,>h5{position:absolute;left:5vh}>h4{bottom:2.5vh;font-size:2.5vh}}}>article.slab{width:100%;height:50vh;background:silver;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3.5vh;background-repeat:no-repeat;background-size:cover;background-position:50%;>img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center center;filter:brightness(.5)}>h1{font-size:7.5vh;line-height:0}>h1,>p{color:white;text-shadow:1px 1px 2px black;z-index:1}>p{font-size:2.5vh;line-height:1}>button{z-index:1;border:1px solid white;color:white;display:flex;align-items:center;justify-content:center;line-height:0;height:5vh;padding:0 1.5vw;width:auto;border-radius:50px;transition:.25s ease-in-out;font-size:2vh;&:hover{background:white;color:#333}}}>article.mid{width:100%;height:auto;display:flex;column-gap:1.5vh;flex-direction:column;padding:0 5.5vw;row-gap:1.5vh;>.left{width:100%;height:auto;position:sticky;top:15vh;display:flex;align-items:center;justify-content:flex-start;>h1{font-size:2vh;line-height:.9;font-weight:800}}>.right{width:100%;height:auto;display:grid;grid-template-columns:repeat(5,1fr);list-style-type:none;column-gap:1.5vh;>.img{width:100%;height:auto;aspect-ratio:1;border-radius:1vh;background:silver;>.title{bottom:1.5vh;background:transparent;color:black;font-size:2vh}>.price,>.title{position:absolute;left:1.5vh;width:auto;height:auto;padding:2vh 1.25vh;line-height:0;border-radius:50px;display:flex;align-items:center;justify-content:center}>.price{top:1.5vh;background:white;font-size:1.5vh}>.like{position:absolute;background:white;top:1.5vh;right:1.5vh;width:auto;height:5vh;aspect-ratio:1;border-radius:50%;>svg{font-size:2vh}}>.cart{position:absolute;background:white;bottom:1.5vh;right:1.5vh;width:auto;height:5vh;aspect-ratio:1;border-radius:50%;>svg{font-size:2vh}}}}}>article.bottom{width:100%;min-height:75vh;height:auto;display:flex;padding:0 5.5vw;column-gap:5vh;>.left{position:sticky;top:10vh;width:15%;height:auto;display:flex;flex-direction:column;>.brands{display:flex;height:auto;flex-direction:column;row-gap:0;>.top{padding:0;background:white;font-size:1.75vh;height:5vh;display:flex;flex-wrap:nowrap;align-items:center;column-gap:.5vh;>h4{text-wrap:nowrap;display:flex;align-items:center;font-size:2vh;line-height:0;>svg{font-size:1.75vh}}>button{display:none}}>ul{width:100%;height:auto;list-style-type:none;display:flex;flex-direction:column;flex-wrap:wrap;padding:0;row-gap:1vh;>li{height:auto;padding:0;>a,button{width:100%;display:flex;align-items:center;justify-content:flex-start;height:4vh;line-height:0;font-size:1.5vh;color:#555;background:#eee;border:1px solid #ddd;border-radius:1vh;padding:0 1vw;font-family:Aeonik Regular;&.active{background:black;color:white}}}}}}>.right{width:85%;height:auto;display:flex;flex-direction:column;row-gap:3vh;>.top{width:100%;height:5vh;display:flex;align-items:center;flex-wrap:nowrap;text-wrap:nowrap;gap:1vw;justify-content:space-between;>h4{font-size:2vh}>.filters{width:auto;flex:1;display:flex;align-items:center;flex-wrap:nowrap;text-wrap:nowrap;gap:1vw;justify-content:space-between;>.title{display:none}>.filter-group{display:flex;align-items:center;column-gap:.5vw;>h5{font-size:1.75vh}>button,input{background:#eee;width:auto;height:4vh;font-size:1.5vh;line-height:0;padding:0 .5vw;border-radius:1vh;text-wrap:nowrap;color:#555;border:1px solid #5555;font-family:Aeonik Regular;outline:none;&.active{background:limegreen;color:white;text-shadow:0 0 2px darkgreen;border:1px solid rgb(0,128,0,.5)}}>select{background:#eee;width:auto;height:4vh;font-size:1.5vh;line-height:0;padding:0 .5vh;border-radius:1vh;text-wrap:nowrap;color:#555;border:1px solid #5555;font-family:Aeonik Regular;outline:none;>option{font-family:Aeonik Regular}}}}>ul{list-style-type:none;display:flex;align-items:center;flex-wrap:nowrap;overflow-x:scroll;height:100%;width:100%;text-wrap:nowrap;gap:1.5vh;>h4{width:auto;text-wrap:nowrap;font-size:1.75vh}>li{width:auto;height:100%;>button{height:100%;width:auto;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid silver;border-radius:50px;padding:0 1.5vw;font-size:1.75vh}}}}>.bottom{width:100%;height:5vh;display:flex;overflow-x:hidden}>ul{list-style-type:none;width:100%;height:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:1.75vh;padding:1.5vh 0 5vh;overflow:hidden;>li{width:100%;height:auto;display:flex;flex-direction:column;row-gap:1.5vh;>.img{width:100%;height:auto;aspect-ratio:1;border-radius:1vh;background:silver;overflow:hidden;>img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;transition:.25s ease-in-out;&:hover{scale:1.05}}>.price{position:absolute;top:1.5vh;left:1.5vh;width:auto;height:auto;padding:2vh 1.25vh;line-height:0;border-radius:50px;background:white;display:flex;align-items:center;justify-content:center;font-family:Aeonik Regular}>.like{position:absolute;background:transparent;top:1.5vh;right:1.5vh;width:auto;height:5vh;aspect-ratio:1;border-radius:50%;-webkit-backdrop-filter:blur(25px);backdrop-filter:blur(25px);&:hover{background:white;>svg{stroke:black;&.red{stroke:white}}}}>.cart{position:absolute;background:white;bottom:1.5vh;right:1.5vh;width:auto;height:5vh;aspect-ratio:1;border-radius:50%;&.active{background:limegreen;>svg{fill:white}}}}>.info{display:flex;flex-direction:column;>h4{font-size:2vh;color:#555}>p{font-size:1.5vh;font-family:Aeonik Regular;color:#666}>h5{font-size:1.75vh;color:#999;display:flex;align-items:center;text-wrap:nowrap;column-gap:.5vh;>svg{color:#999;stroke:#999}}}}}}}>article.product{z-index:20;position:fixed;top:7.5vh;left:0;height:calc(100vh - 7.5vh);width:100%;background:#fff5;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);display:flex;flex-direction:column;overflow:hidden;>.top{display:flex;align-items:flex-start;width:100%;height:auto;padding:2.5vh 5.5vw;>button{background:white;font-size:2vh;padding:1vh 1vw;display:flex;align-items:center;gap:1vh;border-radius:50px;box-shadow:1px 1px 50px 0 #0003}}>.display{width:auto;height:70vh;background:transparent;margin:0 auto;border-radius:1vh;padding:.5vh;display:flex;align-items:flex-start;column-gap:1vh;>.img{width:auto;height:100%;aspect-ratio:3/4;border-radius:.5vh;overflow:hidden;>img{width:100%;height:100%;object-fit:cover}}>.info{width:20vw;height:auto;border-radius:.5vh;display:flex;flex-direction:column;align-items:flex-start;padding:2vh 2vw;row-gap:1.25vh;overflow:hidden;background:white;>h5{font-weight:400;border-radius:50px;border:1px solid #3339;padding:.5vh 1vw;display:flex;align-items:center;font-size:1.5vh;font-family:Aeonik Regular,sans-serif}>h2,>h5{color:#333}>h2{font-size:3vh;font-weight:100}>h3{font-size:2vh;color:#444;font-weight:500}>article{width:100%;display:flex;flex-direction:column;gap:.5vh;>h5{font-family:Aeonik Regular,sans-serif;font-size:1.75vh;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;>strong{font-weight:500;font-size:1.75vh}&:last-child{flex-direction:column;align-items:flex-start}}}}>button{display:none;width:100%;height:5vh;background:#333;color:white;border-radius:50px;font-size:2vh;&.active{background:limegreen}}>.recoms{width:auto;height:100%;flex:1;background:#ddd;border-radius:.5vh;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:.5vh;>.com{background:#444;border-radius:.5vh;overflow:hidden}}}}@media only screen and (max-width:539px){&{>nav{padding:0 4vw;>form{display:none;position:absolute;top:calc(100% + 0vh);left:0;width:calc(100% - 8vw);height:5.5vh;margin:0 4vw;>input{flex:8.5}>button{flex:1.5}&.show{display:flex}}>.buttons{gap:2.5vw;>button{&.searcher{display:flex}}}}>article.top{>.swiper-container{height:50vh;>.swiper-wrapper{>.swiper-slide{>.text{>h1{font-size:2vh;text-align:left}>.circular-text{position:absolute;top:0;right:0}}}}}}>article.mid{padding:0 4vw;>.right{grid-template-columns:repeat(2,1fr);gap:4vw;>.img{>.title{font-size:1.75vh;bottom:1vh;left:1vh}>.price{padding:1.5vh 1vh;line-height:0}>.cart,>.like{height:4vh}}}}>article.slab{height:35vh;gap:2vh;>h1{font-size:3.5vh}>p{font-size:2vh}>button{padding:0 5vh}}>article.bottom{padding:0 4vw;>.left{position:absolute;top:0;left:0;width:100%;>.brands{z-index:3;width:100%;position:absolute;top:0;left:0;transform:translateY(-2.5vh);justify-content:space-between;padding:0 4vw;background:white;isolation:isolate;gap:1.25vh;>.top{>button{position:absolute;right:0;display:flex;>svg{font-size:3vh}}}>ul{width:100%;display:none}&.clicked{padding:0 4vw 3.75vh;>ul{display:flex}}}}>.right{width:100%;>.top{z-index:2;transform:translateY(2.5vh);>h4{height:5vh;display:flex;align-items:center;width:100%}>.filters{position:absolute;background:white;z-index:1;width:100%;flex:unset;top:100%;left:0;flex-direction:column;gap:1vh;padding-bottom:2.5vh;>.title{position:absolute;top:0;transform:translateY(-125%);right:0;display:flex;align-items:center;z-index:1;>button{font-size:1.75vh;>svg{&:last-child{font-size:3vh}}}}>.filter-group{display:none;width:100%;justify-content:space-between}&.clicked{padding-top:1.25vh;>.filter-group{display:flex}}}}>ul{grid-template-columns:repeat(2,1fr);gap:4vw;column-gap:4vw;padding-top:2.5vh}}}>article.product{isolation:isolate;>.top{z-index:1;position:sticky;top:0;>button{padding:1vh 2.5vh}}>.display{width:90%;height:auto;flex-direction:column;gap:2.5vh;padding:0 0 5vh;>.img{width:100%;aspect-ratio:unset;height:auto;>img{height:auto}}>.info{aspect-ratio:unset;width:100%;padding:2vh;>article{width:100%}}>button{display:flex}}}}}}aside{z-index:100;position:fixed;top:0;left:0;width:100vw;height:100vh;overflow:hidden;>.back{background:transparent;width:100%;height:100%}>.modal{position:absolute;left:50%;top:50%;width:90vw;height:85vh;background:white;transform:translate(-50%,-50%);border-radius:1.5vh;box-shadow:0 0 20px 1px #999;display:flex;flex-direction:column;>.top{z-index:1;position:sticky;top:0;width:100%;min-height:7.5vh!important;height:7.5vh!important;background:white;display:flex;align-items:center;justify-content:center;>h1{font-family:Qarkine;font-size:1.25vh;font-weight:500}}>.bottom{width:100%;height:auto;display:grid;grid-template-columns:repeat(5,1fr);padding:0 1.5vh 2vh;gap:1.5vh;justify-content:flex-start;align-items:flex-start;>.card{width:100%;height:auto;aspect-ratio:1;border-radius:1vh;background:silver;overflow:hidden!important;>img{width:100%;height:100%;object-fit:cover}>.title{bottom:1.5vh;background:transparent;color:black;font-size:2vh}>.price,>.title{position:absolute;left:1.5vh;width:auto;height:auto;padding:2vh 1.25vh;line-height:0;border-radius:50px;display:flex;align-items:center;justify-content:center}>.price{top:1.5vh;background:white}>.like{top:1.5vh}>.cart,>.like{position:absolute;background:white;right:1.5vh;width:auto;height:5vh;aspect-ratio:1;border-radius:50%}>.cart{bottom:1.5vh}}}>.checkout{width:100%;height:auto;display:flex;align-items:flex-start;padding:0 1vw 1vw;gap:1vw;isolation:isolate;>.left{width:75%;height:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1vw;align-items:flex-start;justify-content:flex-start;>.card{width:100%;height:auto;display:flex;overflow:hidden;background:#eee;padding:1vh;border-radius:1vh;gap:1vh;>.left{width:40%;height:auto;aspect-ratio:1;background:#ddd;border-radius:.75vh;overflow:hidden;>img{width:100%;height:100%;object-fit:cover}}>.right{width:60%;height:auto;display:flex;flex-direction:column;row-gap:.5vh;padding:1vh 0;>h3{font-size:2vh;color:#444;line-height:1}>p{font-family:Aeonik Regular;color:#555;font-size:1.25vh;line-height:1.55vh;padding-bottom:.25vh}>.buttons{width:auto;height:auto;display:flex;align-items:center;justify-content:flex-start;gap:1vh;>button{width:auto;height:4vh;aspect-ratio:1;font-size:2vh;background:#ddd;border-radius:50px;display:flex;align-items:center;justify-content:center;line-height:0}>h1{width:auto;height:auto;font-size:1.75vh;color:black}}}>.remove{position:absolute;bottom:10%;right:0;background:darkred;color:white;padding:.5vh 1vw .5vh .5vw;height:auto;border-radius:1vh 0 0 1vh;>svg{stroke:white;fill:white}}}}>.right{position:sticky;top:7.5vh;width:25%;height:calc(85vh - 7.5vh - 1vw);display:flex;flex-direction:column;justify-content:space-between;>.top{width:100%;min-height:calc((85vh - 7.5vh - 1vw) / 1.5);height:auto;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;row-gap:2vh;>.tab{width:100%;>h2{font-size:2vh}&.not-input{display:flex;flex-direction:column;gap:0;>.slab{display:flex;flex-direction:column;gap:1vh;>label{display:flex;flex-direction:column;flex:1;>input{height:4vh}>input,>textarea{border:1px solid #ddd;width:100%;background:#eee;font-family:Aeonik Regular;border-radius:1vh}>textarea{padding:.5vh;resize:none}}}}&.radio{>.slab{display:flex;>label{>input{height:2vh}}}}>.slab{width:100%;height:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:1vh;>label{flex:1;font-family:Aeonik Regular;font-size:1.5vh;>input{border:1px solid #ddd;width:100%;height:4vh;background:#eee;font-family:Aeonik Regular;font-size:1.5vh;padding:0 .5vh;border-radius:1vh}}}}}>.bottom{width:100%;min-height:calc((85vh - 7.5vh - 1vw) / 5);display:flex;flex-direction:column;justify-content:flex-end;>.summary{height:auto;width:100%;flex:1;display:flex;flex-direction:column;justify-content:space-around;>p{font-size:1.5vh;display:flex;align-items:center;justify-content:space-between;font-family:Aeonik Regular}}>button{display:flex;align-items:center;justify-content:center;font-size:2vh;color:white;background:#444;width:100%;height:6vh;line-height:0;border-radius:50px}}}>.modal{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;background:#fff9;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);display:flex;align-items:flex-start;justify-content:center;padding-top:5vh;>.receipt{width:15vw;display:flex;flex-direction:column;gap:2.5vh;height:auto;max-height:95%;padding-bottom:5vh;isolation:isolate;>h2{position:sticky;top:0!important;width:100%;font-size:2vh;text-align:center;height:5vh;min-height:5vh;background:white;z-index:1;display:flex;align-items:center;justify-content:center}>.group{display:flex;flex-direction:column;gap:.5vh;>h3{font-size:1.75vh}>ul{>li{font-size:1.5vh;display:flex;align-items:center;justify-content:space-between}}}>p{font-size:1.75vh;display:flex;align-items:center;justify-content:space-between}>.buttons{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:1vh;>button{width:100%;height:5vh;font-size:2vh;border-radius:50px;background:#555;color:white}}}}}}>.profile{position:absolute;top:7.5vh;right:5.5vw;background:white;width:10vw;height:auto;min-height:20vh;border-radius:1vh;box-shadow:0 0 20px 1px #999;padding:1vh;>ul{list-style-type:none;width:100%;height:auto;display:flex;flex-direction:column;row-gap:1vh;.top{width:100%;height:auto;overflow:hidden;display:flex;flex-direction:column;row-gap:1vh;>.img{width:100%;height:auto;aspect-ratio:1;border-radius:1vh;background:#eee}>.intro{display:flex;flex-direction:column;row-gap:.5vh;text-align:center;>h5{font-size:1.75vh}>h5,>p{line-height:1}>p{font-family:Aeonik Regular;font-size:1.5vh}}}>li{width:100%;height:4vh;border-radius:1vh;background:#eee;overflow:hidden;>button{width:100%;height:100%;display:flex;align-items:center;justify-content:flex-start;padding:0 1vh;color:#444;row-gap:1vh;line-height:0;&:hover{color:#333}&.logout{background:darkred;color:white}&.login{background:darkblue;color:white}}}}}@media only screen and (max-width:539px){&{>.back{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}>.modal{>.bottom{grid-template-columns:repeat(1,1fr)}>.checkout{flex-direction:column;>.left{width:100%;grid-template-columns:repeat(1,1fr)}>.right{position:relative;top:0;width:100%}}}>.profile{width:45vw}}}}