/* =========================================================
   CIRILLO ACESSÓRIOS — TEMA PREMIUM
   CSS PURO | LOJA INTEGRADA | TEMA GALERIA
   Dourado + branco + grafite + prata
   ========================================================= */


/* ---------------------------------------------------------
   1. VARIÁVEIS
   --------------------------------------------------------- */

:root {
    --cirillo-gold: #b8944d;
    --cirillo-gold-dark: #947538;
    --cirillo-gold-light: #d8bd7b;

    --cirillo-silver: #bfc1c3;
    --cirillo-silver-dark: #8e9092;

    --cirillo-black: #202020;
    --cirillo-text: #333333;
    --cirillo-muted: #777777;

    --cirillo-bg: #ffffff;
    --cirillo-bg-soft: #faf9f7;
    --cirillo-border: #e8e5df;

    --cirillo-radius: 3px;

    --cirillo-shadow:
        0 8px 30px rgba(0,0,0,.055);

    --cirillo-transition:
        all .25s ease;
}


/* ---------------------------------------------------------
   2. RESET VISUAL
   --------------------------------------------------------- */

html {
    scroll-behavior: smooth;
}

body {
    background: var(--cirillo-bg);
    color: var(--cirillo-text);
    font-family:
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--cirillo-transition);
}

img {
    max-width: 100%;
}


/* ---------------------------------------------------------
   3. TOPO
   --------------------------------------------------------- */

#cabecalho,
.header,
header {
    background: #fff;
}

#cabecalho {
    border-bottom: 1px solid var(--cirillo-border);
}


/* ---------------------------------------------------------
   4. LOGO
   --------------------------------------------------------- */

.logo img {
    max-height: 72px;
    width: auto;
    transition: var(--cirillo-transition);
}

.logo img:hover {
    opacity: .82;
}


/* ---------------------------------------------------------
   5. MENU PRINCIPAL
   --------------------------------------------------------- */

.menu-principal,
.menu {
    background: #fff;
}

.menu-principal a,
.menu a {
    color: var(--cirillo-black);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.menu-principal a:hover,
.menu a:hover {
    color: var(--cirillo-gold);
}


/* ---------------------------------------------------------
   6. CATEGORIAS / MENU
   --------------------------------------------------------- */

.menu-principal > ul > li > a {
    position: relative;
}

.menu-principal > ul > li > a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -7px;
    width: 0;
    height: 1px;
    background: var(--cirillo-gold);
    transform: translateX(-50%);
    transition: width .25s ease;
}

.menu-principal > ul > li > a:hover::after {
    width: 70%;
}


/* ---------------------------------------------------------
   7. SUBMENU
   --------------------------------------------------------- */

.menu-principal .submenu,
.menu-principal .dropdown-menu {
    background: #fff;
    border: 1px solid var(--cirillo-border);
    box-shadow: var(--cirillo-shadow);
}

.menu-principal .submenu a,
.menu-principal .dropdown-menu a {
    text-transform: none;
    letter-spacing: .02em;
    font-size: 13px;
}

.menu-principal .submenu a:hover,
.menu-principal .dropdown-menu a:hover {
    background: var(--cirillo-bg-soft);
    color: var(--cirillo-gold-dark);
}


/* ---------------------------------------------------------
   8. BARRA DE BUSCA
   --------------------------------------------------------- */

.busca,
.search,
#busca {
    position: relative;
}

.busca input,
.search input,
#busca input,
input[type="search"] {
    background: #fff;
    border: 1px solid var(--cirillo-border);
    border-radius: 0;
    color: var(--cirillo-black);
    min-height: 42px;
    padding: 10px 48px 10px 15px;
    outline: none;
    transition: var(--cirillo-transition);
}

.busca input:focus,
.search input:focus,
#busca input:focus,
input[type="search"]:focus {
    border-color: var(--cirillo-gold);
    box-shadow: 0 0 0 2px rgba(184,148,77,.08);
}

/* =========================================================
   CIRILLO — CORREÇÃO DEFINITIVA DA BUSCA
   Lupa dentro da caixa de pesquisa
   ========================================================= */

.busca {
    position: relative !important;
}

.busca form {
    position: relative !important;
    display: block !important;
    width: 100% !important;
}

