/* ZooMag r30.3 — larger product photo + bottom thumbnail dock.
   Loaded after r30.1 so the gallery can be adjusted without reopening the
   older accumulated CSS layers. Product images always remain uncropped. */

.zoohub-product-showcase {
  --zm-r303-gallery-border: rgba(226, 196, 170, .82);
  --zm-r303-gallery-border-soft: rgba(237, 219, 202, .92);
  --zm-r303-gallery-green: #1fa06f;
  --zm-r303-gallery-shadow: 0 18px 42px rgba(83, 53, 30, .10);
}

/* A calm frame around the complete gallery card. */
.zoohub-product-showcase .zoohub-gallery-den {
  padding: 12px !important;
  border: 1px solid var(--zm-r303-gallery-border) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.985), rgba(255,249,244,.97)) !important;
  box-shadow:
    var(--zm-r303-gallery-shadow),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
  overflow: hidden !important;
}

.zoohub-product-showcase .zoohub-image-frame {
  border: 1px solid var(--zm-r303-gallery-border-soft) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 224, 194, .20), transparent 34%),
    radial-gradient(circle at 90% 18%, rgba(203, 228, 255, .18), transparent 32%),
    #fff !important;
  box-shadow:
    inset 0 0 0 5px rgba(255,255,255,.72),
    0 10px 24px rgba(83, 53, 30, .08) !important;
}

/* Use more of the frame while preserving the whole product image. */
.zoohub-product-showcase .zoohub-gallery-image,
.zoohub-product-showcase #zoohub-main-image,
.zoohub-product-showcase #zoohub-main-image[data-index] {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  padding: 2px !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Thumbnail dock: six photos fit at once; the rest scroll horizontally. */
.zoohub-product-showcase .zoohub-gallery-thumbnails {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 12px 0 0 !important;
  padding: 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  scrollbar-width: thin;
  scrollbar-color: rgba(31,160,111,.38) transparent;
  border: 1px solid rgba(232, 211, 192, .86) !important;
  border-radius: 17px !important;
  background: rgba(255,255,255,.82) !important;
  box-shadow: 0 8px 20px rgba(83, 53, 30, .07) !important;
}

.zoohub-product-showcase .zoohub-gallery-thumbnails::-webkit-scrollbar {
  height: 5px;
}

.zoohub-product-showcase .zoohub-gallery-thumbnails::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(31,160,111,.38);
}

.zoohub-product-showcase .zoohub-gallery-thumb {
  flex: 0 0 calc((100% - 40px) / 6) !important;
  width: auto !important;
  min-width: 62px !important;
  min-height: 0 !important;
  scroll-snap-align: start;
  border-radius: 13px !important;
}

.zoohub-product-showcase .zoohub-thumb-frame {
  min-height: 0 !important;
  aspect-ratio: 1 / 1 !important;
  border: 1px solid rgba(226, 211, 197, .96) !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 5px 13px rgba(83, 53, 30, .07) !important;
}

.zoohub-product-showcase .zoohub-gallery-thumb:hover .zoohub-thumb-frame {
  transform: translateY(-1px) !important;
  border-color: rgba(31,160,111,.52) !important;
  box-shadow: 0 8px 16px rgba(31,160,111,.12) !important;
}

.zoohub-product-showcase .zoohub-gallery-thumb--active .zoohub-thumb-frame {
  border-color: var(--zm-r303-gallery-green) !important;
  box-shadow:
    0 0 0 2px rgba(31,160,111,.13),
    0 8px 18px rgba(31,160,111,.16) !important;
}

.zoohub-product-showcase .zoohub-gallery-thumb:focus-visible {
  outline: 3px solid rgba(31,160,111,.24) !important;
  outline-offset: 2px !important;
}

/* Desktop: equal-height columns and thumbnails anchored to the gallery bottom. */
@media (min-width: 1100px) {
  .zoohub-product-showcase .zoohub-product-jungle {
    align-items: stretch !important;
  }

  .zoohub-product-showcase .zoohub-gallery-den {
    align-self: stretch !important;
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .zoohub-product-showcase .zoohub-gallery-habitat {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .zoohub-product-showcase .zoohub-gallery-main {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  .zoohub-product-showcase .zoohub-gallery-featured {
    flex: 0 0 auto !important;
  }

  .zoohub-product-showcase .zoohub-gallery-thumbnails {
    margin-top: auto !important;
  }
}

/* A modest 7–8% enlargement compared with r30.1. */
@media (min-width: 1440px) {
  .zoohub-product-showcase .zoohub-product-jungle {
    grid-template-columns: minmax(500px, 570px) minmax(0, 1fr) !important;
    gap: 28px !important;
  }

  .zoohub-product-showcase .zoohub-gallery-den {
    max-width: 570px !important;
  }

  .zoohub-product-showcase .zoohub-gallery-featured,
  .zoohub-product-showcase .zoohub-image-frame {
    max-height: 540px !important;
  }
}

@media (min-width: 1200px) and (max-width: 1439.98px) {
  .zoohub-product-showcase .zoohub-product-jungle {
    grid-template-columns: minmax(435px, 490px) minmax(0, 1fr) !important;
    gap: 21px !important;
  }

  .zoohub-product-showcase .zoohub-gallery-den {
    max-width: 490px !important;
  }

  .zoohub-product-showcase .zoohub-gallery-featured,
  .zoohub-product-showcase .zoohub-image-frame {
    max-height: 465px !important;
  }
}

@media (max-width: 1099.98px) {
  .zoohub-product-showcase .zoohub-gallery-den,
  .zoohub-product-showcase .zoohub-gallery-habitat,
  .zoohub-product-showcase .zoohub-gallery-main {
    height: auto !important;
  }

  .zoohub-product-showcase .zoohub-gallery-main {
    display: grid !important;
    gap: 10px !important;
  }

  .zoohub-product-showcase .zoohub-gallery-thumb {
    flex-basis: calc((100% - 24px) / 4) !important;
  }
}

@media (max-width: 575.98px) {
  .zoohub-product-showcase .zoohub-gallery-den {
    padding: 9px !important;
    border-radius: 18px !important;
  }

  .zoohub-product-showcase .zoohub-image-frame {
    border-radius: 15px !important;
  }

  .zoohub-product-showcase .zoohub-gallery-thumbnails {
    padding: 6px !important;
    border-radius: 14px !important;
  }

  .zoohub-product-showcase .zoohub-gallery-thumb {
    min-width: 58px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zoohub-product-showcase .zoohub-gallery-thumb,
  .zoohub-product-showcase .zoohub-thumb-frame,
  .zoohub-product-showcase .zoohub-gallery-image {
    transition: none !important;
  }
}