/* =========================================================
   30-gallery.css — BeautyTrouvailles Product Gallery
   Version: 3.0 — Premium Image Showcase
   
   Contents:
   1. Gallery Container
   2. Main Image Card
   3. Badge Stack
   4. Zoom Button
   5. Thumbnails
   6. Image Counter
   7. WooCommerce Badge Override
   ========================================================= */

/* =========================
   1. GALLERY CONTAINER
   ========================= */
.bt-custom-product-page .bt-gallery {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--bt-space-3);
}

/* =========================
   2. MAIN IMAGE CARD
   Badges and zoom anchored here
   ========================= */
.bt-custom-product-page .bt-gallery-main {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--bt-card-radius);
  overflow: hidden;
  background: var(--bt-bg-card);
  border: var(--bt-card-border);
  box-shadow: var(--bt-shadow-md);
  
  /* Grid for perfect centering */
  display: grid;
  place-items: center;
  
  /* Stacking context */
  isolation: isolate;
}

.bt-custom-product-page .bt-main-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: clamp(12px, 3vw, 24px);
  transition: transform var(--bt-transition-slow);
  will-change: transform;
  /* GPU acceleration */
  transform: translateZ(0);
  backface-visibility: hidden;
}

.bt-custom-product-page .bt-gallery-main:hover .bt-main-image {
  transform: scale(1.02) translateZ(0);
}

/* =========================
   3. BADGE STACK
   Positioned inside main card
   ========================= */
.bt-custom-product-page .bt-badge-stack {
  position: absolute;
  z-index: var(--bt-z-dropdown);
  top: var(--bt-space-4);
  left: var(--bt-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--bt-space-2);
  pointer-events: none;
}

.bt-custom-product-page .bt-badge {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--bt-space-2);
  padding: var(--bt-space-2) var(--bt-space-3);
  border-radius: var(--bt-radius-full);
  font-weight: 800;
  font-size: var(--bt-text-sm);
  letter-spacing: 0.2px;
  line-height: var(--bt-leading-none);
  
  /* Glass effect */
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: var(--bt-shadow-sm);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Sale badge - gradient pink */
.bt-custom-product-page .bt-badge-sale {
  color: #fff;
  background: linear-gradient(90deg, var(--bt-pink), var(--bt-pink-2));
  border: none;
  box-shadow: var(--bt-shadow-pink);
}

/* Hot/Bestseller badge */
.bt-custom-product-page .bt-badge-hot i,
.bt-custom-product-page .bt-badge-auth i {
  color: var(--bt-pink);
}

/* =========================
   4. ZOOM BUTTON
   ========================= */
.bt-custom-product-page .bt-zoom-btn {
  position: absolute;
  z-index: var(--bt-z-dropdown);
  right: var(--bt-space-3);
  bottom: var(--bt-space-3);
  
  width: 44px;
  height: 44px;
  border: none;
  border-radius: var(--bt-radius-full);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  
  display: grid;
  place-items: center;
  cursor: pointer;
  
  box-shadow: var(--bt-shadow-md);
  transition: transform var(--bt-transition-base),
              box-shadow var(--bt-transition-base);
  will-change: transform, box-shadow;
  /* GPU acceleration */
  transform: translateZ(0);
}

.bt-custom-product-page .bt-zoom-btn svg {
  width: 20px;
  height: 20px;
  color: var(--bt-navy);
  transition: color var(--bt-transition-fast);
}

.bt-custom-product-page .bt-zoom-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--bt-shadow-lg);
}

.bt-custom-product-page .bt-zoom-btn:hover svg {
  color: var(--bt-pink);
}

.bt-custom-product-page .bt-zoom-btn:active {
  transform: translateY(0);
}

/* =========================
   5. THUMBNAILS
   ========================= */
.bt-custom-product-page .bt-gallery-thumbs {
  display: flex;
  gap: var(--bt-space-3);
  overflow-x: auto;
  padding-bottom: var(--bt-space-2);
  
  /* Smooth scrolling */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  
  /* Hide scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--bt-border) transparent;
}

.bt-custom-product-page .bt-gallery-thumbs::-webkit-scrollbar {
  height: 4px;
}

.bt-custom-product-page .bt-gallery-thumbs::-webkit-scrollbar-thumb {
  background: var(--bt-border);
  border-radius: var(--bt-radius-full);
}

.bt-custom-product-page .bt-thumb {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: var(--bt-radius-lg);
  border: 2px solid transparent;
  background: var(--bt-bg-card);
  overflow: hidden;
  cursor: pointer;
  
  box-shadow: var(--bt-shadow-sm);
  transition: border-color var(--bt-transition-base),
              transform var(--bt-transition-base),
              box-shadow var(--bt-transition-base);
  will-change: transform, border-color, box-shadow;
  /* GPU acceleration */
  transform: translateZ(0);
  contain: layout style paint;
}

.bt-custom-product-page .bt-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bt-custom-product-page .bt-thumb:hover {
  border-color: var(--bt-pink-subtle);
  transform: translateY(-1px);
}

.bt-custom-product-page .bt-thumb.active {
  border-color: var(--bt-pink-border);
  box-shadow: var(--bt-shadow-md);
  transform: translateY(-2px);
}

/* =========================
   6. IMAGE COUNTER
   ========================= */
.bt-custom-product-page .bt-image-counter {
  font-size: var(--bt-text-sm);
  font-weight: 700;
  color: var(--bt-muted);
  text-align: right;
}

/* =========================
   7. WOOCOMMERCE BADGE OVERRIDE
   Hide Woo's default sale badge
   ========================= */
.bt-custom-product-page .onsale,
.bt-custom-product-page .woocommerce span.onsale {
  display: none;
}

/* =========================
   RESPONSIVE
   ========================= */
@media (min-width: 992px) {
  .bt-custom-product-page .bt-gallery-main {
    max-height: 640px;
  }
}

@media (max-width: 767px) {
  .bt-custom-product-page .bt-thumb {
    width: 56px;
    height: 56px;
    border-radius: var(--bt-radius-md);
  }
}

@media (max-width: 520px) {
  .bt-custom-product-page .bt-badge-stack {
    top: var(--bt-space-3);
    left: var(--bt-space-3);
  }
  
  .bt-custom-product-page .bt-badge {
    font-size: var(--bt-text-xs);
    padding: 6px 10px;
  }
  
  .bt-custom-product-page .bt-zoom-btn {
    width: 40px;
    height: 40px;
    right: var(--bt-space-2);
    bottom: var(--bt-space-2);
  }
  
  .bt-custom-product-page .bt-thumb {
    width: 52px;
    height: 52px;
  }
}