/* =============================================================================
   AMCH Product Image Gallery Widget
   ============================================================================= */

.amch-product-gallery {
  width: 100%;
}

/* Main image ---------------------------------------------------------------- */
.amch-gallery-main {
  background-color: #f7f7f5;
  border-radius: 4px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.amch-gallery-main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform-origin: 50% 50%;
  transition:
    opacity 0.2s ease,
    transform 0.15s ease;
  will-change: transform;
}

.amch-gallery-main-img.is-fading {
  opacity: 0;
}

/* Zoom: cursor becomes a crosshair when zoom is available */
.amch-gallery-main[data-zoom="1"] {
  cursor: crosshair;
}

/* Zoom active state — transform-origin is set inline by JS on mousemove */
.amch-gallery-main[data-zoom="1"].is-zoomed .amch-gallery-main-img {
  transition: opacity 0.2s ease; /* disable transform transition while panning */
}

/* Strip wrapper (arrows + scroll area) ------------------------------------- */
.amch-gallery-strip-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Arrow buttons */
.amch-gallery-arrow {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background-color: #ffffff;
  border: 1px solid #e0ddd6;
  border-radius: 50%;
  cursor: pointer;
  transition:
    opacity 0.2s ease,
    background-color 0.2s ease;
  padding: 0;
}

.amch-gallery-arrow:hover {
  background-color: #f7f7f5;
}

.amch-gallery-arrow svg {
  display: block;
  stroke: #3a3a3a;
}

.amch-gallery-arrow.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* Scrollable strip */
.amch-gallery-strip {
  flex: 1;
  overflow: hidden; /* JS drives scrollLeft; no visible scrollbar */
  min-width: 0;
}

/* Inner flex row of thumbnails */
.amch-gallery-strip-inner {
  --amch-thumb-cols: 6;
  --amch-thumb-gap: 8px;

  display: flex;
  gap: var(--amch-thumb-gap);
  /* Compute each thumb width so exactly --amch-thumb-cols fit in view */
  transition: transform 0.3s ease;
}

/* Thumbnail buttons -------------------------------------------------------- */
.amch-gallery-thumb {
  flex: 0 0
    calc(
      (100% - var(--amch-thumb-gap) * (var(--amch-thumb-cols) - 1)) /
        var(--amch-thumb-cols)
    );
  display: block;
  padding: 0;
  background-color: #f7f7f5;
  border-radius: 4px;
  border: 0;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  cursor: pointer;

  /* Width is a custom prop so the Elementor control can adjust it */
  --amch-thumb-border-width: 2px;
  box-shadow: none;
  transition: box-shadow 0.3s ease;
}

.amch-gallery-thumb:focus {
  outline: none;
}

.amch-gallery-thumb:hover,
.amch-gallery-thumb:focus-visible,
.amch-gallery-thumb.is-active {
  border: solid 2px #d4a574;
  box-shadow: inset 0 0 0 var(--amch-thumb-border-width) #d4a574;
}

.amch-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* Responsive --------------------------------------------------------------- */
@media (max-width: 480px) {
  .amch-gallery-strip-inner {
    --amch-thumb-cols: 4;
  }
}

@media (max-width: 360px) {
  .amch-gallery-strip-inner {
    --amch-thumb-cols: 4;
    --amch-thumb-gap: 4px;
  }
}