/* ===============================
   PhotoSwipe Product Gallery Styles
   =============================== */

/* Main gallery wrapper */
.pswp-gallery { margin: 0 auto; }

/* Main image container */
.pswp-gallery .pswp-main-picture { position: relative; max-width: 100%; margin: 0 auto 10px; overflow: hidden; }

.pswp-gallery .pswp-main-picture:before { content: ""; display: block; padding-top: 100%; /* Square ratio */ }

.pswp-gallery .pswp-main-picture img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; /* Fill box completely */ border-radius: 6px; }

/* Thumbnail row - responsive, all scale evenly */
.pswp-gallery .pswp-thumbs { display: flex; flex-wrap: nowrap; /* never wrap */ justify-content: center; /* center thumbs horizontally */ align-items: stretch; /* same height */ margin-top: 10px; overflow: hidden; /* prevent overflow */ gap: 8px; /* spacing between thumbs */ }

/* Individual thumbnail */
.pswp-gallery .pswp-thumbs .pswp-thumb { flex: 1 1 0; /* equal share of space */ min-width: 0; /* allow shrinking below intrinsic size */ max-width: 100px; /* never exceed this */ aspect-ratio: 1 / 1; /* stay square */ position: relative; border: 1px solid #eee; border-radius: 8px; overflow: hidden; cursor: pointer; background: #fff; transition: border 0.2s, box-shadow 0.2s; }

.pswp-gallery .pswp-thumbs .pswp-thumb img { width: 100%; height: 100%; object-fit: cover; /* always cover thumbnail area */ border-radius: 8px; display: block; }

/* Active thumbnail highlight */
.pswp-gallery .pswp-thumbs .pswp-thumb.active { border-color: #007bff; box-shadow: 0 0 4px rgba(0, 123, 255, 0.5); }

/* Hover effect */
.pswp-gallery .pswp-thumbs .pswp-thumb:hover { border-color: #007bff; }

/* Video thumbnail */
.pswp-gallery .pswp-video a { display: inline-block; position: relative; width: 150px; height: 100px; margin: 0 5px 10px; border: 1px solid #eee; border-radius: 8px; overflow: hidden; cursor: pointer; background: #000; }

.pswp-gallery .pswp-video img { width: 100%; height: 100%; object-fit: cover; }

/* +N more indicator (scales with thumbs) */
.pswp-gallery .pswp-thumbs-more { flex: 1 1 0; /* scale evenly like thumbs */ min-width: 0; max-width: 100px; aspect-ratio: 1 / 1; border: 1px solid #eee; border-radius: 8px; cursor: pointer; position: relative; overflow: hidden; background: #000; /* fallback */ }

/* Blurred/darkened background layer */
.pswp-gallery .pswp-thumbs-more::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-size: cover; background-position: center; background-repeat: no-repeat; background-image: inherit; /* inline background-image used */ filter: blur(3px) brightness(0.6); z-index: 1; }

/* Crisp number overlay */
.pswp-gallery .pswp-thumbs-more::after { content: attr(data-count); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 18px; font-weight: 600; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.6); z-index: 2; }

/* Hover effect - reduce blur/darkness slightly */
.pswp-gallery .pswp-thumbs-more:hover::before { filter: blur(2px) brightness(0.8); }

/* Hide extra thumbs (still in DOM for PhotoSwipe) */
.pswp-thumbs .thumb-hidden { display: none !important; }


.pswp__button--arrow--prev { right: auto; left: -1px; border: 1px solid #aaa; }
.pswp__button--arrow--prev:hover { border: 1px solid #555; }

.pswp__button--arrow--next { right: -1px; border: 1px solid #aaa; }
.pswp__button--arrow--next:hover { border: 1px solid #555; }