@font-face{font-family:"redHatText";src:url("../../assets/fonts/RedHatText-VariableFont_wght.ttf")}*{margin:0;padding:0;box-sizing:border-box}html{font-size:62.5%;scroll-behavior:smooth}body{font-size:1.6rem;font-family:"redHatText",sans-serif}body{background-color:hsl(20,50%,98%);padding:3rem 0}header h1{font-size:4rem;color:hsl(14,65%,9%);margin-bottom:3rem;padding-left:2rem}.under{z-index:2}.selected,.products #box div img:active,.products #box div img:hover{border:2px solid hsl(14,86%,42%)}.products{padding:0 2rem;transition:1s ease-in-out}.products #box{max-width:40rem;margin-bottom:1rem}.products #box div{margin-bottom:3rem;height:-moz-fit-content;height:fit-content;position:relative}.products #box div img{width:100%;border-radius:1rem}.products #box div button{position:absolute;left:50%;bottom:0;cursor:pointer;transform:translateY(2rem) translateX(-50%)}.products #box div button img:active,.products #box div button img:hover{border:none}.products #box div .cart,.products #box div .order-qty{height:5rem;width:18rem;max-width:20rem;font-size:1.6rem;color:hsl(14,65%,9%);font-weight:600;display:flex;align-items:center;justify-content:center;background-color:hsl(20,50%,98%);border:.1rem solid hsl(7,20%,60%);border-radius:3rem;gap:.5rem}.products #box div .cart:active,.products #box div .order-qty:active,.products #box div .cart:hover,.products #box div .order-qty:hover{border:2px solid hsl(7,20%,60%)}.products #box div .cart img,.products #box div .order-qty img{margin:0;width:2.5rem}.products #box div .order-qty{background-color:hsl(14,86%,42%);color:hsl(20,50%,98%);flex-direction:row-reverse;padding:0 1.2rem;justify-content:space-between;font-size:1.8rem}.products #box div .order-qty div{width:2.5rem;height:2.5rem;display:grid;place-content:center;border:.1rem solid hsl(20,50%,98%);border-radius:50%;margin:0;cursor:pointer;transition:1s ease}.products #box div .order-qty div:hover,.products #box div .order-qty div:active{background-color:hsl(20,50%,98%)}.products #box div .order-qty div:hover img,.products #box div .order-qty div:active img{filter:invert(24%) sepia(91%) saturate(3419%) hue-rotate(358deg) brightness(50%) contrast(93%)}.products #box div .order-qty div img{transition:1s ease;width:1.5rem}.products #box .desc{margin-bottom:2rem}.products #box .category{color:hsl(7,20%,60%);line-height:1.9}.products #box .products{color:hsl(14,65%,9%)}.products #box .price{color:hsl(14,86%,42%);font-weight:700}.products #box .price::before{content:"$";padding-right:.2rem}.checkout,.checkout .order,.checkout .total{max-width:45rem;transition:1s ease-in-out;background-color:hsl(20,50%,98%);display:flex;width:100%;margin:auto;align-items:center;padding:3rem 4rem 6rem 4rem;flex-direction:column}.checkout h2,.checkout .order h2,.checkout .total h2{align-self:flex-start;text-transform:capitalize;color:hsl(14,86%,42%);margin-bottom:1.5rem}.checkout .order,.checkout .total{padding:0;margin-bottom:2rem;flex-direction:row;width:100%;justify-content:space-between}.checkout .order div:has(img),.checkout .total div:has(img){border:2px solid hsl(14,25%,72%);width:2.5rem;height:2.5rem;border-radius:50%;display:grid;place-content:center;cursor:pointer;transition:1s ease}.checkout .order div:has(img):hover,.checkout .total div:has(img):hover{border:2px solid hsl(14,65%,9%)}.checkout .order div:has(img):hover img,.checkout .total div:has(img):hover img{filter:invert(24%) sepia(91%) saturate(3419%) hue-rotate(358deg) brightness(20%) contrast(93%)}.checkout .order img,.checkout .total img{width:1.5rem;transition:1s ease}.checkout .order div:has(p) .order-qty,.checkout .total div:has(p) .order-qty{color:hsl(14,86%,42%);margin-right:1.5rem}.checkout .order div:has(p) p:first-child,.checkout .total div:has(p) p:first-child{color:hsl(14,65%,9%);margin-bottom:.5rem}.checkout .order div:has(p) .price-per-order,.checkout .total div:has(p) .price-per-order{margin-right:1rem;color:hsl(12,20%,44%);font-weight:600}.checkout .order div:has(p) .order-price-total,.checkout .total div:has(p) .order-price-total{color:hsl(7,20%,60%)}.checkout .total{font-size:3rem;margin-bottom:4rem}.checkout .total p{font-size:1.6rem;color:hsl(12,20%,44%)}.checkout .total p strong .order-total{color:hsl(14,65%,9%)}.checkout .checkout-msg{display:flex;align-items:center;gap:.5em;color:hsl(14,65%,9%);font-weight:600;margin-bottom:4rem}.checkout .checkout-msg img{width:2.5rem}.checkout button,.checkout .order button,.checkout .total button{background-color:hsl(14,86%,42%);border:none;color:hsl(20,50%,98%);padding:2rem 7rem;font-size:2rem;text-transform:capitalize;font-weight:600;cursor:pointer;transition:1s ease;border-radius:4rem}.checkout button:hover,.checkout button:active{background-color:hsl(14,65%,9%)}.order-confirmed{padding:3rem 2rem 3rem 2rem;width:100%;max-width:45rem;border-radius:1rem 1rem 0 0;position:sticky;z-index:99;bottom:0;border:.2rem solid hsl(13,31%,94%);background-color:#f5f5f5}.order-confirmed .order-highlight{background-color:hsl(13,31%,94%);padding:2.5rem;margin-bottom:3rem;border-radius:1rem}.order-confirmed .order-highlight .total{display:flex;justify-content:space-between;align-items:center}.order-confirmed .order-highlight .total p{font-weight:600;color:hsl(7,20%,60%)}.order-confirmed .order-highlight .total strong{font-size:3rem}.order-confirmed img{align-self:flex-start;margin-bottom:2rem}.order-confirmed h2{font-size:4.8rem;width:25rem;margin-bottom:.5rem;color:hsl(14,65%,9%)}.order-confirmed .order-msg{align-self:flex-start;font-size:1.8rem;color:hsl(7,20%,60%);margin-bottom:4rem}.order-confirmed .order img,.order-confirmed .checkout .total img,.checkout .order-confirmed .total img{margin:0}.order-confirmed .order,.order-confirmed .checkout .total,.checkout .order-confirmed .total{justify-content:space-between;padding:0}.order-confirmed .order div:has(img),.order-confirmed .checkout .total div:has(img),.checkout .order-confirmed .total div:has(img){width:6rem;border:none}.order-confirmed .order div:has(img):hover img,.order-confirmed .checkout .total div:has(img):hover img,.checkout .order-confirmed .total div:has(img):hover img,.order-confirmed .order div:has(img):active img,.order-confirmed .checkout .total div:has(img):active img,.checkout .order-confirmed .total div:has(img):active img{filter:none}.order-confirmed .order div:has(img) img,.order-confirmed .checkout .total div:has(img) img,.checkout .order-confirmed .total div:has(img) img{width:100%;border-radius:.4rem;height:100%}.order-confirmed .order .confirmed-item,.order-confirmed .checkout .total .confirmed-item,.checkout .order-confirmed .total .confirmed-item{display:flex;width:100%;justify-content:space-between;border-bottom:2px solid hsl(14,25%,72%);padding-bottom:1rem;align-items:center;margin-bottom:1rem}.order-confirmed .order .confirmed-item .checkout-items p:nth-of-type(2),.order-confirmed .checkout .total .confirmed-item .checkout-items p:nth-of-type(2),.checkout .order-confirmed .total .confirmed-item .checkout-items p:nth-of-type(2){color:hsl(12,20%,44%)}.order-confirmed .order .confirmed-item .checkout-items p:nth-of-type(2) .order-qty,.order-confirmed .checkout .total .confirmed-item .checkout-items p:nth-of-type(2) .order-qty,.checkout .order-confirmed .total .confirmed-item .checkout-items p:nth-of-type(2) .order-qty{color:hsl(14,86%,42%)}.order-confirmed .order .confirmed-item .checkout-items p:nth-of-type(2) .price-per-order,.order-confirmed .checkout .total .confirmed-item .checkout-items p:nth-of-type(2) .price-per-order,.checkout .order-confirmed .total .confirmed-item .checkout-items p:nth-of-type(2) .price-per-order{color:hsl(7,20%,60%)}.order-confirmed .order strong,.order-confirmed .checkout .total strong,.checkout .order-confirmed .total strong{font-size:1.8rem}.order-confirmed .order .product-info,.order-confirmed .checkout .total .product-info,.checkout .order-confirmed .total .product-info{display:flex;width:-moz-max-content;width:max-content;align-items:center}.order-confirmed .order .checkout-items,.order-confirmed .checkout .total .checkout-items,.checkout .order-confirmed .total .checkout-items{margin-left:1.5rem}.order-confirmed button{width:100%;background-color:hsl(14,86%,42%);border:none;color:hsl(20,50%,98%);padding:2rem 7rem;font-size:2rem;text-transform:capitalize;font-weight:600;cursor:pointer;transition:1s ease;border-radius:4rem}.order-confirmed button:hover,.order-confirmed button:active{background-color:hsl(14,65%,9%)}.order-confirmed::before{content:"";inset:0;position:absolute;z-index:-3;width:100vw;height:100vh;top:50%;left:50%;backdrop-filter:blur(0.2rem);transform:translateY(-70%) translateX(-50%)}.attribution{font-size:1.5rem;font-weight:700;gap:.5rem;color:hsl(14,65%,9%);text-align:center}.attribution a{text-decoration:none;transition:1s ease-in-out;color:hsl(159,69%,38%)}.attribution a:hover,.attribution a:active{color:hsl(14,86%,42%)}main{margin-bottom:3rem;display:flex;align-items:center;flex-direction:column;min-width:100%}.if-empty{display:flex;align-items:center;gap:1.5rem;color:hsl(12,20%,44%);font-weight:600;flex-direction:column}.if-not-empty{width:100%}.if-not-empty .total{padding:0}.hidden{display:none;overflow:hidden}.stop{overflow:hidden}.cell{flex-direction:column}@media(min-width: 600px){article{width:100%}.products{width:100%;place-items:center;display:grid;max-width:93rem;grid-template-columns:repeat(auto-fit, minmax(28rem, 1fr))}.products #box div img{max-width:28rem;height:28rem}.checkout,.checkout .order,.checkout .total{border-radius:1rem;padding:3rem}.checkout .order,.checkout .total{padding:0}.order-confirmed{border-radius:1rem}}@media(min-width: 1440px){header h1{max-width:-moz-max-content;max-width:max-content;padding-left:calc((100% - 138rem)/2 + 1rem)}article{max-width:138rem;display:flex;align-items:start}article .products{padding:0}article .checkout,article .checkout .order,.checkout article .order,article .checkout .total,.checkout article .total{position:sticky;top:5rem;padding-top:0;margin:0}article .checkout .order,.checkout article .order .order,.checkout article .total .order,article .checkout .total,.checkout article .order .total,.checkout article .total .total{margin-bottom:1rem}article .checkout button,article .checkout .order button,.checkout article .order button,article .checkout .total button,.checkout article .total button{width:100%}article .checkout h2,article .checkout .order h2,.checkout article .order h2,article .checkout .total h2,.checkout article .total h2{transform:translateY(-4.5rem);font-size:3.5rem;margin-bottom:-2rem}.order-confirmed{height:-moz-fit-content;height:fit-content;position:f;top:50%;padding:3rem;left:50%;transform:translateX(-50%) translateY(-50%)}.order-confirmed::before{transform:translateY(-50%) translateX(-50%)}.order-box{display:flex;flex-direction:column;gap:2rem}}/*# sourceMappingURL=styles.css.map */