/*
Theme Name: Storefront Child
Theme URI: https://woocommerce.com/products/storefront/
Template: storefront
Author: Automattic
Author URI: https://woocommerce.com/
Description: Storefront is the perfect theme for your next WooCommerce project. Designed and developed by WooCommerce Core developers, it features a bespoke integration with WooCommerce itself plus many of the most popular customer facing WooCommerce extensions. There are several layout & color options to personalise your shop, multiple widget regions, a responsive design and much more. Developers will love its lean and extensible codebase making it a joy to customize and extend. Looking for a WooCommerce theme? Look no further!
Tags: e-commerce,two-columns,left-sidebar,right-sidebar,custom-background,custom-colors,custom-header,custom-menu,featured-images,full-width-template,threaded-comments,accessibility-ready,rtl-language-support,footer-widgets,sticky-post,theme-options,editor-style
Version: 4.6.2.1784073616
Updated: 2026-07-15 00:00:16

*/

/* ============================================
   CSS GERAL DO SITE — DISCÂMARA BRASIL
   Cole isto no FINAL do style.css do tema filho
   (Aparência → Editor de arquivos do tema → style.css),
   depois do bloco de comentário do cabeçalho do tema
   (Theme Name, Template, etc.) que já existe lá.
   NÃO apague esse cabeçalho — só acrescente isto abaixo.
   ============================================ */

:root {
    --azul:      #1B3A6B;
    --azul-d:    #122850;
    --laranja:   #F47920;
    --laranja-d: #d4660f;
    --cinza-f:   #F5F6F8;
}
/* ===== GERAL ===== */
body {
    font-family: 'Barlow', sans-serif !important;
    background: var(--cinza-f) !important;
    color: #333 !important;
}
h1,h2,h3,h4,h5,h6,
.woocommerce-loop-product__title,
.entry-title, .page-title {
    font-family: 'Barlow Condensed', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: var(--azul) !important;
}
/* ===== HEADER ===== */
.site-header {
    background-color: var(--azul) !important;
    border-bottom: 3px solid var(--laranja) !important;
    padding: 0 !important;
}
.site-header .col-full {
    padding: 0 !important;
    max-width: 100% !important;
}
.site-branding,
.main-navigation,
.site-search,
.site-header-cart,
.storefront-handheld-footer-bar,
.menu-toggle,
.secondary-navigation { display: none !important; }
/* ===== BOTÕES ===== */
.button, button, input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
    background-color: var(--laranja) !important;
    color: #fff !important;
    font-family: 'Barlow Condensed', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border: none !important;
    border-radius: 4px !important;
    transition: background .2s !important;
}
.button:hover, button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
    background-color: var(--laranja-d) !important;
    color: #fff !important;
}
/* ===== PREÇOS ===== */
.woocommerce .price,
.woocommerce-Price-amount {
    color: var(--laranja) !important;
    font-family: 'Barlow Condensed', sans-serif !important;
    font-weight: 800 !important;
    font-size: 22px !important;
}
/* ===== CARDS DE PRODUTO ===== */
.woocommerce ul.products li.product,
.woocommerce .related.products ul.products li.product {
    background: #fff !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    transition: box-shadow .2s, transform .2s !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}
.woocommerce ul.products li.product:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,.12) !important;
    transform: translateY(-3px) !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 15px !important;
    padding: 12px 16px 4px !important;
    color: var(--azul) !important;
    flex-grow: 1;
}
.woocommerce ul.products li.product .price {
    padding: 0 16px 16px !important;
}
.woocommerce ul.products li.product a.button {
    margin-top: auto !important;
}
.woocommerce ul.products li.product img {
    border-bottom: 1px solid #f0f0f0 !important;
    background: var(--cinza-f) !important;
    padding: 16px !important;
    height: 220px !important;
    width: 100% !important;
    object-fit: contain !important;
}
/* ===== BADGE OFERTA ===== */
.woocommerce span.onsale {
    background-color: var(--laranja) !important;
    color: #fff !important;
    font-family: 'Barlow Condensed', sans-serif !important;
    font-weight: 700 !important;
    border-radius: 4px !important;
    min-height: auto !important;
    line-height: 1.5 !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
}
/* ===== PÁGINA DE PRODUTO ===== */
.woocommerce div.product .product_title {
    color: var(--azul) !important;
    font-family: 'Barlow Condensed', sans-serif !important;
    font-weight: 900 !important;
    font-size: 36px !important;
}
.woocommerce div.product p.price {
    color: var(--laranja) !important;
    font-size: 32px !important;
}
/* ===== TABELA CARRINHO ===== */
.woocommerce table.shop_table th {
    background: var(--azul) !important;
    color: #fff !important;
    font-family: 'Barlow Condensed', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border: none !important;
}
.woocommerce table.shop_table td {
    border-color: #eee !important;
}
/* ===== TÍTULO LOJA =====
   O título ficava dentro da mesma coluna da grade de produtos, na mesma
   altura da caixa de filtro. Agora ele é posicionado por CSS Grid, numa
   célula própria acima de sidebar+conteúdo (ver ".col-full" mais abaixo). */
