.cpn.v1 {
    --mn_wth: 101.444rem;
    --cpn-bdr-pd: .3rem;

    /* ── Grid layout ──────────────────────────────────── */

    .cpn-v1-grid {
        text-align: center;

        @media (width >= 1280px) {
            display: grid;
            grid-template-columns: 1fr auto;
            grid-template-areas:
                "header  arrows"
                "scroller scroller"
                "cta     cta";
            text-align: left;
            align-items: center;
            
            .cpn-v1-hdr     { grid-area: header; }
            .cpn-v1-list    { grid-area: scroller; }
            [data-role="arrows"]  { grid-area: arrows; justify-content: center; margin-top: 0; }
            .cpn-v1-cta     { grid-area: cta; }
        }
    }



    /* ── Scrollable coupon list ───────────────────────── */

    .cpn-v1-list {
        align-items: stretch;
        

        > li {
            width: min(22rem, 80vw);

            @media (width >= 1280px) {
                width: calc((100% - (var(--grd-sp-dyn) * 2)) / 3);
            }

        }
    }


    .prc {
        --title-color: var(--text-color);
    }

    /* ── Coupon card (CSS-drawn, no bg image so it flexes with content) ── */

    .cpn-itm {
        padding: 4%;
        overflow: visible;
        box-shadow: 0 .8rem 1.6rem rgba(20, 30, 60, .15);

        &::after {
            content: none;
        }

        &.bg-bx {
            background-color: #d9e6fb;
        }
        .lgo {
            margin-top: calc(var(--cpn-v1-lgo-ovlp, 4.5rem) * -1);
        }
    }

    /* Angled red panel peeking out from behind the card */
    li:has(.cpn-itm) {
        &::before {
            inset: 0;
            height: auto;
            background-color: var(--buttons);
            border-radius: var(--bdr-rds, 1rem);
            transform: rotate(-4deg);
        }

        &::after {
            content: none;
        }
    }

    .cpn-ntch {
        --bdr-clr: var(--dk-bg, #1a2744);

        &::before,
        &::after {
            background-color: #d9e6fb;
        }
    }

    .cpn-lyt {
        margin-top: 0;
        justify-content: space-between;
        padding: 1%;

    }

    /* ── Scroll arrow buttons ─────────────────────────── */

    .cpn-v1-arrows {

        button {
            background: none;
            border: none;
            padding: 0;
            cursor: pointer;
            line-height: 0;
        }
    }

    /* ── Top/bottom border decorations ─────────────────── */

    .top-deco {
        position: absolute;
        top: -1px;
        z-index: 0;
        width: 100%;
    }

    .btm-deco {
        bottom: -8px;
    }

    :is(.top-deco, .btm-deco) img {
        width: 100%;
        height: auto;
        display: block;
    }

}

.vid.v1:has(+ .cpn.v1) {
    margin-bottom: calc(-2.5 * var(--pd-v));

    /* The blur-in scroll animation (site/animation.css) turns every
       `section [class*="mn_"]` into a stacking context pinned at z-index: 1
       (its keyframes use opacity + filter: blur). That traps the inner
       `.vid-popup` z-index, so lifting the popup alone does nothing — the
       following coupon wrapper (also z-index: 1, later in the DOM) paints
       over it. Lift the video's own wrapper above the coupon's instead. */
    .mn_wd {
        z-index: 2;
    }

    + .cpn.v1 .bg-bx.pd_v {
        padding-top: calc(var(--pd-v) * 2.5);
    }
}