/* Product gallery (theme's slider JS isn't loaded in the headless clone):
   show only the active media slide; thumbnails switch it via gallery JS. */
.product__media-list {
  display: block !important;
  overflow: visible !important;
  transform: none !important;
}
.product__media-list .product__media-item {
  display: none !important;
  width: 100% !important;
  margin: 0 !important;
  scroll-snap-align: none !important;
}
.product__media-list .product__media-item.is-active {
  display: block !important;
}

/* Mobile: show ALL slides in a native swipeable scroller (one per screen). */
@media screen and (max-width: 749px) {
  .product__media-list {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .product__media-list::-webkit-scrollbar { display: none; }
  .product__media-list .product__media-item {
    display: block !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    scroll-snap-align: center;
  }
}
/* main image responds to clicks (advance to next) */
.product__media-list .product__media-item.is-active .product__media,
.product__media-list .product__media-item.is-active img {
  cursor: pointer;
}
/* clear active thumbnail outline */
.thumbnail[aria-current="true"] { border-color: rgb(var(--color-foreground)); }

/* Thumbnail bar: swipeable / draggable */
.thumbnail-list {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.thumbnail-list.plg-dragging { cursor: grabbing; user-select: none; scroll-behavior: auto; }

/* "Read What Our Customers" testimonials -> clean static 3-up row
   (they're Splide markup, but should not be a carousel) */
.trustpilot-reviews .splide__track { overflow: visible !important; }
.trustpilot-reviews .splide__list {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.6rem !important;
  width: auto !important;
  transform: none !important;
  padding: 0 !important;
}
.trustpilot-reviews .splide__slide {
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  /* Splide hides slides (visibility:hidden) until its JS adds .is-visible;
     this section is intentionally unmounted, so force them visible. */
  visibility: visible !important;
  opacity: 1 !important;
}
.trustpilot-reviews .splide__arrows,
.trustpilot-reviews .splide__pagination { display: none !important; }
@media screen and (max-width: 749px) {
  .trustpilot-reviews .splide__list { grid-template-columns: 1fr !important; }
}

/* never show native video control bars (custom overlay buttons handle it) */
video[data-pl-video]::-webkit-media-controls,
video[data-pl-video]::-webkit-media-controls-enclosure,
video[data-pl-video]::-webkit-media-controls-panel { display: none !important; }
/* keep the prev/next arrows visible & clickable */
.thumbnail-list + .slider-buttons,
slider-component .slider-buttons { display: flex; }
.slider-button { cursor: pointer; }

/* ---- Headless product-gallery carousel (theme's flickity JS was stripped) ---
   Converts the raw flickity track into a scroll-snap carousel with arrows+dots. */
.t4s-product__media-wrapper.pl-gallery-wrap {
  position: relative;
  /* Don't stretch the media column to the (taller) buy-box column — that left a
     big empty gap below the image and detached the old dots. Top-align it so the
     gallery height = image + thumbnails. */
  align-self: flex-start;
}

/* Thumbnail strip under the main image (brand-matched: 5px radius, #2037A5
   active border, #e6e6e6 idle borders — same language as the bundle cards). */
.pl-gallery-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.pl-gallery-thumbs::-webkit-scrollbar { display: none; }
.pl-gallery-thumb {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 2px solid #e6e6e6;
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s ease;
}
.pl-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pl-gallery-thumb:hover { border-color: #b9c4e8; }
.pl-gallery-thumb.is--active { border-color: #2037a5; }
@media (max-width: 768px) {
  .pl-gallery-thumb { width: 56px; height: 56px; }
}
.flickityt4s.pl-gallery {
  overflow-x: auto !important;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.flickityt4s.pl-gallery::-webkit-scrollbar { display: none; }
.flickityt4s.pl-gallery > .t4s-product__media-item {
  scroll-snap-align: center;
  flex: 0 0 100% !important;
  max-width: 100% !important;
}
.pl-gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
  color: #111;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.pl-gallery-arrow:hover { background: #fff; }
.pl-gallery-arrow--prev { left: 12px; }
.pl-gallery-arrow--next { right: 12px; }
.pl-gallery-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  display: flex;
  justify-content: center;
  gap: 7px;
  z-index: 5;
  pointer-events: auto;
  flex-wrap: wrap;
  padding: 0 12px;
}
.pl-gallery-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.28);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.pl-gallery-dot.is--active {
  background: #111;
  transform: scale(1.25);
}
@media (max-width: 768px) {
  .pl-gallery-arrow { width: 36px; height: 36px; }
}