/* ===== Custom Product Gallery ===== */
/* Fully self-contained - no shared classes with WooCommerce/theme markup,
   so nothing here can be overridden by their CSS or re-touched by their JS.
   Sizing/spacing/color values are CSS custom properties so the plugin's
   WooCommerce settings page can override them per-site without editing this file. */

.zn-gallery {
  --zn-main-size: 460px;
  --zn-main-aspect-ratio: 1 / 1;
  --zn-thumb-size: 80px;
  --zn-thumb-gap: 4px;
  --zn-gallery-gap: 12px;
  --zn-visible-thumbs: 4;
  --zn-accent-color: #C29B63;

  max-width: var(--zn-main-size);
  margin: 0 auto;
}

.zn-gallery-main {
  width: 100%;
  aspect-ratio: var(--zn-main-aspect-ratio);
  overflow: hidden;
  border-radius: 4px;
  margin-bottom: var(--zn-gallery-gap);
}

.zn-gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.zn-gallery-thumbs-wrap {
  width: 100%;
  max-width: calc(
    (var(--zn-visible-thumbs) * var(--zn-thumb-size)) +
    ((var(--zn-visible-thumbs) - 1) * var(--zn-thumb-gap))
  );
  margin: 0 auto;
  box-sizing: border-box;
}

.zn-gallery-track {
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  -webkit-overflow-scrolling: touch; /* momentum scrolling on iOS */
  scroll-snap-type: x proximity;
  scrollbar-width: none; /* Firefox */
}

.zn-gallery-track::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Edge */
}

.zn-gallery-thumbs {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--zn-thumb-gap);
}

.zn-gallery-thumb {
  flex: 0 0 var(--zn-thumb-size);
  width: var(--zn-thumb-size);
  height: var(--zn-thumb-size);
  cursor: pointer;
  border-radius: 3px;
  overflow: hidden;
  border: 2px solid transparent;
  scroll-snap-align: start;
  transition: border-color 0.2s ease;
}

.zn-gallery-thumb.is-active,
.zn-gallery-thumb:hover {
  border-color: var(--zn-accent-color);
}

.zn-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}