.hero-thumbnail-gallery{display:flex;flex-direction:column;gap:2rem;width:100%;max-width:100%;overflow:hidden}.hero-image-container{position:relative;width:100%;background-color:#fff}.hero-image-wrapper{position:relative;width:100%;aspect-ratio:3 / 4;overflow:hidden;border-radius:8px;background-color:#f3f3f3}.hero-image-trigger{display:block;width:100%;height:100%;border:none;padding:0;background:none;cursor:zoom-in;transition:transform .3s ease}.hero-image-trigger:hover{transform:scale(1.02)}.hero-image-trigger:focus-visible{outline:2px solid #c9a876;outline-offset:4px}.hero-image{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .3s ease}.hero-image.active{opacity:1}.hero-image.loading{opacity:.5}.hero-image-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:#f3f3f3}.hero-image-placeholder svg{width:50%;height:auto;opacity:.3}.hero-video-container{width:100%;height:100%;position:relative}.hero-video-container .deferred-media{width:100%;max-width:100%;height:auto;position:relative;border-radius:0;display:block}.hero-video-container .deferred-media__poster{cursor:pointer;width:100%;height:100%;display:block}.hero-video-container .deferred-media__poster img{width:100%;height:100%;object-fit:contain;display:block}.hero-video-container .deferred-media__poster-button{width:64px;height:64px}.hero-video-container video,.hero-video-container iframe{width:100%;height:100%;object-fit:contain;background-color:#000;border-radius:8px}.thumbnail-gallery-container{width:100%;overflow-x:scroll!important;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thick;scrollbar-color:#c9a876 #e5e5e5;padding-bottom:28px;margin-bottom:.5rem}.thumbnail-gallery-container::-webkit-scrollbar{-webkit-appearance:none!important;height:18px!important;background:#e5e5e5!important;border-radius:10px;display:block!important}.thumbnail-gallery-container::-webkit-scrollbar:horizontal{height:18px!important}.thumbnail-gallery-container::-webkit-scrollbar-track{background:#e5e5e5!important;border-radius:10px;margin:0;display:block!important;box-shadow:inset 0 0 4px #00000014}.thumbnail-gallery-container::-webkit-scrollbar-thumb{background:#c9a876!important;border-radius:10px;border:3px solid #e5e5e5;min-width:60px!important;display:block!important;box-shadow:0 1px 3px #0000001f}.thumbnail-gallery-container::-webkit-scrollbar-thumb:hover{background:#967b52!important;box-shadow:0 2px 4px #00000029}.thumbnail-gallery-container::-webkit-scrollbar-thumb:active{background:#765f3a!important;box-shadow:inset 0 1px 2px #0003}.thumbnail-gallery{display:flex;gap:1rem;padding:.5rem 0;margin-bottom:0}.thumbnail-item{position:relative;flex-shrink:0;width:60px;height:60px;border:2px solid transparent;border-radius:6px;overflow:hidden;background:#fff;cursor:pointer;transition:all .2s ease;padding:0}.thumbnail-item img{width:100%;height:100%;object-fit:cover;display:block}.thumbnail-item:hover{border-color:#c9a876;transform:translateY(-2px);box-shadow:0 4px 12px #c9a87633}.thumbnail-item:focus-visible{outline:2px solid #c9a876;outline-offset:2px;border-color:#c9a876}.thumbnail-item.active{border-color:#c9a876;box-shadow:0 4px 12px #c9a8764d}.hero-video-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;pointer-events:none;z-index:1;transition:opacity .2s ease}.hero-image-trigger:hover .hero-video-badge{opacity:.9}.thumbnail-video-badge{position:absolute;bottom:4px;right:4px;width:24px;height:24px;background-color:#000000b3;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;pointer-events:none}@media screen and (min-width: 750px){.hero-thumbnail-gallery{gap:2.5rem}.hero-image-wrapper{aspect-ratio:4 / 5}.thumbnail-item{width:70px;height:70px}.thumbnail-gallery{gap:.75rem}}@media screen and (min-width: 990px){.hero-thumbnail-gallery{gap:2rem}.thumbnail-item{width:80px;height:80px}.thumbnail-gallery{gap:.75rem;justify-content:flex-start}}.hero-thumbnail-gallery.loading .hero-image-trigger{pointer-events:none}@media (prefers-reduced-motion: no-preference){.hero-image{animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}}@media (prefers-contrast: high){.thumbnail-item{border-color:currentColor}.thumbnail-item.active,.thumbnail-item:hover{border-width:3px}}
/*# sourceMappingURL=/cdn/shop/t/5/assets/component-hero-thumbnail-gallery.css.map */