.busca input,
.busca input[type="text"],
.busca input[type="search"] {
    width: 100% !important;
    height: 58px !important;
    min-height: 58px !important;
    box-sizing: border-box !important;

    padding: 0 58px 0 15px !important;

    background: #fff !important;
    border: 1px solid #e5e1da !important;
    border-radius: 0 !important;

    color: #222 !important;
    font-size: 13px !important;

    outline: none !important;
}

.busca input:focus,
.busca input[type="text"]:focus,
.busca input[type="search"]:focus {
    border-color: #b8944d !important;
    box-shadow: 0 0 0 1px rgba(184,148,77,.10) !important;
}


/* BOTÃO / LUPA */

.busca button,
.busca .botao-busca,
.busca button[type="submit"],
.busca .btn-busca {
    position: absolute !important;

    top: 0 !important;
    right: 0 !important;

    width: 58px !important;
    height: 58px !important;

    margin: 0 !important;
    padding: 0 !important;

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

    background: transparent !important;
    border: 0 !important;

    color: #b8944d !important;

    opacity: 1 !important;
    visibility: visible !important;

    cursor: pointer !important;

    z-index: 10 !important;
}


/* ÍCONE */

.busca button i,
.busca .botao-busca i,
.busca button[type="submit"] i,
.busca .btn-busca i,
.busca button svg,
.busca .botao-busca svg {
    color: #b8944d !important;
    fill: currentColor !important;

    font-size: 18px !important;

    opacity: 1 !important;
    visibility: visible !important;
}


/* HOVER */

.busca button:hover,
.busca .botao-busca:hover,
.busca button[type="submit"]:hover,
.busca .btn-busca:hover {
    color: #947538 !important;
    background: transparent !important;
}

.busca button:hover i,
.busca .botao-busca:hover i,
.busca button[type="submit"]:hover i {
    color: #947538 !important;
}


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

@media (max-width: 767px) {

    .busca input,
    .busca input[type="text"],
    .busca input[type="search"] {
        height: 46px !important;
        min-height: 46px !important;
        padding-right: 48px !important;
    }

    .busca button,
    .busca .botao-busca,
    .busca button[type="submit"],
    .busca .btn-busca {
        width: 48px !important;
        height: 46px !important;
    }

}


/* ---------------------------------------------------------
   10. CARRINHO
   --------------------------------------------------------- */

.carrinho,
.carrinho-header,
#carrinho {
    color: var(--cirillo-black);
}

.carrinho:hover,
.carrinho-header:hover,
#carrinho:hover {
    color: var(--cirillo-gold);
}

.carrinho .icone,
.carrinho-header .icone {
    color: var(--cirillo-gold);
}


/* ---------------------------------------------------------
   11. CONTEÚDO
   --------------------------------------------------------- */

#corpo,
.conteudo-principal,
.container {
    background: transparent;
}


/* ---------------------------------------------------------
   12. TÍTULOS DAS VITRINES
   --------------------------------------------------------- */

.titulo-vitrine,
.titulo,
h1,
h2 {
    color: var(--cirillo-black);
    font-weight: 400;
    letter-spacing: .04em;
}

.titulo-vitrine {
    position: relative;
    margin-bottom: 35px;
    text-align: center;
    text-transform: uppercase;
}

.titulo-vitrine::after {
    content: "";
    display: block;
    width: 42px;
    height: 1px;
    margin: 13px auto 0;
    background: var(--cirillo-gold);
}


/* ---------------------------------------------------------
   13. PRODUTOS
   --------------------------------------------------------- */

.produto,
.listagem .produto,
.product {
    background: #fff;
    border: 1px solid transparent;
    transition: var(--cirillo-transition);
}

.produto:hover,
.listagem .produto:hover,
.product:hover {
    border-color: var(--cirillo-border);
    box-shadow: var(--cirillo-shadow);
    transform: translateY(-3px);
}


/* ---------------------------------------------------------
   14. IMAGEM DOS PRODUTOS
   --------------------------------------------------------- */

.produto img,
.listagem .produto img,
.product img {
    transition: transform .45s ease;
}

.produto:hover img,
.listagem .produto:hover img,
.product:hover img {
    transform: scale(1.025);
}


/* ---------------------------------------------------------
   15. NOME DO PRODUTO
   --------------------------------------------------------- */

