@import url(https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap);:root{--color-gray:#767d8080;--color-gray--light:#8c919080;--color-gray--lighter:#919694b3;--color-gray--dark:#6b727880;--color-dark:#414a55e6}*,:after,:before{box-sizing:border-box;margin:0;padding:0}a,a:link,a:visited{text-decoration:none}ul{list-style:none}html{font-size:62.5%}body{background-position:50%!important;background-repeat:no-repeat!important;background-size:20%!important;font-family:Fira Sans,serif}.app,body{min-height:100vh;min-height:100svh}.app{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:36rem 1fr;grid-template-rows:repeat(2,6rem) 1fr;padding:max(1rem,2vw)}.header{align-items:center;background-color:#767d8080;background-color:var(--color-gray);border-radius:10rem;display:flex;grid-column:1/-1;grid-row:1/2;height:6rem;padding:max(1rem,1.5vw)}.header .logo{color:#e8dede;font-size:clamp(1.2rem,2vw,1.8rem);margin-right:auto}.sidebar{background-color:#919694b3;background-color:var(--color-gray--lighter);border-radius:1.5rem;grid-column:1/2;grid-row:2/span 2;height:min(40rem,40rem);overflow-x:hidden;position:relative}.title{border-bottom:2px double;color:#f1f1f1;line-height:4rem;padding-bottom:.5rem;padding-left:1rem;text-transform:capitalize;word-spacing:.1rem}.app ul{grid-column:2/-1;grid-row:2/3}.btn{align-items:center;background-color:#4e25bb80;border:none;border-radius:2rem;color:#f1f1f1;cursor:pointer;display:flex;font-size:clamp(1.1rem,2vw,1.4rem);gap:.5rem;padding:.75rem 1.5rem;transition:all .4s}.btn:hover{filter:invert(1)}.btn .icon{align-items:center;background-color:#4e25bbcc;border-radius:50%;display:flex;height:2.5rem;justify-content:center;width:2.5rem}.btn .icon svg{font-size:1.45rem}.btn--delete{background-color:initial}.btn--delete:hover{color:crimson;filter:invert(0)}.list{max-height:35rem;overflow-y:auto;&::-webkit-scrollbar{width:5px}&::-webkit-scrollbar-thumb{background:#767d8080;background:var(--color-gray);border-radius:2rem}&::-webkit-scrollbar-thumb:hover{background:#414a55e6;background:var(--color-dark)}}.list li{text-wrap-style:pretty;align-items:center;color:#f1f1f1;cursor:pointer;display:flex;padding:.75rem;transition:all .3s cubic-bezier(.6,-.28,.735,.045)}.list li.active,.list li:hover{background-color:#414a55e6;background-color:var(--color-dark)}.list li figure{background-color:#f1f1f1;height:3rem;mix-blend-mode:darken;width:3rem}.list li figure img{height:100%;width:100%}.list li div{margin-left:1rem;margin-right:auto}.list li div h3{text-wrap-style:balance;text-align:left;width:80%}.horizontal-list{align-items:center;background-color:#8c919080;background-color:var(--color-gray--light);border-radius:2rem;display:flex;height:6rem;justify-content:space-around;position:relative}.horizontal-list li{border-radius:.5rem;color:#f1f1f1;cursor:pointer;font-size:clamp(.875rem,2vw,1.4rem);font-weight:400;padding:.5rem 1rem;text-transform:capitalize;transition:all .3s}.horizontal-list li.active,.horizontal-list li:hover{background-color:#4e25bb80}.details{align-items:flex-start;background-color:#414a55e6;background-color:var(--color-dark);border-radius:2rem;border-radius:2.5rem;color:#f1f1f1;display:grid;grid-column:2/-1;grid-row:3/4;padding:max(2rem,2vw);position:relative}.details .btn--right{align-self:flex-start;justify-self:flex-end}.details figure{background-color:#919694b3;background-color:var(--color-gray--lighter);background-color:#414a55e6;background-color:var(--color-dark);height:20rem;mix-blend-mode:multiply;position:absolute;right:5%;top:70%;transform:translate(-5%,-70%);width:20rem}.details figure img{height:100%;width:100%}.flex{align-items:center;display:flex}.flex .price{margin-left:auto;margin-right:4rem}.star-rating{align-items:center;display:flex;font-size:clamp(1.1rem,2vw,1.4rem);gap:1rem}.details .description{text-wrap-style:pretty;border-bottom:1px solid #919694b3;border-bottom:1px solid var(--color-gray--lighter);font-size:clamp(1.1rem,1.5vw,1.4rem);line-height:1.8;padding-block:4rem;width:75%}.details .action{display:flex;gap:2rem;margin-top:3rem}.counter{align-items:center;background-color:#fffc;border-radius:10rem;color:#414a55e6;color:var(--color-dark);display:flex;gap:1rem;justify-content:center;padding:1rem;position:relative;width:min(90%,11rem)}.counter button{background-color:#ffffff1a;border:none;border-radius:50%;color:#6b727880;color:var(--color-gray--dark);cursor:pointer;height:2rem;line-height:0;width:2rem}.counter button:hover{filter:invert(1)}.counter span{font-size:clamp(1.1rem,2vw,1.4rem)}.modal{background-color:#414a55e6;background-color:var(--color-dark);display:flex;flex-direction:column;height:100%;position:absolute;right:0;top:0;width:min(48rem,100%);z-index:10}.modal>*{padding:max(1rem,2vw);&:not(&:last-child){border-bottom:1px solid #4b5460}}.modal-header{left:2rem;top:2rem}.modal-body{flex:1 1}.overlay{-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem);background-color:#414a5580;height:100%;left:0;position:fixed;top:0;width:100%}.cart{color:#f1f1f1;text-align:center}.cart>strong{font-size:clamp(1.2rem,2vw,2rem)}.cart-wrapper{margin-top:2rem}.cart .list li:hover{background-color:#767d8080;background-color:var(--color-gray)}.cart .list li strong{margin-inline:1rem}.cart .list li div{flex:1 1}.cart-total{color:#f1f1f1;font-size:clamp(1.2rem,1.8vw,1.8rem)}.cart-total .price{margin-left:1rem}.loader{align-items:center;border:16px solid #7777770d;box-shadow:0 0 5px #f1f1f1,inset 0 0 5px #d1d1d1;display:flex;height:100px;justify-content:center;left:50%;top:50%;transform:translate(-50%,-50%);width:100px}.dot,.loader,.shadow{border-radius:50%;position:absolute}.dot,.shadow{background-color:#ccc;height:16px;margin:40px;width:16px}.shadow:first-child{animation:orbit 1s .02s infinite}.shadow:nth-child(2){animation:orbit 1s .04s infinite}.shadow:nth-child(3){animation:orbit 1s .06s infinite}.dot{animation:orbit 1s infinite;background-color:#bbb;border-radius:50%;height:18px;position:absolute;width:18px}.loader-sm{border:8px solid #7777770d;height:40px;width:40px}.loader-sm .dot{animation:orbitSmall 1s infinite;height:10px;width:10px}.loader-sm .shadow{height:8px;width:8px}.loader-sm .shadow:first-child{animation:orbitSmall 1s .02s infinite}.loader-sm .shadow:nth-child(2){animation:orbitSmall 1s .04s infinite}.loader-sm .shadow:nth-child(3){animation:orbitSmall 1s .06s infinite}@keyframes orbit{0%{transform:rotate(0deg) translateX(42px) rotate(0deg)}to{transform:rotate(1turn) translateX(42px) rotate(-1turn)}}@keyframes orbitSmall{0%{transform:rotate(0deg) translateX(16px) rotate(0deg)}to{transform:rotate(1turn) translateX(16px) rotate(-1turn)}}@media (max-width:600px){.app{grid-template-columns:1fr}.app ul{grid-column:1/-1;grid-row:2/3;justify-content:center}.sidebar{grid-column:1/-1;grid-row:3/4;min-height:25rem}.details{grid-column:1/-1;grid-row:4/span 1}}
/*# sourceMappingURL=main.e6957751.css.map*/