/* Start custom CSS *//* =========================================================
   NOSSAS RECOMENDAÇÕES
   BELEZA SEM FRESCURA
========================================================= */

.bsf-rec-page,
.bsf-rec-page * {
    box-sizing: border-box;
}

.bsf-rec-page {
    width: 100%;

    font-family: "Montserrat", Arial, sans-serif;

    color: #111;
}

.bsf-rec-page img {
    max-width: 100%;
}


/* =========================================================
   HERO
========================================================= */

.bsf-rec-hero {
    width: calc(100% - 60px);
    max-width: 1400px;

    margin: 28px auto 28px;

    overflow: hidden;

    border-radius: 14px;
}

.bsf-rec-hero img {
    display: block;

    width: 100%;
    height: auto;
}


/* =========================================================
   TAGS
========================================================= */

.bsf-rec-tags {
    width: calc(100% - 60px);
    max-width: 1320px;

    margin: 0 auto 34px;

    display: grid;

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

    gap: 16px;
}

.bsf-rec-tag {
    min-height: 135px;

    padding: 17px 8px 14px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 10px;

    background: #fff;

    border: 1px solid #ececec;
    border-radius: 12px;

    box-shadow:
        0 4px 13px rgba(0,0,0,.045);

    color: #111 !important;

    text-align: center;

    text-decoration: none !important;

    transition: .2s ease;
}

.bsf-rec-tag:hover {
    transform: translateY(-4px);

    border-color: #f1bdd0;

    box-shadow:
        0 10px 24px rgba(0,0,0,.07);
}

.bsf-rec-tag img {
    width: 58px;
    height: 58px;

    object-fit: contain;
}

.bsf-rec-tag span {
    font-size: 11px;
    line-height: 1.13;

    font-weight: 800;
}


/* =========================================================
   SEÇÕES
========================================================= */

.bsf-rec-section {
    width: calc(100% - 60px);
    max-width: 1320px;

    margin: 0 auto 34px;
}

.bsf-rec-title {
    margin: 0 0 17px;

    font-size: 24px;
    line-height: 1.2;

    font-weight: 800;

    color: #111;
}


/* =========================================================
   CATEGORIAS
========================================================= */

.bsf-rec-categories {
    display: grid;

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

    gap: 15px;
}

.bsf-rec-category {
    position: relative;

    aspect-ratio: 1 / 1;

    display: block;

    overflow: hidden;

    border-radius: 12px;

    background: #f8f8f8;

    text-decoration: none !important;

    box-shadow:
        0 3px 10px rgba(0,0,0,.05);

    transition: .22s ease;
}

.bsf-rec-category:hover {
    transform: translateY(-4px);

    box-shadow:
        0 10px 22px rgba(0,0,0,.08);
}

.bsf-rec-category img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.bsf-rec-category span {
    position: absolute;

    left: 7px;
    right: 7px;
    bottom: 7px;

    min-height: 38px;

    padding: 7px 5px;

    display: flex;
    align-items: center;
    justify-content: center;

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

    border-radius: 8px;

    color: #111;

    font-size: 10px;
    line-height: 1.1;

    font-weight: 800;

    text-align: center;

    box-shadow:
        0 2px 7px rgba(0,0,0,.05);
}


/* =========================================================
   CARDS DE RECOMENDAÇÃO
========================================================= */

.bsf-rec-feature-grid {
    display: grid;

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

    gap: 14px;
}

.bsf-rec-feature-card {
    min-height: 140px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(180px, .75fr);

    overflow: hidden;

    background: #fff;

    border: 1px solid #e9e9e9;
    border-radius: 12px;

    color: #111 !important;

    text-decoration: none !important;

    box-shadow:
        0 3px 12px rgba(0,0,0,.04);

    transition: .2s ease;
}

.bsf-rec-feature-card:hover {
    transform: translateY(-3px);

    border-color: #f1c3d1;

    box-shadow:
        0 9px 20px rgba(0,0,0,.065);
}


/* TEXTO */

.bsf-rec-feature-content {
    min-width: 0;

    padding: 20px;

    display: grid;

    grid-template-columns:
        62px 1fr;

    align-items: center;

    gap: 17px;
}

