:root{
  --Red: hsl(14, 86%, 42%);
  --Green: hsl(159, 69%, 38%);
  --Rose50: hsl(20, 50%, 98%);
  --Rose100: hsl(13, 31%, 94%);
  --Rose300: hsl(14, 25%, 72%);
  --Rose400: hsl(7, 20%, 60%);
  --Rose500: hsl(12, 20%, 44%);
  --Rose900: rgb(38, 15, 8);
}

*{
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--Rose900);
  box-sizing: border-box;
  font-family: "Red Hat Text", sans-serif;
}

body::-webkit-scrollbar {
  display: none; 
  scrollbar-width: none;
}


/* ===================================Main Page Design ==================================== */

section{
  height: auto;
  background: var(--Rose100);
}

.main-container{
  gap: 2rem;
  display: grid;
  padding: 5rem;
  grid-template-columns: 2fr 1fr;
}


/*===================================== Product Area Design ========================================== */
.active{
  display: flex;
}

.content-area .heading{
  font-weight: 900;
  font-size: 1.7rem;
}

.content-area .product-area{
  gap: 2rem;
  display: grid;
  margin-top: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.product{
  min-width: 10rem;
}

.product .product-int {
  position: relative;
}

.product .product-int .product-img{
  width: 100%;
  border-radius: .7rem;
}

/* ===================================Add Card Button Design ====================================== */

.product-int .add-btn{
  left: 50%;
  width: 10rem;
  display: flex;
  font-size: 14px;
  padding: .3rem 0;
  font-weight: 600;
  position: absolute;
  align-items: center;
  border-radius: 1.5rem;
  background: var(--Rose50);
  border: 1px solid var(--Red);
  transform: translate(-50%, -61%);
}

.product-int button.add-cart{
  gap: .3rem;
  cursor: pointer;
  justify-content: center;
  padding: .55rem 0;
}

.product-int button.add-cart span{
  transition: .4s;
  color: var(--Rose900);
}

.product-int button.add-cart:hover span{
  color: var(--Red);
}

.product-int button.add-cart img{
  width: 18px;
}

.product-int button.add-delete{
  background: var(--Red);
  justify-content: space-around;
}

.product-int button.add-delete span{
  color: var(--Rose50);
  font-size: 18px;
}

button.add-delete .add-item,
button.add-delete .delete-item{
  cursor: pointer;
  transition: 0.4s;
  padding: 0 .385rem;
  border-radius: 50%;
  border: 1px solid var(--Rose50);
}

button.add-delete .add-item:hover,
button.add-delete .delete-item:hover{
  color: var(--Red);
  background: var(--Rose50);
}

.product-int:has(.block) .product-img {
  border: 2px solid red; 
}

.product-int button.block{
  display: none;
}

/* ====================================Product Description Design ======================================= */

.product .des{
  line-height: 1.5rem;
  margin: 2rem 0 1.5rem;
}

.product .des .product-category{
  font-weight: 500;
  color: var(--Rose400);
}


.product .des .product-name{
  font-weight: 600;
  font-size: 1.2rem;
}

.product .des .product-price{
  color: var(--Red);
}

/*===================================== Card Area Design ========================================== */

.cart-area{
  height: max-content;
  padding: 1rem 1.5rem;
  border-radius: .5rem;
  background: var(--Rose50);
}

.cart-area .cart-heading{
  color: var(--Red);
  font-size: 1.4rem;
}

.cart-area .cart-heading span{
  color: var(--Red);
}

.cart-area .no-cart{
  display: flex;
  align-items: center;
  flex-direction:column;
  padding-bottom: 1.5rem;
}

.cart-area .no-cart img{
  width: 8rem;
  margin: 2rem 0 1.5rem;
}


/* ====================================Cart List Desing ===================================== */
.cart-area .cart-item{
  margin-top: 1rem;
  line-height: 2rem;
}

.cart-area .cart-item .full-cart{
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--Rose100);
  padding: .5rem 0 .5rem;
  justify-content: space-between;
}

.cart-item .full-cart .cart-info{
  font-size: 16px;
  line-height: 1.5rem;
}

.full-cart .cart-info .cart-name{
  font-size: 1rem;
  font-weight: normal;
}

.full-cart .cart-info .cart-cost{
  gap: .7rem;
  display: flex;
}

.cart-cost .multipul-item{
  font-size: 10px;
  font-weight: 700;
  color: var(--Red);
}

