/* --- Product information section (right side) --- */
#info_send {
  width: 40%; /* main column width */
  height: 100%;
  min-height: 500px; /* keeps layout stable */
  padding: 5px 5px 5px 30px; /* inner spacing */
}

/* --- Stock indicators --- */
#stock { 
  width: 100%;
  display: flex;
  gap: 2%;
  align-items: center; /* vertical alignment */
} 

#circle_stock { 
  width: 15px;
  aspect-ratio: 1; /* keeps circle perfect */
  border-radius: 50px;
  background-color: green; /* stock indicator color */
} 

/* Delivery section */
#livraison { 
  margin-top: 20px;
}

/* Generic info block design */
.are_info { 
  width: 100%;
  height: fit-content;
  padding: 5px;
  border: 1px solid #b8c496;
  border-radius: 15px; /* soft corners */
}

/* --- Quantity selection area --- */
#commande {
  margin-top: 20px;
  padding: 10px;
}

/* Wrapper for quantity selectors */
#quantity {
  width: 80%;
  margin-left: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

/* Internal quantity layout group */
#quantity_div {
  display: flex;
  gap: 12px;
}

/* Centers operators + number */
#container_quanty {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
}

/* “+” and “–” buttons */
.operator {
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  user-select: none; /* prevents highlighting */
  transition: transform 0.5s ease;
}
#moins{
  font-size: 30px;
}
.operator:hover {
  transform: scale(1.1); /* soft hover effect */
}

/* Quantity number display */
#number {
  background-color: #9da5844b;
  padding: 0 5px;
  border: none;
  text-align: center;
}

/* Operator container */
#container_ope {
  display: flex;
  gap: 12px;
}

/* --- Buy buttons --- */
.btn_buy {
  width: 80%;
  margin-left: 10%;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffce12;
  cursor: pointer;
  padding: 5px;
  border: 1px solid transparent;
  transition: border 0.5s ease;
  user-select: none;
}

.btn_buy:hover {
  border: 1px solid rgba(0, 0, 0, 0.212);
}

/* Secondary button spacing */
.sec_btn {
  margin-top: 10px;
  text-align: center;
}

/* Background modifier */
.back_green {
  background-color: #b8c496;
}

/* Image (mobile center) */
#pict_center_resp {
  display: none;
  height: 250px;
  width: auto;
}

/* Centering wrapper */
#container_pict_res {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* --- Responsive --- */

/* Medium screens */
@media (max-width: 1024px){
  #info_send {
    width: 45%; /* slight expansion for tablets */
  }
}

/* Tablet and small screens */
@media (max-width: 800px){
  #info_send {
    width: 40%;
    min-height: auto;
  }
  #container_info {
    width: 60%;
  }
  #container_ope {
    margin-left: 0;
  }
  #quantity {
    flex-wrap: wrap; /* prevents overflow */
  }
  #quantity > *:last-child {
    flex-basis: 100%; /* puts price line on new row */
  }
}

/* Narrow screens */
@media (max-width: 700px){
  #container_info {
    width: 100%;
    margin-top: 50px; /* pushes below image */
  }
  #container_info {
    flex-direction: column; /* stacks elements */
  }
  #product_info, #info_send {
    width: 100%;
    padding: 20px;
  }
  #pict_center_resp {
    display: block; /* center image only on mobile */
  }
}