.bsf-rec-feature-icon {
    width: 62px;
    height: 62px;

    object-fit: contain;
}

.bsf-rec-feature-content h3 {
    margin: 0 0 7px;

    font-size: 15px;
    line-height: 1.2;

    font-weight: 800;
}

.bsf-rec-feature-content p {
    max-width: 330px;

    margin: 0 0 8px;

    color: #444;

    font-size: 10px;
    line-height: 1.45;
}

.bsf-rec-feature-content span {
    color: #ef1761;

    font-size: 10px;
    font-weight: 800;
}


/* FOTO */

.bsf-rec-feature-photo {
    min-height: 140px;

    overflow: hidden;
}

.bsf-rec-feature-photo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* NOVIDADE LARGA */

.bsf-rec-feature-wide {
    grid-column: 1 / -1;

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


/* =========================================================
   POSTS MAIS RECENTES
========================================================= */

.bsf-rec-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.bsf-rec-section-heading > a {
    color: #ef1761 !important;

    font-size: 11px;
    font-weight: 800;

    text-decoration: none !important;
}

.bsf-rec-latest {
    display: grid;

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

    gap: 15px;
}

.bsf-rec-post {
    overflow: hidden;

    background: #fff;

    border: 1px solid #e9e9e9;
    border-radius: 10px;

    box-shadow:
        0 3px 10px rgba(0,0,0,.04);

    transition: .2s ease;
}

.bsf-rec-post:hover {
    transform: translateY(-3px);
}

.bsf-rec-post-image {
    position: relative;

    display: block;

    height: 150px;

    overflow: hidden;

    background: #fff2f5;
}

.bsf-rec-post-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.bsf-rec-post-placeholder {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 45px;
}

.bsf-rec-post-body {
    padding: 12px 12px 14px;
}

.bsf-rec-post h3 {
    min-height: 48px;

    margin: 0 0 10px;

    font-size: 11px;
    line-height: 1.4;

    font-weight: 800;
}

.bsf-rec-post h3 a {
    color: #111 !important;

    text-decoration: none !important;
}

.bsf-rec-post h3 a:hover {
    color: #ef1761 !important;
}

.bsf-rec-read {
    color: #ef1761 !important;

    font-size: 9px;
    font-weight: 800;

    text-decoration: none !important;
}


/* =========================================================
   CTA BLOG
========================================================= */

.bsf-rec-blog-cta {
    width: calc(100% - 60px);
    max-width: 1320px;

    margin: 45px auto 55px;
    padding: 25px 30px;

    display: grid;

    grid-template-columns:
        75px minmax(0, 1fr) auto;

    align-items: center;

    gap: 25px;

    background:
        linear-gradient(
            110deg,
            #fff0f5 0%,
            #ffe5ef 48%,
            #f5f7ef 100%
        );

    border: 1px solid #f5d2df;

    border-radius: 14px;
}

.bsf-rec-blog-icon {
    width: 64px;
    height: 64px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff;

    border-radius: 50%;

    font-size: 34px;

    box-shadow:
        0 5px 15px rgba(239,23,97,.08);
}

.bsf-rec-blog-copy > span {
    display: block;

    margin-bottom: 5px;

    color: #ef1761;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .5px;
}

.bsf-rec-blog-copy h2 {
    margin: 0 0 6px;

    font-size: 20px;
    line-height: 1.2;

    font-weight: 800;
}

.bsf-rec-blog-copy p {
    margin: 0;

    color: #555;

    font-size: 11px;
    line-height: 1.5;
}

.bsf-rec-blog-btn {
    min-width: 190px;
    min-height: 50px;

    padding: 0 21px;

    display: inline-flex;
    align-items: center;
    justify-content: space-between;

    gap: 22px;

    background: #ef1761;

    border-radius: 8px;

    color: #fff !important;

    font-size: 11px;
    font-weight: 800;

    text-decoration: none !important;

    transition: .2s ease;
}

.bsf-rec-blog-btn span {
    font-size: 18px;
}

.bsf-rec-blog-btn:hover {
    background: #d91457;

    transform: translateY(-2px);
}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {

    .bsf-rec-hero,
    .bsf-rec-tags,
    .bsf-rec-section,
    .bsf-rec-blog-cta {
        width: calc(100% - 40px);
    }


    /* TAGS */

    .bsf-rec-tags {
        grid-template-columns:
            repeat(4, 1fr);
    }


    /* CATEGORIAS */

    .bsf-rec-categories {
        grid-template-columns:
            repeat(4, 1fr);
    }


    /* RECOMENDAÇÕES */

    .bsf-rec-feature-grid {
        grid-template-columns: 1fr;
    }

    .bsf-rec-feature-wide {
        grid-column: auto;

        grid-template-columns:
            minmax(0, 1.25fr)
            minmax(200px, .75fr);
    }


    /* POSTS */

    .bsf-rec-latest {
        grid-template-columns:
            repeat(3, 1fr);
    }


    /* CTA */

    .bsf-rec-blog-cta {
        grid-template-columns:
            60px 1fr;

        gap: 20px;
    }

    .bsf-rec-blog-btn {
        grid-column: 1 / -1;

        width: 100%;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .bsf-rec-hero,
    .bsf-rec-tags,
    .bsf-rec-section,
    .bsf-rec-blog-cta {
        width: calc(100% - 28px);
    }


    /* HERO */

    .bsf-rec-hero {
        margin-top: 16px;

        border-radius: 10px;
    }

    .bsf-rec-hero img {
        min-height: 170px;

        object-fit: cover;
        object-position: center;
    }


    /* TÍTULOS */

    .bsf-rec-title {
        font-size: 21px;
    }


    /* TAGS */

    .bsf-rec-tags {
        margin-bottom: 30px;

        display: flex;

        gap: 11px;

        overflow-x: auto;

        padding: 2px 2px 12px;

        scroll-snap-type: x mandatory;

        scrollbar-width: none;
    }

    .bsf-rec-tags::-webkit-scrollbar {
        display: none;
    }

    .bsf-rec-tag {
        min-width: 125px;
        min-height: 120px;

        scroll-snap-align: start;
    }


    /* CATEGORIAS */

    .bsf-rec-categories {
        display: flex;

        gap: 11px;

        overflow-x: auto;

        padding-bottom: 12px;

        scroll-snap-type: x mandatory;

        scrollbar-width: none;
    }

    .bsf-rec-categories::-webkit-scrollbar {
        display: none;
    }

    .bsf-rec-category {
        min-width: 150px;

        scroll-snap-align: start;
    }


    /* CARDS */

    .bsf-rec-feature-grid {
        grid-template-columns: 1fr;
    }

    .bsf-rec-feature-card,
    .bsf-rec-feature-wide {
        min-height: 0;

        grid-column: auto;

        grid-template-columns: 1fr;
    }

    .bsf-rec-feature-content {
        padding: 20px;

        grid-template-columns:
            55px 1fr;

        gap: 14px;
    }

    .bsf-rec-feature-icon {
        width: 55px;
        height: 55px;
    }

    .bsf-rec-feature-photo {
        height: 160px;
        min-height: 160px;
    }


    /* RECENTES */

    .bsf-rec-section-heading {
        align-items: flex-end;
    }

    .bsf-rec-latest {
        display: flex;

        overflow-x: auto;

        gap: 12px;

        padding-bottom: 12px;

        scroll-snap-type: x mandatory;

        scrollbar-width: none;
    }

    .bsf-rec-latest::-webkit-scrollbar {
        display: none;
    }

    .bsf-rec-post {
        min-width: 210px;

        scroll-snap-align: start;
    }

    .bsf-rec-post-image {
        height: 150px;
    }


    /* CTA BLOG */

    .bsf-rec-blog-cta {
        margin-top: 35px;
        margin-bottom: 40px;

        padding: 27px 22px;

        display: block;

        text-align: center;
    }

    .bsf-rec-blog-icon {
        margin: 0 auto 15px;
    }

    .bsf-rec-blog-copy h2 {
        font-size: 21px;
    }

    .bsf-rec-blog-copy p {
        margin-bottom: 20px;
    }

    .bsf-rec-blog-btn {
        width: 100%;
    }

}/* End custom CSS */