.body{
    background-color: hsl(20, 50%, 98%);
    margin: 24px;
    font-family: "Red Hat Text", sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.body_main{
        display: flex;
        flex-direction: column;
        gap: 32px;
    }
.desert-list_heading{
    color: hsl(14, 65%, 9%);
    font-size: 40px;
    line-height: 120%;
    font-family: "Red Hat Text", sans-serif;
    font-weight: 700;

    opacity: 0;
    transform: translateX(-30px);
    /* animation: fadeInSlideLeft 0.5s ease forwards; */
    /* animation-delay: 0.2s; */
}


.body_dessert-list{
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.desert-list_products{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 24px;
    
}

/* Cards */
.item_picture{
    width: 327px;
    height: auto;
    border-radius: 8px;
    transition: all 0.2s ease;
}
.products_item{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 32px;
    
}
button {
  cursor: pointer;
}
.item_button{
    pointer-events: all;
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px;
    top: 188px;
    left: 79px;
    background: white;
    border: 1px solid hsl(14, 65%, 9%);
    border-radius: 999px;
    /* padding: 12px 36px; */
    width: 160px;
    height: 44px;
    color: hsl(14, 65%, 9%);
    transition: all 0.2s ease;
}
.item_button:hover{
    border: 1px solid hsl(14, 86%, 42%);
    color: hsl(14, 86%, 42%);
}
.button_text{
    font-family: "Red Hat Text", sans-serif;
    font-size: 14px;
    font-weight: 600; 
}

.item_item-info{
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.item-info_type{
    color: hsl(12, 20%, 44%);
    font-size: 14px;
    font-weight: 500;
    font-family: "Red Hat Text", sans-serif;
}
.item-info_name{
    color: hsl(14, 65%, 9%);
    font-size: 18px;
    font-weight: 600;
    font-family: "Red Hat Text", sans-serif;
}
.item-info_price{
    color: hsl(14, 86%, 42%);
    font-size: 16px;
    font-weight: 600;
    font-family: "Red Hat Text", sans-serif;
}

/* CART */
.body_cart{
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    background-color: hsl(0, 0%, 100%);
    justify-content: center;
    border-radius: 12px;
    opacity: 0;
    transform: translateX(30px);
    box-sizing: border-box;
    max-width: 327px;
    /* animation: fadeInSlideRight 0.5s ease forwards; */
    /* animation-delay: 0.2s; */
}

.cart_heading{
    color: hsl(14, 86%, 42%);
    font-size: 24px;
    font-weight: 700;
    line-height: 120%;
    font-family: "Red Hat Text", sans-serif;
    font-weight: 700;

}
.cart_empty{
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 0px;
}
.empty_picture{
    align-self: center;
    width: 128px;
    height: auto;
}
.empty_text{
    text-align: center;
    color: hsl(12, 20%, 44%);
    font-size: 14px;
    font-weight: 600;
}

@media (min-width: 768px) {
    .desert-list_products{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }
    .item_picture{
        width: 213.33px;
        height: auto;
    }
    .item_button{
        top: 189px;
        left: 26px;
        /* padding: 8px 16px; */
        width: 160px;
        height: 44px;
        padding: 0;
    }
    .body_cart{
        max-width: 100%;
    }
    

}
@media (min-width: 1224px) {
    .body_main{
        display: flex;
        flex-direction: row;
        gap: 32px;
    }
    .body_cart{
        height: 20%;
        width: 384px;
        padding: 24px;
        box-sizing: border-box;
    }
    .item_picture{
        width: 250.67px;
        height: auto;
    }
    .item_button{
        top: 220px;
        left: 44px;
    }
}


/* ACTIVE */
.item_quantity-controls{
    display: flex;

    position: absolute;
    top: 188px;
    left: 79px;
    background: hsl(14, 86%, 42%);
    border-radius: 999px;
    padding: 14px 16px;
    
    flex-direction: row;
    justify-content: space-between;
    /* gap: 44px; */
    box-sizing: border-box;
    width: 160px;
    height: 44px;
    transition: all 0.2s ease;
}






.qty_btn{
    background: none;
    border: 1px solid hsl(0, 0%, 100%);
    border-radius: 50%;

    width: 18px;
    height: 18px;
    
    display: flex;
    align-items: center;
    justify-content: center;

    color: hsl(0, 0%, 100%);
    font-size: 20px;
    font-weight: 300;
    font-family: "Red Hat Text", sans-serif;
    /* transition: all 0.1s ease; */
}
.qty_btn:hover{
    background: hsl(0, 0%, 100%);
    color: hsl(14, 86%, 42%);
}
.qty_value{
    color: hsl(0, 0%, 100%);
    font-size: 14px;
    font-weight: 600;
    font-family: "Red Hat Text", sans-serif;
    align-self: center;
}
@media (min-width: 768px) {
    .item_quantity-controls{
        align-items: center;
        justify-content: space-between;
        top: 189px;
        left: 27px;
        width: 160px;
        height: 44px;
        /* padding: 14px 24px; */
        /* gap: 44px; */
    }
}
@media screen and (min-width: 1224px) {
    .item_quantity-controls{
        align-items: center;
        justify-content: space-between;
        top: 220px;
        left: 44px;
        width: 160px;
        height: 44px;
        /* padding: 14px 24px; */
        /* gap: 44px; */
    }
}
.item_picture-active{
    border: 3px solid hsl(14, 86%, 42%);
}

/* Cart with items */
.cart_item-name{
    font-size: 14px;
    font-weight: 600;
    color: hsl(14, 65%, 9%);
    font-family: "Red Hat Text", sans-serif;
}
.cart_item{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid hsl(13, 31%, 94%);
    padding-bottom: 16px;
    padding-top: 16px;
}
.cart_item-details{
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cart_item-remove{
    background: none;
    border: none;
    color: hsl(12, 20%, 44%);
    font-family: "Red Hat Text", sans-serif;
    height: 20px;
    width: 20px;
    border: 1px solid hsl(7, 20%, 60%);
    border-radius: 999px;
    transition: all 0.1s ease;  
    
    display: flex;
    align-items: center;
    justify-content: center;

    color: hsl(12, 20%, 44%);
    font-size: 12px;
    font-family: "Red Hat Text", sans-serif;
    font-weight: 600;
}
.cart_item-remove:hover{
    border-color: hsl(14, 65%, 9%);
    color: hsl(14, 65%, 9%);
}

    
.cart_item-qty{
    color: hsl(14, 86%, 42%);
    font-family: "Red Hat Text", sans-serif;
    font-size: 14px;
    font-weight: 600;
}
.cart_item-style{
    color: hsl(14, 86%, 42%);
    font-family: "Red Hat Text", sans-serif;
    font-size: 14px;
    font-weight: 600;
    margin-right: 8px;
}
.cart_item-unit-style{
    color: hsl(12, 20%, 44%);
    font-family: "Red Hat Text", sans-serif;
    font-size: 14px;
    font-weight: 500;
}
.cart_item-unit-price{
    color: hsl(12, 20%, 44%);
    font-family: "Red Hat Text", sans-serif;
    font-size: 14px;
    font-weight: 500;
    margin-right: 8px;
}
.cart_item-total-style{
    color: hsl(12, 20%, 44%);
    font-family: "Red Hat Text", sans-serif;
    font-size: 14px;
    font-weight: 600;
}
.cart_total{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    padding-top: 14px;

}
.total_price-style{
    color: hsl(14, 65%, 9%);
    font-family: "Red Hat Text", sans-serif;
    font-size: 24px;
    font-weight: 700;
}
.total_price{
    color: hsl(14, 65%, 9%);
    font-family: "Red Hat Text", sans-serif;
    font-size: 24px;
    font-weight: 700;
}
.cart_carbon-neutral{
    background: hsl(20, 50%, 98%);
    padding: 16px;
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    height: 52px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
}
.carbon-neutral_strong{
    font-weight: 600;
}
.carbon-neutral_icon{
    width: 20px;
    height: auto;
}
.cart_confirmation{
    align-self: center;
    
}
.confirmation_button{
    background: hsl(14, 86%, 42%);
    color: hsl(0, 0%, 100%);
    border: none;
    border-radius: 999px;
    width: 279px;
    height: 53px;
    font-family: "Red Hat Text", sans-serif;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.1s ease;
}
.confirmation_button:hover{
    background: #952C0B;
}




/* ----------------------------- */
/* Modal */
/* ----------------------------- */

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background: rgba(0, 0, 0, 0.5); /* затемнение */

  display: flex;
  justify-content: center;
  align-items: center;

  z-index: 1000;
}

body.modal-open {
  overflow: hidden;
}


/* --------------------------------- */
/* ---------scroll---------- */
/* --------------------------------- */

.order-confirmed{
    overflow: auto;
    background: white;
    padding: 40px 24px 24px 24px;
    width: 375px;
    border-radius: 12px 12px 0px 0px;
    height: auto;
    max-height: 552px;
    position: relative;
    top: 90px;

    display: flex; 
    flex-direction: column;
    gap: 32px;
    transition: all 0.2s ease;

    /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: hsl(0, 0%, 70%) transparent;
}

/* ===== Chrome, Edge, Safari ===== */
.order-confirmed::-webkit-scrollbar {
  width: 8px;
}

.order-confirmed::-webkit-scrollbar-track {
  background: transparent;
}

.order-confirmed::-webkit-scrollbar-thumb {
  background-color: hsl(0, 0%, 70%);
  border-radius: 10px;
  border: 2px solid transparent; /* делает отступ внутри */
  background-clip: content-box;
}

/* ===== Hover эффект (приятно для UX) ===== */
.order-confirmed::-webkit-scrollbar-thumb:hover {
  background-color: hsl(0, 0%, 50%);
}

/* --------------------------------- */

.order-confirmed_hero{
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.hero_icon{
    width: 48px;
    height: 48px;
}
.hero_text{
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.hero_heading{
    color: hsl(14, 65%, 9%);
    font-family: "Red Hat Text", sans-serif;
    font-size: 40px;
    font-weight: 700;
}
.hero_subheading{
    color: hsl(12, 20%, 44%);
    font-family: "Red Hat Text", sans-serif;
    font-size: 16px;
    font-weight: 400;
}
.order-confirmed_details{
    background: hsl(20, 50%, 98%);
    padding: 0px 24px 24px 24px;
    border-radius: 8px;
}
.order-confirmed_total{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-top: 24px;
    border-top: 1px solid hsl(13, 31%, 94%);
}
.order-confirmed_total-text{
    color: hsl(14, 65%, 9%);
    font-family: "Red Hat Text", sans-serif;
    font-size: 14px;
    font-weight: 500;
}
.order-confirmed_total-icon{
    color: hsl(14, 65%, 9%);
    font-family: "Red Hat Text", sans-serif;
    font-size: 24px;
    font-weight: 600;
}
.order-confirmed_total-price{
    color: hsl(14, 65%, 9%);
    font-family: "Red Hat Text", sans-serif;
    font-size: 24px;
    font-weight: 700;
}
.order-confirmed_start-new-order{
    align-self: center;
    background: hsl(14, 86%, 42%);
    color: hsl(0, 0%, 100%);
    border: none;
    border-radius: 999px;
    width: 327px;
    height: 53px;
    padding: 16px;
    font-family: "Red Hat Text", sans-serif;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.1s ease;
}
.order-confirmed_start-new-order:hover{
    background: #952C0B;
}

.confirmation-item{
    overflow: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0px;
    border-bottom: 1px solid hsl(13, 31%, 94%);
}
.template_total-product-price{
    color: hsl(14, 65%, 9%);
    font-family: "Red Hat Text", sans-serif;
    font-size: 16px;
    font-weight: 600;
}
.product-info_image{
    width: 48px;
    height: 48px;
    border-radius: 4px;
}
.template_product-info{
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center;
}
.product-info_details{
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.product-info_name{
    color: hsl(14, 65%, 9%);
    font-family: "Red Hat Text", sans-serif;
    font-size: 14px;
    font-weight: 600;
}
.details_qty{
    color: hsl(14, 86%, 42%);
    font-family: "Red Hat Text", sans-serif;
    font-size: 14px;
    font-weight: 600;
}
.details_unit-price{
    color: hsl(12, 20%, 44%);
    font-family: "Red Hat Text", sans-serif;
    font-size: 14px;
    font-weight: 500;
}
.template_total-product-price_icon{
    color: hsl(14, 65%, 9%);
    font-family: "Red Hat Text", sans-serif;
    font-size: 16px;
    font-weight: 600;
}




.modal-open{
    overflow: hidden;
}


.hidden{
    display: none;
}

@media (min-width: 768px) {
    

    .order-confirmed{
        width: 688px;
        max-height: 685px;
        box-sizing: border-box;
        border-radius: 12px;
        top : 0px;
        


    
    }
    .order-confirmed_start-new-order{
        width: 100%;
    }

}
@media (min-width: 1224px) {
    .order-confirmed{
        width: 592px;
        max-height: 685px;
        box-sizing: border-box;
        border-radius: 12px;
        top : 0px;
    }
}

/* --------------------------------- */
/* ------Animation-------- */
/* --------------------------------- */
@keyframes fadeUp {
  from {
    opacity: 0.6;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.products_item {
  opacity: 0.5;
  transform: translateY(20px);
  /* animation: fadeUp 0.5s ease forwards; */
}
.product_item--animate {
  animation: fadeUp 0.5s ease forwards;
}
.page_title--animate{
    animation: fadeInSlideLeft 0.5s ease forwards;
}
.products_item:nth-child(1) {
  animation-delay: 0s;
}

.products_item:nth-child(2) {
  animation-delay: 0.1s;
}
.products_item:nth-child(3) {
  animation-delay: 0.2s;
}
.products_item:nth-child(4) {
  animation-delay: 0.3s;
}
.products_item:nth-child(5) {
  animation-delay: 0.4s;
}
.products_item:nth-child(6) {
  animation-delay: 0.5s;
}
.products_item:nth-child(7) {
  animation-delay: 0.6s;
}
.products_item:nth-child(8) {
  animation-delay: 0.7s;
}
.products_item:nth-child(9) {
  animation-delay: 0.8s;
}
@keyframes fadeInSlideLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
.body_cart--animate{
    animation: fadeInSlideRight 0.5s ease forwards;
}
@keyframes fadeInSlideRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
.order-confirmed{
    opacity: 0;
    transform: translateY(20px);

}
.order-confirmed--animate{
    animation: fadeInSlideUp 0.5s ease forwards;
}
@keyframes fadeInSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}