/*
Theme Name: Akole WP
Author: Matheus Perrut
Description: Akole produtos naturais
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.2
Version: 1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: akole
Tags: akole, blog
*/

@charset "UTF-8";

@font-face {
    font-family: Neue Haas Grotesk Display Pro;
    src: url("./media/NeueHaasDisplay-Light-V3CFSLLZ.woff2") format("woff2"), url("./media/NeueHaasDisplay-Light-R2QNBGTM.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Neue Haas Grotesk Display Pro;
    src: url("./media/NeueHaasDisplay-Black-U2DFUX4K.woff2") format("woff2"), url("./media/NeueHaasDisplay-Black-LCER7C7S.woff") format("woff");
    font-weight: 900;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Neue Haas Grotesk Display Pro;
    src: url("./media/NeueHaasDisplay-BlackItalic-NS2WT2UK.woff2") format("woff2"), url("./media/NeueHaasDisplay-BlackItalic-73TNP5PJ.woff") format("woff");
    font-weight: 900;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: Neue Haas Grotesk Display Pro;
    src: url("./media/NeueHaasDisplay-Bold-YR2JEIF4.woff2") format("woff2"), url("./media/NeueHaasDisplay-Bold-ZCMUGTUY.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Neue Haas Grotesk Display Pro;
    src: url("./media/NeueHaasDisplay-BoldItalic-XIDYAMIV.woff2") format("woff2"), url("./media/NeueHaasDisplay-BoldItalic-2OGFQUY2.woff") format("woff");
    font-weight: 700;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: Neue Haas Grotesk Display Pro;
    src: url("./media/NeueHaasDisplay-LightItalic-L7IKFSNP.woff2") format("woff2"), url("./media/NeueHaasDisplay-LightItalic-XVHAB2BC.woff") format("woff");
    font-weight: 300;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: Neue Haas Grotesk Display Pro;
    src: url("./media/NeueHaasDisplay-Mediu-TX2MNVZM.woff2") format("woff2"), url("./media/NeueHaasDisplay-Mediu-XMRDFROA.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Neue Haas Grotesk Display Pro;
    src: url("./media/NeueHaasDisplay-MediumItalic-7N7XCF2K.woff2") format("woff2"), url("./media/NeueHaasDisplay-MediumItalic-MNID2JO3.woff") format("woff");
    font-weight: 500;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: Neue Haas Grotesk Display Pro;
    src: url("./media/NeueHaasDisplay-Roman-OXZAMTXX.woff2") format("woff2"), url("./media/NeueHaasDisplay-Roman-SI6LQCSW.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Neue Haas Grotesk Display Pro;
    src: url("./media/NeueHaasDisplay-ThinItalic-AXM25RZG.woff2") format("woff2"), url("./media/NeueHaasDisplay-ThinItalic-TJFNWUMN.woff") format("woff");
    font-weight: 100;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: Neue Haas Grotesk Display Pro;
    src: url("./media/NeueHaasDisplay-RomanItalic-S2REAVVE.woff2") format("woff2"), url("./media/NeueHaasDisplay-RomanItalic-2Z7AYZJ7.woff") format("woff");
    font-weight: 500;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: Neue Haas Grotesk Display Pro;
    src: url("./media/NeueHaasDisplay-Thin-R66RJAJM.woff2") format("woff2"), url("./media/NeueHaasDisplay-Thin-IB4LJ7MT.woff") format("woff");
    font-weight: 100;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Neue Haas Grotesk Display Pro;
    src: url("./media/NeueHaasDisplay-XThin-L4Z7KFQU.woff2") format("woff2"), url("./media/NeueHaasDisplay-XThin-V26LXFGF.woff") format("woff");
    font-weight: 100;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Neue Haas Grotesk Display Pro;
    src: url("./media/NeueHaasDisplay-XXThinItalic-DT3Y7L5U.woff2") format("woff2"), url("./media/NeueHaasDisplay-XXThinItalic-4GGM3RA4.woff") format("woff");
    font-weight: 100;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: Neue Haas Grotesk Display Pro;
    src: url("./media/NeueHaasDisplay-XXThin-IEDNNA6Y.woff2") format("woff2"), url("./media/NeueHaasDisplay-XXThin-ILVGDGPR.woff") format("woff");
    font-weight: 100;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Neue Haas Grotesk Display Pro;
    src: url("./media/NeueHaasDisplay-XThinItalic-4J5PHUB7.woff2") format("woff2"), url("./media/NeueHaasDisplay-XThinItalic-5TRJ7MET.woff") format("woff");
    font-weight: 100;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: Calming;
    src: url("./media/Calming-Regular-M5WULPI6.woff2") format("woff2"), url("./media/Calming-Regular-HFBTZVAG.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Hamburg;
    src: url("./media/Hamburg-RX3MIMH7.woff2") format("woff2"), url("./media/Hamburg-4D3ZCENW.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

:root {
    font-size: 18px;
    --bs-body-font-family: "Neue Haas Grotesk Display Pro";
    --bs-body-font-weight: normal;
    --bs-body-color: #cc8c74;
    --bs-link-color-rgb: #cc8c74;
    --bs-link-hover-color-rgb: #cc8c74
}

h1,
.h1 {
    font-weight: 400
}

.bg-primary {
    --bs-primary-rgb: 244, 236, 225;
    --bs-bg-opacity: 1
}

.bg-primary-subtle {
    --bs-primary-bg-subtle: white
}

.navbar {
    --bs-navbar-active-color: #cc8c74;
    --bs-navbar-color: #cc8c74
}

.navbar-nav {
    --bs-nav-link-font-weight: 300
}

.navbar-nav .nav-link.active {
    --bs-nav-link-font-weight: 400
}

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2394845f'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e")
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2394845f'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")
}

.carousel-indicators {
    margin-bottom: .25rem
}

.carousel-indicators [data-bs-target] {
    background-color: #94845f
}

.carousel-caption {
    background-color: #94845f;
    color: #f9f6ee;
    bottom: 2rem;
    padding: 0
}

.carousel-caption p {
    margin-bottom: 0
}

.accordion {
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(185, 184, 147, .25);
    --bs-accordion-active-color: #94845f
}

.accordion-button {
    padding-left: 0;
    padding-right: 0
}

.accordion-button:focus {
    box-shadow: none
}

.btn-primary {
    --bs-btn-color: #f9f6ee;
    --bs-btn-bg: #94845f;
    --bs-btn-border-color: #94845f;
    --bs-btn-hover-color: #f9f6ee;
    --bs-btn-hover-bg: #b9b893;
    --bs-btn-hover-border-color: #b9b893;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #f9f6ee;
    --bs-btn-active-bg: #b9b893;
    --bs-btn-active-border-color: #b9b893;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    --bs-btn-disabled-color: #f9f6ee;
    --bs-btn-disabled-bg: #94845f;
    --bs-btn-disabled-border-color: #94845f
}

.form-control,
.form-label {
    font-weight: 300
}

.form-control:focus {
    border-color: #b9b893;
    box-shadow: 0 0 0 .25rem #b9b89340
}

.was-validated .form-control:valid {
    border-color: #b9b893;
    padding-right: calc(1.5em + .75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23b9b893' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e")
}

.was-validated .form-control:valid:focus {
    border-color: #b9b893;
    box-shadow: 0 0 0 .25rem #b9b89340
}

footer * {
    font-weight: 300
}

.dropdown-item {
    font-weight: 300
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: transparent;
    color: var(--bs-dropdown-link-color)
}

.dropdown-item.active {
    font-weight: 400
}

li {
    font-weight: 500;
    font-style: normal
}

@media (min-width: 576px) {
    .accordion-button:after {
        position: absolute;
        left: 160px;
        margin-left: unset
    }
}

body {
    min-height: 100vh;
    position: relative
}

.slogan {
    margin-top: 3.4rem
}

.historia-akole,
.produtos-shampoo,
.produtos-condicionador,
.como-usar-nossos-produtos,
.contato {
    padding-top: 5rem
}

.contact-form {
    max-width: 43.33rem
}

.historia p,
.produtos-shampoo p,
.produtos-condicionador p,
.como-usar-nossos-produtos p {
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

.historia h1,
.historia .h1,
.historia p {
    color: #cc8c74
}

.historia p {
    text-align: justify
}

.itens-compromissos img {
    max-height: 13.8rem
}

.botao-chamada-venda {
    animation: pulse 4s infinite;
    width: fit-content
}

@keyframes pulse {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.05)
    }

    to {
        transform: scale(1)
    }
}

.produtos-shampoo h3,
.produtos-shampoo .h3,
.produtos-shampoo h4,
.produtos-shampoo .h4,
.produtos-condicionador h3,
.produtos-condicionador .h3,
.produtos-condicionador h4,
.produtos-condicionador .h4,
.como-usar-nossos-produtos h3,
.como-usar-nossos-produtos .h3 {
    font-weight: 400
}

.how-to-thumbnail {
    max-width: 16.6rem
}

footer {
    position: absolute;
    width: 100%;
    bottom: 0
}

.produto-oferta>p {
    margin-bottom: 0
}

.produto-oferta-texto {
    min-height: 106px
}

.produto-oferta-texto p {
    margin-bottom: 8px
}

.produto-comprar {
    width: fit-content
}

.produto-descricao {
    margin-bottom: .3rem
}

.produtos-descricao {
    text-align: justify
}

.produto-oferta .produto-descricao,
.produto-oferta .produto-comprar {
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    font-size: .8rem
}

.img-zoom-lens {
    position: absolute;
    border: none;
    width: 40px;
    height: 40px
}

.img-zoom-container {
    position: relative
}

#productZoom {
    width: 400px;
    height: 400px;
    position: absolute;
    top: 0;
    left: calc(50% + 220px);
    z-index: 1000;
    background-repeat: no-repeat
}

.produtos-thumbnail-img {
    max-width: 400px
}

@media (min-width: 576px) {
    .itens-compromissos img {
        max-height: 27.7rem
    }
}

@media (max-width: 768px) {
    .produtos-imagens {
        display: none
    }

    .produtos-thumbnail-img {
        max-width: 330px
    }

    #productZoom {
        display: none !important
    }
}

/* Página Sobre */

.about-container {
    max-width: 80vw;
    margin: 0 auto;
}

main.about-page {
    background-size: 100px;
}

/* Fim Página Sobre */

/* Página Home */

.product-bg {
    background-color: rgba(244, 236, 225, 1);
}

.main-header-bg {
    background-size: cover;
    height: 60vh;
    max-height: 60vh;
}

.hide-in-large-screen {
    display: none;
}

.show-in-large-screen {
    display: block;
}

@media (max-width: 768px) {
    .hide-in-large-screen {
        display: block;
    }

    .show-in-large-screen {
        display: none;
    }
}

/* Fim Página Home */

/* Footer */

footer {
    div {
        i {
            margin-right: 0.5rem;
        }
    }
}

/* Fim Footer */

/* Página Produtos */

.produtos-thumbnail {
    width: 100%;
}

.produtos-imagens {
    position: absolute;
    z-index: 99;

    img {
        max-width: 100px;
    }
}

.thumbs-produto {
    position: relative;
}

/* Fim Página Produtos */