/* =========================================================
   FEATURE: PRODUCT GALLERY THUMBNAILS
   Default FlexSlider thumbnail strip: inconsistent crop,
   barely-visible active state, no hover feedback. Rebuilt as
   a single horizontally-scrolling row of square, cropped
   thumbnails with a clear active ring -- one line instead of
   a tall wrapping grid, so it doesn't eat vertical space
   above the fold on any screen size.

   Only enqueued when Settings > Digiskyward > Gallery
   Thumbnails is switched on.
   ========================================================= */

.woocommerce-product-gallery .flex-control-thumbs {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;

  margin: 12px 0 0 !important;
  padding: 0 0 6px !important;
  list-style: none;

  /* WooCommerce's own core CSS carries a higher-specificity rule
     (.woocommerce div.product div.images .flex-control-thumbs)
     that sets overflow:hidden -- without !important here that
     rule always wins regardless of load order, which is why this
     silently failed to scroll before. */
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--bbpb-border) transparent;

  /* premium-buttons.js drives this strip's scrollLeft directly via
     Pointer Events rather than depending on native touch-scroll
     (which turned out not to fire reliably here -- something else
     in the theme/plugin stack was intermittently swallowing the
     gesture). pan-y keeps vertical page scrolling working when a
     swipe starts on the strip, while leaving horizontal handling
     to that script instead of the browser's own gesture recogniser. */
  touch-action: pan-y;
  cursor: grab;
}

.woocommerce-product-gallery .flex-control-thumbs:active {
  cursor: grabbing;
}

.woocommerce-product-gallery .flex-control-thumbs img {
  /* Prevents the browser's native "drag this image" ghost and text
     selection from competing with the custom pointer-drag above. */
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar {
  height: 5px;
}

.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar-thumb {
  background: var(--bbpb-border);
  border-radius: 3px;
}

.woocommerce-product-gallery .flex-control-thumbs li {
  /* WooCommerce's own default is "width:25%; float:left" on
     this element -- both have to be cleared explicitly, and
     flex-shrink:0 keeps every thumbnail at its full fixed
     size instead of being squeezed to fit the row. */
  flex: 0 0 auto;
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  list-style: none;
  scroll-snap-align: start;
}

.woocommerce-product-gallery .flex-control-thumbs li img {
  display: block;
  width: 84px !important;
  height: 84px !important;
  object-fit: cover;

  border: 1.5px solid var(--bbpb-border-soft) !important;
  border-radius: var(--bbpb-radius) !important;
  background: #FAFAFA;

  opacity: .75;
  cursor: pointer;
  transition: border-color .15s ease, opacity .15s ease, transform .15s ease, box-shadow .15s ease;
}

.woocommerce-product-gallery .flex-control-thumbs li img:hover {
  opacity: 1;
  border-color: var(--bbpb-black) !important;
  transform: translateY(-2px);
}

.woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
  opacity: 1;
  border-color: var(--bbpb-red) !important;
  box-shadow: 0 0 0 2px rgba(226,28,33,.18);
}

@media (max-width: 600px) {
  .woocommerce-product-gallery .flex-control-thumbs {
    gap: 6px;
  }

  .woocommerce-product-gallery .flex-control-thumbs li img {
    width: 68px !important;
    height: 68px !important;
  }
}