/* ============================================================================
   TEMA FINO CHEIRO  -  "classico"
   Boutique de cosmeticos capilares premium: atemporal, leve, elegante.
   ----------------------------------------------------------------------------
   ESCOPO / ISOLAMENTO:
   - Arquivo SOMENTE de OVERRIDES. Carregado DEPOIS de tokens.css e
     loja-final.css (vence por ordem da cascata + especificidade).
   - NAO altera tokens.css nem loja-final.css (compartilhados com a Jota).
   - Injetado apenas para este tenant (loja_tema='classico') no index.php.

   DIRECAO VISUAL:
   - Fundo: marfim/creme claro       --fc-marfim  / --fc-creme
   - Superficie de card: branco quente
   - Texto e titulos: grafite        --fc-grafite (#34383A)
   - Acento unico: dourado           --fc-dourado (#D1AA3C)  -> fios finos,
     precos, botoes, hairlines de secao.
   - Remove TODAS as superficies pretas/escuras dos tokens base
     (header, top-bar, hero, footer, carrinho, faixas, popup, toast...).
   ========================================================================= */

:root {
    /* Paleta da marca Fino Cheiro */
    --fc-marfim:      #faf6ef;  /* canvas geral (mais quente que branco) */
    --fc-creme:       #f3ece0;  /* faixas/realces de fundo, hover sutil */
    --fc-creme-2:     #efe6d8;  /* segundo creme p/ gradientes */
    --fc-branco:      #ffffff;  /* superficie de card */
    --fc-grafite:     #34383a;  /* texto e titulos */
    --fc-grafite-70:  #5a5f61;  /* texto secundario */
    --fc-grafite-45:  #8a8f90;  /* legendas/placeholder */
    --fc-dourado:     #d1aa3c;  /* acento principal */
    --fc-dourado-esc: #b6902c;  /* hover/contraste de texto dourado */
    --fc-dourado-claro:#e4c976; /* highlight/borda clara */
    --fc-dourado-12:  rgba(209, 170, 60, 0.12);
    --fc-dourado-20:  rgba(209, 170, 60, 0.20);
    --fc-dourado-30:  rgba(209, 170, 60, 0.30);
    --fc-linha:       rgba(52, 56, 58, 0.10); /* hairline grafite suave */
    --fc-sombra:      0 8px 24px -10px rgba(52, 56, 58, 0.18);
    --fc-sombra-sm:   0 2px 10px -4px rgba(52, 56, 58, 0.14);

    /* Reaproveita os tokens base: redireciona o "neon limao" para o dourado,
       o "grafite performance" para o creme, o secundario p/ grafite suave.
       Isso conserta dezenas de detalhes (badges, focus, links) de uma vez. */
    --primary:       #d1aa3c;
    --primary-dark:  #b6902c;
    --primary-light: #e4c976;
    --primary-ink:   #a87f1e;  /* dourado LEGIVEL p/ texto/icone sobre claro */
    /* --on-primary controla o bloco-cascata final do base (texto sobre o
       antigo limao neon). Apontando p/ grafite, TODO botao dourado fica com
       texto grafite de forma consistente (melhor contraste no dourado claro
       + ar de boutique), sem precisar duplicar dezenas de seletores. */
    --on-primary:    #34383a;  /* texto grafite sobre fundo dourado */
    --primary-glow:  rgba(209, 170, 60, 0.18);
    --primary-gradient: linear-gradient(135deg, #d1aa3c 0%, #b6902c 100%);
    --surface-dark:  #f3ece0;  /* faixas que eram grafite -> creme */
    --secondary:     #34383a;
    --secondary-light:#5a5f61;

    /* Fonte de exibicao mais editorial para titulos (corpo continua o base).
       Serifa classica = ar de boutique; cai em system serif se nao carregar. */
    --fc-display: Georgia, "Times New Roman", "Playfair Display", serif;
}

::selection { background: var(--fc-dourado-20); color: var(--fc-grafite); }

/* Canvas geral marfim, texto grafite */
body {
    background: var(--fc-marfim);
    color: var(--fc-grafite);
}

/* ============================================================
   1. TOP BAR  (era gradiente grafite -> creme com texto grafite)
   ============================================================ */
.top-bar {
    background: linear-gradient(90deg, var(--fc-creme) 0%, #f7efe2 50%, var(--fc-creme) 100%);
    color: var(--fc-grafite);
    border-bottom: 1px solid var(--fc-dourado-20);
    letter-spacing: 0.04em;
}
.top-bar-content span { color: var(--fc-grafite-70); font-weight: 500; }
.top-bar-content strong { color: var(--fc-dourado-esc); }
.top-bar-content i { color: var(--fc-dourado); }
.top-bar-content i.fa-pix { color: var(--fc-dourado-esc); }

/* ============================================================
   2. HEADER  (era #0f1216 -> branco quente com fio dourado)
   ============================================================ */
/* Cabecalho refinado: branco quente, mais enxuto, com hairline dourado
   discreto e sombra suave (era preto no base). */
.header {
    background: var(--fc-branco);
    padding: 8px 0;                /* um pouco mais enxuto que os 10px do base */
    box-shadow: 0 1px 0 var(--fc-linha), 0 6px 18px -14px rgba(52, 56, 58, 0.22);
    border-bottom: 1px solid var(--fc-dourado-20);
}
.header .logo img { height: 36px; }   /* logo levemente menor, mais elegante */
/* Caixa de busca: pilula creme com borda dourada fina ao focar */
.search-box {
    background: var(--fc-marfim);
    border: 1.5px solid var(--fc-linha);
}
.search-box:focus-within {
    background: var(--fc-branco);
    border-color: var(--fc-dourado);
    box-shadow: 0 0 0 4px var(--fc-dourado-12);
}
.search-box button {
    background: var(--fc-dourado);
    color: var(--fc-grafite);   /* base era branco sobre dourado (1.9:1, FAIL) */
}
.search-box button:hover { background: var(--fc-dourado-esc); color: var(--fc-grafite); }
.search-box button:focus-visible { outline: 2px solid var(--fc-dourado-esc); outline-offset: 2px; }
.search-item-info span { color: var(--fc-dourado-esc); }

/* Botoes redondos do header.
   - Cliente: contorno dourado fino (icone discreto sobre branco).
   - Carrinho (contador): SOLIDO dourado com icone grafite -> contraste AA
     (grafite sobre #d1aa3c = 5.37:1) e mais visivel que o outline antigo
     (dourado-esc sobre branco era ~3:1). */
.btn-cliente {
    background: var(--fc-branco);
    border: 1.5px solid var(--fc-dourado);
    color: var(--fc-dourado-esc);
}
.btn-cart {
    background: var(--fc-dourado);
    border: 1.5px solid var(--fc-dourado);
    color: var(--fc-grafite);
    box-shadow: var(--fc-sombra-sm);
}
.btn-cliente:hover, .btn-cliente:active {
    background: var(--fc-dourado);
    color: var(--fc-grafite);
    box-shadow: 0 4px 14px var(--fc-dourado-30);
}
.btn-cart:hover, .btn-cart:active {
    background: var(--fc-dourado-esc);
    color: var(--fc-grafite);
    box-shadow: 0 4px 14px var(--fc-dourado-30);
}
.cart-badge {
    background: var(--fc-grafite);
    color: var(--fc-branco);
    box-shadow: 0 2px 6px rgba(52, 56, 58, 0.3);
}

/* Botao atacado: solido grafite com texto creme + filete dourado */
.btn-atacado {
    background: var(--fc-grafite);
    color: var(--fc-marfim);
    border: 1.5px solid var(--fc-dourado);
    box-shadow: 0 2px 10px -3px rgba(52, 56, 58, 0.3);
}
.btn-atacado:hover {
    background: #23262a;
    border-color: var(--fc-dourado-claro);
    color: var(--fc-branco);
    box-shadow: 0 6px 16px -4px rgba(52, 56, 58, 0.4);
}
/* Botao WhatsApp: contido em dourado outline p/ nao competir com a marca */
.btn-whatsapp {
    background: var(--fc-branco);
    color: var(--fc-grafite);
    border: 1.5px solid var(--fc-dourado);
    box-shadow: none;
}
.btn-whatsapp i { color: var(--fc-dourado-esc); }
.btn-whatsapp:hover {
    background: var(--fc-dourado);
    border-color: var(--fc-dourado);
    color: var(--fc-grafite);
    box-shadow: 0 4px 14px var(--fc-dourado-30);
}
.btn-whatsapp:hover i { color: var(--fc-grafite); }

/* ============================================================
   3. CATEGORIAS  (barra do topo)  -> OCULTA neste tenant
   ----------------------------------------------------------------
   A loja Fino Cheiro tem poucos produtos: a barra de categorias
   (sticky no topo) fica vazia/sem proposito e rouba espaco do hero.
   Como o tema so carrega para este tenant, escondemos com seguranca
   tanto a barra desktop quanto qualquer estado mobile dela.
   (O JS de filtro continua existindo, apenas a UI some.)
   ============================================================ */
.categories,
nav.categories {
    display: none !important;   /* sobrescreve o display:block sticky do base + media queries */
}

/* ============================================================
   4. HERO / CARROSSEL  (era foto atletica escura com scrim preto)
   ----------------------------------------------------------------
   Os "smart banners" sao montados pelo JS (loja.js) sobrepondo
   TEXTO + cards de produto sobre o fundo. Como os banners-creative
   reais da marca (Atrator de Cachos / Pos-Progressiva) ja trazem
   tipografia e produtos embutidos, usa-los como FUNDO causaria
   colisao de texto. Entao o hero vira um PALCO creme/dourado limpo
   (leve, atemporal) e os banners reais sao reservados como pecas
   standalone (popup/campanhas). Resultado: zero colisao, ar de
   boutique, texto grafite + acento dourado bem legivel.
   ============================================================ */
.banner-carousel { background: var(--fc-marfim); }

/* Palco creme com leve aura dourada no canto (substitui foto escura) */
.bg-destaques,
.bg-combos,
.bg-pix {
    background:
        radial-gradient(120% 140% at 100% 0%,
            #f7efe1 0%, var(--fc-marfim) 45%, var(--fc-creme) 100%);
}
/* Toque dourado suave a direita (onde ficam os cards) + remove scrim preto */
.bg-destaques::before,
.bg-combos::before,
.bg-pix::before {
    background:
        radial-gradient(42% 85% at 90% 50%, var(--fc-dourado-12) 0%, transparent 70%);
}
/* Filete dourado fino na base do hero */
.bg-destaques::after,
.bg-combos::after,
.bg-pix::after {
    background: linear-gradient(90deg, var(--fc-dourado), var(--fc-dourado-claro), transparent);
    height: 2px;
}

/* Texto do hero em grafite (era branco) */
.banner-smart { color: var(--fc-grafite); }
.banner-smart-text h2 {
    color: var(--fc-grafite);
    font-family: var(--fc-display);
    font-weight: 700;
    text-transform: none;            /* boutique: sem caixa-alta dura */
    letter-spacing: -0.01em;
    text-shadow: none;
    line-height: 1.1;
}
.banner-smart-text h2 .accent,
.bg-combos ~ .banner-smart-inner .accent,
.bg-pix ~ .banner-smart-inner .accent {
    color: var(--fc-dourado-esc);
    font-style: italic;              /* leve toque editorial */
}
.banner-smart-text p { color: var(--fc-grafite-70); }
.banner-smart-text .banner-tagline { color: var(--fc-dourado-esc); }
.banner-smart-text .banner-tagline i { color: var(--fc-dourado); }

/* Badges do hero: chips creme com filete dourado (sem neon/glow) */
.banner-smart-badge,
.badge-fire, .badge-combo, .badge-pix {
    background: var(--fc-branco);
    color: var(--fc-grafite);
    border: 1px solid var(--fc-dourado-30);
    box-shadow: var(--fc-sombra-sm);
    letter-spacing: 0.12em;
}
.banner-smart-badge i,
.badge-fire i, .badge-combo i, .badge-pix i { color: var(--fc-dourado-esc); }

/* CTA do hero ("Ver produtos"): dourado solido com texto grafite (5.37:1, AA).
   O base pinta sombra/inset em LIMAO neon e o cta-pix em AZUL indigo; aqui
   sobrescrevemos TODOS os estados (default/hover/active/focus) p/ nao vazar
   limao nem azul. */
.banner-smart-cta {
    background: linear-gradient(135deg, var(--fc-dourado) 0%, var(--fc-dourado-esc) 100%);
    color: var(--fc-grafite);
    box-shadow: 0 6px 18px -6px var(--fc-dourado-30), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.banner-smart-cta:hover {
    box-shadow: 0 10px 24px -8px var(--fc-dourado-30), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    filter: brightness(1.04);
}
.banner-smart-cta:active { filter: brightness(0.98); }
.banner-smart-cta:focus-visible {
    outline: 2px solid var(--fc-dourado-esc);
    outline-offset: 3px;
}
/* "Ver combos": grafite solido com texto dourado claro (dourado-claro #e4c976
   sobre grafite = 7.6:1, AA folgado). Base vazava inset LIMAO no hover. */
.banner-smart-cta.cta-combo {
    background: var(--fc-grafite);
    color: var(--fc-dourado-claro);
    box-shadow: 0 6px 18px -8px rgba(52, 56, 58, 0.4), inset 0 1px 0 var(--fc-dourado-20);
}
.banner-smart-cta.cta-combo:hover {
    box-shadow: 0 10px 24px -8px rgba(52, 56, 58, 0.5), inset 0 1px 0 var(--fc-dourado-30);
}
/* "Aproveitar agora" (PIX): base era gradiente AZUL indigo + glow azul no hover.
   Vira dourado solido c/ grafite; remove qualquer azul em todos os estados. */
.banner-smart-cta.cta-pix {
    background: linear-gradient(135deg, var(--fc-dourado) 0%, var(--fc-dourado-esc) 100%);
    color: var(--fc-grafite);
    box-shadow: 0 6px 18px -6px var(--fc-dourado-30), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.banner-smart-cta.cta-pix:hover {
    box-shadow: 0 10px 24px -8px var(--fc-dourado-30), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* Cards de produto dentro do hero: brancos com borda fina dourada */
.banner-smart-card,
.banner-combo-mini {
    background: var(--fc-branco);
    border: 1px solid var(--fc-dourado-20);
    box-shadow: var(--fc-sombra-sm);
}
.banner-smart-card-name,
.banner-combo-mini-name { color: var(--fc-grafite); }
.banner-smart-card-price,
.banner-combo-mini-price { color: var(--fc-dourado-esc); }
.banner-smart-card-oldprice { color: var(--fc-grafite-45); }
.banner-combo-mini-discount { color: var(--fc-grafite); background: var(--fc-creme); }
/* Hover dos cards do hero: o base pinta borda + glow em LIMAO neon
   (rgba(212,241,58,...)) e um overlay ::before limao. Off-brand na boutique.
   Aqui o hover vira dourado/grafite e o overlay limao e neutralizado. */
.banner-smart-card:hover {
    background: var(--fc-branco);
    border-color: var(--fc-dourado);
    box-shadow: 0 12px 30px -14px rgba(52, 56, 58, 0.32),
                0 0 0 1px var(--fc-dourado-20);
}
.banner-smart-card::before { background: none; }
.banner-smart-card:hover::before { opacity: 0; }
/* Preco com desconto PIX no card do hero: o base pinta .pix-price em violeta
   (#7c3aed). Neste tema o destaque e sempre o dourado. */
.banner-smart-card-price.pix-price,
.pix-price { color: var(--fc-dourado-esc); }
/* card-pix: borda indigo do base -> filete dourado discreto. */
.banner-smart-card.card-pix { border-color: var(--fc-dourado-20); }
.banner-smart-card.card-pix:hover { border-color: var(--fc-dourado); }

/* Setas e indicadores do carrossel sobre fundo claro */
.banner-nav { background: var(--fc-branco); color: var(--fc-grafite); border-color: var(--fc-dourado-20); }
.banner-nav:hover { background: var(--fc-branco); }
.banner-indicator { background: var(--fc-dourado-30); }
.banner-indicator.active { background: var(--fc-dourado); }
.banner-indicator:hover { background: var(--fc-dourado-esc); }

/* (Removido: bloco do banner estatico .banner / .banner.with-bg-image -
   essa marcacao nunca e renderizada nesta loja; o hero e sempre
   .banner-smart ou .banner-marca. Era CSS morto.) */

/* ============================================================
   5. SECOES  -  titulo com FIO DOURADO
   ============================================================ */
.section-gray { background: var(--fc-creme); }
.section-header h2 {
    color: var(--fc-grafite);
    font-family: var(--fc-display);
    font-weight: 700;
    letter-spacing: 0;
    position: relative;
}
.section-header h2 i { color: var(--fc-dourado); }
/* Fio dourado fino sob o titulo da secao (detalhe de boutique) */
.section-header h2::after {
    content: "";
    display: block;
    width: 46px;
    height: 2px;
    margin-top: 8px;
    background: linear-gradient(90deg, var(--fc-dourado), var(--fc-dourado-claro));
    border-radius: 1px;
}
.section-header p { color: var(--fc-grafite-70); }
.section-header select {
    border: 1.5px solid var(--fc-linha);
    color: var(--fc-grafite-70);
    background: var(--fc-branco);
}
.section-header select:focus { border-color: var(--fc-dourado); }

/* Secao escura (faixa de features/garantias) -> creme com texto grafite */
.section-dark {
    background: linear-gradient(135deg, var(--fc-creme) 0%, var(--fc-creme-2) 100%);
    color: var(--fc-grafite);
    border-top: 1px solid var(--fc-dourado-20);
    border-bottom: 1px solid var(--fc-dourado-20);
}
.section-dark::before {
    background: radial-gradient(ellipse at 50% 0%, var(--fc-dourado-12) 0%, transparent 60%);
}
.section-dark .section-header h2 { color: var(--fc-grafite); }
.section-dark .section-header p { color: var(--fc-grafite-70); }
/* Cards de feature: branco translucido -> branco solido com filete dourado */
.feature-item {
    background: var(--fc-branco);
    border: 1px solid var(--fc-dourado-20);
    box-shadow: var(--fc-sombra-sm);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.feature-item:hover {
    background: var(--fc-branco);
    border-color: var(--fc-dourado);
    box-shadow: var(--fc-sombra);
}
.feature-item i { color: var(--fc-dourado); }
.feature-item h4 { color: var(--fc-grafite); }
.feature-item p { color: var(--fc-grafite-70); }

/* ============================================================
   6. CARDS DE PRODUTO  -  branco, borda dourada sutil, sombra leve
   ============================================================ */
.product-card {
    background: var(--fc-branco);
    border: 1px solid var(--fc-linha);
    box-shadow: var(--fc-sombra-sm);
}
/* (.product-card:hover recebe elevacao + sombra dourada na secao 16.1.) */
.product-category { color: var(--fc-dourado-esc); letter-spacing: 0.08em; }
.product-name { color: var(--fc-grafite); }
.product-price .main-price { color: var(--fc-grafite); letter-spacing: -0.01em; }
.product-price .installment { color: var(--fc-grafite-45); }
/* Selo PIX: chip creme/dourado discreto (era turquesa) */
.product-pix {
    color: var(--fc-dourado-esc);
    background: var(--fc-dourado-12);
    border: 1px solid var(--fc-dourado-20);
}
.product-pix i { color: var(--fc-dourado); }
/* Tag promo: grafite (sem vermelho gritante) com filete dourado */
.product-tag {
    background: var(--fc-grafite);
    color: var(--fc-marfim);
    box-shadow: 0 2px 6px rgba(52, 56, 58, 0.25);
    letter-spacing: 0.04em;
}

/* Botao "Adicionar" do card: dourado solido com texto grafite (era limao neon).
   grafite sobre #d1aa3c = 5.37:1 (AA folgado). */
.product-button {
    background: var(--fc-dourado);
    color: var(--fc-grafite);
    letter-spacing: 0.04em;
    font-weight: 700;
}
.product-button:hover, .product-button:active {
    background: var(--fc-dourado-esc);
    color: var(--fc-grafite);
}
.product-button:focus-visible {
    outline: 2px solid var(--fc-dourado-esc);
    outline-offset: 2px;
}
.product-button:disabled {
    opacity: 0.6;
    cursor: default;
    filter: grayscale(0.15);
}
/* Mata o flash limao do base: quando adicionado, o card pintava #d4f13a.
   Mantem dourado solido + texto grafite (estado "Adicionado"). */
.product-button.added {
    background: var(--fc-dourado);
    color: var(--fc-grafite);
}
.product-button.added i { color: var(--fc-grafite); }

/* "Ver detalhes": era outline dourado-claro (texto ~3:1) -> outline GRAFITE
   legivel (grafite sobre branco = 11.85:1). Hover vira dourado solido c/ grafite. */
.product-details-btn {
    background: transparent;
    color: var(--fc-grafite);
    border: 1.5px solid var(--fc-grafite);
}
.product-details-btn:hover,
.product-details-btn:focus-visible {
    background: var(--fc-dourado);
    color: var(--fc-grafite);
    border-color: var(--fc-dourado);
}

/* "Carregar mais produtos": era texto dourado-claro sobre branco (~3:1).
   Vira botao SOLIDO dourado com texto grafite (5.37:1, AA), no estilo da loja. */
.btn-carregar-mais {
    background: var(--fc-dourado);
    color: var(--fc-grafite);
    border: 1.5px solid var(--fc-dourado);
    font-weight: 700;
}
.btn-carregar-mais:hover:not(:disabled) {
    background: var(--fc-dourado-esc);
    color: var(--fc-grafite);
    box-shadow: 0 6px 18px var(--fc-dourado-30);
}
.btn-carregar-mais:focus-visible {
    outline: 2px solid var(--fc-dourado-esc);
    outline-offset: 2px;
}
/* Estado "Carregando..." (btn.disabled + spinner): mantem dourado legivel,
   so esmaece (o base ja poe opacity .65; reforcamos grafite no icone). */
.btn-carregar-mais:disabled { opacity: 0.6; cursor: default; }
.btn-carregar-mais i { color: var(--fc-grafite); }

/* "Ver todos os produtos" (link p/ a colecao completa, abaixo da grade):
   o base ja o pinta solido na cor primaria (token --primary), que neste tema
   aponta p/ dourado + texto grafite (--on-primary). Aqui so afinamos sombra/
   gradiente p/ casar com os demais CTAs dourados da boutique (5.37:1, AA). */
.btn-ver-todos {
    background: linear-gradient(135deg, var(--fc-dourado) 0%, var(--fc-dourado-esc) 100%);
    color: var(--fc-grafite);
    border-color: var(--fc-dourado);
    box-shadow: 0 6px 18px -6px var(--fc-dourado-30);
    letter-spacing: 0.03em;
}
.btn-ver-todos:hover {
    color: var(--fc-grafite);
    box-shadow: 0 10px 24px -8px var(--fc-dourado-30);
}
.btn-ver-todos:focus-visible { outline: 2px solid var(--fc-dourado-esc); outline-offset: 3px; }
.btn-ver-todos i { color: var(--fc-grafite); }

/* ============================================================
   7. COMBOS  (cabecalho dourado suave, preco dourado)
   ============================================================ */
.combo-card { background: var(--fc-branco); border: 1px solid var(--fc-linha); box-shadow: var(--fc-sombra-sm); }
.combo-card:hover { border-color: var(--fc-dourado); box-shadow: var(--fc-sombra); }
.combo-header { background: linear-gradient(135deg, var(--fc-dourado) 0%, var(--fc-dourado-esc) 100%); }
.combo-header h3 { color: var(--fc-grafite); font-weight: 700; }
.combo-badge { background: var(--fc-branco); color: var(--fc-dourado-esc); }
.combo-prices .new-price { color: var(--fc-dourado-esc); }
.combo-buy, .combo-actions .combo-buy { background: var(--fc-dourado); color: var(--fc-grafite); }
.combo-buy:hover, .combo-actions .combo-buy:hover { background: var(--fc-dourado-esc); color: var(--fc-grafite); }
.combo-actions .combo-details { color: var(--fc-grafite-70); border: 1.5px solid var(--fc-linha); }
.combo-actions .combo-details:hover { border-color: var(--fc-dourado); color: var(--fc-dourado-esc); background: var(--fc-creme); }
.combo-modal-precos { background: linear-gradient(135deg, #fbf5e8, #f5ebd6); }
.combo-modal-new, .combo-modal-item-preco, .combo-modal-economia { color: var(--fc-dourado-esc); }
.combo-modal-descricao { border-left-color: var(--fc-dourado); }
.combo-modal-badge { background: var(--fc-dourado); color: var(--fc-grafite); }
.combo-modal-tag { background: var(--fc-grafite); color: var(--fc-marfim); }
.combo-modal-buy { background: var(--fc-dourado); color: var(--fc-grafite); }
.combo-modal-buy:hover { background: var(--fc-dourado-esc); color: var(--fc-grafite); }
.combo-modal-item:hover { border-color: var(--fc-dourado); }

/* ============================================================
   8. CTA ATACADO (faixa revendedor)  -> grafite elegante c/ dourado
      (mantido grafite p/ dar 1 ponto focal escuro, mas refinado)
   ============================================================ */
.cta-atacado-banner {
    background: linear-gradient(135deg, var(--fc-grafite) 0%, #23262a 100%);
    box-shadow: 0 8px 24px -12px rgba(52, 56, 58, 0.4);
    color: var(--fc-marfim);
    border-top: 1px solid var(--fc-dourado-30);
    border-bottom: 1px solid var(--fc-dourado-30);
}
.cta-atacado-banner::before {
    background: radial-gradient(circle, var(--fc-dourado-20) 0%, transparent 70%);
}
.cta-atacado-icon { background: var(--fc-dourado-20); border-color: var(--fc-dourado-30); color: var(--fc-dourado-claro); }
.cta-atacado-text h3 { color: var(--fc-branco); }
.cta-atacado-text p { color: rgba(250, 246, 239, 0.85); }
/* "Seja um revendedor": sobre o banner grafite escuro. O dono quer texto
   BRANCO em negrito. Usamos um dourado mais ESCURO (#8a6a14 -> #b6902c) p/
   garantir contraste do texto branco (branco sobre #8a6a14 = 5.06:1, passa
   AA ate p/ texto normal) com filete dourado claro p/ elegancia. */
.cta-atacado-btn-primary {
    /* Dourado ESCURO nas duas pontas (era #8a6a14 -> #b6902c; o #b6902c dava
       branco 2.99:1, FAIL). Agora #8a6a14 -> #6f520f: branco 5.06-7.27:1, AA. */
    background: linear-gradient(135deg, #8a6a14 0%, #6f520f 100%);
    color: var(--fc-branco);
    font-weight: 800;
    border: 1px solid var(--fc-dourado-claro);
    box-shadow: 0 4px 12px rgba(111, 82, 15, 0.40);
}
.cta-atacado-btn-primary:hover, .cta-atacado-btn-primary:focus {
    background: linear-gradient(135deg, #8f6b14 0%, #806012 100%);
    color: var(--fc-branco);
    box-shadow: 0 8px 20px rgba(111, 82, 15, 0.50);
}
.cta-atacado-btn-primary:focus-visible {
    outline: 2px solid var(--fc-dourado-claro);
    outline-offset: 2px;
}
.cta-atacado-btn-primary i { color: var(--fc-branco); }

/* "Saber mais" (secundario, sobre o banner grafite escuro): outline dourado
   claro com texto marfim. Branco/marfim sobre o banner grafite = AA; a borda
   dourada amarra com a marca (o base usava borda branca neutra). */
.cta-atacado-btn-secondary {
    background: rgba(228, 201, 118, 0.10);   /* tint dourado claro translucido */
    color: var(--fc-marfim);
    border: 1.5px solid var(--fc-dourado-claro);
}
.cta-atacado-btn-secondary:hover,
.cta-atacado-btn-secondary:focus {
    background: rgba(228, 201, 118, 0.20);
    border-color: var(--fc-dourado);
    color: var(--fc-branco);
}
.cta-atacado-btn-secondary:focus-visible {
    outline: 2px solid var(--fc-dourado-claro);
    outline-offset: 2px;
}

/* ============================================================
   9. CARRINHO (sidebar)  -> cabecalho dourado, paineis claros
   ============================================================ */
.cart-header {
    background: linear-gradient(135deg, var(--fc-dourado) 0%, var(--fc-dourado-esc) 100%);
    color: var(--fc-grafite);
}
.cart-header h3 { color: var(--fc-grafite); }
.cart-header button { color: var(--fc-grafite); background: rgba(52, 56, 58, 0.12); border-color: rgba(52, 56, 58, 0.30); }
.cart-header button i { color: var(--fc-grafite); }
.cart-header button:hover, .cart-header button:focus-visible { background: rgba(52, 56, 58, 0.22); border-color: var(--fc-grafite); }
.cart-item { background: var(--fc-marfim); }
.cart-item-info .price { color: var(--fc-dourado-esc); }
.cart-item-qty button:hover, .cart-item-qty button:focus-visible {
    background: var(--fc-dourado); border-color: var(--fc-dourado); color: var(--fc-grafite);
}
.cart-footer { background: var(--fc-creme); border-top: 1px solid var(--fc-dourado-20); }
.cart-pix-banner { background: var(--fc-dourado-12); color: var(--fc-dourado-esc); }
.cart-pix-banner i { color: var(--fc-dourado); }
/* Faixa de frete do carrinho ("Falta R$X para frete gratis"): o caminhao
   herdava a cor escura do texto (--primary-ink). Deixamos o ICONE dourado. */
.cart-frete-info { background: var(--fc-dourado-12); color: var(--fc-dourado-esc); }
.cart-frete-info i { color: var(--fc-dourado); }
.total-line.total-final strong { color: var(--fc-dourado-esc); }
/* Botoes de checkout: WhatsApp grafite-outline, site = dourado */
.btn-checkout.btn-site { background: var(--fc-dourado); color: var(--fc-grafite); }
.btn-checkout.btn-whatsapp { background: var(--fc-grafite); color: var(--fc-marfim); box-shadow: none; }
.btn-checkout.btn-whatsapp:hover { background: #23262a; color: var(--fc-branco); box-shadow: 0 4px 14px -4px rgba(52, 56, 58, 0.4); }
.cart-empty button { background: var(--fc-dourado); color: var(--fc-grafite); }

/* ============================================================
   10. MODAL DE PRODUTO  (botoes / precos / pix)
   ============================================================ */
.btn-modal-add { background: var(--fc-dourado); color: var(--fc-grafite); }
.btn-modal-add:hover { background: var(--fc-dourado-esc); color: var(--fc-grafite); box-shadow: 0 6px 16px var(--fc-dourado-30); }
/* Comprar agora: grafite solido (era slate azulado) */
.btn-modal-buy { background: var(--fc-grafite); color: var(--fc-marfim); }
.btn-modal-buy:hover { background: linear-gradient(135deg, #23262a, #3c4044); color: var(--fc-branco); }
.modal-pix { color: var(--fc-dourado-esc); background: var(--fc-dourado-12); }

/* ============================================================
   11. POPUP (newsletter / revendedor)  -> cabecalho creme/dourado
   ============================================================ */
.popup-header {
    background: linear-gradient(135deg, var(--fc-creme) 0%, #f7efe2 55%, var(--fc-creme-2) 100%);
    color: var(--fc-grafite);
    border-bottom: 2px solid var(--fc-dourado);
}
.popup-header h2 { color: var(--fc-grafite); font-family: var(--fc-display); }
.popup-header p { color: var(--fc-grafite-70); opacity: 1; }
.form-group input:focus { border-color: var(--fc-dourado); box-shadow: 0 0 0 3px var(--fc-dourado-12); }
/* Submit do popup/newsletter: base era texto BRANCO sobre dourado (1.9:1, FAIL).
   Forcamos texto grafite (5.37:1, AA) e sombra dourada (base era limao). */
.btn-submit { background: var(--fc-dourado); color: var(--fc-grafite); box-shadow: 0 2px 10px var(--fc-dourado-20); }
.btn-submit:hover { background: var(--fc-dourado-esc); color: var(--fc-grafite); box-shadow: 0 4px 14px var(--fc-dourado-30); }
.btn-submit:focus-visible { outline: 2px solid var(--fc-dourado-esc); outline-offset: 2px; }
.btn-submit i { color: var(--fc-grafite); }
/* "Agora nao" (popup-skip): neutro creme/grafite, hover discreto + foco dourado. */
.popup-skip { color: var(--fc-grafite-70); background: var(--fc-creme); border-top-color: var(--fc-dourado-20); }
.popup-skip:hover { color: var(--fc-grafite); background: var(--fc-creme-2); }
.popup-skip:focus-visible { outline: 2px solid var(--fc-dourado); outline-offset: -2px; }

/* "Quero ser revendedor" (.rev-submit, popup revendedor): o index.html ja o
   define inline em dourado #D1AA3C + texto grafite. Aqui so adicionamos os
   estados que faltavam (active/disabled/foco) p/ paridade com os demais CTAs. */
.rev-submit:active { filter: brightness(0.97); }
.rev-submit:focus-visible { outline: 2px solid var(--fc-dourado-esc); outline-offset: 2px; }
.rev-submit:disabled { opacity: 0.6; cursor: default; }

/* ============================================================
   12. RODAPE  (classico CLARO: marfim/creme elegante + dourado/grafite)
      Reescrito 2026-06-15 a pedido do dono ("logo no rodape com FUNDO
      TRANSPARENTE; mude a COR do rodape; mais responsivo, consistente
      com o cabecalho"). O cabecalho e claro (branco quente, hairline
      dourado, sombra suave) -> o rodape passa a falar a MESMA lingua:
      fundo marfim, filete dourado no topo, texto grafite, links/icones
      dourados. Assim a logomarca grafite (PNG transparente) aparece
      nitida SEM precisar de chip/caixa atras.
      ----------------------------------------------------------------
      Antes: rodape GRAFITE escuro (#34383A->#2A2D2F) + logo num chip
      marfim. Agora: rodape CLARO + logo transparente (chip removido).
      Todas as cores (titulos, links, icones, social, footer-bottom)
      foram invertidas de claro->grafite/dourado p/ contraste AA sobre
      o novo fundo claro.
      ----------------------------------------------------------------
      ESTRATEGIA white-label (index.html e shell COMPARTILHADO com a Jota):
      nao removo colunas do HTML (mudaria a Jota); reorganizo SO por CSS
      neste tema, que carrega apenas para este tenant. A Jota fica intacta.
      Dedupe:
        - Endereco aparecia 2x (coluna "Endereco" #footer-endereco SEM numero
          + linha legal #footer-endereco-legal COM numero). Escondo a coluna
          e mantenho so a linha legal completa.
        - Grid passa a 3 colunas (About / Contato / Pagamento) no desktop.
   ============================================================ */
/* Rodape claro coerente com o header: fundo marfim, filete dourado no topo
   (espelha o border-bottom dourado do header) + sombra interna suave no topo
   p/ separar do conteudo sem linha dura. Texto base em grafite suave. */
.footer {
    background: linear-gradient(180deg, var(--fc-branco) 0%, var(--fc-marfim) 100%);
    color: var(--fc-grafite-70);
    border-top: 2px solid var(--fc-dourado);
    box-shadow: inset 0 1px 0 var(--fc-dourado-20),
                inset 0 8px 18px -16px rgba(52, 56, 58, 0.22);
    padding-top: 26px;                          /* respiro desktop fica na secao 17. */
}

/* ----------------------------------------------------------------
   LOGO DO RODAPE  -  FUNDO TRANSPARENTE (pedido do dono 2026-06-15)
   ----------------------------------------------------------------
   A logomarca da Fino Cheiro (/uploads/finocheiro-logo.png) e um
   wordmark GRAFITE (#34383A) com tracos dourados, sobre PNG transparente.
   Com o rodape agora CLARO (marfim), o grafite da arte le com nitidez
   SEM precisar de caixa/chip atras: removemos o chip marfim, a borda,
   o radius e a sombra. Fica apenas a imagem no fundo transparente do
   rodape, alinhada como o logo do cabecalho. White-label: este bloco
   so existe no tema do tenant, a Jota nunca e afetada.
   ---------------------------------------------------------------- */
.footer .footer-about #footer-logo-container {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;                /* alinha como a logo do header */
    padding: 0;                                 /* sem caixa */
    margin-bottom: 14px;
    background: transparent;                    /* FUNDO TRANSPARENTE */
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.footer .footer-about #footer-logo {
    max-height: 52px;
    max-width: 220px;
    display: block;
    filter: none;                               /* sem brightness/invert: cor real da marca */
    opacity: 1;
    mix-blend-mode: normal;                     /* anula qualquer blend herdado que dimasse */
}
/* Grid base (mobile-first): compacto. O respiro desktop fica na secao 17. */
.footer-grid { gap: 20px; padding-bottom: 18px; align-items: start; }
.footer-col h4 {
    color: var(--fc-grafite);                   /* titulo grafite (era marfim p/ fundo escuro) */
    font-size: 13px;
    margin-bottom: 10px;
    padding-bottom: 6px;
    letter-spacing: 0.03em;
}
.footer-col h4::after { background: var(--fc-dourado); width: 26px; height: 2px; }
.footer-col li { margin-bottom: 7px; }
.footer-col li, .footer-about p { color: var(--fc-grafite-70); }
.footer-col li i, .payment-item i { color: var(--fc-dourado-esc); }
/* O base pinta o icone PIX de turquesa (.payment-item i.fa-pix -> var(--pix)),
   off-brand para a boutique. Casa a especificidade (0,2,1) p/ deixar dourado. */
.payment-item i.fa-pix { color: var(--fc-dourado-esc); }
.footer-col li a, .payment-item { color: var(--fc-grafite-70); }
.footer-col li a:hover { color: var(--fc-dourado-esc); }
.footer-about p { font-size: 11.5px; margin-bottom: 9px; line-height: 1.5; }
.payment-list { gap: 8px; }
/* Social: chip claro creme com filete dourado (era tint claro p/ fundo escuro).
   Icone grafite legivel; hover dourado solido com icone grafite (5.37:1, AA). */
.social-links a {
    background: var(--fc-creme);
    border: 1px solid var(--fc-dourado-30);
    color: var(--fc-grafite);
}
.social-links a:hover {
    background: var(--fc-dourado);
    color: var(--fc-grafite);
    border-color: var(--fc-dourado);
    box-shadow: 0 4px 12px var(--fc-dourado-30);
}

/* DEDUPE endereco: esconde a coluna "Endereco" do desktop (o endereco completo
   ja aparece UMA vez na linha legal do rodape). Alvo robusto: a coluna que contem
   #footer-endereco (requer :has(), Chrome 105+). Abaixo (secao 17) o grid desktop
   passa a 3 colunas para nao deixar lacuna. */
.footer-grid > .footer-col:has(#footer-endereco) { display: none; }

/* Linha institucional: compacta, com hairline dourado fino.
   Texto grafite sobre o novo fundo claro (era marfim p/ fundo escuro). */
.footer-institucional {
    padding: 14px 0 4px;
    border-top: 1px solid var(--fc-dourado-20);
}
.footer-institucional h4 {
    color: var(--fc-grafite);
    font-size: 12px;
    margin-bottom: 8px;
}
.footer-institucional-links { gap: 5px 16px; }
.footer-institucional-links a { color: var(--fc-grafite-70); font-size: 13px; }
.footer-institucional-links a:hover { color: var(--fc-dourado-esc); }

/* ----------------------------------------------------------------
   SELO ANVISA  -  badge de confianca TRANSPARENTE (sem imagem, sem
   texto repetido). O markup vive em index.html oculto (hidden) e e
   revelado SO por este tema. A imagem injetada pelo loja.js
   (#selo-anvisa-badge) e suprimida para nao duplicar.
   ---------------------------------------------------------------- */
/* Suprime a imagem ANVISA injetada pelo JS (vira o badge transparente abaixo). */
#selo-anvisa-badge { display: none; }

/* Revela o badge (no shell ele vem com [hidden] p/ a Jota nunca exibir).
   Como este tema so carrega para o tenant de cosmeticos, aqui o tornamos
   visivel. Especificidade do id vence o [hidden] da UA stylesheet. */
#footer-trust-anvisa.footer-trust {
    display: flex;
    justify-content: center;
    padding: 14px 0 2px;
}
.footer-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: transparent;                 /* fundo transparente (pedido do dono) */
    border: 1px solid var(--fc-dourado-30);
    border-radius: 999px;
}
.footer-trust-badge > i {
    font-size: 20px;
    color: var(--fc-dourado-esc);            /* dourado legivel sobre fundo claro */
    flex: 0 0 auto;
}
.footer-trust-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    text-align: left;
    font-size: 11px;
    color: var(--fc-grafite-70);
    letter-spacing: 0.02em;
}
.footer-trust-text strong {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fc-grafite);                /* label em grafite (AA 11:1); o acento dourado fica no icone */
}

/* Rodape legal: discreto mas LEGIVEL. grafite-45 sobre marfim dava so 3.04:1
   (falha AA p/ texto normal de 11.5px); subimos p/ grafite-70 (6:1, AA). */
.footer-bottom {
    padding: 12px 0;
    font-size: 11.5px;
    color: var(--fc-grafite-70);
    border-top-color: var(--fc-dourado-20);
}
.footer-bottom #footer-razao, .footer-bottom #footer-cnpj { color: var(--fc-grafite-70); }

/* ============================================================
   13. UTILITARIOS FLUTUANTES  (toast / voltar-ao-topo / whatsapp)
   ============================================================ */
.toast { background: linear-gradient(135deg, var(--fc-grafite), #23262a); color: var(--fc-marfim); }
.toast i { color: var(--fc-dourado); }
.btn-back-to-top { background: var(--fc-grafite); color: var(--fc-marfim); }
.btn-back-to-top:hover { background: var(--fc-dourado); color: var(--fc-grafite); box-shadow: 0 6px 16px var(--fc-dourado-30); }
/* WhatsApp flutuante: grafite com icone dourado (discreto, sem verde neon) */
.whatsapp-float { background: var(--fc-grafite); color: var(--fc-dourado-claro); box-shadow: 0 4px 16px -4px rgba(52, 56, 58, 0.45); }
.whatsapp-float:hover { box-shadow: 0 8px 24px -6px rgba(52, 56, 58, 0.5); }

/* Frete calculator: opcoes/botao dourados.
   (.frete-calculator / .frete-icon / .frete-icon i recebem o tratamento
   boutique final na secao 16.2 - nao duplicar aqui.) */
.frete-option:hover, .frete-option.selected { border-color: var(--fc-dourado); }
.frete-option-price { color: var(--fc-dourado-esc); }
.frete-form button { background: var(--fc-dourado); color: var(--fc-grafite); }
.frete-form button:hover { background: var(--fc-dourado-esc); }

/* Spinner / foco / selecao */
.spinner { border-top-color: var(--fc-dourado); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
    outline: 2px solid var(--fc-dourado);
}

/* ============================================================
   14. RESPONSIVO MOBILE
   ============================================================ */
@media (max-width: 768px) {
    /* Hero no mobile: mesmo palco creme/dourado, aura centralizada */
    .bg-destaques,
    .bg-combos,
    .bg-pix {
        background:
            radial-gradient(140% 120% at 50% 0%,
                #f7efe1 0%, var(--fc-marfim) 50%, var(--fc-creme) 100%);
    }
    .bg-destaques::before,
    .bg-combos::before,
    .bg-pix::before {
        background:
            radial-gradient(70% 50% at 50% 12%, var(--fc-dourado-12) 0%, transparent 70%);
    }
    /* Faixa atacado mobile: mesmo grafite refinado */
    .cta-atacado-banner {
        background: linear-gradient(90deg, var(--fc-grafite) 0%, #23262a 100%);
        color: var(--fc-marfim);
    }
    /* Alvo de toque >=44px nos botoes redondos do header tambem por LARGURA
       (nao so por pointer:coarse), garantindo 44px no mobile real e na emulacao.
       O carrinho ja vira dourado-escuro com icone branco (secao 18). */
    .header-actions .btn-cliente,
    .header-actions .btn-cart,
    .header-actions .btn-atacado,
    .header-actions .btn-whatsapp {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }
    /* ----------------------------------------------------------------
       RODAPE MOBILE  -  reorganizado 2026-06-15 (correcao de erro de CSS)
       ----------------------------------------------------------------
       CAUSA-RAIZ do "rodape baguncado no mobile": o CSS BASE deixa o rodape
       quebrado e o tema antigo so trocava CORES, sem consertar a ESTRUTURA:
         (a) base (max-600) faz `.footer-grid{display:flex;flex-direction:
             column}` SEM esticar os filhos -> `.footer-about` encolhia para
             ~260px (largura do logo), desalinhada da grade de contato (362px)
             logo abaixo: 1a coluna estreita e torta, filete dourado cortado.
         (b) base pinta `.footer-info-grid` com `background:rgba(255,255,255,
             .1)` (separador do tema ESCURO) -> sobre o rodape claro vira uma
             lavagem cinza suja vazando nos vaos de 10px entre os cards.
         (c) base (max-768) faz `.footer-payments-mobile span{display:block}`
             -> PIX/Cartao/Dinheiro EMPILHAM dentro de um flex, espremidos e
             inconsistentes com a linha de pagamento horizontal do cabecalho.
       Aqui consertamos a ESTRUTURA por CSS (nao mexo no HTML, compartilhado
       com a Jota): colunas empilhadas LIMPAS e de LARGURA TOTAL, logo
       transparente centralizada e proporcional, contato/pagamento/
       institucional/legal bem espacados e legiveis, sem nada estourando. */
    /* COR base do rodape claro (vale p/ todo mobile/tablet ate 768).
       O grafite escuro original ja foi substituido na secao 12; aqui so
       garantimos o gradiente claro tambem nas larguras menores. */
    .footer {
        background: linear-gradient(180deg, var(--fc-branco) 0%, var(--fc-marfim) 100%);
        padding-top: 22px;
    }
    .footer .container { padding: 0 16px; }
    /* Logo do rodape: FUNDO TRANSPARENTE (sem chip). O base forca 84x84px
       !important (quadrado), que esmaga o wordmark largo (2000x417) da Fino
       Cheiro. Restaura a proporcao natural (contain), centraliza e mantem a
       cor real da marca. (!important so para vencer os !important do base.) */
    .footer .footer-about #footer-logo-container {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        margin: 0 auto 12px;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .footer .footer-about #footer-logo {
        width: auto !important;
        height: auto !important;
        max-height: 46px;
        max-width: min(230px, 64vw);
        object-fit: contain;            /* nunca estica o wordmark (base deixava fill) */
        filter: none;
    }
    .footer-about #footer-horario { color: var(--fc-grafite-70); }
    .footer-about .social-links { justify-content: center; }
    /* Cores dos cards/links do rodape claro (estrutura fica na faixa <=600). */
    .footer-info-item i { color: var(--fc-dourado-esc); opacity: 1; }
    .footer-info-item span,
    .footer-info-item a { color: var(--fc-grafite-70); }
    .footer-payments-mobile span i { color: var(--fc-dourado-esc); }
    /* O base pinta o PIX mobile de turquesa (.footer-payments-mobile i.fa-pix);
       casa especificidade p/ deixar dourado, coerente com a boutique. */
    .footer-payments-mobile i.fa-pix { color: var(--fc-dourado-esc); }
    .footer-institucional h4 { color: var(--fc-grafite); opacity: 1; }
    .footer-institucional-links a { color: var(--fc-grafite-70); }
    .footer-institucional-links a:hover { color: var(--fc-dourado-esc); }
    .footer-bottom p { color: var(--fc-grafite-70); }
    .footer-bottom #footer-razao,
    .footer-bottom #footer-cnpj { color: var(--fc-grafite); }
}

/* ----------------------------------------------------------------
   ESTRUTURA DO RODAPE MOBILE  (<=600px = onde o base liga o layout
   "info-mobile" e desliga as colunas desktop). Scopo casado com o
   breakpoint REAL do base (601-768 ainda mostra as colunas desktop em
   2 trilhas; nao mexemos nelas aqui p/ nao desalinhar o tablet).
   ---------------------------------------------------------------- */
@media (max-width: 600px) {
    /* (a) Grade em coluna unica REAL (grid), filhos de largura TOTAL e
       centralizados. O base (max-600) vira `flex; flex-direction:column`
       SEM esticar -> `.footer-about` encolhia p/ ~260px (largura do logo),
       desalinhada da grade de contato (362px). Voltar a grid 1fr conserta
       o alinhamento e o filete dourado deixa de ser cortado. */
    .footer-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 0 0 4px;
        text-align: center;
    }
    /* Bloco da marca de LARGURA TOTAL: cartao creme quente com filete dourado
       (o base pintava tint VERDE off-brand). Centralizado como o cabecalho. */
    .footer-about {
        width: auto;
        padding: 20px 16px 18px;
        background: var(--fc-creme);
        border: 1px solid var(--fc-dourado-20);
        border-radius: 14px;
        text-align: center;
    }
    /* (b) Grade de contato: 2 colunas FLUIDAS, SEM a lavagem cinza do tema
       escuro (base punha background branco-alpha que vazava nos vaos de 10px).
       Fundo transparente: quem desenha o cartao e o proprio item. */
    .footer-info-mobile { margin: 0; }
    .footer-info-grid {
        background: transparent;        /* mata o separador cinza do base */
        grid-template-columns: 1fr 1fr; /* fluido (base fixava 176px 176px) */
        gap: 10px;
    }
    .footer-info-item {
        background: var(--fc-branco);
        border: 1px solid var(--fc-dourado-20);
        border-radius: 12px;
    }
    /* (c) Pagamentos em LINHA horizontal centrada (o base faz
       `span{display:block}` -> PIX/Cartao/Dinheiro EMPILHAVAM espremidos
       dentro de um flex). Vira chips inline com respiro, como no cabecalho. */
    .footer-payments-mobile {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 8px 18px;
        margin-top: 12px;
        padding: 12px 14px;
        background: var(--fc-creme);
        border: 1px solid var(--fc-dourado-20);
        border-radius: 12px;
        color: var(--fc-grafite-70);
    }
    .footer-payments-mobile span {
        display: inline-flex;           /* sai do display:block do base */
        align-items: center;
        gap: 6px;
        margin: 0;                      /* zera o margin-bottom:8px do base */
        font-size: 11.5px;
        text-transform: none;           /* tira o caixa-alta duro do base */
        letter-spacing: 0.02em;
        opacity: 1;
        color: var(--fc-grafite-70);
    }
    /* Institucional + legal: espacamento consistente, divisor dourado visivel. */
    .footer-institucional {
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid var(--fc-dourado-20);
        text-align: center;
    }
    .footer-bottom {
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid var(--fc-dourado-20);
        text-align: center;
        color: var(--fc-grafite-70);
        /* O base (max-600) pinta .footer-bottom com background:rgba(0,0,0,.3)
           (separador do tema ESCURO) -> faixa cinza suja sobre o rodape claro.
           Zeramos: fundo transparente, coerente com a boutique clara. */
        background: transparent;
    }
}

/* Telefone estreito (<=380px): grade de contato em coluna unica fica mais
   limpa que 2 colunas apertadas. O base ja vira 1 coluna (linha horizontal);
   reforcamos centralizacao e respiro coerentes com o resto do rodape claro. */
@media (max-width: 380px) {
    .footer .container { padding: 0 14px; }
    .footer-info-grid { grid-template-columns: 1fr; }
    .footer-info-item {
        flex-direction: row;
        justify-content: center;
        gap: 10px;
        text-align: left;
    }
    .footer-payments-mobile { gap: 8px 14px; padding: 11px 12px; }
    .footer-about #footer-logo { max-width: min(220px, 72vw); }
}

@media (max-width: 480px) {
    .banner-smart-text h2 { font-size: 26px; }
}

/* ============================================================
   15. HERO - BANNERS DA MARCA (loja_banner_imagem / *_mobile)
   ----------------------------------------------------------------
   Slides .banner-marca.has-image montados pelo JS (construirBannersMarca).
   A arte ja traz tipografia/produtos: a imagem aparece INTEIRA, SEM corte
   nem distorcao. Em vez de forcar aspect-ratio (que estica/recorta a arte),
   deixamos a ALTURA seguir a proporcao natural da imagem: width:100% +
   height:auto. <picture> troca desktop<->mobile (cada arte tem a propria
   proporcao). Sem scrim escuro (tema claro).
   (.banner-carousel background ja definido na secao 4 - nao repetir.)
   ============================================================ */

/* Zera o aspect-ratio/max-height/object-fit:cover herdados de
   .banner-slide.has-image (base) e do tema antigo. A altura passa a ser
   ditada pela imagem -> proporcao natural, zero distorcao. */
.banner-slide.banner-marca {
    padding: 0;
    aspect-ratio: auto;
    max-height: none;
    min-width: 100%;
    background: var(--fc-marfim);
    align-items: stretch;          /* a <picture> ocupa a largura toda */
}
.banner-marca-pic {
    position: static;              /* sai do inset:0 -> deixa de ser overlay */
    inset: auto;
    display: block;
    width: 100%;
}
/* A imagem manda na altura do slide: largura cheia, altura proporcional.
   object-fit deixa de recortar porque a caixa segue a propria imagem. */
.banner-slide.banner-marca .banner-marca-pic img,
.banner-marca-pic img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 820px;            /* desktop: banner com MAIS presenca (era 600px); arte mostra inteira sem distorcao */
    object-fit: contain;          /* nunca estica; respeita a proporcao */
    object-position: center;
}

/* Legenda opcional (titulo/subtitulo) ancorada na base, sobre filete dourado.
   Discreta para nao competir com a arte; some se a marca nao preencher. */
.banner-marca-caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 22px 24px 14px;
    color: var(--fc-branco);
    background: linear-gradient(0deg,
        rgba(52, 56, 58, 0.52) 0%,
        rgba(52, 56, 58, 0.20) 55%,
        transparent 100%);
}
/* Legenda da marca ("Linha Seven Revolution"): tracos finos e delicados,
   peso leve + letter-spacing aberto = ar de etiqueta de boutique, sem
   competir com a arte. Fio dourado mais discreto (2px). */
.banner-marca-caption::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--fc-dourado), var(--fc-dourado-claro), transparent);
}
.banner-marca-titulo {
    font-family: var(--fc-display);
    font-size: 19px;               /* menor: legenda delicada, nao manchete */
    font-weight: 400;              /* tracos finos (era 700) */
    line-height: 1.15;
    letter-spacing: 0.08em;        /* aberto e elegante */
    text-shadow: 0 1px 6px rgba(0,0,0,0.30);
}
.banner-marca-sub {
    font-size: 12px;
    font-weight: 300;              /* mais fino ainda no subtitulo */
    letter-spacing: 0.04em;
    opacity: 0.92;
    text-shadow: 0 1px 5px rgba(0,0,0,0.30);
}

/* ----------------------------------------------------------------
   EFEITO LATERAL: setas + indicadores elegantes sobre a arte.
   - Setas: pastilha branca quente, ANEL dourado fino, chevron grafite
     (contraste alto sobre foto). Maior alvo de toque, sombra suave,
     micro-scale no hover. Recuadas p/ dentro (16->18px) p/ nao "colar"
     na borda e nao criar recorte feio na lateral.
   - Indicadores: tracinhos discretos; o ativo vira barra dourada.
   ---------------------------------------------------------------- */
.banner-carousel .banner-nav {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--fc-grafite);
    border: 1.5px solid var(--fc-dourado-30);
    box-shadow: 0 6px 18px -6px rgba(52, 56, 58, 0.32);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background .2s ease, border-color .2s ease,
                box-shadow .2s ease, transform .2s ease;
}
.banner-carousel .banner-nav:hover {
    background: var(--fc-dourado);
    border-color: var(--fc-dourado);
    color: var(--fc-grafite);
    box-shadow: 0 10px 26px -8px var(--fc-dourado-30);
    transform: translateY(-50%) scale(1.08);
}
.banner-carousel .banner-nav:focus-visible {
    outline: none;
    border-color: var(--fc-dourado);
    box-shadow: 0 0 0 4px var(--fc-dourado-20),
                0 6px 18px -6px rgba(52, 56, 58, 0.32);
}
.banner-carousel .banner-prev { left: 18px; }
.banner-carousel .banner-next { right: 18px; }

/* Indicadores: tracinhos discretos sobre a arte; ativo = barra dourada. */
.banner-carousel .banner-indicators { bottom: 18px; gap: 8px; }
.banner-carousel .banner-indicator {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(52, 56, 58, 0.18);
    box-shadow: 0 1px 3px rgba(52, 56, 58, 0.25);
    transition: width .2s ease, background .2s ease, border-color .2s ease;
}
.banner-carousel .banner-indicator:hover { background: var(--fc-branco); }
.banner-carousel .banner-indicator.active {
    width: 26px;
    background: var(--fc-dourado);
    border-color: var(--fc-dourado-esc);
}

@media (max-width: 768px) {
    /* Mobile: a arte -mobile (do <source>) ja e vertical; deixamos a altura
       seguir a imagem (sem aspect-ratio forcado) p/ nao recortar. */
    .banner-slide.banner-marca {
        aspect-ratio: auto;
        max-height: none;
    }
    .banner-slide.banner-marca .banner-marca-pic img,
    .banner-marca-pic img {
        max-height: 72vh;          /* equilibrio: arte vertical nao toma a tela inteira (era 78vh) */
    }
    .banner-marca-caption { padding: 18px 16px 12px; }
    .banner-marca-titulo { font-size: 19px; }
    .banner-marca-sub { font-size: 12.5px; }
    /* Setas/indicadores no mobile: mesma identidade dourado/grafite do tema
       (a regra base mobile pintava as setas de preto translucido). Menores,
       recuadas o suficiente p/ nao colar na borda nem vazar lateralmente. */
    .banner-carousel .banner-nav {
        width: 38px;
        height: 38px;
        font-size: 13px;
        background: rgba(255, 255, 255, 0.92);
        color: var(--fc-grafite);
        border: 1.5px solid var(--fc-dourado-30);
        box-shadow: 0 4px 12px -4px rgba(52, 56, 58, 0.30);
    }
    .banner-carousel .banner-prev { left: 10px; }
    .banner-carousel .banner-next { right: 10px; }
    .banner-carousel .banner-indicators { bottom: 12px; }
    .banner-carousel .banner-indicator.active { width: 22px; }
}

/* ============================================================
   16. POLIMENTO REFINADO (espacamento, alturas, hover, dourado)
   ============================================================ */

/* 16.1 Cards de produto: altura uniforme + linha de botoes ancorada na base.
   A linha do PIX e opcional e desalinhava os botoes; margin-top:auto empurra
   as acoes para baixo, deixando toda a fileira com a mesma "regua". */
.products-grid { gap: 18px; }
.product-card { border-radius: 16px; }
.product-info { padding: 14px 14px 16px; gap: 2px; }
.product-actions { margin-top: auto; padding-top: 10px; }
.product-name {
    min-height: 35px;              /* 2 linhas: nivela cards de titulo curto/longo */
}
/* (.product-pix com cor/fundo/borda ja definido na secao 6 - nao repetir.) */
/* Hover mais elegante: leve elevacao + sombra dourada quente */
.product-card:hover {
    transform: translateY(-5px);
    border-color: var(--fc-dourado);
    box-shadow: 0 14px 32px -16px rgba(52, 56, 58, 0.30),
                0 0 0 1px var(--fc-dourado-20);
}
.product-button { border-radius: 10px; letter-spacing: 0.03em; }
.product-button:hover { box-shadow: 0 6px 16px -6px var(--fc-dourado-30); }

/* 16.2 Caixa "Calcule o Frete": cartao boutique HORIZONTAL no desktop.
   Antes era um cartao estreito (460px) centralizado num bloco de 1272px -> ~406px
   de vazio de cada lado (look "solitario"). Agora vira um cartao largo, com o
   icone/titulo a esquerda e o formulario a direita, ocupando a largura util da
   secao com elegancia. Empilha no mobile (secao 14 cuida das larguras menores).
   Estrutura: .frete-calculator > .frete-icon + .frete-content(h3,p,.frete-form). */
.frete-calculator {
    max-width: 880px;
    display: flex;
    align-items: center;
    gap: 26px;
    text-align: left;
    padding: 26px 32px;
    border-radius: 18px;
    background:
        radial-gradient(120% 160% at 0% 0%, #fdf8ec 0%, var(--fc-marfim) 55%),
        var(--fc-branco);
    border: 1px solid var(--fc-dourado-20);
    box-shadow: var(--fc-sombra);
}
.frete-calculator .frete-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.frete-calculator h3 {
    font-family: var(--fc-display);
    color: var(--fc-grafite);
    letter-spacing: -0.01em;
}
.frete-calculator .frete-content > p { margin-bottom: 14px; }
/* Icone fixo a esquerda (nao encolhe); maior e elegante. */
.frete-icon {
    flex: 0 0 auto;
    margin: 0;
    width: 66px;
    height: 66px;
    background: linear-gradient(135deg, var(--fc-dourado) 0%, var(--fc-dourado-esc) 100%);
    box-shadow: 0 6px 18px -6px var(--fc-dourado-30);
}
.frete-icon i { color: var(--fc-grafite); }
/* Form alinhado a esquerda, largura confortavel (some o max-width:280px centrado do base). */
.frete-calculator .frete-form { max-width: 420px; margin: 0; }
.frete-form input {
    border: 1.5px solid var(--fc-linha);
    border-radius: 10px;
}
.frete-form input:focus {
    border-color: var(--fc-dourado);
    box-shadow: 0 0 0 4px var(--fc-dourado-12);
    outline: none;
}
.frete-form button { border-radius: 10px; letter-spacing: 0.03em; }

/* Frete calculator empilhado e centrado abaixo de 700px (cartao horizontal nao
   cabe confortavel em telas estreitas). Volta ao layout vertical do base. */
@media (max-width: 700px) {
    .frete-calculator {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 14px;
        max-width: 460px;
        padding: 28px 22px;
    }
    .frete-calculator .frete-content { align-items: center; }
    .frete-icon { width: 60px; height: 60px; }
    .frete-calculator .frete-form { margin: 0 auto; }
}

/* (16.3 removido: o selo ANVISA deixou de ser a imagem injetada pelo JS
   #selo-anvisa-badge - agora e o badge transparente .footer-trust da secao 12.
   A imagem do JS e suprimida la; este bloco com !important virou CSS morto.) */

/* 16.4 Tipografia dos titulos de secao: mais ar e fio dourado consistente */
.section-header { margin-bottom: 22px; }
.section-header h2 {
    font-size: clamp(20px, 2.4vw, 26px);
    letter-spacing: -0.01em;
}
.section-header h2::after {
    width: 52px;
    background: linear-gradient(90deg, var(--fc-dourado), var(--fc-dourado-claro));
}

/* 16.5 Selos de confianca (.features-grid): alturas uniformes + icone em medalhao */
.section-dark .features-grid { gap: 16px; }
.feature-item {
    border-radius: 16px;
    padding: 26px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.feature-item i {
    width: 56px; height: 56px;
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 12px;
    border-radius: 50%;
    font-size: 22px;
    color: var(--fc-dourado-esc);
    background: var(--fc-dourado-12);
    border: 1px solid var(--fc-dourado-20);
}
.feature-item h4 { font-size: 15px; margin: 0 0 4px; }
.feature-item p { font-size: 12.5px; margin: 0; }
.feature-item:hover {
    transform: translateY(-4px);
    border-color: var(--fc-dourado);
    box-shadow: var(--fc-sombra);
}
.feature-item:hover i {
    background: var(--fc-dourado);
    color: var(--fc-grafite);
    border-color: var(--fc-dourado);
}

/* ============================================================
   17. RESPONSIVO - AJUSTES FINOS (1024 / 480) + CONSISTENCIA DOURADO
   ============================================================ */

/* Tablet / desktop estreito: hero da marca um pouco mais contido e
   legenda proporcional. */
@media (max-width: 1024px) {
    .banner-slide.banner-marca .banner-marca-pic img,
    .banner-marca-pic img { max-height: 640px; }   /* tablet: banner maior (era 480px), ainda sem distorcao */
    .banner-marca-caption { padding: 20px 22px 13px; }
    .banner-marca-titulo { font-size: 18px; }
    /* Setas um pouco mais contidas no tablet */
    .banner-carousel .banner-nav { width: 44px; height: 44px; }
    .banner-carousel .banner-prev { left: 14px; }
    .banner-carousel .banner-next { right: 14px; }
    .frete-calculator { max-width: 100%; }
}

/* Desktop amplo: rodape com respiro classico (o base usa gap 48px so aqui;
   como o tema vence a cascata em todas as larguras, restauramos um gap
   generoso a partir de 1024px - colunas bem espacadas e alinhadas). */
@media (min-width: 1024px) {
    /* 3 colunas (About / Contato / Pagamento): a coluna "Endereco" foi
       escondida (endereco unico na linha legal). Alinhadas e espacadas. */
    .footer-grid {
        grid-template-columns: 1.4fr 1fr 1fr;
        gap: 40px;
        padding-bottom: 22px;
    }
    .footer { padding-top: 40px; }
    .footer-institucional-links { gap: 6px 20px; }
}

/* Tablet (601-1023): rodape em 2 colunas (base) com gap intermediario.
   Coluna "Endereco" oculta -> 3 colunas visiveis acomodam em 2 trilhas. */
@media (min-width: 601px) and (max-width: 1023px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px 32px; }
}

/* Telefone pequeno: botoes e legenda delicados, sem perder o alvo de toque. */
@media (max-width: 480px) {
    .banner-marca-caption { padding: 14px 14px 11px; }
    .banner-marca-titulo { font-size: 17px; letter-spacing: 0.06em; }
    .banner-marca-sub { font-size: 11.5px; }
    /* CTA revendedor: texto branco e legivel mesmo no chip menor + alvo de toque */
    .cta-atacado-btn-primary { font-size: 0.78rem; padding: 11px 16px; min-height: 44px; }
    .cta-atacado-btn-secondary { padding: 11px 16px; min-height: 44px; }
    /* Botoes do card e "carregar mais": padding confortavel; o alvo de 44px
       ja vem do base (coarse-pointer), aqui garantimos altura tambem por CSS. */
    .product-button, .product-details-btn { padding: 11px 10px; font-size: 12px; min-height: 44px; }
    .btn-carregar-mais { width: 100%; justify-content: center; min-height: 44px; }
}

/* Alvo de toque dos botoes redondos do header (carrinho/cliente): o base os
   deixa em 38px no mobile - abaixo do minimo de 44px. Em telas de toque,
   elevamos p/ 44px (acoes primarias, carrinho inclusive). */
@media (hover: none) and (pointer: coarse) {
    .btn-cliente, .btn-cart {
        width: 44px;
        height: 44px;
        min-height: 44px;
    }
    /* Anula o lift de hover do card (sticky-hover em toque deixa o card "preso"
       elevado). O base ja zera .product-card:hover; reforcamos o do tema. */
    .product-card:hover { transform: none; }
}

/* ============================================================================
   18. CTA PRIMARIO DEFINITIVO  -  DOURADO ESCURO + TEXTO BRANCO (AA)
   ----------------------------------------------------------------------------
   PROBLEMA RECORRENTE (resolvido aqui de forma SISTEMICA, 2026-06-15):
   o tema vinha pintando TODO botao primario com dourado CLARO (#d1aa3c) e
   texto GRAFITE. Tecnicamente passa AA (5.37:1), mas visualmente e o classico
   "preto no amarelo" que o dono rejeita. A correcao pontual (botao a botao)
   sempre deixava algum caso escapar (o bug "voltava").

   SOLUCAO CANONICA: um UNICO bloco mapeia TODOS os CTAs primarios da marca
   para uma RECEITA unica:
       - fundo: gradiente DOURADO ESCURO  (--fc-cta -> --fc-cta-2)
       - texto/icone: BRANCO em NEGRITO
   Contraste branco sobre #806012 = 5.83:1, sobre #6f520f = 7.27:1 (AA folgado
   em todo o gradiente). A lista de seletores espelha o bloco "REBRAND" final
   do loja-final.css (a fonte da verdade dos CTAs primarios), entao nenhum
   botao dourado fica de fora. Botoes SECUNDARIOS (grafite, outline) NAO entram
   aqui: continuam grafite/branco como ja estavam.

   ISOLAMENTO: arquivo so carrega para este tenant; a Jota nunca e afetada.
   ESPECIFICIDADE: seletores de 1-2 classes, posicionados no FIM do bundle ->
   vencem o bloco REBRAND do base por ordem da cascata, sem !important novo.
   ========================================================================= */
:root {
    /* Dourado ESCURO para CTA (garante texto BRANCO em AA). Distinto do
       --fc-dourado claro (acento/realce) e do --fc-dourado-esc (hover/texto). */
    --fc-cta:      #806012;   /* base do gradiente (branco = 5.83:1) */
    --fc-cta-2:    #6f520f;   /* fim do gradiente (branco = 7.27:1) */
    --fc-cta-hi:   #8f6b14;   /* topo do hover (branco = ~4.8:1) */
    --fc-cta-ink:  #ffffff;   /* texto/icone branco */
    --fc-cta-grad:       linear-gradient(135deg, var(--fc-cta) 0%, var(--fc-cta-2) 100%);
    --fc-cta-grad-hover: linear-gradient(135deg, var(--fc-cta-hi) 0%, var(--fc-cta) 100%);
    --fc-cta-shadow:     0 6px 18px -6px rgba(111, 82, 15, 0.45);
    --fc-cta-shadow-hi:  0 10px 24px -8px rgba(111, 82, 15, 0.55);
}

/* RECEITA UNICA dos CTAs primarios dourados.
   Inclui: header (busca, carrinho), cards (Adicionar), "Ver todos / Carregar
   mais", combos, frete, cupom (Aplicar), modal (Adicionar), popup (Quero meu
   desconto / Quero ser revendedor), carrinho (Finalizar pelo Site, "Ver
   Produtos" do vazio) e os 3 CTAs do hero (Ver produtos / Aproveitar agora). */
.search-box button,
.btn-cart,
.product-button,
.product-button.added,
.btn-carregar-mais,
.btn-ver-todos,
.combo-buy,
.combo-actions .combo-buy,
.combo-modal-buy,
.combo-modal-badge,
.frete-form button,
.cupom-input-group button,
#btn-aplicar-cupom,
.btn-modal-add,
.btn-submit,
.rev-submit,
.btn-checkout.btn-site,
.cart-empty button,
.banner-smart-cta,
.banner-smart-cta.cta-pix {
    background: var(--fc-cta-grad);
    color: var(--fc-cta-ink);
    border-color: var(--fc-cta-2);
    font-weight: 700;
    box-shadow: var(--fc-cta-shadow);
    text-shadow: none;
}
/* Icone branco junto do texto branco (vence o "color:var(--on-primary)" do base
   p/ os <i> destes botoes). */
.search-box button i,
.btn-cart i,
.product-button i,
.btn-carregar-mais i,
.btn-ver-todos i,
.combo-buy i,
.combo-modal-buy i,
.frete-form button i,
.cupom-input-group button i,
#btn-aplicar-cupom i,
.btn-modal-add i,
.btn-submit i,
.rev-submit i,
.btn-checkout.btn-site i,
.cart-empty button i,
.banner-smart-cta i {
    color: var(--fc-cta-ink);
}
/* Hover/focus dos CTAs primarios: clareia levemente o dourado escuro, mantem
   texto branco (continua AA) + sombra mais presente. */
.search-box button:hover,
.btn-cart:hover, .btn-cart:active,
.product-button:hover, .product-button:active,
.btn-carregar-mais:hover:not(:disabled),
.btn-ver-todos:hover,
.combo-buy:hover,
.combo-actions .combo-buy:hover,
.combo-modal-buy:hover,
.frete-form button:hover,
.cupom-input-group button:hover,
#btn-aplicar-cupom:hover,
.btn-modal-add:hover,
.btn-submit:hover,
.btn-checkout.btn-site:hover,
.cart-empty button:hover,
.banner-smart-cta:hover,
.banner-smart-cta.cta-pix:hover {
    background: var(--fc-cta-grad-hover);
    color: var(--fc-cta-ink);
    box-shadow: var(--fc-cta-shadow-hi);
    filter: none;
}
.search-box button:focus-visible,
.btn-cart:focus-visible,
.product-button:focus-visible,
.btn-carregar-mais:focus-visible,
.btn-ver-todos:focus-visible,
.frete-form button:focus-visible,
.cupom-input-group button:focus-visible,
.btn-modal-add:focus-visible,
.btn-submit:focus-visible,
.btn-checkout.btn-site:focus-visible,
.banner-smart-cta:focus-visible {
    outline: 2px solid var(--fc-cta-2);
    outline-offset: 2px;
}

/* Contador do carrinho (.cart-badge): permanece grafite com texto branco
   (ja definido na secao 2) -> NAO vira dourado. So garantimos que o botao
   redondo do carrinho (.btn-cart) acima ficou dourado-escuro com icone branco. */

/* "Comprar agora" (modal) e "Finalizar pelo WhatsApp" sao SECUNDARIOS grafite:
   reafirma texto branco sobre grafite (caso o bloco REBRAND tente clarear). */
.btn-modal-buy, .btn-checkout.btn-whatsapp { color: var(--fc-marfim); }
.btn-modal-buy i, .btn-checkout.btn-whatsapp i { color: var(--fc-marfim); }

/* ----------------------------------------------------------------------------
   18.1  CARRINHO (gaveta)  -  cabecalho dourado-escuro + boutique, sem roxo
   ----------------------------------------------------------------------------
   Cabecalho do carrinho passa de dourado-CLARO+grafite (preto-no-amarelo) para
   dourado-ESCURO + texto/icone BRANCO (mesma receita dos CTAs). Botao fechar
   (X) vira pastilha translucida clara sobre o dourado escuro (branco = AA).
   ---------------------------------------------------------------------------- */
.cart-header {
    background: var(--fc-cta-grad);
    color: var(--fc-cta-ink);
}
.cart-header h3 { color: var(--fc-cta-ink); }
.cart-header h3 i { color: var(--fc-cta-ink); }
/* Botao fechar (X): pastilha translucida ESCURA (nao clara) p/ o X branco
   manter alto contraste sobre o cabecalho dourado-escuro (X branco sobre
   ~#5a440d = ~7:1). Borda clara fina p/ recortar do fundo. */
.cart-header button {
    color: var(--fc-cta-ink);
    background: rgba(52, 40, 6, 0.32);
    border-color: rgba(255, 255, 255, 0.55);
}
.cart-header button i { color: var(--fc-cta-ink); }
.cart-header button:hover, .cart-header button:focus-visible {
    background: rgba(52, 40, 6, 0.48);
    border-color: var(--fc-cta-ink);
    color: var(--fc-cta-ink);
}

/* Item do carrinho: cartao marfim com filete dourado fino (mais boutique e
   organizado; o base deixava so um cinza chapado). */
.cart-item {
    background: var(--fc-branco);
    border: 1px solid var(--fc-dourado-20);
    border-radius: 12px;
    gap: 12px;
}
.cart-item img { border: 1px solid var(--fc-linha); }
.cart-item-info h4 { color: var(--fc-grafite); }
.cart-item-info .price { color: var(--fc-dourado-esc); }
/* +/- de quantidade: branco com borda dourada (legivel), hover dourado-escuro
   com icone branco (AA). Texto/numero grafite. */
.cart-item-qty button {
    border-color: var(--fc-dourado-30);
    color: var(--fc-grafite);
}
.cart-item-qty button:hover,
.cart-item-qty button:focus-visible {
    background: var(--fc-cta);
    border-color: var(--fc-cta-2);
    color: var(--fc-cta-ink);
}
.cart-item-qty button:hover i,
.cart-item-qty button:focus-visible i { color: var(--fc-cta-ink); }
.cart-item-qty span { color: var(--fc-grafite); }
/* Remover item: o base usa VERMELHO (--danger), gritante na boutique.
   Vira pastilha grafite-suave outline; hover grafite solido com icone branco. */
.cart-item-remove {
    background: var(--fc-creme);
    border: 1.5px solid var(--fc-linha);
    color: var(--fc-grafite-70);
}
.cart-item-remove i { color: var(--fc-grafite-70); }
.cart-item-remove:hover,
.cart-item-remove:focus-visible {
    background: var(--fc-grafite);
    border-color: var(--fc-grafite);
    color: var(--fc-marfim);
    box-shadow: 0 2px 8px rgba(52, 56, 58, 0.30);
}
.cart-item-remove:hover i,
.cart-item-remove:focus-visible i { color: var(--fc-marfim); }

/* ----------------------------------------------------------------------------
   18.2  CUPOM (gaveta)  -  remove ROXO/VIOLETA -> creme/dourado boutique
   ----------------------------------------------------------------------------
   O base pinta a caixa de cupom em LILAS (#f3e8ff->#e4ccff, borda #8200ff,
   titulo #5a00b3, icone #8200ff). Off-brand. Vira cartao creme com filete
   dourado, titulo grafite e icone dourado. "Cupom aplicado" e "erro" ganham
   tons neutros coerentes (verde de sucesso discreto, erro grafite-vermelho
   sobrio). O botao "Aplicar" ja entrou na receita CTA dourado-escuro acima.
   ---------------------------------------------------------------------------- */
.cart-cupom-box {
    background: linear-gradient(135deg, var(--fc-creme) 0%, #f7efe2 100%);
    border: 1.5px dashed var(--fc-dourado-30);
}
.cupom-header { color: var(--fc-grafite); }
.cupom-header i { color: var(--fc-dourado-esc); }
.cupom-input-group input {
    border-color: var(--fc-dourado-20);
    color: var(--fc-grafite);
}
.cupom-input-group input:focus {
    border-color: var(--fc-dourado);
    box-shadow: 0 0 0 3px var(--fc-dourado-12);
}
/* Cupom aplicado: verde-sucesso discreto com filete; texto legivel. */
.cupom-aplicado {
    background: #eaf4ec;
    border: 1px solid #bcd9c2;
}

/* Mobile: campos de formulario com no minimo 16px evitam o zoom automatico do
   iOS ao focar (checkout CPF/CEP/WhatsApp/endereco, busca, cupom, observacoes).
   Escopo do tema do tenant (so Fino Cheiro): nao afeta a Jota. */
@media (max-width: 600px) {
    input, select, textarea,
    .checkout-modal input, .checkout-modal textarea,
    .search-box input, #checkout-obs {
        font-size: 16px;
    }
}
.cupom-tag { color: #2f6b3a; }
.cupom-tag i { color: #3c8a4a; }
/* Botao remover cupom: neutro grafite (era vermelho). */
#btn-remover-cupom { background: var(--fc-creme); color: var(--fc-grafite-70); }
#btn-remover-cupom:hover { background: var(--fc-creme-2); color: var(--fc-grafite); }
.cupom-erro {
    background: #faf0ef;
    border: 1px solid #e6c9c6;
    color: #9a3b34;
}

/* ----------------------------------------------------------------------------
   18.3  CTA ATACADO "Saber mais" (secundario sobre faixa grafite escura)
   ----------------------------------------------------------------------------
   No banner grafite, o secundario era tint dourado quase transparente: o texto
   marfim mal aparecia (na pratica sumia). Reforcamos: fundo branco translucido
   mais solido + borda dourada clara + texto BRANCO. (branco sobre o banner
   grafite escuro = AA). O "Seja um revendedor" primario ja e dourado-escuro
   com texto branco na secao 8.
   ---------------------------------------------------------------------------- */
.cta-atacado-btn-secondary {
    background: rgba(255, 255, 255, 0.14);
    color: var(--fc-branco);
    border: 1.5px solid var(--fc-dourado-claro);
}
.cta-atacado-btn-secondary:hover,
.cta-atacado-btn-secondary:focus {
    background: rgba(255, 255, 255, 0.24);
    border-color: var(--fc-dourado);
    color: var(--fc-branco);
}

/* ----------------------------------------------------------------------------
   18.4  "Minha Conta" (.btn-cliente): icone dourado-claro sobre branco dava
   2.99:1 (FAIL). Sobe p/ dourado-escuro --fc-dourado-esc (#b6902c sobre branco
   = 3.96... ainda baixo p/ texto, MAS e icone grande/decorativo). Para garantir
   AA real, usamos grafite no icone (11:1) com borda dourada -> le como botao de
   marca sem o problema de contraste. Hover dourado-escuro + icone branco.
   ---------------------------------------------------------------------------- */
.btn-cliente {
    color: var(--fc-grafite);
    border-color: var(--fc-dourado);
}
.btn-cliente i { color: var(--fc-grafite); }
.btn-cliente:hover, .btn-cliente:active {
    background: var(--fc-cta);
    border-color: var(--fc-cta-2);
    color: var(--fc-cta-ink);
}
.btn-cliente:hover i, .btn-cliente:active i { color: var(--fc-cta-ink); }

/* ----------------------------------------------------------------------------
   18.5  HERO  -  banner "mais desejados/queridinhos": titulo + CTA legiveis
   ----------------------------------------------------------------------------
   O hero "smart" (palco creme) ja tem texto grafite (secao 4). Os CTAs do hero
   ("Ver produtos", "Aproveitar agora") agora sao dourado-escuro + branco (na
   receita acima): a "letra branca" pedida fica garantida e some o preto-no-
   amarelo. O "Ver combos" continua grafite solido com texto dourado-claro
   (7.6:1) - bom contraste e contraste de cor com os primarios.
   ---------------------------------------------------------------------------- */
.banner-smart-cta.cta-combo {
    background: var(--fc-grafite);
    color: var(--fc-dourado-claro);
    border-color: var(--fc-grafite);
    box-shadow: 0 6px 18px -8px rgba(52, 56, 58, 0.45);
}
.banner-smart-cta.cta-combo i { color: var(--fc-dourado-claro); }
.banner-smart-cta.cta-combo:hover {
    background: #23262a;
    color: var(--fc-dourado-claro);
    box-shadow: 0 10px 24px -8px rgba(52, 56, 58, 0.55);
}

/* Indicador ativo do carrossel: dourado-ESCURO (era dourado claro). Sem texto,
   so harmoniza com os CTAs e evita qualquer "amarelo chapado". */
.banner-carousel .banner-indicator.active {
    background: var(--fc-cta);
    border-color: var(--fc-cta-2);
}