/*
 * Thumbnail Carousel — WooCommerce Product Gallery
 * File: thumbnail-carousel.css
 * Add to your child theme folder and enqueue via functions-snippet.php
 */

/* ============================================================
   HIDE the default left-side vertical thumbnail strip
   ============================================================ */
.woocommerce-product-gallery--with-images .flex-viewport {
  width: 100% !important;
  margin-left: 0 !important;
}

/* The default layout puts thumbnails on the left as a column.
   This resets that completely. */
.woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  gap: 8px !important;
  padding: 10px 4px 10px !important;
  margin: 0 !important;
  list-style: none !important;
  width: 100% !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  /* Hide scrollbar visually but keep it scrollable */
  scrollbar-width: none !important;      /* Firefox */
  -ms-overflow-style: none !important;   /* IE/Edge */
}

.woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs::-webkit-scrollbar {
  display: none !important;
}

/* Each thumbnail item — fixed width so they sit in a row */
.woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs li {
  flex: 0 0 72px !important;
  width: 72px !important;
  height: 72px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Thumbnail images */
.woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs li img {
  width: 72px !important;
  height: 72px !important;
  object-fit: cover !important;
  border-radius: 6px !important;
  border: 2px solid transparent !important;
  cursor: pointer !important;
  transition: border-color 0.2s ease, opacity 0.2s ease !important;
  display: block !important;
  opacity: 0.72;
}

.woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs li img:hover {
  border-color: #F97316 !important;  /* change to your brand colour */
  opacity: 1;
}

.woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs li img.flex-active {
  border-color: #F97316 !important;  /* change to your brand colour */
  opacity: 1 !important;
}

/* ============================================================
   CAROUSEL ARROW BUTTONS
   (injected by the JS below)
   ============================================================ */
.sk-thumb-carousel-wrap {
  position: relative;
}

.sk-thumb-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #ECEAE4;
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, opacity 0.15s ease;
  padding: 0;
  line-height: 1;
}

.sk-thumb-arrow:hover { background: #F7F6F3; }
.sk-thumb-arrow.hidden { opacity: 0; pointer-events: none; }

.sk-thumb-arrow.prev { left: 0; }
.sk-thumb-arrow.next { right: 0; }

/* When arrows are present, add padding so thumbs don't sit under them */
.sk-thumb-carousel-wrap ol.flex-control-thumbs {
  padding-left: 34px !important;
  padding-right: 34px !important;
}