/*
Theme Name: Riccó 2.0
Author: F.UP
Version: 2.0.0
Author URI: https://agenciafup.com
*/
@import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@300;400;700&display=swap');

:root {
    --red: #10375e;
    --lightgray: #E5E5E5;
    --gray: #999999;
    --darkgray: #696969;

    --e-global-color-primary: #10375e;
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body, html {
    font-size: 18px;
}

html {
    overflow-x: hidden;
}

body {
    color: var( --darkgray );
    font-size: 1rem;
    line-height: 1.7em;

    font-family: 'Kumbh Sans', sans-serif;
}

a {
    color: var( --darkgray );
    text-decoration: none;
}

a:hover {
    color: var(--red);
}

strong {
    font-weight: 700;
}

/* Utils */
@media (min-width: 768px) {
    ul.two-md-columns {
        columns: 2;
        -webkit-columns: 2;
        -moz-columns: 2;
    }
}

hr {
    background-color: #FAFAFA;
    opacity: 1;
}

@media (max-width: 1200px) {
    .w-lg-100 {
        width: 100%;
    }
}

.font-light {
    font-weight: 300;
}


h1.entry-title {
    font-weight: 300;
}

/* Navigation */
header a {
    color: var(--darkgray);
}

.nav a.nav-link {
    font-size: .6rem;
    color: var(--darkgray);
    padding-left: 11px;
    padding-right: 11px;
}

    .nav .nav-link:hover {
        color: var(--red);
    }

    @media (min-width: 1300px) {
        .nav a.nav-link {
            font-size: .7rem;
        }
    }

nav .breadcrumb {
    text-transform: lowercase;
    font-size: .8rem;
    margin-bottom: 0;
}

nav .breadcrumb a {
    color: var(--darkgray);
}

    nav .breadcrumb a:hover {
        color: var(--red);
    }


.nav .dropdown-menu {
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

    .nav .dropdown-item {
        font-size: .7rem;
        color: var(--darkgray);
    }

    .nav .dropdown-item.active, .nav .dropdown-item:active {
        background-color: var(--red);
        color: white;
    }


#menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

    #menu ul li {
        padding: .4rem 0;
    }

    #menu ul li a {
        color: var(--black);
        font-size: .8rem;
    }
    

/* Form */
.form-control {
    height: 45px;
    font-size: .9rem;
    border-radius: 4px;
}

.form-select {
    height: 45px;
    font-size: .8rem;
    border-radius: 4px;
    background-color: var(--lightgray);
    border-color: transparent;
    cursor: pointer;
}

textarea.form-control {
    height: 200px;
}

/* Searchbox */
#searchbox {
    border-bottom: 1px solid var(--lightgray);
}

.search .form-control {
    width: 150px;
}

/* Btn */
.btn {
    border-radius: 4px;
    border-color: transparent;
}

.btn-primary {
    background-color: var(--red);
    color: white;
    font-size: .7rem;
    font-weight: 700;
    padding: 10px 25px;
}

    .btn-primary:hover {
        background-color: var(--red);
        border-color: transparent;
        opacity: .8;
    }

.btn-outline {
    border: 1px solid var(--lightgray);
    padding: 10px 25px;
    font-size: .7rem;
    font-weight: 700;
    color: var(--darkgray);
}

    .btn-outline:hover {
        background-color: var(--red);
        color: white;
        font-size: .7rem;
    }

.btn-secondary {
    background-color: var(--lightgray);
    color: var(--darkgray);
    font-size: .7rem;
    font-weight: 700;
    height: 100%;
    padding: 10px 25px;
}

    .btn-secondary:hover {
        background-color: var(--red);
        border-color: transparent;
        opacity: .8;
    }

/* Buttons */
.warehouse {
    font-size: .8rem;
    font-weight: 700;
}

.whatsapp {
    font-weight: 700;
    font-size: .7rem;
}

.whatsapp small {
    font-weight: 400;
    font-size: .4rem;
    line-height: 1em;
}

