/* Auto-generated by batch-4 rebuild */
.product-detail { max-width: 1200px; margin: 0 auto; padding: 40px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.product-detail__gallery { display: flex; flex-wrap: wrap; gap: 16px; }
.detail-gallery__slide { flex: 1 1 45%; border: 1px solid #eee; border-radius: 8px; overflow: hidden; cursor: pointer; }
.detail-gallery__slide img { width: 100%; height: auto; display: block; }
.product-detail__title { font-size: 1.75rem; margin: 0 0 16px; }
.product-detail__desc { line-height: 1.6; color: #444; }
@media (max-width: 1024px){
  .product-detail { grid-template-columns: 1fr; gap: 24px; }
}

/* Packaging option buttons (.box_l) normally rely on slick.js wrapping them in
   .slick-slide (which frontend.css overrides to width:auto) to lay out as compact
   pills side-by-side. When there are multiple packaging groups we no longer
   initialize slick on .box_number (it's driven by plain click handlers instead),
   so re-create the compact pill layout without depending on slick markup. */
.pack .box_number:not(.slider-nav) .box_l {
  width: auto !important;
  float: left;
}

/* frontend.css only styles the "active" packaging button via slick's own generated
   .slick-slide.slick-current.slick-active class. When grouped (no slick on .box_number),
   we toggle a plain .active class via JS instead, so give it the same highlighted look. */
.pack .box_number .box_l.active {
  transition: 0.3s;
  border: 1px solid #047a69;
  color: #ffffff;
  background-color: #e1e1e1;
  background-image: linear-gradient(to right, #007361 0%, #1da694 100%);
}

/* Thumbnail strip for packaging variants */
.single_product .box_img .pack-thumbnails {
  display: none;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  gap: 0;
  margin-top: 10px;
}
.single_product .box_img .pack-thumb {
  width: 150px;
  height: 150px;
  flex: 0 0 150px;
  object-fit: contain;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin: 0 0 10px 25px;
}
.single_product .box_img .pack-thumb.active {
  border: 2px solid #00897b;
}

/* Packaging images vary wildly in aspect ratio (tall bottles vs. square cartons).
   frontend.css only constrains max-width/max-height, so a square image ends up
   visually much larger than a narrow bottle photo within the same slide. Force a
   consistent frame and letterbox each image inside it so slides look uniform. */
.single_product .box_img .item_img img {
  width: 500px;
  height: 500px;
  max-width: 100%;
  object-fit: contain;
}
@media (max-width: 1024px) {
  /* Fix for packaging buttons overflow on tablet/mobile */
  .pack {
    width: 100%;
    margin: 0;
    padding: 0 10px;
    box-sizing: border-box;
  }
  .pack .span {
    width: 100%;
    float: none;
    display: block;
  }
  .pack .box_number {
    width: 100%;
    float: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .pack .box_number .box_l {
    flex: 0 1 auto;
    float: none;
  }
}

@media (max-width: 767px) {
  .single_product .box_img .item_img img {
    width: 400px;
    height: 400px;
    max-width: 100%;
  }
}
@media (max-width: 480px) {
  .single_product .box_img .item_img img {
    width: 250px;
    height: 250px;
    max-width: 100%;
  }
}