.zop-product__media-item{position:relative;display:block;width:100%;margin-bottom:1rem;outline:none;transition:transform .2s ease-in-out}.zop-product__media-item:focus-visible{outline:2px solid var(--color-focus, #0066cc);outline-offset:2px;border-radius:4px}.zop-product__media-container{position:relative;width:100%;height:100%;padding-bottom:calc(100% / var(--aspect-ratio, 1));overflow:hidden;background-color:var(--color-background-secondary, #f8f8f8);border-radius:var(--border-radius, 8px)}.zop-product__media,.zop-product__media-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .3s ease-in-out}.zop-product__media-image{opacity:0;transition:opacity .3s ease-in-out,transform .3s ease-in-out}.zop-product__media-image.loaded{opacity:1}.zop-product__badge-container{position:absolute;top:.5rem;right:.5rem;z-index:2;display:flex;flex-direction:column;gap:.25rem;align-items:flex-end}.zop-product__badge{padding:.25rem .5rem;font-size:.75rem;font-weight:600;text-align:center;color:#fff;background-color:var(--color-accent, #ff4444);border-radius:4px;box-shadow:0 1px 3px #0000001a}.zop-product__badge--sale{background-color:var(--color-sale, #ff6b35)}.zop-product__badge-image{max-width:40px;max-height:40px;border-radius:4px;box-shadow:0 1px 3px #0000001a}.zop-product__media-zoom{position:absolute;top:0;left:0;width:100%;height:100%;background:transparent;border:none;cursor:zoom-in;z-index:1}.zop-product__media-icon{position:absolute;top:.5rem;left:.5rem;z-index:2;padding:.5rem;background-color:#ffffffe6;border-radius:50%;opacity:0;transition:opacity .2s ease-in-out;pointer-events:none}.zop-product__media-item:hover .zop-product__media-icon{opacity:1}.zop-product__xr-button{position:absolute;bottom:.5rem;left:.5rem;right:.5rem;z-index:2;padding:.5rem;font-size:.875rem;text-align:center;border:none;border-radius:4px;box-shadow:0 2px 8px #00000026;transition:transform .2s ease-in-out}.zop-product__xr-icon{margin-right:.25rem;font-size:1rem}.zop-product__video-container,.zop-product__external-video-container{position:relative;width:100%;height:100%}.zop-product__media-container:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,var(--color-background-secondary, #f0f0f0) 25%,var(--color-background-tertiary, #e0e0e0) 50%,var(--color-background-secondary, #f0f0f0) 75%);background-size:200% 100%;animation:loading-skeleton 1.5s infinite;z-index:0}@keyframes loading-skeleton{0%{background-position:200% 0}to{background-position:-200% 0}}@media (min-width: 481px){.zop-product__media-item{margin-bottom:1.5rem}.zop-product__badge-container{top:.75rem;right:.75rem;gap:.5rem}.zop-product__badge{padding:.375rem .75rem;font-size:.875rem}.zop-product__badge-image{max-width:50px;max-height:50px}.zop-product__xr-button{padding:.75rem;font-size:1rem}}@media (min-width: 769px){.zop-product__media-item{margin-bottom:2rem}.zop-product__badge-container{top:1rem;right:1rem}.zop-product__badge{padding:.5rem 1rem;font-size:1rem}.zop-product__badge-image{max-width:60px;max-height:60px}.zop-product__xr-button{padding:1rem;font-size:1.125rem}}@media (min-width: 1024px){.zop-product__media-container{border-radius:var(--border-radius-large, 12px)}.zop-product__badge{font-size:1.125rem}}@media (prefers-reduced-motion: reduce){.zop-product__media-item,.zop-product__media-image,.zop-product__media-icon,.zop-product__xr-button{transition:none}.zop-product__media-item:hover,.zop-product__media-item:hover .zop-product__media-image{transform:none}@keyframes loading-skeleton{0%,to{background-position:0% 0}}}@media (prefers-contrast: high){.zop-product__badge{border:2px solid currentColor}.zop-product__media-item:focus-visible{outline-width:3px}}@media (prefers-color-scheme: dark){.zop-product__media-container{background-color:var(--color-background-secondary-dark, #2a2a2a)}.zop-product__media-icon{background-color:#000c}.zop-product__media-container:before{background:linear-gradient(90deg,var(--color-background-secondary-dark, #2a2a2a) 25%,var(--color-background-tertiary-dark, #3a3a3a) 50%,var(--color-background-secondary-dark, #2a2a2a) 75%)}}@media print{.zop-product__media-zoom,.zop-product__xr-button,.zop-product__media-icon{display:none}.zop-product__media-item{break-inside:avoid}}
/*# sourceMappingURL=/cdn/shop/t/142/assets/zop-product-thumbnail.css.map */