@media (min-width: 1300px) {
    .whatsapp {
        font-size: 1rem;
    }

    .whatsapp small {
        font-size: .6rem;
        line-height: 1em;
    }
}

/* Footer */
footer {
    font-size: .75rem;
    line-height: 1.5em;
}

    footer a {
        color: var(--darkgray);
    }

    footer .container {
        border-top: 25px solid #FAFAFA;
    }

    footer strong {
        color: var(--red);
        letter-spacing: 2px;
        text-transform: uppercase;
        font-weight: 700;
    }

    footer ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

        footer ul li {
            margin-bottom: 10px;
        }

    footer .copyright {
        border-top: 1px solid var(--lightgray);
        border-bottom: 1px solid var(--lightgray);
    }

    footer .form-control {
        background-color: var(--lightgray);
        font-size: .6rem;
        border: transparent;
    }

/* Product */
.product h1 {
    text-transform: uppercase;
    font-size: 2rem;
    font-weight: 300;
}

.product .brief_description {
    line-height: 1.7em;
}

.product article {
    line-height: 1.7em;
}

.product .accordion-button:not(.collapsed) {
    background-color: transparent;
    color: var(--darkgray);
    box-shadow: none;
}

    .product .accordion-button {
        padding-left: 0;
        font-weight: 700;
    }

    .product .accordion-button:focus {
        border: transparent;
        box-shadow: none;
    }

.product .accordion-body {
    background-color: #FAFAFA;
    font-size: .8rem;
}

.product .accordion-item {
    border: transparent;
}

.product #product_specification-medidas ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.product #product_specification-medidas ul li {
    background-color: white;
    padding: 10px;
    margin-bottom: 10px;
}

.product #product_specification-colors p {
    font-size: .6rem;
    line-height: 1.4em;
}

    .product #product_specification-colors figure {
        width: 100%;
        height: 100px;
        border-radius: 8px;
        margin-bottom: 0;
    }

.product-listing a {
    color: var(--darkgray);
}
.subcategories a.btn {
    min-width: 100px;
    width: 100px;
}

.case_description {
    font-size: .8rem;
    line-height: 1.7em;
}

    .case_description strong {
        font-size: 1rem;
    }

.text a {
    color: var(--red);
}

/* Product */
.product-thumb {
    width: 70px;
    height: 70px;
    object-fit: cover;
    object-position: center;
}

img.changed {
    cursor: pointer;
}

@media (min-width: 992px) {
/* 
    #photo {
        min-height: 640px;
    } */
    
}

#thumbnails .thumbnail {
    opacity: 0.3;
}
  
#thumbnails .thumbnail.is-active {
    opacity: 1;
}

#product-slider img {
    height: auto;
    width: 100%;
}

@media (min-width: 992px) {
    #product-slider img {
        /* height: 640px;
        width: auto; */
        width: 100%;
        height: auto;
    }
}


.product-image {
    height: 230px;
    object-fit: contain;
    object-position: center;
}

@media (min-width: 992px) {
    .product-image {
        height: 320px;
    }
}

.grecaptcha-badge {
    display: none;
}

/* Splide */
.splide__arrow {
    background-color: transparent !important;
}

.splide__track--nav>.splide__list>.splide__slide.is-active {
    border: none !important;
}

#thumbnail-carousel .splide__arrow--prev {
    left: -20px !important;
}

#thumbnail-carousel .splide__arrow--next {
    right: -20px !important;
}

/* Front Page */

/* Banner */
.opaque {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background-color: rgba( 255, 255, 255, .8);
}

.banner {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}


@media (min-width: 768px) {
    .banner {
        height: 500px;
        background-size: cover;
    }
}

.splide__arrow {
    top: 25% !important;
    background-color: rgba(255,255, 255, 0) !important;
}

@media (min-width: 768px) {
    .attribute .banner {
        background-repeat: no-repeat;
        background-size: cover;
        height: 500px;
    }
    .splide__arrow {
        top: 50% !important;
    }
}

