.sdnv.v2 {
    --sdnv-pad-x: 1.125rem;
    --sdnv-pad-y: 1rem;
    --sdnv-rds: 0.75rem;
    --sdnv-leaf: 1.5em;
    --sdnv-gap: 0.625rem;
    --sdnv-scroll-h: 13rem;

    /* Indent the child list so its links line up under the branch title
       (past the leaf icon), matching the header text. */
    --sdnv-indent: calc(var(--sdnv-pad-x) + var(--sdnv-leaf) + var(--sdnv-gap));

    /* ── Branch card (click-to-expand accordion) ──────────────────── */

    .sdnv-branch {
        overflow: hidden;
        border-radius: var(--sdnv-rds);
    }

    .sdnv-branch-hd {
        gap: var(--sdnv-gap);
        padding: var(--sdnv-pad-y) var(--sdnv-pad-x);
        cursor: pointer;
    }

    /* ── Branch title (leaf + label, links to the branch page) ─────── */

    .sdnv-branch-lnk {
        gap: var(--sdnv-gap);
        min-width: 0;
        color: var(--text-color);
        

        /* Brand leaf bullet — tint to match the title text. */
        svg {
            flex-shrink: 0;
            width: var(--sdnv-leaf);
            height: var(--sdnv-leaf);
        }
        svg path { fill: currentColor; }

        strong {
            line-height: 1.15;
            color: var(--text-color);
        }

        /* On active/hover/focus the leaf and label move together to the accent. */
        &.active strong,
        &:hover strong,
        &:focus-visible strong {
            color: var(--accent);
        }

        &.active svg path,
        &:hover svg path,
        &:focus-visible svg path {
            fill: var(--accent);
        }
    }

    /* ── Chevron toggle button ────────────────────────────────────── */

    .sdnv-chv {
        flex-shrink: 0;
        padding: 0.35rem;
        margin: -0.35rem;
        border: 0;
        background: transparent;
        color: var(--text-color);
        cursor: pointer;

        svg {
            display: block;
            width: 0.85em;
            height: 0.85em;
            fill: currentColor;
            transition: transform 0.25s ease;
        }
    }

    /* ── Expand / collapse ────────────────────────────────────────── */

    .sdnv-children {
        max-height: 0;
        overflow: hidden;
        padding: 0 var(--sdnv-pad-x) 0 var(--sdnv-indent);
        transition: max-height 0.28s ease;
    }

    .sdnv-open .sdnv-children {
        /* Large cap so the branch expands fully; no overflow:auto, so no scrollbar. */
        max-height: 100rem;
    }

    .sdnv-open .sdnv-chv svg {
        transform: rotate(180deg);
    }

    .sdnv-child-lnk {
        padding: 0.85rem 0;
        color: hsl(from var(--text-color) h s l / 0.82);
        
        transition: color 0.2s;

        &.active,
        &:hover,
        &:focus-visible {
            color: var(--text-color);
            text-decoration: underline;
        }
    }

    /* Coupon sits below the branch nav, inheriting the page palette. */
    .sdnv-cpn {
        list-style: none;
        margin: 0;
        padding: 0;
    }
}