/* ==========================================================================
   HOCO REDESIGN — 41 SINGLE PRODUCT: IMAGE GALLERY
   Scope: .single-product .woocommerce-product-gallery (main image + thumbs)
   Matches /test card look: rounded 14px light-bg frame, contained image,
   rounded-square thumbs w/ brand-purple active border. Keeps Woodmart
   zoom/lightbox/owl JS intact (no display/overflow changes that break it).
   ========================================================================== */

/* ---- gallery container: tidy spacing ---- */
.single-product .woocommerce-product-gallery{
  margin-bottom:8px;
}

/* ---- main image: rounded light-bg frame ---- */
.single-product .woocommerce-product-gallery .product-image-wrap{
  background:#fff;
  border:1px solid var(--hoco-line);
  border-radius:var(--hoco-radius);
  overflow:hidden;
  box-shadow:0 2px 12px rgba(40,10,50,.05);
}
.single-product .woocommerce-product-gallery__image{
  position:relative;
  margin:0;
  background:var(--hoco-bg);
  border-radius:var(--hoco-radius);
  overflow:hidden;
}
/* the <a> holds the image; give it breathing room + contain the product shot */
.single-product .woocommerce-product-gallery__image > a{
  display:block;
  padding:22px;
}
.single-product .woocommerce-product-gallery__image img,
.single-product .woocommerce-product-gallery__image > a img{
  width:100%;
  height:auto;
  object-fit:contain;
  aspect-ratio:1/1;
  mix-blend-mode:multiply;
}
/* Woodmart zoom magnifier layer must stay crisp / on top — no blend, no clip escape */
.single-product .woocommerce-product-gallery__image .zoomImg{
  mix-blend-mode:normal;
  background:#fff;
}

/* ---- sale badge (if the product is on sale) ---- */
.single-product .woocommerce-product-gallery .onsale,
.single-product .woocommerce-product-gallery .product-label .onsale,
.single-product .woocommerce-product-gallery span.onsale{
  position:absolute;
  inset-block-start:14px;
  inset-inline-start:14px;
  z-index:3;
  background:var(--hoco-danger);
  color:#fff;
  font-weight:700;
  font-size:12px;
  line-height:1;
  padding:6px 11px;
  border-radius:8px;
  min-height:0;
  min-width:0;
  margin:0;
}

/* ---- thumbnail strip: rounded squares ---- */
.single-product .woocommerce-product-gallery .thumbnails .product-image-thumbnail,
.single-product .woocommerce-product-gallery .product-image-thumbnail{
  border:1.5px solid var(--hoco-line);
  border-radius:var(--hoco-radius-sm);
  overflow:hidden;
  background:#fff;
  cursor:pointer;
  transition:border-color .2s,box-shadow .2s;
}
.single-product .woocommerce-product-gallery .product-image-thumbnail img{
  width:100%;
  height:auto;
  aspect-ratio:1/1;
  object-fit:contain;
  padding:6px;
  mix-blend-mode:multiply;
}
.single-product .woocommerce-product-gallery .product-image-thumbnail:hover{
  border-color:var(--hoco-brand-2);
}
/* active thumbnail — brand purple frame (cover Woodmart's active-class variants) */
.single-product .woocommerce-product-gallery .product-image-thumbnail.wd-active,
.single-product .woocommerce-product-gallery .product-image-thumbnail.active,
.single-product .woocommerce-product-gallery .owl-item.current .product-image-thumbnail,
.single-product .woocommerce-product-gallery .slick-current .product-image-thumbnail{
  border-color:var(--hoco-brand);
  box-shadow:0 0 0 1px var(--hoco-brand);
}

/* spacing between vertical thumbs (grid/custom layout) */
.single-product .woocommerce-product-gallery .thumbnails.wd-v-thumb-custom{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
/* if Woodmart runs the thumbs as an owl carousel, don't force the grid */
.single-product .woocommerce-product-gallery .thumbnails.wd-v-thumb-custom.owl-loaded,
.single-product .woocommerce-product-gallery .thumbnails.owl-carousel{
  display:block;
}
.single-product .woocommerce-product-gallery .thumbnails.owl-carousel .owl-stage .product-image-thumbnail{
  margin-inline:4px;
}

/* ---- responsive: gallery stacks above summary, thumbs go horizontal ---- */
@media(max-width:1024px){
  .single-product .woocommerce-product-gallery .col-lg-3.order-lg-first{
    margin-top:12px;
  }
  .single-product .woocommerce-product-gallery .thumbnails.wd-v-thumb-custom{
    grid-template-columns:repeat(5,1fr);
  }
  .single-product .woocommerce-product-gallery__image > a{
    padding:18px;
  }
}
@media(max-width:575px){
  .single-product .woocommerce-product-gallery .thumbnails.wd-v-thumb-custom{
    grid-template-columns:repeat(4,1fr);
    gap:8px;
  }
  .single-product .woocommerce-product-gallery__image > a{
    padding:14px;
  }
}