.splide__pagination__page.is-active {
    background-color: var(--red) !important;
}

.splide__pagination {
    bottom: -2rem !important;
}

#image-carousel .splide__slide {
    background-size: contain !important;
}

.float-box-titles {
    position: absolute;
    bottom: 100px;
}

    .float-box-titles h3 {
        background-color: var(--red);
        color: white;
        font-weight: 300;
        margin: 0;
        display: inline-block;
        padding: .5rem 1.5rem;
    }
        
        .float-box-titles p {
            background-color: white;
            color: var(--darkgray);
            font-weight: 300;
            margin: 0;
            display: block;
            font-size: .8rem;
            padding: .4rem .8rem;

            position: absolute;
            right: 0;
        }

    .float-box-titles.right {
        right: 12px;
    }

    .float-box-titles.right h3 {
        background-color: #1FADE3;
    }


.shortcut h3 {
    font-size: 1rem;
}

    .shortcut .btn-primary {
        font-size: .55rem;
        padding: 8px 8px;
    }

@media (min-width: 762px) {
    .shortcut h3 {
        font-size: 1.5rem;
    }
    
        .shortcut .btn-primary {
            font-size: .8rem;
            padding: 10px 25px;
        }
}

/* Blog */
.category a {
    color: var(--darkgray);
    font-size: .75rem;
    font-weight: 700;
}

@media (min-width: 768px) {

    .post .post-image {
        height: 280px;
        object-fit: cover;
        object-position: center;
    }

    .highlight .post .post-image {
        height: 450px;
        object-fit: cover;
        object-position: center;
    }
}

.post-info {
    border-bottom: 1px solid var(--lightgray);
    font-weight: 700;
    text-transform: uppercase;
}

.bar .form-select {
    width: 50%;
    background-color: var(--lightgray);
    border-color: var(--lightgray);
    font-size: .75rem;
    color: var(--darkgray);
}

@media (min-width: 768px) {
    .bar .form-select {
        width: 15%;
    }
}

.date, .author {
    font-size: .9rem;
}

.author a {
    color: var(--red);
}

p.category a {
    text-transform: uppercase;
    opacity: .8;
    font-size: .7rem;
}


article .text {
    line-height: 1.8rem;
}

    article .text a {
        color: var(--red);
    }

    .wp-block-image img {
        height: auto;
    }

    article p.category a {
        text-transform: uppercase;
        opacity: .8;
        font-size: .8rem;
    }

    article h1 {
        font-weight: 300;
        letter-spacing: -1px;
    }

    article h2, article h3, article h4, article h5, article h6 {
        margin-top: 2.5rem;
        margin-bottom: .8rem;
    }

@media (min-width: 768px) {
    article img.thumbnail {
        height: 500px;
        object-fit: cover;
        object-position: center;
    }
}

.alm-btn-wrap {
    margin-top: 35px;
    text-align: center;
}

/* Share */
.share {
    font-size: .7rem;
}

.share ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .share ul li {
        text-align: center;
        justify-content: center;
        background-color: white;
        padding: 8px;
        border-radius: 8px;
        margin-bottom: 10px;
        text-transform: uppercase;
        font-size: .7rem;
        font-weight: 700;
    }

    .share .a2a_kit {
        margin-right: 5px;
    }

    .product .a2a_kit a {
        margin-right: 15px;
    }

/* Tags */
.tags ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

    .tags ul li {
        margin-right: 10px;
        text-transform: uppercase;
        background-color: var(--lightgray);
        font-size: .7rem;
        padding: 5px 20px;
        border-radius: 8px;
        font-weight: 700;
    }

.category-top a {
    background-color: var(--lightgray);
    font-size: .7rem;
    padding: 10px 25px;
    border-radius: 8px;
    font-weight: 700;
}

.elementor-heading-title {
    line-height: 1.2em;
}

/* Pagination */
.page-item.active .page-link {
    color: #fff;
    background-color: var(--red);
    border-color: var(--red);
}

