.hoc-media{display:block;width:100%;aspect-ratio:var(--hoc-ratio);background-color:var(--hoc-surface);background-position:center;background-repeat:no-repeat;background-size:var(--hoc-media-zoom, var(--hoc-media-fit));transition:opacity .25s}.hoc-media.is-loading{opacity:.35}.hoc-media--fill{background-size:cover}.hoc-media img{width:100%;height:100%;object-fit:var(--hoc-media-fit)}.hoc-media--fill img{object-fit:cover}.product-card-wrapper .card__inner.ratio,.card--media .card__inner.ratio,.product__media-wrapper .ratio,.product__media-item .ratio,.thumbnail-list__item .ratio,.quick-add-modal .product__media-wrapper .ratio{--ratio-percent: var(--hoc-ratio-percent) !important}.product-card-wrapper .card__inner:not(.ratio),.card--media .card__inner:not(.ratio){position:relative;aspect-ratio:var(--hoc-ratio)}.product-card-wrapper .card__inner:not(.ratio)>.card__media,.card--media .card__inner:not(.ratio)>.card__media{position:absolute;top:0;right:0;bottom:0;left:0}.product-card-wrapper .card__inner,.product-card-wrapper .card__media,.product-card-wrapper .card__media .media,.card--media .card__inner,.card--media .card__media,.card--media .card__media .media,.product__media-wrapper .media,.product__media-item .media,.thumbnail-list__item .media{background-color:var(--hoc-surface)!important;background-image:none!important}.product-card-wrapper .card__media .media>img,.product-card-wrapper .card__media .media>svg,.card--media .card__media .media>img,.product__media-wrapper .media>img,.product__media-item .media>img,.thumbnail-list__item .media>img,.quick-add-modal .product__media-wrapper .media>img{object-fit:var(--hoc-media-fit)!important;padding:var(--hoc-media-pad);background-color:transparent!important}.product-card-wrapper .media--hover-effect>img+img{object-fit:var(--hoc-media-fit)!important}.product-card-wrapper .card__media .placeholder-svg{width:60%;height:60%;margin:auto;top:0;right:0;bottom:0;left:0;position:absolute}.banner__media>img,.slideshow__media>img,.image-with-text__media>img,.collection-hero__image-container>img,.multicolumn-card__image-wrapper .media>img,.hoc-media--fill img{object-fit:cover!important;padding:0}
/*# sourceMappingURL=/cdn/shop/t/15/assets/hoc-media.css.map */