.produto .nome-produto,
.produto .produto-nome,
.listagem .produto .nome-produto,
.product .product-name {
    color: var(--cirillo-black);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    text-align: center;
}


/* ---------------------------------------------------------
   16. PREÇOS
   --------------------------------------------------------- */

.produto .preco,
.produto .preco-promocional,
.produto .preco-a-vista,
.listagem .produto .preco,
.product .price {
    color: var(--cirillo-black);
    font-size: 18px;
    font-weight: 600;
}

.produto .preco-de,
.produto .preco-antigo,
.listagem .produto .preco-de {
    color: #999;
    font-size: 12px;
}


/* ---------------------------------------------------------
   17. PARCELAMENTO
   --------------------------------------------------------- */

.produto .parcelamento,
.produto .preco-parcelado,
.listagem .produto .parcelamento {
    color: var(--cirillo-muted);
    font-size: 12px;
}


/* ---------------------------------------------------------
   18. DESCONTO
   --------------------------------------------------------- */

.produto .desconto,
.listagem .produto .desconto,
.product .discount {
    background: var(--cirillo-gold);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .04em;
    padding: 5px 8px;
}


/* ---------------------------------------------------------
   19. BOTÃO COMPRAR
   --------------------------------------------------------- */

.produto .botao-comprar,
.produto .botao,
.listagem .produto .botao-comprar,
.listagem .produto .botao,
.product .buy-button,
a.botao-comprar {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    min-height: 42px;
    padding: 11px 24px;

    background: var(--cirillo-gold) !important;
    border: 1px solid var(--cirillo-gold) !important;

    border-radius: var(--cirillo-radius);

    color: #fff !important;

    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;

    opacity: 1 !important;
    visibility: visible !important;

    transition: var(--cirillo-transition);
}

.produto .botao-comprar:hover,
.produto .botao:hover,
.listagem .produto .botao-comprar:hover,
.listagem .produto .botao:hover,
.product .buy-button:hover,
a.botao-comprar:hover {
    background: var(--cirillo-gold-dark) !important;
    border-color: var(--cirillo-gold-dark) !important;
    color: #fff !important;
    transform: translateY(-1px);
}


/* ---------------------------------------------------------
   20. PÁGINA DO PRODUTO
   --------------------------------------------------------- */

.pagina-produto {
    background: #fff;
}

.pagina-produto .nome-produto,
.pagina-produto h1 {
    color: var(--cirillo-black);
    font-size: 27px;
    font-weight: 400;
    letter-spacing: .02em;
}

.pagina-produto .preco,
.pagina-produto .preco-promocional {
    color: var(--cirillo-black);
    font-size: 26px;
    font-weight: 600;
}


/* ---------------------------------------------------------
   21. BOTÃO COMPRAR — PÁGINA DO PRODUTO
   --------------------------------------------------------- */

.pagina-produto .botao-comprar,
.pagina-produto .botao-comprar-principal,
.pagina-produto button[type="submit"],
.pagina-produto .btn-comprar {
    width: 100%;
    min-height: 52px;

    background: var(--cirillo-gold) !important;
    border: 1px solid var(--cirillo-gold) !important;

    border-radius: var(--cirillo-radius);

    color: #fff !important;

    font-size: 13px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;

    opacity: 1 !important;
    visibility: visible !important;
}

.pagina-produto .botao-comprar:hover,
.pagina-produto .botao-comprar-principal:hover,
.pagina-produto button[type="submit"]:hover,
.pagina-produto .btn-comprar:hover {
    background: var(--cirillo-gold-dark) !important;
}


/* ---------------------------------------------------------
   22. QUANTIDADE
   --------------------------------------------------------- */

.pagina-produto input[type="number"],
.pagina-produto .qtde input {
    min-height: 45px;
    border: 1px solid var(--cirillo-border);
    text-align: center;
    color: var(--cirillo-black);
}

.pagina-produto input[type="number"]:focus {
    border-color: var(--cirillo-gold);
    outline: none;
}


/* ---------------------------------------------------------
   23. VARIAÇÕES
   --------------------------------------------------------- */

.pagina-produto select,
.pagina-produto .atributo select {
    min-height: 45px;
    width: 100%;
    border: 1px solid var(--cirillo-border);
    background: #fff;
    color: var(--cirillo-black);
    padding: 8px 12px;
}