.page-link {
    color: var(--red);
}

/* Cases */
.cases img.thumb {
    width: 100%;
    height: 360px;
    object-fit: cover;
    object-position: center;
}

.cases img.thumb:hover {
    opacity: .4;
}

/* FAQ */
.ewd-ufaq-faqs h3 {
    font-size: 1.4rem !important;
    text-transform: uppercase;
    font-weight: 300;
    margin-bottom: 20px;
}

    .ewd-ufaq-faqs h4 {
        font-size: 1rem;
    }

    .ewd-ufaq-faqs .ewd-ufaq-faq-div {
        margin-bottom: 30px;
    }

    .ewd-ufaq-faq-title .ewd-ufaq-post-margin-symbol span {
        font-size: 20px !important;
        padding-top: 5px;
    }

    .ewd-ufaq-post-active {
        background-color: #F5F5F5;
    }

    .ewd-ufaq-post-active h4 {
        background-color: #F5F5F5;
        font-weight: 700;
    }

    .ewd-ufaq-permalink {
        display: none;
    }

    .thumb-logo-cases {
        width: 140px;
        height: auto;
    }


    .color-space::-webkit-scrollbar {
        -webkit-appearance: none;
        width: 10px;
      }
      
    .color-space::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background-color: rgba(0,0,0,.5);
        -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
    }

.color-space {
    max-height: 350px;
    overflow-y: scroll;
    scrollbar-width: thin;
    scrollbar-color: dark;
}

.home-nav-buttons a {
    width: 100% !important;
}

.home-nav-buttons .elementor-button-content-wrapper {
    flex-direction: column;
    height: 160px;
    align-items: center;
}

.home-nav-buttons .elementor-button-text {
    flex-grow: 0;
    margin-top: 15px;
}

.home-nav-buttons i {
    font-size: 40px;
}

.blog img.thumb {
    width: 100%;
    height: 250px;
    object-fit: cover;
    object-position: center;
}

    .blog a {
        color: var(--red) !important;
        font-size: 15px;
        text-decoration: underline !important;
    }

    .blog .title {
        line-height: 23px;
    }


#home-cases .splide__arrow--prev {
    left: -3em;
    background-color: #7C7C7C !important;
    border-radius: 4px;
}

    #home-cases .splide__arrow--prev svg {
        fill: white;
    }

#home-cases .splide__arrow--next {
    right: -3em;
    background-color: #7C7C7C !important;
    border-radius: 4px;
}

    #home-cases .splide__arrow--next svg {
        fill: white;
    }


#home-blog .splide__arrow--prev {
    left: -3em;
    background-color: #7C7C7C !important;
    border-radius: 4px;
}

    #home-blog .splide__arrow--prev svg {
        fill: white;
    }

#home-blog .splide__arrow--next {
    right: -3em;
    background-color: #7C7C7C !important;
    border-radius: 4px;
}

    #home-blog .splide__arrow--next svg {
        fill: white;
    }

    #btn-msg-whatsapp {
        position:fixed;
        bottom: 28px;
        right: 28px;
    }

#sugestoes-ambientes-ambientes {
    display: flex;
    flex-wrap: wrap;
    gap: 5rem;
}

.sugestoes-grid-33 {
    flex: 0 0 calc(33.333% - 3.333rem);
}

.produtos_do_ambiente img.thumb {
    object-fit: contain;
    height: 255px;
}


.nossos_produtos p {
    text-align: center!important;
}

.nossos_produtos p a {
    font-size: 20px!important;
    font-weight: 700!important;
    color: #696969!important;
}

@media(max-width: 768px) {
    #image-carousel .splide__slide {
        height: 270px!important;
    }

    .produtos_do_ambiente {
        padding-top: 0!important;
        margin-top: 0!important;
        margin-bottom: 4rem!important;
    }

    .sugestoes-grid-33 {
        flex: 0 0 100%!important;
    }

    .splide__track--fade>.splide__list>.splide__slide {
        background-size: contain!important;
        height: 232px!important;
    }
}

