mg-stories-carousel{display:block;position:relative;inline-size:100%}.mg-stories-carousel__heading{font-size:var(--font-size-md);font-weight:var(--font-weight-bold);letter-spacing:var(--letter-spacing-normal);text-transform:uppercase;margin:0 0 var(--space-md);color:var(--color-headings)}.mg-stories-carousel__container{position:relative}.mg-stories-carousel__track{display:flex;gap:var(--ns-gap, .5rem);justify-content:safe center;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scroll-padding-inline-start:var(--space-xs);scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-block:var(--space-xs);padding-inline:var(--space-2xs)}.mg-stories-carousel__track::-webkit-scrollbar{display:none}.mg-story-tile{flex:1 1 var(--ns-tile-width, 80px);min-inline-size:min(var(--ns-tile-width, 80px),7rem);max-inline-size:calc(var(--ns-tile-width, 80px) * 1.4);background:transparent;border:0;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:var(--space-xs);scroll-snap-align:start;font:inherit;color:inherit;transition:transform var(--duration-fast) var(--ease-out-back)}.mg-story-tile[data-color-scheme]{background-color:var(--color-background);color:var(--color-text)}.mg-story-tile:hover{transform:translateY(-2px)}.mg-story-tile:focus-visible{outline:2px solid var(--color-links);border-radius:var(--ns-tile-radius, 6px)}.mg-story-tile__media{position:relative;inline-size:100%;aspect-ratio:var(--ns-aspect, 2/3);border-radius:var(--ns-tile-radius, 6px);overflow:hidden;isolation:isolate;background:var(--color-border)}.mg-story-tile__media picture{border-radius:inherit}.mg-story-tile__video,.mg-story-tile__image,.mg-story-tile__placeholder{border-radius:inherit;position:absolute;top:0;right:0;bottom:0;left:0;inline-size:100%;block-size:100%;object-fit:cover;display:block}.mg-story-tile__placeholder svg{inline-size:100%;block-size:100%;object-fit:cover}.mg-story-tile__play{position:absolute;inset-block-end:var(--space-xs);inset-inline-end:var(--space-xs);inline-size:1.5rem;block-size:1.5rem;display:flex;align-items:center;justify-content:center;color:var(--color-overlay-text);opacity:var(--opacity-strong);pointer-events:none;filter:drop-shadow(0 1px 2px var(--color-overlay-bg))}.mg-story-tile__label{font-size:var(--font-size-xs);color:var(--color-text);text-align:center;inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:var(--font-weight-medium)}[data-shape=circle] .mg-stories-carousel__track{justify-content:flex-start;padding:var(--space-sm) var(--space-xs)}[data-shape=circle] .mg-story-tile{flex:0 0 var(--ns-tile-width, 72px);min-inline-size:0;max-inline-size:none}[data-shape=circle] .mg-story-tile__media{aspect-ratio:1;border-radius:var(--radius-circle);outline:2px solid var(--color-links);outline-offset:2px}[data-shape=circle] .mg-story-tile__play{display:none}.mg-stories-carousel__arrow{position:absolute;inset-block-start:50%;transform:translateY(-50%);inline-size:2rem;block-size:2rem;border-radius:var(--radius-circle);background:var(--color-background);border:1px solid var(--color-border);color:var(--color-text);display:none;align-items:center;justify-content:center;cursor:pointer;z-index:var(--z-local-2);box-shadow:var(--shadow-sm);transition:opacity var(--duration-fast) var(--ease-in-out-cubic),transform var(--duration-fast) var(--ease-out-back)}.mg-stories-carousel__arrow:hover{transform:translateY(-50%) scale(1.05)}.mg-stories-carousel__arrow:focus-visible{outline:2px solid var(--color-links)}.mg-stories-carousel__arrow--prev{inset-inline-start:-1rem}.mg-stories-carousel__arrow--next{inset-inline-end:-1rem}@media not (max-width:750px){.mg-stories-carousel__arrow:not([hidden]){display:flex}}.mg-stories-carousel__modal{--ns-stage-w: min(26rem, 92vw, 51.75dvh );--ns-top: calc(env(safe-area-inset-top, 0px) + var(--space-sm));inline-size:100vw;block-size:100dvh;max-inline-size:none;max-block-size:none;border:0;padding:0;margin:0;top:0;right:0;bottom:0;left:0;background:color-mix(in srgb,var(--color-overlay-bg-strong) 60%,black);color:var(--color-overlay-text);z-index:var(--z-modal)}.mg-stories-carousel__modal[open]{display:grid;place-items:center}.mg-stories-carousel__modal::backdrop{background:color-mix(in srgb,var(--color-overlay-bg-strong) 60%,black)}.mg-stories-carousel__modal-stage{position:relative;inline-size:var(--ns-stage-w);aspect-ratio:9 / 16;border-radius:var(--radius-lg);overflow:hidden;background:#000}.mg-stories-carousel__modal-stage:before,.mg-stories-carousel__modal-stage:after{content:"";position:absolute;inset-inline:0;z-index:var(--z-local-1);pointer-events:none}.mg-stories-carousel__modal-stage:before{inset-block-start:0;block-size:7rem;background:linear-gradient(color-mix(in srgb,black 40%,transparent),transparent)}.mg-stories-carousel__modal-stage:after{inset-block-end:0;block-size:9rem;background:linear-gradient(transparent,color-mix(in srgb,black 45%,transparent))}.mg-stories-carousel__modal-video,.mg-stories-carousel__modal-image{inline-size:100%;block-size:100%;object-fit:cover;display:block}.mg-stories-carousel__modal-image[hidden]{display:none}.mg-stories-carousel__modal-progress{position:absolute;inset-block-start:var(--ns-top);inset-inline:var(--space-sm);display:flex;gap:var(--space-2xs);z-index:var(--z-local-2);pointer-events:none}.mg-stories-carousel__modal-progress-bar{flex:1;block-size:.1875rem;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--color-overlay-text) 35%,transparent);overflow:hidden}.mg-stories-carousel__modal-progress-bar-fill{display:block;block-size:100%;inline-size:100%;transform:scaleX(0);transform-origin:left center;background:var(--color-overlay-text);transition:transform .05s linear}.mg-stories-carousel__modal-progress-bar.is-done .mg-stories-carousel__modal-progress-bar-fill{transform:scaleX(1)}.mg-stories-carousel__modal-tap{position:absolute;top:0;right:0;bottom:0;left:0;padding:0;border:0;background:transparent;cursor:pointer;z-index:var(--z-local-1)}.mg-stories-carousel__modal-play-icon{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;inline-size:4.5rem;block-size:4.5rem;display:grid;place-items:center;border-radius:var(--radius-circle);background:color-mix(in srgb,black 35%,transparent);-webkit-backdrop-filter:blur(.5rem);backdrop-filter:blur(.5rem);pointer-events:none;z-index:var(--z-local-2)}.mg-stories-carousel__modal-play-icon[hidden],.mg-stories-carousel__modal-mute[hidden],.mg-stories-carousel__modal-mute svg[hidden]{display:none}.mg-stories-carousel__btn{position:absolute;inline-size:2.75rem;block-size:2.75rem;display:grid;place-items:center;padding:0;border:0;border-radius:var(--radius-circle);background:transparent;color:var(--color-overlay-text);filter:drop-shadow(0 1px 2px color-mix(in srgb,black 55%,transparent));cursor:pointer;z-index:var(--z-popover);transition:background-color var(--duration-fast) var(--ease-out-quart),opacity var(--duration-fast) var(--ease-out-quart)}.mg-stories-carousel__btn:hover{background-color:color-mix(in srgb,var(--color-overlay-text) 16%,transparent)}.mg-stories-carousel__btn:focus-visible{outline:2px solid var(--color-overlay-text);outline-offset:-2px}.mg-stories-carousel__modal-close{inset-block-start:var(--space-md);inset-inline-end:var(--space-md)}.mg-stories-carousel__modal-mute{inset-block-start:calc(var(--ns-top) + var(--space-sm));inset-inline-end:var(--space-xs)}.mg-stories-carousel__modal-rail{display:contents}.mg-stories-carousel__modal-prev,.mg-stories-carousel__modal-next{inset-block-start:50%;translate:0 -50%;inline-size:3rem;block-size:3rem;background-color:color-mix(in srgb,var(--color-overlay-text) 12%,transparent)}.mg-stories-carousel__modal-prev{inset-inline-end:calc(50% + var(--ns-stage-w) / 2 + var(--space-md))}.mg-stories-carousel__modal-next{inset-inline-start:calc(50% + var(--ns-stage-w) / 2 + var(--space-md))}.mg-stories-carousel__modal-prev[disabled],.mg-stories-carousel__modal-next[disabled]{opacity:0;pointer-events:none}@media(max-width:750px){.mg-stories-carousel__modal{--ns-stage-w: 100vw}.mg-stories-carousel__modal-stage{block-size:100dvh;aspect-ratio:auto;border-radius:0}.mg-stories-carousel__modal-close{inset-block-start:calc(var(--ns-top) + var(--space-sm));inset-inline-end:var(--space-xs)}.mg-stories-carousel__modal-mute{inset-inline-end:var(--space-xl)}.mg-stories-carousel__modal-prev,.mg-stories-carousel__modal-next{inset-block:var(--space-2xl) var(--space-3xl);translate:none;inline-size:30%;block-size:auto;border-radius:0;background:none;filter:none}.mg-stories-carousel__modal-prev{inset-inline:0 auto}.mg-stories-carousel__modal-next{inset-inline:auto 0}.mg-stories-carousel__modal-prev svg,.mg-stories-carousel__modal-next svg{display:none}}.mg-stories-carousel__modal-card{position:absolute;inset-block-end:calc(env(safe-area-inset-bottom,0px) + var(--space-sm-plus));inset-inline:var(--space-sm-plus);display:flex;align-items:center;gap:var(--space-sm-plus);padding:var(--space-sm);background:var(--color-overlay-text);color:var(--color-headings);border-radius:.75rem;text-decoration:none;z-index:var(--z-local-2);box-shadow:0 4px 16px var(--color-overlay-bg);transition:transform var(--duration-fast) var(--ease-out-back)}.mg-stories-carousel__modal-card[hidden]{display:none}.mg-stories-carousel__modal-card:hover{transform:translateY(-2px)}.mg-stories-carousel__modal-card-image{inline-size:3rem;block-size:3rem;object-fit:cover;border-radius:.5rem;flex-shrink:0}.mg-stories-carousel__modal-card-image[hidden]{display:none}.mg-stories-carousel__modal-card-info{flex:1;min-inline-size:0;display:flex;flex-direction:column;gap:var(--space-2xs);overflow:hidden}.mg-stories-carousel__modal-card-title{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mg-stories-carousel__modal-card-price{font-size:var(--font-size-xs);opacity:var(--opacity-strong)}.mg-stories-carousel__modal-card-cta{flex-shrink:0;background:var(--color-overlay-bg-strong);color:var(--color-overlay-text);font-weight:var(--font-weight-semibold);font-size:var(--font-size-xs);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-pill)}@media(prefers-reduced-motion:reduce){.mg-story-tile,.mg-stories-carousel__arrow,.mg-stories-carousel__modal-prev,.mg-stories-carousel__modal-next,.mg-stories-carousel__modal-cta{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/10/assets/mg-stories-carousel.css.map */