.product-gallery { width: 100%; }
.product-gallery__main { align-items: center; aspect-ratio: 4 / 3; background: #f8f9fa; border: 1px solid #d8dde2; border-radius: .5rem; display: flex; justify-content: center; overflow: hidden; padding: 0; position: relative; width: 100%; }
.product-gallery__main:not(.product-gallery__main--placeholder) { cursor: zoom-in; }
.product-gallery__main img { height: 100%; object-fit: cover; width: 100%; }
.product-gallery__main:focus-visible, .product-gallery__thumb:focus-visible, .product-gallery__arrow:focus-visible, .product-gallery-modal__close:focus-visible { outline: 3px solid #0176cd; outline-offset: 3px; }
.product-gallery__thumbnails { align-items: center; display: grid; gap: .5rem; grid-template-columns: auto minmax(0, 1fr) auto; margin-top: .75rem; }
.product-gallery__viewport { -ms-overflow-style: none; min-width: 0; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; scroll-behavior: smooth; scroll-snap-type: x mandatory; }
.product-gallery__viewport::-webkit-scrollbar { display: none; }
.product-gallery__list { display: flex; gap: .65rem; list-style: none; margin: 0; padding: 0; }
.product-gallery__item { flex: 0 0 152px; scroll-snap-align: start; }
.product-gallery__thumb { background: #fff; border: 2px solid transparent; border-radius: .4rem; display: block; overflow: hidden; padding: 0; transition: border-color .18s ease, box-shadow .18s ease; width: 100%; }
.product-gallery__thumb img { display: block; height: 114px; object-fit: cover; width: 100%; }
.product-gallery__thumb:hover, .product-gallery__thumb.is-active { border-color: #0176cd; box-shadow: 0 0 0 3px rgba(1, 118, 205, .16); }
.product-gallery__arrow { background: #fff; border: 1px solid #c8d0d8; border-radius: 50%; color: #1e2933; height: 2.5rem; padding: 0; width: 2.5rem; }
.product-gallery__arrow:hover { background: #f1f7fc; border-color: #0176cd; }
.product-gallery-modal .modal-content { background: #fff; border-radius: .5rem; }
.product-gallery-modal.is-open { background: rgba(0, 0, 0, .72); display: block; opacity: 1 !important; overflow-y: auto; }
.product-gallery-modal.is-open .modal-dialog { margin: 4vh auto; max-width: min(96vw, 1000px); }
.product-gallery-modal.is-open .modal-body { padding: 0; }
.product-gallery-modal-open { overflow: hidden; }
.product-gallery-modal figure { margin: 0; position: relative; }
.product-gallery-modal .product-cover-modal { display: block; height: auto; max-height: 82vh; object-fit: contain; width: 100%; }
.product-gallery-modal__close { background: rgba(0, 0, 0, .72); border: 0; border-radius: 50%; color: #fff; font-size: 2rem; height: 2.5rem; line-height: 1; padding: 0 0 .2rem; position: absolute; right: .75rem; top: .75rem; width: 2.5rem; z-index: 1; }
@media (min-width: 768px) { .product-gallery { margin-left: auto; margin-right: auto; max-width: 640px; } }
@media (max-width: 767px) { .product-gallery__thumbnails { gap: .35rem; grid-template-columns: minmax(0, 1fr); } .product-gallery__arrow { display: none; } .product-gallery__item { flex-basis: 88px; } .product-gallery__thumb img { height: 66px; } }