.hfe-search-submit {
    border-radius: 50%!important;
}

.hfe-search-form__input {
    border-color: #CED4DA!important;
    border-width: 1px 1px 1px 1px!important;
    border-style: solid!important;
    border-radius: 3px!important;
    margin-right: 0.7rem!important;
}

header.py-3 {
    display:none;
}

/* Banner - Ocupando 100% da tela sem cortes */
.banner {
    width: 100vw; /* 100% da largura da tela */
    min-height: 50vh; /* Altura mínima para evitar cortes verticais */
    background-size: contain; /* Garante que a imagem não seja cortada */
    background-position: center center;
    background-repeat: no-repeat;
}

/* Ajuste para tablets */
@media (max-width: 1024px) {
    .banner {
        min-height: 40vh;
    }
}

/* Ajuste para celulares */
@media (max-width: 768px) {
    .banner {
        min-height: auto;
        height: auto;
        width: 100%; /* Garantia extra de que ocupará 100% */
    }
}

/* Para garantir que o banner do atributo não seja afetado */
@media (min-width: 768px) {
    .attribute .banner {
        background-repeat: no-repeat;
        background-size: contain;
        height: 500px;
    }
}

/* Garante que as imagens no mobile ocupem 100% da largura sem cortes */
.d-md-none img {
    width: 100vw; /* 100% da tela */
    height: auto;
    object-fit: contain;
}

/* Garante que o header e o menu ocupem 100% da largura em telas grandes */
header {
    width: 100vw;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Distribui corretamente os itens */
    padding: 0 2rem;
    overflow: visible; /* Garante que nada fique oculto */
}

/* Ajuste para telas muito largas (acima de 1900px) */
@media (min-width: 1900px) {
    .navbar, .nav {
        width: 100%;
        max-width: 100%;
        padding: 0 5rem; /* Ajusta a margem para manter os elementos visíveis */
    }

    .navbar-brand img {
        max-width: 250px; /* Mantém o logotipo visível */
        display: block;
    }

    .nav .nav-link, .header-search {
        display: flex;
        align-items: center;
    }
}

/* Garante que a barra de busca e a lupa fiquem sempre visíveis */
.header-search {
    position: relative;
    right: 0;
    display: flex;
    align-items: center;
}

.header-search input {
    max-width: 200px;
}

/* Banner */
.opaque {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background-color: rgba(255, 255, 255, .8);
}

/* Ajuste do banner para responsividade */
.banner {
    min-height: 50vh; /* Ocupa 50% da tela para evitar cortes */
    background-position: center;
    background-size: contain; /* Mantém a imagem inteira sem cortes */
    background-repeat: no-repeat;
}

/* Ajuste para tablets */
@media (max-width: 1024px) {
    .banner {
        min-height: 40vh; /* Reduz um pouco a altura para melhor adaptação */
    }
}

/* Ajuste para celulares */
@media (max-width: 768px) {
    .banner {
        min-height: auto; /* Altura automática para evitar cortes */
    }
}

/* Mantendo ajustes na classe attribute .banner */
@media (min-width: 768px) {
    .attribute .banner {
        background-repeat: no-repeat;
        background-size: cover; /* Mantém o preenchimento total para outros banners */
        height: 500px;
    }
    .splide__arrow {
        top: 50% !important;
    }
}

/* Ajuste da posição dos botões no slider */
.splide__arrow {
    top: 25% !important;
    background-color: rgba(255,255,255,0) !important;
}

.splide__pagination__page.is-active {
    background-color: var(--red) !important;
}

.splide__pagination {
    bottom: -2rem !important;
}

#image-carousel .splide__slide {
    background-size: contain !important;
}

/* Esconde o título apenas nas páginas de categoria de produtos */
.container-xxl > h1.entry-title {
    display: none !important;
}

/* Mantém o título do produto visível */
body.single-movel h1.entry-title {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}