/* ================================= */
/* SHOP SECTION */
/* Controls spacing between products */
/* ================================= */

.shop-section{
  margin-top:200px;
  display:flex;
  flex-direction:column;
  gap:150px;
  align-items:center;
}



/* ================================= */
/* PRODUCT CARD */
/* Image on left, text on right */
/* ================================= */

.product-card{
  display:flex;
  align-items:center;
  gap:60px;
  max-width:900px;
}



/* ================================= */
/* IMAGE CONTAINER */
/* Hides overflow when zooming */
/* ================================= */

.product-image{
  width:350px;
  overflow:hidden;
  cursor:zoom-in;
}



/* ================================= */
/* PRODUCT IMAGE */
/* Smooth zoom animation */
/* ================================= */

.zoom-img{
  width:100%;
  transition:transform .2s ease;
}



/* ================================= */
/* PRODUCT TEXT */
/* ================================= */

.product-info{
  max-width:400px;
}

.product-info h2{
  font-size:34px;
  color:#38271f;
  margin-bottom:10px;
}

.product-info p{
  font-size:18px;
  color:#493329;

  line-height:1.6;
}



/* Price styling */

.price{
  font-size:22px;
  color:#5C4033;
  font-weight:bold;
  margin-top:10px;
}



/* Buy button */

.buy-btn{
  margin-top:15px;
  padding:10px 20px;
  border:none;
  border-radius:20px;
  background:#f6b6b6;
  font-size:16px;
  cursor:pointer;
}



/* Button hover effect */

.buy-btn:hover{
  background:#f29c9c;
}



/* Smooth scroll when coming from gallery */

html{
  scroll-behavior:smooth;
}
/* COLOR OPTIONS CONTAINER */

.color-options{
  margin-top:15px;
}

.color-swatches{
  display:flex;
  gap:10px;
  margin-top:5px;
}


/* CIRCLE SWATCHES */

.s.color-options{
  margin-top:20px;
}

.color-options p{
  font-size:16px;
  margin-bottom:6px;
}

.color-swatches{
  display:flex;
  gap:10px;
  margin-bottom:15px;
}

.swatch{
  width:22px;
  height:22px;
  border-radius:50%;
  border:2px solid #ddd;
  cursor:pointer;
  transition:transform .15s ease;
}

.swatch:hover{
  transform:scale(1.2);
}


/* COLOR DEFINITIONS */

.red{
  background:#d44747;
}

.pink{
  background:#f5a4c6;
}

.blue{
  background:#6fa9e8;
}
.yellow{
  background:#f3e885;
}

.purple{
  background:#c4a1ff;
}

.black{
  background:#000000;
}

.white{
  background:#ffffff;
}
.color-picker{
  width:22px;
  height:22px;
  border-radius:50%;
  border:2px solid #ddd;
  padding:0;
  cursor:pointer;
}

#bouquet-custom{
  border:10px solid #f2c7c7;
  padding:20px;
  border-radius:15px;
  width: 10000px;
}