product-media{--product-media-gap: var(--space-token-s);--product-media-stage-background: var(--color-bg-gray);--product-media-control-background: var(--mask-light-gray-sm);display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--product-media-gap);align-content:start}@media screen and (max-width:767px){.product-media--mobile-contained{padding-inline:var(--container-horizontal-min-margin-mobile)}}@property --product-media-announcement-offset{syntax: "<length>"; inherits: false; initial-value: 0px;}@keyframes product-media-announcement-offset{0%{--product-media-announcement-offset: var(--announcement-bar-height, 0px)}to{--product-media-announcement-offset: 0px}}@media screen and (min-width:768px)and (max-width:1279px){product-media{position:sticky;top:max(var(--sticky-area-visible-height, 0px),calc((100dvh + var(--sticky-area-visible-height, 0px) + var(--product-media-announcement-offset) - var(--product-media-block-size, 100dvh)) / 2));transition:top .2s ease;animation:product-media-announcement-offset linear both;animation-timeline:scroll(root block);animation-range:0px var(--announcement-bar-height, 0px)}}@media screen and (min-width:1280px){product-media{position:sticky;top:calc(var(--sticky-area-visible-height, 0px) + var(--space-token-md));transition:top .2s ease}}@media screen and (min-width:1280px){product-media{--product-media-gap: var(--space-token-md)}}product-media>.product-gallery,product-media>[data-media-panel]{grid-column:1;grid-row:1;min-width:0}product-media>[data-media-panel]{display:none;align-self:start;aspect-ratio:1;overflow:hidden;background:var(--product-media-stage-background)}product-media[data-media=video]>[data-media-panel=video]{display:block}product-media[data-media="3d"]>[data-media-panel="3d"]{display:grid}product-media:not([data-media=gallery])>.product-gallery{visibility:hidden;pointer-events:none}.product-media__tabs{grid-column:1;grid-row:2;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-token-s)}.product-media__tab{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-5);min-block-size:28px;padding:var(--space-token-2xs) 18px;border-radius:var(--radius-xs);background:var(--mask-light-gray-s);color:var(--color-text-primary);font:var(--font-sm-medium);-webkit-backdrop-filter:blur(var(--backdrop-blur-sm));backdrop-filter:blur(var(--backdrop-blur-sm));cursor:pointer;transition:background-color .2s ease,color .2s ease}.product-media__tab:hover{background:var(--color-bg-gray-hover)}.product-media__tab[aria-pressed=true]{background:var(--color-button-dark);color:var(--color-text-white-primary)}.product-media__tab[aria-pressed=true]:hover{background:var(--color-button-dark-hover)}.product-media__tab[aria-pressed=true]:active{background:var(--color-button-dark-click)}.product-media__tab:focus-visible{outline:var(--stroke-line-2xl, 2px) solid var(--color-text-primary);outline-offset:2px}.product-media__tab-icon{flex-shrink:0}.product-gallery{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--product-media-gap)}.product-gallery__ar-wrapper{display:grid;gap:var(--space-25)}.product-gallery__media-list-wrapper{position:relative;display:grid;background:var(--product-media-stage-background)}.product-gallery__media-list{display:grid;grid:auto / auto-flow 100%;align-items:start;transition:height .1s}.product-gallery__media{position:relative;display:grid;grid-template:minmax(0,1fr) / minmax(0,1fr);place-items:center;aspect-ratio:1;overflow:hidden}.product-gallery__media[hidden],.product-gallery__thumbnail[hidden]{display:none}.product-gallery__media>img{inline-size:100%;block-size:100%;object-fit:contain;border-radius:0}.product-gallery__media>:is(video-media,model-media){inline-size:100%;border-radius:0}.product-gallery__zoom-trigger{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;padding:0;border:0;background:transparent;cursor:zoom-in}.product-gallery__zoom-trigger:focus-visible{outline:var(--stroke-line-2xl, 2px) solid var(--color-text-primary);outline-offset:-4px}.product-gallery__border-image{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;inline-size:100%;block-size:100%;object-fit:contain;pointer-events:none}.product-gallery__badges{position:absolute;inset-block-start:0;inset-inline-start:0;inset-inline-end:0;z-index:3;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-token-xs);padding:var(--space-token-base);pointer-events:none}.product-gallery__badge{--product-gallery-badge-max: var(--space-200, 80px);flex:none;display:grid;inline-size:min(var(--product-gallery-badge-mobile-width, var(--product-gallery-badge-max)),var(--product-gallery-badge-max));block-size:min(var(--product-gallery-badge-mobile-height, var(--product-gallery-badge-max)),var(--product-gallery-badge-max))}.product-gallery__badge picture{display:contents}.product-gallery__badge img{inline-size:100%;block-size:100%;object-fit:contain}@media screen and (min-width:700px){.product-gallery__badge{inline-size:min(var(--product-gallery-badge-width, var(--product-gallery-badge-max)),var(--product-gallery-badge-max));block-size:min(var(--product-gallery-badge-height, var(--product-gallery-badge-max)),var(--product-gallery-badge-max))}}.product-gallery__counter{position:absolute;inset-block-start:var(--space-25);inset-inline-end:var(--space-token-s);z-index:4;margin:0;padding:var(--space-token-2xs) var(--space-token-s);border-radius:var(--radius-full);background:var(--mask-light-gray-s);color:var(--color-text-primary);font:var(--font-sm-medium);-webkit-backdrop-filter:blur(var(--backdrop-blur-sm));backdrop-filter:blur(var(--backdrop-blur-sm));pointer-events:none;font-variant-numeric:tabular-nums}.product-gallery__arrow{position:absolute;padding:0;border:0;inset-block-start:50%;z-index:4;display:none;place-items:center;inline-size:55px;block-size:55px;border-radius:var(--radius-full);background:var(--product-media-control-background);color:var(--color-text-primary);-webkit-backdrop-filter:blur(var(--backdrop-blur-sm));backdrop-filter:blur(var(--backdrop-blur-sm));translate:0 -50%;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .2s ease,background-color .2s ease}.product-gallery__arrow--prev{inset-inline-start:var(--space-token-md)}.product-gallery__arrow--next{inset-inline-end:var(--space-token-md)}.product-gallery__arrow:hover{background:var(--mask-light-gray)}.product-gallery__media-list-wrapper:is(:hover,:focus-within)>.product-gallery__arrow:not([disabled]){opacity:1;pointer-events:auto}.product-gallery__arrow:focus-visible{outline:var(--stroke-line-2xl, 2px) solid var(--color-text-primary);outline-offset:2px}.product-gallery__thumbnail-list-wrapper{display:none}.product-gallery__thumbnail-list{display:grid;grid-auto-flow:column;grid-auto-columns:48px;justify-content:safe center;gap:var(--space-token-xs)}.product-gallery__thumbnail{position:relative;padding:0;display:grid;place-items:center;inline-size:48px;block-size:48px;overflow:hidden;border:var(--stroke-line-base, 1px) solid var(--stroke-20);border-radius:var(--radius-xs);background:var(--product-media-stage-background);cursor:pointer;transition:border-color .2s ease}.product-gallery__thumbnail:hover,.product-gallery__thumbnail[aria-current=true]{border-color:var(--stroke-40)}.product-gallery__thumbnail:focus-visible{outline:var(--stroke-line-2xl, 2px) solid var(--color-text-primary);outline-offset:2px}.product-gallery__thumbnail-image{inline-size:100%;block-size:100%;object-fit:contain}.product-gallery__media-badge{position:absolute;inset-block-end:var(--space-5);inset-inline-end:var(--space-5);display:grid;place-content:center;inline-size:var(--space-token-base);block-size:var(--space-token-base);border-radius:var(--radius-full);background:var(--color-bg-white);color:var(--color-text-primary)}@media screen and (min-width:1280px){.product-gallery__counter{display:none}.product-gallery__arrow{display:grid}.product-gallery__thumbnail-list-wrapper{display:block;--scroll-shadow-size: 0px}.product-media__tab{min-block-size:36px;padding-block:var(--space-token-xs)}}.product-media-video-wrapper{position:relative;background:var(--color-bg-black)}.product-media-video-wrapper .product-media-video--video,.product-media-video-wrapper .product-media-video--video video{inline-size:100%;block-size:100%}.product-media-video-wrapper .product-media-video--video video{object-fit:contain}.product-media-video-placeholder{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;display:grid;place-items:center;inline-size:100%;background:var(--color-bg-black);cursor:pointer}.product-media-video-placeholder[hidden]{display:none}.product-media-video-placeholder:focus-visible{outline:var(--stroke-line-2xl, 2px) solid var(--color-text-white-primary);outline-offset:-4px}.product-media-video-placeholder .video-preview-img{position:absolute;top:0;right:0;bottom:0;left:0;inline-size:100%;block-size:100%;object-fit:contain}.product-media-video-placeholder .video-play-button,.product-media-video-placeholder .product-media__spinner{position:relative;grid-area:1 / 1}.product-media-video-placeholder .video-play-button{inline-size:56px;block-size:56px}[data-video-state=idle] .video-play-button,[data-video-state=loading] .video-play-button,.product-media-video-placeholder .product-media__spinner{display:none}[data-video-state=loading] .product-media__spinner{display:block}[data-video-state=loading] .product-media-video-placeholder{cursor:progress}.product-media__spinner{inline-size:var(--size-12);block-size:var(--size-12);border:var(--stroke-line-2xl, 2px) solid var(--mask-light-white);border-block-start-color:var(--color-text-white-primary);border-radius:var(--radius-full);animation:product-media-spin .8s linear infinite}@keyframes product-media-spin{to{rotate:360deg}}model-3d-view{display:block;unicode-bidi:isolate}.product-media-3d-wrapper .model-3d-view,.product-media-3d-wrapper #model-3d-container{position:relative;inline-size:100%;block-size:100%;min-block-size:0}.product-media-3d-wrapper #model-3d-container{overflow:hidden;background:var(--model-3d-background, var(--product-media-stage-background))}.product-media-3d-wrapper #model-3d-container canvas{display:block}.model-3d-loading{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-token-s);background:var(--model-3d-background, var(--product-media-stage-background));color:var(--color-text-secondary);font:var(--font-sm-medium);pointer-events:none}.model-3d-loading .product-media__spinner{border-color:var(--stroke-10);border-block-start-color:var(--color-text-primary)}.model-3d-loading__progress{font-variant-numeric:tabular-nums}.model-3d-view.is-loaded .model-3d-loading{display:none}.model-3d-hint{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;display:grid;place-items:center;margin:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility .3s ease}.model-3d-hint__disc{display:grid;place-items:center;inline-size:88px;block-size:88px;border-radius:var(--radius-full);background:var(--mask-light-white);color:var(--color-text-white-primary);-webkit-backdrop-filter:blur(var(--backdrop-blur-sm));backdrop-filter:blur(var(--backdrop-blur-sm))}.model-3d-hint__label{position:absolute;inset-block-end:var(--space-token-md);display:inline-flex;align-items:center;min-block-size:var(--space-token-3xl);padding:0 var(--space-token-l);border-radius:var(--radius-xs);background:var(--color-button-dark);color:var(--color-text-white-primary);font:var(--font-base-medium)}.model-3d-view.is-loaded:not(.is-interacted) .model-3d-hint{opacity:1;visibility:visible}.model-3d-view.is-loaded:not(.is-interacted) .model-3d-hint__disc svg{animation:model-3d-hint-sway 1.6s ease-in-out infinite}@keyframes model-3d-hint-sway{0%,to{translate:-3px 0}50%{translate:3px 0}}.product-media-3d-wrapper #model-3d-container canvas{position:absolute;top:0;right:0;bottom:0;left:0;inline-size:100%!important;block-size:100%!important}@media(prefers-reduced-motion:reduce){.product-media__spinner{animation-duration:2.4s}.model-3d-view .model-3d-hint__disc svg{animation:none}.model-3d-hint{transition:none}product-media,.product-media__tab,.product-gallery__arrow,.product-gallery__thumbnail,.product-gallery__media-list{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/54/assets/component-product-media.css.map */
