/* Layout: constrain the gallery width so content can sit to the right */
.ax-product-gallery.images {
  max-width: 520px; /* adjust to fit two-column layout */
}

/* Main image frame */
.ax-product-gallery__main {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  background: #fff;
  padding: 16px;
  position: relative;
}

.ax-product-gallery__main img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Navigation arrows */
.ax-product-gallery__main .ax-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  color: #111;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 2;
}
.ax-product-gallery__main .ax-prev { left: -22px; }
.ax-product-gallery__main .ax-next { right: -22px; }

.ax-product-gallery__main .ax-nav:hover { border-color: #f6623c; }

/* Horizontal thumbnails strip */
.ax-product-gallery__thumbs {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin: 16px 0 0 0;
  padding: 0;
}

.ax-product-gallery__thumbs .ax-thumb {
  display: block;
  width: 100%;
  padding: 6px;
  border-radius: 8px;
  outline: 2px solid rgba(0,0,0,0.06); /* default subtle frame */
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: outline-color .2s ease, box-shadow .2s ease;
}

.ax-product-gallery__thumbs .ax-thumb:hover {
  outline-color: rgba(0,0,0,0.12);
}

.ax-product-gallery__thumbs .ax-thumb.is-active {
  outline-color: #f6623c; /* match product hover red */
  box-shadow: 0 0 0 6px rgba(220,38,38,0.12);
}

.ax-product-gallery__thumbs .ax-thumb-image {
  width: 100%;
  border-radius: 6px;
}

@media (max-width: 768px) {
  .ax-product-gallery__thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
} 

/* Extra description spacing */
.ax-extra-description {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.6;
}

/* Lightbox: make main image feel zoomable */
.ax-product-gallery__main img { cursor: zoom-in; }

/* Lightbox overlay */
.ax-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.95);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2147483646;
}
.ax-lightbox.active { display: flex; }

.ax-lightbox__img {
  max-width: 95vw;
  max-height: 95vh;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 20px 80px rgba(0,0,0,0.5);
}

.ax-lightbox__close,
.ax-lightbox__nav {
  position: fixed;
  border-radius: 9999px;
  background: rgba(255,255,255,0.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.ax-lightbox__close {
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
}

.ax-lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
}

.ax-lightbox__prev { left: 20px; }
.ax-lightbox__next { right: 20px; }

.ax-lightbox__close:hover,
.ax-lightbox__nav:hover { background: rgba(255,255,255,0.2); }

@media (max-width: 768px) {
  .ax-lightbox__nav { width: 48px; height: 48px; }
} 

/* AX: Center thumbnails under main image on all viewports */
.ax-product-gallery__thumbs {
  grid-template-columns: repeat(auto-fit, 84px) !important;
  justify-content: center !important;
  gap: 12px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (min-width: 769px) {
  .ax-product-gallery__thumbs { gap: 16px !important; grid-template-columns: repeat(auto-fit, 96px) !important; }
} 

/* AX: Mobile - keep thumbnails on a single row */
@media (max-width: 768px) {
  .ax-product-gallery__thumbs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 12px !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
  }
  .ax-product-gallery__thumbs .ax-thumb {
    flex: 0 0 84px !important;
    width: 84px !important;
  }
  .ax-product-gallery__thumbs::-webkit-scrollbar { display: none; }
} 

/* Hide gallery arrows on mobile */
@media (max-width: 768px) {
  .ax-product-gallery__main .ax-nav { display: none !important; }
}

/* AX: Tablet widths - ensure thumbs visible and closer to main image */
@media (min-width: 768px) and (max-width: 1060px) {
  .ax-product-gallery__thumbs {
    margin-top: 6px !important;
    position: relative !important;
    z-index: 50 !important;
  }
} 

/* AX: Prevent hover ring from being clipped on mobile */
.ax-product-gallery.images { overflow: visible !important; }
.ax-product-gallery__thumbs { position: relative !important; z-index: 30 !important; }
.ax-product-gallery__thumbs .ax-thumb { position: relative !important; z-index: 1 !important; }
.ax-product-gallery__thumbs .ax-thumb:hover,
.ax-product-gallery__thumbs .ax-thumb.is-active { z-index: 2 !important; }
@media (max-width: 768px) {
  .ax-product-gallery__thumbs { overflow-x: auto !important; overflow-y: visible !important; padding: 8px 0 !important; }
} 

/* AX: Mobile - add side padding so first/last thumb ring isn't clipped */
@media (max-width: 768px) {
  .ax-product-gallery__thumbs {
    padding-left: 14px !important;
    padding-right: 14px !important;
    scroll-padding-left: 14px !important;
    scroll-padding-right: 14px !important;
  }
} 
/* AX: Mobile - align gallery width to summary width and prevent overflow */
@media (max-width: 768px) {
  .ax-product-gallery.images { width: calc(100% + 50px) !important; max-width: none !important; position: relative; left: 50%; transform: translateX(calc(-50% - 30px)); margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box; }
  .ax-product-gallery__main { margin-left: 0 !important; margin-right: 0 !important; max-width: 100% !important; }
  .ax-product-gallery__thumbs { margin-left: 0 !important; margin-right: 0 !important; max-width: 100% !important; }
  .ax-product-gallery__main .ax-prev { left: 8px; }
  .ax-product-gallery__main .ax-next { right: 8px; }
} 

/* Hide gallery arrows on mobile */
@media (max-width: 768px) {
  .ax-product-gallery__main .ax-nav { display: none !important; }
}