*,*:before,*:after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0}ul[role=list],ol[role=list]{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1.1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font-family:inherit;font-size:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}body{background-color:#dec7f1;color:#fff;margin:0;font-family:fira sans,sans-serif}body h1,body h2,body h3{font-family:dynapuff,system-ui;letter-spacing:2px}.banner{background-image:url(/Uppgift-Hemmamys/img/Banner.jpg);background-size:cover;height:20rem;background-position:center;background-repeat:no-repeat}header{position:fixed;width:100%;background-color:#522969;padding:1rem}header nav{display:flex;justify-content:space-between;align-items:center;margin:0}header nav h1{margin:0;color:#eae6e6;font-family:dynapuff,system-ui}header nav #cartButton{background-color:#eae6e6;color:#000;padding:.8rem;border-radius:6px;border:none;cursor:pointer;transition:background-color .2s ease,transform .2s ease}header nav #cartButton:hover{background-color:#71b9c8;color:#2c2c2c}#cartSection{position:fixed;top:75px;right:0;width:100%;background-color:#71b9c8;color:#2c2c2c;padding:1rem;z-index:1000;border-radius:0 0 10px 10px;border:1px solid #eae6e6}#cartSection h2{color:#2c2c2c}#cartSection #cart{display:flex;flex-direction:column;gap:.8rem;padding-top:1rem}#cartSection .cart-item{display:grid;grid-template-columns:1fr auto auto auto;align-items:center;color:#2c2c2c;gap:.5rem}#cartSection .cart-name{font-weight:700}#cartSection .cart-controls{display:flex;align-items:center}#cartSection .cart-amount{width:3rem;text-align:center;font-family:fira code,sans-serif}#cartSection .cart-price{width:3rem;text-align:right;font-weight:700}#cartSection .increase-cart-product,#cartSection .decrease-cart-product{background-color:#eae6e6;color:#2c2c2c;border:none;padding:.3rem .5rem;border-radius:6px;cursor:pointer;transition:background-color .2s ease,transform .2s ease}#cartSection .increase-cart-product:hover,#cartSection .decrease-cart-product:hover{background-color:#522969;color:#eae6e6}#cartSection .delete-product{background-color:#eae6e6;color:#2c2c2c;border:none;padding:.3rem .5rem;border-radius:6px;cursor:pointer;transition:background-color .2s ease,transform .2s ease}#cartSection .delete-product:hover{background-color:#522969;color:#eae6e6}#cartSection .cart-total{margin-top:0;font-size:1.2rem;font-weight:700;text-align:right;padding:.8rem 0;border-bottom:#eae6e6 2px solid}#cartSection .checkoutBtn{margin:1rem auto 0;display:block;padding:.8rem;background-color:#eae6e6;color:#2c2c2c;border:none;border-radius:6px;font-size:1.1rem;cursor:pointer;transition:background-color .2s ease,transform .2s ease}#cartSection .checkoutBtn:hover{background-color:#522969;color:#eae6e6}#cartSection.hidden{display:none}.checkout-card{background-color:#73478a;border-radius:6px;padding:1rem;color:#eae6e6}.hidden,#checkoutSection.hidden{display:none}#checkoutSection{position:fixed;top:0;right:0;width:100%;height:100%;background-color:#dec7f1;padding:1rem;z-index:1001;overflow-y:auto}.checkout-card{max-width:600px;margin:0 auto;background-color:#73478a;border-radius:10px;padding:1rem;color:#eae6e6}.checkout-card h2{padding-bottom:1rem;text-align:center;font-family:dynapuff,system-ui;letter-spacing:1px}.checkout-card #backToCart{background-color:#eae6e6;color:#2c2c2c;border:none;padding:.6rem 1rem;border-radius:6px;cursor:pointer;margin-bottom:1rem;transition:background-color .2s ease}.checkout-card #backToCart:hover{background-color:#71b9c8;color:#2c2c2c}.checkout-card .cart-item{display:grid;grid-template-columns:1fr auto;align-items:left;color:#eae6e6;gap:.5rem;padding-top:1rem}.checkout-card .cart-name{font-weight:700}.checkout-card .cart-controls{display:flex;align-items:center}.checkout-card .cart-amount{width:3rem;text-align:center;font-family:fira code,sans-serif}.checkout-card .cart-price{width:3rem;text-align:right;font-weight:700}.checkout-card .increase-cart-product,.checkout-card .decrease-cart-product{background-color:#eae6e6;color:#2c2c2c;border:none;padding:.3rem .5rem;border-radius:6px;cursor:pointer;transition:background-color .2s ease,transform .2s ease}.checkout-card .increase-cart-product:hover,.checkout-card .decrease-cart-product:hover{background-color:#522969;color:#eae6e6}.checkout-card .delete-product{background-color:#eae6e6;color:#2c2c2c;border:none;padding:.3rem .5rem;border-radius:6px;cursor:pointer;transition:background-color .2s ease,transform .2s ease}.checkout-card .delete-product:hover{background-color:#522969;color:#eae6e6}.checkout-card .cart-total{margin-top:0;font-size:1.2rem;font-weight:700;text-align:right;padding:.8rem 0;border-bottom:#eae6e6 2px solid}.checkout-card #checkoutTotal{text-align:right;font-size:1.3rem;font-weight:700;margin-bottom:2rem;border-bottom:2px solid #eae6e6;padding-bottom:.5rem}#checkoutForm{display:flex;flex-direction:column;gap:1.5rem}#checkoutForm .form-group{display:flex;flex-direction:column}#checkoutForm .form-group label{color:#eae6e6;font-weight:700;margin-bottom:.3rem}#checkoutForm .form-group input{padding:.6rem;border-radius:6px;border:none;background-color:#eae6e6;color:#2c2c2c;font-size:1rem;transition:box-shadow .2s ease}#checkoutForm .form-group input:focus{outline:none;box-shadow:0 0 0 3px #71b9c8}#checkoutForm .form-group span.error{margin-top:.3rem;padding:.4rem;border-left:4px solid red;border-radius:4px;color:red;font-weight:700}#checkoutForm fieldset{border:1px solid #eae6e6;padding:1rem;border-radius:6px}#checkoutForm fieldset legend{padding:0 .5rem;color:#eae6e6;font-weight:700}#checkoutForm fieldset label{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}#checkoutForm #orderBtn{background-color:#eae6e6;color:#2c2c2c;border:none;padding:.8rem;border-radius:6px;font-size:1.1rem;cursor:pointer;transition:background-color .2s ease}#checkoutForm #orderBtn:hover:not(:disabled){background-color:#71b9c8}#checkoutForm #orderBtn:disabled{opacity:.5;cursor:not-allowed}#checkoutForm #resetOrder{background-color:transparent;color:#eae6e6;border:1px solid #eae6e6;padding:.6rem;border-radius:6px;cursor:pointer;transition:background-color .2s ease}#checkoutForm #resetOrder:hover{background-color:#71b9c8;color:#2c2c2c}#ssnContainer,#ssnContainer.hidden{display:none}.sort{display:grid;grid-template-columns:1fr;gap:1rem;padding:1rem}.sort .left,.sort .right{border:#ffffff 1px solid;border-radius:10px;padding:1rem}.sort .left h2,.sort .right h2{padding-bottom:1rem;margin-top:0;color:#522969}.sort .left .button,.sort .right .button{display:flex;flex-direction:row;justify-content:space-around}.sort .left .button button,.sort .right .button button{background-color:#522969;color:#eae6e6;padding:.8rem;border-radius:6px;border:none;cursor:pointer;transition:background-color .2s ease,transform .2s ease}.sort .left .button button:hover,.sort .right .button button:hover{background-color:#71b9c8;color:#2c2c2c}.products-list{display:grid;grid-template-columns:1fr;margin:1rem;gap:1rem}.products-list article{border-radius:8px;background-color:#73478a;padding:1rem;margin-bottom:1rem;display:flex;flex-direction:column}.products-list img{width:100%;max-height:200px;object-fit:cover;border-radius:8px;border:#ffffff 2px solid}.products-list .product-header h3{color:#eae6e6;font-size:1.5rem}.products-list .metadata p{color:#eae6e6;font-size:1rem;text-align:left}.products-list .amount-label{color:#eae6e6;display:block;padding-bottom:.3rem;padding-top:1rem}.products-list .control-container{display:flex;justify-content:center;align-items:center;gap:.5rem}.products-list .controls button{background-color:#522969;color:#eae6e6;border:none;padding:.5rem .9rem;font-size:1.2rem;border-radius:6px;cursor:pointer;transition:background-color .2s ease,transform .2s ease}.products-list .controls button:hover{background-color:#71b9c8;color:#2c2c2c}.products-list .controls input{width:100%;padding:.6rem;border-radius:6px;border:none;background-color:#eae6e6;color:#2c2c2c}.products-list .buy{background-color:#eae6e6;color:#2c2c2c;border:none;padding:.6rem;font-size:1rem;border-radius:6px;cursor:pointer;transition:background-color .2s ease,transform .2s ease;width:100px;margin-top:1rem;margin:1rem auto 0}.products-list .buy:hover{background-color:#71b9c8}.cart-total{transition:all .2s ease-in-out}.highlight-price{color:green}.footer{display:flex;flex-direction:column;text-align:center;gap:1.5rem;font-family:fira code,sans-serif;font-size:.8rem;color:#522969;border-top:#eae6e6 2px solid;padding-top:1rem;padding-bottom:1rem;margin:1rem}@media screen and (min-width:400px){#cartSection .increase-cart-product,#cartSection .decrease-cart-product,#cartSection .delete-product{padding:.5rem .8rem}#cartSection .cart-amount,#cartSection .cart-price{width:4rem}.checkout-card .cart-item{grid-template-columns:1fr auto auto auto}}@media screen and (min-width:640px){.banner{height:25rem}#cartSection{width:450px}.checkout-card .increase-cart-product,.checkout-card .decrease-cart-product,.checkout-card .delete-product{padding:.5rem .8rem}.checkout-card .cart-amount,.checkout-card .cart-price{width:4rem}.sort{grid-template-columns:1fr 1fr;justify-items:center;gap:1rem}.sort .left,.sort .right{width:100%}.products-list{grid-template-columns:repeat(2,1fr)}.products-list img{max-height:300px}.footer{flex-direction:row;text-align:left;justify-content:space-between}.footer .footer-left{text-align:left}.footer .footer-center{text-align:center}.footer .footer-right{text-align:right}}@media screen and (min-width:1024px){.banner{height:30rem}.sort{max-width:1000px;margin-left:auto}.sort .left,.sort .right{width:100%}.products-list{grid-template-columns:repeat(3,1fr)}}@media screen and (min-width:1400px){.products-list{grid-template-columns:repeat(4,1fr)}}
