/* ════════════════════════════════════════════════════════════════════════
   MATTER CUSTOMIZER — GALLERY
   ────────────────────────────────────────────────────────────────────────
   Self-contained product gallery for the [matter_gallery] shortcode.
   No dependency on WC/Flexslider CSS — every visual is defined here.

   Layout:
     - Square 1:1 viewer (aspect-ratio) with overflow:hidden
     - Track that's 100% wide and translates horizontally
     - Each slide is 100% wide of the viewport (slides * 100% = total width)
     - Thumbnail strip below, horizontal scroll on overflow
   ════════════════════════════════════════════════════════════════════════ */

.mc-gallery {
  width: 100%;
  /* v4.6.4 — Position relative so the absolutely-positioned thumb
     strip can overlay the viewport bottom. */
  position: relative;
  font-family: var(--m-font, "Plus Jakarta Sans", system-ui, sans-serif);
}

/* ── Viewer ────────────────────────────────────────────────────────── */

body .mc-gallery .mc-gallery__viewport {
  position: relative;
  /* Aspect default is 1:1 — Rafael's variation images are 1:1 square.
     Configurable via CSS variable for per-product overrides:
       :root { --mc-gallery-aspect: 4 / 5; }
     or per-instance via inline style on .mc-gallery. */
  aspect-ratio: var(--mc-gallery-aspect, 1 / 1);
  overflow: hidden;
  /* Site convention: 12px radius, 1px border. Rafael uses these on
     all card-like surfaces site-wide, not the default 50%/circular. */
  border-radius: 12px !important;
  border: 1px solid var(--m-border, #ebebeb) !important;
  background: var(--m-surface, var(--mx-global-color-text, #F9F9F9));
  /* iOS Safari: don't let pointer drags initiate page-level pan */
  touch-action: pan-y pinch-zoom;
}

.mc-gallery__track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 320ms cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}

.mc-gallery__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  position: relative;
}

/* Product-image slides — image fills the slide via object-fit:contain.
   contain not cover so we never crop the product photo. */
.mc-gallery__slide > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  image-rendering: -webkit-optimize-contrast;
}

/* Mockup slides — the customizer's .mc-mockup stage is moved inside.
   Stretch it to fill the slide so its own aspect-ratio (4:4.5) matches
   the viewport (also 4:4.5 by default) and the t-shirt fills edge to
   edge. */
.mc-gallery__slide--mockup,
.mc-gallery__slide--mockup .mc-mockup,
.mc-gallery__slide--mockup .mc-mockup__stage {
  width: 100%;
  height: 100%;
}
/* Stage's fixed aspect-ratio is now redundant inside the gallery slide
   (the slide controls height). Letting height:100% take precedence. */
.mc-gallery__slide--mockup .mc-mockup__stage {
  aspect-ratio: auto;
}

/* ── Arrows ──────────────────────────────────────────────────────────── */

/* Square arrows with 12px radius — Rafael's site convention. Default
   was 50% (circular) which doesn't match. Also smaller size (36px) and
   subtler shadow because they sit on a bordered viewport now. */
body .mc-gallery .mc-gallery__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  padding: 0 !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .9) !important;
  border: 1px solid var(--m-border, #ebebeb) !important;
  color: #0f0f0f !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
  transition: background 180ms, transform 180ms, opacity 180ms;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 2;
}
body .mc-gallery .mc-gallery__arrow > svg {
  stroke: #0f0f0f !important;
  fill: none !important;
  width: 18px;
  height: 18px;
}
body .mc-gallery .mc-gallery__arrow:hover {
  background: #ffffff !important;
  transform: translateY(-50%) scale(1.05);
}
body .mc-gallery .mc-gallery__arrow:active {
  transform: translateY(-50%) scale(.95);
}
body .mc-gallery .mc-gallery__arrow:disabled {
  opacity: 0;
  pointer-events: none;
}
body .mc-gallery .mc-gallery__arrow--prev { left: 10px; }
body .mc-gallery .mc-gallery__arrow--next { right: 10px; }

/* v4.6.5 — Arrows visible on ALL devices (including touch).
   Previously hidden on `hover: none` because swipe was the primary
   touch nav, but swipe is now removed (artwork drag conflict on
   mockup slides) so arrows must be available everywhere. */

/* ── Thumbnails (overlay, glass) ────────────────────────────────────── */

/* Positioned absolute over the bottom of the viewport so they don't push
   content below the fold. Rafael's feedback in v4.6.3: the strip below
   the viewport was getting cut off above the fold on mobile and the
   user couldn't see all thumbnails. Overlay placement fixes that.

   Glass background (white .7 + backdrop blur) keeps them legible over
   light AND dark variation images. Active thumb is fully opaque with
   a dark border; inactive thumbs are 40% opacity for a clear visual
   selection state. */
body .mc-gallery .mc-gallery__thumbs {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
  border: 1px solid var(--m-border, #ebebeb);
  z-index: 3;
  max-width: calc(100% - 20px);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
/* Hide scrollbar in WebKit too */
body .mc-gallery .mc-gallery__thumbs::-webkit-scrollbar {
  display: none;
}

body .mc-gallery .mc-gallery__thumb {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  padding: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: transparent !important;
  cursor: pointer;
  overflow: hidden;
  opacity: 0.45;
  transition: opacity 180ms, border-color 180ms;
  scroll-snap-align: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow: none !important;
  outline: none;
}
body .mc-gallery .mc-gallery__thumb:hover {
  opacity: 0.75;
}
body .mc-gallery .mc-gallery__thumb.is-active {
  opacity: 1;
  border-color: #0f0f0f !important;
}
body .mc-gallery .mc-gallery__thumb > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Focus ring for keyboard nav */
body .mc-gallery .mc-gallery__arrow:focus-visible,
body .mc-gallery .mc-gallery__thumb:focus-visible {
  outline: 2px solid #4a7259 !important;
  outline-offset: 2px;
}