*{box-sizing:border-box;padding:0;margin:0}:root{--white: hsl(0, 0%, 100%);--black: hsl(0, 0%, 0%);--red: hsl(14, 86%, 42%);--green: hsl(159, 69%, 38%);--rose-900: hsl(14, 65%, 9%);--rose-500: hsl(12, 20%, 44%);--rose-400: hsl(7, 20%, 60%);--rose-300: hsl(14, 25%, 72%);--rose-100: hsl(13, 31%, 94%);--rose-50: hsl(20, 50%, 98%);--ff-primary: "Red Hat Text", sans-serif;--fw-bold: 700;--fw-semi-bold: 600;--fw-regular: 400;--text-xl: 2.5rem;--text-lg: 1.5rem;--text-base: 1rem;--text-sm: .875rem;--text-xs: .75rem;--spacing-1100: 5.5rem;--spacing-500: 2.5rem;--spacing-400: 2rem;--spacing-300: 1.5rem;--spacing-200: 1rem;--spacing-150: .75rem;--spacing-100: .5rem;--spacing-50: .25rem}.cart{background-color:var(--white);padding:var(--spacing-300);border-radius:12px}.cart__empty{display:flex;flex-direction:column;place-items:center;gap:var(--spacing-200);padding-block:var(--spacing-200)}.cart__empty-text{color:var(--rose-500)}.cart__heading{font-size:var(--text-lg);line-height:125%;letter-spacing:0;font-weight:700;color:var(--red);text-transform:capitalize;margin-bottom:var(--spacing-300)}.cart-item{display:flex;align-items:center;justify-content:space-between}.cart-item__summary{display:flex;gap:var(--spacing-100)}.cart-item__name{color:var(--rose-900);margin-bottom:var(--spacing-100)}.cart-item__quantity{color:var(--red)}.cart-item__price,.cart-item__amount{color:var(--rose-500)}.delivery-info{display:flex;align-items:center;justify-content:center;padding:var(--spacing-200);background-color:var(--rose-50);gap:var(--spacing-100);border-radius:var(--spacing-100);margin-bottom:var(--spacing-300)}.order-total{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-300)}.product__image.added{border:2px solid var(--red)}.productlist__heading{font-size:var(--text-xl);font-weight:700;line-height:120%;letter-spacing:0;color:var(--rose-900);margin-bottom:var(--spacing-400)}.product__list{display:grid;gap:var(--spacing-300)}.product__preview{position:relative;margin-bottom:var(--spacing-200);padding-bottom:22px}.product-card__control{position:absolute;bottom:0;left:50%;transform:translate(-50%);width:160px}.product__image{border-radius:8px}.product__category{font-size:var(--text-sm);line-height:150%;color:var(--rose-500)}.product__name{color:var(--rose-900);font-size:var(--text-base);font-weight:600;line-height:150%;letter-spacing:0}.product__price{font-size:var(--text-base);font-weight:600;line-height:150%;letter-spacing:0;color:var(--red)}@media (min-width: 40rem){.product__list{grid-template-columns:repeat(3,1fr);column-gap:var(--spacing-300);row-gap:var(--spacing-400)}}.modal__overlay{position:fixed;width:100%;top:0;right:0;bottom:0;left:0;background-color:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:1000;overflow-y:auto}.modal__content{background-color:var(--white);padding-inline:var(--spacing-300);padding-block:var(--spacing-500) var(--spacing-300);border-radius:8px 8px 0 0;position:absolute;bottom:0;width:100%;max-height:90vh;overflow-y:auto;scroll-behavior:smooth}.modal__header{margin-bottom:var(--spacing-400)}.modal__icon{margin-bottom:var(--spacing-300)}.modal__heading{font-size:var(--text-xl);line-height:120%;letter-spacing:0;font-weight:700;text-transform:capitalize;margin-bottom:var(--spacing-100)}.modal__text{font-size:var(--text-base);line-height:auto;letter-spacing:0;font-weight:400;color:var(--rose-500)}.modal__body{background-color:var(--rose-50);margin-bottom:var(--spacing-400);padding:var(--spacing-300);border-radius:8px}.confirmed-item{display:flex;align-items:center}.confirmed-item__preview{max-width:100%;width:48px;height:48px}.confirmed-item__image{border-radius:4px;object-fit:cover;object-position:center;display:block;width:48px;height:48px;margin-right:var(--spacing-200)}.confirmed-item__desc{margin-right:auto}.confirmed-item__name{font-size:var(--text-sm);line-height:150%;letter-spacing:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:16ch;margin-bottom:var(--spacing-50)}.confirmed-item__quantity{font-size:var(--text-sm);line-height:150%;letter-spacing:0;font-weight:600;color:var(--red)}.confirmed-item__price{font-size:var(--text-sm);line-height:150%;letter-spacing:0;font-weight:400;color:var(--rose-500)}.confirmed-item__order{display:flex;gap:var(--spacing-100)}.confirmed-item__amount{font-size:var(--text-base);line-height:150%;letter-spacing:0;font-weight:600}.confirmed__total{display:flex;align-items:center;justify-content:space-between}.confirmed__total-text{font-size:var(--text-sm);line-height:150%;letter-spacing:0;font-weight:400;color:var(--rose-900)}.confirmed__total-amount{font-size:var(--text-lg);line-height:125%;letter-spacing:0;font-weight:700;color:var(--rose-900)}@media (min-width: 40rem){.modal__content{padding:var(--spacing-500);border-radius:12px;max-width:688px;left:50%;top:50%;bottom:auto;max-height:685px;transform:translate(-50%,-50%)}.confirmed-item__name{width:100%}}@media (min-width: 80rem){.modal__overlay{padding:var(--spacing-300)}.modal__content{max-width:600px}.confirmed-item__name{width:100%}}body{background-color:var(--rose-50);font-family:var(--ff-primary);margin:0}ul{list-style:none}img,picture{max-width:100%;display:block}.container{display:grid;grid-template-columns:1fr min(75rem,calc(100% - (var(--spacing-300) * 2))) 1fr;padding-block:var(--spacing-300)}.container>*{grid-column:2}.grid-container{display:grid;row-gap:var(--spacing-400)}.section-heading{color:var(--red);text-transform:capitalize;margin-bottom:var(--spacing-300)}.text-preset-1{font-size:var(--text-xl);line-height:120%;letter-spacing:0;font-weight:700}.text-preset-2{font-size:var(--text-lg);line-height:125%;letter-spacing:0;font-weight:700}.text-preset-3{font-size:var(--text-base);line-height:150%;letter-spacing:0;font-weight:600}.text-preset-4{font-size:var(--text-sm);line-height:150%;letter-spacing:0;font-weight:400}.text-preset-4--bold{font-size:var(--text-sm);line-height:150%;letter-spacing:0;font-weight:600}.btn{display:inline-block;background:none;cursor:pointer;border:none;line-height:0}.btn-quantity:disabled{cursor:not-allowed}.btn-quantity:disabled:hover{background-color:var(--red);color:var(--white);border-color:var(--white);cursor:not-allowed}.btn--primary{background-color:var(--red);color:var(--white);width:100%;padding:var(--spacing-200) var(--spacing-300);border-radius:999px;font-size:var(--text-base);line-height:150%;letter-spacing:0;font-weight:600;text-transform:capitalize}.btn--primary:hover{background-color:var(--rose-500)}.btn-add-to-cart{border-radius:999px;font-size:var(--text-sm);padding:var(--spacing-150) var(--spacing-300);border:1px solid var(--rose-400);background-color:var(--white);color:var(--rose-900);font-weight:var(--fw-semi-bold);display:inline-flex;align-items:center;gap:var(--spacing-100);white-space:nowrap}.btn-add-to-cart:hover{border-color:var(--red);color:var(--red)}.btn-add-to-cart:active{background-color:var(--red);color:var(--white)}.btn-remove-item{font-size:var(--text-base);font-weight:var(--fw-bold);border-radius:50%;color:var(--rose-400);border:1.5px solid var(--rose-400)}.btn-remove-item:hover{color:var(--rose-900);border-color:var(--rose-900)}.added-item-quantity{display:flex;align-items:center;justify-content:space-between;background-color:var(--red);padding:var(--spacing-150);border-radius:999px}.btn-quantity{color:var(--white);font-size:var(--text-base);border:1.5px solid var(--white);border-radius:50%;font-weight:var(--fw-semi-bold)}.btn-quantity:hover{background-color:var(--white);color:var(--red)}.cart-item-quantity{font-size:var(--text-sm);line-height:150%;letter-spacing:0;font-weight:var(--fw-semi-bold);color:var(--white)}.separator{width:100%;height:1px;background-color:var(--rose-100)}.separator--sm{margin-block:var(--spacing-200)}.separator--lg{margin-block:var(--spacing-300)}@media (min-width: 40rem){.container{grid-template-columns:1fr min(75rem,calc(100% - (var(--spacing-500) * 2))) 1fr;padding-block:var(--spacing-500)}.product__list{grid-template-columns:repeat(3,1fr);column-gap:var(--spacing-300);row-gap:var(--spacing-400)}}@media (min-width: 64rem){.container{padding-block:var(--spacing-1100)}.grid-container{grid-template-columns:2fr 1fr;column-gap:var(--spacing-400);align-items:start}}
