/* =========================================================
   FT — SINGLE PRODUCT PAGE (THUMBNAIL GALLERY)
   ---------------------------------------------------------
   Scope:   Single product pages only (.single-product)
   Purpose: Overrides the default FlexSlider thumbnail
            behavior so the gallery displays as a clean
            vertical stack — main image on top, small square
            thumbnails centered beneath it — instead of the
            theme's default slider/carousel layout.
   
   What this does:
   1. LAYOUT — Uses flexbox column ordering to guarantee
      the main image always sits above the thumbnails,
      regardless of the theme's DOM order.
   2. THUMBNAILS — Displays as inline-block squares (58px)
      with even spacing, centered horizontally. All theme
      overlays, pseudo-elements, and opacity manipulations
      are killed so thumbnails show cleanly.
   3. MOBILE (≤980px) — Thumbnails wrap naturally instead
      of scrolling horizontally.
   4. DESKTOP (1200px+) — Constrains the entire gallery
      to 640px max-width, centered on the page.
   5. MAGNIFYING GLASS — Applies a grayscale filter to
      the WooCommerce gallery zoom icon so it doesn't
      clash with the page's neutral palette.
   ========================================================= */

/* --- GALLERY LAYOUT --- */

/* Keep FlexSlider nav in document flow */
.single-product .flex-control-nav {
  position: static;
}

/* Stack: image above thumbnails */
.single-product .woocommerce-product-gallery {
  display: flex;
  flex-direction: column;
}

.single-product .woocommerce-product-gallery__wrapper {
  order: 1;
}

.single-product .flex-control-nav.flex-control-thumbs {
  order: 2;
}

/* --- THUMBNAIL STRIP --- */

.single-product .flex-control-nav.flex-control-thumbs {
  display: block;
  position: static;
  height: auto !important;
  overflow: visible !important;
  text-align: center;
  margin-top: 2rem;
  padding: 0;
}

/* Square thumbnails */
.single-product .flex-control-nav.flex-control-thumbs li {
  display: inline-block;
  vertical-align: top;
  width: 58px;
  height: 58px;
  margin: 0.9em;
  box-shadow: none;
}

/* Clean thumbnail images — no overlays */
.single-product .flex-control-nav.flex-control-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1 !important;
  filter: none !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important;
}

/* Kill theme pseudo-element overlays */
.single-product .flex-control-nav.flex-control-thumbs a,
.single-product .flex-control-nav.flex-control-thumbs li::before,
.single-product .flex-control-nav.flex-control-thumbs li::after,
.single-product .flex-control-nav.flex-control-thumbs a::before,
.single-product .flex-control-nav.flex-control-thumbs a::after {
  box-shadow: none !important;
  content: none !important;
}

/* --- MOBILE — NATURAL WRAP --- */

@media (max-width: 980px) {
  .single-product .flex-control-nav.flex-control-thumbs {
    white-space: normal;
    overflow-x: visible;
    padding: 0 1rem;
  }
}

/* --- DESKTOP — WIDTH CONSTRAINT --- */

@media (min-width: 1200px) {
  .single-product .woocommerce-product-gallery {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* --- MAGNIFYING GLASS ICON --- */

.woocommerce-product-gallery__trigger img.emoji {
  filter: grayscale(1);
}