:root{--clr-primary-1: hsl(22, 28%, 21%);--clr-primary-2: hsl(22, 28%, 29%);--clr-primary-3: hsl(22, 28%, 37%);--clr-primary-4: hsl(22, 28%, 45%);--clr-primary-5: hsl(22, 31%, 52%);--clr-primary-6: hsl(22, 31%, 60%);--clr-primary-7: hsl(22, 31%, 67%);--clr-primary-8: hsl(20, 31%, 74%);--clr-primary-9: hsl(22, 31%, 81%);--clr-primary-10: hsl(22, 31%, 88%);--clr-grey-1: hsl(209, 61%, 16%);--clr-grey-2: hsl(211, 39%, 23%);--clr-grey-3: hsl(209, 34%, 30%);--clr-grey-4: hsl(209, 28%, 39%);--clr-grey-5: hsl(210, 22%, 49%);--clr-grey-6: hsl(209, 23%, 60%);--clr-grey-7: hsl(211, 27%, 70%);--clr-grey-8: hsl(210, 31%, 80%);--clr-grey-9: hsl(212, 33%, 89%);--clr-grey-10: hsl(210, 36%, 96%);--clr-white: #fff;--clr-red-dark: hsl(360, 67%, 44%);--clr-red-light: hsl(360, 71%, 66%);--clr-green-dark: hsl(125, 67%, 44%);--clr-green-light: hsl(125, 71%, 66%);--clr-black: #222;--transition: all .3s linear;--spacing: .1rem;--radius: .25rem;--light-shadow: 0 5px 15px rgba(0, 0, 0, .1);--dark-shadow: 0 5px 15px rgba(0, 0, 0, .2);--max-width: 1170px;--fixed-width: 620px}*,:after,:before{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;background:var(--clr-white);color:var(--clr-grey-1);line-height:1.5;font-size:.875rem}ul{list-style-type:none}a{text-decoration:none}hr{border:none;border-top:1px solid var(--clr-grey-8)}h1,h2,h3,h4,h5{letter-spacing:var(--spacing);text-transform:capitalize;line-height:1.25;margin-bottom:.75rem}h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.5rem}h4{font-size:1.25rem}h5{font-size:.875rem}p{margin-bottom:1.25rem;color:var(--clr-grey-3)}@media screen and (min-width:800px){h1{font-size:3rem}h2{font-size:2.5rem}h3{font-size:2rem}h4{font-size:1.5rem}h5,body{font-size:1rem}h1,h2,h3,h4{line-height:1}}.section{padding:5rem 0}.section-center{width:90vw;margin:0 auto;max-width:var(--max-width)}@media screen and (min-width:992px){.section-center{width:95vw}}.text-center{text-align:center}@keyframes spinner{to{transform:rotate(360deg)}}.loading{width:6rem;height:6rem;margin:0 auto;margin-top:10rem;border-radius:50%;border:4px solid #ccc;border-top-color:var(--clr-primary-5);animation:spinner .6s linear infinite}.btn{text-transform:uppercase;background:var(--clr-primary-5);color:var(--clr-primary-10);padding:.375rem .75rem;letter-spacing:var(--spacing);display:inline-block;font-weight:400;transition:var(--transition);font-size:.875rem;cursor:pointer;box-shadow:0 1px 3px #0003;border-radius:var(--radius);border-color:transparent}.btn:hover{color:var(--clr-primary-1);background:var(--clr-primary-7)}.title{text-align:center}.title .underline{width:6rem;height:.25rem;background:#49a6e9;background:var(--clr-primary-5);margin-left:auto;margin-right:auto}.page-100{min-height:calc(100vh - 8rem);padding:5rem 0}.page{min-height:calc(100vh - (20vh + 10rem))}.contact{padding:5rem 0;margin:0}.contact h3{text-transform:none}.contact p{line-height:2;max-width:45em;color:var(--clr-grey-5)}.contact .contact-form{width:90vw;max-width:500px;display:grid;grid-template-columns:1fr auto}.contact .form-input{font-size:1rem;padding:.5rem;border:2px solid var(--clr-black)}.submit-btn{font-size:1rem;padding:.5rem 1rem;border:2px solid var(--clr-black)}.contact .form-input{border-right:none;color:var(--clr-grey-3);border-top-left-radius:var(--radius);border-bottom-left-radius:var(--radius)}.contact .submit-btn{border-top-right-radius:var(--radius);border-bottom-right-radius:var(--radius)}.contact .form-input::placeholder{color:var(--clr-black);text-transform:capitalize}.contact .submit-btn{background:var(--clr-primary-5);text-transform:capitalize;letter-spacing:var(--spacing);cursor:pointer;transition:var(--transition);color:var(--clr-black)}.contact .submit-btn:hover{color:var(--clr-white)}@media(min-width:992px){.contact .content{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:8rem;margin-top:2rem}.contact .content p{margin-bottom:0}}@media(min-width:1280px){.contact{padding:15rem 0}}.featured-products{padding:5rem 0;background:var(--clr-grey-10)}.featured-products .featured{margin:4rem auto;display:grid;gap:2.5rem}.featured-products .featured img{height:225px}.featured-products .btn{display:block;width:148px;margin:0 auto;text-align:center}@media(min-width:576px){.featured-products .featured{grid-template-columns:repeat(auto-fit,minmax(360px,1fr))}}.footer{height:3rem;position:relative;display:flex;justify-content:center;align-items:center;background:var(--clr-black);text-align:center;width:100%}.footer span{color:var(--clr-primary-5)}.footer h5{color:var(--clr-white);margin:.1rem;font-weight:400;text-transform:none;line-height:1.25}@media(min-width:776px){.footer{flex-direction:row}}.hero .section-center{min-height:60vh;display:grid;place-items:center}.hero .img-container{display:none}.hero .section-center p{line-height:2;max-width:45em;margin-bottom:2rem;color:var(--clr-grey-5);font-size:1rem}@media(min-width:992px){.hero .section-center{height:calc(100vh - 5rem);grid-template-columns:1fr 1fr;gap:8rem}.hero .section-center h1{margin-bottom:2rem}.hero .section-center p{font-size:1.25rem}.hero .hero-btn{padding:.75rem 1.5rem;font-size:1rem}.hero .img-container{display:block;position:relative}.hero .main-img{width:100%;height:550px;position:relative;border-radius:var(--radius);display:block;object-fit:cover}.hero .accent-img{position:absolute;bottom:0;left:0;width:250px;transform:translate(-50%);border-radius:var(--radius)}.hero .img-container:before{content:"";position:absolute;width:10%;height:80%;background:var(--clr-primary-9);bottom:0%;left:-8%;border-radius:var(--radius)}}.services{padding:5rem 0;background:var(--clr-primary-10)}.services h3,h4{color:var(--clr-primary-1)}.services .header h3{margin-bottom:2rem}.services .header p{margin-bottom:0;line-height:1.8;color:var(--clr-primary-3)}.services .services-center{margin-top:4rem;display:grid;gap:2.5rem}.service{background:var(--clr-primary-7);text-align:center;padding:2.5rem 2rem;border-radius:var(--radius)}.service p{color:var(--clr-primary-2)}.service span{width:4rem;height:4rem;display:grid;margin:0 auto;place-items:center;margin-bottom:1rem;border-radius:50%;background:var(--clr-primary-10);color:var(--clr-primary-1)}.service span svg{font-size:2rem}@media(min-width:992px){.services .header{display:grid;grid-template-columns:1fr 1fr}}@media(min-width:576px){.services .services-center{grid-template-columns:repeat(auto-fit,minmax(360px,1fr))}}@media(min-width:1280px){.services{padding:0}.services .section-center{transform:translateY(5rem)}}nav{height:5rem;display:flex;align-items:center;justify-content:center}.nav-center{width:90vw;margin:0 auto;max-width:var(--max-width)}.nav-header{display:flex;align-items:center;justify-content:space-between}.nav-header img{width:175px;margin-left:-15px}.nav-toggle{background:transparent;border:transparent;color:var(--clr-primary-5);cursor:pointer}.nav-toggle svg{font-size:2rem}.nav-links,.cart-btn-wrapper{display:none}@media(min-width:992px){.nav-toggle{display:none}.nav-center{display:grid;grid-template-columns:auto 1fr auto;align-items:center}.nav-links{display:flex;justify-content:center}.nav-links li{margin:0 .5rem}.nav-links a{color:var(--clr-grey-3);font-size:1rem;text-transform:capitalize;letter-spacing:var(--spacing);padding:.5rem}.nav-links a:hover{border-bottom:2px solid var(--clr-primary-7)}.cart-btn-wrapper{display:grid}}.cart-btn-wrapper{display:grid;grid-template-columns:1fr 1fr;align-items:center;width:225px}.cart-btn{font-size:1.5rem;letter-spacing:var(--spacing);color:var(--clr-grey-1);display:flex;align-items:center}.cart-container{display:flex;align-items:center;position:relative}.cart-container svg{height:1.6rem;margin-left:5px}.cart-value{position:absolute;top:-10px;right:-16px;background:var(--clr-primary-5);width:16px;height:16px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:.75rem;color:var(--clr-white);padding:12px}.auth-btn{display:flex;align-items:center;background:transparent;border-color:transparent;font-size:1.5rem;cursor:pointer;color:var(--clr-grey-1);letter-spacing:var(--spacing)}.auth-btn svg{margin-left:5px}.sidebar-container{text-align:center}.sidebar-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem}.close-btn{font-size:2rem;background:transparent;border-color:transparent;color:var(--clr-primary-5);transition:var(--transition);cursor:pointer;color:var(--clr-red-dark);margin-top:.2rem}.close-btn:hover{color:var(--clr-red-light)}.logo{justify-self:center;height:45px}.links{margin-bottom:2rem}.links a{display:block;text-align:left;font-size:1rem;text-transform:capitalize;padding:1rem 1.5rem;color:var(--clr-grey-3);transition:var(--transition);letter-spacing:var(--spacing)}.links a:hover{padding:1rem 1.5rem 1rem 2rem;background:var(--clr-grey-10);color:var(--clr-grey-2)}.sidebar{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--clr-white);transition:var(--transition);transform:translate(-100%);z-index:-1}.show-sidebar{transform:translate(0);z-index:999}.cart-btn-wrapper{margin:2rem auto}@media screen and (min-width:992px){.sidebar{display:none}}.signupScreen{max-width:450px;padding:70px;margin-left:auto;margin-right:auto;background:#000000d9;margin-top:4rem;border-radius:5px}.login-form>h1{text-align:left;margin-bottom:25px;color:#fff;font-size:32px;font-weight:500}.login-form{display:grid;flex-direction:column}.inputfield{outline-width:0;height:40px;margin-bottom:14px;border-radius:5px;border:none;padding:5px 15px}.login-form>button{padding:16px 20px;font-size:1rem;color:#fff;border-radius:5px;background-color:#795744;font-weight:600;border:none;cursor:pointer;margin-top:20px}.text-container{color:#737373;margin-top:1rem}.text-container>span{color:#fff}.error-container .message-container{margin-bottom:1em;padding:.4em .2em}.error-container .message-container p{margin-left:.5em;text-align:left;font-weight:500;padding:0;margin-bottom:0}.error-container .error{border:1px solid #d9534f;border-left:2.5px solid #d9534f;background-color:#d9534f1a}.error-container .error p{color:#d9534f}.error-container .success{border:1px solid #2b542c;border-left:4px solid #2b542c;background-color:#2b542c1a}.error-container .success p{color:#2b542c}.error-container .validation{border:1px solid #f0ad4e;border-left:4px solid #f0ad4e;background-color:#f0ad4e1a;color:#f0ad4e}.error-container .validation p{color:#f0ad4e}.registerScreen{max-width:450px;padding:70px;margin-left:auto;margin-right:auto;background:#000000d9;margin-top:4rem;border-radius:5px}.register-form>h1{text-align:left;margin-bottom:25px;color:#fff;font-size:32px;font-weight:500}.register-form{display:grid;flex-direction:column}.register-form>button{padding:16px 20px;font-size:1rem;color:#fff;border-radius:5px;background-color:#795744;font-weight:600;border:none;cursor:pointer;margin-top:20px}.page-hero{background:var(--clr-primary-10);width:100%;min-height:16vh;display:flex;align-items:center;color:var(--clr-primary-1)}.page-hero a{color:var(--clr-primary-3);padding:.5rem;transition:var(--transition)}.page-hero a:hover{color:var(--clr-primary-1)}.about{display:grid;gap:4rem}.about img{width:100%;display:block;border-radius:var(--radius);height:500px;object-fit:cover}.about p{line-height:2;max-width:45em;margin:0 auto;margin-top:2rem;color:var(--clr-grey-5)}.about .title{text-align:left}.about .underline{margin-left:0}@media(min-width:992px){.about{grid-template-columns:1fr 1fr}}.page-100{background:var(--clr-primary-10);display:flex;justify-content:center;align-items:center;text-align:center}.page-100 h1{font-size:10rem}.page-100 h3{text-transform:none;margin-bottom:2rem}.product-center{display:grid;gap:4rem;margin-top:2rem}.price{color:var(--clr-primary-5)}.desc{line-height:2;max-width:45em}.info{text-transform:capitalize;width:300px;display:grid;grid-template-columns:125px 1fr}.info span{font-weight:700}@media(min-width:992px){.product-center{grid-template-columns:1fr 1fr;align-items:center}.price{font-size:1.25rem}}.product-images .main{height:600px}.product-images img{width:100%;display:block;border-radius:var(--radius);object-fit:cover}.product-images .gallery{margin-top:1rem;display:grid;grid-template-columns:repeat(5,1fr);column-gap:1rem}.product-images .gallery img{height:100px;cursor:pointer}.active{border:2px solid var(--clr-primary-5)}.stars{display:flex;align-items:center;margin-bottom:.5rem}.stars span{color:#ffb900;font-size:1rem;margin-right:.25rem}.reviews p{margin-left:.5rem;margin-bottom:0}.addtocart{margin-top:2rem}.addtocart .colors{display:grid;grid-template-columns:125px 1fr;-webkit-box-align:center;align-items:center;margin-bottom:1rem}.addtocart .colors span{text-transform:capitalize;font-weight:700}.addtocart .colors div{display:flex}.addtocart .color-btn{display:inline-block;width:1.5rem;height:1.5rem;border-radius:50%;background:#222;margin-right:.5rem;border:none;cursor:pointer;opacity:.5;display:flex;align-items:center;justify-content:center}.addtocart .color-btn svg{font-size:.75rem;color:var(--clr-white)}.addtocart .active{opacity:1}.addtocart .btn-container{margin-top:2rem}.amount-btns{display:grid;width:140px;place-items:center;grid-template-columns:repeat(3,1fr);-webkit-box-align:center}.amount-btns button{background:transparent;border-color:transparent;cursor:pointer;padding:1rem 0px;width:2rem;height:1rem;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center}.amount-btns h2{margin-bottom:0}.cart-screen .empty{text-align:center}.cart-screen .empty h2{margin-bottom:1rem;text-transform:none}.cart-content .link-container{display:flex;justify-content:space-between;margin-top:2rem}.cart-content .link-btn{background:transparent;border-color:transparent;text-transform:capitalize;padding:.25rem .5rem;background:var(--clr-primary-5);color:var(--clr-white);border-radius:var(--radius);letter-spacing:var(--spacing);font-weight:400;cursor:pointer}.cart-content.clear-btn{background:var(--clr-black)}.cart-item{display:grid;grid-template-columns:200px auto auto;grid-template-rows:75px;gap:3rem 1rem;justify-items:center;margin-bottom:3rem;align-items:center}.cart-item .subtotal,.cart-item .price{display:none}.cart-item .title{grid-template-rows:75px;display:grid;grid-template-columns:75px 125px;align-items:center;text-align:left;gap:1rem}.cart-item img{width:100%;height:100%;display:block;border-radius:var(--radius);object-fit:cover}.cart-item h5{font-size:.75rem;margin-bottom:0}.cart-item .color{color:var(--clr-grey-5);font-size:.75rem;letter-spacing:var(--spacing);text-transform:capitalize;margin-bottom:0;display:flex;align-items:center;justify-content:flex-start}.cart-item .color span{display:inline-block;width:.5rem;height:.5rem;background:red;margin-left:.5rem;margin-top:.2rem;border-radius:var(--radius)}.cart-item .price-small{color:var(--clr-primary-5)}.cart-item .amount-btns{width:75px}.cart-item .amount-btns button{width:1rem;height:.5rem;font-size:.75rem}.cart-item .amount-btns h2{font-size:1rem}.cart-item .remove-btn{color:var(--clr-white);background:transparent;border:transparent;letter-spacing:var(--spacing);background:var(--clr-red-dark);width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;border-radius:var(--radius);font-size:.75rem;cursor:pointer}@media(min-width:776px){.cart-item{grid-template-columns:1fr 1fr 1fr 1fr auto;align-items:center;grid-template-rows:75px}.cart-item .subtotal{display:block;margin-bottom:0;color:var(--clr-grey-5);font-weight:400;font-size:1rem}.cart-item .price-small{display:none}.cart-item .price{display:block;font-size:1rem;color:var(--clr-primary-5);font-weight:400}.cart-item .name,.cart-item .color{font-size:.85rem}.cart-item .color span{margin-top:.4em;width:.75rem;height:.75rem}.cart-item img{height:100%}.cart-item .title{height:100%;display:grid;grid-template-columns:100px 200px;align-items:center;gap:1rem;text-align:left}}.cart-screen .link-container{display:flex;justify-content:space-between;margin-top:2rem}.cart-screen .link-btn{background:transparent;border-color:transparent;text-transform:capitalize;padding:.25rem .5rem;background:var(--clr-primary-5);color:var(--clr-white);border-radius:var(--radius);letter-spacing:var(--spacing);font-weight:400;cursor:pointer}.cart-screen .clear-btn{background:var(--clr-black)}.cart-columns{display:none}@media(min-width:776px){.cart-columns{display:block}.cart-columns .content{display:grid;grid-template-columns:316px 1fr 1fr 1fr auto;justify-items:center;column-gap:1rem}.cart-columns .content h5{color:var(--clr-grey-5);font-weight:400}.cart-columns span{width:2rem;height:2rem}.cart-columns hr{margin-top:1rem;margin-bottom:3rem}}.cart-totals{margin-top:3rem;display:flex;justify-content:center}.cart-totals article{border:1px solid var(--clr-grey-8);border-radius:var(--radius);padding:1.5rem 3rem}.cart-totals h4,.cart-totals h5,.cart-totals p{display:grid;grid-template-columns:200px 1fr}.cart-totals p{text-transform:capitalize}.cart-totals h4{margin-top:2rem;color:var(--clr-grey-1)}@media(min-width:776px){.cart-totals{justify-content:flex-end}.cart-totals .btn{width:100%;margin-top:1rem;text-align:center;font-weight:700}}.product-lists .products{display:grid;gap:3rem 1.5rem;margin:4rem auto}@media(min-width:768px){.product-lists .products{grid-template-columns:200px 1fr}}.filters .form-control{margin-bottom:1.25rem}.filters .form-control h5{margin-bottom:.5rem}.filters .form-control .search-input{padding:.5rem;background:var(--clr-grey-10);border-radius:var(--radius);border-color:transparent;letter-spacing:var(--spacing)}.filters .form-control .search-input::placeholder{text-transform:capitalize}.filters button{display:block;margin:.25em 0;padding:.25rem 0;text-transform:capitalize;background:transparent;border:none;border-bottom:1px solid transparent;letter-spacing:var(--spacing);color:var(--clr-grey-5);cursor:pointer}.filters .form-control .active{border-color:var(--clr-grey-5)}.filters .form-control .company{background:var(--clr-grey-10);border-radius:var(--radius);border-color:transparent;padding:.25rem}.filters .form-control .colors{display:flex;align-items:center}.filters .form-control .color-btn{display:inline-block;width:1rem;height:1rem;border-radius:50%;background:#222;margin-right:.5rem;border:none;cursor:pointer;opacity:.5;display:flex;align-items:center;justify-content:center}.filters .form-control .color-btn svg{font-size:.5rem;color:var(--clr-white)}.filters .form-control .all-btn{display:flex;align-items:center;justify-content:center;margin-right:.5rem;opacity:.5}.filters .form-control .active{opacity:1}.filters .form-control .all-btn .active{text-decoration:underline}.filters .form-control .price{margin-bottom:.25rem}.filters .shipping{display:grid;grid-template-columns:auto 1fr;align-items:center;text-transform:capitalize;column-gap:.5rem;font-size:1rem}.filters .clear-btn{background:var(--clr-red-dark);color:var(--clr-white);padding:.25rem .5rem;border-radius:var(--radius)}@media(min-width:768px){.filters.content{position:sticky;top:1rem}}.sort{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;margin-bottom:2rem;column-gap:2rem}@media(max-width:576px){.sort{display:grid;grid-template-columns:1fr;row-gap:.75rem}.sort .btn-container{width:50px}.sort label{display:inline-block;margin-right:.5rem}}@media(min-width:768px){.sort{column-gap:2rem}}.sort p{text-transform:capitalize;margin-bottom:0}.sort .btn-container{display:grid;grid-template-columns:1fr 1fr;column-gap:.5rem}.sort .btn-container button{background:transparent;border:1px solid var(--clr-black);color:var(--clr-black);width:1.5rem;border-radius:var(--radius);height:1.5rem;display:flex;align-items:center;justify-content:center;cursor:pointer}.sort .btn-container button svg{font-size:1rem}.sort .btn-container .active{background:var(--clr-black);color:var(--clr-white)}.sort .sort-input{border-color:transparent;font-size:1rem;text-transform:capitalize;padding:.25rem .5rem}.sort label{font-size:1rem;text-transform:capitalize}.product-container .container{position:relative;background:var(--clr-black);border-radius:var(--radius)}.product-container .container img{width:100%;display:block;object-fit:cover;border-radius:var(--radius);transition:var(--transition)}.product-container .container .link{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--clr-primary-5);display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:50%;transition:var(--transition);opacity:0;cursor:pointer}.product-container .container .link svg{font-size:1.25rem;color:var(--clr-white)}.product-container .container:hover img{opacity:.5}.product-container .container:hover .link{opacity:1}.product-container footer{margin-top:1rem;display:flex;justify-content:space-between;align-items:center}.product-container footer h5,footer p{margin-bottom:0;font-weight:400}.product-container footer p{color:var(--clr-primary-5);letter-spacing:var(--spacing)}.grid-view img{height:175px}.grid-view .products-container{display:grid;gap:2rem 1.5rem}@media(min-width:992px){.grid-view .products-container{grid-template-columns:repeat(2,1fr)}}@media(min-width:1170px){.grid-view .products-container{grid-template-columns:repeat(3,1fr)}}.list-view{display:grid;row-gap:3rem}.list-view img{width:100%;display:block;width:300px;height:200px;object-fit:cover;border-radius:var(--radius);margin-bottom:1rem}.list-view h4{margin-bottom:.5rem}.list-view .price{color:var(--clr-primary-6);margin-bottom:.75rem}.list-view p{max-width:45em;margin-bottom:1rem}.list-view .btn{font-size:.5rem;padding:.25rem .5rem}@media(min-width:992px){.list-view article{display:grid;grid-template-columns:auto 1fr;column-gap:2rem;align-items:center}}.checkout-screen{display:flex;align-items:center;justify-content:center;flex-direction:column}.checkout-screen .empty{text-align:center;margin-top:120px}.wip{display:flex;flex-direction:column;justify-content:center;align-items:center}.wip svg{margin:2rem auto;font-size:4rem}