.marketplace {
    .container {
        padding-inline: 1.5rem;

        .inner-container {
            width: 100%;

            .info-contetns {
                padding-block: 100px;
                position     : relative;

                h2 {
                    color         : #012635;
                    font-family   : 'Paralucent', sans-serif;
                    font-size     : 24px;
                    font-style    : normal;
                    font-weight   : 600;
                    line-height   : 40px;
                    padding-bottom: 10px;
                    transition    : all 0.2s ease
                }

                article {
                    color      : var(--Gunmetal, #012635);
                    font-family: 'Geist', sans-serif;
                    font-size  : 16px;
                    font-style : normal;
                    font-weight: 500;
                    line-height: 32px;
                    transition : all 0.2s ease
                }

                >div {
                    padding-bottom: 50px
                }
            }

            .library-forms {
                display              : grid;
                grid-template-columns: 1fr;
                gap                  : 40px;
                align-items          : start;
                padding-block        : 75px 100px;

                aside {
                    >div {
                        margin-bottom: 20px
                    }

                    .filter {
                        .title {
                            margin     : 0 0 .75rem 0;
                            color      : #161D26;
                            font-size  : 1rem;
                            font-weight: 600;
                            line-height: 1.5625rem
                        }

                        ul {
                            padding   : 0;
                            max-height: 10rem;
                            overflow-y: auto;

                            li {
                                list-style    : none;
                                margin        : 0;
                                padding       : 0;
                                display       : flex;
                                flex-direction: column;

                                label {
                                    display              : grid;
                                    grid-template-columns: 1.125rem 1fr auto;
                                    align-items          : center;
                                    gap                  : .75rem;
                                    padding              : 0 .5rem;
                                    border-radius        : .5rem;
                                    cursor               : pointer;

                                    &:hover {
                                        background: #F7F9FC
                                    }

                                    input {
                                        position: absolute;
                                        opacity : 0;
                                        width   : 0;
                                        height  : 0
                                    }

                                    input:checked+span:nth-child(2) {
                                        background  : #175CFF;
                                        border-color: #175CFF;

                                        &::after {
                                            content     : '';
                                            position    : absolute;
                                            inset       : 0;
                                            width       : .5rem;
                                            height      : .3125rem;
                                            border      : .125rem solid #fff;
                                            border-top  : 0;
                                            border-right: 0;
                                            transform   : rotate(-45deg);
                                            margin      : 2px 0 0 1px
                                        }
                                    }

                                    span {
                                        &:nth-child(2) {
                                            width        : .875rem;
                                            height       : .875rem;
                                            border-radius: .25rem;
                                            border       : .125rem solid #CECFDE;
                                            background   : #fff;
                                            display      : inline-block;
                                            position     : relative
                                        }

                                        &:nth-child(3) {
                                            color      : #161D26;
                                            font-size  : .875rem;
                                            font-weight: 500;
                                            line-height: 2.5rem
                                        }

                                        &:last-child {
                                            color      : #9296B5;
                                            font-size  : .875rem;
                                            font-weight: 500;
                                            line-height: 2.5rem
                                        }
                                    }
                                }
                            }
                        }
                    }

                    .search {
                        position   : relative;
                        font-family: 'Geist', sans-serif;

                        input {
                            border-radius : 5px;
                            border        : 1px solid #CECFDE;
                            background    : #FFF;
                            box-shadow    : 0 1px 2px 0 rgb(206 207 222 / .5);
                            height        : 40px;
                            width         : 100%;
                            padding-inline: 40px
                        }

                        svg {
                            position: absolute;
                            top     : 12px;
                            height  : 16px;
                            width   : 16px;
                            left    : 13px;
                            fill    : #252d4461
                        }
                    }
                }

                .products-section {
                    display       : flex;
                    flex-direction: column;
                    gap           : 1.75rem;
                    margin-block  : 2.5rem 3.125rem;
                    padding       : 0;
                    color         : #161D26;
                    font-family   : 'Inter', system-ui
                }

                .main {
                    .filter-header {
                        display        : flex;
                        justify-content: space-between;
                        align-items    : center;
                        gap            : 1rem;
                        margin-bottom  : 20px;

                        .sorts {
                            border       : 1px solid #CECFDE;
                            border-radius: 5px;
                            box-shadow   : 0 1px 2px 0 rgb(206 207 222 / .5);
                            display      : flex;
                            font-family  : "Geist", sans-serif;
                            height       : 40px;
                            position     : relative;
                            flex         : 1;
                            max-width    : 240px;

                            svg {
                                width  : 40px;
                                height : 40px;
                                fill   : #161D26;
                                opacity: .5;
                                padding: 10px
                            }

                            select {
                                outline           : none;
                                background        : none;
                                font-size         : 14px;
                                flex              : 1 0 0%;
                                margin            : 0;
                                font-family       : "Geist", sans-serif;
                                border            : 0;
                                border-left       : 1px solid #CECFDE;
                                padding           : 0 12px 0;
                                appearance        : none;
                                -webkit-appearance: none;
                                -moz-appearance   : none;
                                position          : relative;
                                white-space       : nowrap;
                                overflow          : hidden;
                                text-overflow     : ellipsis;
                                width             : 100%
                            }
                        }

                        .views {
                            display: flex;
                            gap    : 1rem;

                            .btns {
                                display      : flex;
                                gap          : 4px;
                                padding      : 6px;
                                width        : min-content;
                                align-items  : center;
                                background   : #FFF;
                                border-radius: 5px;
                                border       : 1px solid #CECFDE;
                                box-shadow   : 0 1px 2px 0 rgb(206 207 222 / .5)
                            }

                            button {
                                background     : #FFF;
                                display        : flex;
                                justify-content: center;
                                align-items    : center;
                                text-align     : center;
                                border         : none;
                                border-radius  : 3px;
                                cursor         : pointer;
                                padding        : 6px 10px;
                                opacity        : .5;

                                svg {
                                    fill           : #161D26;
                                    height         : 1rem;
                                    width          : 1rem;
                                    display        : flex;
                                    justify-content: center;
                                    align-items    : center
                                }

                                &:hover {
                                    opacity   : .8;
                                    fill      : inherit;
                                    background: #fff0
                                }

                                &.active,
                                &[aria-pressed="true"] {
                                    background: #F6F8FC;
                                    opacity   : 1
                                }

                                &[aria-label='filter'] {
                                    border-radius: 5px;
                                    background   : #F6F8FC;
                                    border       : 1px solid #CECFDE;
                                    box-shadow   : 0 1px 2px 0 rgb(206 207 222 / .5)
                                }
                            }
                        }
                    }

                    nav[aria-label="Pagination"] {
                        display        : flex;
                        align-items    : center;
                        font-size      : 1rem;
                        padding-top    : 1rem;
                        flex-wrap      : wrap;
                        gap            : 1rem;
                        justify-content: center;

                        >p {
                            margin: 0
                        }

                        .controls {
                            display        : flex;
                            justify-content: center;
                            gap            : .5rem;
                            flex-wrap      : wrap;

                            button {
                                height         : 40px;
                                padding        : 0 1rem;
                                min-width      : 40px;
                                border         : 1px solid #ccc;
                                border-radius  : 8px;
                                text-align     : center;
                                display        : flex;
                                justify-content: center;
                                align-items    : center;
                                color          : #175CFF;
                                text-decoration: none;
                                background     : #FFF;
                                cursor         : pointer;
                                font-family    : 'Geist', sans-serif;

                                &:hover {
                                    color: #1b1820
                                }

                                &[disabled] {
                                    color       : #ccc;
                                    border-color: #eee;
                                    cursor      : not-allowed
                                }

                                &[aria-current="page"] {
                                    background: #175CFF;
                                    color     : #FFF;
                                    cursor    : not-allowed
                                }
                            }

                            div[role="group"] {
                                display    : flex;
                                align-items: center;
                                flex-wrap  : wrap;
                                gap        : .5rem
                            }
                        }

                        @media screen and (width>=42rem) {
                            justify-content: space-between
                        }
                    }
                }

                @media screen and (width>=42rem) {
                    grid-template-columns: 300px 1fr;

                    aside {
                        display: block;

                        >div {
                            margin-bottom: 20px
                        }
                    }
                }

                .fm-title {
                    font-size   : 26px;
                    margin-block: 0;
                    grid-column : -1 / 1;
                    text-align  : center;
                    line-height : 28px;
                }
            }

            .faqs {
                display      : grid;
                position     : relative;
                padding-block: 100px;

                details {
                    border-bottom: 1px solid #E3E4EC;
                    transition   : all 0.3s ease;

                    &:first-child {
                        border-top: 1px solid #E3E4EC
                    }

                    &:first-of-type {
                        border-block-start: 1px solid #E3E4EC
                    }

                    p {
                        max-height : 0;
                        overflow   : hidden;
                        transition : max-height 0.3s ease;
                        opacity    : .8;
                        opacity    : .8;
                        font-size  : 16px;
                        font-weight: 500;
                        transition : all 0.2s ease
                    }

                    &[open] {
                        summary::after {
                            content: "–"
                        }

                        p {
                            max-height: 400px
                        }
                    }

                    >*:not(summary) {
                        padding-block: 0 1rem
                    }

                    summary {
                        list-style   : none;
                        cursor       : pointer;
                        display      : flex;
                        align-items  : center;
                        gap          : .75rem;
                        color        : #161D26;
                        font-family  : Paralucent;
                        font-size    : 18px;
                        font-style   : normal;
                        font-weight  : 500;
                        line-height  : 32px;
                        padding-block: 20px;
                        transition   : all 0.2s ease;

                        &::-webkit-details-marker {
                            display: none
                        }

                        &::after {
                            content            : "+";
                            margin-inline-start: auto;
                            inline-size        : 1ch;
                            text-align         : center;
                            font-weight        : 400;
                            color              : inherit
                        }
                    }
                }
            }

            .info-contetns,
            .faqs {
                &:before {
                    content   : "";
                    position  : absolute;
                    width     : 100dvw;
                    height    : 1px;
                    inset     : 0;
                    background: #E3E4EC;
                    display   : block;
                    transform : translate(-7%, 0)
                }
            }

            @media (width>=1366px) {

                .info-contetns,
                .faqs {
                    &:before {
                        transform: translate(-8.5%, 0)
                    }
                }
            }

            @media (width>=1440px) {

                .info-contetns,
                .faqs {
                    &:before {
                        transform: translate(-10.5%, 0)
                    }
                }
            }

            @media (width>=1660px) {

                .info-contetns,
                .faqs {
                    &:before {
                        transform: translate(-21%, 0)
                    }
                }
            }

            @media (width>=2200px) {

                .info-contetns,
                .faqs {
                    &:before {
                        transform: translate(-20.4%, 0)
                    }
                }
            }
        }

        &.hero {
            position        : relative;
            background-color: #050917;
            background-image: radial-gradient(ellipse 100% 80% at 50% 0%, rgb(23 92 255 / .35) 0%, rgb(23 92 255 / .22) 25%, rgb(23 92 255 / .12) 50%, rgb(23 92 255 / .05) 70%, transparent 80%);
            overflow        : hidden;

            .hero-content {
                padding-block : 5rem;
                position      : relative;
                z-index       : 9;
                color         : #FFF;
                display       : flex;
                flex-direction: column;
                margin        : auto 0;
                height        : 100%;
                text-align    : center;
                align-items   : center;

                .tagline {
                    background-color: #FFFFFF1A;
                    width           : min-content;
                    white-space     : nowrap;
                    font-size       : 18px;
                    font-weight     : 300;
                    line-height     : 20px;
                    padding         : 10px 20px 8px;
                    border-radius   : 100px;
                    font-family     : "Paralucent", Sans-serif;
                    border          : solid 2px #FFFFFF1A;
                    margin-bottom   : 1.5rem
                }

                h1 {
                    color      : inherit;
                    font-family: "Paralucent", Sans-serif;
                    font-size  : 48px;
                    font-weight: 600;
                    font-style : normal;
                    line-height: 60px;
                    margin     : 0;
                    padding    : 0
                }

                p {
                    font-family: "Geist", Sans-serif;
                    font-size  : 16px;
                    font-weight: 500;
                    font-style : normal;
                    line-height: 26px
                }

                a {
                    color        : inherit;
                    border       : 2px solid #FFF;
                    font-family  : "Geist", Sans-serif;
                    font-size    : 16px;
                    font-weight  : 500;
                    line-height  : 26px;
                    padding      : 15px 28px;
                    border-radius: 100px;
                    margin-top   : 1.5rem;
                    width        : fit-content
                }
            }

            #p-container {
                position: absolute;
                inset   : 0;

                #p-canvas {

                    [id^="particles-js"] {
                        position      : absolute;
                        inset         : 0;
                        display       : block;
                        pointer-events: none;
                    }

                    #particles-js {
                        z-index: 1;
                    }

                    #particles-js2 {
                        z-index: 2;
                    }

                    #particles-js3 {
                        z-index: 3;
                        filter : blur(2px);
                    }

                    #particles-js4 {
                        z-index: 4;
                        filter : blur(2px);
                    }

                    #particles-js5 {
                        z-index: 5;
                        filter : blur(5px);
                    }

                    #particles-js6 {
                        z-index: 6;
                        filter : blur(5px);
                    }

                    #particles-js7 {
                        z-index: 7;
                        filter : blur(7px);
                    }

                    #particles-js8 {
                        z-index: 8;
                        filter : blur(8px);
                    }


                }
            }

        }
    }

    &.product-cards-container {
        display              : grid;
        grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
        gap                  : 1.25rem;
        padding              : 0;

        li {
            list-style: none
        }
    }

    &.breadcrumb {
        background   : #fff;
        border-bottom: 1px solid #E3E4EC;
        min-height   : 150px;
        font-family  : 'Paralucent', Inter, system-ui, sans-serif;
        position     : static;
        top          : 60px;
        z-index      : 1;

        .container {
            .inner-container {
                padding-block: 20px 30px;

                .bundle {
                    margin-top: 0
                }

                .breadcrumb-heading {
                    .link-btn {
                        display        : inline-flex;
                        align-items    : center;
                        gap            : 8px;
                        font-size      : 14px;
                        line-height    : 1;
                        color          : #175CFF;
                        text-decoration: none;
                        padding-bottom : 15px;
                        font-family    : 'Geist', Inter, -apple-system, Segoe UI, sans-serif;
                        font-weight    : 400;

                        svg {
                            width: 14px;
                            fill : #175CFF
                        }

                        &:hover {
                            color: #0f172a;

                            svg {
                                fill: #0f172a
                            }
                        }
                    }

                    h3 {
                        font-size  : 28px;
                        line-height: normal;
                        color      : #161D26;
                        font-weight: 500;
                        margin     : 0 0 10px
                    }

                    p {
                        margin     : 0;
                        color      : #434950;
                        font-size  : 16px;
                        font-style : normal;
                        font-weight: 500;
                        line-height: 21px
                    }

                    .chips {
                        display    : flex;
                        gap        : 8px;
                        align-items: center;
                        flex-wrap  : wrap;

                        span {
                            background   : #F3F3F7;
                            border-radius: 2rem;
                            padding      : 0 1rem;
                            font-size    : 13px;
                            line-height  : 25px;
                            color        : #1f2937;
                            display      : flex;
                            align-items  : center;
                            gap          : .2rem;

                            &[title] {
                                padding-inline: 0;
                                margin-right  : 2px;

                                svg {
                                    width: 13px;
                                    fill : #1f2937
                                }
                            }
                        }
                    }
                }

                .breadcrumb-buttons {
                    display    : flex;
                    align-items: center;
                    gap        : 12px;
                    padding-top: 36px;

                    .amount-details {
                        min-width    : fit-content;
                        padding-right: 2rem;
                        font-weight  : 500;

                        .amount {
                            font-size  : 20px;
                            color      : #161D26;
                            line-height: 1.1
                        }

                        .details {
                            line-height: normal;
                            margin     : 0;
                            font-size  : 14px;
                            color      : #161d26bf
                        }
                    }

                    button {
                        appearance   : none;
                        white-space  : nowrap;
                        width        : 100%;
                        border       : 1px solid #fff0;
                        padding      : 14px 18px;
                        border-radius: 9999px;
                        font-size    : 14px;
                        font-weight  : 600;
                        line-height  : 1;
                        cursor       : pointer;
                        transition   : transform .05s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;

                        &:active {
                            transform: translateY(1px)
                        }

                        &.btn-primary {
                            background: #1a56ff;
                            color     : #fff;
                            box-shadow: 0 8px 24px rgb(16 24 40 / .06);

                            &:hover {
                                filter: brightness(1.05)
                            }

                            &:focus-visible {
                                outline       : 2px solid rgb(26 86 255 / .3);
                                outline-offset: 2px
                            }
                        }

                        &.btn-outline {
                            background  : #fff0;
                            color       : #0f172a;
                            border-color: #0f172a26;

                            &:hover {
                                background: #f8fafc
                            }

                            &:focus-visible {
                                outline       : 2px solid #cbd5e1;
                                outline-offset: 2px
                            }
                        }
                    }
                }
            }
        }

        .fa-circle-dashed {
            color: #8A8A8A
        }
    }

    li .product-card {
        display      : block;
        background   : #fff;
        border-radius: .5rem;
        color        : inherit;
        overflow     : hidden;
        transition   : box-shadow .15s ease, transform .02s ease;
        position     : relative;
        height       : 100%;

        >span {
            position     : absolute;
            top          : 12px;
            left         : 12px;
            background   : #161D26;
            padding      : 0 12px;
            border-radius: 3rem;
            font-size    : 1rem;
            font-weight  : 500;
            color        : #FFF
        }

        &:hover {
            box-shadow: 0 .5rem 1rem #00000002
        }

        .product-card-thumb {
            background : #E3E4EC;
            height     : 8.75rem;
            padding    : 1.25rem;
            display    : grid;
            place-items: center;
            overflow   : hidden;

            img {
                width     : 100%;
                height    : 100%;
                object-fit: contain
            }
        }

        .product-card-body {
            padding       : 1.3125rem 1.5625rem;
            background    : #F6F8FC;
            display       : flex;
            flex-direction: column;
            height        : 100%;

            .product-card-meta {
                color          : #454A51;
                font-family    : 'Paralucent', 'Inter', system-ui;
                font-size      : .75rem;
                font-weight    : 500;
                gap            : .625rem;
                margin-bottom  : .375rem;
                justify-content: flex-start;
                white-space    : nowrap;
                display        : flex;

                span {
                    overflow     : hidden;
                    text-overflow: ellipsis;

                    &:last-child {
                        min-width: 43px
                    }
                }

                span+span::before {
                    content     : '•';
                    margin-right: .625rem;
                    color       : #454A51
                }
            }

            .product-card-title {
                margin            : .25rem 0 0;
                color             : #161D26;
                font-family       : 'Paralucent', 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
                font-size         : 1.125rem;
                font-weight       : 500;
                line-height       : 1.625rem;
                display           : -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow          : hidden
            }
        }
    }

    &.list-view.product-cards-container {
        grid-template-columns: 1fr;
        gap                  : 1rem;

        li .product-card {
            display       : flex;
            align-items   : center;
            background    : #f6f8fc;
            height        : 100px;
            padding-inline: 1rem;

            .product-card-thumb {
                display: none
            }

            .product-card-body {
                flex           : 1;
                justify-content: flex-start;
                padding        : 15px 1rem;

                .product-card-meta {
                    font-size: .875rem
                }

                .product-card-title {
                    font-size         : 1.25rem;
                    line-height       : 1.75rem;
                    -webkit-line-clamp: 1
                }

                .product-card-meta,
                .product-card-title {
                    margin: 0
                }
            }

            .product-card-price {
                position    : relative;
                top         : auto;
                left        : auto;
                order       : 1;
                padding     : .5rem 1.5rem;
                margin-right: 1rem
            }
        }
    }

    &.formPage {
        section {
            >:first-child {
                border-bottom: 1px solid #E3E4EC;

                [role="tablist"] {
                    display    : flex;
                    align-items: center
                }

                button {
                    background   : #fff0;
                    color        : #596773;
                    border       : 0;
                    outline      : none;
                    font-family  : "Paralucent", sans-serif;
                    cursor       : pointer;
                    border-radius: 0;
                    font-size    : .8rem;

                    &.active {
                        position: relative;
                        color   : #161D26;

                        &::before {
                            content      : '';
                            position     : absolute;
                            inset        : 0;
                            border-bottom: 2px solid #161D26
                        }
                    }
                }

                span {
                    display: flex;
                    flex   : 1
                }
            }

            >:first-child span,
            p {
                padding-inline: 24px
            }

            p {
                color        : #175cffbf;
                font-family  : "Paralucent", sans-serif;
                font-size    : 14px;
                font-style   : normal;
                font-weight  : 500;
                margin       : 0;
                padding-block: 9px;
                text-align   : center;

                strong {
                    color: #175CFF
                }
            }

            .pre-form-info {
                background      : #E6F3FF;
                text-align      : center;
                border-block-end: 1px solid #175CFF33;

                p {
                    display       : inline;
                    letter-spacing: .5px;

                    svg {
                        fill  : #175CFF;
                        width : 18px;
                        height: 12px
                    }
                }
            }

            >:last-child {
                display        : flex;
                justify-content: center;

                img {
                    padding: 3rem
                }

                &.gov {
                    max-width    : 750px;
                    margin       : auto;
                    display      : grid;
                    justify-items: center;
                    padding-block: 4rem;
                    gap          : 10px;

                    img {
                        max-width: 200px;
                        padding  : 0
                    }

                    h5 {
                        font-weight: 600
                    }

                    div>p {
                        background : #fff0;
                        padding    : 0 !important;
                        border     : 0;
                        font-family: Geist;
                        font-size  : 14px;
                        font-style : normal;
                        color      : #161D26;
                        line-height: 28px;

                        &:last-child {
                            margin-top: 30px
                        }
                    }
                }
            }
        }
    }

    @media (width>=768px) {
        &.breadcrumb {
            position: sticky;
            top     : 57px;

            .container {
                .inner-container {
                    display              : grid;
                    gap                  : 20px;
                    grid-template-columns: 1fr auto;
                    align-items          : flex-start;

                    .breadcrumb-buttons {
                        padding: 0;

                        .amount-details {
                            padding   : 0;
                            text-align: right
                        }
                    }
                }
            }
        }

        #f-preview {
            >:first-child {
                position  : sticky;
                top       : 269px;
                background: #FFF
            }

            div[role="tablist"],
            p {
                padding-inline: 3.75rem
            }

            .pre-form-info {
                p {
                    display        : flex;
                    align-items    : center;
                    justify-content: center;
                    line-height    : 21px;

                    svg {
                        width        : 14px;
                        height       : auto;
                        margin-bottom: 4px
                    }
                }
            }

            div[role="tablist"] {
                button {
                    font-size: 16px
                }
            }
        }

        .hero {
            margin       : 0 30px 30px;
            border-radius: 25px;

            .inner-container .hero-content {
                max-width: calc(101% - 22rem);
                margin   : auto;
            }
        }

        .container {
            padding-inline: 3.75rem;

            .inner-container {
                .info-contetns {
                    h2 {
                        font-size  : 30px;
                        line-height: 40px
                    }

                    article {
                        font-size  : 20px;
                        line-height: 36px
                    }
                }

                .faqs {
                    details {
                        summary {
                            font-size  : 24px;
                            line-height: 40px
                        }

                        p {
                            font-size  : 20px;
                            line-height: 36px
                        }
                    }
                }
                .library-forms{
                    .fm-title{
                        font-size   : 30px;
                        line-height : 40px;
                        text-align  : left;
                    }
                }
            }
        }
    }

    @media (width>=1280px) {
        .container {
            .inner-container {
                max-width: 1140px;
                margin   : 0 auto
            }

            &.hero {
                min-height : 550px;
                display    : flex;
                align-items: center
            }
        }

        &.breadcrumb {
            top: 106px;

            .breadcrumb-heading {
                h3 {
                    font-size: 32px
                }
            }
        }

        #f-preview {
            >:first-child {
                top: 256px
            }

            div[role="tablist"] {
                max-width     : 1140px;
                margin        : 0 auto;
                padding-inline: 0
            }
        }
    }

    @media (width>1920px) {
        .container {
            .inner-container {
                max-width: 1440px;
                margin   : 0 auto
            }
        }

        #f-preview {
            div[role="tablist"] {
                max-width: 1440px
            }
        }
    }

    dialog {
        border       : none;
        border-radius: 1rem;
        padding      : 2rem 1.5rem 1rem;
        overflow     : hidden;

        &[open] {
            display       : flex;
            flex-direction: column
        }

        aside {
            overflow: auto
        }

        .formInfo {
            margin       : .5rem;
            overflow     : auto;
            background   : #F6F8FC;
            padding      : 1rem;
            border-radius: 1rem;

            .bundle-info-modal {
                font-family  : Geist, sans-serif;
                overflow     : auto;
                max-height   : 600px;
                background   : #F6F8FC;
                padding      : 1rem;
                border-radius: 1rem;

                h1 {
                    color      : #101214;
                    font-size  : 16px;
                    font-style : normal;
                    font-weight: 600;
                    line-height: 26px;
                    margin     : 0 0 20px 0
                }

                ul {
                    color          : #101214;
                    font-size      : 14px;
                    font-style     : normal;
                    font-weight    : 400;
                    line-height    : 22px;
                    padding-left   : 25px;
                    margin-bottom  : 20px;
                    list-style-type: none;

                    li {
                        position: relative;

                        &:before {
                            content  : "•";
                            position : absolute;
                            left     : -20px;
                            color    : #333;
                            font-size: 18px
                        }

                        p {
                            margin: 0
                        }

                        strong {
                            font-weight  : 600;
                            color        : #2a4365;
                            display      : inline-block;
                            margin-bottom: 4px
                        }

                        span {
                            color      : #101214;
                            font-family: Geist, sans-serif;
                            font-size  : 14px;
                            font-style : normal;
                            font-weight: 400;
                            line-height: 24px;
                            display    : block;
                            margin-left: 5px;
                            padding-top: 3px
                        }
                    }
                }

                p {
                    color         : #101214;
                    font-family   : Geist, sans-serif;
                    font-size     : 14px;
                    font-style    : normal;
                    font-weight   : 500;
                    line-height   : 24px;
                    margin-block  : 16px;
                    letter-spacing: -.1px;

                    &:last-child {
                        font-weight: 400
                    }
                }

                a {
                    color          : #3182ce;
                    text-decoration: underline;

                    &:hover {
                        text-decoration: underline
                    }
                }

                ul:nth-child(4) {
                    li {
                        margin-block: 0 10px
                    }
                }
            }
        }

        button {
            &[aria-label="Close"] {
                background: transparent !important;
                border    : none;
                position  : absolute;
                right     : 12px;
                top       : 5px;
                cursor    : pointer;
                color     : #b3b3b3 !important;
                font-size : 28px;
                padding   : 0;
                height    : 1rem;
                width     : 1rem;
                outline   : none
            }

            &[aria-label="Purchase"] {
                border     : none;
                outline    : none;
                font-size  : 14px;
                font-family: 'Geist', sans-serif;
                background : #175CFF;
                cursor     : pointer;
                opacity    : 1;

                &[disabled] {
                    opacity: .5;
                    cursor : not-allowed
                }
            }
        }

        #hsWrap {
            overflow  : auto;
            max-height: 40rem;

            #hsLoader {
                display        : flex;
                justify-content: center;
                align-items    : center;
                gap            : .3rem;
                font-family    : 'Geist', sans-serif;
                padding-block  : 2rem
            }
        }

        ul.pub-status {
            margin    : 0;
            padding   : 0;
            list-style: none;

            li {
                list-style           : none;
                display              : grid;
                grid-template-columns: 20px 1fr;
                grid-template-rows   : repeat(2, min-content);
                grid-column-gap      : .5rem;
                padding              : 1rem;
                align-items          : flex-start;
                outline              : none;
                border-radius        : 6px;

                &::after {
                    display: none
                }

                h5,
                p {
                    margin     : 0;
                    font-size  : 14px;
                    line-height: 25px;
                    font-weight: 400;
                    font-family: 'Geist', sans-serif
                }

                h5 {
                    font-weight: 600;
                    line-height: initial
                }

                :first-child {
                    grid-row : -1/1;
                    font-size: 20px
                }

                &:hover {
                    background: #F7F7F9
                }
            }
        }

        .f-info {
            display       : flex;
            flex-direction: column;
            gap           : 24px;
            font-size     : 1rem;
            line-height   : 1.8rem;
            padding       : 1rem;
            overflow      : auto;

            >:first-child {
                font-size: 2rem;
                margin   : 0
            }

            p:nth-child(2) {
                margin          : 0;
                background-color: #f0f0f0b3;
                padding         : 20px;
                border-radius   : 5px;
                font-size       : .9rem;
                line-height     : 24px
            }

            .checkbox {
                display: inline-flex;

                input {
                    height: 16px;
                    width : 16px
                }

                label {
                    margin-left: 12px;
                    font-size  : .8rem;
                    line-height: 20px;

                    a {
                        color: #175CFF
                    }
                }
            }

            button.btn-primary {
                padding: 12px 30px 12px 30px;
                border : none
            }
        }

        @media screen and (width>=768px) {
            max-width     : 550px;
            width         : auto;
            padding-inline: 1rem;
            max-height    : fit-content
        }
    }

    dialog:-internal-dialog-in-top-layer::backdrop {
        background: #00000047
    }
}