.multipul-item .x-item{
  font-size: 16px;
  /* font-weight: normal; */
  color: var(--Red);
}

.cart-cost .single-item-price, 
.cart-cost .single-item-price span{
  color: var(--Rose400);
}

.cart-cost .total-item-price,
.cart-cost .total-item-price span{
  color: var(--Rose500);
}

.full-cart img{
  padding: 2px;
  transition: .4s;
  width: 1.3rem;
  cursor: pointer;
  border-radius: 50%;
  fill: var(--Rose900s);
  border: 1px solid var(--Rose300);
}

.full-cart img:hover{
  transform: scale(1.2);
  border: 1px solid var(--Rose900);
}



/* ======================================== Cart Confirm Desing ============================================== */

.cart-item .total-order{
  display: flex;
  padding: 1.5rem 0 1.5rem;
  justify-content: space-between;
}

.total-order-price{
  font-size: 2rem;
  font-weight: 600;
} 

.cart-item .carbon-neutral{
  gap: .5rem;
  display: flex;
  padding: .3rem 0;
  align-items: center;
  border-radius: .5rem;
  justify-content: center;
  background: var(--Rose100);
}

.cart-item .carbon-neutral p{
  color: var(--Rose500);
}

.cart-item .carbon-neutral p span{
  font-weight: bold;
}

.cart-item .btn{
  display: flex;
  align-items: center;
  padding: 1.5rem 0 1rem;
  justify-content: center;
}

.cart-item .btn button{
  width: 100%;
  border: none;
  cursor: pointer;
  padding: 1rem 0;
  transition: .4s;
  color: var(--Rose50);
  border-radius: 1.5rem;
  background: var(--Red);
}

.cart-item .btn button:hover{
  background: #8e2020;
}

.cart-area div.hide{
  display: none;
}

/* =================================== Order Confirmed Desing ==================================== */

.final-order-section{
  width: 100%;
  height: 100%;
  background: rgb(17, 17, 17, .5);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.final-order-section.block{
  display: none;
}

.order-confirmation {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 
  max-width: 35vw; 
  min-width: 30rem;
  background: var(--Rose50); 
  padding: 2rem;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  border-radius: 1rem;
  z-index: 1000; 
}

.order-titel div{
  display: flex;
  justify-content: space-between;
}

.order-titel div button{
  width: 1.2rem;
  height: 1.2rem;
  font-size: 2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--Rose300);
  border: 1px solid var(--Rose300);
  border-radius: 50%;
  transition: .4s;
}

.order-titel div button:hover{
  background: var(--Rose300);
  color: var(--Rose400);
  transform: scale(1.2);
}

.order-titel h1{
  margin-top: 1rem;
  font-size: 2rem;
}

.order-titel p{
  margin: .3rem 0 1rem;
  color: var(--Rose500);
}

.order-item ul{
  max-height: 17rem;
  overflow-y: auto;
  border-radius: .5rem;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

.order-item ul::-webkit-scrollbar {
  width: 5px;
}

.order-item ul::-webkit-scrollbar-track {
  background-color: var(--Rose50); 
}

.order-item ul::-webkit-scrollbar-thumb {
  background-color: var(--Red);
  border-radius: 10px;
}


.item-des{
  background: var(--Rose100);
  padding: .7rem;
  display: flex;
  border-bottom: 1px solid var(--Rose300);
  border-radius: .5rem;
}

.item-des .order-item-img{
  width: 3.75rem;
  border-radius: .5rem;
  margin-right: 1rem;
}

.item-info{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.item-info h2{
  font-size: 1rem;
}

.item-titel{
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}

.item-titel div{
  display: flex;
  gap: 1rem;
}

.item-titel div .item,
.item-titel div .item .item-value{
  color: var(--Red);
  font-weight: bold;
  font-size: 1rem;
}

.item-titel div .si-item,
.item-titel div .si-item span{
  color: var(--Rose400);
}

.item-titel div .item{
  font-size: .7rem;
}

.item-info .price,
.item-info .price .to-price{
  font-weight: 600;
  font-size: 1rem;
}

.order-item .total-pri{
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
}

.order-item .total-pri p{
  font-size: 1.5rem;
  font-weight: 600;
}

.order-item button{
  margin-top: 1rem;
  width: 100%;
  padding: 1rem 0;
  border: none;
  background: var(--Red);
  color: var(--Rose50);
  border-radius: 2rem;
  cursor: pointer;
}