.pagina-produto select:focus {
    border-color: var(--cirillo-gold);
    outline: none;
}


/* ---------------------------------------------------------
   24. GALERIA DE FOTOS DO PRODUTO
   --------------------------------------------------------- */

.pagina-produto .fotos-produto img,
.pagina-produto .produto-imagem img {
    transition: opacity .25s ease;
}

.pagina-produto .fotos-produto img:hover {
    opacity: .94;
}


/* ---------------------------------------------------------
   25. FRETE
   --------------------------------------------------------- */

.pagina-produto .cep,
.pagina-produto .frete,
.pagina-produto .calcular-frete {
    border-color: var(--cirillo-border);
}

.pagina-produto .calcular-frete button,
.pagina-produto .frete button {
    background: var(--cirillo-black) !important;
    border-color: var(--cirillo-black) !important;
    color: #fff !important;
}

.pagina-produto .calcular-frete button:hover,
.pagina-produto .frete button:hover {
    background: var(--cirillo-gold) !important;
    border-color: var(--cirillo-gold) !important;
}


/* ---------------------------------------------------------
   26. CARRINHO
   --------------------------------------------------------- */

.carrinho-checkout,
.pagina-carrinho {
    background: #fff;
}

.pagina-carrinho .botao,
.pagina-carrinho .btn,
.pagina-carrinho button {
    border-radius: var(--cirillo-radius);
}

.pagina-carrinho .botao-finalizar,
.pagina-carrinho .finalizar-compra {
    background: var(--cirillo-gold) !important;
    border-color: var(--cirillo-gold) !important;
    color: #fff !important;
}

.pagina-carrinho .botao-finalizar:hover,
.pagina-carrinho .finalizar-compra:hover {
    background: var(--cirillo-gold-dark) !important;
}


/* ---------------------------------------------------------
   27. BREADCRUMB
   --------------------------------------------------------- */

.breadcrumb,
.breadcrumbs {
    color: #888;
    font-size: 12px;
}

.breadcrumb a:hover,
.breadcrumbs a:hover {
    color: var(--cirillo-gold);
}


/* ---------------------------------------------------------
   28. PAGINAÇÃO
   --------------------------------------------------------- */

.pagination a,
.paginacao a {
    border: 1px solid var(--cirillo-border);
    color: var(--cirillo-black);
}

.pagination a:hover,
.paginacao a:hover,
.pagination .active,
.paginacao .active {
    background: var(--cirillo-gold);
    border-color: var(--cirillo-gold);
    color: #fff;
}


/* ---------------------------------------------------------
   29. RODAPÉ
   --------------------------------------------------------- */

#rodape,
.rodape,
footer {
    background: #202020;
    color: #d8d8d8;
    border-top: 1px solid #e5e5e5;
}

#rodape h3,
#rodape h4,
.rodape h3,
.rodape h4,
footer h3,
footer h4 {
    color: #fff;
    font-weight: 400;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#rodape a,
.rodape a,
footer a {
    color: #cfcfcf;
}

#rodape a:hover,
.rodape a:hover,
footer a:hover {
    color: var(--cirillo-gold-light);
}


/* ---------------------------------------------------------
   30. REDES SOCIAIS
   --------------------------------------------------------- */

.rodape .social a,
footer .social a {
    transition: var(--cirillo-transition);
}

.rodape .social a:hover,
footer .social a:hover {
    color: var(--cirillo-gold-light);
    transform: translateY(-2px);
}


/* ---------------------------------------------------------
   31. FORMULÁRIOS
   --------------------------------------------------------- */

input,
textarea,
select {
    border-radius: 0;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--cirillo-gold);
}


/* ---------------------------------------------------------
   32. BOTÕES GENÉRICOS
   --------------------------------------------------------- */

.btn,
.botao,
button {
    transition: var(--cirillo-transition);
}

.btn-primary,
.botao-principal {
    background: var(--cirillo-gold) !important;
    border-color: var(--cirillo-gold) !important;
    color: #fff !important;
}

.btn-primary:hover,
.botao-principal:hover {
    background: var(--cirillo-gold-dark) !important;
    border-color: var(--cirillo-gold-dark) !important;
}


/* ---------------------------------------------------------
   33. WHATSAPP
   --------------------------------------------------------- */

