@charset "UTF-8";

/* Self-contained: override the three theme variables for another product. */
.product-movies {
    --movie-ink: #378259;
    --movie-tint: #edf8f2;
    --movie-line: #c7dfd1;
    --movie-width: min(420px, 38vw, 34svh);
    position: relative;
    z-index: 10;
    padding: 64px 0 48px;
    background: inherit;
    color: var(--movie-ink);
    text-align: center;
    overflow: hidden;
}

.product-movies[hidden] { display: none; }
.product-movies *, .product-movies *::before, .product-movies *::after { box-sizing: border-box; }
.product-movies__heading { padding: 0 24px; margin-bottom: 24px; }
.product-movies__eyebrow { margin: 0 0 10px; font-size: 11px; letter-spacing: .22em; }
.product-movies__heading h2 { margin: 0; color: inherit; font-size: 38px; letter-spacing: .14em; line-height: 1.4; }
.product-movies__intro { margin: 16px 0 0; font-size: 14px; letter-spacing: .08em; }
.product-movies__stage { width: min(1240px, 100%, calc(var(--movie-width) * 3 + 36px)); margin: 0 auto; }
.product-movies__viewport {
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    margin: 0 auto;
    padding: 24px max(0px, calc((100% - var(--movie-width)) / 2)) 34px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.product-movies__viewport::-webkit-scrollbar { display: none; }
.product-movies__card {
    flex: 0 0 var(--movie-width);
    min-width: 0;
    margin: 0;
    scroll-snap-align: center;
    scroll-snap-stop: always;
}
.product-movies__surface {
    position: relative;
    aspect-ratio: 9 / 16;
    border-radius: 20px;
    overflow: hidden;
    background: var(--movie-tint);
    box-shadow: 0 12px 32px #23563c12;
    transform: perspective(1200px) scale(.84) rotateY(7deg);
    transition: transform .36s ease, box-shadow .36s ease;
}
.product-movies__card[data-side="next"] .product-movies__surface { transform: perspective(1200px) scale(.84) rotateY(-7deg); }
.product-movies__card.is-active .product-movies__surface {
    transform: perspective(1200px) scale(1) rotateY(0);
    box-shadow: 0 16px 38px #23563c1c;
}
.product-movies__poster, .product-movies__video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.product-movies__video { background: #fff; }
.product-movies button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.product-movies__play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--movie-ink);
}
.product-movies__play-icon {
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    border: 1px solid #ffffffb3;
    background: #fffffff0;
    box-shadow: 0 4px 20px #23563c16;
    transition: transform .2s ease;
}
.product-movies__play-icon::after {
    content: "";
    width: 0;
    height: 0;
    margin-left: 4px;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 14px solid currentColor;
}
.product-movies__play:hover .product-movies__play-icon { transform: scale(1.07); }
.product-movies__card.is-started .product-movies__play,
.product-movies__card.is-started .product-movies__poster { display: none; }
.product-movies__caption { margin-top: 18px; font-size: 13px; line-height: 1.7; }
.product-movies__number { display: block; font-size: 11px; letter-spacing: .14em; margin-bottom: 5px; }
.product-movies__duration {
    position: absolute;
    right: 14px;
    bottom: 14px;
    padding: 2px 8px;
    border-radius: 10px;
    color: #fff;
    background: #21443180;
    font: 11px/1.6 Arial, sans-serif;
    pointer-events: none;
}
.product-movies__card.is-started .product-movies__duration { display: none; }
.product-movies__navigation { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 4px; }
.product-movies__arrow { width: 44px; height: 44px; padding: 0; border: 1px solid var(--movie-line); border-radius: 50%; background: #fff; color: inherit; }
.product-movies__arrow:disabled { opacity: .3; cursor: default; }
.product-movies__dots { display: flex; gap: 0; }
.product-movies__dot { display: grid; place-items: center; width: 32px; height: 44px; padding: 0; border: 0; background: transparent; color: inherit; }
.product-movies__dot::after { content: ""; width: 7px; height: 7px; border: 1px solid currentColor; border-radius: 50%; }
.product-movies__dot[aria-current="true"]::after { background: currentColor; }
.product-movies__status { min-height: 20px; margin: 14px 20px 0; font-size: 11px; letter-spacing: .08em; }
.product-movies :focus-visible { outline: 2px solid var(--movie-ink); outline-offset: 4px; }
.product-movies__play:focus-visible { outline-offset: -5px; border-radius: 20px; }

@media (max-width: 700px) {
    .product-movies { --movie-width: 84vw; padding: 56px 0 44px; }
    .product-movies__heading { margin-bottom: 24px; }
    .product-movies__heading h2 { font-size: 30px; }
    .product-movies__intro { font-size: 13px; }
    .product-movies__viewport { gap: 0; padding-block: 16px 24px; }
    .product-movies__surface { border-radius: 16px; }
    .product-movies__surface,
    .product-movies__card[data-side="next"] .product-movies__surface { transform: scale(.9); }
    .product-movies__caption { font-size: 12px; padding: 0 10px; }
    .product-movies__play-icon { width: 60px; height: 60px; }
}

@media (prefers-reduced-motion: reduce) {
    .product-movies__surface, .product-movies__play-icon { transition: none; }
}