.hidden,
.hide {
    display: none !important
}

.pointer {
    cursor: pointer
}

main .l-form {
    display        : flex;
    justify-content: center;
    align-items    : center;
    font-family    : 'Geist', sans-serif;
    margin         : auto;
    min-height     : 100dvh;

    svg {
        width : 1rem;
        height: 1rem
    }
}

.bundle {
    --bg          : #000714;
    --ink         : #fff;
    --ink-muted   : #DEE4EA;
    --chip        : #161D26;
    --card        : #323B4C;
    --cta         : #175CFF;
    display       : flex;
    flex-direction: column;
    gap           : 24px;
    width         : 100%;
    padding       : 30px 40px;
    border-radius : 20px;
    background    : var(--bg);
    position      : relative;
    overflow      : hidden;
    z-index       : 0;
    margin-top    : 40px;
    max-height    : 280px;

    &::before {
        content       : "";
        position      : absolute;
        inset         : 0 0 0 auto;
        width         : 70%;
        background    : url(https://dev-partners-wordpress-backup.s3.us-west-2.amazonaws.com/wp-content/uploads/2025/11/04155058/offer_banner.webp) center / cover no-repeat;
        opacity       : 1;
        pointer-events: none
    }

    article[aria-labelledby="bundle-section"] {
        display    : flex;
        gap        : 24px;
        align-items: flex-start;
        position   : relative;
        z-index    : 1;

        &.fView {
            align-items: center;

            .title h2 {
                line-height: 1.5
            }
        }

        >:first-child {
            flex     : 1 1 auto;
            min-width: 0;

            .title {
                display    : flex;
                gap        : 16px;
                align-items: center;

                h2 {
                    margin     : 0;
                    font-size  : 32px;
                    font-weight: 500;
                    color      : var(--ink)
                }

                .countdown {
                    display    : flex;
                    gap        : 6px;
                    list-style : none;
                    padding    : 0;
                    margin     : 0;
                    color      : #FFF;
                    align-items: center;

                    time {
                        background     : #FFF;
                        border-radius  : 4px;
                        min-width      : 40px;
                        text-align     : center;
                        padding        : 3px 8px;
                        font-weight    : 500;
                        font-size      : 20px;
                        box-shadow     : inset 0 0 0 1px rgb(255 255 255 / 8%);
                        color          : #161D26;
                        font-family    : "Paralucent", sans-sarif;
                        display        : flex;
                        line-height    : 2;
                        min-height     : 38px;
                        align-items    : center;
                        justify-content: center
                    }
                }
            }

            p {
                margin     : 6px 0 0;
                color      : var(--ink-muted);
                font-size  : 16px;
                line-height: 21px;
                font-weight: 300
            }
        }

        >:last-child {
            flex         : 0 0 auto;
            display      : flex;
            align-content: start;
            align-items  : center;
            gap          : 20px;
            text-align   : right;
            color        : var(--ink);

            .price {
                margin     : 0;
                line-height: 22px;

                s {
                    color      : #a1acc5;
                    font-size  : 24px;
                    font-weight: 500
                }

                strong {
                    font-size  : 24px;
                    font-weight: 600;
                    margin-left: 6px
                }
            }

            p {
                margin     : 0 0 8px;
                font-size  : 14px;
                font-weight: 300;
                color      : var(--ink);
                opacity    : .9;
                margin     : 0
            }

            button {
                justify-self : end;
                height       : 50px;
                padding      : 10px 24px;
                border-radius: 999px;
                border       : 0;
                background   : var(--cta);
                color        : var(--ink);
                font-size    : 15px;
                line-height  : 21px;
                cursor       : pointer
            }
        }
    }

    .cards {
        position       : relative;
        z-index        : 1;
        display        : flex;
        gap            : 20px;
        justify-content: flex-start;

        a[aria-label="items"] {
            background   : var(--card);
            border-radius: 8px 8px 0 0;
            overflow     : hidden;
            position     : relative;
            cursor       : pointer;
            max-height   : 160px;
            max-width    : 210px;

            p {
                margin        : 0;
                line-height   : 35px;
                font-size     : 14px;
                font-weight   : 500;
                text-align    : center;
                color         : var(--ink);
                white-space   : nowrap;
                padding-inline: 20px;
                text-overflow : ellipsis;
                overflow      : hidden
            }

            figure {
                margin    : 0;
                position  : relative;
                min-height: 270px;

                img {
                    width     : 100%;
                    height    : 100%;
                    object-fit: cover;
                    display   : block
                }

                figcaption {
                    position       : absolute;
                    top            : 10px;
                    left           : 10px;
                    padding        : 8px 12px;
                    border-radius  : 999px;
                    background     : var(--chip);
                    color          : var(--ink);
                    font-size      : 15px;
                    line-height    : 20px;
                    font-weight    : 500;
                    text-decoration: line-through;
                    font-style     : normal
                }
            }
        }

        svg {
            position: absolute;
            right   : 0;
            bottom  : 50px
        }
    }
}

.spin {
    animation       : spinner-rotate 1s linear infinite;
    transform-origin: center;
    transform-box   : fill-box
}

@keyframes spinner-rotate {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(1turn)
    }
}

@media (prefers-reduced-motion:reduce) {
    .spin {
        animation-delay          : -1ms;
        animation-duration       : 1ms;
        animation-iteration-count: 1;
        transition-delay         : 0s;
        transition-duration      : 0s
    }
}