.woocommerce-products-header__title.page-title { display: none !important; }
.dc-shop-header {
    grid-area: titulo;
}
.dc-shop-title {
    font-family: 'Barlow Condensed', sans-serif !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    font-size: 48px !important;
    line-height: 1 !important;
    color: var(--azul) !important;
    margin: 0 !important;
    padding-bottom: 12px !important;
    border-bottom: 3px solid var(--laranja);
}
@media (max-width: 600px) {
    .dc-shop-title { font-size: 34px !important; }
}
/* ===== SIDEBAR / FILTROS ===== */
.widget_recent_entries,
.widget_recent_comments,
.widget_archive,
.widget_search { display: none !important; }

/* Fora da loja (páginas comuns): conteúdo ocupa 100%, sem sidebar */
.woocommerce-page:not(.archive) .content-area {
    width: 100% !important;
    float: none !important;
}
.woocommerce-page:not(.archive) .widget-area {
    display: none !important;
}
/* Widget-area padrão do WooCommerce (bloco novo de filtros) fica sempre escondida —
   usamos nosso próprio filtro (.discamara-filtro-lateral) no lugar dela. */
.archive.woocommerce-page .widget-area {
    display: none !important;
}
.archive.woocommerce-page .content-area {
    float: none !important;
}
/* Layout com CSS GRID em vez de flexbox.
   Motivo da troca: o Storefront injeta uns elementos extras dentro desse
   container (uma <div class="woocommerce"> vazia, e o próprio pseudo-
   elemento de clearfix ::before/::after que o tema usa) que, no flexbox,
   "contavam" na hora de calcular o respiro (gap) entre os itens e
   empurravam a sidebar 24px pra direita sem eu ter pedido isso — eram
   itens fantasma que eu não conseguia controlar um por um. Com grid e
   áreas nomeadas, só os 3 elementos que eu realmente posiciono entram
   no cálculo; qualquer outra coisa que o tema colocar ali dentro (visível
   ou não) simplesmente não participa do layout. */
.archive.woocommerce-page .site-content .col-full {
    max-width: 1440px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 280px 1fr;
    grid-template-areas:
        "titulo  titulo"
        "sidebar conteudo";
    column-gap: 24px;
    row-gap: 20px;
    align-items: start !important;
}
.archive.woocommerce-page .site-content .col-full::before,
.archive.woocommerce-page .site-content .col-full::after {
    display: none !important;
    content: none !important;
}
/* Essa <div class="woocommerce"> some do DOM antes mesmo de entrar na
   conta do grid (confirmado: vem sempre vazia, 0px, sem texto). */
.archive.woocommerce-page .site-content .col-full > .woocommerce {
    display: none !important;
}
@media (max-width: 768px) {
    .archive.woocommerce-page .site-content .col-full {
        grid-template-columns: 1fr;
        grid-template-areas:
            "titulo"
            "sidebar"
            "conteudo";
    }
}
.archive.woocommerce-page .content-area {
    grid-area: conteudo;
    min-width: 0 !important;
    width: auto !important;
    box-sizing: border-box !important;
}
/* Sidebar sempre à esquerda dos produtos e "grudada" na tela ao rolar.
   Usamos !important em position/top porque o Storefront carrega seu
   próprio CSS depois do nosso em algumas páginas e sobrescrevia essas
   propriedades silenciosamente — sem !important a sidebar parecia "sticky"
   no código mas rolava junto com a página na prática. */
