/* MASTER-PACK prototype 0.7.5 UX correction.
 * Staging only.
 * - desktop vertical scrolling: avoid mandatory snap lock and duplicate header offset;
 * - variant 3 pagination: keep dot slots fixed so active-pill animation does not shift neighbours.
 */

@media (min-width: 901px) and (min-height: 720px) {
    html {
        scroll-snap-type: y proximity;
    }

    .mp-screen {
        scroll-snap-stop: normal;
    }

    .mp-prototype-1 .mp-product-section,
    .mp-prototype-2 .mp-product-section {
        scroll-margin-top: 0;
    }
}

.mp-prototype-3 .mp-slider-pagination button {
    position: relative;
    width: 26px;
    min-width: 26px;
    background: transparent;
    transition: none;
}

.mp-prototype-3 .mp-slider-pagination button::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    content: "";
    background: rgba(47, 37, 31, .24);
    border-radius: 999px;
    transform: translate(-50%, -50%);
    transition: width .18s ease, background .18s ease, opacity .18s ease;
}

.mp-prototype-3 .mp-slider-pagination button.is-active,
.mp-prototype-3 .mp-slider-pagination button[aria-current="true"] {
    width: 26px;
    min-width: 26px;
    background: transparent;
}

.mp-prototype-3 .mp-slider-pagination button.is-active::before,
.mp-prototype-3 .mp-slider-pagination button[aria-current="true"]::before {
    width: 26px;
    background: var(--mp-accent);
}

@media (prefers-reduced-motion: reduce) {
    .mp-prototype-3 .mp-slider-pagination button::before {
        transition: none;
    }
}