.whatsapp-fixo,
.float-whatsapp {
    filter: drop-shadow(0 4px 12px rgba(0,0,0,.15));
}


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

@media (max-width: 767px) {

    body {
        font-size: 14px;
    }


    /* HEADER */

    #cabecalho {
        border-bottom: 1px solid var(--cirillo-border);
    }

    .logo img {
        max-height: 52px;
    }


    /* BUSCA */

    .busca input,
    .search input,
    #busca input,
    input[type="search"] {
        min-height: 44px;
        font-size: 14px;
    }


    /* MENU */

    .menu-principal a,
    .menu a {
        font-size: 12px;
    }


    /* VITRINE */

    .titulo-vitrine {
        font-size: 20px;
        margin-bottom: 24px;
    }


    /* PRODUTOS */

    .produto,
    .listagem .produto,
    .product {
        margin-bottom: 14px;
        box-shadow: none;
    }

    .produto:hover,
    .listagem .produto:hover,
    .product:hover {
        transform: none;
        box-shadow: none;
    }


    /* IMAGEM */

    .produto img,
    .listagem .produto img,
    .product img {
        transition: none;
    }

    .produto:hover img,
    .listagem .produto:hover img,
    .product:hover img {
        transform: none;
    }


    /* NOME */

    .produto .nome-produto,
    .produto .produto-nome,
    .listagem .produto .nome-produto,
    .product .product-name {
        font-size: 13px;
        line-height: 1.35;
    }


    /* PREÇO */

    .produto .preco,
    .produto .preco-promocional,
    .listagem .produto .preco,
    .product .price {
        font-size: 16px;
    }


    /* COMPRAR */

    .produto .botao-comprar,
    .produto .botao,
    .listagem .produto .botao-comprar,
    .listagem .produto .botao,
    .product .buy-button,
    a.botao-comprar {
        width: 100%;
        min-height: 44px;
        padding: 10px 12px;
        font-size: 11px;
    }


    /* PÁGINA PRODUTO */

    .pagina-produto .nome-produto,
    .pagina-produto h1 {
        font-size: 22px;
        line-height: 1.3;
    }

    .pagina-produto .preco,
    .pagina-produto .preco-promocional {
        font-size: 23px;
    }


    /* BOTÃO PRINCIPAL */

    .pagina-produto .botao-comprar,
    .pagina-produto .botao-comprar-principal,
    .pagina-produto button[type="submit"],
    .pagina-produto .btn-comprar {
        min-height: 52px;
        font-size: 12px;
    }


    /* RODAPÉ */

    #rodape,
    .rodape,
    footer {
        text-align: center;
    }

}


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

@media (max-width: 480px) {

    .logo img {
        max-height: 45px;
    }

    .titulo-vitrine {
        font-size: 18px;
    }

    .produto .nome-produto,
    .produto .produto-nome {
        font-size: 12px;
    }

    .produto .preco,
    .produto .preco-promocional {
        font-size: 15px;
    }

}


/* =========================================================
   ACABAMENTO FINAL
   ========================================================= */

::selection {
    background: var(--cirillo-gold);
    color: #fff;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f5f5f5;
}

::-webkit-scrollbar-thumb {
    background: var(--cirillo-silver-dark);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--cirillo-gold);
}
/* =========================================================
   CIRILLO — BOTÃO VOLTAR AO TOPO + WHATSAPP
   Evita sobreposição no canto inferior direito
   ========================================================= */

/* Botão Voltar ao Topo */
#back-to-top,
.back-to-top,
.voltar-topo,
.botao-topo {
    right: 20px !important;
    bottom: 90px !important;
    z-index: 9998 !important;
}

/* WhatsApp */
.whatsapp-fixo,
.float-whatsapp,
.whatsapp-button,
.whatsapp-float {
    right: 20px !important;
    bottom: 20px !important;
    z-index: 9999 !important;
}


/* MOBILE */
@media (max-width: 767px) {

    #back-to-top,
    .back-to-top,
    .voltar-topo,
    .botao-topo {
        right: 15px !important;
        bottom: 85px !important;
    }

    .whatsapp-fixo,
    .float-whatsapp,
    .whatsapp-button,
    .whatsapp-float {
        right: 15px !important;
        bottom: 15px !important;
    }
}