/* ========================================================
   VEGA SMART PRODUCT PROMO CARDS
   ======================================================== */

.vega-smart-promos {
    width:
        min(
            calc(100% - 32px),
            1240px
        );

    margin:
        26px auto;

    box-sizing:
        border-box;
}


.vega-smart-promos__head {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        14px;
}


.vega-smart-promos__head span {
    display:
        block;

    margin-bottom:
        4px;

    color:
        #8b765b;

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        .12em;
}


.vega-smart-promos__head h2 {
    margin:
        0 !important;

    color:
        #1e2421;

    font-size:
        clamp(
            22px,
            3vw,
            32px
        ) !important;

    line-height:
        1.05 !important;

    letter-spacing:
        -.04em;
}


.vega-smart-promos__head > small {
    padding:
        6px 10px;

    border:
        1px solid #e5e7e2;

    border-radius:
        999px;

    background:
        #fff;

    color:
        #879086;

    font-size:
        8px;

    font-weight:
        800;
}


/* GRID */

.vega-smart-promos__grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap:
        14px;
}


/* CARD */

.vega-smart-promo {
    position:
        relative;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(130px, .9fr);

    align-items:
        stretch;

    min-height:
        245px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(
            28,
            36,
            31,
            .08
        );

    border-radius:
        22px;

    color:
        #fff !important;

    text-decoration:
        none !important;

    box-shadow:
        0 10px 30px
        rgba(
            35,
            40,
            35,
            .07
        );

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.vega-smart-promo:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0 16px 38px
        rgba(
            25,
            32,
            26,
            .12
        );
}


/* Different automatic card moods */

.vega-smart-promo--sale {
    background:
        linear-gradient(
            125deg,
            #32251f 0%,
            #6f3b24 58%,
            #a75d2d 100%
        );
}


.vega-smart-promo--latest {
    background:
        linear-gradient(
            125deg,
            #263229 0%,
            #536652 58%,
            #87967d 100%
        );
}


.vega-smart-promo--popular {
    background:
        linear-gradient(
            125deg,
            #222839 0%,
            #374b68 58%,
            #647d9a 100%
        );
}


.vega-smart-promo--featured {
    background:
        linear-gradient(
            125deg,
            #352e20 0%,
            #70623e 58%,
            #ab9661 100%
        );
}


.vega-smart-promo[class*="vega-smart-promo--pick"] {
    background:
        linear-gradient(
            125deg,
            #292c29,
            #626a60
        );
}


/* Decorative light */

.vega-smart-promo::after {
    content:
        "";

    position:
        absolute;

    z-index:
        0;

    width:
        260px;

    height:
        260px;

    right:
        -80px;

    top:
        -90px;

    border-radius:
        50%;

    background:
        rgba(
            255,
            255,
            255,
            .10
        );

    pointer-events:
        none;
}


/* TEXT */

.vega-smart-promo__copy {
    position:
        relative;

    z-index:
        3;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    justify-content:
        center;

    min-width:
        0;

    padding:
        28px 10px 28px 26px;
}


.vega-smart-promo__eyebrow {
    display:
        inline-flex;

    margin-bottom:
        8px;

    color:
        rgba(
            255,
            255,
            255,
            .82
        );

    font-size:
        9px;

    font-weight:
        950;

    letter-spacing:
        .11em;
}


.vega-smart-promo__title {
    display:
        -webkit-box;

    max-width:
        100%;

    overflow:
        hidden;

    -webkit-box-orient:
        vertical;

    -webkit-line-clamp:
        2;

    color:
        #fff;

    font-size:
        clamp(
            19px,
            2.1vw,
            28px
        );

    font-weight:
        900;

    line-height:
        1.05;

    letter-spacing:
        -.035em;
}


.vega-smart-promo__text {
    display:
        -webkit-box;

    max-width:
        320px;

    margin-top:
        10px;

    overflow:
        hidden;

    -webkit-box-orient:
        vertical;

    -webkit-line-clamp:
        2;

    color:
        rgba(
            255,
            255,
            255,
            .82
        );

    font-size:
        11px;

    line-height:
        1.5;
}


.vega-smart-promo__button {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    min-height:
        38px;

    margin-top:
        18px;

    padding:
        0 15px;

    border-radius:
        999px;

    background:
        #fff;

    color:
        #222a23;

    font-size:
        10px;

    font-weight:
        900;
}


.vega-smart-promo__button b {
    font-size:
        14px;

    transition:
        transform .2s ease;
}


.vega-smart-promo:hover
.vega-smart-promo__button b {
    transform:
        translateX(3px);
}


/* PRODUCT IMAGE */

.vega-smart-promo__visual {
    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        0;

    padding:
        20px 18px 20px 4px;
}


.vega-smart-promo__visual::before {
    content:
        "";

    position:
        absolute;

    width:
        170px;

    height:
        170px;

    border-radius:
        50%;

    background:
        rgba(
            255,
            255,
            255,
            .90
        );

    box-shadow:
        0 10px 35px
        rgba(
            0,
            0,
            0,
            .12
        );
}


.vega-smart-promo__visual img {
    position:
        relative;

    z-index:
        2;

    display:
        block;

    width:
        100% !important;

    max-width:
        185px !important;

    max-height:
        185px !important;

    margin:
        0 !important;

    padding:
        7px;

    object-fit:
        contain;

    filter:
        drop-shadow(
            0 9px 15px
            rgba(
                0,
                0,
                0,
                .15
            )
        );

    box-sizing:
        border-box;
}


/* TABLET */

@media (max-width: 900px) {

    .vega-smart-promo {
        min-height:
            220px;

        grid-template-columns:
            1.15fr .85fr;
    }


    .vega-smart-promo__copy {
        padding:
            22px 8px 22px 20px;
    }


    .vega-smart-promo__visual::before {
        width:
            140px;

        height:
            140px;
    }


    .vega-smart-promo__visual img {
        max-width:
            150px !important;

        max-height:
            150px !important;
    }
}


/* MOBILE */

@media (max-width: 767px) {

    .vega-smart-promos {
        width:
            calc(100% - 24px);

        margin:
            20px auto;
    }


    .vega-smart-promos__head {
        margin-bottom:
            11px;
    }


    .vega-smart-promos__head > small {
        display:
            none;
    }


    .vega-smart-promos__head h2 {
        font-size:
            22px !important;
    }


    .vega-smart-promos__grid {
        grid-template-columns:
            1fr;

        gap:
            10px;
    }


    .vega-smart-promo {
        grid-template-columns:
            minmax(0,1.15fr)
            minmax(115px,.85fr);

        min-height:
            190px;

        border-radius:
            18px;
    }


    .vega-smart-promo__copy {
        padding:
            20px 5px 20px 18px;
    }


    .vega-smart-promo__title {
        font-size:
            20px;
    }


    .vega-smart-promo__text {
        margin-top:
            7px;

        font-size:
            9px;
    }


    .vega-smart-promo__button {
        min-height:
            34px;

        margin-top:
            12px;

        padding:
            0 12px;

        font-size:
            9px;
    }


    .vega-smart-promo__visual {
        padding:
            14px 10px 14px 0;
    }


    .vega-smart-promo__visual::before {
        width:
            112px;

        height:
            112px;
    }


    .vega-smart-promo__visual img {
        max-width:
            125px !important;

        max-height:
            125px !important;

        padding:
            5px;
    }
}