.discamara-filtro-lateral {
    grid-area: sidebar;
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,.05);
    align-self: start !important;
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 20px !important;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}
/* Em telas estreitas a sidebar empilha acima da grade de produtos —
   nesse caso ela não deve ficar grudada na tela (ia cobrir os produtos
   ao rolar num espaço tão pequeno). */
@media (max-width: 768px) {
    .discamara-filtro-lateral {
        position: static !important;
        max-height: none;
        overflow-y: visible;
    }
}
.discamara-filtro-lateral h3 {
    font-family: 'Barlow Condensed', sans-serif !important;
    color: #1B3A6B !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
    letter-spacing: 1px !important;
    margin: 0 0 16px !important;
    padding-bottom: 8px !important;
    border-bottom: 2px solid #F47920 !important;
}
.discamara-filtro-lateral .filtro-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #F47920;
}
.discamara-filtro-lateral .filtro-cabecalho h3 { margin: 0 !important; padding: 0 !important; border: 0 !important; }
.discamara-filtro-lateral .filtro-limpar {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #999;
    text-decoration: underline;
}
.discamara-filtro-lateral .filtro-limpar:hover { color: #F47920; }
.discamara-filtro-lateral .filtro-cat-grupo { margin-bottom: 2px; }
/* Checkbox custom — permite marcar mais de uma categoria/atributo ao
   mesmo tempo, em vez do link antigo que só deixava escolher uma. */
.discamara-filtro-lateral .filtro-check {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 8px 0;
}
.discamara-filtro-lateral .filtro-check input[type=checkbox] {
    accent-color: #F47920;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    cursor: pointer;
}
.discamara-filtro-lateral .filtro-cat-pai {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    color: #1B3A6B;
    border-bottom: 1px solid #f0f0f0;
    padding: 9px 0;
}
.discamara-filtro-lateral ul.filtro-subcats {
    list-style: none;
    margin: 2px 0 10px 4px;
    padding: 0 0 0 12px;
    border-left: 2px solid #f0f0f0;
}
.discamara-filtro-lateral ul.filtro-subcats li { margin: 0; }
.discamara-filtro-lateral ul.filtro-subcats .filtro-check {
    color: #777;
    font-size: 12.5px;
    padding: 6px 0;
}
.discamara-filtro-lateral ul.filtro-subcats .filtro-check:hover { color: #F47920; }
.discamara-filtro-lateral .filtro-preco-inputs {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.discamara-filtro-lateral input[type=number] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    box-sizing: border-box;
}
.discamara-filtro-lateral button.button {
    width: 100%;
}
/* ===== FOOTER ===== */
.site-footer {
    background-color: #0a1e3a !important;
    border-top: 3px solid var(--laranja) !important;
    padding: 0 !important;
}
.site-footer .col-full { padding: 0 !important; }
.site-info { display: none !important; }

/* ===== MENU MOBILE (HAMBÚRGUER) =====
   O menu handheld padrão do Storefront foi desligado lá em cima
   (.menu-toggle { display:none }), então sem isso o site ficava sem
   nenhum jeito de navegar pelo celular — o menu simplesmente sumia. */
.dc-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    flex-shrink: 0;
}
.dc-menu-toggle svg { display: block; }

@media (max-width: 900px) {
    .dc-header-bar { flex-wrap: wrap !important; }
    .dc-header-actions { gap: 14px !important; }
    .dc-header-nav {
        display: none !important;
        width: 100% !important;
        order: 3;
        justify-content: flex-start !important;
        background: var(--azul-d);
        margin: 14px -24px -14px !important;
        padding: 8px 0 !important;
    }
    .dc-header-nav ul { flex-direction: column !important; gap: 0 !important; width: 100%; }
    .dc-header-nav li { border-bottom: 1px solid rgba(255,255,255,.08); }
    .dc-header-nav a { padding: 14px 24px !important; }
    .dc-header-bar.menu-aberto .dc-header-nav { display: block !important; }
    .dc-menu-toggle { display: flex !important; align-items: center; justify-content: center; }
}

/* ===== RODAPÉ NO CELULAR ===== */
@media (max-width: 768px) {
    .dc-footer-grid { grid-template-columns: 1fr !important; gap: 28px !important; text-align: center; }
    .dc-footer-grid > div:first-child > div:last-child { justify-content: center; }
    .dc-footer-bottom { flex-direction: column !important; gap: 6px; text-align: center; }
}