.cpn.v2 {
    /* coupon-tools.css uses this var to overlap the logo above the card top.
       v2's logo sits inline with the price, so disable the overlap. */
    --cpn-v1-lgo-ovlp: 0;

    /* Ticket-style rounded corners */
    --bdr-rds-crd: 1.5rem;

    /* Notch cutout radius — 12px = 24px diameter */
    --cpn-ntch-r: 0.75rem;

    /* ── Yellow underlay blob — tuned for the wide horizontal card ──── */

    li:has(.cpn-itm)::before {
        inset: 0.75rem -0.5rem;
        transform: rotate(-1.25deg);
    }

    /* coupon-tools.css adds list padding for v1's overlap logo — reset it */
    ul:has(.cpn-itm) {
        padding-top: 0;
        padding-bottom: 0;
    }

    /* ── Card body ──────────────────────────────────────────────────── */

    .cpn-itm {
        padding: 0;
    }

    .cpn-itm .lgo {
        margin-top: 0;
        max-width: 12.125rem;
    }

    /* Title — kicker style at 20px in the dark-card yellow accent */
    .cpn-itm .ttl {
        --title-color: var(--accent);
        font-size: 1.25rem;
    }

    /* ── Action list ────────────────────────────────────────────────── */

    .cpn-v2-act a {
        color: var(--text-color);
    }

    .cpn-v2-act > li + li {
        position: relative;
        padding-left: var(--grd-sp-dyn);

        &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            translate: 0 -50%;
            width: 1px;
            height: 1.75rem;
            background-color: hsl(from var(--text-color) h s l / 0.3);
        }
    }


    /* ═════════════════════════════════════════════════════════════════
       Desktop: 3-cell horizontal layout (logo | info | actions)
       ═════════════════════════════════════════════════════════════════ */
    @media (min-width: 1280px) {

        .cpn-itm {
            align-items: stretch;
        }

        .cpn-v2-lgo {
            flex: 0 0 auto;
            padding: 2rem 2.5rem;
        }

        .cpn-v2-inf {
            flex: 1 1 0;
            padding: 2rem 2.5rem;

            /* Vertical dashed divider on the right edge */
            border-right: 2px dashed color-mix(in oklab, var(--inner-theme), black 15%);
        }

        /* Circular cutouts on the right edge of the info cell */
        .cpn-v2-inf::before,
        .cpn-v2-inf::after {
            content: '';
            position: absolute;
            right: 0;
            translate: 50% 0;
            width: calc(var(--cpn-ntch-r) * 2);
            height: calc(var(--cpn-ntch-r) * 2);
            border-radius: 50%;
            background-color: var(--main-bg-alt, var(--lt-bg));
            pointer-events: none;
            z-index: 2;
        }

        .cpn-v2-inf::before { top: calc(var(--cpn-ntch-r) * -1); }
        .cpn-v2-inf::after  { bottom: calc(var(--cpn-ntch-r) * -1); }

        .cpn-v2-act {
            flex: 0 0 auto;
            padding: 2rem 2.5rem;
        }
    }


    /* ═════════════════════════════════════════════════════════════════
       Mobile / tablet: stack cells vertically, swap divider to a top
       border on the info cell
       ═════════════════════════════════════════════════════════════════ */
    @media (max-width: 1279px) {

        .cpn-itm {
            flex-direction: column;
            padding: 1.5rem;
            gap: 1.25rem;

        }

        .cpn-v2-inf {
            
            padding-top: 1.25rem;
        }
    }
}