/* Product page */

/* Main section */
#product-page-site-section {
	padding: 30px 10px;
	font-family: Arial, sans-serif;
  }
  
  /* Container */
  #product-container {
	max-width: 1200px;
	margin: 0 auto;
  }
  
  /* Row layout */
  #product-row {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	flex-wrap: wrap;
  }
  
  /* IMAGE COLUMN */
  #product-image-column {
	flex: 1 1 45%;
	padding: 10px;
	height: 50%;
  }
  
  #product-image {
	width: 50%;
	height: auto;
	object-fit: cover;
	border-radius: 8px;
	display: block;
	margin: 0 auto;
  }
  
  /* INFO COLUMN */
  #product-info-column {
	flex: 1 1 45%;
  }
  
  #product-title {
	font-size: 28px;
	margin-bottom: 10px;
  }
  
  #product-description {
	line-height: 1.6;
	margin-bottom: 20px;
  }
  
  #product-price {
	font-size: 22px;
	font-weight: bold;
	color: #007bff;
	margin-bottom: 20px;
  }
  
  /* BUTTONS */
  #product-button-add,
  #product-button-remove {
	padding: 12px 20px;
	display: inline-block;
	text-decoration: none;
	font-size: 16px;
	border-radius: 5px;
	color: white;
  }
  
  #product-button-add {
	background-color: #007bff;
  }
  
  #product-button-remove {
	background-color: #dc3545;
  }
  
  /* HOVER */
  #product-button-add:hover {
	background-color: #0056b3;
  }
  
  #product-button-remove:hover {
	background-color: #b52a37;
  }
  
  /* RESPONSIVE FOR SMALL DEVICES */
  @media (max-width: 768px) {
	#product-row {
	  flex-direction: column;
	  display: flex;
	  align-items: center;
	}
  
	#product-image-column, 
	#product-info-column {
	flex: 1 1 100%;
	display: flex;
     flex-direction: column;
     align-items: center;  /* centers all child elements horizontally */
     gap: 10px;            /* optional spacing between buttons */
	}
  
    #product-image {
        width: 80%;
      }

	#product-title {
	  font-size: 24px;
	  text-align: center;
	  align-items: center;
	}
  
	#product-price {
	  font-size: 20px;
	  text-align: center;
	  align-items: center;
	}
  }
  
  @media (max-width: 480px) {
	#product-row {
		flex-direction: column;
		display: flex;
		align-items: center;
	  }
	#product-info-column {
		flex: 1 1 100%;
		display: flex;
	   flex-direction: column;
	   align-items: center;  /* centers all child elements horizontally */
	   gap: 10px;            /* optional spacing between buttons */
	  }
      #product-image {
        width: 80%;
      }
	#product-title {
	  font-size: 22px;
	  text-align: center;
	  align-items: center;
	}
  
	#product-description {
	  font-size: 14px;
	}
  
	#product-button-add,
	#product-button-remove {
	  font-size: 14px;
	  padding: 10px 16px;

	}
		#product-price {
	  font-size: 20px;
	  text-align: center;
	}
  }